색을 고르는 법
최종 업데이트 2026년 9월 6일
무드칩에는 지금 18개의 팔레트가 있고, 전부 다섯 색으로 되어 있습니다. 다섯 이라는 숫자는 화면 하나를 만들기에 부족하지도 넘치지도 않는 수입니다. 문제는 개수가 아니라 비율입니다. 다섯 색을 같은 면적으로 쓰면 팔레트가 아니라 무지개가 됩니다. 이 문서는 그 다섯 색을 실제 화면에 어떤 순서로 앉히는지에 대한 것입니다.
먼저 면적을 정하고, 그다음에 색을 정합니다
익숙한 출발점은 60·30·10입니다. 배경이 60, 보조 면이 30, 강조가 10 정도의 면적을 가져가는 배분인데, 실제로 웹에서는 배경이 훨씬 더 넓어지는 경우가 많습니다. 70·20·7·3 정도로 잡고 시작해도 됩니다. 중요한 것은 숫자가 아니라 순서입니다. 어떤 색이 예쁜지 먼저 고르면 대개 강조색부터 정하게 되고, 그러면 그 색을 여기저기 쓰고 싶어집니다. 배경부터 정하면 강조색이 들어갈 자리가 자연히 좁아집니다.
다섯 색에 역할을 하나씩 줍니다
가장 밝은 색은 배경, 가장 어두운 색은 본문 글자, 채도가 가장 높은 색은 누를 수 있는 것. 이 세 가지만 정해도 화면의 8할이 끝납니다. 남은 두 색은 구분선과 보조 텍스트, 또는 카드 배경과 배지처럼 면적이 작은 곳에 씁니다. 각 팔레트 상세 페이지에는 다섯 색에 이름을 붙여 두었습니다. 젖은 아스팔트, 김 서린 유리, 코트 소매처럼 장면 속 사물의 이름입니다. 색을 역할로 부르기 전에 사물로 부르면, 그 색을 어디에 써야 할지 대체로 저절로 정해집니다.
한 가지 규칙만 지키면 됩니다. 하나의 색은 하나의 역할만 맡습니다. 같은 색을 버튼에도 쓰고 제목에도 쓰고 테두리에도 쓰면 사용자는 그 색이 무엇을 뜻하는지 학습하지 못합니다. 강조색이 화면에서 두 번 이상 다른 의미로 등장하는 순간, 강조는 강조가 아니게 됩니다.
예쁜 색보다 읽히는 색이 먼저입니다
밝은 배경 위의 밝은 회색 글자는 화면 안에서 분위기 있어 보여도, 야외에서 폰을 보는 사람에게는 읽히지 않습니다. 그래서 각 팔레트 페이지에는 명도 대비를 계산한 표를 넣었습니다. WCAG 2.2 기준으로 본문 글자는 배경과 4.5:1 이상, 18pt 이상 또는 14pt 이상 굵은 글자는 3:1 이상이면 통과입니다. 7:1을 넘으면 더 엄격한 기준까지 만족합니다. 표에 나오는 숫자는 저희가 감으로 적은 것이 아니라 각 색의 상대 휘도로 실제 계산한 값입니다.
대비가 부족한 색을 못 쓴다는 뜻은 아닙니다. 그 색은 글자 배경이 아니라 면과 선에 쓰면 됩니다. 중간 밝기의 색이 대개 여기에 해당합니다. 어중간해서 흰 글씨도 검은 글씨도 잘 안 올라가는 색인데, 카드 배경이나 구분선으로는 훌륭하게 작동합니다.
색만으로 정보를 전달하지 마세요
빨강이 오류이고 초록이 정상이라는 약속은 색각 이상이 있는 사람에게 전달되지 않습니다. 한국 남성의 약 5퍼센트가 여기 해당한다고 알려져 있습니다. 해결은 어렵지 않습니다. 색과 함께 아이콘이나 글자를 하나 붙이면 됩니다. 상태 배지에 점 하나 대신 확인이나 주의 같은 단어를 같이 넣는 식입니다. 무드칩의 팔레트 중 초록과 붉은색이 함께 있는 조합을 쓸 때는 특히 이 점을 확인하세요.
장면과 기능을 섞지 마세요
한강 노을을 에러 메시지에 그대로 쓰면 로맨틱한 장애가 됩니다. 팔레트는 분위기를 정하는 도구이고, 경고와 삭제와 결제 같은 기능색은 그와 별개로 관리하는 편이 안전합니다. 다만 기능색을 완전히 다른 색상으로 가져오면 화면이 두 세계로 갈라집니다. 절충안은 팔레트 안에서 채도가 가장 높은 색 하나를 기능색으로 승격시키고, 그 색의 밝기만 조절해 성공과 경고를 구분하는 것입니다. 대기실 아침 팔레트의 살구색을 경고에 쓰는 방식이 그 예입니다.
CSS 변수로 옮기는 순서
각 팔레트 페이지의 CSS 변수 복사 버튼을 누르면 다섯 색이 chip-1부터 chip-5까지 변수로 들어옵니다. 이걸 그대로 쓰기보다, 역할 이름으로 한 겹 더 감싸는 편을 권합니다. 배경, 표면, 본문, 보조, 강조 같은 이름으로 별칭을 만들어 두면 나중에 팔레트를 통째로 바꿀 때 값 다섯 개만 교체하면 됩니다. 컴포넌트 쪽 코드는 색 이름이 아니라 역할 이름만 알고 있으면 되니, 여름에 만든 화면을 겨울 팔레트로 갈아입히는 일이 한 줄 작업이 됩니다.
하나만 기억한다면
채도가 높은 색이 화면에서 차지하는 면적을 5퍼센트 아래로 유지하는 것. 이 규칙 하나만 지켜도 대부분의 배색이 무너지지 않습니다. 무드칩의 팔레트가 사진 없이도 장면처럼 보이는 이유도 거의 전부 여기 있습니다. 눈에 띄는 색은 적게 쓸수록 눈에 띕니다.