한 줄 요약
색 이름을 “초록, 베이지”가 아니라 “배경(base), 글자(contrast), 강조(accent)”처럼 역할로 붙이면 어디에 쓸지 고민할 필요가 없습니다.
비유로 이해하기
집 인테리어를 생각해 보세요. 벽지와 바닥은 집 전체의 바탕이고, 가구와 글씨는 그 위에서 또렷하게 보여야 하고, 쿠션과 액자는 눈길을 끄는 포인트입니다.
색상 변수도 이렇게 역할로 나눕니다.
- base = 벽지와 바닥: 페이지와 카드의 배경색
- contrast = 가구와 글씨: 배경 위에서 또렷하게 읽혀야 하는 글자색
- accent = 쿠션과 액자: 버튼, 링크, 강조처럼 눈길을 끄는 브랜드 색
비교해 보기
- 색 이름(green, beige): 나중에 브랜드 색을 파랑으로 바꾸면
--green에 파랑이 들어가는 이상한 상황이 생깁니다. - 역할 이름(accent, base): 색이 바뀌어도 이름은 그대로 맞습니다. “강조색은 파랑”이 되었을 뿐이니까요.
직접 실행해 보기
카드는 세 가지 역할 변수로만 칠해져 있습니다. --base와 --contrast의 값을 서로 바꿔 보세요. 카드가 어두운 배경에 밝은 글자로 바뀝니다. 역할로 나눠 두면 이렇게 쉽게 분위기를 바꿀 수 있어요.
GenerateBlocks에서는
GeneratePress는 처음부터 이 세 가지 역할 이름(contrast, base, accent)으로 전역 색상을 제공합니다. GenerateBlocks에서 섹션 배경은 base 계열, 제목과 본문은 contrast 계열, 버튼은 accent 계열에서 고른다는 규칙만 지켜도 디자인이 정돈됩니다.
참고: GeneratePress: Global Colors Overview · web.dev: Color · CSS-Tricks: Complete Guide to Custom Properties