텍스트와 컬러를 실무 기준으로 다루기

지난 장에서 우리는 프레임과 레이어로 화면의 뼈대를 세웠습니다. 이제 그 뼈대에 옷을 입힐 차례입니다. 화면이 "그럴듯해 보이는가"를 가장 빠르게 결정하는 요소는 대개 두 가지입니다. 바로 글자와 색입니다.

초보자가 피그마에서 가장 자주 하는 실수는 텍스트와 컬러를 그때그때 손으로 바꾸는 것입니다. 제목 하나 만들고, 본문 하나 만들고, 버튼 글자 하나 만들 때마다 폰트 크기와 색을 직접 지정합니다. 처음에는 별문제 없어 보입니다. 하지만 화면이 3개, 5개, 20개로 늘어나면 금세 혼란이 찾아옵니다.

어떤 제목은 24px이고, 어떤 제목은 25px입니다. 어떤 회색은 #666666이고, 다른 회색은 #6B6B6B입니다. 버튼 색도 비슷하지만 미묘하게 다릅니다. 이 상태에서 "전체 제목 크기를 조금 줄여 주세요"라는 피드백을 받으면, 하나하나 찾아다니며 수정해야 합니다.

실무에서는 이런 방식으로 일하지 않습니다. 반복되는 글자와 색은 스타일로 관리합니다. 스타일을 만들면 같은 역할의 텍스트와 컬러를 재사용할 수 있고, 나중에 기준이 바뀌어도 한 번에 수정할 수 있습니다. 이번 장에서는 텍스트 스타일과 컬러 스타일을 만들어, 화면을 더 단단하고 일관성 있게 만드는 방법을 익히겠습니다.

글자는 예쁘게보다 먼저 읽히게 만든다

UI에서 텍스트는 장식이 아닙니다. 사용자가 지금 무엇을 해야 하는지 알려 주는 안내판입니다. 로그인 화면의 "로그인", "이메일", "비밀번호", "비밀번호를 잊으셨나요?" 같은 문장은 모두 각자의 역할을 가지고 있습니다.

역할이 다르면 글자도 달라져야 합니다. 화면의 핵심 제목은 더 크고 굵어야 하고, 설명 문장은 제목보다 작고 편안해야 합니다. 버튼 텍스트는 작더라도 또렷하게 보여야 합니다. 보조 안내나 날짜, 상태 같은 캡션은 본문보다 한 단계 낮은 강조로 표현할 수 있습니다.

초보자에게 가장 좋은 출발점은 "폰트 종류를 많이 쓰는 것"이 아니라 역할별로 몇 가지 규칙을 정하는 것입니다. 예를 들어 모바일 앱 화면이라면 다음과 같은 체계를 만들 수 있습니다.

이 표는 정답이 아닙니다. 하지만 중요한 원칙은 담고 있습니다. UI의 글자 크기는 무작위로 정하지 않고, 역할에 따라 계층을 만든다는 점입니다.

글자 크기만큼 중요한 것이 줄 높이입니다. 줄 높이는 한 줄의 텍스트가 차지하는 세로 공간입니다. 본문이 16px이라면 줄 높이는 보통 22px에서 26px 사이로 잡으면 읽기 편합니다. 글자 크기와 줄 높이가 너무 가까우면 문장이 답답해 보이고, 너무 벌어지면 하나의 문단처럼 느껴지지 않습니다.

자간, 즉 글자 사이 간격은 처음에는 크게 건드리지 않아도 됩니다. 다만 버튼처럼 짧고 굵은 텍스트는 자간을 아주 조금 조정하면 단정해 보일 수 있습니다. 하지만 과한 자간은 오히려 가독성을 해칩니다. 초보 단계에서는 기본값을 유지하고, 꼭 필요한 경우에만 조정하는 편이 안전합니다.

팁 박스: 타이포그래피를 정할 때의 쉬운 기준

• 제목은 "먼저 보여야 하는 문장"입니다. 크기와 굵기로 우선순위를 만드세요.

• 본문은 "오래 읽어도 피곤하지 않은 문장"입니다. 줄 높이를 넉넉하게 주세요.

• 버튼 텍스트는 "행동을 유도하는 문장"입니다. 짧고 또렷하게, 굵기는 Regular보다 한 단계 높게 잡는 것이 좋습니다.

피그마에서 텍스트를 다루는 기본 흐름

