푸터와 생성기 버튼 색상 대비 개선

이번 작업은 접근성(a11y) 관점에서 색상 대비를 개선한 것이다. 푸터의 상담전화와 저작권 텍스트, 그리고 생성기 페이지의 버튼들이 시각적 대비 기준을 충족하지 못하고 있었다. 특히 밝은 배경과 약한 색상 조합이 저시력 사용자나 특정 환경(밝은 햇빛 아래)에서 가독성 문제를 일으킬 수 있다는 점에서 우선순위를 높였다.

무엇이 문제였나

요소들의 배경-텍스트 색상 조합을 WCAG(웹 콘텐츠 접근성 지침)의 명도 대비 비율로 검토하면:

• 푸터 요소들: 상담전화번호와 저작권 표기가 배경 대비 1336:1 같은 수치에서(숫자는 마스킹 처리) 충분하지 않은 대비를 보였다
• 생성기 버튼: 활성 상태와 고스트(비활성) 상태에서 색상만으로 상태를 구분하려던 시도가 WCAG AA 레벨(4.5:1)을 만족하지 못했다
• 다크/라이트 모드 고려 부족: 한 가지 색상 팔레트로 모든 모드를 커버할 수 없었다

특히 중요한 점은, 우리 서비스에서 상담전화나 생성기는 핵심 행동유도 요소라는 것. 사용자가 찾기 어려운 색상이면 그것이 곧 전환율 손실이다. 접근성은 "규정 준수"가 아니라 "실제 비즈니스 임팩트"였다.

개선 사항

이번 수정에서는 다음과 같이 대응했다:

파일 수준에서는:

• public/styles.css: 색상 변수 및 선택자 기반 대비 규칙 적용
• src/layouts/Base.astro: 푸터 마크업은 유지, 클래스명으로 스타일 재지정
• src/pages/generator.astro: 버튼의 활성/고스트 상태 클래스에 새 색상 바인딩

이 작업에서 배운 점

1. 색상만으로는 상태를 구분할 수 없다는 원칙

한때는 버튼 색상 변화만으로 활성/비활성을 나타내려 했다. WCAG AAA를 찾아보면서 깨달았는데, 적록색맹(red-green colorblindness) 사용자는 이 변화를 감지하지 못한다. 색상 외에 border, shadow, 텍스트 표시 등을 조합해야 한다. 우리 팀에서도 다음부터 "색상만 다릅니다"라는 리뷰 코멘트가 나올 수 있도록 경각심을 두기로 했다.

2. 다크 모드는 "한 번만 고치는 게 아니다"

bright gold가 라이트 모드에서는 훌륭하지만, 다크 모드에서 동일 금색을 쓰면 역으로 배경과 대비가 떨어진다. 그래서 gold-deep 같은 여름 색상 변수가 필요했다. 이는 디자인 시스템에 "모드별 색상 메트릭스"를 명시해야 함을 의미한다. 마크다운 문서 하나로는 부족하다.

3. 버튼 > 푸터의 우선순위는 왜인가

생성기 버튼은 전환 경로의 최상단이다. 반면 푸터 상담전화는 "이미 찾은 사용자"가 클릭한다. 하지만 이번에는 둘 다 함께 수정했다. 이유는 하나의 색상 시스템(CSS 변수)으로 관리하는 것이 더 쉽기 때문이다. 개별 수정은 기술 채무를 쌓는다. 팀 리딩 입장에서는 "한 번의 CSS 작업"으로 두 문제를 해결하는 효율을 선호한다.

4. 테스트 자동화를 넘어 수동 검증

자동 접근성 테스트(axe, Lighthouse)는 WCAG 규칙 대부분을 잡는다. 하지만 색상 대비는 시각적 맥락을 요구한다. 라이트 배경 위의 gold-deep이 진짜 충분한가? 생성기 페이지의 모든 상태(hover, active, disabled)를 다크/라이트 모드에서 돌려봐야 했다. 이 수작업이 번거롭지만, 사용자 경험을 좌우한다.

팀에 전달한 메시지는 이거였다: "접근성은 규정 체크리스트가 아니라, 실제 사용자가 우리 서비스를 쉽게 쓸 수 있느냐의 문제". 그 덕분에 다음 타이틀(생성기 입력창 레이블 대비)도 이미 백로그에 올라와 있다.

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

• 모니터 쿠팡에서 보기 →
• 책상조명 쿠팡에서 보기 →
• 사무의자 쿠팡에서 보기 →

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