4. Figma UI 스타일 가이드

1 UI 스타일 가이드를 만들 때 꼭 지켜야 할 것

스타일 가이드는 팀이 함께 보는 약속표와 같다. 색·글씨·간격을 한 곳에 정해 두면, 화면이 몇 장으로 늘어도 모두 같은 기준으로 만든다.

1. 한 곳에만 정해 두고 모두 그곳에서 꺼내 쓴다. 화면마다 다시 정하지 않는다.
2. 직접 칠하지 말고 스타일로 등록해 쓴다. 원본 하나만 고치면 그 스타일을 쓴 곳이 한꺼번에 바뀐다.
3. 이름은 역할로 짓는다. "blue"가 아니라 "primary"로 적는다.
4. 처음엔 적게 시작한다. 색 네다섯 가지, 글씨 세 단계면 기본 화면을 채운다.
5. 간격은 한 가지 배수로 맞춘다. 4나 8의 배수로 정하면 화면이 가지런해진다.
6. 글자와 배경의 밝기 차이를 충분히 둔다. 본문 글자는 배경과 대비 4.5:1 이상을 지킨다(WCAG AA 기준).
7. 반복되는 요소는 컴포넌트로 만든다.
8. 각 스타일을 언제 쓰는지 적어 둔다.

1. AI나 플러그인으로 빠르게 만들어도 이 여덟 가지는 그대로 지킨다.

1. 도구는 손을 덜어 줄 뿐, 무엇을 왜 정하는지는 사람이 정한다.

2 정보의 위계를 나타내는 방법

정보 위계는 화면을 열었을 때 눈이 어디로 먼저 가게 할지 정하는 일이다. 신문 1면이 큰 제목을 먼저 읽히듯, UI도 중요한 것을 먼저 보이게 만든다. 위계를 만드는 방법은 여섯 가지다.

1. 크기로 구분한다. 큰 글자에 눈이 먼저 간다.
2. 굵기로 강조한다. 같은 크기여도 Bold가 먼저 읽힌다.
3. 색과 밝기로 앞뒤를 만든다. 진한 색이 앞으로, 흐린 색이 뒤로 물러난다.
4. 간격으로 묶고 가른다. 가까운 것은 한 묶음, 먼 것은 다른 묶음으로 읽힌다(근접성).
5. 위치로 순서를 만든다. 위에서 아래로, 왼쪽에서 오른쪽으로 읽는다.
6. 여백으로 돋보이게 한다. 둘레를 비우면 그 요소가 강조된다.

1. 한 화면에서 강조는 한두 개만 한다. 다 강조하면 아무것도 강조되지 않는다.

1. 이 여섯 가지를 한꺼번에 다 쓰지 않아도 된다. 크기와 굵기 두 가지만으로도 위계가 선다.

2.1. 폰트(타이포) 위계 정하기

타입 스케일(type scale)로 정한다. 본문 크기 하나를 기준으로 잡고, 일정한 비율을 곱해 위로 키운다.

1. 기준 크기를 정한다. 본문(body)을 먼저 정한다. 웹·앱 UI는 16이 표준이다. 모든 단계가 이 값에서 출발한다.
2. 비율(ratio)을 정한다. 단계 사이 간격을 비율로 정한다. 자주 쓰는 값은 1.2(Minor Third), 1.25(Major Third), 1.333이다. 비율이 클수록 제목과 본문의 대비가 커진다. 화면이 빽빽한 UI는 1.2~1.25가 무난하다.
3. 단계를 펼친다. 기준에서 비율을 곱해 위로 키우고, 나눠서 아래로 줄인다. 16 기준에 1.25를 쓰면 이렇게 나온다.
   1. Caption 16 ÷ 1.25 ≈ 13
   2. Body 16
   3. H3 16 × 1.25 = 20
   4. H2 20 × 1.25 = 25
   5. H1 25 × 1.25 ≈ 31
