색상과 스타일 — 일관된 컬러 시스템 구축

색상 피커 완전 해부

색상 피커 열기:
오른쪽 패널 Fill 섹션 색상 사각형 클릭

구성 요소:
1. 스펙트럼 영역 — 채도(S)와 명도(V) 조절
2. 색조(H) 슬라이더 — 오른쪽 첫 번째 슬라이더
3. 불투명도(A) 슬라이더 — 오른쪽 두 번째 슬라이더
4. HEX 입력란 — 6자리 코드 직접 입력
5. RGB / HSL / CSS 전환 버튼 — HEX 옆 드롭다운

단축키:
스포이드(색상 추출): I 키 (아이드롭퍼)
Opacity 조절: 숫자 키 (5 = 50%, 0 = 100%)

Fill 종류 — 4가지 채움 방식

종류	사용 시점	설정 방법
Solid	단색 배경, 버튼, 텍스트	기본값
Linear Gradient	배너, 히어로 이미지 오버레이	Fill 드롭다운 → Linear
Radial Gradient	빛이 퍼지는 효과, 글로우	Fill 드롭다운 → Radial
Image	사진 프레임, 아바타, 썸네일	Fill 드롭다운 → Image → 파일 선택

여러 Fill을 겹칠 수 있습니다. 예: 이미지 위에 Linear Gradient를 추가하면 배너 텍스트 가독성을 높일 수 있습니다. Fill 섹션 하단 "+" 버튼으로 레이어 추가 가능.

Stroke (테두리) 설정

위치 설정:
Center: 테두리가 요소 경계에 걸쳐 표시
Inside: 요소 안쪽으로 들어옴 (버튼, 카드에 주로 사용)
Outside: 요소 바깥으로 확장

Stroke Weight: 두께 (1px = 미세한 선, 2px = 표준 선)
Dash: 점선/파선 패턴 (Gap, Dash 값으로 조절)

실무 팁:
카드 테두리: Inside 1px, Color #e2e8f0 (연한 회색)
포커스 링: Outside 2px, Color #6366f1 (브랜드 컬러)

브랜드 컬러 팔레트 설계 원칙

5가지 컬러 역할:

1. Primary (주 브랜드 컬러)
   사용: 주요 버튼, 링크, 강조 요소
   예: #6366f1 (인디고)

2. Secondary (보조 컬러)
   사용: 부가 정보, 보조 버튼
   예: #8b5cf6 (바이올렛)

3. Neutral (회색 계열)
   사용: 배경, 텍스트, 테두리 — 가장 넓은 면적
   9단계: #f8fafc / #f1f5f9 / #e2e8f0 / #cbd5e1 / #94a3b8 / #64748b / #475569 / #334155 / #1e293b

4. Success / Warning / Danger (시스템 컬러)
   Success: #22c55e
   Warning: #f59e0b
   Danger: #ef4444

5. Background / Surface
   Background: #f8fafc (페이지 배경)
   Surface: #ffffff (카드, 모달 배경)

Semantic 컬러 네이밍 시스템

색상 이름에 역할을 담으면 나중에 다크 모드 전환이나 브랜드 변경 시 일괄 교체가 쉬워집니다.

구조: [카테고리]/[역할]-[변형]

Brand/Primary          #6366f1
Brand/Primary-Hover    #4f46e5
Brand/Primary-Subtle   #eef2ff

Text/Default           #1e293b
Text/Subtle            #64748b
Text/Disabled          #94a3b8
Text/Inverse           #ffffff

Background/Default     #f8fafc
Background/Surface     #ffffff
Background/Overlay     rgba(0,0,0,0.4)

Border/Default         #e2e8f0
Border/Focus           #6366f1

Status/Success         #22c55e
Status/Warning         #f59e0b
Status/Error           #ef4444
Status/Info            #3b82f6

Color Style 등록 — 팔레트 시스템화

등록 방법:
1. 요소 선택 → Fill 색상 설정
2. Fill 섹션 오른쪽 "점 4개" 아이콘 클릭
3. "+" (Create Color Style) 클릭
4. 이름 입력 (예: "Brand/Primary") → Create Style

일괄 등록 팁:
1. 빈 프레임에 색상별 사각형을 나란히 배치
2. 각 사각형에 색상 입력 후 Style 등록
3. Assets 패널(Ctrl+Alt+O) → Colors 탭에서 전체 확인

스타일 편집:
Assets 패널 → Colors → 스타일명 우클릭 → Edit Style
→ 색상 변경 시 해당 스타일을 적용한 모든 요소에 즉시 반영

실습 — 브랜드 팔레트 + Semantic 컬러 시스템

Step 1: 팔레트 프레임 생성
F → 800x400 프레임, Fill: #f8fafc, 이름: "Color System"

Step 2: Primary 계열 사각형 5개 배치
R → 60x60, 모서리 8px
색상 순서: #eef2ff / #c7d2fe / #818cf8 / #6366f1 / #4338ca
각각 Color Style 등록: "Brand/50" / "Brand/200" / "Brand/400" / "Brand/500" / "Brand/700"

Step 3: Neutral 계열 9개 배치
#f8fafc ~ #0f172a (9단계)
이름: "Neutral/50" ~ "Neutral/900"

Step 4: Semantic 컬러 4개
Success / Warning / Error / Info
이름: "Status/Success" 등으로 등록

Step 5: 검증
Assets 패널 → Colors 탭 → 등록된 스타일 목록 확인
버튼 요소에 "Brand/Primary" 적용 → 스타일 수정 시 자동 반영 확인

관련 검색어  ·  피그마 색상 시스템, 피그마 Color Style, Figma 컬러 팔레트, Semantic Color, 피그마 브랜드 컬러, 피그마 Fill, 디자인 시스템 색상