코드로 브랜딩 하기: 다이나믹 로고 제너레이터
대학원 미디어아트 수업에서 스테판 사그마이스터의 Casa Da Musica의 브랜드 아이덴티티 작업을 보고 신선한 충격을 받았던 기억을 잊을 수가 없다. 렘쿨하스의 건축물도 놀랍지만, 그 외형을 살려서 만든 로고가 단순히 하나의 이미지가 아니라 여러 가지 형태와 색으로 변화한다는 사실에 놀랐다. 그 전까지는 로고라는 것은 항상 멈춰 있는 것이었기 때문이다. 그의 다음 이 말은 왜 그가 다이나믹 로고를 만들었는지 잘 표현해 준다.
“In branding, sameness is overrated.”
그렇지만 내가 더 놀란 것은 따로 있다. 브랜드 작업을 해본 사람은 알겠지만, 로고는 최소한 블랙&화이트 등 여러 가지 버전을 만들어야 한다. 다양한 곳에 사용될 것을 염두에 두어야 하기 때문이다. 그리고 어떤 컬러 배경에는 사용하지 못한다든지 하는 일종의 제약, 사용 규칙이 항상 있다.
스테판 사그마이스터와 그의 동료는 매 번 바뀌는 홍보 포스터에 적합한 로고를 사용할 수 있는 프로그램을 만들었다. 포스터에서 주요 컬러를 샘플링하여 그 컨텍스트와 컨셉에 정확히 들어맞는 로고를 만들기 위해서였다. 또한 로고의 다양성이 있기 때문에 크기와 색을 조절하여 포스터의 조형적 요소로 활용할 수도 있다.
Dynamic Logo
얼마 후 MIT Media Lab의 로고가 등장했는데 이것 또한 매우 놀라웠다. 프로세싱으로 만들었는데, 정해진 사각형 안에서 세 개의 빛줄기가 자유롭게 움직였다. 형태는 매우 다양했지만, 어떻게 봐도 MIT Media Lab인 것을 알 수 있었다. 그리고 다양한 랩들의 집합체라는 점을 표현해 주기에도 적절했다. (얼마 전에 펜타그램은 같은 그리드를 살려서 각 랩의 아이덴티티를 더 확고히 할 수 있는 새로운 로고를 제시했다.)
다이나믹 로고는 살아 움직이는 브랜드이기 때문에 다양한 모습을 보여줄 수 있으며, 스토리텔링 측면에서 강점을 가지고 있다.
그렇지만 이런 형식의 로고는 주로 아트적이거나 실험적인 곳에 사용되는 경향이 있다. 일반적인 심볼이나 텍스트 로고보다 시인성이 떨어질 수 있고, 어플리케이션에 적용하기 어려운 점 있기 때문이다. 그래서 위의 두 예시에서는 실제로 사용하기 위해 인터랙티브한 프로그램을 만든 것을 알 수 있다.
뉴욕의 휘트니 뮤지엄도 다이나믹 로고를 차용하고 있는데, 이런 브랜딩 시스템을 잘 관리하는 담당자가 있을 것으로 생각한다. 그 외에도 우리가 잘 아는 MTV나 OCAD University 등이 다이나믹 로고를 사용하고 있다.
우리는 위의 예시들로부터 다이나믹 로고를 100% 활용하려면 내부에서 그 브랜딩을 잘 이해하고 지속적으로 관리할 사람이 있거나, 혹은 ‘잘 짜여진 프로그램’이 필요하다는 것을 알 수 있다.
그 프로그램은 어떻게 만들어지는 것일까?
New Brand, New Breath
Bespin Global의 새 브랜드는 우리 회사 브랜드 디렉터님이 만들었다. Bespin Global은 AWS나 Azure 등 다양한 클라우드 서비스를 통합 관리하는 서비스이다. 로고는 서비스의 핵심인 사용자 데이터를 나타내는 점(dot)과 데이터 송수신을 의미하는 화살표(arrow), 그리고 클라우드 서비스(clouds)로 구성되어 있다.
다양한 클라우드 서비스를 의미하는 구름은 다양한 모양과 색으로 변형이 가능하며, 고정된 dot과 arrow가 변형되는 로고의 시인성을 확보하도록 설계하였다.
made by 브랜드 디렉터 June
Reverse Engineering
프로그램을 만들기 위해 처음 한 일은 디자인으로부터 거꾸로 규칙을 찾아내는 것이었다. 예시로 만들어진 여러 개의 로고를 보고, 그 안에서 공통된 수학적 규칙을 찾아내는 작업부터 시작했다. 그래야만 원래 의도에서 벗어나지 않으면서도 확장가능한 로고를 만들 수 있기 때문이다.
하나의 구름은 여러 개의 원, 혹은 모서리가 둥근 사각형의 조각로 이루어져 있었다. 각 조각의 갯수, 모양, 방향, 색 등이 어떻게 조합되는지에 따라 무수히 많은 모양의 구름이 만들어질 수 있다.
Prototyping with Processing
찾아낸 규칙을 통해 어떤 모양의 로고가 만들어지는지 테스트하기 위해서 처음에는 가장 편한 툴인 프레이머를 생각했다. 하지만 UI 프로토타이핑에 최적화된 툴이라서 여러 가지 제약이 있었다. 그래서 자유로운 그래픽과 네이티브 자바를 사용할 수 있고 미디어 아트에 많이 사용되는 프로세싱으로 테스트를 해보기로 했다.
프로세싱으로 만든 이 프로그램은 ‘생성’ 버튼을 누르면 벡터 파일로 즉시 출력이 가능했고, 위의 비디오와 같이 스케치로 가져와서 색을 바꾸거나 하는 등의 후가공을 할 수 있었다.
하지만 벡터 출력 기능을 활용하기 위해서는 온라인이 아닌 반드시 컴퓨터에서 사용해야 했고, 레니타를 지원하지 않았기 때문에 다른 대안을 생각하게 되었다.
그렇지만 찾아낸 규칙을 더 정교화하고, 구름의 형태가 어떻게 만들어지는지 확인할 수 있었다.
Developing with PaperJS
이 로고 제너레이터 프로그램의 가장 중요한 목적은 사용자가 로고를 쉽게 만들고 활용하게 하는 것임으로, 쉽게 접근이 가능한 웹앱이 가장 좋은 솔루션이라고 생각했다.
먼저 벡터 애니메이션을 제작할 수 있는 자바스크립트 라이브러리를 찾아봤다. 결정하는데 제일 우선순위는 벡터 파일로 익스포트가 가능한가 였다. 여러 라이브러리 중에 PaperJS가 가장 탁월해 보였다. 벡터 다운로드 기능도 있을 뿐만 아니라, API도 쉽고 자세하게 설명이 되어 있었다.
프로세싱에서 이미 자바로 작성한 코드가 있으므로, 같은 로직으로 자바스크립트로 변환하였다. 여기서는 구름의 모양이 바뀔 때마다 자연스럽게 전환되는 애니메이션을 추가했는데, 이 모션이 자연스럽도록 로직을 약간 수정해야 했다.
코드 중 일부그렇게 최종 웹앱 버전이 만들어졌다. 아래 사이트에서 확인할 수 있다. (PC버전)
Dynamic Identity Generator →
Wrapping Up
스테판 사그마이스터가 했던 브랜드의 정신을 이어받아 이번 작업을 했다는 것은 매우 흥분되는 일이었다. 또한 브랜드 디렉터님과 작업하면서, 브랜딩과 코드가 만날 때 많은 가능성이 있다는 것을 탐구하는 시간이었다. 꼭 다이나믹 로고가 아니더라도 브랜드와 코드가 만나 시너지를 창출할 수 있는 가능성은 무궁무진할 것이다.
다만 많은 시간을 투자할 수 없었던 사이드 프로젝트기에 몇 가지 아쉬움이 남는다.
원본 로고 디자인에는 blob 효과가 적용된 구름이 있었는데, 이것까지 프로그램에 포함시키지는 못했다.
당시에 베스핀 글로벌 내부에 이 프로그램을 잘 활용할 사람이 없었기에, 실제 작업에서의 활용이 아닌 홍보용 정도로 쓰인 것이 아쉽다.
비디자이너가 사용하게 하려면 더 친절하게 만들어야 한다. 예를 들면, 일러스트레이터 같은 다른 프로그램을 거치지 않고 바로 웹에서 명함을 만들어 출력소로 보내는 것이다.
발빠른 기업들은 디자인을 점점 자동화하고 있고, 디자이너의 역할은 기존 틀에서 벗어나 더 창의적이고 높은 수준의 스킬을 요구하고 있는 것 같다.
디자이너의 다음 스텝은 무엇일까? 아예 디자인 시스템을 설계하는 역할을 하거나, 디자인 장인이 되거나, 혹은 블록체인이나 VR 등 아직 무르익지 않은 곳에서 사용자 경험을 만들어 가는 것일 것이다. 아니면 PM이 되어 승무원들과 함께 신대륙을 개척하는 모험을 떠날 수도 있겠다.
읽어주셔서 감사합니다.
댓글은 언제나 환영입니다.
참고 자료:
Stefan Sagmeister - Casa da Musica - Rem Koolhaas