4. 역할로 이름 붙인다. 큰 단계부터 H1·H2·H3·Body·Caption에 배정한다. 토큰 이름은 text/heading-1, text/body처럼 역할로 짓는다. 크기 숫자를 이름에 넣지 않는다.
5. 굵기와 줄간격도 위계 변수로 쓴다. 크기만으로 부족하면 굵기를 더한다. 제목은 Bold(700), 본문은 Regular(400). 줄간격은 본문 1.5, 제목은 1.2~1.3으로 둔다. 큰 글자일수록 줄간격을 좁게 잡아야 답답해 보이지 않는다.
6. 단계는 적게 둔다. 3~5단계면 대부분의 화면을 채운다. 단계가 많아지면 어느 글씨가 더 중요한지 흐려진다.

위계를 만드는 변수는 크기·굵기·색(명도)·자간이다. 이 가운데 크기와 굵기가 1차 수단이고, 색은 보조다.

2.2. 색상 위계 정하기

색은 두 축으로 나눠 정한다 — 역할(무엇에 쓰나)과 명도 단계(얼마나 진하나).

1. 역할로 나눈다. 색을 의미별로 묶는다.
   1. Primary(주조색): 핵심 행동. 주요 버튼·링크.
   2. Neutral(중립·회색 계열): 글자·배경·경계선. 화면에서 가장 많이 쓴다.
   3. Semantic(상태색): success·warning·error·info.
2. 명도 단계를 만든다. 한 색에서 밝은 쪽부터 진한 쪽까지 50·100 … 900 단계로 펼친다. 연한 단계는 배경, 진한 단계는 글자, 중간 단계는 호버 같은 상태에 쓴다.
3. 위계는 대비와 채도로 만든다. 가장 중요한 요소(주요 버튼)에 가장 진하고 선명한 색을 준다. 덜 중요한 요소는 연하고 흐린 색으로 물러나게 한다.
4. 글자색은 명도 3단계로 나눈다. 같은 검정 계열 안에서 진하기로 위계를 만든다.
   1. 본문(가장 진함): 순검정 대신 진회색 #111827. 순검정은 대비가 너무 강해 눈이 피로하다.
   2. 보조 글자(중간): #6B7280.
   3. 비활성·플레이스홀더(연함): #9CA3AF.
5. 접근성 하한을 지킨다. 명도로 위계를 만들되 가독성 최저선을 넘지 않는다. 본문 글자는 배경과 대비 4.5:1 이상, 큰 글자(약 24px 또는 18.66px Bold 이상)와 UI 요소는 3:1 이상이다(WCAG AA).
6. 색만으로 위계를 만들지 않는다. 색약인 사람도 구분하도록 크기·위치·아이콘을 함께 쓴다. 예를 들어 오류는 빨간색만이 아니라 아이콘·문구도 같이 둔다.

3 작업 환경과 플러그인 준비

색·글씨를 손으로 하나씩 정하는 대신, 플러그인에게 시킨다. 플러그인은 Figma에 끼워 쓰는 작은 도구다. 먼저 작업판을 열고, 플러그인을 어떻게 불러 쓰는지 익힌다.

3.1 파일과 프레임 준비

1. 브라우저 주소창을 클릭하고 figma.com을 입력한 뒤 Enter를 누른다.
2. 로그인 화면이 나오면 본인 계정으로 로그인한다.
3. 파일 브라우저가 열리면 새 디자인 파일을 만든다. [+ Design file] 버튼(없으면 우측 상단 [+])을 클릭한다.
4. 좌측 상단 파일 이름(기본값 [Untitled])을 더블클릭한다 → ui_styleguide를 입력하고 Enter를 누른다.
5. 키보드 F를 누른다 → 우측 프리셋에서 [Desktop]을 클릭한다. 1440×1024 프레임이 생긴다.
6. 좌측 [Layers]에서 프레임 이름을 더블클릭한다 → Style Guide를 입력하고 Enter를 누른다.

3.2 플러그인 설치하고 실행하는 법

