디자인 시스템의 뼈대를 잡는 Foundation
디자이너 5인의 Airbnb 디자인 시스템 제작기 2편
이 글은 노트폴리오 디자인 시스템 워크숍 4기 1조원들이 8주간 함께 만든 디자인 시스템 이야기 중, 2편 - 기초 파운데이션 제작에 관한 이야기입니다.
안녕하세요. 저는 디자인워크숍 4기 1조의 디자이너 중 한 명인 지현입니다.
1편에서는 디자인 시스템의 기본 개념에 대해 알아보았습니다. 2편은 가장 먼저 제작된 파운데이션에 대한 이야기인데요, 파운데이션이란 디자인 시스템의 기본을 이루는 요소들을 의미합니다. 여기에는 디자인 언어와 원칙, 기본적인 UI 구성 요소, 스타일 가이드 등이 있습니다. 이 모든 것을 포함하는 파운데이션은 디자인 시스템의 다른 모든 부분이 일관되게 구축되고 유지될 수 있도록 도와주는 중요한 역할을 하고있습니다. 이번 글에서는 파운데이션의 제작 과정과 그 안에서 생길 수 있는 고민을 우리만의 방식으로 해결했던 스토리를 이야기 해 보도록 하겠습니다.
Foundation
파운데이션은 앞서 말씀드렸듯 디자인 시스템의 기본을 이루는 요소이며 각 구성원이 가장 처음으로 합의하는 규칙입니다. 파운데이션 구축의 중요성은 다음과 같습니다.
보통 파운데이션에서는 주로 컬러팔레트, 타이포그래피, 아이콘, 스페이싱, 그리드시스템, 애니메이션, 토큰 등의 기본 요소들을 만들게 되는데요, 우리는 Airbnb에 가장 필수적이라고 생각하는 요소로 파운데이션을 구성했습니다. 그 결과 Color · Typography · Shadows · Grid & Spacing · Icons 총 5개로 구성했습니다.
1. Color
디자인 시스템에서 컬러 파운데이션을 설정하는 과정은 디자인의 일관성, 접근성, 브랜드 아이덴티티를 보장하는 데 필수적이라고 할 수 있는데요, 우리는 기본적으로 가장 작은 단위의 컬러 토큰을 기준으로 컬러 팔레트를 제작했습니다.
Color Foundation을 만드는 과정
1. 컬러 추출
2. 컬러 팔레트 구성하기
기본 색상 (Main Colors): 브랜드의 주요 색상으로, 주로 로고와 주요 인터페이스 요소에 사용됩니다.
보조 색상 (Secondary Colors): 기본 색상을 보완하며, 인터페이스의 다양한 부분에서 사용됩니다.
중립 색상 (Neutral Colors): 배경, 텍스트, 보더 등 다양한 요소에 사용되며, 주로 흰색, 검은색, 회색 계열로 구성됩니다.
3. 컬러 변형 정의하기
밝기와 채도: 동일한 색상의 밝기와 채도를 조절하여 다양한 변형 색상을 정의합니다.
명암 대비: 접근성을 고려하여 색상의 명암 대비를 조정합니다. 이는 특히 텍스트와 배경 사이의 가독성을 높이는 데 중요합니다.
4. 시멘틱 컬러를 적용해서 컬러 사용 가이드라인 작성하기
사용 예시: 각 색상이 사용되는 구체적인 예시를 제공하여 일관성을 유지합니다.
제한 사항: 특정 색상이 어디에 사용되어야 하며, 어디에 사용되지 말아야 하는지에 대한 규칙을 정의합니다.
접근성 고려: 색맹 사용자와 저시력 사용자를 위한 대비 비율을 고려하여 색상을 선택합니다.
어떻게 해야 효율적으로 쓰일 수 있는 팔레트를 만들까?
먼저 정확한 컬러를 확인하기 위해 개발자 모드에서 에어비앤비 웹사이트에 사용된 컬러를 추출했는데요, 쓰임새가 불분명한 컬러들이 너무 많았습니다. 대표적으로 이렇게 알 수 없는 녹색, 파란색, 채도가 짙은 붉은 색 등, 어플과 사이트에서 실제로 쓰이고 있는지 조차 불분명한 컬러들이 대부분이었습니다. 이런 상황에서 효율적인 팔레트를 만들기 위해서는 어떻게 해야할까요?
1. 우리만의 컬러 기준 정하기
그래서 저희는 개발자 모드에서 모든컬러 팔레트를 추출하려고 했던 초반 판단을 바꾸어 확인할 수 있는 컬러들의 값들만 추출하고 나머지 팔레트에 대해서는 우리 나름의 새로운 컬러 팔레트를 만들기로 결정했습니다.
우리가 선정한 팔레트는 총 5개로, Main pink · Cool gray · Others · BlackTP · Gradient Color 입니다.
2. 디자인 자유도를 위한 Black Transparent(블랙 투명도) 팔레트 추가하기
저희가 지정한 컬러만으로는 에어비엔비의 화면에서 쓰이는 모든 컬러나 상황에 대응할 수 없었기 때문에 투명한 레이어를 표현할 때 혹은 다른 컬러와 함께 중첩해서 쓸 수 있는 Black Transparent(블랙 투명도)팔레트를 추가했습니다.
3. 시멘틱 컬러를 적용한 명확한 가이드라인 작성하기
시멘틱 컬러를 사용하게 되면 용도에 따른 네이밍을 할 수있기 때문에 컬러명(Pink)을 사용하는 것 보다 오해의 소지가 적으며 향후 수정과 유지보수가 쉽다는 장점이 있습니다.
Sementic Color란?
시멘틱은 색상단계가 아닌 사용 방법에 따라 색상 이름을 지정하는 방법입니다. 예를 들어 기존의 Pink100 대신 Main Color와 같은 형식으로 지정하는 것입니다.
플러그인 추천 TIP
컬러팔레트를 만들기에 앞서 이 많은 컬러들을 어떻게 제작 해야하나 막막하신 분들은 플러그인을 활용한다면 훨씬 편하고 빠르게 제작할 수 있습니다. 플러그인은 여러종류가 있지만, 그 중에서 저희가 가장 잘 활용했던 플러그인 두 가지를 소개하겠습니다.
Chromatic Figma는 첫 컬러와 마지막 컬러값을 지정하고 원하는 가짓수의 단계로 설정하면 그 사이의 컬러값을 얻을 수 있는 유용한 플러그인 입니다.
2. Foundation: Color Generator
Foundation: Color Generator는 원하는 컬러값을 지정하면 명도별로 그라데이션 컬러값을 얻을 수 있는 플러그인 입니다.
컬러팔레트 만들기 TIP
정확하고 미세한 색상 값을 추출하고 싶다면 시간이 길게 소요되더라도 그라디언트로 추출한 색상값에 원하는 색상 스포이드로 하나씩 찍어서 팔레트를 완성하는 방법도 추천합니다.
1. 제작할 팔레트의 처음, 중간, 마지막의 컬러값을 선정합니다.
2. 세 개의 컬러값을 넣은 그라디언트를 제작합니다.
3. 만들어진 그라디언트 컬러를 원하는 갯수의 단계로 쪼개서 팔레트를 제작합니다.
최종 Color Foundation
2. Typography
타이포그래피는 디자인 시스템의 일관성과 효율성을 높이는 데 매우 중요한 요소입니다.
Typography Foundation을 만드는 과정
1. 브랜드의 톤에 맞는 폰트선정
타이포는 국문, 영문 폰트관리에 최적화 되어있는 Pretendard로 선정했습니다.
2. 타이포그래피 스케일 정의
사이즈별로 위계를 구분했습니다. (→ 폰트사이즈가 커질수록 높은위계(HeadlineXL), 폰트 사이즈가 낮아질수록 낮은 위계(Caption1))
Display(디스플레이): 디스플레이는 주로 제목, 로고, 특별한 주제 등을 강조하는 매우 큰 텍스트를 의미합니다. 일반적으로 36pt 이상의 매우 큰 크기를 사용합니다.
Headline(헤드라인): 헤드라인은 주제나 섹션의 제목을 강조하는 큰 텍스트입니다. 기본적으로 18에서 36pt사이의 크기를 사용합니다.
Body(본문) : 본문은 일반적으로 긴 텍스트를 포함하는 주요 부분을 나타냅니다. 일반적으로 10에서 14pt 사이의 크기를 사용합니다.
Caption(캡션): 캡션은 일반적으로 이미지나 그래픽 요소와 함께 표시되는 짧은 설명이나 부가 정보를 나타냅니다일반적으로 8pt에서 12pt 사이의 작은 크기를 사용합니다.
3. 네이밍 기준 정의
폰트의 네이밍은 숫자로 구분하는 경우(Body 1,2,3)와, 사이즈로 구분하는 경우(BodyLg, Md, Sm)가있는데 저희는 사이즈로 구분하기로 했습니다.
4. 스타일 가이드 작성하기
폰트 사이즈: 다양한 텍스트 요소의 크기.
폰트 웨이트: 굵기 및 스타일(예: 볼드, 이탤릭).
컬러: 텍스트에 사용할 색상.
정렬 및 간격: 텍스트 정렬, 마진, 패딩 등의 규칙.
행간값 적용 TIP
짧은 문장과 긴 문장에 동일한 행간값을 적용하는게 시각적으로 안좋아 보일 수 있기 때문에 필요에 따라 용도를 구분해서 행간값을 다르게 지정하는 것이 좋습니다.
최종 Typography Foundation
3. Shadows
Shadows는 요소의 깊이, 계층 구조, 및 시각적 일관성을 유지하는 데 중요한 요소입니다.
Shadow 구성을 위한 과정
1. 에어비엔비 섀도우 값 수집 및 분류
2. 기본 파라미터 설정
X축 오프셋: 요소가 좌우로 얼마나 이동할지를 설정합니다.
Y축 오프셋: 요소가 상하로 얼마나 이동할지를 설정합니다.
블러 반경: 쉐도우의 퍼짐 정도를 결정합니다. 값이 클수록 부드럽고 넓게 퍼집니다.
스프레드 반경: 쉐도우의 크기를 조정합니다. 양수 값은 확장, 음수 값은 축소합니다.
색상 및 불투명도: 쉐도우의 색상과 불투명도를 설정합니다. 일반적으로 블랙 또는 다크 그레이 색상이 많이 사용됩니다.
3. 섀도우 스타일 정의
4. 사용 가이드라인 작성
크기별로 정의한 섀도우값의 x,y값과 오퍼시티값이 비례해야만할까?
컬러는 통일하되 y값 크기에 따른 사이즈를 정의함으로써 통일감 주기
섀도우 값의 X, Y 오프셋과 불투명도(Opacity) 값이 반드시 비야 하는 것은 아닙니다. 각각의 속성은 개별적으로 조정되어 다양한 디자인 요구를 충족할 수 있습니다. 에어비엔비의 섀도우는 사이즈별 오퍼시티 값, xy 값, 블러 값이 모두 달랐습니다. 우리는 최대한 에어비엔비와 최대한 비슷하면서 일관성 있는 파운데이션 제작을 위해 컬러는 통일하되 y값이 커질 수록 사이즈가 커지는 규칙으로 정의하고 나머지 값은 유연성을 가질 수 있도록 제작했습니다.
최종 Shadow Foundation
4. Grid&Spacing
그리드와 스페이싱 은 화면을 안정적으로 구성 할 수 있게 하는 중요한 규칙입니다. 화면에서 여백을 일관성 있게 설정하고 오브젝트를 배치하면 시각적으로 안정감을 줄 수 있습니다.
Grid&Spacing 구성을 위한 과정
1. 그리드와 스페이싱 값 종류 수집 및 분류
2. 4배수 규칙에 따른 스페이싱 설정
해상도가 홀수로 끝나는 경우(iphoneX:375등), 양쪽 사이드부터 4배수를 맞추고 가운데 에셋이나 마진의 크기를 홀수로 남기는 방식으로 4배수 간격을 적용할 수 있습니다.
컬럼 수 결정: 페이지의 폭과 높이를 고려하여 몇 개의 세로 및 가로 컬럼이 필요한지 결정합니다.
간격 정의: 각 컬럼 사이의 간격(거터)과 행 사이의 간격(리드)을 결정합니다.
프레임워크 선택: 그리드 시스템을 구현하기 위해 프레임워크나 그리드 시스템을 선택할 수 있습니다.
4배수 규칙이란?
주로 그리드 시스템과 레이아웃을 정의할 때 사용되는 원칙으로, 크기와 간격을 설정할 때 4의 배수를 기준으로 하는 방법입니다. 이는 4배수 디바이스 너비(360,412등)가 대부분인 안드로이드 기기에 특히 적합한 규칙입니다.
3. 간격 및 패딩 설정
간격과 패딩은 텍스트와 요소들 사이의 공간을 조절하여 레이아웃을 균형 있게 만듭니다. 주요 고려 사항은 다음과 같습니다.
텍스트 라인 높이: 텍스트의 가독성을 높이기 위해 행간을 적절히 설정합니다.
요소 간격: 헤딩과 본문 텍스트, 이미지와 텍스트 등 각 요소 사이의 간격을 일정하게 유지하여 시각적인 조화를 제공합니다.
마진 및 패딩: 요소들과 그리드 외곽 사이의 마진과 요소 내부의 패딩을 일관되게 설정하여 디자인의 일관성을 유지합니다.
일관된 규칙 외의 유연성은 어떻게 줘야할까?
실제로 많은 디자인 시스템에서는 유연성을 제공하기 위해 다양한 단위를 사용하고 있습니다. 여러 가지 다른 단위를 고려하는 것이 디자인의 창의성을 높이고, 특정 요구사항이나 디자인 목표에 더 적합한 솔루션을 찾는 데 도움이 될 수 있습니다. 우리는 기본적으로 4배수 규칙으로 하되 불가피한 경우 1,2,6 도 필요에 따라 사용하기로 했습니다.
피그마 그리드 설정 TIP
단축키(Shift+G)를 통해 레이아웃 그리드를 모두 숨기거나 모두 표시되도록 할 수 있지만 그리드를 꺼놓은 상황에서도 거터나 마진값을 확인 할 수 있도록 별도 표기를 해주는게 좋습니다.
최종 Grids&Spacing Foundation
5. Icon
디자인 시스템 구축시 필요에 따라 오픈소스를 활용하면 더 효율적으로 제작할 수 있습니다. 8주만에 아이콘까지 제작하는 것은 시간적으로 무리가 있었기 때문에 우리는 에어비앤비 앱에서 필요한 대부분의 아이콘을 가지고 있다고 판단한 Remix Icon오픈소스를 사용했습니다.
다음 글로 넘어가며...
지금까지 5개의 파운데이션을 만드는 과정에 있어서 여러 고민을 해결하기 위해 저희 팀원들끼리 서로 상의하며 제작한 스토리를 말씀드렸는데요. 파운데이션은 시스템 제작시 가장 기본이 되는 뼈대 이기 때문에 더 신중하게 만들어야 하는 단계이며 더더욱 팀원들과의 소통이 가장 중요한 부분이라고 생각됩니다. 저희의 제작과정을 통해 여러분의 시스템 제작에 도움이 될 수 있으면 좋겠습니다.
다음으로는 컴포넌트 제작과정을 보여드릴텐데요. 컴포넌트에 대한 기본 이해부터 제작시 꿀팁도 함께 포함되어있으니 다음 게시물도 기대부탁드립니다!
최종 디자인 시스템 링크 바로가기
참고자료
지마켓 디자인 시스템
쏘카 디자인 시스템
원티드 디자인 라이브러리
