POS 결제 버튼을 헤더로 옮겨 항상 노출되게 개선
목차
POS 결제 화면의 버튼 레이아웃을 손봤다. 동시에 다크/라이트 테마 분기도 같이 정리.
배경: 버튼이 왜 거기 있었나
결제 시트(paymentSheet.jsp) 안에서 "결제" 버튼의 위치가 오랫동안 바디 영역 하단에 박혀 있었다. 처음 설계할 때는 크게 문제가 없었는데, POS 환경 특성상 화면 높이가 고정되거나 키오스크 비율로 렌더링되는 상황이 생기면서 버튼이 가려지거나 스크롤 영역 밖으로 밀려나는 케이스가 반복됐다.
운영팀에서도 몇 번 리포트가 올라왔고, QA 쪽에서도 특정 해상도에서 버튼이 안 보인다는 피드백이 있었다. 매번 "그 해상도에서만 그러냐"는 식으로 넘어갔는데, 이번에 결제 시트 전반을 건드리는 김에 한 번에 처리했다.
핵심은 버튼을 시트 헤더 영역으로 이동하는 것. 헤더는 고정 포지션이라 콘텐츠 높이에 무관하게 항상 노출된다. 결제라는 액션 자체가 시트 내 어떤 상태에서도 접근 가능해야 한다는 UX 원칙이기도 하고, POS처럼 터치 기반 하드웨어에서는 특히 "버튼이 항상 같은 자리에 있어야 한다"는 게 중요하다.
작업 내용
변경 파일은 paymentSheet.jsp 하나. 단일 파일이지만 이 파일이 결제 시트 전체 마크업을 담당하는 컴포넌트라 영향 범위는 생각보다 넓다.
크게 두 가지를 처리했다.
1. 버튼 위치 이동
<%-- Before: 바디 하단에 위치 --%>
<div class="payment-sheet__body">
<!-- 결제 수단 목록 ... -->
<div class="payment-sheet__action">
<button class="btn-payment">결제</button>
</div>
</div>
<%-- After: 헤더로 이동 --%>
<div class="payment-sheet__header">
<span class="sheet-title">결제 수단 선택</span>
<div class="payment-sheet__action">
<button class="btn-payment">결제</button>
</div>
</div>
헤더에 타이틀과 버튼이 같이 올라가면서 레이아웃 구조상 헤더 flex 정렬로 양끝 배치가 자연스럽게 됐다.
2. 다크/라이트 테마 분리
이전까지는 CSS 클래스 하나로 두 테마를 inline override로 때우고 있었다. 관리가 안 되는 상태였고, 특히 버튼 색상이 테마에 따라 달라야 하는 상황에서 JSP 레벨에서 조건 분기를 태웠다.
| 항목 | Before | After |
|---|---|---|
| 테마 분기 방식 | 인라인 스타일 override | 테마별 클래스 분리 |
| 버튼 위치 | 바디 하단 (스크롤 영역 내) | 헤더 고정 영역 |
| POS 해상도 대응 | 불안정 | 헤더 고정으로 항상 노출 |
| 유지보수 | 테마 수정 시 JSP 직접 수정 | 클래스 기반으로 CSS만 수정 |
테마 분리는 사실 이번 버튼 이동과 직접 연관이 없는 작업인데, 건드리는 김에 같이 처리했다. 원래는 별도 커밋으로 쪼개는 게 맞는데, 파일이 하나고 두 변경이 맞닿아 있어서 묶었다.
회고
솔직히 이 작업은 "기술 부채 상환"에 가깝다. 처음부터 헤더에 넣었으면 됐을 버튼인데, 초기 빠른 개발 과정에서 바디 하단이 "일단은 된다"는 이유로 그냥 붙여진 것. 다크/라이트 분기도 마찬가지다. 처음에 테마 전략 없이 하나씩 예외 처리한 흔적들이 쌓인 것.
이런 종류의 수정이 오히려 까다로운 게, 기능 변화가 없다 보니 우선순위에서 계속 밀린다. 버그리포트도 아니고 기능 요구사항도 아니어서 스프린트에 넣기가 애매하다. 결국 다른 작업하다가 "이거 지금 안 고치면 나중에 더 크게 건드려야 한다"는 판단이 서면 그때 처리하게 된다.
팀 내에서 이런 핀포인트 개선 작업들을 어떻게 가시화하고 우선순위에 올릴지는 계속 고민 중이다. 코드리뷰 때 "이건 왜 여기 있냐"는 코멘트가 나와서 처음 알게 되는 경우도 많고, 이번처럼 다른 작업과 엮여서 처리되는 경우도 많다. 기술 부채를 별도 태스크로 관리하는 문화가 팀에 더 자리잡아야 한다는 생각이 든다.
paymentSheet.jsp 하나짜리 수정이지만, 이 파일이 결제 플로우의 진입점이라는 점에서 변경 자체는 조심스럽게 다뤘다. 테스트도 다크/라이트 각각, 그리고 POS 해상도 시뮬레이션 세 케이스 모두 확인했다.
끝.
🛒 이 글과 어울리는 추천 상품
*위 링크는 쿠팡파트너스 활동의 일환이며, 일정액의 수수료를 제공받을 수 있습니다.
댓글 0
첫 댓글 달아줘.