아토믹 디자인으로 본 Airbnb 디자인 시스템
디자이너 5인의 Airbnb 디자인 시스템 제작기 1편
이 글은 노트폴리오 디자인 시스템 워크숍 4기 1조 원들이 8주간 함께 만든 디자인 시스템 이야기 중, 1편 - 디자인 시스템의 기초에 관한 이야기입니다.
안녕하세요, 저는 “Airbnb 디자인 시스템 제작기”의 인트로를 맡게 된 남수지라고 합니다. 이 글은 8주 노트폴리오 디자인 시스템 워크숍 4기의 디자이너 다섯 명이 8주간 함께 만든 디자인 시스템 제작기를 담은 글입니다.
지난봄, 8주 동안 5명의 디자이너들이 한 팀이 되어 디자인시스템 워크숍을 통해 Airbnb 디자인시스템을 제작했습니다. 그전에는 서로 알지 못했던 다섯 명의 디자이너가 매주 퇴근 후 2~3번씩 모여 과제와 수업을 열심히 이어갔는데요. 워크숍의 주제는 디자인시스템을 만들어보고 싶은 대상 서비스를 정한 후 분석 및 분해한 후에 각자 조에서 디자인시스템을 새롭게 만들어보기였습니다. 우리 조는 Airbnb 서비스를 정하고 디자인 시스템을 만들게 되었습니다.
워크숍이 끝나고 우리는 배운 내용을 글로 엮어보자는 후속 프로젝트를 시작하게 되었는데요. 저를 비롯한 각 팀원이 한 편씩 제작을 맡아 총 다섯 편의 글을 엮어내었습니다. Airbnb를 선정한 이유부터 파운데이션, UI 컴포넌트, 가이드 제작과 실제 사용성 검증까지 당시 제작 과정에서 배운 내용을 상세하게 풀었답니다.
전체 목차
1편: 아토믹 디자인으로 본 Airbnb 디자인 시스템
2편: 디자인 시스템의 뼈대를 잡는 Foundation 제작하기
3편: 쓸모 있는 컴포넌트 만들기
4편: 피그마로 컴포넌트 제작 시 활용할 수 있는 꿀팁
5편: 가이드라인의 필요성과 제작과정
디자인시스템 제작을 통해 얻고 싶었던 것
워크숍에 참여한 다섯 명 디자이너 모두 경험한 것도 다르고 목표도 달랐습니다. 그 목표를 크게 두 부류로 나눌 수 있었는데요, 주니어 디자이너와(0~2년 차) 시니어 디자이너(4년 이상)로 나눌 수 있었습니다. 하지만 “디자인 시스템 제작을 제대로 경험해보고 싶다”는 목표는 동일했기 때문에 서로 동기부여가 잘 되었던 것 같네요.
주니어 디자이너들의 니즈
디자인시스템이란 것이 무엇이고, 어떻게 만드는지 제작 과정을 경험해보고 싶다
포트폴리오를 쌓아 취업에 도움을 받고 싶다
피그마로 컴포넌트를 만들고 관리하는 방법을 배우고 싶다
시니어 디자이너들의 니즈
디자인시스템을 회사에서 만들어야 하는데, 체계적으로 만드는 과정을 배우고 실무에 적용하고 싶다
1인 디자이너 팀에서 주로 경력을 쌓아 협업을 위한 시스템을 만들어본 경험이 부족하다
플랫폼 디자이너가 디자인 시스템을 구축하고 관리하는 노하우를 배우고 싶다
그래서 이번 제작기는 디자인 시스템을 만들 예정이거나 만들면서 고군분투하고 있는 디자이너, 그리고 디자인 시스템의 실무 제작 과정이 궁금한 모든 분들을 위한 글입니다. 이 글을 읽는 여러분도 주니어부터 시니어까지 다양한 경력과 경험을 가지고 있을 것이라 예상하는데요. 디자인 시스템을 제작하는 과정이 궁금한 여러분 모두에게 도움이 되는 아티클이 되기를 바랍니다.
디자인 시스템에 대하여
디자인 시스템이 무엇이고 왜 필요한가요?
디자인 시스템은 “일관된 디자인 원칙과 요소를 체계적으로 모아놓은 디자인 가이드”입니다. 디자인 시스템의 핵심은 “반복과 재사용성”인데요, 반복적으로 사용할 것들을 미리 약속해 놓고 일관된 방향으로 디자인을 하는 것입니다.
디지털 제품에서는 반복되는 화면과 컴포넌트들을 조합하여 인터페이스를 제작합니다. 매 번 화면을 디자인할 때버튼이나 텍스트 인풋 컴포넌트 등 모든 것을 새로 만들어야 한다면 디자이너들은 퇴근을 할 수가 없을 거예요. 그래서 어떤 것을 시스템화할지 결정하는 가장 중요한 요소는 “해당 요소를 반복해서 사용할 것인가”를 판단하면 된답니다.
그렇다면 어떤 것들을 디자인 시스템으로 만들 수 있는 걸까요? 색상, 타이포그래피, 레이아웃, 그림자 사용과 같은 기초 디자인 요소부터 UI 컴포넌트, 검색 바, 크게는 페이지 구성까지 폭넓게 UXUI 디자인 요소들을 디자인 시스템으로 만들 수 있습니다.
디자인 시스템을 잘 사용한다면 다음과 같은 효과를 누릴 수 있습니다.
유저에게 일관된 비주얼과 사용자 경험을 제공할 수 있습니다.
디자인과 개발 과정에서 소통 시간을 줄일 수 있습니다.
대규모 프로젝트나 여러 제품군에 동일한 사용자 경험을 쉽게 적용할 수 있습니다.
업데이트와 수정이 필요할 때 쉽게 디자인을 관리할 수 있습니다.
디자인 시스템, 언제 만들어야 할까요?
디자인 시스템이 필요한 이유는 여러 가지가 있지만, but! 디자이너의 일을 줄이기 위해서 만들어진 것이라는 점을 잊어서는 안 됩니다. 각자 서비스의 상황을 고려하지 않고 디자인 시스템을 만들게 되면 오히려 작업 효율성을 떨어뜨리고, 디자인 시스템의 본래 목적을 상실할 수도 있게 됩니다.
✅ 제품 안에서 재사용되는 디자인 요소들이 관리가 잘 되지 않아 관리 리소스가 너무 많이 들 때에 만드세요
✅ 팀, 서비스 내에 효율적인 프로덕트 디자인에 대한 협의가 이루어졌을 때 만드세요
반면, 제품의 방향성과 개발 방식이 계속해서 바뀌고 있을 때에는 디자인시스템 제작을 피하는 것이 좋습니다. 그 이유는 이런 시기는 빠른 계획과 실행이 중요한데, 디자인 시스템을 유지하고 업데이트하는 데에 너무 많은 시간이 소요될 수 있기 때문입니다.
아토믹 디자인
디자인 시스템을 제대로 만들기 위해서는 아토믹 디자인이라는 개념을 알면 좋습니다. 아토믹 디자인이란 아주 작은 단위부터 디자인 시스템을 쌓아 최종 UI까지 들어가는 과정을 시각화한 개념인데요. 가장 작은 조각은 Atom이라 정의하고, Atom이 모여 Molecule이 되고, 그것들이 모여 Organism이 되고, 더 크게는 Template, Page까지 구성하는 것을 마치 생물학에 빗대어 표현한 겁니다.
생물학과 유사한 아토믹 디자인사람으로 치면 가장 작은 최소 단위인 세포(Atom)부터 생각할 수 있는데요. 세포가 모여 근육, 혈관 같은 조직(Molecule)을 이루고, 그것들이 모여 눈썹이나 코 같은 기능을 하는 기관(Organism)을 이룹니다. 그리고 그런 기관들이 모여 소화 시스템, 순환 시스템 같은 하나의 체계를 이루고(Template) 결국 그 모든것들이 모여 완전한 사람(Page)을 이루게 되는 거죠.
Airbnb의 화면을 분해하고 다시 조립하면서 우리 나름의 아토믹 시스템을 만들어 보았습니다.
Airbnb 화면을 아토믹 디자인 체계로 나누어본 예시Atom은 더 이상 쪼개질 수 없는 기본 요소들입니다. 폰트, 컬러, 그리드, 섀도와 같은 파운데이션, 그리고 버튼, 인풋과 같은 기본 컴포넌트가 해당됩니다.
Molecule은 2개 이상의 Atom을 결합한 것입니다. 에어비앤비에서는 바텀 네비게이션, 서치 바 등이 해당하고 이들은 여러 화면 내에서 재사용이 빈번하게 이루어지는 특징이 있습니다.
Organism은 Atom, Molecule을 여러 개 조합하여 이루어진 것입니다. 에어비앤비 “숙소 검색 화면 내의 검색 단위 영역”을 예로 들 수 있는데요, Organism은 앞선 두 가지와 다르게 특정 문맥 속에서 사용되기 때문에 상대적으로 재사용될 가능성이 낮습니다.
Template은 여러 개의 Organism, Molecule로 구성된 빈 화면의 레이아웃입니다. 특히 “숙소 리스트 화면”처럼 반복적으로 사용되는 화면의 와이어프레임이라고 볼 수 있습니다.
Page는 마지막으로, 이 모든 것이 합쳐서 완성된 UI입니다. 템플릿 화면에 실제 이미지와 데이터가 출력되어 살아있는 서비스가 된 상태를 말합니다.
우리가 만든 Airbnb 디자인 시스템 요소들은 거의 대부분 대략 Atom, Molecule, Organism 정도의 단계로 구성했습니다. 이번 프로젝트에서 커버하기로 한 서비스의 플로우 범위가 크지 않았기 때문인데요, Template으로 만들어낼 만한 요소가 많지 않아서 그랬답니다.
여러분이 디자인시스템을 제작할 때에는 어떤 요소가 얼마나 재사용될 것인지를 기준으로 판단하면 좋습니다. 모든 것들을 다 시스템화할 수 없기 때문에, 시스템화할 것을 정하는 것 또한 중요하답니다. 예를 들어 어떤 서비스는 Molecule 단위가 가장 많이 필요할 수도 있고, 반복되는 화면이 많다면 Template 이 많을 수 도 있어요. 디자인 시스템에 정답은 없으므로, 각자 서비스의 상황에 맞는 시스템 요소를 만들어 가면 좋습니다.
다음 글로 넘어가며...
이 글을 통해 우리와 비슷한 니즈를 가진 디자이너들이 공감하고, 재미있게 읽으실 수 있기를 기대합니다. 다음 글에서는 디자인 시스템의 기초가 되는 Foundation 부분을 다룰 예정이에요. 색상, 타이포그래피, 그림자, 그리드&스페이싱 시스템을 어떻게 제작하고 관리할 수 있는지 자세히 알아보겠습니다.
최종 디자인 시스템 링크 바로가기
