반응형 브랜딩(Responsive Branding)

디자인도, 개발처럼 픽셀단위로 '반응'하는 디자인이 불가능할까

  이 연구가 하나의 글로 정리될 것이라 생각하지 않으며, 디자인계에 혹은 개발계에 굉장한 영향을 끼치진 않을 것이다. 하지만 꾸준하게 이것에 대해 생각해보려고 한다.

  개인을 표현한 브랜드부터 기업의 브랜드, 국가의 브랜드까지. 자길 알아봐 달라고 호소하는 브랜드가 넘쳐난다. 그래서 그런지 그 속에서 자신의 브랜드가 빛나기 위해 클라이언트들이 자기 브랜드의 로고가 "크게, 눈에 띄게, 잘 보이게" 요구한다.

  하지만 디자이너에게 이 요구는 호소를 넘어 로고를 들이밀고 애원하는 것으로 보인다. 

이런 느낌을 단순히 "그건 안 예뻐요."라고 말하지만, 적어도 나는 브랜드를 디자인할 때 "이 브랜드가 적재적소 하게, 그런데도 은은하게, 알아보는 이들끼리 '어 너도 그 브랜드 아니? 나돈데.' 하게 느껴지고, 이 브랜드를 이용하는 것에 자부심을 느낄 수 있기를" 기원한다. 

  호소하고 애원하기보다 "이렇게 느껴지도록" 고민하는 영역에 도달하게 된 것 같다. 마치 잘 빠진 곡선의 M을 보면 맥도널드가 떠오르고 청록의 두꺼운 영문서체를 보면 스타벅스가 생각나듯 적절한 규칙을 제공하고 이를 

화면 혹은 대지의 크기, 재질, 콘셉트에 맞춰 브랜드가 느껴지도록 적용한다면 규칙으로 표현된 시각적 '이미지'가 곧 브랜드를 떠올리게 한다.

  이를 나는 플렉시블 아이덴티티(FI: Flexible Identity, 이하 FI)에서 알게 되었다. 이 글은 FI에 대해 설명하고자 함은 아니라 깊고 정확하게 설명할 순 없어 간단하게 말하자면 앞서 말한 화면의 크기와 같은 다양한 외부요인에 의해 나의 브랜드의 이미지가 훼손되지 않고 일관되게 보일 수 있도록 규칙을 구축하고, 유연하게 대응하는 것이다.

  다른 사람의 혹은 기업의 프로젝트를 감히 가져와 얘기하는 것은 실례일 수 있으므로 대학교 졸업작품으로 제작한 프로젝트를 예시를 들려고 한다.

  '감영길 예술가의 거리'는 충남 공주시에 위치해 캘리그래피, 사진, 가죽공방, 민화 등을 다루는 다양한 예술가들이 모인 곳이다. 일자로 쭉 이어져 끝에 양쪽의 길로 나뉘는 형태의 골목길이다. 주변에 갤러리 및 카페도 많아 관광지로 손꼽힌다.

비정기적으로 야간 행사를 열어 예술가들이 각자의 부스를 준비하여 예술품을 판매하는데 한 줄로 쭉 이어진 부스들이 연결된 이 골목길을 그 밤에 동네 사람들이 구경하러 모이는데, 다들 어디에 계셨었는지 모를 정도로 많은 인파에 놀라게 된다.

이 일자로 된 골목길이 특이하다는 생각에 이 형태를 형상화한 심벌을 제작하였다. 그리고 이 심벌의 느낌을 전달할 수 있는 레터 타입을 제작하고 함께 사용하여 로고로 활용한다. 색상은 바닥의 파란색이 도로와 길을, 글자의 살구색은 이 길에 구경 나온 사람들을 뜻한다.

  나는 이 프로젝트에서 '감영길 예술가의 거리'라는 풀네임이 너무나 길다고 느껴졌고 적절한 비례, 규칙을 적용하여 한 줄로, 두 줄로, 세 줄로 쓴 버전을 만들어 이 로고를 활용해야 할 대지, 화면, 재질에 따라 유연하게 사용할 수 있도록 했다. 그리고 심벌은 어떤 크기의 대지에 활용하더라도, 양 끝의 5% 정도를 남기고 심벌의 길이가 길어지는 규칙도 만들어 이 일자의 골목길의 형태를 일관성 있게 인식할 수 있도록 했다.

유연하게 1~3줄의 형태로 변형되는 감영길 예술가의 거리 FI

  하지만 이런 적절한 비례와 규칙을 적용하려고 해도, 새로운 대지와 새로운 크기가 나오면 디자이너로서 새로 그 크기에 맞춰 로고와 심벌을 수동으로 제작해야 했다. 예를 들면, A4용지 크기의 팩스문서를 디자인하여 앞서 말한 규칙을 적용하면 심벌은 A4 길이에 맞춰서 디자인을 제작하고, 웹사이트를 만들어 가로 1920px 해상도의 화면에서 보면 1920px 길이에 맞춘 심벌도 따로 만들어줘야 적용 가능하다. 키오스크를 만들면? 모바일 웹을 만들면? 파비콘을 만들게 되면? 현수막을 만들면? 명함을 만들면?

  이런 수동의 과정들이 과연 플렉시블(Flexible)한가?라는 고민을 하고 있었다. 

디자이너가 정말 적절한 규칙을 제작했다면 특별한 상황이 아닌 이상, 그 규칙에 맞춰 유용하게 브랜드 이미지를 제공할 수 있어야 한다. 나는 이를 반응형 웹(Responsive Web)에서 착안해보려 한다.

반응형 웹의 특징을 브랜딩에 가져오는 반응형 브랜딩

  디자인 얘기했다가, 갑자기 코딩 얘기도 한다니?

  반응형 웹의 유용함, 장점 등의 얘기보다 내가 착안하게 된 원리만 설명해보자면 반응형 웹은 웹사이트를 열은 기기의 화면에 따라 '자동으로' 변하도록 만드는 접근법이다. 모바일, 태블릿, 더 큰 태블릿, 누운 태블릿, 노트북, 키오스크, 데스크톱, TV 등 내가 그 웹사이트를 열은 기기의 종류에 따라 자동으로 유연하게 보여주는 것이다.

  이런 특징을 가지고 브랜딩에 적용해보면 어떨까?

라는 생각이 들었다. 앞서 만든 '감영길 예술가의 거리'의 규칙을 가지고 '반응형 브랜딩(Responsive Branding, 이름은 내가 임의로 정한 것이며 누군가 정확하게 정의하진 않았어서 적절한 이름을 찾지 못했다.)'을 만들어보기로 한다. 

아래 사이트에서 확인 가능하다.

https://responsive-branding.web.app/

  이전에 나처럼 디자인을 전공하여 개발자의 길로 뛰어든 한 지인이 한 말이 있었다.

"데이터를 가져와서 뿌리고 그러는 건 어차피 밟게 될 프로세스인데, 내가 디자이너였다는 장점을 더 살려서 더 재밌는 걸 만들어보고 싶다"라고. 그 첫 발을 한 번 이 반응형 브랜딩으로 시작해보려 한다. 주변에 모집을 해보고 만들어볼 사람을 구해볼 생각이다.