장례식장 사이트, "격조 있게" 다시 그리다

오전 11시, 장례 서비스 사이트 UI를 통째로 손보는 작업을 시작했다. 처음엔 단순히 레이아웃 폭 조정 정도로 생각했는데, 뚜껑을 열어보니 컬러 명암비, 타이포그래피 위계, 전체 테마 정체성까지 건드려야 할 포인트가 줄줄이 나왔다. 결국 세 번의 커밋이 하나의 흐름으로 이어졌다.

왜 이 순서였나

작업 순서를 보면 큰 것부터 → 세부 품질 순으로 내려갔다.

테마 방향 없이 폭부터 바꾸면 나중에 다 엎게 된다. 그래서 리디자인을 맨 앞에 뒀다.

테마 리디자인 — "한지 위에 올린 추모관"

장례 서비스 사이트라는 특성상 너무 모던하거나 차가우면 안 된다. 반대로 너무 무거워도 방문자에게 압박감을 준다. 목표는 격조 있지만 부드러운 정중함이었다.

기존 컬러와 폰트 시스템은 유지하되, 적용 방식을 바꿨다. Header, Footer, PostCard, Post 레이아웃, 인덱스 페이지까지 — 사이트 전 구조 파일을 건드렸다.

/* 한지 계열 베이스 톤 유지, 적용 범위 확장 */
/* styles.css — 색상 값 자체보다 "어디에 쓰이느냐"가 핵심 변경 포인트 */

파일 건드린 범위:
- src/components/Header.astro
- src/components/Footer.astro
- src/components/PostCard.astro
- src/layouts/Post.astro
- src/pages/index.astro
- public/styles.css

컴포넌트를 하나씩 열면서 "이 요소가 추모관 분위기에 맞는가?"를 기준으로 클래스와 여백을 조정했다. 폰트는 그대로, 컬러 토큰 적용 지점을 재정비하는 방식.

명암비 AA 교정 — 접근성은 선택이 아니다

테마 작업 직후 명암비를 바로 잡았다. 장례 서비스 특성상 고령 사용자 비율이 높다. WCAG AA 기준 미달이면 실질적인 접근성 문제가 된다.

주요 수정 두 가지:

• fg-mute 색상 진하게: 기존 값이 배경 대비 명암비가 부족해서 #6a6357로 교정. 흰 배경 위에서 충분한 대비를 확보.
• hero 이브로우 텍스트용 진한 골드 추가: 히어로 섹션의 eyebrow 텍스트가 밝은 배경 위에서 묻히는 문제. 골드 계열을 유지하면서 더 진한 변형값을 별도 지정.

명암비는 DevTools나 Colour Contrast Analyser로 즉석 확인하면서 값을 조정했다. "이 정도면 괜찮겠지"가 아니라 수치로 통과하는 걸 확인하고 넘어갔다.

컨테이너 폭 확대 — 비례감 완성

테마와 명암비가 정리된 뒤 레이아웃 비례를 맞췄다. 기존 컨테이너 폭이 880~920px 범위였는데, 전반적인 UI 밀도가 높아지면서 답답해 보였다. 1160px로 확대.

단, 글 본문 가독폭은 그대로 유지했다. 컨테이너가 넓어진다고 본문까지 넓히면 한 줄 글자 수가 너무 많아져 읽기 힘들어진다. 좌우 여백과 max-width 조합으로 본문 영역은 기존 폭을 사수했다.

• Header, Footer: 1160px 컨테이너 적용
• 인덱스 페이지: 와이드 컨테이너로 전환
• Post 본문: 가독 폭 그대로 (변경 없음)

이 한 시간은 단순 스타일 수정이 아니었다. "장례 서비스 사이트가 웹에서 어떻게 보여야 하는가"라는 질문에 답을 찾는 과정이었다. 테마 → 접근성 → 레이아웃 순으로 우선순위를 잡고 내려온 게 결과적으로 깔끔하게 맞아떨어졌다.

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

• IPS모니터 쿠팡에서 보기 →
• 인체공학마우스 쿠팡에서 보기 →
• 모니터암 쿠팡에서 보기 →

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