다크 테마 히어로 텍스트 명도 수정

생성기 페이지의 히어로 섹션에서 텍스트가 배경에 묻혀 보이지 않는 문제를 고쳤다. 다크보드 배경에 차콜 글자가 대조를 이루지 못하는 것이 원인이었는데, 라이트 텍스트로 변경하고 불필요한 이모지까지 정리했다.

문제: 다크 테마에서의 가시성 위기

페이지를 어두운 테마로 볼 때 히어로 섹션의 주요 텍스트가 배경 색상과 구분되지 않아 읽기 어려운 상태였다. 차콜(charcoal) 계열의 어두운 글자를 다크보드라는 어두운 배경 위에 올렸을 때 명도 대조(contrast)가 충분하지 않았던 거다.

이런 문제는 생각보다 흔하게 발생한다. 라이트 테마에서는 잘 보이던 색상 조합이 다크 테마로 전환되는 순간 갑자기 가독성이 떨어지는 경험 말이다. 특히 히어로 섹션처럼 사용자의 눈이 가장 먼저 닿는 중요한 영역일수록 더욱 그렇다. 사람들이 사이트에 방문했을 때 가장 처음 읽어야 할 메시지가 보이지 않으면 사용자 경험이 한순간에 무너진다. 팀 입장에서도 이런 버그는 생각보다 늦게 발견되는 경향이 있는데, 다크 모드 사용자가 소수라고 생각하다가 QA나 실제 피드백을 통해 들리곤 한다.

해결: 라이트 텍스트 + 이모지 정리

라이트 텍스트(밝은 색상의 글자)로 변경했다. 다크보드라는 어두운 배경과 충분한 명도 차이를 만들어 가독성을 확보한 거다. 동시에 텍스트 옆에 남아있던 잔존 이모지(⏳) 기호도 제거했다.

이모지 제거는 단순한 정리 이상의 의미가 있다. 타이머 모양의 이모지(⏳)가 남아있는 상태는 아마도 과거 다른 목적(로딩 상태 표시 등)으로 사용되던 흔적일 수 있다. 이런 "좀비" 요소들은 시간이 지나면서 자연스럽게 쌓이는데, 리뷰하다가 발견되면 함께 정리하는 게 좋다. 코드베이스가 진화하면서 의도가 퇴색된 부분들을 주기적으로 정돈하지 않으면 나중에 "왜 이게 여기 있지?" 하면서 다른 사람들을 혼동시킬 수 있기 때문이다.

회고: 테마별 디자인 고려 사항

이 경험에서 얻은 교훈 몇 가지:

• 컬러 대조 자동 검증: 라이트/다크 모드 전환을 기본으로 하는 프로젝트라면, 빌드 체크에 색상 대조도(WCAG 기준)를 검증하는 도구를 포함하는 게 좋다. 그러면 배포 전에 문제를 걸러낼 수 있다.
• 이모지 생명주기 관리: 이모지나 아이콘은 가벼워 보이지만, 시간이 지나면 왜 그게 거기 있는지 아는 사람이 줄어든다. 텍스트에 사용할 때는 주석이나 git 히스토리에 그 용도를 명확히 남겨두면 나중에 도움이 된다.
• 테마 전환 테스트: 다크/라이트 모드가 있는 프로젝트에서는 특히 중요한 페이지들을 양쪽 테마에서 모두 확인하는 습관이 중요하다. 한 번의 테마 전환 스크린샷이 이런 문제를 예방한다.

단일 파일(src/pages/generator.astro) 수정이라 변경 폭은 작지만, 사용자가 실제로 경험하는 가시성 문제를 해결했다는 점에서 의미 있는 작업이었다. 배포 후 다크 테마 사용자들의 경험이 어떻게 개선되었는지는 별도 모니터링으로 확인할 가치가 있다.

🛒 이 글과 어울리는 추천 상품

• 모니터 쿠팡에서 보기 →
• 책상조명 쿠팡에서 보기 →
• 노이즈캔슬링헤드폰 쿠팡에서 보기 →

*위 링크는 쿠팡파트너스 활동의 일환이며, 일정액의 수수료를 제공받을 수 있습니다.