피그마에서 텍스트를 만들려면 상단 툴바에서 Text 도구를 선택하거나 T 키를 누르면 됩니다. 캔버스를 한 번 클릭하면 한 줄 텍스트가 만들어지고, 드래그해서 영역을 만들면 여러 줄을 담을 수 있는 텍스트 박스가 만들어집니다.

처음에는 이 차이가 별것 아닌 것처럼 보이지만, 실무에서는 중요합니다. 제목이나 버튼 텍스트처럼 짧은 문장은 클릭해서 만드는 방식이 편합니다. 반면 설명 문장이나 긴 안내문처럼 줄바꿈이 필요한 텍스트는 드래그해서 텍스트 박스를 만드는 편이 좋습니다.

텍스트 레이어를 선택하면 오른쪽 사이드바의 Design 패널에서 Text 속성을 확인할 수 있습니다. 여기에서 폰트, 굵기, 크기, 줄 높이, 자간, 정렬 등을 조정합니다. 피그마에서 텍스트를 수정할 때는 크게 두 가지 모드를 구분하면 편합니다.

레이어 자체를 선택한 상태에서는 텍스트 박스의 위치나 크기를 움직일 수 있습니다. 텍스트를 더블 클릭하거나 Enter 키를 누르면 글자 내용을 직접 수정할 수 있습니다. 즉, "상자를 옮기는 것"과 "상자 안의 글을 고치는 것"은 다른 행동입니다.

텍스트 박스의 너비도 주의해야 합니다. 본문 텍스트가 너무 넓으면 한 줄이 길어져 읽기 어렵고, 너무 좁으면 줄바꿈이 자주 생겨 답답해 보입니다. 모바일 화면에서는 좌우 여백을 고려해 본문 너비를 잡고, 웹 화면에서는 텍스트가 화면 전체를 가로지르지 않도록 제한하는 것이 좋습니다.

단축키 박스: 텍스트 작업에서 자주 쓰는 키

작업	Windows	macOS
텍스트 도구 선택	T	T
선택 도구로 돌아가기	V 또는 Esc	V 또는 Esc
텍스트 편집 시작	Enter	Enter
텍스트 편집 종료	Esc	Esc
복제	Ctrl + D	Command + D
그룹 만들기	Ctrl + G	Command + G
전체 검색	Ctrl + / 또는 Quick Actions	Command + / 또는 Quick Actions

역할별 텍스트 스타일 만들기

이제 실무다운 방식으로 넘어가 보겠습니다. 텍스트 스타일은 특정 텍스트 속성 조합을 저장해 두고 여러 곳에서 다시 사용하는 기능입니다. 예를 들어 Title/Medium이라는 텍스트 스타일을 만들어 두면, 로그인 화면 제목에도 적용하고, 회원가입 화면 제목에도 적용할 수 있습니다.

텍스트 스타일을 만드는 흐름은 간단합니다. 먼저 기준이 될 텍스트 레이어를 하나 만듭니다. 예를 들어 "로그인"이라는 제목을 선택하고, 오른쪽 Design 패널에서 폰트 크기를 24px, 굵기를 Bold, 줄 높이를 32px로 설정합니다. 그런 다음 Text 영역 옆의 스타일 아이콘을 눌러 새 스타일을 만듭니다. 이름은 Title/Medium처럼 역할이 드러나게 붙입니다.

여기서 이름이 매우 중요합니다. 큰 글자, 제목1, 파란 제목처럼 감각적인 이름은 금방 한계가 옵니다. 실무에서는 스타일 이름만 봐도 어디에 쓰는지 알 수 있어야 합니다. 그래서 Title/Medium, Body/Medium, Button/Medium처럼 역할과 크기 단계를 함께 쓰는 방식이 좋습니다.

텍스트 스타일을 만들 때는 실제 화면에 있는 모든 텍스트를 무작정 스타일로 만들 필요는 없습니다. 반복되는 것부터 스타일로 만드세요. 한 번만 쓰이는 특별한 문구까지 스타일로 만들면 오히려 관리가 어려워집니다. 초보자는 다음 정도로 시작하면 충분합니다.

• Title/Medium: 화면의 대표 제목

• Heading/Small: 카드나 섹션 제목

• Body/Medium: 일반 본문

• Body/Small: 보조 설명

• Caption: 작은 안내 문구

• Button/Medium: 주요 버튼 텍스트

