{3줄 요약}
색은 가장 먼저 인식되는 정보로 의미와 상태를 빠르게 전달하는 도구예요.
같은 색도 맥락에 따라 다르게 읽혀서 장식이 아니라 해석의 구조가 돼요.
색 이론을 알면 보기 좋은 수준을 넘어 구분과 강조를 의도적으로 설계해요.
색은 텍스트보다 빨리 읽혀요
버튼이 빨간색이면 경고처럼 느껴지고, 초록색이면 안전하게 느껴져요.
텍스트를 읽기 전에 이미 판단이 생겨요.
이게 색이 강력한 이유예요.
텍스트는 읽어야 하지만 색은 즉각 인식돼요.
그래서 인터페이스에서 색을 그냥 취향으로 고르면 문제가 생겨요.
"예쁜 색"과 "기능하는 색"은 달라요.
Josef Albers는 《Interaction of Color》에서 색은 절대적인
의미가 없다고 말해요.
주변 색에 따라 같은 색도 다르게 보인다고요.
이 원리가 인터페이스 설계에서 매우 중요해요.
색이 전달하는 정보의 종류
상태 표시 - 성공은 초록, 오류는 빨강, 경고는 노랑/주황, 정보는 파랑.
이 관례는 사람들이 이미 학습한 패턴이에요.
맞게 쓰면 설명 없이도 상태가 전달돼요.
카카오페이에서 결제 성공 후 초록색 체크마크가 나오는 것, 입력 오류 시 빨간색 메시지가 나오는 것 - 이게 색의 상태 표시예요.
그룹 구분 - 같은 색은 같은 종류라는 신호예요.
네이버 검색 결과에서 광고 배경이 약간 다른 색인 건 "이건 광고예요"라는 구분이에요.
브랜드 표현 - 토스의 파란색, 카카오의 노란색, 네이버의 초록색.
색이 브랜드 자체가 된 경우예요.
시선 유도 - 화면에서 가장 중요한 버튼, 가장 행동을 유발해야 하는 요소에 강조 색을 써요.
색 대비와 접근성
색을 고를 때 절대 빠트리면 안 되는 게 색 대비예요.
배경과 텍스트의 명도 차이가 충분하지 않으면 - 특히 회색 텍스트에 밝은 배경 조합 - 읽기 어려워요.
밝은 야외 환경이나 화면 밝기가 낮을 때 더 심해져요.
WCAG 기준으로 일반 텍스트는 배경 대비 4.5:1 이상이어야 해요.
이 기준은 접근성을 위한 것이지만, 사실 모든 사용자의 가독성을 높이는 기준이에요.
색각 이상(색을 구분하는 능력이 다른 것, 남성의 약 8%가 해당)을 가진 사용자도 고려해야 해요.
색만으로 정보를 전달하면 이 사용자들은 그 정보를 놓칠 수 있어요.
색과 함께 아이콘이나 텍스트를 병행하는 이유예요.
색의 심리적 반응
색은 감정적 반응도 만들어요.
파란색 - 신뢰, 안정, 차분함.
금융 서비스, IT 기업에서 많이 써요.
삼성, 현대카드, 토스.
초록색 - 자연, 성공, 진행.
완료 상태, 환경 관련 브랜드.
빨간색 - 경고, 긴급, 에너지.
오류 메시지, 중요 알림.
하지만 한국에서는 긍정적인 상승을 빨간색으로 표시하기도 해요(주식 시장).
노란색 - 주의, 활기.
배달의민족의 노란색은 활기차고 친근한 이미지를 만들어요.
색의 의미는 절대적이지 않아요.
제품의 맥락, 사용자의 문화, 이전 경험에 따라 달라요.
그래서 "이 색은 항상 이런 의미"라기보다, 우리 제품에서 어떤 의미로 쓸지 정의하는 게 중요해요.
색을 시스템으로 쓰기
색 하나하나를 즉흥적으로 고르면 나중에 관리가 어려워요.
제품이 커지면 같은 역할의 버튼이 여러 화면에 생기는데, 각자 다른 색이 되기 쉬워요.
이를 막으려면 색에 역할을 부여하고, 그 역할로 색을 선택하는 구조가 필요해요.
그게 Color System이에요. 색상 체계를 시스템으로 관리하는 방법은 Color System 설계에서 다뤄요.
관련 아티클
- Color System 설계 - 색을 역할과 규칙으로 체계화하는 방법이에요.
- Typography란 무엇인가 - 색과 타이포그래피가 함께 정보 구조를 만드는 방식이에요.
- Flat Design - 색이 인터페이스 역사에서 어떻게 활용되어 왔는지 볼 수 있어요.
참고 문헌
- Josef Albers, 《Interaction of Color》(1963) - 색이 맥락에 따라 어떻게 달라 보이는지의 이론적 기반이에요.
- Johannes Itten, 《The Art of Color》(1961) - 색채 이론의 고전이에요.
- AIGA, Resources - https://www.aiga.org/resources