피그마로 완성하는 디자인 시스템 구축과 효율적인 협업
실무자(기획-디자인-개발)의 생산성 개선
—
Ep.32
최근, 회사에서 디자인을 전담하는 담당자가 아니더라도 ‘디자인 시스템’에 대해 많이들 들어 보셨을 겁니다.
디자인 시스템을 쉽게 말씀드리면, 앱 또는 웹을 만들 때 필요한 색상, 글꼴, 아이콘, 버튼 같은 것들을 정의하여 사용 방법을 모아놓은 가이드인데요.
오늘은 아이나비시스템이 디자인 시스템을 어떻게 만들었으며, 그 과정에서 어떤 고민을 했는지, 어떤 프로덕트에 반영되고 있는지 등을 소개해 드리겠습니다.
과거 PPT 문서의 한계, 새로운 툴 Figma와의 만남
4년 전, 저희는 앱을 만들 때마다 기존의 PPT 형식으로 가이드 문서를 작성하고, Adobe 프로그램으로 디자인 작업을 진행했습니다. 당시 개발팀과의 소통은 문서와 개별 리소스를 주고받으며 진행했고, 주로 메일과 회의를 통해 협업했죠. 그러다 보니 빠르게 의사 결정하기 쉽지 않았고, 서비스마다 가이드가 제각각이라 일관되지 않은 결과물이 많이 나왔습니다. 이러한 비효율적인 과거의 방식으로 혼란을 겪던 시기에, 저희는 피그마(Figma)라는 협업 툴을 만나게 되었습니다.
피그마의 웹 기반 실시간 협업 기능 덕분에 실무자(기획-디자인-개발) 모두가 한 화면에서 작업 내용을 확인하고 즉각적으로 피드백을 주고받을 수 있었죠. 덕분에 빠르게 소통하고, 업무 효율성도 확연히 개선됨을 느꼈습니다.
기존 - PPT 방식의 복잡하고 비효율적인 디자인 가이드
변경 - 피그마를 사용한 간단하고 직관적인 디자인 가이드
변경 - 피그마를 사용한 간단하고 직관적인 디자인 가이드효율 속에서 발견한 '숨겨진 비효율'
피그마를 활용하며 업무 효율이 높아졌지만, 곧 새로운 문제에 부딪혔습니다. 기존의 디자인 리소스를 Figma로 옮기는 과정에서 프로젝트별로 UI가 제각각이라는 것을 발견했기 때문인데요. 쓰이는 컬러 체계도 달랐고, 아이콘 사이즈나 비율도 제각각이었습니다. 당시 ‘아이나비스탬프 - 오르다’ 앱 론칭을 위해 준비하고 있었으며, 이 프로젝트를 통해 디자인 시스템에 대한 필요성을 느꼈습니다.
(구) 오르다 앱 디자인 가이드 / 정리되지 않은 아이콘과 컴포넌트통일성과 효율이라는 두 마리 토끼를 잡다
결국 저희는 이 문제를 해결하기 위해 아이나비시스템즈만의 디자인 시스템을 구축하기로 하였습니다. 서비스마다 특징은 달라도 ‘회원 가입’, ‘검색창’, ‘버튼’처럼 공통으로 쓰이는 화면과 요소들이 존재한다는 사실에 주목했죠. 우선 구글과 애플의 오픈 소스 키트를 참고하여 표준화된 디자인 요소를 만들고, 이에 대한 규칙을 정하기 시작했습니다. 이는 단순히 디자인의 일관성을 유지할 수 있을 뿐만 아니라, 반복 작업이 줄어듦으로 인해 디자인-개발 간의 작업 시간이 효율적으로 줄어들어서 생산성까지 향상시킬 수 있었습니다.
아이나비스탬프 오르다 가이드 - 정리되지 않은 아이콘과 컴포넌트
아이나비시스템즈 디자인 시스템디자인 시스템, 미래를 향한 출발선이 되다.
현재 저희가 구축한 아이나비시스템즈 디자인 시스템은 현재 서비스되고 있는 ‘하이핀’, ‘아이나비스탬프 - 오르다’와 서비스 준비 중인 ’SK 친구 찾기’ 등에 적극 활용하고 있으며, 차량용 인포테인먼트에 포함되는 ‘KGM 내비게이션’까지 확장하여 다양한 서비스에 적용 진행 중입니다.
이 외에도 기존 서비스를 포함해 점차 적용 범위를 넓혀 모바일, 웹, 차량용 시스템 등 여러 환경에 대응할 수 있도록 시스템을 고도화할 예정이며, 나아가 AI를 활용한 리소스 및 디자인 문서 자동화와 같은 혁신적인 기술도 도입할 계획입니다.
마치며
아직 갈 길이 멀지만, 지나온 과정을 교훈 삼아 앞으로는 시행착오를 줄이고 지금보다 더 체계적이고 확장성 있는 디자인 시스템으로 성장하는 것이 저희의 목표입니다. 이를 통해 디자인-개발 간의 효율적인 협업 환경을 구축하고, 아이나비시스템즈 프로덕트의 품질을 높여 사용자들에게 더 나은 제품을 선보이고자 하니 많은 관심을 두고 지켜봐 주시기 바랍니다.
—
by 아이나비시스템즈 프로덕트전략셀 조호형, 백현진
✨디자인 시스템으로 업무 효율을 높였다면, 위치 기반 서비스 개발 효율은 iMPS로!
#피그마 #Figma #디자인 시스템 #UXUI #구글 디자인 시스템 #아이나비 #아이나비내비게이션 #아이나비시스템즈 #지도
