<한글 인 모션> 사이드 프로젝트 작업기
디자인 스펙트럼 뉴스레터 / 스톡홀름에서 온 편지 #2
스톡홀름에서 지내다 보면 남는 시간이 많습니다. 저는 그 시간에 사이드 프로젝트를 합니다. 보통은 글을 쓰지만, 디자인하거나, 워크숍을 할 때도 있습니다. 오늘은 지난번에 런칭한 <한글 인 모션> 프로젝트 작업기를 조금 들려드리려고 합니다.
시작은 작년 한글날로 돌아갑니다. 작년 여름, 한국에서 비자를 기다리는 동안 UX 디자인 수업을 들었습니다. 팀 과제로 네이버의 한글한글 아름답게 프로젝트를 받았는데, 팀원 분들과 케미가 좋아서 수업이 끝난 다음에도 모여서 수업에서 들은 피드백을 반영하고 부족한 부분을 발전시켜서 한글날에 맞춰 비핸스에 그 동안 작업한 <프로젝트 히읗>을 올렸습니다.
작업하는 내내 즐거웠지만, 아쉬운 점도 많았기 때문에 올해도 해보기로 했습니다. 일정 때문에 모두가 참여하지는 못하고, 저와 그래픽 디자이너 김이연 님만 참여하기로 했습니다. 이번에는 한글로 어떤 걸 해보면 좋을까. 아무리 생각해도 좋은 아이디어가 떠오르지 않았습니다.
그러다 우연히 마인크래프트의 UX 디렉터 토비아스(Tobias Ahlin)가 자바스크립트 애니메이션 라이브러리 anime.js로 작업한 Moving Letters라는 프로젝트를 접하게 되었습니다. 짧은 코드로 다양한 텍스트 애니메이션을 구현한 심플한 프로젝트였습니다.
저는 우리가 괜한 부담감에 너무 어렵게 생각하고 있었다는 걸 알게 되었습니다. 그래서 일단 작고, 가볍게 시작해보기로 했습니다. 우선 Moving Letters에 있는 샘플 코드에 한글 단어 몇 가지를 입혀보았습니다. 생각보다 나쁘지 않았습니다. 이걸 바탕으로 이야기하다 보면 뭔가 나올 것 같은 확신이 들었습니다.
저희는 짧은 통화 끝에 한글의 조형적 측면에 주목해서 14가지 한글 자음으로 흥미로운 비주얼과 모션이 들어간 웹사이트를 만들어보기로 했습니다. 런칭을 목표로 최대한 빠르고 심플하게 작업하고, 새로운 아이디어는 잘 갖고 있다가 다음 프로젝트에 쓰기로 했습니다.
비주얼은 강한 임팩트를 줄 수 있도록 대비가 강한 단색 위주로 사용해서 볼드한 느낌을 살리고, 서체는 눈누에 있는 무료 서체 중에서 고르기로 했습니다. 모션은 가능하면 심플하게 만드는 걸 기본으로 하고, 구현 가능한 범위에 따라 만들면서 수정해 나가기로 했습니다.
시차가 있다 보니 메인 커뮤니케이션 채널은 카카오톡으로 하고, 레퍼런스가 많은 인스타그램도 적극적으로 활용하기로 했습니다. 노션에는 칸반 보드를 만들어서 작업 진행 상황을 공유했습니다. 일요일은 쉬기로 했습니다. 물론 지켜지지 않았지만요.
둘 다 이런 작업은 처음이라 우선 이연 님이 비주얼과 모션 초안을 잡으면 여기에 제가 모션을 코드로 구현하면서 구체화하고, 서로 피드백을 주고받으면서 완성하기로 했습니다. 프로젝트 런칭은 하루에 한 글자씩 끝낸다는 생각으로 5월 말로 정했습니다.
일어나면 밤사이에 한국에서 보낸 피드백을 읽고, 출근하면서 어떻게 만들면 좋을지, 어떻게 수정하면 좋을지 생각했습니다. 회사에서 일하고 있으면 이연 님이 새로운 글자를 작업해서 보내주셨고, 저는 퇴근하고 바로 집으로 뛰어가서 코딩을 시작했습니다. 그렇게 정신없는 3주가 지났습니다.
저는 애니메이션과 인터랙션을 웹상에 코드로 하나씩 구현해나가는 과정이 가장 어려우면서도 재미있었습니다. 글자에 따라 완성까지 30분이 걸릴 때도 있었지만, 3일이 걸릴 때도 있었고, 모바일에서 로딩이 안 되는 바람에 처음부터 다시 만들어야 했던 글자도 있었습니다. 덕분에 anime.js는 물론 two.js, paper.js, p5.js, matter.js까지 다뤄볼 수 있었습니다.
이연 님은 처음에는 단순하게 선 두께를 조절하고, 회전하는 정도로 글자를 바라보고 표현했다면, 마지막에는 자음을 변형하고, 틀어보면서 글자의 조형이 다양하게 나올 수 있는 걸 알게 되어서 한글 조형을 바라보는 시각이 프로젝트를 진행하면서 확장되었고, 한글 글자의 모양이 다양해서 서체에 따라 재밌는 부분을 골라서 표현할 수 있다는 걸 배웠다고 하셨습니다.
대망의 5월 30일, 런칭을 위한 모든 준비가 끝났습니다. 메타 태그와 Favicon을 붙이고, Github에 푸시를 하고, Netlify에 도메인을 연결한 후 모든 브라우저에서 이상 없이 돌아가는지, 모바일에서 문제는 없는지 마지막으로 확인했습니다. 그리고 페이스북과 각종 디자인 커뮤니티에 웹사이트를 공유했습니다.
저는 그동안 다양한 사이드 프로젝트를 진행했지만, 이번처럼 빠르고 정신없이 작업한 건 처음입니다. 팀원이 저와 비슷한 페이스로 뛰는 데다가 서로가 상대방의 상황과 생각을 충분히 생각하고, 배려하면서 진행하다 보니 커뮤니케이션도 물 흐르듯 자연스러워서 작업에 집중할 수 있었습니다. 특히 매일 조금만 노력하면 넘을 수 있는 도전 과제를 받고, 이를 팀원과 함께 해결해나가는 과정이 그 무엇보다도 즐거웠습니다.
이제 정리만 남았습니다. Codepen에는 이미 사용한 코드를 정리해서 올렸고, Behance에도 올리기 위해 작업을 정리하고 있습니다. 진행하면서 아쉬운 점이 무엇이었는지, 어떤 부분을 개선하면 좋을지도 이연 님과 이야기해봐야 합니다. 다음에는 이번 프로젝트에서 배운 점을 바탕으로 조금 더 좋은 프로젝트를 할 수 있길 바라면서 작업기를 마쳐봅니다.
