폰트와 뒤로가기, 사용자 경험을 다듬다

오전 10시, 기능 개발보다는 "왜 이게 이렇게 되어 있지?" 하는 의문에서 시작한 작업이었다. 큰 피처 없이도 사용자 경험을 조용히 갉아먹는 것들이 있다. 오늘은 그 두 가지를 잡았다.

폰트부터 정리해야 했던 이유

디자인 시스템 쪽에서 폰트 지침이 정리된 건 이미 몇 주 전이었다. 제목에는 Gmarket Sans, 본문에는 Poppins(영문)와 Pretendard(한글) 조합. 그런데 정작 메인 페이지 index.html에는 그 지침이 전혀 반영되지 않은 상태였다. 팀 내에서 신규 페이지는 지침대로 가고 있었지만, 이미 만들어진 페이지들은 손을 안 댄 것.

총괄 포지션에서 이런 걸 직접 잡는 게 맞냐는 생각도 잠깐 들었다. 그런데 메인이 기준점이 되는 파일인 만큼, 여기가 틀리면 다른 팀원들도 "메인 보고 따라 했는데요"가 나올 수 있다. 그래서 직접 처리했다.

작업 자체는 간단했다. 폰트 import 정리, CSS에서 font-family 계층 명확히 잡기. 다만 제목/본문/UI 요소별로 어떤 폰트를 쓸지 경계를 명확히 긋는 게 핵심이었다.

뒤로가기가 모달을 닫아야 한다

폰트 작업을 마치고 나서 바로 옆에 붙어 있던 이슈로 넘어갔다. 둘러보기 모달 — 신규 사용자한테 서비스를 소개해 주는 UI인데, 문제는 이게 열려 있는 상태에서 브라우저 뒤로가기를 누르면 모달이 닫히지 않고 그냥 이전 페이지로 빠져나간다는 거였다.

사용자 입장에서 모달이 열려 있으면 "뒤로가기 = 이 레이어 닫기"가 자연스러운 멘탈 모델이다. 근데 현재 구현은 모달을 그냥 DOM 위에 띄운 것뿐이라 브라우저 히스토리랑 연결이 없었다.

해결은 history.pushState를 활용하는 방식이었다.

// 모달 열릴 때
history.pushState({ modal: 'tour' }, '');

// popstate 이벤트 (뒤로가기)
window.addEventListener('popstate', (e) => {
  if (modalIsOpen) closeModal();
});

모달이 열릴 때 히스토리 스택에 상태 하나를 밀어 넣고, 뒤로가기가 발생하면 popstate 이벤트에서 모달을 닫는 식. 모달이 닫혀 있을 때 뒤로가기는 기존 동작 그대로 흘러가도록 조건 처리도 함께 넣었다.

두 작업을 묶는 맥락

겉으로는 전혀 다른 작업처럼 보이지만, 오전 이 시간에 이 둘을 연달아 한 건 같은 문제의식에서 나왔다. "메인 페이지가 기준이 되어야 한다."

• 폰트 지침이 메인에 없으면 → 나머지 페이지들의 기준이 없는 것
• 모달 UX가 브라우저 기본 동작과 안 맞으면 → 사용자가 어색함을 느끼고 이탈

둘 다 방치하면 나중에 더 큰 비용을 치른다. 기술 부채라기보다는 "메인의 무결성" 문제에 가깝다.

아직 남은 것들도 있다. 모달이 여러 개 겹쳐 열리는 엣지 케이스, 폰트 로딩 순서 최적화(FOUT 이슈)는 다음 작업으로 미뤄 뒀다. 오늘은 가장 사용자 가시성이 높은 두 지점을 먼저 잡은 게 맞는 우선순위였다고 본다.

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

• 모니터 쿠팡에서 보기 →
• 기계식키보드 쿠팡에서 보기 →
• 인체공학마우스 쿠팡에서 보기 →

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