오늘 배운 것
지난 시간까지는 Color Style, Text Style, Component처럼 재사용할 디자인 요소를 만드는 방법을 배웠다.
이번에는 여기서 한 단계 더 나아가,
① 간격을 Variable로 등록하고
② 디자인 시스템을 페이지별로 정리하고
③ 기존 화면에 시스템 값을 빠짐없이 적용하고
④ Library를 이용해 다른 파일에서도 같은 시스템을 사용하는 방법
을 배웠다.
이번 수업의 핵심은 ‘디자인 시스템을 만드는 것’에서 ‘관리하고 공유하는 것’으로 넘어가는 과정이다.
01. Style과 Variable은 무엇이 다를까?
둘 다 값을 반복해서 직접 입력하지 않도록 도와주지만, 저장하는 방식이 다르다.
| 구분 | Style | Variable |
|---|---|---|
| 개념 | 여러 속성을 하나의 스타일로 저장 | 하나의 값에 이름을 붙여 저장 |
| 예시 | 글꼴 + 크기 + 행간을 묶은 Text Style | 16이라는 숫자 |
| 이번 시스템 | Color, Typography | Spacing |
| 사용 목적 | 디자인 속성의 조합을 재사용 | 개별 값을 이름으로 관리 |
예를 들어 Typography Style에는 글꼴·크기·굵기·행간처럼 여러 속성이 한꺼번에 포함될 수 있다.
반면 Variable은 16이라는 하나의 값을 Spacing/16이라는 이름으로 저장하는 방식이다.
왜 간격은 Variable로 만들까?
간격은 색이나 글자처럼 여러 속성을 묶어 사용하는 것이 아니라, 대부분 4px, 8px, 16px처럼 하나의 숫자값이 필요하기 때문이다.
그래서 이번에는 기존에 사용하던
4 · 8 · 12 · 16 · 24 · 32
6개의 간격을 Number Variable로 등록한다.
이름도 다음처럼 통일한다.
Spacing/4
Spacing/8
Spacing/12
Spacing/16
Spacing/24
Spacing/32
02. 숫자를 직접 입력하는 대신 이름을 연결한다
Variable을 만든 다음에는 Auto Layout의 Gap이나 Padding 등에 숫자를 직접 입력하지 않고 해당 Variable을 연결한다.
예를 들어 버튼 내부 여백이 16px이라면,
기존 → 16
변경 → Spacing/16
화면상 결과는 똑같지만, 관리 방식에는 큰 차이가 생긴다.
16만 적혀 있으면 우연히 16을 사용한 것인지 시스템에서 정한 16인지 알 수 없다.
반면 Spacing/16이라고 표시되어 있으면 디자인 시스템에 정의된 간격을 의도적으로 사용했다는 사실을 바로 알 수 있다.
시스템을 적용한다는 것은 단순히 값이 같은 것이 아니라, 그 값이 시스템과 연결되어 있다는 뜻이다.
03. 색·글자·간격을 모두 ‘이름’으로 관리한다
여기까지 적용하면 화면에서 직접 값을 입력해야 하는 부분이 크게 줄어든다.
색 → Style
글자 → Style
간격 → Variable
즉, #000000, 16px, Pretendard 16 Bold처럼 개별 값을 찾아 입력하기보다 정해둔 이름을 선택해서 디자인하는 구조가 된다.
이름이 있다는 것은 단순히 편리하다는 의미만 있는 것이 아니다.
각 값에 역할과 사용 기준이 생겼다는 뜻이기도 하다.
04. 디자인 시스템은 한 페이지에 몰아두지 않는다
26일차에는 00_Style이라는 한 페이지에 Color, Typography, Spacing, Component를 모두 모아두었다.
이번에는 이를 실제 관리가 편하도록 4개의 페이지로 분리한다.
| 페이지 | 들어가는 것 |
|---|---|
00_Color | 컬러 스타일 |
01_Typography | 텍스트 스타일 |
02_Spacing | 간격 Variable |
03_Component | Button, Card, List 등의 메인 컴포넌트 |
앞에 숫자를 붙이는 이유는 페이지 순서를 항상 일정하게 유지하기 위해서다.
이렇게 하면 시스템의 규모가 커져도 필요한 항목을 쉽게 찾을 수 있다.
05. 디자인 시스템은 ‘보관함’이 아니라 ‘문서’다
각 페이지에 스타일이나 컴포넌트만 던져놓는 것으로 끝나지 않는다.
처음 보는 사람도 사용할 수 있도록 각 항목에 다음 내용을 함께 기록한다.
이름 / 쓰는 곳 / 하지 말 것
예를 들어 Primary Color라면 단순히 컬러 견본만 보여주는 것이 아니라,
이름: Brand/Primary
쓰는 곳: 주요 버튼, 강조 요소 등
하지 말 것: 넓은 배경 전체에 과도하게 사용하지 않기
처럼 사용법까지 기록한다.
Component 역시 이름과 사용처를 Caption으로 표시해둔다.
결국 디자인 시스템은 내가 만든 요소를 모아놓은 창고가 아니라,
다른 사람이 보고도 같은 기준으로 화면을 만들 수 있도록 설명한 문서다.
06. Component 페이지에는 Main Component만 둔다
03_Component에는 실제 화면에서 복사해서 사용한 Instance들을 모으는 것이 아니라 원본인 Main Component를 모아둔다.
이번에는 기존 Button과 Card에 더해 List 역시 Component로 등록한다.
이렇게 하면 구조가 명확해진다.
03_Component → Main Component 보관
실제 화면 → Instance 사용
원본을 한곳에서 관리하고 실제 화면에서는 Instance를 사용하기 때문에, 원본을 수정했을 때 연결된 화면에도 변경 사항을 반영할 수 있다.
07. 디자인 시스템은 만들어놓는 것으로 끝나지 않는다
시스템을 만들었더라도 실제 화면에서 직접 입력한 값이 계속 남아 있다면 시스템을 제대로 사용하고 있다고 보기 어렵다.
그래서 기존에 만들었던 Day 22의 데스크톱·모바일 레이아웃을 다시 확인하면서 시스템 값으로 교체한다.
적용 순서는 크게 세 단계다.
① 화면 요소를 Component Instance로 교체
② 색과 글자를 Style로 교체
③ Gap과 Padding을 Spacing Variable로 교체
특히 화면의 요소를 그냥 복사해서 사용한 것인지, Component에서 만들어진 Instance인지 확인하는 것이 중요하다.
08. ‘예외 없음’이 중요한 이유
디자인 시스템을 사용하면서 일부 요소에만 직접 입력한 값이 남아 있으면 화면이 커질수록 관리하기 어려워진다.
이번 수업에서는 크게 세 가지를 점검한다.
| 점검 | 확인할 것 |
|---|---|
| 색 | Fill과 글자 색에 Style 이름이 있는가? |
| 글자 | Text Style 이름이 표시되는가? |
| 간격 | Auto Layout의 Gap과 Padding에 Spacing 이름이 있는가? |
핵심은 겉으로 같은 값인가가 아니라 시스템과 연결되어 있는가이다.
만약 시스템에 없는 값이 필요하다면 무조건 임의로 입력하기보다,
기존 시스템 값으로 교체할 수 있는지 확인 → 정말 필요하다면 시스템에 새로운 값을 추가하고 이름 붙이기
순서로 생각한다.
09. 시스템은 다른 파일에서도 사용할 수 있다
디자인 시스템의 장점은 하나의 Figma 파일 안에서만 사용하는 것이 아니다.
완성한 시스템을 Library로 Publish하면 다른 파일에서도 같은 Style, Variable, Component를 불러와 사용할 수 있다.
전체 흐름은 다음과 같다.
시스템 파일에서 Publish
→ 다른 파일에서 Library 활성화
→ Assets에서 필요한 요소 사용
이렇게 하면 여러 화면이나 프로젝트에서 같은 디자인 기준을 공유할 수 있다.
10. 시스템을 수정하면 다른 파일도 업데이트할 수 있다
Library로 연결된 Component는 단순한 복사본이 아니다.
원본 시스템 파일에서 Component나 Style 등을 수정한 뒤 다시 Publish changes하면, 해당 Library를 사용하는 파일에서 업데이트를 받을 수 있다.
즉,
보내는 파일 → Publish / Publish changes
받는 파일 → Library ON / Review / Update
이라는 구조다.
그래서 버튼을 여러 프로젝트에서 사용하고 있더라도 모든 파일의 버튼을 하나씩 찾아 수정할 필요가 없다.
시스템의 원본을 수정하고 → 변경 사항을 배포하고 → 사용하는 파일에서 업데이트를 받는 방식으로 관리할 수 있다.
⭐ 오늘 기억해둘 것
1. Style은 색·글자처럼 디자인 속성을 관리하고, Variable은 간격처럼 하나의 값을 이름으로 관리한다.
2. Color · Typography · Spacing · Component를 각각 페이지로 나누고 사용법까지 기록하면 디자인 시스템 자체가 하나의 문서가 된다.
3. 실제 화면에서는 직접 입력한 값을 없애고 Style · Variable · Instance를 사용해 시스템과 연결한다.
그리고 완성한 시스템을 Library로 Publish하면 다른 파일에서도 동일한 디자인 기준을 공유하고 업데이트할 수 있다.
디자인 시스템은 같은 값을 쓰는 것이 아니라, 이름 붙인 기준에 연결해서 쓰고 그 기준을 여러 화면과 파일에서 함께 관리하는 것이다.
