7. 색상 적용 비율 60·30·10

1 60·30·10 비율이란

색을 고르는 일만큼 어디에 얼마나 칠하느냐가 중요하다. 방을 꾸문 때 벽은 넓게 한 가지 톤으로, 가구는 그보다 적게, 쿼션·액자 같은 소품은 포인트로 조금만 쓰는 것과 같다. 화면도 색의 면적을 이 비율로 나눈다.

핵심은 주조색을 적게 쓰는 것이다. 주조색을 넓게 칠하면 어디가 중요한지 사라진다. 이번 실습은 카드 화면 한 개를 만들어 이 비율을 눈으로 확인한다.

2 작업 환경 준비

2.1 파일과 프레임 준비

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

3 60% 바탕색 깔기

가장 넓은 면인 배경부터 칠한다. 화면 전체의 60%를 차지하는 바탕이다.

3.1 배경 프레임에 바탕색 적용

1. 좌측 [Layers]에서 프레임 60-30-10을 클릭해 선택한다.
2. 우측 사이드바 [Fill] 섹션의 색 스와치를 클릭한다. 색 선택 창이 뜰다.
3. [Hex] 칸을 클릭한다 → F9FAFB를 입력하고 Enter를 누른다. 프레임 전체가 아주 연한 회색으로 칠해진다.
4. 색 선택 창 밖의 빈 곳을 클릭해 창을 닫는다.

1. #F9FAFB는 거의 흰색에 가까운 연한 중립색이다. 넓게 칠해도 눈에 부담을 주지 않아 바탕에 알맞다.

1. 이 한 면이 화면의 60%다. 바탕은 색을 주장하지 않고 다른 요소를 받쳐 준다.

4 30% 보조 영역 만들기

바탕 위에 카드를 올린다. 카드와 그 안 글자가 화면의 30%를 차지하는 보조 영역이다.

4.1 카드 만들고 보조색 적용

1. 키보드 R을 누른다 → 프레임 가운데에서 마우스를 끌어 가로 480, 세로 320쯤 되는 사각형을 그린다 → 손을 둔다.
2. 사각형이 선택된 상태에서 우측 [Fill] 색 스와치를 클릭한다 → [Hex] 칸에 FFFFFF를 입력하고 Enter를 누른다. 카드가 흰색이 된다.
3. 카드에 경계선을 넣는다. 우측 [Stroke] 섹션의 [+]를 클릭한다 → 색 스와치를 클릭해 [Hex]에 E5E7EB를 입력하고 Enter를 누른다.
4. 모서리를 둥글게 만든다. 우측 모서리 둥글기(Corner radius) 칸에 12를 입력하고 Enter를 누른다.

1. 흰 카드는 연한 바탕 위에서 한 단계 떠 보인다. 같은 중립색이라도 밝기 차이로 영역이 나뉘다.

1. 카드는 바탕보다 좁지만 글자를 담아 면적을 차지한다. 바탕(60)과 강조(10) 사이를 메우는 30이다.

4.2 카드 안 글자 넣기

1. 키보드 T를 누른다 → 카드 안 위쪽을 클릭한다 → 프로 플랜 안내를 입력하고 Esc를 누른다.
2. 우측 [Typography]에서 글꼴 [Inter], 스타일 [Bold], 크기 24로 맞춘다.
3. 글자색을 정한다. 우측 [Fill] 색 스와치를 클릭한다 → [Hex]에 111827을 입력하고 Enter를 누른다.
4. 키보드 T를 누른다 → 제목 아래를 클릭한다 → 매달 더 많은 기능을 쓸 수 있다를 입력하고 Esc를 누른다.
5. 우측 [Typography]에서 [Regular], 크기 16으로 맞춘다 → [Fill] [Hex]에 6B7280을 입력하고 Enter를 누른다.

1. 제목은 진한 #111827, 본문은 한 단계 연한 #6B7280을 쓴다. 같은 회색 계열 안에서 밝기로 위계를 만든다.

1. 이 글자색도 모두 보조(30)에 든다. 강조색은 아직 쓰지 않는다.

5 10% 강조색 넣기

마지막으로 주조색을 단 한 곳, 주요 버튼에만 쓴다. 화면의 10%를 넘지 않는 강조다.

5.1 주요 버튼에 주조색 적용

1. 키보드 T를 누른다 → 카드 안 아래쪽을 클릭한다 → 시작하기를 입력하고 Esc를 누른다.
2. 우측 [Typography]에서 [Inter], [Regular], 크기 16으로 맞춘다.
3. 글자색을 흰색으로 바꾼다. [Fill] [Hex]에 FFFFFF를 입력하고 Enter를 누른다 → 창 밖을 클릭한다.
4. 글자가 선택된 상태에서 Shift+A를 누른다. 글자 둘레에 오토 레이아웃(Auto layout) 상자가 생긴다.
5. 우측에서 안쪽 여백을 정한다. 좌우 24, 위아래 12를 입력한다.
6. 좌측 [Layers]에서 바깥 상자를 클릭한다 → [Fill] 색 스와치를 클릭해 [Hex]에 3B82F6을 입력하고 Enter를 누른다.
7. 모서리 둥글기(Corner radius) 칸에 8을 입력하고 Enter를 누른다.

1. 파랑 버튼 하나가 화면에서 유일하게 선명한 색이다. 면적은 가장 작지만 눈이 먼저 간다.

1. 바탕(연회색)·카드(흰색)·글자(회색) 사이에서 파랑 하나만 틀어, 사용자가 무엇을 눌러야 할지 바로 안다. 이것이 10%의 힘이다.

6 비율 확인과 잘못된 예 비교

6.1 주조색을 과하게 쓰면

1. 만든 카드 화면 전체(프레임 60-30-10)를 클릭한다 → Ctrl+C(macOS Cmd+C) → Ctrl+V(macOS Cmd+V)로 복사한다 → 복사본을 오른쪽으로 끌어 둔다.
2. 복사본의 프레임을 클릭한다 → [Fill] [Hex]에 3B82F6을 입력하고 Enter를 누른다. 배경 전체가 파랑이 된다.
3. 두 화면을 나란히 놓고 비교한다.

1. 배경까지 주조색으로 칠하면 버튼이 배경에 묻혀 어디를 눌러야 할지 사라진다. 강조가 강조 노릇을 못 한다.

1. 강조색은 넓게 칠할수록 약해진다. 좁게 쓸수록 강해진다. 60·30·10에서 10을 넘기지 않는 까닭이다.

1. 비율이 맞는지 보려면 눈을 가늘게 뜨고 화면을 본다. 파랑이 점처럼 한 곳에만 보이면 비율이 맞다.

1. 파랑이 여러 곳에 번져 보이면 강조를 줄인다. 버튼 외에 파랑을 쓴 곳을 중립색으로 되돌린다.

마지막으로 Ctrl+S(macOS Cmd+S)를 눌러 저장한다.