[UX/UI]아티클스터디(UI를 위한 색)

🔗 출처

• UI를 위한 색

✅ 요약

• 3가지 색속성 : 고유색, 채도, 명도
• 색 공간 : 디지털 프로덕트에서는 HEX, RGB를 주로 이용함
• 주색과 보조색 : Primary, Secondary, Black Gray White를 사용
• 색 계층 : 중요 정보 요소는 주색과 보조색으로 강조 (Low → Medium → High → Very High)
• 색 대비 : 다른 색과 확연히 구분되도록 함 (WCAG에서 나눈 레벨을 따르며 주로 AA(4.5:1) 레벨이 표준)
• 색 조합 : 색상환 기준으로 단색, 유사색, 보색을 활용
• 색 비율 : 60-30-10(포인트색) 법칙 활용 → 목적에 따라 공간에 알맞게 배색을 응용하여 구성
• 밝은 색과 어두운 색 : 자연에서의 색 변화 규칙에 맞춰 “밝기-채도-색조” 순으로 변형 (어둡게는 RGB 계열로 밝게는 CMY 계열로)
• 배경과 색 : 주변에 어떤 색이 있는지에 따라 성질이 달라짐 → 다크 모드 디자인 시 같은 색보다 테마에 알맞는 색으로 변경하는 것이 좋음

💬 코멘트

깊게 알려고 하면 머릿속에 입력이 잘 되지 않는데 이 아티클은 간단히 이해하기 쉽게 볼 수 있었다. 특히 색에 대한 전체적인 즉, 근본적인 영역이 아닌 프로덕트, UI에 맞춰서 작성이 되어 있어서 더 좋았다.

최근에 디자인시스템, 컬러 스타일 제작했던 경험이 있어서 재밌게 봤는데 내가 뽑아냈던 컬러가 뭔가 잘못된 것 같다는 생각이 들었다. 처음에 초록, 빨강계열을 선택했었는데 색상을 정할 때 포인트 색상이나 브랜드 색상을 제외한 기능적인 색상은 거의 다 비슷한데 그런 이유가 초반에 배운 게슈탈트 심리학이 생각났어요 신호등의 초록 빨강색을 빗대어 통화 UI에서 전화받기, 거절 이렇게 연결되는 부분이 크다보니 빨강은 오류, 금지의 영역으로 나타낼 수 밖에 없는 것 같아요.