다크모드는 단순히 색상을 반전시키는 게 아닙니다. 제대로 된 다크모드 색상 설계를 위해 피해야 할 실수들을 정리했습니다.
1. 순수한 검정 배경 사용
#000000 대신 #121212 같은 진한 회색을 쓰세요. 순수 검정은 OLED에서 눈이 피로하고 콘텐츠가 붕 떠 보입니다.
2. 라이트모드 색상 그대로 사용
채도 높은 색상은 어두운 배경에서 눈이 아픕니다. 색상 변환기로 HSL을 확인하고 채도를 낮추세요.
3. 흰색 텍스트 사용
#FFFFFF 대신 #E0E0E0 정도의 밝은 회색을 쓰면 눈이 편합니다. 대비율은 유지하면서 부드러운 느낌을 줍니다.
4. 그림자 효과 유지
어두운 배경에서 그림자는 안 보입니다. 대신 밝은 테두리나 elevation으로 깊이감을 표현하세요.
5. 색상 의미 불일치
빨간색 경고가 다크모드에서 다른 느낌이 될 수 있습니다. 두 모드에서 일관된 의미를 전달하는지 확인하세요.
색상 조화 원리
색상환에서 60~120도 떨어진 색상(유사색)은 조화롭습니다. 180도 반대(보색)는 강한 대비를 줍니다. 120도씩 떨어진 세 색상(삼색조화)도 균형잡힌 조합입니다. 색상 변환기에서 HSL의 H값을 확인하면서 조화로운 조합을 찾으세요.
도구 활용
Adobe Color에서 색상 규칙(보색, 분할보색, 삼원색 등)을 선택하면 자동으로 조화로운 팔레트가 생성됩니다. 시작점이 되는 색상만 지정하면 됩니다.
실용적인 팁
색상 작업을 할 때 자주 쓰는 값들은 메모장이나 노션에 정리해두세요. 매번 검색하는 시간을 아낄 수 있습니다. 색상 변환기를 북마크해두면 필요할 때 바로 접속할 수 있습니다.