그래픽 맞춤의 첫걸음, Sync 라이브러리 제작기
반복되는 문제를 해결하기 위해 직접 고군분투하며 만든 라이브러리
프레이머를 이전에 독학한 적은 있었지만 간단한 웹사이트를 만드는 목적에 그쳤다. 이후 실무에서 프레이머를 사용할 수 있는 기회가 없었지만 갑작스러운 문제가 생기고 해결책으로 프레이머를 꺼내 들게 되었다. 왜 프레이머를 사용하게 됐는지 배경부터 제작 과정까지 상세히 공유하고자 한다.
점차 쌓여갔던 그래픽
그래픽이 제품에 주는 영향력은 다양한 것 같다. 처음 입사했을 당시 그래픽이 제대로 구축되어 있는 환경이 아니었기 때문에 2D부터 3D까지 다양한 그래픽을 제작하며 제품에 필요한 그래픽을 공유했었다. 브랜드 일관성을 확보해 주는 역할로 초기에 제작했다면 이제는 문제해결방식의 주요 키로 활용하고 있다. 그래픽을 적용해 새로운 문제를 해결하면서 제품 퀄까지 높아지는 모습을 보니 점점 그 중요성에 빠지게 되어 적극적으로 만들기 시작했다.
제품에 그래픽이 필요하다고? 다 만들어주마였던 시기...그래픽을 만들고 일관성을 위해 수정하고 반복하다 보니 어느새 산처럼 쌓여있는 그래픽을 발견하게 되었다. 그리고 문제가 생기게 되었다.
동시에 늘어나는 문의
그래픽을 만드는 단계만 생각했던 과오가 드러나게 되었다. 평소 개발자분들과 디자이너 분에게 필요한 그래픽을 그때마다 직접 전달하고 있었는데, 쌓여가는 그래픽과 그래픽 문의를 보고 스스로가 너무 체계 없이 이행했다는 점을 알게 되었다.
문의를 바로 해주신 건 그나마 다행이라고 생각했던 것이 알고 보니 일일이 뒤져가며 찾다가 나중에서야 울음을 터뜨리며(?) 문의를 주신 분들도 계셨기 때문에... 문제 해결이 시급하다는 생각을 하게 되었다.
2주 만에 만들기 위한 최적의 툴
반복되는 문제를 해결할 방법을 찾아보면서 다양한 라이브러리 제작 사례를 보게 되었는데, 팀과 제품을 위한 효율적인 소통 방법이 무엇인지 이번 기회에 많이 배우게 되었다. 처음에는 혼자 진행하기 어려울 것 같아 같은 사무실에 계시는 프론트 개발자분에게 도움을 요청했는데 (흔쾌히 허락해 주셨다! but) 후에 너무 바빠 보이셔서 추가적인 개발공수가 안 드는 쪽으로 생각하게 되었다.
지나고 보면 프레이머로 라이브러리를 만드는 건 좋은 선택이었다. 디테일을 세심하게 신경 쓸 수 있을 뿐만 아니라 CMS 관리까지 할 수 있다는 점에서 정말 탁월한 선택이었다. (굿!)
라이브러리를 만들기 전에 단순히 필요해서라는 이유로 시작하기 어려워 구체적으로 어떤 방향을 그리는지 정리해 보기로 했다.
1. 그래픽에 관련된 커뮤니케이션 시간을 단축시킬 수 있다.
2. 누구든지 필요한 그래픽 자산을 쉽게 찾을 수 있다.
3. 그래픽 스타일의 일관성을 점검하고 수정할 수 있다.
특히 3번의 경우 디자인팀에게 너무 필요해 보였고, 뜻하지 않게 라이브러리를 만들고 난 후에 디자이너 인턴 분들이 들어오시게 되셨는데, 1번과 2번 효과를 적극 누릴 수 있었다..!
50+ 그래픽의 맞춤
2D부터 3D까지 50개가 넘는 그래픽이 섞여 있어서 우선 어떤 메뉴에 담을지 전체적인 IA를 구상하는 단계가 필요했다. IA 구조를 만들 땐 라이브러리의 특성을 떠올리며 최대한 단순하면서도 직관적이게 그래픽을 찾을 수 있도록 불필요한 용어, 메뉴 구조는 제외했다.
캐릭터의 경우 기존 그래픽과 섞어서 분류해 놓으면 너무 헷갈릴 것 같아 따로 빼기로 했다.프레이머도 디자인을 단순하게 따라 해본 게 다였기 때문에 툴을 켜놓고 '이제 어떡하지?' 하며 머리를 열심히 굴렸다. 우선 피그마로 디자인 초안을 설계하는데 집중했고, 출퇴근 지하철에서 유튜브에 프레이머 강의 (방구석 프레이머 : https://www.youtube.com/@homestudioframer)를 진짜 보고 또 보고 잊으면 다시 봤다.
처음에는 일일이 복사 붙여 넣기로 자산을 관리하는 줄 알았지만, 학습하게 되면서 CMS(Content management system)로 관리하는 방법을 알게 되었고 바로 적용해 보기로 했다.
처음에는 제대로 적용하는 방법을 헤매다 Download 버튼을 넣고 각 그래픽 링크를 걸어두는 방식으로 진행했는데, '이게 맞아..?' 싶어서 다시 다른 방법을 찾다 CMS 항목을 변수로 만들어서 컴포넌트에 적용했다. CMS에서 공통적인 정보 타입을 필드를 생성하고 등록하면 모든 데이터를 바로 디자인에 추가할 수 있어서 (파란색 활성화 버튼) 데이터베이스를 효과적으로 관리하기에 정말 좋았다.
라이브러리를 만들면서 Mac 서체관리자 디자인을 차용하기로 해서 디자인을 만들어 놓고 공통 컴포넌트를 만들어 상태별 인터랙션을 섬세하게 작업해 나갔다. 인터랙션이 추가되니까 디자인에 생명을 불어넣는 느낌.... 너무 좋았다. 매일 피그마 -> 프로토파이 작업만 하다가 프레이머로 디자인+인터랙션을 한 번에 하다 보니 너무 간편해서 숨통이 확 트였다.
빠르게 실험하고 다듬기
프레이머를 사용하면서 피그마와는 다른 작업 방식에 각 툴의 차이점을 경험할 수 있었다. CMS 항목을 디자인으로 연결할 수 있다는 점과 코드로 구현된 컴포넌트를 제공하고 코드를 직접 수정해 디자인을 변경할 수 있다는 점에서 디자인 보다 구현을 기준으로 작업 무게를 더 둔다는 차이점을 알게 됐다.
그래서 시각적인 결과물에만 집중하지 않고 디테일한 부분을 생각하며 어떻게 해야 좋은 사용자 경험을 제공할 수 있을지 고민하는 시간을 가졌다. 컴포넌트를 액션 별로 다양하게 만들고 프로토타이핑을 적용해 빠르게 실험하는 과정을 반복하면서 큰 틀을 뾰족하게 만들기 수월했다.
다운로드 버튼을 누르면 CMS에 등록한 zip파일을 다운로드할 수 있다.배포 후 활성 사용자
프레이머에는 Analytics 메뉴가 있는데 이 메뉴에 들어가면 배포한 웹사이트의 방문자 수와 전체 페이지 뷰를 확인할 수 있다. 라이브러리를 배포하고 난 후 2개월 정도가 지났는데 초반보다는 그래프가 많이 줄어들었지만, 아직도 팀원분들이 꾸준히 사용하고 있다는 점에서 뿌듯함을 느꼈다.
과정 설명 반 프레이머 찬양 반인 글 같은데 각각의 툴 장점이 있지만 개인적으론 피그마보다 프레이머가 더 편하다고 생각해서 칭찬을 범벅으로 적은 것 같다. 다른 팀원분들도 프레이머를 사용할 줄 아셨다면 협업을 할 때 소통의 폭이 훨씬 넓어질 것 같다는 생각이 들었다.
2주 만에 라이브러리를 만들면서 흩어져 있던 그래픽을 정리하는 시간을 가질 수 있었다. 배우게 된 점들도 많았는데,
#문제로 기회를 넓힌다.
디자이너의 역할이 시각적인 결과물에만 멈춰있는 것이 아니라 주변에서 여전히 반복되는 문제들을 관찰하고 근본적인 변화를 이끌어 나가야 된다는 점, 문제의 주인공이 유저가 아닌 문화가 될 수도 있다는 점 그리고 문제에 대한 책임감을 다시 한번 떠올릴 수 있었다.
관리가 어렵다는 문제에 직면한다면 독자적인 시스템을 만드는 것과 모든 팀원이 양질의 그래픽에 쉽게 접근할 수 있는 길을 만들어 나가는 것처럼 프로세스를 항상 관찰하고 개선하는 것이 디자이너의 본질을 더 넓게 바라보며 새로운 기회를 만들 수 있다는 점을 배웠다.
#디테일한 차이가 사용성을 결정한다.
피그마로 정리해서 공유하는 방법과 프레이머로 라이브러리를 만들어 공유하는 방법은 결과적으로 동일한 방법이라고 생각할 수 있지만, 라이브러리 사용 과정에서 주는 한계점과 차이점은 명확했다.
최근 흑백요리사를 보면서 맛에 직접적인 영향을 미치지 않는 플레이팅에 정성을 기울이는 것처럼 디자인뿐만 아니라 그래픽을 어떻게 담아야 팀원들이 더 쉽게 찾을 수 있을지 고민하는 건 사소하지만 중요한 관점이라고 생각했다.
이러한 관점으로 디테일을 신경 쓰며 구현할 수 있는 더 다양한 방법과 툴을 고민할 때 전체적인 사용성에 큰 차이를 만들 수 있다는 점을 배웠다.
(최근에는 스플라인과 Phase 툴에 빠졌는데, 활용해서 뭘 만들지 고민 중이다.)
이번에는 2주 만에 만들어야 되는 프로젝트이다 보니(스스로 정한 데드라인) 정말 디테일한 부분을 신경 쓰고 다른 방법으로 연구하는 시간이 조금 모자랐던 것 같아서 아쉽지만, 그래도 우선 처음의 목표를 달성했다는 것에 의의를 두고 이번이 끝이 아니라 꾸준히 라이브러리를 디벨롭할 생각이다.
마지막으로 라이브러리를 가장 많이 사용한 팀원의 후기를 남기며 이만 글을 마무리하려 한다.
10초가 5초가 될 때까지...!!