스타일을 적용하려면 텍스트 레이어를 선택한 뒤, Text 영역에서 스타일 목록을 열고 원하는 스타일을 선택하면 됩니다. 적용된 텍스트는 해당 스타일과 연결됩니다. 이때 개별 텍스트에서 폰트 크기나 굵기를 다시 바꾸면 스타일과 다른 값이 섞일 수 있습니다. 실무에서는 이를 "스타일에서 벗어난 상태"라고 생각하면 됩니다.

물론 예외가 필요할 때도 있습니다. 하지만 예외가 많아지면 시스템이 무너집니다. "이번 화면만 조금 다르게"가 쌓이면 결국 모든 화면이 조금씩 달라집니다. 디자인의 힘은 화려함보다 일관성에서 나옵니다.

팁 박스: 텍스트 스타일 이름 짓기

좋지 않은 이름	더 좋은 이름	이유
제목1	Title/Medium	역할과 단계가 보입니다.
작은글씨	Body/Small	어디에 쓰는 글자인지 알 수 있습니다.
버튼글자	Button/Medium	버튼용 스타일임이 분명합니다.
회색설명	Body/Small	색은 컬러 스타일로 분리하는 편이 좋습니다.

여기서 마지막 예시가 중요합니다. 텍스트 스타일에는 글자 크기, 굵기, 줄 높이 같은 타이포그래피 속성을 중심으로 담고, 색상은 컬러 스타일로 따로 관리하는 것이 좋습니다. 그래야 같은 Body/Medium이라도 어떤 곳에서는 기본 검정 텍스트로, 어떤 곳에서는 보조 회색 텍스트로 사용할 수 있습니다.

색은 예쁜 색보다 역할이 먼저다

색을 고를 때 많은 사람이 "어떤 색이 예쁠까?"부터 고민합니다. 물론 예쁜 색도 중요합니다. 하지만 UI에서 색은 먼저 역할을 가져야 합니다. 사용자가 누를 수 있는 버튼인지, 경고인지, 비활성 상태인지, 단순한 배경인지 색으로 구분할 수 있어야 합니다.

예를 들어 파란색은 브랜드의 주요 색이 될 수 있습니다. 같은 파란색이라도 버튼 배경에는 진한 파란색을 쓰고, 선택된 탭에는 조금 연한 파란색을 쓸 수 있습니다. 회색도 마찬가지입니다. 진한 회색은 본문 텍스트에 쓰고, 중간 회색은 보조 텍스트에 쓰고, 아주 연한 회색은 배경이나 구분선에 쓸 수 있습니다.

색을 역할별로 나누면 화면이 훨씬 안정됩니다. 다음과 같은 구조를 생각해 볼 수 있습니다.

색 이름 역시 감각보다 역할을 기준으로 붙이는 것이 좋습니다. 예쁜파랑, 좀연한회색, 버튼색보다 Brand/Primary, Text/Secondary, Border/Default가 훨씬 오래갑니다.

이 방식의 장점은 나중에 브랜드 컬러가 바뀌어도 구조가 유지된다는 점입니다. 예를 들어 회사의 주요 색이 파란색에서 보라색으로 바뀌어도 Brand/Primary라는 역할은 그대로입니다. 색상 값만 바꾸면 됩니다. 이름을 Blue/500처럼 색 자체로 붙이는 방식도 가능하지만, 초보자나 작은 프로젝트에서는 역할 기반 이름이 더 이해하기 쉽습니다.

Fill, Stroke, Effects의 차이 이해하기

피그마의 오른쪽 Design 패널에서 도형이나 프레임을 선택하면 Fill, Stroke, Effects 같은 속성을 볼 수 있습니다. 처음 보면 모두 "꾸미는 것"처럼 느껴지지만 역할은 분명히 다릅니다.

Fill은 안쪽을 채우는 색입니다. 사각형 버튼의 파란 배경, 카드의 흰색 배경, 화면 전체의 배경색이 모두 Fill입니다. 텍스트 레이어를 선택했을 때 보이는 색상도 넓은 의미에서는 글자에 적용된 Fill이라고 볼 수 있습니다.

Stroke는 테두리입니다. 입력창의 경계선, 카드의 외곽선, 구분선 같은 요소에 사용합니다. Stroke는 위치를 안쪽, 가운데, 바깥쪽으로 둘 수 있고, 두께도 조정할 수 있습니다. UI에서는 보통 1px Stroke를 많이 사용합니다. 너무 두꺼운 테두리는 화면을 무겁게 만들 수 있습니다.

