펫 사이트 비주얼 오버홀과 접근성 도장 찍기

오전 10시에 시작한 작업인데, 막상 끝내고 나니 commit이 8개였다. 계획은 "디자인 분위기 좀 바꾸자" 한 줄이었는데, 실제로 건드린 범위는 디자인 시스템 전체였다.

출발점: "이모지 아이콘은 이제 그만"

처음 손댄 건 카드 썸네일이었다. 기존에 카테고리별로 이모지를 박아두던 방식이 오래됐다는 느낌이 계속 있었다. 폰트 렌더링 환경마다 모양이 다르고, 다크모드에서 색상이 튀고, 무엇보다 "우리가 디자인을 컨트롤하고 있다"는 감각이 없었다.

그래서 Lucide 아이콘 세트로 교체했다. ISC 라이선스라 상업 사이트에도 제약 없이 쓸 수 있고, SVG 라인 아이콘이라 CSS 변수로 색상을 자유롭게 먹일 수 있다. PetIcon.astro 컴포넌트를 만들어서 카테고리명 → SVG를 매핑하는 구조로 정리했다. PostCard.astro와 index.astro도 이 컴포넌트를 바라보도록 교체.

여기서 AI 이미지 금지 지침도 같이 CLAUDE.md에 박았다. 봇이 나중에 썸네일을 자동 생성할 때 AI 이미지를 쓰지 않도록 못을 박아두는 것. 지침 없이 뒀다가 나중에 수습하는 것보다, 오버홀하는 김에 방침을 명문화해두는 게 팀장 포지션에서 해야 할 일이다.

풀 비주얼 오버홀 — 밝고 친근한 펫 톤

아이콘을 갈았으니 전체 분위기도 맞춰야 했다. styles.css, Header.astro, PostCard.astro, Post.astro, index.astro를 한 번에 건드리는 풀 오버홀 commit을 날렸다. 펫 정보 사이트답게 밝고 따뜻한 톤으로.

이때부터 명암비 문제가 연쇄적으로 터졌다.

명암비 AA 통과 — 연쇄 fix의 이유

밝은 배경으로 바꾸면 기존에 어두운 배경 위에서 쓰던 색이 갑자기 낮은 명암비로 떨어진다. WCAG 2.1 AA 기준은 일반 텍스트 4.5:1, 대형 텍스트 3:1인데, 오버홀 직후 체크해보니 여러 군데가 미달이었다.

fix commit이 4개로 늘어난 건 이 때문이다. 처음엔 "한 번에 다 잡자"고 시작했는데, 수정하고 브라우저에서 재확인하면 또 다른 곳이 걸렸다. 특히 --fg-mute 하나를 건드리면 그 변수를 참조하는 컴포넌트 전체에 영향을 주니까, 수정 → 체크 → 수정 사이클을 몇 번 돌았다.

/* before */
--fg-mute: #a89c92;  /* 배경 대비 3.1:1 — AA 실패 */

/* after */
--fg-mute: #7a6e64;  /* 배경 대비 4.6:1 — AA 통과 */

단순해 보이지만, 이 한 줄 때문에 RelatedPosts, Post, index 세 군데를 연달아 재확인해야 했다.

마무리: 디자인 시스템 지침 문서화

모든 fix가 끝난 뒤, 이번 오버홀에서 확정된 결정들을 CLAUDE.md에 정리했다.

• 카테고리별 CSS 클래스명과 컬러 토큰
• 활성 상태 CSS 패턴
• disclaimer/제휴 고지 카피 기준

이게 있어야 다음 봇 작업이나 다음 커밋 때 "왜 이 색깔이지?" 하고 다시 파지 않아도 된다. 오버홀이 끝났을 때 지침서도 같이 업데이트되는 게 이상적인데, 이번엔 그 순서를 잘 지켰다고 생각한다.

결국 이 한 시간은 "이모지 교체" 하나에서 시작해서, 접근성 기준을 충족시키는 연쇄 수정을 거쳐, 디자인 시스템을 문서로 굳히는 것까지 이어진 흐름이었다. commit 수가 늘어난 게 산만해 보일 수 있지만, 각 fix는 독립적으로 되돌릴 수 있게 의도적으로 쪼갰다. 한 덩어리로 묶었다가 나중에 "이 색깔만 예전으로 되돌리고 싶은데" 하는 상황이 더 피곤하다.

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

• 4K모니터 쿠팡에서 보기 →
• 인체공학의자 쿠팡에서 보기 →
• 외장SSD 쿠팡에서 보기 →

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