충전 화면 UI 버그: 텍스트 찌꺼기와 정렬 깨짐 수정

지난주 결제 플랫폼의 충전 페이지에서 작은 UI 버그 두 가지를 찾아 고쳤다. "도구 찌꺼기 텍스트"가 화면에 떨어져 있었고, 약관동의 체크박스 줄이 flex 정렬이 제대로 안 된 상태였다.

JSP 도구가 남긴 흔적

충전 잔액 관련 JSP 파일과 결제 수단 선택 파일에서 찾은 건 IDE나 빌드 도구가 자동으로 생성한 코드 조각들이었다. 특히 JSP를 다루는 환경에서는 이런 일이 꽤 자주 일어난다. 에디터의 자동 포매팅, 템플릿 자동 생성, 혹은 병합 과정에서 의도치 않게 코드가 남아있는 경우다.

개발 중엔 보이지 않거나 무시되다가도, 실제 페이지 렌더링에서는 예상치 못한 텍스트나 공백으로 나타난다. 특히 고객 입장에선 충전 화면에서 갑자기 이상한 문구가 떠 있으면 신뢰도가 떨어진다. 내가 본 것도 정확히 그런 상태였다—금액 입력 근처나 결제 버튼 옆에 관계 없는 텍스트가 떴었다.

정렬 깨짐의 원인

약관동의 체크박스가 있는 줄의 경우 다양했다. CSS에는 display: flex 스타일이 정의되어 있었는데, JSP에서 마크업 구조가 그 의도와 맞지 않거나, 또는 여러 사이트 테마(이커머스 PG 플랫폼, SUNRISE, apple 등)에 따라 개별 CSS 오버라이드가 제대로 먹지 않는 상황이었다. 특히 여러 CSS 파일(공통 CSS + 사이트별 CSS)이 cascade되는 환경에서는 우선순위 문제가 흔하다.

고친 부분

JSP 파일들에서 찌꺼기 코드를 제거했고, CSS 파일들에서는 약관동의 체크박스가 포함된 .terms-agree (추정) 같은 컨테이너의 flex 속성을 점검했다. 특히 justify-content와 align-items 설정이 모든 테마에서 일관되도록 조정했다.

이런 버그가 자주 생기는 이유

도구 찌꺼기 텍스트는 보통 세 가지에서 비롯된다:
- 자동 포매팅 도구가 실수로 남긴 코드
- 코드 병합(merge)할 때 충돌 해결 과정에서 정리 안 된 부분
- 개발 중 디버깅용으로 쓴 임시 텍스트가 그대로 commit된 경우

정렬 깨짐은 더 흔하다. CSS in Flux 같은 상황을 많이 본다:
- 공통 CSS와 사이트별 CSS 간 우선순위 충돌
- JSP의 마크업 구조가 CSS의 selector와 안 맞는 경우
- 반응형 디자인에서 특정 해상도에서만 깨지는 경우

회고와 예방

이번 작업을 통해 느낀 건, UI 레이어는 작은 버그도 고객에게 바로 느껴진다는 점이다. 백엔드 로직 버그는 로그로 추적할 수 있지만, 화면에 보이는 텍스트나 정렬 문제는 사용자가 직접 마주친다. 특히 결제 흐름은 고객의 신뢰가 중요한 만큼 더 신경 써야 한다.

비슷한 상황이 반복되지 않으려면:
- JSP 파일 commit 전에 시각적 검증: 실제 브라우저에서 렌더링 확인
- CSS 정렬 규칙 문서화: flex 컨테이너와 자식 요소의 역할을 주석으로 명시
- 테마별 CSS 테스트: 여러 사이트 테마에서 한 번씩 확인
- 자동 포매팅 설정 점검: IDE의 자동 포매팅이 불필요한 코드를 남기지 않는지 확인

작은 버그지만, 팀 입장에서는 "고객이 보는 화면이 깨끗한가"라는 기본을 다시 한 번 점검하는 계기가 됐다.

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

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

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