Effects는 그림자, 블러 같은 효과입니다. 카드 아래에 살짝 깔리는 그림자, 모달 배경의 흐림 효과 등이 여기에 해당합니다. 그림자는 요소가 배경 위에 떠 있는 듯한 깊이를 만들 수 있지만, 과하면 지저분해 보입니다. 실무에서는 강한 그림자보다 은은한 그림자를 더 자주 사용합니다.

이 세 가지를 구분하면 화면을 훨씬 체계적으로 만들 수 있습니다. 예를 들어 로그인 화면의 입력창을 만든다고 생각해 봅시다. 입력창 안쪽은 Background/Default Fill을 적용합니다. 테두리는 Border/Default Stroke를 적용합니다. 포커스 상태에서는 Stroke를 Brand/Primary로 바꾸면 사용자가 현재 입력 중인 위치를 쉽게 알 수 있습니다.

버튼도 마찬가지입니다. 주요 버튼은 Brand/Primary Fill을 적용하고, 버튼 안의 텍스트에는 흰색 또는 Text/OnBrand 같은 색을 적용합니다. 보조 버튼은 배경을 흰색으로 두고 Stroke만 브랜드 색으로 줄 수도 있습니다. 같은 색을 쓰더라도 Fill로 쓰는지, Stroke로 쓰는지에 따라 인상이 달라집니다.

개념 박스: Fill, Stroke, Effects 한눈에 보기

속성	쉬운 설명	대표 사용 예
Fill	안쪽을 채우는 색	버튼 배경, 카드 배경, 화면 배경
Stroke	바깥 경계선	입력창 테두리, 카드 외곽선, 구분선
Effects	시각 효과	그림자, 블러, 떠 있는 카드 느낌

컬러 스타일 만들기

컬러 스타일은 자주 쓰는 색을 저장해 두고 재사용하는 기능입니다. 텍스트 스타일과 마찬가지로, 한 번 만들어 두면 여러 레이어에 같은 색을 빠르게 적용할 수 있습니다.

먼저 사각형 하나를 만들고 Fill 색을 예를 들어 #2563EB로 지정합니다. 그런 다음 Fill 영역에서 스타일 아이콘을 열고 새 스타일을 만듭니다. 이름은 Brand/Primary처럼 역할 중심으로 붙입니다. 같은 방식으로 텍스트 색, 배경색, 경계선 색도 스타일로 만들 수 있습니다.

색상 스타일을 만들 때 가장 중요한 습관은 색을 숫자로 관리하는 것입니다. 눈대중으로 "이 정도 파란색이면 비슷하겠지"라고 고르면 화면 곳곳에 미묘하게 다른 색이 생깁니다. 그래서 실제 색상 값, 즉 HEX 코드를 확인하며 관리해야 합니다. HEX 코드는 #2563EB처럼 # 뒤에 문자와 숫자가 붙은 색상 코드입니다.

컬러 스타일은 Fill에만 쓰는 것이 아닙니다. 같은 색상 스타일을 텍스트 색에 적용할 수도 있고, Stroke에 적용할 수도 있습니다. 예를 들어 Border/Default 스타일을 만들어 두면 입력창 테두리, 카드 테두리, 구분선에 같은 색을 적용할 수 있습니다.

컬러 스타일을 적용하는 방법은 간단합니다. 색을 바꿀 레이어를 선택하고, Fill 또는 Stroke 영역에서 스타일 목록을 열어 원하는 컬러 스타일을 선택하면 됩니다. 텍스트 색을 바꿀 때도 텍스트 레이어를 선택한 뒤 Fill 색상에서 스타일을 적용할 수 있습니다.

단축키·팁 박스: 색상 작업을 빠르게 하는 방법

작업	Windows	macOS
색상 추출 도구 사용	I	I
Fill 색상 패널 열기	레이어 선택 후 오른쪽 Fill 클릭	레이어 선택 후 오른쪽 Fill 클릭
선택한 레이어 복제	Alt + 드래그 또는 Ctrl + D	Option + 드래그 또는 Command + D
여러 레이어 선택	Shift + 클릭	Shift + 클릭
Quick Actions 열기	Ctrl + /	Command + /

