지갑 충전 화면 색상 통일로 브랜드 일관성 강화

지갑 충전 기능의 강조색을 브랜드 레드로 변경하고, 결제 흐름(/pay)의 히어로카드 톤과 맞춰서 통일했다. 단순한 색상 변경처럼 보이지만, 이것은 결제 플랫폼 전체의 UX 일관성을 높이는 작업이었다.

왜 이런 변경이 필요했나

사용자가 지갑에서 충전하는 액션과 결제 페이지에서 결제하는 액션은 사실상 같은 중요도의 핵심 동작이다. 그런데 한쪽은 금색으로, 다른 한쪽은 다른 색상으로 강조되어 있었다면, 사용자 입장에서는 "같은 중요도인데 왜 색상이 다른가"라는 혼동을 느낄 수 있다.

이런 작은 불일치들이 누적되면 서비스의 신뢰성과 전문성이 떨어지는 것처럼 느껴진다. 특히 금융이나 결제 관련 서비스는 '일관된 경험'이 사용자의 신뢰를 직결하기 때문에, 강조색 같은 작은 요소도 신경써야 한다. 내가 봤을 때 이 변경은 단순 디자인 개선보다는 "서비스 신뢰도를 지탱하는 작은 기초 공사"였다.

변경 범위와 전략

특히 SCSS 파일을 보면 아마 CSS 변수나 Sass 변수 형태로 색상을 중앙에서 관리하고 있었을 것 같다. 그렇다면 한 군데 정의를 바꾸는 것만으로 전체 지갑 영역의 강조색이 동시에 변경되는 구조일 가능성이 높다. 이건 좋은 설계다—색상 정책을 모든 파일에 흩어서 정의하는 것보다, 중앙에서 관리하면 이런 브랜드 톤 변경이 훨씬 수월하니까.

더 큰 그림—디자인 토큰화

이런 변경을 겪으면서 느끼는 건, 점점 더 많은 팀이 "디자인 토큰" 개념을 도입하는 이유다. 색상, 간격, 타이포그래피 같은 기본 요소들을 정의된 변수 형태로 관리하면:

• 브랜딩 정책 변경이 일어났을 때 한 곳만 수정하면 된다
• 새 개발자가 왜 이 색상을 썼는지 빠르게 이해할 수 있다
• 일관성 유지가 훨씬 쉬워진다
• CSS/SCSS의 덩어리가 줄어들고 유지보수 비용이 감소한다

현재 이 프로젝트도 그 방향으로 잘 진행 중인 것 같다. wallet.css와 wallet.scss가 구분되어 있다는 건 SCSS 빌드 체계가 있다는 뜻인데, 그렇다면 변수 기반 관리가 되고 있다는 신호다.

회고—우선순위와 영향도 판단

내가 이 변경을 우선순위 높게 처리한 이유는:

1. 광범위한 영향: 지갑이라는 자주 방문하는 페이지의 시각 일관성
2. 빠른 구현: 스타일 변수만 바꾸면 되므로 리스크가 낮음
3. 높은 효과: 사용자가 매번 느끼는 경험 개선

반대로 피해야 할 접근법은, 색상을 모든 HTML 요소에 인라인으로 정의해두는 것이다. 그렇게 하면 이런 통일 작업이 열 배는 복잡해진다.

또 하나 배운 건, 디자인과 개발이 처음부터 "컬러 시스템"을 함께 정의해야 한다는 것이다. 나중에 급하게 "어, 이 색상 브랜드 톤이 아니네"라고 발견하는 것보다, 처음부터 "우리의 강조색은 이것"이라고 정의하고 구현하는 게 훨씬 깔끔하다.

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

• 고색감모니터 쿠팡에서 보기 →
• 기계식키보드 쿠팡에서 보기 →
• 모니터암 쿠팡에서 보기 →

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