[부록 1.0]폰트 라이브러리 프로토타입 제작기
기획부터 모바일 버전 프로토타입까지
작년 여름 즈음부터 개인작업으로 시작했던 폰트 라이브러리 (일명 '폰트러리')의 모바일 버전 프로토타입을 드디어 완성했다. 기념하여 그에 대한 제작기를 남겨볼까 한다.
놀이처럼 시작한 프로토타입
작년 여름에 한창 프로토타입 툴 이것저것 기웃거리고 있었다. 그때 주로 쓰던 게 framer, invision, principle 세 가지였는데 그 당시 framer는 혼자 독학하던 때라 어려움에 봉착해도 풀 방법이 없어 거의 손을 놓다시피 하고 있었고 invision은 인터렉션이 너무 약해서 재미가 없었다. 그러던 중 그 중간 지점쯤 된다기에 principle로 그냥 머리에 생각나는 디자인을 슥슥해서 테스트로 몇 가지를 놀이처럼 만들며 한창 재미를 느끼고 있었다.
디지털 에이전시에서 디자인 업무를 맡고 있다 보니 내가 하고 싶은 걸 프로젝트에서 할 수 있는 여건이 되지 않아 항상 아이디어로만 존재하는 것을 구현하고 싶은 목마름이 있었다. 몇 년 전부터 늘어나기 시작한 프로토타입 툴들은 그런 목마름을 어느 정도 해소해줄 수 있었는데 이왕이면 개발까지 하면 좋지 않을까 하는 마음에 회사 내부에서 평소에 느꼈던 불편한 점을 리스트업 하기 시작했고 간단히 플로우를 짜고 디자인해서 프로토타입을 만들었다. 그러면 어쨌든 회사 시스템에 관련된 거라 컨펌만 나면 구축까지도 노려볼만했기 때문이다. 그때 만들었던 게 두 가지가 있는데 사내 규정 관련 문서를 챗봇 형태로 검색이 가능하게 만든 앱 프로토타입과 지금의 폰트 라이브러리의 초기 버전이다.
처음에는 이 사내 라이브러리 챗봇을 만들어 CD님께 보고를 드렸었는데 개발여건상 불가능에 가깝다는 결론이 나서 프로토타입으로 만족해야 했다. (프로토타입만이라도 추후에 더 디벨롭을 해보려고 저장해두긴 했다.) 그리고 다음으로 꺼내 든 것이 바로 폰트 라이브러리다.
목마른 자가 우물을 판다
다른 회사는 어떤지 모르겠지만 우리 회사 같은 경우에는 작업 시 사용할 수 있는 서체 라이선스를 구비해두고 있다. 웬만하면 그 세트 내에서 사용할 것을 권장하고 있고 특별한 경우 구매요청을 할 수 있다. 보유 중인 한글 서체는 200여 종 가량 되고 영문서체는 460여 종 가량된다. 그냥 수량으로 봐도 이 많은 서체 안에서 내가 원하는 서체를 찾는다는 게 쉽지 않다.
요즈음 디지털 환경에서의 가독성이나 저작권 문제, 비용 등을 고려하다 보니 어느 정도 획일화되고 있는 경향이 있지만 (국문은 나눔 계열이나 본 계열, 영문은 헬베티카 같은...?) 그래도 디자인을 하는 사람으로서 가독성과 함께 예뻤으면 하는 마음에 여러 서체들을 놓고 비교하여 어떤 서체가 적합할까에 대해 고민하는 과정이 빠질 수 없다. 결국은 나눔이나 본으로 귀결된다 할지라도.
물론 660여 개가 넘는 서체 리스트를 회사 내부 문서로 공유되고 있긴 하다. 누가 봐도 실 사용자인 디자이너들을 전혀 고려하지 않은 형태로 말이다.
회사에서 제공하는 라이선스 보유 서체 리스트의 일부. 그냥 의미 그대로의 리스트만 제공한다.이 리스트만으로는 생김새나 최소한의 서체 정보를 알 길이 없어 실 작업에서는 아무 쓸모가 없다. 또 이 문서는 사내 디지털 라이브러리의 이북 형태로 제공되는데 유감스럽게도 검색 기능이 제공되지 않아 라이선스의 유무에 대한 검색조차도 불가능하다. 결국 '구글링 또는 사내 서버에서 서체 검색→형태 확인→설치 및 적용'의 과정을 반복하게 된다. 이 모든 것이 에이전시의 특성상 촉박한 일정에서 시간을 허비하는 것 같아 늘 불만이었다. 이렇다 보니 어떤 때는 급하니까 서체에 대한 고민 없이 쓰던 서체 또 쓰고 또 쓰고의 반복이 되기도 한다.
이 과정은 프로젝트 할 때마다 나를 지치게 했다.이 비효율적인 시스템을 어떻게든 개선을 해야겠다고 생각했다. 역시나 챗봇 프로토타입을 할 때와 마찬가지로 일단 머리 속에 생각나는 형태를 간단히 디자인 한 다음 principle로 프로토타입을 만들기 시작했다. 그렇게 완성한 폰트 라이브러리 초기 버전을 또 CD님께 보여드리며 의견을 구했고 이 경우는 괜찮은 것 같다는 피드백을 받을 수 있었다.
계획 세우기
초기 프로토타입은 어떤 것을 만들고 싶은지 간략하게 설명하기 위해서 대표적인 화면만을 짜집기해서 제작했기 때문에 경영진에 어필하고 바로 개발이 들어갈 수 있게 하기 위해서는 디테일한 플로우와 함께 디자인을 다듬어 프로토타입을 개선할 필요가 있었다. 그리고 잘 되면 내부 프로젝트가 되겠지만 안되면 회사의 일이 아닌 개인작업물로 남을 수 있기 때문에 주어진 업무는 업무대로 처리하고 그 외의 시간을 활용해야 하는 조건이 붙었다. 이럴 경우 업무가 과중될 때는 잠시 멈췄다가 늘어질 대로 늘어져 결국 흐지부지될 것을 방지하기 위해 나름의 목표 일정을 잡았다.
- 기능 정의 및 ux 플로우 완료 : 9월 중순
- 디자인 작업 완료 : 11월
- 프로토타입 제작 완료 : 12월
- 경영진 보고 및 개발 시작 : 1월
- 론칭 : 3월
처음 잡았던 목표 일정이었지만 이보다 한참이 지나서야 겨우 모바일 버전의 프로토타입을 완성했으니 실제 프로젝트였다면 손해가 이만저만이 아니었겠다는 생각이 든다.
처음 폰트 라이브러리를 만들어야겠다고 생각했을 때는 개인작업의 상태였기 때문에 경험이 적은 앱으로 만들어야겠다고 생각했다. 그래서 모바일 버전에서 출발하려고 했었는데 여러 사람에게 초기버전을 보여주며 의견을 구하던 중 디자인 업무 할 때 필요한 것인데 작업은 데스크톱이나 노트북으로 하지 모바일에서 할 일이 없지 않으냐며 앱보다는 웹으로 만드는 게 좋을 것 같다는 의견이 있었다. 그때 단순히 (아직까지는) 개인 작업물이고 프로토타입을 만들고 싶다는 주객이 전도된 생각에 사로 잡혀있다는 것을 깨달았다. 프로토타입을 만드는 게 중요한 게 아니었는데 말이다. 그건 단순히 경영진에게 어필하기 위한 수단이었을 뿐, 중요한 건 이 서비스의 존재의 이유에 집중했어야 했는데 말이다.
곧바로 모바일은 협업에 있어서 커뮤니케이션에 도움을 주기 위한 용도로 보조적인 역할 정도 수행할 수 있게 하고 서체를 다운로드하는 등의 메인 기능은 PC가 되도록 계획을 수정했다. 하지만 PC용은 이것저것 고려사항−예를 들면 회사가 보유한 유료 서체를 다운로드하려면 인트라넷 로그인을 태운다던지−이 많았기 때문에 프로토타입은 상대적으로 PC에 비해 기능이 축소된 모바일을 먼저 진행하기로 했다.
기능 정의 및 UX플로우
우선 꼭 필요한 기본적인 기능 외에도 있으면 좋겠다고 생각하는 기능까지 모두 리스트업 했다.
- 폰트 리스트
- 폰트 검색 (이름 검색, 카테고리 검색)
- 타이핑 테스트 (폰트 크기 조정, 굵기 조정)
- 제작자 및 저작권 정보
- 해당 서체로 제작된 디자인 작업물 레퍼런스 수집
- 즐겨찾기
- 폰트 비교
- 폰트에 대한 추상적 키워드 해시태그로 검색할 수 있도록 제공
.
.
.
폰트라이브러리 ux flow v1.0 (상) / v2.0 (하)정의된 기능을 중심으로 UX플로우를 작업하기 시작했다. 기능을 중심으로 작업된 플로우 설계는 CD님과 커뮤니케이션하면서 수정과 발전을 거듭했다. 이 과정에서 상당히 많은 기능들이 삭제되고 콤팩트 하게 변경되었는데 이유는 이 기능들로 인해 점점 서체에 대한 집중도가 떨어지는 것 같았고 기준으로 잡았던 일정 내에 이 기능들을 구현하는 건 욕심이겠다는 생각이 들었다. 그래서 플로우를 작업하면서 서체에 집중할 수 있도록 불필요하다고 판단되는 기능은 삭제, 필요하지만 급하지 않은 것들은 후에 디벨롭할 때 구현하도록 따로 분류했고 결과는 아주 콤팩트 해졌다.
- 폰트 리스트
- 폰트 검색 (이름 검색, 카테고리 검색)
- 타이핑 테스트 (폰트 크기 조정, 굵기 조정)
- 제작자 및 저작권 정보
- 해당 서체로 제작된 디자인 작업물 레퍼런스 수집
ux플로우 단계에서 마지막까지 남은 건 크게 이 5가지였다. 디자이너를 대상으로 하기 때문에 해당 서체로 작업된 레퍼런스를 함께 볼 수 있게 하려고 했는데 helvetica처럼 유명 서체는 자료가 많지만 딩벳 폰트처럼 자주 쓰이지 않는 경우에는 레퍼런스를 찾기 어려워 빈 공간으로 남을 확률이 높아 레퍼런스 기능은 삭제하고 최종 버전에서는 4개 기능으로만 구현했다.
- 폰트 라이브러리 final UX flow
디자인
디자인은 초기 버전의 톤 앤 매너를 중심으로 디벨롭하는 방향으로 진행했다. 초기 버전은 폰트의 이미지를 컬러로 녹이려는 의도가 있었지만 이 사이트에 들어올 디자이너들의 목적인 '내 디자인에 어울리는 서체'를 찾는 것을 생각했을 때 컬러로 인한 선입견이 생기지 않도록 black & white가 기본이 되도록 했고 회사의 아이덴티티를 조금 가미할 수 있게 red를 포인트 컬러로 사용했다.
다른 것들은 초기 버전에서 크게 달라지지 않았지만 기능이 집중된 서체 상세보기에서의 UI는 많은 고민을 거듭했다. 특히 모바일 버전은 작은 화면에서 서체 크기 조정하는 부분이 정교하면서도 편하게 변경 가능한 UI가 어떤 게 있을까에 대해 오래 고민했었다.
- 서체 크기 조정 UI 테스트
그리고 디자인하면서 아는 사람들만 쓸 수 있는 hidden function을 넣어 우연히 발견하는 재미 같은 걸 주고 싶었다. 그래서 'long tap'을 하면 배경과 텍스트의 컬러가 반전이 되도록 설계를 추가했다. (아쉽게도 프로토타입에서는 이 기능을 구현하지 못했다.)
- 최종 디자인
프로토타입 제작
프로토타입은 여러 가지 툴을 고려했지만 결국은 조금(실은 많이) 어렵더라도 framer를 활용하기로 했다. 실제처럼 다양한 폰트를 심어서 타이핑 테스트를 할 수 있게 만들고 싶기도 했고 연말에 framer meetup에 참가한 것을 계기로 framer스터디를 다시 하게 되었는데 각자 만들고 싶은걸 만들어보고 막히는 부분에서는 스터디 리더인 준석 님이 도움을 주시기로 했기 때문에 해볼 만하겠다는 자신감이 약간 생겼다. (실제로 준석 님이 해결사처럼 많은 부분을 해결해주셨다. 프로토타입은 공동작업 수준이랄까... 다시 한번 감사를... XD)
framer는 코드를 베이스로 하고 있어서 개인적인 생각으론 전체 플로우가 아닌 일부분을 프로토타입으로 만들 때 유용하다는 생각이다. 폰트 라이브러리의 프로토타입을 만들면서도 다시 한번 느끼게 됐다.
폴딩을 해도 끝이 없는 코드...이유는 플로우가 완성되어 갈수록 코드가 점점 길어지면서 복잡해졌고 개발이 익숙하지 않으니 어느 순간부터는 어디에 무슨 변수를 썼는지 헷갈려서 작업이 어려워졌기 때문이다. 업무가 바쁠 때는 적게는 며칠 길게는 몇 주씩 열어보지도 못하는 날도 많았는데 그럴 땐 어디까지 작업했었는지조차 잊어버릴 때가 한두 번이 아니었다. 또 코드가 길어질수록 로딩 속도도 점점 느려져서 답답할 때가 많았다. 이대로는 디테일한 인터렉션은 고사하고 이 자체로 감당이 안 되겠다는 생각이 들어서 결국 플로우에 따라 파일을 분해해서 개별로 완성한 뒤 합치는 방향으로 계획을 변경했다.
또, 비교적 자주 framer 툴이 업데이트되다 보니 그 과정에서 애로사항이 좀 있었는데 예를 들면 작업하는 중간에 없던 text layer 기능이 생겨버려서 그걸 또 활용해보겠다고 코드를 다 뜯어고치다가 오류가 많이 발생해서 수정하느라 애를 먹기도 했다. (결국 원하지는 않았지만 일반 layer와 text layer가 혼재된 상태가 되고 말았다...)
에라 모르겠다.중간에 참고하고 싶은 레퍼런스를 찾았는데 원본 코드가 없어서 원작자였던 정영님께 일면식도 없는 상황에서 다짜고짜 페메를 보내 원리 설명을 부탁하기도 했다. (흔쾌히 응해주셔서 다시 한번 감사를... :-D)
이러한 과정들이 뒤죽박죽 섞이다 보니 결국 1개월로 잡았던 프로토타입 제작 기간은 모바일 버전만 무려 5배나 늘어져서 5개월이 걸렸다.
막히는 곳에서 준석님이 그에 대한 해법과 원리적인 설명을 덧붙여주면 그 기능을 또 다른 플로우에 써먹을 때가 많았는데 원리에 대한 이해가 부족하면 자주 오류가 났고 어찌 되었든 혼자서 그걸 응용해서 해보려고 매달려서 안간힘을 쓰면서 하다 보니 더 많은 시간이 걸렸던 듯도 하다.
폰트라이브러리 프로토타입을 만들면서 생겨난 버전들이렇다 보니 더뎌진 진행 속도에 의지가 꺾이기 직전까지도 갔었지만 어느 정도 완성형에 가까워지는 게 눈에 보이면서부터는 또 신나서 의욕을 다졌다. 중간에 상세 탭을 이동하는 제스처를 어떻게 하면 좋을까 판단이 되지 않아 두 가지 버전을 만들고 지인들에게 돌려 나름의 A/B 테스트를 진행하기도 했다.
- 완성된 폰트 라이브러리 모바일 버전 프로토타입
마무리하며
PC용까지 작업이 되면 회사에 건의해서 진행을 해보려고 하고 있지만 원하는 대로 이뤄지지 않는다고 해도 이 프로젝트 자체만으로도 내게는 의미가 크다.
우선 기획부터 아웃풋까지 온전히 진행하면서 '고민'의 시간을 가졌다는 점이다. 늘 사람들에게 '다들 그렇게 하니까' 만드는 것 말고 '더 좋은 방법이 없을까' 고민하고 연구하면서 작업을 하고 싶다고 말했었는데 사실 업무를 진행할 때는 물리적으로 정해진 시간이 있고 이를 넘겨서는 안 되는 부분이 있기 때문에 고민의 시간을 내가 원하는 만큼 가질 수 없고 많은 이해관계가 얽혀있어서 작업자의 의도가 온전히 담긴 결과물로 나오기란 쉽지 않다. 여러 가지 테스트도 해보면서 내가 체험하고 느끼고 그래서 그런 경험을 토대로 수정하고 반영하며 발전시켜나가는 과정을 경험하고 싶었지만 프로젝트 기간이 끝나고 손을 떼는 순간부터는 더 이상 내가 손 쓸 수 없다는 점도 7년이란 시간 동안 일하면서 아쉬웠던 점 중 하나다.
이번 폰트 라이브러리를 만들면서는 온전히 나의 의지대로 시작해서 그런 고민의 시간을 충분히 가질 수 있었고 그게 또 완성형에 가깝게 나와서 오랜만에 다시 재미를 느낀 것 같다. 상대적으로 업무에 있어서 제안을 많이 하는 처지라 구축에서 약점이 많았는데 2D에 그쳤던 디자인이 실제와 가깝게 구현이 되어 테스트를 해보니 내가 생각했던 플로우나 UI가 불편해서 수정하는 경우도 많이 생겼고 보기보다 더 많은 경우의 수를 고려해야 하는 상황들을 겪으면서 앞으로 업무에 있어서도 지금보다 더 다방면으로 고민하고 생각해야겠다고 느끼기도 했다.
그리고 framer 만년 초보에서 레벨이 아주 살짝 상승한 것 같아서 뿌듯하다. 개인작업에서 좌절하고 실패할 때가 많았는데 이렇게 첫 번째 작업물이 완성되었다.
* PC버전은 현재 UX플로우를 진행 중에 있다.
instagram https://www.instagram.com/fish0422
facebook https://www.facebook.com/fish0422