색을 추출할 때는 스포이드 도구가 편리하지만, 최종 스타일은 반드시 이름과 코드로 정리해 두는 것이 좋습니다. "찍어서 가져온 색"은 시작점이고, "스타일로 저장한 색"은 팀의 기준입니다.

Local Styles로 한 번에 바꾸는 경험

Local Styles는 현재 피그마 파일 안에서 사용할 수 있는 스타일입니다. 텍스트 스타일, 컬러 스타일, 효과 스타일 등을 파일 내부의 공통 규칙처럼 저장해 둔다고 생각하면 됩니다.

예를 들어 로그인 화면, 회원가입 화면, 비밀번호 찾기 화면이 있다고 해 봅시다. 세 화면의 제목에 모두 Title/Medium 텍스트 스타일을 적용했습니다. 어느 날 팀에서 "화면 제목이 조금 커 보이니 24px에서 22px로 줄여 봅시다"라고 말합니다.

스타일을 쓰지 않았다면 제목 레이어를 하나씩 찾아 수정해야 합니다. 화면이 많아질수록 누락이 생깁니다. 하지만 세 제목이 모두 Title/Medium 스타일에 연결되어 있다면, 스타일 원본에서 크기를 한 번만 바꾸면 됩니다. 그러면 이 스타일을 사용한 모든 텍스트가 함께 업데이트됩니다.

컬러도 마찬가지입니다. Brand/Primary가 적용된 버튼이 파일 곳곳에 있을 때, 브랜드 색을 조금 더 진하게 바꾸면 모든 주요 버튼의 색이 함께 바뀝니다. 이것이 스타일 관리의 핵심입니다. 스타일은 단순히 "저장된 값"이 아니라, 여러 화면을 하나의 기준으로 묶어 주는 연결고리입니다.

Local Styles를 수정할 때는 오른쪽 사이드바나 스타일 목록에서 해당 스타일을 찾아 편집합니다. 스타일 이름, 설명, 속성 값을 변경할 수 있습니다. 값을 바꾸면 그 스타일을 사용 중인 레이어에 변경 사항이 반영됩니다. 다만 개별 레이어에서 스타일을 해제하거나 일부 값을 덮어쓴 경우에는 예상과 다르게 보일 수 있으므로, 스타일 연결 상태를 확인하는 습관이 필요합니다.

실무에서는 스타일을 만들기 전에 작은 "스타일 보드"를 만들어 두면 좋습니다. 스타일 보드는 실제 화면 밖 한쪽에 텍스트와 색상 샘플을 모아 둔 영역입니다. 예를 들어 Typography, Color, Effects라는 섹션을 만들고, 그 안에 사용 중인 스타일을 한눈에 볼 수 있게 정리합니다. 그러면 팀원이 파일을 열었을 때 이 프로젝트가 어떤 규칙으로 만들어졌는지 빠르게 이해할 수 있습니다.

효과 스타일은 적게, 그러나 일관되게

Effects도 스타일로 저장할 수 있습니다. 대표적인 예가 그림자입니다. 카드, 드롭다운, 모달 같은 요소에는 그림자가 자주 들어갑니다. 그런데 매번 그림자 값을 새로 만들면 어떤 카드는 그림자가 진하고, 어떤 카드는 흐릿하고, 어떤 모달은 지나치게 떠 보입니다.

그래서 자주 쓰는 그림자는 효과 스타일로 관리하는 것이 좋습니다. 예를 들어 다음처럼 간단한 단계만 만들어도 충분합니다.

초보 단계에서는 그림자 값을 복잡하게 외울 필요가 없습니다. 다만 원칙은 기억하세요. 그림자는 요소를 돋보이게 하는 보조 수단이지, 화면의 주인공이 아닙니다. 그림자를 많이 넣을수록 고급스러워지는 것이 아니라, 오히려 화면의 질서가 흐려질 수 있습니다.

실무 UI에서는 배경색, 테두리, 여백만으로도 충분히 구분되는 경우가 많습니다. 그림자는 "정말 떠 있어야 하는 요소"에만 사용해도 됩니다. 특히 모바일 화면에서는 과한 그림자가 작은 화면을 답답하게 만들 수 있습니다.

로그인 화면에 스타일 적용해 보기

이제 지난 장에서 만든 로그인 화면을 떠올려 봅시다. 화면에는 아마 제목, 설명 문구, 이메일 입력창, 비밀번호 입력창, 로그인 버튼, 보조 링크가 있을 것입니다. 이 화면에 스타일을 적용하는 순서는 다음과 같이 잡을 수 있습니다.