1. 화면 아래 가운데 툴바에서 [Actions] 버튼(동그란 아이콘)을 클릭한다. 예전 [Resources] 버튼이 이 자리로 옮겨 온 것이다.
2. 열린 창 위쪽 탭에서 [Plugins & widgets]를 클릭한다.
3. 검색칸을 클릭하고 쓰려는 플러그인 이름을 입력한다.
4. 결과 목록에서 플러그인을 찾는다 → 이름 위에 마우스를 올리면 나오는 [Run] 버튼을 클릭해 바로 실행한다.
5. 자주 쓸 플러그인은 이름 옆 Save를 눌러 저장한다. 저장하면 다음부터 캔버스 우클릭 → [Plugins]에서 바로 꺼낸다.

1. 빠른 실행은 Ctrl+/(macOS Cmd+/)를 누른 뒤 플러그인 이름을 입력하는 것이다. 목록을 뒤지지 않고 한 번에 실행한다.

1. 우클릭 → [Plugins]에서도 저장한 플러그인을 실행한다.

1. 같은 이름·비슷한 이름의 플러그인이 여러 개 보인다. 제작자 이름과 설치 수(별·다운로드)가 많은 것을 고른다.

1. 무료 Figma 계정으로도 플러그인은 쓸 수 있다. 단 만든 스타일을 다른 파일에서 쓰는 팀 라이브러리 게시는 유료 플랜이 필요할 수 있다. 이 실습은 한 파일 안에서 끝내므로 무료로 충분하다.

4 AI로 컬러 팔레트 만들고 색 스타일로 등록하기

주조색 하나만 정하면, 생성 플러그인이 밝고 어두운 단계까지 자동으로 만들어 준다. 사람이 색을 일일이 고르는 대신 기준 색만 주고 나머지를 맡긴다.

4.1 생성 플러그인으로 색 만들기

이번 실습은 Foundation: Color Generator 플러그인을 쓴다. 기준 색에서 톤 단계를 만들고 대비까지 확인해 준다.

https://www.figma.com/community/plugin/1024452006068794933/foundation-color-generator

1. 3.2 방법으로 [Plugins & widgets]에서 Foundation을 검색한다 → Foundation: Color Generator를 [Run]한다.
2. 플러그인 창이 열리면 기준 색 입력칸에 주조색 #3B82F6을 넣는다.
3. 단계(shade) 생성 버튼을 누른다. 50, 100, 200 … 900처럼 밝기 단계별 색이 한 줄로 만들어진다.
4. 화면에 색을 꺼낸다. 플러그인의 [Render]나 [Add to canvas] 류 버튼을 눌러 색 견본을 프레임 위에 뿌린다.

1. 키워드로 분위기 팔레트를 만들고 싶으면 Coolors 플러그인을 쓴다. "calm, natural" 같은 낱말을 넣으면 어울리는 색 묶음을 제안한다.

1. 어떤 플러그인이든 기준 색은 1번 원칙대로 적게 정한다. 주조색 한 가지에서 시작해 단계를 펼치는 편이 관리하기 쉽다.

1. 플러그인 안 버튼 이름은 버전마다 다르다. 위 버튼이 안 보이면 플러그인 창에 적힌 안내(Generate·Create·Render 등)를 그대로 따른다.

1. 색 대비 표시가 있으면 본문에 쓸 글자색이 배경과 4.5:1 이상인지 그 자리에서 확인한다.

4.2 색 스타일로 한 번에 등록하기

만든 색 견본을 색 스타일로 바꾼다. 하나씩 등록하는 대신 Styler 플러그인으로 한 번에 묶는다.

1. 화면에 뿌려진 색 견본을 마우스로 드래그해 모두 선택한다.
2. 3.2 방법으로 Styler를 검색해 [Run]한다.
3. 플러그인 창에서 색 스타일 만들기(Generate color styles 류) 버튼을 누른다. 선택한 색이 한꺼번에 색 스타일로 등록된다.
4. 캔버스 빈 곳을 클릭해 아무것도 선택하지 않은 상태로 만든다 → 우측 [Local styles] 섹션에서 등록된 색 목록을 확인한다.

1. 한 번에 여러 색이 스타일로 등록되면, 이제 어느 요소든 그 목록에서 같은 색을 꺼내 쓴다.

