색상 적용 비율 60·30·10

작성자:

1 60·30·10 비율이란

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

비율 이름 칠하는 곳
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. 색 선택 창 밖의 빈 곳을 클릭해 창을 닫는다.

[!NOTE]

  1. #F9FAFB는 거의 흰색에 가까운 연한 중립색이다. 넓게 칠해도 눈에 부담을 주지 않아 바탕에 알맞다.
  2. 이 한 면이 화면의 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를 누른다.

[!NOTE]

  1. 흰 카드는 연한 바탕 위에서 한 단계 떠 보인다. 같은 중립색이라도 밝기 차이로 영역이 나뉜다.
  2. 카드는 바탕보다 좁지만 글자를 담아 면적을 차지한다. 바탕(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를 누른다.

[!TIP]

  1. 제목은 진한 #111827, 본문은 한 단계 연한 #6B7280을 쓴다. 같은 회색 계열 안에서 밝기로 위계를 만든다.
  2. 이 글자색도 모두 보조(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를 누른다.

[!NOTE]

  1. 파랑 버튼 하나가 화면에서 유일하게 선명한 색이다. 면적은 가장 작지만 눈이 먼저 간다.
  2. 바탕(연회색)·카드(흰색)·글자(회색) 사이에서 파랑 하나만 틀어, 사용자가 무엇을 눌러야 할지 바로 안다. 이것이 10%의 힘이다.

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

6.1 주조색을 과하게 쓰면

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

[!WARNING]

  1. 배경까지 주조색으로 칠하면 버튼이 배경에 묻혀 어디를 눌러야 할지 사라진다. 강조가 강조 노릇을 못 한다.
  2. 강조색은 넓게 칠할수록 약해진다. 좁게 쓸수록 강해진다. 60·30·10에서 10을 넘기지 않는 까닭이다.

[!TIP]

  1. 비율이 맞는지 보려면 눈을 가늘게 뜨고 화면을 본다. 파랑이 점처럼 한 곳에만 보이면 비율이 맞다.
  2. 파랑이 여러 곳에 번져 보이면 강조를 줄인다. 버튼 외에 파랑을 쓴 곳을 중립색으로 되돌린다.

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

댓글 남기기