먼저 제목 "로그인"에는 Title/Medium을 적용합니다. 사용자가 가장 먼저 봐야 하는 문장이므로 크고 굵게 둡니다. 그 아래 설명 문구에는 Body/Medium 또는 Body/Small을 적용하고, 색은 Text/Secondary로 낮춥니다. 이렇게 하면 제목과 설명의 위계가 자연스럽게 생깁니다.

이메일과 비밀번호 입력창의 라벨에는 Body/Small 또는 Caption을 적용할 수 있습니다. 입력창 안의 플레이스홀더, 즉 "이메일을 입력하세요" 같은 임시 안내 문구에는 Text/Disabled나 Text/Secondary 계열 색을 사용합니다. 사용자가 실제로 입력한 값보다 덜 강조되어야 하기 때문입니다.

입력창의 배경은 Background/Default, 테두리는 Border/Default로 정리합니다. 만약 현재 선택된 입력창을 표현하고 싶다면 테두리 색만 Brand/Primary로 바꿔도 충분합니다. 이처럼 상태 변화는 모든 것을 바꾸기보다 필요한 속성만 바꾸는 것이 좋습니다.

로그인 버튼에는 Brand/Primary Fill을 적용하고, 버튼 텍스트에는 Button/Medium 텍스트 스타일을 적용합니다. 버튼 안의 글자 색은 흰색 또는 브랜드 위에 올라가는 전용 색상인 Text/OnBrand로 정리할 수 있습니다.

마지막으로 "비밀번호를 잊으셨나요?" 같은 링크 텍스트에는 Body/Small을 적용하고 색은 Brand/Primary로 지정합니다. 이때 밑줄을 넣을지 말지는 서비스의 스타일에 따라 다르지만, 색만으로 링크임을 표현하기 어렵다면 밑줄이나 아이콘 같은 보조 단서를 함께 고려할 수 있습니다.

이렇게 스타일을 적용하면 화면은 단순히 예뻐지는 것이 아니라, 설명 가능한 구조를 갖게 됩니다. "왜 이 문구는 회색인가요?"라는 질문에 "보조 설명이라서 Text/Secondary를 적용했습니다"라고 답할 수 있습니다. "왜 이 버튼은 파란색인가요?"라는 질문에는 "주요 행동이라서 Brand/Primary를 사용했습니다"라고 답할 수 있습니다. 이것이 실무에서 중요한 디자인 언어입니다.

텍스트와 컬러를 함께 관리하는 법

텍스트 스타일과 컬러 스타일은 서로 다른 역할을 합니다. 텍스트 스타일은 글자의 크기, 굵기, 줄 높이 같은 형태를 관리합니다. 컬러 스타일은 색상의 의미와 값을 관리합니다. 둘을 섞지 않고 나누어 생각하면 훨씬 유연한 UI를 만들 수 있습니다.

예를 들어 Body/Medium이라는 텍스트 스타일은 여러 색과 함께 쓰일 수 있습니다. 기본 본문에서는 Text/Primary와 함께 쓰이고, 보조 설명에서는 Text/Secondary와 함께 쓰입니다. 에러 메시지에서는 같은 크기의 본문이라도 Status/Error 색을 쓸 수 있습니다.

반대로 Brand/Primary 컬러 스타일도 여러 요소에 쓰일 수 있습니다. 주요 버튼의 Fill이 될 수도 있고, 선택된 탭의 텍스트 색이 될 수도 있으며, 포커스된 입력창의 Stroke가 될 수도 있습니다. 하나의 색은 여러 속성에서 역할을 수행합니다.

이렇게 분리하면 나중에 변경이 쉬워집니다. 본문 글자 크기를 조정하고 싶다면 텍스트 스타일을 바꾸면 됩니다. 브랜드 색을 조정하고 싶다면 컬러 스타일을 바꾸면 됩니다. 만약 텍스트 스타일 이름에 색까지 섞어 두었다면 이런 변경이 복잡해집니다.

초보자에게 추천하는 규칙은 간단합니다. 텍스트 스타일 이름에는 색을 넣지 말고, 컬러 스타일 이름에는 위치보다 역할을 넣으세요. 빨간에러문구보다 Status/Error가 좋고, 작은회색글씨보다 Body/Small과 Text/Secondary의 조합이 좋습니다.