1. 이름이 color/500처럼 단계 숫자로 붙는다. 주조색 단계를 color/primary로 바꾸려면 우측 목록에서 이름을 더블클릭해 고친다.

4.3 직접 등록하는 방법 (플러그인이 막힐 때)

플러그인이 안 되면 손으로도 등록한다. 원리는 같다.

1. 색 견본 하나를 클릭한다 → 우측 [Fill] 섹션 오른쪽 스타일 아이콘(점 네 개)을 클릭한다.
2. 열린 창 오른쪽 위 [+]를 클릭한다 → 이름칸에 color/primary를 입력한다 → [Create style]을 누른다.

1. 플러그인은 이 손동작을 여러 색에 한꺼번에 해 주는 도구다. 원리는 직접 등록과 똑같다.

1. 그래서 플러그인이 막혀도 이 방법으로 실습을 끝낼 수 있다.

5 타이포그래피 스타일 등록하기

글씨도 색과 같다. 제목·본문·설명 세 단계를 정해 텍스트 스타일로 등록한다.

5.1 글씨 위계 만들기

이번에 등록할 글씨는 세 가지다. 글꼴은 Figma 기본 Inter를 쓴다.

https://www.figma.com/community/plugin/739825414752646970/typescales

1. Heading(제목) Inter / Bold / 32

2. Body(본문) Inter / Regular / 16

3. Caption(설명) Inter / Regular / 12

4. 키보드 T를 누른다 → 색 견본 아래 빈 곳을 클릭한다 → Heading 32를 입력하고 Esc를 누른다.

5. 우측 [Typography]에서 글꼴 [Inter], 스타일 [Bold], 크기 32로 맞춘다.

6. 같은 방법으로 Body 16([Regular]·16), Caption 12([Regular]·12)를 만든다.

1. 세 글씨의 크기 차이가 화면의 위계를 만든다. 2번에서 본 "크기로 구분한다"를 글씨로 옮긴 것이다.

1. 세 단계만 정해 두면 대부분의 화면을 채운다.

5.2 텍스트 스타일로 등록하기

1. 세 글자를 모두 드래그해 선택한다 → Styler를 [Run]한다 → 텍스트 스타일 만들기 버튼을 누른다. 세 글씨가 한꺼번에 텍스트 스타일로 등록된다.
2. 플러그인이 막히면 손으로 등록한다. Heading 32를 클릭한다 → 우측 [Typography]의 스타일 아이콘을 클릭한다 → [+] → 이름 text/heading → [Create style]. 나머지도 text/body, text/caption으로 같이 등록한다.

1. 텍스트 스타일에는 글꼴·굵기·크기·줄간격이 한 묶음으로 저장된다. 색은 따로 색 스타일로 입힌다.

1. 등록한 뒤 글자를 선택하고 [Typography]의 스타일 아이콘을 누르면 목록에서 text/body를 골라 같은 글씨를 바로 입힌다.

6 라이브러리(UI 키트) 가져와 쓰기

색·글씨·컴포넌트가 이미 갖춰진 무료 UI 키트를 가져오면, 버튼·입력칸 같은 요소를 처음부터 만들지 않고 꺼내 쓴다. 잘 만든 키트는 색 스타일과 텍스트 스타일까지 함께 들어 있어 좋은 본보기가 된다.

6.1 Community에서 UI 키트 가져오기

1. 새 브라우저 탭에서 figma.com/community로 이동한다.
2. 위쪽 검색칸에 Untitled UI를 입력하고 Enter를 누른다. 무료 UI 키트 묶음이 나온다.
3. 키트 페이지를 연다 → [Open in Figma] 또는 [Get a copy]/[Duplicate] 버튼을 클릭한다. 내 드래프트에 키트 사본이 새 파일로 생긴다.
4. 사본 파일에서 캔버스 빈 곳을 클릭한다 → 우측 [Local styles]에서 키트가 정해 둔 색·텍스트 스타일을 살펴본다.

1. Untitled UI 외에 Material 3 Design Kit(구글), iOS 디자인 키트(애플)도 무료로 가져온다. 만들 화면 성격에 맞는 키트를 고른다.

