하토는 일러스트레이션 페스티벌 픽미업 브랜딩의 하나로 협업형 온라인 타이포그래피 도구를 만들었다.
 
 
 
하토
HATO

STUDIOHATO.COM
 
 
 
프로젝트 개요
하토는 작년에 처음으로 일러스트레이션 페스티벌 픽미업(Pick Me Up)에 참여했다. 우리는 그 경험을 바탕으로 ‘하토와 배우기’라는 프로그램과 스튜디오 근처에 오프라인 매장을 시작했고, 그 이후 서머셋 하우스는 우리를 찾아와 픽미업 페스티벌의 아이덴티티 제작을 의뢰했다. 서머셋은 오랫동안 픽미업의 아이덴티티로 유지해온 ‘유토피아’라는 주제가 반영되길 바랐고 우리는 이 주제를 ‘커뮤니티’로 해석하여 확장 적용했다. 픽미업은 런던 중심부에서 열리지만 이스트런던이나 사우스이스트런던에 국한되지 않고 보다 넓은 지역을 대상으로 존재감을 확실히 하고 있다. 우리는 이 광범위한 커뮤니티를 활용하여 대중을 디자인 협업 과정에 초대하는 아이디어를 떠올렸고 사람들이 직접 글자를 디자인할 수 있는 도구를 제작하기로 했다. 마침 언론 공개와 티켓 예매 오픈에 앞서 올해 전시를 위해 대규모 광고에 관한 아이디어가 필요한 상황이었다.
 
 
ART253.diary3.paperjsexperimentdrag a8f5f9f72e844a8784bf1d7a0dc8
 
하토는 몇 개의 선 스타일을 만들고, ‘변신(Morph)’ 버튼을 추가하여 사용자가 각 스타일을 빠르게 확인할 수 있게 만들었다.
 
 
 
작업 과정
프로젝트를 시작하며 첫 단계로 인터랙션 원칙을 세웠다. 참여하는 대중이 스스로 창작자라고 느끼게 하는 한편, 그들이 결정할 사안의 개수를 제한해야 했다. 시작 단계에서 우리는 캔버스에서 구동되는 자바스크립트 프레임워크 라이브러리인 Paper.js를 활용하여 프로토타입을 만들고 테스트를 해보았다. 전체 컨셉은 Paper.js에서 만들 수 있는 기본적인 벡터 라인 스트로크 스타일을 바탕으로 구축되었다. 첫 단계에서 브라우저가 소화할 수 있는 내용을 테스트한 다음, 그 결과를 바탕으로 프로그램을 만들었다. 사용자는 캔버스에서 스크립트를 짜고 일러스트레이터가 벡터를 그리도록 명령할 수 있다. UX를 위해 플로우차트를 사용했으며 UI는 스케치로 개발했다.
 
프로젝트의 막바지를 향해가면서, 사용자가 다른 옵션을 선택하지 않는 경우 자신의 이름을 디자인하도록 프로젝트의 내용을 다소 변경했다. 사용자가 글자를 직접 선택하게 하는 것이 일종의 시도 자체를 가로막는다는 것 같았기 때문이다. 우리는 사이트를 재미있고 신나는 곳으로 만드는 것을 핵심으로 삼았기에 적합한 음향을 찾는 데에도 공을 들였다. 이와 동시에 사용자가 도구 사용법을 직관적으로 파악할 수 있도록 도와야 했다. 우리는 애니메이션으로 타이틀 페이지를 꾸몄고, 사용자들이 도구를 사용해 제작한 글자로 픽미업에 대한 정보를 게재했다. 이 프로젝트에서 정말 어려웠던 점은 페이스북과 트위터에 GIF를 공유할 수 있는 도구를 찾는 것이었다. 우리는 최종적으로 캔버스의 콘텐츠를 GIF 애니메이션으로 변환해주는 GIF 숍(GIF Shop)이라는 자바스크립트 라이브러리를 사용했다.
 
 
ART253.diary3.internaltypetestingtool_zoom2 f95d544e06b8489c98d9
 
ART253.diary3.internaltypetestingtool_zoom1 b7bf46f80c514205959f
 
사용자가 직접 디자인할 글자를 선택하도록 하였으나 그 과정을 단순화하여 사용자의 이름을 디자인하도록 수정했다.
 
 
결과
지금까지 대중을 통해 약 3,000개의 글자가 디자인되었다. 제작된 글자는 전시 공간에 두루 사용될 예정이며 사용자들이 알파벳 T를 활용하여 만든 화살표는 방향 알림 기호로 활용될 예정이다. 우리는 이와 더불어 스타일에 일관성이 유지되도록 마케팅용 알파벳을 제작 중이며 디자인된 글자를 활용해 단순한 디지털 인스톨레이션을 구축할 예정이다. 기본적으로 그것은 10개의 질문으로 구성되어 있으며, 하루에 하나씩 제공되어 별도의 공간에서 사용자는 아이패드로 질문에 답할 수 있도록 구성된다. 우리는 이 기회를 통해 유토피아에 대한 사람들의 의견을 모으고, 2016년 현재 그래픽 디자인이 의미하는 바를 찾고자 한다. 이 분야의 많은 이들이 한자리에 모이는 기회는 무척이나 드물기 때문에 우리는 이 자리를 소중한 자산으로 만들고 싶다.
 
 
ART253.diary3.experimentrandomstrokes 2dd4920249a54f548386276e12
 
제작된 글자들은 어느 정도 일관성을 지니면서도 사용자의 특성을 반영할 수 있을 만큼 개성적이다.
 
 
 
 
 
 
 
 
 
 
 
이 기사의 전문은 ‘CA 2016년 7월호 : 개척하거나 사라지거나’에서 확인할 수 있습니다.
 
CA_224_201607_WEB