brunch

라이킷 17 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 솝이 Mar 20. 2024

디자인 시스템의 첫 번째 발판, Foundation

디자인 시스템을 막 시작한 당신에게 Part 2.

튼튼한 디자인 시스템은 다음과 같은 시스템으로 이루어져 있습니다.

Foundations

Components

Patterns

Features

Screens

이번 글에서는 기초단계, 즉 Foundation을 알아보겠습니다.

디자인 시스템과 집 짓는 것은 왜 비슷하다고 할 수 있을까요? 어떤 디자이너든지 컨테이너 박스 집과 같은 디자인 시스템을 만들고 싶어 하지는 않을 거예요. 집을 만들려면 땅을 파고 단단하게 만든 다음 foundation을 만들듯이 디자인 시스템도 이와 비슷합니다.

이 레벨에는 우리가 정의해야 할 다음과 같은 요소들이 있습니다.

-Typography
-Color
-Spacing
-Layout
-Size
-Border
...

이와 같은 것들이 기본적으로 정립되어 있지 않은 채 디자인 시스템 집을 짓게 된다면, 언제든지 주변의 환경에 따라 무너지기 쉬운 집이 되어버릴 수도 있습니다. Foundation 레벨의 영향력은 매우 크기 때문에 신중하게 만들어야 한다는 것을 의미합니다. 이를 위해서는 관련 stakeholders들과 가깝게 일하면서 밀접한 협업은 필수입니다.

Foundation 요소들 중 타이포그래피와 사이즈를 어떻게 정립할 수 있는지 살펴볼게요!

타이포그래피는 어떻게 정립할 수 있을까요?

저희 팀은 오랜 시간 써오던 폰트를 바꾸는 프로젝트를 진행했었어요. 폰트는 디자인시스템에서 매우 중요한 부분일 거라는 건 짐작이 쉽게 가실 거예요. 타이포그래피라고 말을 바꾸어서 포괄적으로 설명을 해볼게요.

저는 폰트의 종류를 바꾼 것뿐 아니라 우리가 사용할 font sizes, font weights, line heights, letter spacing 들을 다시 정의함으로써 타이포그래피를 디자인했어요. 그럼 이 중에서 폰트 사이즈들을 어떻게 정의했는지 한번 볼게요.

폰트의 사이즈를 아무거나 다 사용할 수 있을까요?

Font size 의 사이즈 원칙(예시)

사용하고 싶은 대로 사용해도 큰 문제가 안될 수 있지만, increment라는 룰을 통해 규격 있게 시스템화할 수 있어요.

그리고 이와 비슷하게 Line height 도, Letter spacing 또한 ‘우리 팀이 사용할 것들은 이러한 것들이야’라며 그 value들을 정해놓는 것도 방법이에요.

예를 들어 line height의 경우,

large는 160%

medium은 135%

small은 100%

이런 식으로 정해놓고 필요한 경우에 따라 이 세 가지 안에서 사용하는 거예요. 그럼 타이포그래피는 여기까지 보고, 다음으로 넘어가서 Size를 짚어볼게요.

Size는 어떤 식으로 정립하면 좋을까요?

예를 들어 우리 디자인 시스템은 주로 짝수로 이루어진 사이즈 규격을 메인으로 사용할 것이라고 하면, 1,2,4,8,12 등부터 최대 80(예를 들어 단위를 px)까지 사용할 것이고 각 사이즈에 기초적인 foundation token을 부여하는 방법 등으로 Size를 정의할 수 있어요.

(*토큰이란 간단히 설명하자면, 그냥 숫자가 아닌 그 값에 이름을 붙여놓은 것이라고 생각하시면 편해요. 예를 들어, 2px -> size01, 여기서 토큰은 size01 을 가리킵니다)

그럼 나중에 컴포넌트(Component) 단계에서 버튼 세트를 만드는 것을 맛보기로 예를 볼게요.

버튼 사이즈 정의하기

예를 들어, 우리 회사의 시스템은 버튼의 높이 크기를 기반으로 세가지 사이즈가 필요하다고 해볼게요. 그럼 이 버튼 높이의 사이즈를 어떻게 정할까요? 그냥 보이는대로 41픽셀, 55픽셀.. 보기 좋은대로 만드는 것 보다는, 이미 Foundation에서 만들어 놓은 사이즈 값들 중에서 필요한 값들을 골라서 쓸 수 있습니다.

이런 식으로 border radius, border width 등도 이 Foundation 단계에서 값들을 정리해놓을 수 있습니다.

Foundation은 굉장히 기초적이지만 매우 매우 중요한 근본을 다지는 부분이니 이 단계에서 Foundation을 잘 만들어놓으면 다음에 컴포넌트(Component)들을 만들 때에 매우 유용합니다.

다음 글에서는 여기서 정한 Foundation 요소들을 사용하여 유저가 직접 사용하고 만나는 Component는 어떤 것인지 알아볼게요.

keyword