색
색의 역할
Color Roles
색의 역할은 화면에 쓰는 색을 중립색·주색·강조색으로 나눠 각 색에 맡은 임무를 정해 주는 방식입니다.
정의
색의 역할이란 화면에 쓰는 색을 그냥 여러 개 늘어놓는 것이 아니라, 각 색에게 맡은 임무를 정해 주는 방식입니다. 화면 대부분의 배경과 글자, 테두리는 눈에 튀지 않는 중립색(주로 회색 계열)이 조용히 담당하고, 사용자가 눌러야 할 주요 버튼이나 중요한 링크는 브랜드를 대표하는 주색이 맡으며, 아주 가끔 시선을 확 끌어야 하는 곳에만 강조색을 씁니다. 색을 몇 개 쓰느냐보다 각 색이 무슨 일을 하는지가 정해져 있느냐가 훨씬 중요하며, 이렇게 역할을 나누는 것이 색을 다루는 첫 단추입니다.
왜 중요한가
이 구분이 중요한 이유는 사용자가 화면을 읽는 부담을 크게 줄여 주기 때문입니다. 중립색이 바탕을 조용히 받치고 있으면 주색으로 칠해진 요소가 자연히 도드라져, 사용자는 어디를 눌러야 할지 별다른 고민 없이 알아챕니다. 반대로 모든 요소가 저마다 화려한 색을 두르면 무엇이 중요한지 판단할 단서가 사라져 화면이 어수선해지고 값싸 보입니다. 색을 역할별로 정리해 두면 새 화면을 만들 때마다 색을 새로 고민할 필요도 없어져, 제품 전체가 한 사람이 만든 것처럼 일관된 인상을 갖게 됩니다. 또한 역할이 정해져 있으면 나중에 브랜드를 새로 단장할 때도 주색 한 자리만 교체하면 되어, 수십 개의 화면을 일일이 뒤지지 않고도 전체 톤을 한 번에 바꿀 수 있습니다.
흔한 실수
- 강조색을 여기저기 남발하는 경우입니다. 강조는 흔해지는 순간 강조가 아니게 됩니다. 화면의 거의 모든 것이 밝은 색이면 정작 진짜 중요한 버튼이 파묻혀, 사용자의 시선을 원하는 곳으로 이끌 수 없습니다.
- 중립색을 순수한 회색으로만 쓰는 것입니다. 브랜드 색과 아무 관계 없는 무채색 회색은 화면을 차갑고 저렴해 보이게 만들기 쉽습니다. 중립색에도 주색의 기운을 아주 살짝 섞어 주면 화면 전체가 한 가족처럼 묶여 훨씬 조화롭게 느껴집니다.
- 주색을 배경처럼 넓은 면적에 통째로 칠하는 것입니다. 주색은 눌러야 할 곳을 가리키는 신호인데, 넓게 깔아 버리면 어디가 실제 버튼인지 알 수 없어져 원래의 안내 역할을 잃습니다.
실무 팁
- 색은 '많이'가 아니라 '역할별로' 쓰세요. 중립·주색·강조 세 자리를 먼저 정하고 그 안에서만 색을 배치하면, 브랜드 색 하나만 바꿔도 제품 전체 인상이 통째로 달라지는 것을 확인할 수 있습니다. 슬라이더로 주색을 돌려 보면 이 위력이 한눈에 들어옵니다.
- 각 역할에 밝기 단계를 함께 갖춰 두세요. 주색 하나가 아니라 연한 배경용부터 진한 글자용까지 단계가 있어야 실제 화면의 다양한 상황에 대응할 수 있습니다.
- 색이 정해지면 반드시 대비 기준을 통과하는지 확인하세요. 아무리 예쁜 조합도 글자가 읽히지 않으면 역할을 제대로 수행하지 못한 것입니다.
AI에게 시키기
아래에 붙여넣을 코드에서 쓰인 색을 전부 찾아 중립색·주색·강조색 세 역할로 다시 분류해줘. 배경·본문 글자·테두리 같은 화면 대부분은 중립색이 맡고, 주색은 눌러야 할 주요 버튼과 핵심 링크에만, 강조색은 정말 시선을 끌어야 할 한두 곳에만 남겨줘(강조색이 흔해지면 강조가 아니게 되니까). 정리한 색은 --color-neutral-*·--color-primary-*·--color-accent-* 디자인 토큰으로 뽑고, 원래 색→역할·토큰 매핑표와 교체된 코드를 줘.
이 서비스의 브랜드 색은 [브랜드 주색 — 예: #2F6BFF]이야. 이걸 주색으로 삼아 중립·주색·강조 3역할 색 시스템을 설계해줘. 역할마다 밝기 단계를 갖춰서 중립은 연한 배경용부터 진한 글자용까지 5~6단계, 주색은 3~4단계로 뽑고, 강조는 시선을 끄는 한 색만 아주 가끔 쓰도록 1~2단계만 잡아줘. 중립색은 순수 회색 대신 주색 색상(hue)을 살짝 섞어 화면이 한 가족처럼 묶이게 하고, 본문 글자 조합은 반드시 대비 4.5:1을 통과하도록 --color-* CSS 변수 세트로 정리해줘.
아래에 붙여넣을 코드에서 #888·#ccc처럼 순수 무채색 회색으로 된 중립색을 전부 찾아줘. 각 단계의 밝기는 그대로 두고 주색([주색 — 예: #2F6BFF])의 색상(hue)만 3~8% 정도 살짝 섞어, 차갑던 회색을 주색과 한 가족처럼 느껴지는 따뜻한 중립 스케일로 다시 만들어줘. 바뀐 중립색은 --color-neutral-* 토큰으로 정리하고, 글자로 쓰이는 단계는 배경 대비 4.5:1을 여전히 통과하는지 확인해서 원래값→새값 표로 줘.