결제 임베드 오버레이 너비 고정

결제 플랫폼 임베드 시스템에서 오버레이 컴포넌트의 너비를 720px로 고정하고, 시트 아이템들을 클릭 가능한 버튼으로 개선했다.

임베드 UI의 너비 문제

다른 사이트에 embed되는 팝업 오버레이는 호스트 페이지의 너비에 관계없이 일정한 형태를 유지해야 한다. 그게 안 되면 모바일에선 화면을 넘어가고, 데스크톱에선 어색하게 늘어나거나 찌그러진다. 특히 결제나 주문 같은 중요한 단계에서는 더더욱 신경 써야 할 부분이다.

이 작업 전까지는 오버레이의 폭이 애매했던 것 같다. 뭔가 가변적이었거나, 부모 컨테이너에 의존하고 있었을 가능성이 높다. 그러다 보니 다양한 환경에서 일관된 사용자 경험을 주기 못했을 것 같다.

720px 고정폭 + 버튼화

여기서는 두 가지를 동시에 처리했다:

JSP와 CSS를 함께 수정한 건 단순 스타일만의 문제가 아니었다는 뜻이다. 아마도:

• 마크업: <div class="sheet-item"> 같은 것을 <button> 태그로 바꾸거나, 클릭 이벤트를 명시적으로 처리할 수 있게 구조를 개선
• CSS: 버튼의 padding, min-height (터치 타겟으로는 최소 44-48px), hover/focus 상태 등을 추가

버튼화는 단순히 "클릭하게 만든다"가 아니라, 사용자에게 "이건 상호작용 가능한 요소"라는 신호를 명확히 주는 것이다. 특히 모바일에서 버튼 크기가 작으면 터치하기 어렵고, 장애인 접근성도 떨어진다.

팀 관점에서의 의의

작은 fix처럼 보이지만, 실제로는 여러 계층의 개선이 섞여 있다:

• 사용자 경험: 어디서 접속하든 일관된 오버레이 크기 → 신뢰도 ↑
• 모바일 친화성: 고정폭 + 버튼 크기 확대 → 실수 클릭 감소
• 코드 유지보수성: JSP/CSS 분리가 명확해짐 → 다음 사람이 건들기 쉬움
• 접근성: 버튼으로의 변경 → 스크린 리더, 키보드 네비게이션 개선

이런 작업들은 "우리가 얼마나 세심하게 생각하는가"를 보여준다. 규모 큰 기능 구현도 중요하지만, 일단 만든 것을 사용자 입장에서 磨(닦아)내는 것도 마찬가지다.

다음에 생각할 부분

임베드 UI 작업할 때마다 떠올릴 체크리스트:

• 반응형인가, 고정폭인가? → 왜 그 선택인가?
• 모바일 터치 환경 고려했는가?
• z-index 충돌은 없는가? (호스트 페이지의 요소들과)
• focus/outline 상태 보이는가? (접근성)
• overflow 처리 (긴 텍스트, 다양한 언어)

이 정도만 신경 써도 "어디서 쓰든 동작하는" 컴포넌트를 만들 수 있다.

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

• 모니터 쿠팡에서 보기 →
• 기계식키보드 쿠팡에서 보기 →
• 외장SSD 쿠팡에서 보기 →

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