가이드라인의 필요성과 제작과정
디자이너 5인의 Airbnb 디자인 시스템 제작기 5편
이 글은 노트폴리오 디자인 시스템 워크숍 4기 1조원들이 8주간 함께 만든 디자인 시스템 이야기 중, 마지막 5편 - 가이드라인에 대한 이야기입니다.
안녕하세요.
저는 가이드라인 부분 설명을 맡게 된 디자인워크숍 4기 1조의 이주영입니다.
앞에 4편의 글에서 파운데이션과 컴포넌트 만드는 방법에 대해 소개했는데요.
파운데이션과 컴포넌트를 잘 만들었다면 끝일까요?
우리는 파운데이션(Color, Typography, shadows, Grid & Spacing, Icon)과, 17개의 컴포넌트를 제작하였습니다. 하지만 여기서 잘 만들었다고 끝이 아닙니다. 다음으로 가이드라인을 만들어 주어야 합니다. 그러면 가이드라인이란 무엇이고 왜 필요할까요?
가이드라인 제작 과정과 제작 꿀팁을 공유해 보겠습니다.
가이드라인의 필요성
가이드라인이란 사전적 의미로 생활이나 행동 따위의 지도적 방법을 인도하여 주는 준칙 또는 지침이라는 용어로 쓰이는데요. 디자인시스템에서 가이드라인은 만들어진 파운데이션이나 컴포넌트를 어떻게 사용해야 하는지 규정하여 알려주기 위해 꼭 필요합니다.
컴포넌트를 잘 만들었다고 해서 끝이 아니라 개발자나 사용자 모두가 잘 이해하고 사용할 수 있도록 만드는 것이 중요한데요. 가이드라인을 통해 디자인시스템의 일관성과 효율성을 높일 수 있고, 크게는 디자인시스템의 완성도를 높여주는 요소가 됩니다.
가이드라인 템플릿 만들기
먼저 컴포넌트 가이드라인을 제작하기에 앞서 지마켓 시스템을 참고하여 템플릿을 만들었습니다.
템플릿 작업 후에 우리는 각자 자기가 맡아서 만든 컴포넌트들을 가이드로 만들기로 하여 작업 분담하였습니다.
작업을 진행하면서 처음엔 밑으로 수직나열되는 구조로 작업을 했으나, 컴포넌트 내 유형이 많아 쪼개지는 경우 ex) Button, Chip 등… 에는 수평적 구조가 각각의 유형을 확인하기에 용이해서 마지막에는 전부 수평구조로 바꾸어 사용하였습니다.
가이드라인 템플릿 순서
Component → Variants → Table of figma properties → Spec → Usage Guide 순으로 보여집니다.
완성된 가이드라인을 Component부터 Usage Guide까지 상세히 정리했습니다.
1. Component
Chips, Buttons 들처럼 여러 개의 컴포넌트를 보여주어야 할 때는 칸을 분리하여 여러 개가 보일 수 있도록 하였고, Stepper, Slider처럼 단일 컴포넌트일 때를 고려하여 제작하였습니다.
2. Variants
Variants에서는 컴포넌트의 상세한 설명과 사용방법에 대한 내용을 작성하였습니다.
컴포넌트의 사용에 따라 State, Selected, Hierarchy 등의 설명이 기재되며, 컴포넌트 설명이 가장 자세하게 고지되어 있는 부분으로 가이드라인 작성 시 꼭! 있어야 하는 부분입니다.
3. Table of figma properties
컴포넌트의 property와 Values, Default value를 통해 컴포넌트의 통일된 명칭과 기본상태 값을 알려줍니다.
4. Spec
디자인시스템은 개발자와 다양한 사람들이 실무에서 사용하기 때문에 스펙적인(간격값과 같은) 상세한 부분도 설명했습니다.
+) Behavior - 움직임이 있는 컴포넌트에 경우 Behavior 설명이 추가됩니다. Datepicker, Slider, CheckBox에서 사용되며, 컴포넌트가 어떻게 구동되는지에 대한 상세한 설명이 추가됩니다.
5. Usage Guide
지마켓 시스템의 템플릿을 참고하여 만들어졌으며, 주로 Do, Don’t를 사용하되 컴포넌트에 따라서 Caution을 추가로 사용하거나 Caution만을 사용하여 주의사항을 나타냅니다.
가이드라인 제작 시 놓치기 쉬운 체크포인트!
가이드라인이 완성되었다면 한 번씩 보면서 놓친 점이 없는지 확인해 보세요.
✅ 컴포넌트가 가이드라인과 잘 연결되었는가?
앞서 말했던 대로 가이드는 다른 디자이너나 개발자들과의 소통을 위해 쓰는 것이라 사용성이 중요하다고 생각됩니다. 상단의 내비게이션에서 목차-> 컴포넌트 -> 가이드로의 이동이 원활할 수 있도록 하고 썸네일로 어느 컴포넌트 인지 미리 확인할 수 있게 한 것처럼 가이드에서의 사용성을 놓치지 말아야 합니다.
✅ 디스크립션은 누가 봐도 잘 이해할 수 있도록 작성했는가?
가이드 설명에 관련해서는 말을 무조건 줄여 쓰기보다는 차라리 조금 더 덧붙여 길어지더라도 최대한 한 번에 이해할 수 있도록 해야 합니다.(컴포넌트 디스크립션보다 세세하게 작성하는 것이 좋습니다.)
✅ 컴포넌트 복사 시 연결 문제는 없었는가?
컴포넌트와 가이드 문서를 별개로 두는 경우, 마스터 컴포넌트가 아닌 instance 형태를 가져와서 쓰는 것도 유의해야 합니다. master 컴포넌트로 잘못 복사하면 추후 연결 문제가 생길 수 있습니다.
✅ Do, Don’t는 보는 사람의 입장에서 설명되었는가?
Do, Don’t를 작성할 때는 보는 사람의 입장에서 작성되어야 합니다.
예를 들면 Don’t 작성 시 “이런 위치에 사용하지 마세요!”가 아니라 “이럴 때 사용하세요”라는 지침같이 작성하는 것이 좋은 작성방법입니다.
✅ 마지막 점검은 꼼꼼히 했는가?
가이드라인이 완성되었을 때, 컴포넌트의 간격값이 소수점이나 홀수로 떨어지진 않았는지, 네이밍은 통일된 방식으로 잘 작성되어 있는지, 빠져있는 디스크립션이 있는지, 컴포넌트는 반응형으로 잘 작동되는지 다시 한번 확인하는 과정을 거쳐야 합니다.
가이드라인의 완성단계에 없어선 안될 필수과정
가이드라인 완성 단계에 꼭 필요한 필수과정 이번 편은 가이드라인의 필요성과 제작 과정에 대해 정리했는데요. 가이드라인까지 작성 후 마지막으로 피그마에 디자인시스템 전체에 대한 소개 내용을 정리해야 합니다.
우리 조는 총 3페이지로 구성하여( Overview, Foundation & Component, Guideline) 정리했습니다.
총 3페이지로만 구성된 이유는 무료버전 사용으로 3페이지의 제한이 있기 때문에, 사용할 수 있는 페이지 내에서 효율적으로 디자인 시스템을 잘 보여주기 위해 고민하였습니다.
피그마에서 페이지의 파일 읽는 방법에 대해 알려드리겠습니다.
1. Foundation과 UI component가 있는 2page로 이동합니다.
먼저 오버뷰를 확인한 후, 2page로 이동합니다.
상단 Index에서 원하는 항목을 찾고, 텍스트를 클릭하여 바로 해당 항목을 확인할 수 있습니다.
언제든지 타이틀 영역의 버튼을 통해 목차로 돌아갈 수 있습니다.
2. 혹은 가이드라인을 바로 보기 위해 UI component들이 있는 3페이지로 이동합니다.
가장 상단 Index에서 원하는 컴포넌트를 찾은 후 바로 이동할 수 있습니다.
컴포넌트 상세 가이드를 확인할 수 있고, 목차로 돌아가거나, 마스터 컴포넌트로 이동할 수 있습니다.
여기까지 가이드라인 소개를 마치겠습니다.
알려드린 순서대로 페이지를 둘러보세요!
최종 디자인시스템 링크 바로가기
글을 마치며...
가이드라인 제작과정을 끝으로 8주간의 모든 과정을 담은 글이 끝났습니다.
모든 분들이 쉽게 접할 수 있는 글을 쓰기 위해 글 속에 제작과정뿐만이 아니라 저희만의 가벼운 꿀팁과 에피소드를 섞어 소개를 해봤는데요. 디자인 시스템이 생소한 주니어 디자이너 분들부터 디자인 시스템에 대한 세부지식이 필요한 시니어 디자이너분들까지 다양한 분들에게 도움을 줄 수 있는 글이 되길 바랍니다.
참고자료