자주 생기는 실수와 해결법

텍스트와 컬러 스타일을 처음 다룰 때는 몇 가지 실수가 반복됩니다. 첫 번째는 스타일을 너무 많이 만드는 것입니다. 조금만 달라도 새 스타일을 만들다 보면 스타일 목록이 금방 지저분해집니다. 스타일은 많을수록 좋은 것이 아니라, 반복되는 기준을 잘 담을수록 좋습니다.

두 번째는 이름을 즉흥적으로 짓는 것입니다. 스타일1, 새 색상, 복사본 같은 이름은 나중에 반드시 문제를 만듭니다. 피그마 파일은 혼자 볼 때보다 다른 사람과 함께 볼 때 더 가치가 있습니다. 이름은 미래의 나와 동료에게 남기는 안내문이라고 생각하세요.

세 번째는 스타일을 만들고도 실제 화면에 적용하지 않는 것입니다. 스타일 보드에는 잘 정리되어 있는데, 정작 화면의 텍스트와 색은 수동 값으로 남아 있는 경우가 많습니다. 스타일을 만들었다면 실제 레이어에 적용되어 있는지 확인해야 합니다.

네 번째는 색의 대비를 놓치는 것입니다. 연한 회색 글자를 흰 배경 위에 올리면 세련되어 보일 수 있지만, 사용자가 읽기 어렵다면 좋은 UI가 아닙니다. 특히 버튼, 입력 오류, 안내 문구처럼 중요한 정보는 충분히 읽히는 색을 사용해야 합니다.

마지막으로, 모든 것을 한 번에 완벽하게 정하려는 태도도 위험합니다. 처음부터 거대한 디자인 시스템을 만들 필요는 없습니다. 지금 만드는 화면에서 반복되는 제목, 본문, 버튼, 배경, 테두리부터 정리하세요. 작은 기준이 쌓이면 자연스럽게 시스템이 됩니다.

체크 박스: 스타일 적용 전 확인할 것

• 같은 역할의 텍스트가 같은 텍스트 스타일을 쓰고 있나요?

• 같은 의미의 색이 같은 컬러 스타일로 연결되어 있나요?

• 텍스트 스타일 이름에 색이나 위치가 과하게 섞여 있지 않나요?

• 버튼, 입력창, 링크의 색이 사용자의 행동을 분명히 안내하나요?

• 스타일을 수정했을 때 관련 레이어가 함께 바뀌나요?

실무 감각을 키우는 작은 습관

피그마에서 스타일을 잘 쓰는 사람은 처음부터 모든 값을 외우는 사람이 아닙니다. 반복을 발견하고, 이름을 붙이고, 기준으로 저장하는 사람입니다. 화면을 만들다가 "이 글자 크기 또 쓰이네?"라는 생각이 들면 텍스트 스타일 후보입니다. "이 회색 또 쓰이네?"라는 생각이 들면 컬러 스타일 후보입니다.

작업 중간중간 오른쪽 패널을 유심히 보는 습관도 중요합니다. 선택한 레이어가 어떤 Text 스타일을 쓰는지, Fill은 직접 지정된 색인지 스타일인지 확인하세요. 수동 값이 많아질수록 나중에 수정이 어려워집니다.

또 하나의 좋은 습관은 스타일을 만들 때 예시 레이어를 함께 남기는 것입니다. Title/Medium 스타일 옆에는 실제로 그 스타일이 적용된 "화면 제목 예시"를 써 두고, Brand/Primary 옆에는 해당 색으로 채운 작은 사각형을 놓아 둡니다. 표와 샘플이 함께 있으면 파일을 처음 여는 사람도 금방 이해할 수 있습니다.

스타일은 디자인을 딱딱하게 만드는 규칙이 아닙니다. 오히려 디자이너와 기획자, 개발자가 더 자유롭게 이야기할 수 있게 해 주는 공통 언어입니다. "이 버튼 색 좀 파랗게 해 주세요"보다 "주요 버튼이니 Brand/Primary를 적용해 주세요"가 훨씬 명확합니다. "글자 좀 키워 주세요"보다 "이 문장은 섹션 제목이니 Heading/Small이 맞겠습니다"라고 말할 수 있다면, 이미 실무형으로 사고하고 있는 것입니다.

핵심 요약

