급여 시스템의 UI를 개선하면서 컬러 팔레트를 체계적으로 설계했다. 단순히 예쁜 색이 아니라 기능적인 의미를 담은 색상 시스템이 필요했다. 컬러 팔레트 생성기로 조화로운 색상 조합을 찾는 과정을 공유한다.
의미 있는 색상
급여 시스템에서 색상은 정보를 전달한다.
- 초록: 지급 완료, 정상
- 빨강: 오류, 미지급, 경고
- 노랑: 대기 중, 주의
- 파랑: 정보, 링크
채팅방.kr/color-palette에서 조화로운 색상 조합을 찾을 수 있다.
브랜드 컬러 통합
회사 브랜드 컬러를 메인으로 하고, 나머지 색상은 그에 맞춰 조정한다. 브랜드 컬러가 파란색이면 보색인 주황은 강조에 사용하고, 유사색인 청록은 배경에 사용한다.
명도와 채도
같은 색상에서 명도를 조절해서 상태를 표현한다. 진한 파랑은 활성 버튼, 연한 파랑은 비활성, 아주 연한 파랑은 배경색. 팔레트 도구로 명도 변형을 만들 수 있다.
다크 모드
다크 모드에서는 색상을 반전하면 안 된다. 명도만 조절해서 어두운 배경에서도 가독성을 유지한다. 텍스트와 배경의 대비율 4.5:1 이상을 지킨다.
접근성
색맹/색약 사용자를 위해 색상만으로 정보를 전달하지 않는다. 아이콘, 텍스트 라벨을 함께 사용한다. 빨강/초록은 특히 구분하기 어려우니 주의한다.
디자인 시스템
색상 변수를 CSS 변수나 디자인 토큰으로 정의한다. 나중에 브랜드 색상이 바뀌어도 변수만 수정하면 전체 시스템이 업데이트된다.
:root { --color-primary: #1a73e8; --color-success: #34a853; --color-error: #ea4335; }
마치며
색상은 UI의 핵심 요소다. 조화로운 팔레트가 필요하면 온라인 컬러 팔레트 생성기를 활용해보자.