가볍게 디자인 시스템 도입하기
디자인 시스템이란 반복되고 재사용 가능한 일련의 규칙 모음을 말한다.
많은 빅테크 기업은 물론 최근엔 정부에서도 디자인시스템을 공개할 정도로 널리 사용되고 있으며, 디자인 시스템을 구축 혹은 사용해 본 경험이 디자이너의 역량으로 평가되기도 한다.
프로덕트 디자이너의 입장에서도 디자인 시스템의 도입은 재사용 가능한 컴포넌트와 패턴을 관리함으로써 전체 제품의 일관성을 유지하는데 용이하고, 방대한 양의 UI 에셋을 효율적으로 유지보수할 수 있다는 이점이 있다.
하지만 모든 상황에서 디자인 시스템 도입이 유리한 것은 아니다.
예를 들어 빠른 출시가 목표인 작은 규모의 사이드 프로젝트의 경우 디자인 시스템 도입은 자칫 배보다 배꼽이 더 큰 상황을 연출할 수 있다. 디자인 시스템을 초기부터 구축하는 일은 그만큼 품이 많이 드는 일이기 때문이다.
그럼에도 우리 제품의 지속과 확장을 기대한다면 디자인 시스템을 초기에 잘 구축해 두는 것은 시간이 지날수록 진가를 발휘할 수 있다. 그런 의미에서 작은 규모의 팀이나 프로젝트에서 적용 가능한, 비교적 가볍게 디자인 시스템을 도입할 수 있는 개인적인 경험을 공유하고자 한다.
1. 오픈 소스 활용하기
현회사에서 보게 되는 신입 포트폴리오를 통해 종종 ‘디자인 시스템’ 타이틀 하에 ‘스타일 가이드’가 적혀 있는 경우를 보게 된다. 틀렸다기 보단 디자인 시스템을 더 큰 개념으로 이해할 수 있는데, 디자인 시스템은 제품의 개발까지 고려하여 구성 요소들의 조합, 패턴이나 동작 등을 포함한 넓은 의미의 지침이라면, 스타일 가이드는 브랜드의 폰트, 컬러 등 주로 시각적인 요소를 정의하는데 집중한다.
그런 구분은 누가 정하는 거냐고 하면 앞서 언급한 빅테크 기업의 디자인 시스템 문서를 참고할 수 있다. 방대한 사용자를 보유한 제품을 보다 효율적으로, 또 잘 만들기 위한 고민의 결과물을 클릭 몇 번으로 쉽게 볼 수 있다. 이런 오픈 소스는 디자이너가 구조와 형태를 뜯어보고 가공할 수도 있는 피그마 파일로 제공하기도 한다. 그리고 이를 통해 디자인 시스템의 개념과 구성 요소에 대한 이해도를 높일 수 있다.
디자인 시스템을 처음 구축하고자 하는 상황에서 빠르게 디자인 시스템에 대한 이해도를 높이고, 팀에 필요한 디자인 시스템 구성의 범위를 가늠하는데 힌트가 되기도 한다.
개인적으로 자주 참고하는 디자인 시스템은 아래와 같다.
해외 디자인 시스템 문서
1. 구글 | 머티리얼 디자인 (피그마 디자인 키트 제공)
2. 애플 | 휴먼 인터페이스 가이드라인 (피그마 디자인 리소스 제공)
3. IBM | 카본 디자인 시스템 (피그마 키트 제공)
4. 마이크로소프트 | 플루언트 2 (피그마 UI 키드 제공 Web, IOS)
5. 깃허브 | 프라이머
6. 알리바바 그룹 | 안트 디자인 (피그마 키트 판매)
(+) 그 외에 더 많은 자료가 필요하다면 빅테크 기업의 디자인 시스템 목록이 정리되어 있는 아래 링크를 참고하는 것도 좋다.
국내 기업 디자인 시스템 문서
해외 디자인 시스템 문서가 영어인 점, 여러 환경을 고려해 만들어졌기 때문에 우리 서비스에 비해 대응 범위가 너무 넓어서 오히려 어렵게 느껴진다면 국내 서비스의 디자인 시스템 문서를 참고하는 것도 좋다.
1. 라인 | 라인 디자인 시스템
2. 지마켓 | 지마켓 디자인 시스템
3. 원티드 | 원티드 디자인 라이브러리
스토리북
디자인 시스템 문서만으로 실제 컴포넌트의 동작을 이해하기 어렵다면 스토리북을 참고하는 것도 추천한다. 스토리북 홈페이지에선 여러 기업의 스토리북 링크를 제공하고 있는데, 각 컴포넌트들의 동작을 직접 테스트해 볼 수 있고 Controls 패널을 통해 컴포넌트의 속성을 제어해 볼 수 있다.
이런 식으로 직접 제어해 볼 수 있다.(클릭해 확인 가능)피그마 키트
위 문서들로 디자인 시스템을 이해했다면 실전으로 돌아와 우리 서비스에 구현할 시스템을 설계해야 한다.
이때 위에 언급한 디자인 가이드 문서에서 피그마 키트를 제공하는데, 이 키트를 활용해 가공하는 방식으로 좀 더 쉽게 디자인 시스템을 만들 수 있다.
예를 들어 버튼을 만든다면 버튼 컴포넌트 제작을 위해 사각형부터 그리는 방식이 아닌, 이미 모양과 동작이 정의된 컴포넌트 묶음을 가져와 우리 서비스의 '스타일 가이드'에 맞도록 폰트, 컬러, radius 등의 '모양'만 가공하는 방식이 될 수 있다.
위 이미지의 좌측은 material design의 text field 컴포넌트이고, 우측은 해당 컴포넌트를 가져와 나의 사이드 프로젝트 스타일 가이드에 맞춰 가공한 text field 컴포넌트이다.
컴포넌트 자체의 기본적인 속성(properties)은 동일하지만 내가 만드는 제품에는 2가지 스타일의 text field는 필요하지 않아 style 속성을 제거하고, 컬러/폰트/아이콘 에셋 등을 내가 지정한 스타일 가이드에 맞춰 가공한 상태이다.
이런 방식을 사용하게 되면 복잡한 컴포넌트 구조를 설계하기 위해 고심하는 시간을 덜 수 있고, 은근히 고민되는 컴포넌트 내 속성(properties)들을 표기하는 명칭을 살펴볼 수 있어 유익하다.
추가로 피그마 커뮤니티에서도 여러 고수들이 작업한 UI 키트가 공개되어 있어 참고하기 좋다.
2. 피그마 플러그인 활용하기
디자인 시스템은 디자이너와 개발자가 효과적으로 소통하기 위한 약속이기 때문에 문서화를 통한 명확한 핸드오프도 중요하다.
*핸드오프(handoff): 디자이너가 설계한 UI 디자인을 개발자에게 전달하는 과정
이때 다양한 피그마 플러그인의 도움을 받아 효율적으로 문서화할 수 있다.
Color Generator
컬러 스타일 등록과 팔레트를 생성해 주는 플러그인으로 컬러 등록과 문서화를 위해 사용할 수 있다.
사용 예시(클릭해 확인 가능)Figma Docs
피그마 파일 내에 스타일로 등록된 컬러, 폰트, 효과를 문서화해 주는 플러그인이다.
사용 예시Material Design Icon
구글과 Icon8의 아이콘을 불러올 수 있는 플러그인으로 아이콘을 직접 제작하기에 시간과 리소스의 한계가 있다면 유용하게 사용할 수 있다. 참고로 불러온 아이콘은 컴포넌트화 후, 리스트를 개발단에 전달함으로써 반복적으로 사용하는 아이콘 에셋을 하나의 경로에서 관리하도록 할 수 있다.
3. AI 활용하기
마지막으로 디자인 시스템이 처음이라 궁금한 점이 많다면 Chat GPT, Gemini 같은 AI를 활용해 의문을 어느 정도 해결할 수 있다. 또, 로고 같은 이미지 리소스가 필요할 때도 생성형 AI 툴을 활용해 (그대로 사용하기엔 무리가 있지만) 아이디어 정도로 활용할 수 도 있다.
아래는 무료 로고 생성 툴이다.
Design.com
사용 예시Ideogram
사용 예시적절한 표현일지 모르겠지만 모방은 창조의 어머니라고 잘 만들어진 디자인 시스템을 따라 하는 것은 디자인 시스템을 익히는 효과적인 방법이라고 생각한다.
디자인 시스템이 어렵게 느껴져 시작하지 못했던 분들도 가볍게 시작했으면 한다. 그리고 고수가 되어 또 나 같은 디자이너에게 팁을 나눠주는 상부상조를 기대하며 마친다.