이번 장에서는 텍스트와 컬러를 실무 기준으로 관리하는 방법을 배웠습니다. 중요한 것은 예쁜 값을 많이 아는 것이 아니라, 반복되는 요소에 역할을 부여하고 스타일로 연결하는 것입니다.

• 텍스트는 제목, 본문, 캡션, 버튼처럼 역할별 체계를 먼저 만든다.

• 텍스트 스타일은 글자 크기, 굵기, 줄 높이 등 타이포그래피 기준을 저장한다.

• 색상은 예쁜 색보다 역할이 중요하며, 브랜드 색, 텍스트 색, 배경색, 경계선 색, 상태 색으로 나누면 관리하기 쉽다.

• Fill은 안쪽 색, Stroke는 테두리, Effects는 그림자나 블러 같은 시각 효과다.

• Local Styles를 사용하면 같은 스타일이 적용된 여러 레이어를 한 번에 수정할 수 있다.

• 텍스트 스타일과 컬러 스타일은 분리해서 관리해야 나중에 더 유연하게 바꿀 수 있다.

• 스타일 이름은 감각적인 표현보다 Title/Medium, Text/Secondary, Brand/Primary처럼 역할이 드러나게 짓는 것이 좋다.

실습 과제: 로그인 화면용 스타일 세트 만들기

이번 실습에서는 간단한 디자인 토큰 표를 기준으로 텍스트 스타일과 컬러 스타일을 만들어 봅니다. 디자인 토큰은 디자인에서 반복해서 쓰는 최소 단위의 값입니다. 지금은 어렵게 생각하지 않아도 됩니다. "우리 프로젝트에서 쓰기로 약속한 글자와 색의 표"라고 이해하면 충분합니다.

먼저 피그마 파일 안에 Style Guide라는 새 섹션 또는 프레임을 만드세요. 그 안에 Typography, Color, Effects 영역을 나눕니다. 그런 다음 아래 표를 기준으로 스타일을 만들어 봅니다.

1단계: 텍스트 스타일 만들기

각 예시 문구를 텍스트 레이어로 만든 뒤, 오른쪽 Design 패널에서 속성을 설정하고 Text 스타일로 저장하세요. 저장할 때 이름을 표와 똑같이 입력해 봅니다.

2단계: 컬러 스타일 만들기

각 색상마다 작은 사각형을 만들고 Fill 색을 지정한 뒤, 컬러 스타일로 저장하세요. 만든 색상 스타일은 텍스트 색, 버튼 배경, 입력창 테두리에 직접 적용해 봅니다.

3단계: 로그인 화면에 적용하기

지난 장에서 만든 로그인 화면 또는 새 로그인 화면에 방금 만든 스타일을 적용하세요. 제목에는 Title/Medium과 Text/Primary를 적용합니다. 설명 문구에는 Body/Medium과 Text/Secondary를 적용합니다. 입력창에는 Background/Default Fill과 Border/Default Stroke를 적용합니다. 로그인 버튼에는 Brand/Primary Fill을 적용하고, 버튼 텍스트에는 Button/Medium과 Text/OnBrand를 적용합니다.

적용이 끝나면 Brand/Primary의 색을 다른 색으로 바꿔 보세요. 예를 들어 #7C3AED 같은 보라색으로 수정합니다. 버튼과 링크 색이 한 번에 바뀐다면 스타일 연결이 잘 된 것입니다.

4단계: 스스로 점검하기

마지막으로 화면을 보며 다음 질문에 답해 보세요.

• 같은 역할의 텍스트가 같은 스타일을 사용하고 있나요?

• 제목, 본문, 버튼, 캡션의 위계가 눈에 보이나요?

• 브랜드 색, 텍스트 색, 배경색, 테두리 색이 역할별로 구분되어 있나요?

• 스타일 값을 하나 바꿨을 때 관련 요소가 함께 변경되나요?

• 다른 사람이 이 파일을 열어도 스타일 이름만 보고 의미를 이해할 수 있나요?

이 실습을 마치면 여러분의 화면은 단순한 그림에서 한 단계 나아가게 됩니다. 이제 화면에는 기준이 생겼고, 그 기준은 다음 장에서 배울 Auto Layout과 만나 훨씬 강력해집니다. 글자와 색이 정리된 상태에서 Auto Layout을 적용하면, 화면은 보기 좋은 것을 넘어 변화에 강한 구조로 발전합니다.