광고 게이트 모달 닫기 버튼 오클릭 문제 개선

광고 게이트 모달의 닫기 버튼 크기가 너무 작아서 misclick이 계속 발생하던 문제를 수정했다.

왜 이게 이슈였나

AdGateModal 컴포넌트에서 X 버튼이 기본 아이콘 크기 그대로 렌더링되고 있었음. 실제로 클릭 영역이 좁으니까 사용자 입장에서는 닫으려다 광고 영역을 눌러버리는 상황이 생긴다. 광고 게이트 특성상 "닫기"와 "광고 클릭"이 공간적으로 붙어 있을 수밖에 없는 구조인데, 거기서 버튼이 작으면 UX 입장에서는 거의 트랩에 가깝다.

misclick이 UX 문제로만 끝나면 다행인데, 광고 게이트에서의 의도치 않은 클릭은 광고 지표 신뢰도에도 영향을 준다. CTR이 부풀려지거나 이탈률 분석이 흐려지는 부작용이 생길 수 있어서 작아 보이는 수정이지만 실제로는 꽤 중요한 픽스였음.

수정 내용

X 버튼 크기를 18x18로 고정. .bak 파일이 함께 커밋된 걸 보면 수정 전 상태를 백업해두고 작업한 흔적이다. 변경 자체는 핀포인트 수정이라 코드 변경 범위는 크지 않았겠지만, 터치/클릭 타겟 크기에 관해서는 짚고 넘어갈 게 있다.

구글 Material Design이나 Apple HIG 모두 터치 타겟 최솟값으로 44x44px 이상을 권고한다. 18x18은 시각적 아이콘 크기고, 실제 클릭 가능 영역(hit area)은 이보다 충분히 넓어야 한다. 아이콘 자체를 키우는 게 아니라 padding이나 min-width / min-height로 클릭 영역을 확보하는 패턴이 일반적임.

<!-- before: 아이콘 크기 그대로 -->
<button class="close-btn">
  <svg width="12" height="12" .../>
</button>

<!-- after: 18x18 아이콘 + 클릭 영역은 별도 확보 권장 -->
<button class="close-btn" style="padding: 8px;">
  <svg width="18" height="18" .../>
</button>

아이콘 크기와 클릭 타겟 크기를 분리해서 생각하는 게 포인트다. 시각적으로는 작게 보여도 클릭 영역은 충분히 줄 수 있음.

회고

이런 류의 수정은 팀 내에서 보고가 잘 안 되는 편이다. "작은 UI 버그니까 그냥 수정하고 올리면 되지" 싶은데, 광고 게이트처럼 수익이나 지표와 연결된 컴포넌트에서의 클릭 UX는 사소하게 볼 게 아님. 발견했으면 빠르게 픽스하되, 왜 이게 문제였는지 컨텍스트를 commit 메시지나 PR 설명에 남겨두는 게 나중에 같은 실수를 반복 안 하는 방법이다.

.bak 파일이 커밋에 올라간 건 조금 신경 쓰임. 작업하다 보면 임시 백업 파일을 로컬에 두는 경우가 있는데, .gitignore에 *.bak 패턴을 추가해두는 게 습관적으로 좋다. 이번엔 소규모 수정이라 큰 문제는 아니지만, 리뷰 단계에서 걸러주는 게 팀 코드베이스를 깔끔하게 유지하는 데 도움이 된다.

닫기 버튼 하나지만, 사용자가 광고 게이트를 "의도한 대로" 닫을 수 있어야 그 이후의 UX 흐름도 신뢰를 얻는다.

끝.

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

• 기계식키보드 쿠팡에서 보기 →
• 모니터암 쿠팡에서 보기 →
• 사무의자 쿠팡에서 보기 →

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