1. Community 파일은 원본을 고치지 못하고, 내 계정으로 사본을 떠 와서 쓴다. 그래서 원본이 망가질 걱정이 없다.

6.2 라이브러리 컴포넌트 꺼내 쓰기

1. 키트 사본 파일에서 쓰고 싶은 버튼·카드를 클릭한다 → Ctrl+C(macOS Cmd+C)로 복사한다.
2. ui_styleguide 파일 탭으로 돌아온다 → 프레임 위에서 Ctrl+V(macOS Cmd+V)로 붙인다.
3. 붙인 요소를 내 스타일에 맞춘다. 색은 우측 [Fill] 스타일 아이콘에서 color/primary로, 글씨는 [Typography]에서 text/body로 바꾼다.

1. 무료 계정은 한 파일의 스타일을 다른 파일로 자동 연결하는 팀 라이브러리 게시가 막힐 수 있다. 그래서 여기서는 복사해 붙이는 방법으로 가져온다.

1. 팀 라이브러리로 여러 파일에 한꺼번에 연결하려면 유료 플랜(Professional 이상)이 필요하다.

7 기본 컴포넌트 만들기 (버튼)

마지막으로 등록한 색·글씨를 모아 버튼을 만들고 컴포넌트로 등록한다. 한 번 만든 버튼을 도장 찍듯 복사해 쓰고, 원본만 고치면 복사본이 같이 바뀐다.

7.1 버튼 모양 만들기

1. 키보드 T를 누른다 → 빈 곳을 클릭한다 → Button을 입력하고 Esc를 누른다.
2. 그 글자에 우측 [Typography] 스타일 아이콘으로 text/body를 입힌다.
3. 글자색을 흰색으로 바꾼다. [Fill] 색 스와치를 클릭한다 → [Hex] 칸에 FFFFFF를 입력하고 Enter → 창 밖을 클릭한다.
4. 글자가 선택된 상태에서 Shift+A를 누른다. 글자 둘레에 오토 레이아웃(Auto layout) 상자가 생긴다.
5. 우측에서 안쪽 여백을 정한다. 좌우 24, 위아래 12를 입력한다.
6. 좌측 [Layers]에서 바깥 상자 [Button]을 클릭한다 → [Fill] 스타일 아이콘으로 color/primary를 입힌다.
7. 모서리 둥글기(Corner radius) 칸에 8을 입력하고 Enter를 누른다.

1. 오토 레이아웃은 글자 길이에 맞춰 버튼 크기가 저절로 늘고 주는 기능이다.

1. 여백 24/12와 둥글기 8은 4나 8의 배수다. 5번 원칙대로 한 배수로 맞춘 값이다.

7.2 컴포넌트로 등록하기

1. 좌측 [Layers]에서 바깥 상자 [Button]을 클릭해 선택한다.
2. 컴포넌트화 단축키를 누른다. Windows는 Ctrl+Alt+K, macOS는 Cmd+Option+K다.
3. 테두리가 보라색으로 바뀌고 이름 앞에 마름모(◇) 아이콘이 붙는다. 컴포넌트로 등록된 표시다.
4. 버튼을 Ctrl+C → Ctrl+V로 복사한다 → 복사본을 옆으로 끌어 둔다.
5. 원본(마름모 아이콘이 있는 것)의 둥글기를 16으로 바꾼다. 복사본 둥글기도 같이 16으로 바뀐다.

1. 단축키를 눌러도 컴포넌트가 안 되면 안쪽 글자만 선택했을 수 있다. 좌측 [Layers]에서 바깥 [Button] 프레임을 다시 클릭한 뒤 단축키를 누른다.

1. 복사본을 고쳐도 원본은 그대로다. 전체를 한꺼번에 바꾸려면 마름모 아이콘이 붙은 원본을 고친다.

마지막으로 Ctrl+S(macOS Cmd+S)를 눌러 저장한다. Figma는 저절로 저장되지만, 저장하면 바뀐 지점이 기록으로 남는다.