개발 slecs

충전 UI 디자인 2라운드 개선, 스타일 토큰 통일

목차

지갑 충전 화면의 UI/UX를 두 번째로 다듬으면서, 계좌인증 부분의 스타일 네이밍을 통일했다. 사실 처음엔 이런 작업이 단순 스타일 정리인줄 알았는데, 여러 테마를 지원하는 시스템에서 일관성을 유지한다는 게 생각보다 복잡했다.

디자인 폴리시, 왜 여러 번 반복하는가

흔히 "충전 화면 UI를 개선했다"는 한 번으로 끝나는 걸로 생각하기 쉽다. 하지만 실무에선 거의 항상 여러 라운드를 거친다.

첫 라운드는 기획·디자인팀의 기본 콘셉트를 개발에 반영한 것. 그 뒤 QA팀이 UI 흐름을 타면서 "이 버튼이 너무 작아서 모바일에서 누르기 어렵다", "이 텍스트가 길어서 줄바꿈이 어색하다", "테마를 바꿀 때 이 부분의 색이 대비가 떨어진다" 같은 피드백이 나온다. 실제 사용자 테스트나 알파/베타 피드백도 마찬가지. 그게 2라운드가 되는 거다.

이번 변경도 그런 맥락인 것 같다. 초기 충전 디자인 후 실제 운영 중에 발견된 개선 사항들을 반영한 2라운드 폴리시 업데이트. 단순히 "더 좋게 만들었다"가 아니라, 피드백 루프를 거쳐서 검증된 개선.

계좌인증 토큰 통일 — 다중 테마 환경의 복잡성

변경 파일을 보면 JSP 3개(_charge-methods.jsp, account-verify.jsp, charge.jsp)와 CSS 3개(common.css, SUNRISE.css, 이커머스 PG 플랫폼.css)가 함께 변경됐다. 특히 CSS가 3개 파일에 걸쳐 있다는 건 중요한 신호다.

이커머스 결제 플랫폼은 보통 여러 테마를 지원한다. SUNRISE라는 특정 파트너사 테마, 그리고 메인 PG 플랫폼 테마. 각 테마마다 색상, 폰트 크기, 간격 같은 스타일이 조금씩 다를 수 있다.

"계좌인증 tn-chg 토큰 통일" 이라는 건 계좌인증 부분에서 사용되던 스타일 클래스명이나 CSS 변수명(토큰)이 테마마다 제멋대로였던 걸 한 가지 네이밍으로 통일했다는 뜻이다. 예를 들면:

/* Before: 테마마다 다른 네이밍 */
.charge-account-input-wrapper { /* SUNRISE */
.account-verify-input { /* PG */

/* After: 통일된 토큰 */
.tn-chg-account-input { /* 모든 테마 */

이렇게 하면 유지보수가 훨씬 쉬워진다. 나중에 "계좌 입력 필드의 테두리 색을 조정하자" 할 때 여러 클래스를 찾아다닐 필요가 없고, 한 토큰만 수정하면 모든 테마에 반영된다.

왜 이런 작은 통일 작업이 중요한가

개인적으로 이 작업을 하면서 깨달은 게, UI 일관성은 기술 문제가 아니라 운영 문제라는 것.

처음엔 "토큰을 통일하는 건 쉬운 일이지"라고 생각했다. 클래스명 몇 개 바꾸고 CSS 정리하면 끝 아니겠나. 하지만 실제로는:

  • 각 JSP 파일에서 어떤 클래스를 쓰고 있는지 일일이 확인
  • SUNRISE 테마에서는 특정 색상을 쓰고 있는데, 통일 후에도 그 색상이 유지되는지 확인
  • 다른 페이지에서는 이 토큰을 안 쓰고 있나, 아니면 부분적으로 쓰고 있나 확인
  • 통일 후 각 테마별로 실제 브라우저에서 렌더링 확인

결국 이건 "앞으로 계좌인증 스타일을 손봐야 할 때 어디를 봐야 하나"를 명확히 하는 작업. 다음 개발자가 와서 "이 부분 스타일을 바꿔야 한다"고 할 때, 명확한 토큰명으로 찾고 수정할 수 있다.

정리

이번 변경은 작아 보이지만 실제로는:

  1. UI 폴리시의 반복 개선 — 초기 설계보다 나은 충전 화면 경험 제공
  2. 유지보수성 강화 — 스타일 토큰 통일로 향후 수정 포인트 명확화
  3. 다중 테마 환경의 일관성 — SUNRISE와 PG 플랫폼 모두에 동일한 규칙 적용

특히 다중 테마를 지원하는 서비스라면 이런 "작은 통일"이 쌓이면 나중에 큰 기술 부채를 덜 수 있다. 네이밍이 일관성 있으면 스타일 리뷰도 쉽고, 새로운 기능 추가할 때도 기존 토큰을 자신감 있게 재사용할 수 있다. 그것이 이 커밋이 "style" 카테고리지만 실은 코드 리뷰 관점에서도 의미 있는 이유다.

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

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

이어보기

댓글 0

첫 댓글 달아줘.