충전 페이지를 라이트·다크 모드로 완전 개편

Figma 디자인 시스템을 기준으로 충전 페이지 전체 UI를 교체했다. 단순히 화면을 다시 그린 게 아니라, 라이트 모드와 다크 모드를 함께 지원하는 구조로 재설계한 작업이다.

왜 전면 교체가 필요했나

UI 개편은 보통 "기존 코드가 너무 오래됐다" 또는 "버그가 많다"는 식의 기술 채무로 나타나는데, 이번엔 좀 달랐다. Figma에서 새로운 디자인 시스템이 확정되면서, 그 스펙에 맞춰 구현을 따라잡아야 했다. 특히 다크 모드 지원이 본격화되면서 "기존 코드가 라이트 모드 기준으로만 짜여 있으면" 다크 모드 전환이 지저분해질 수 있다. 그래서 처음부터 두 모드를 동등하게 고려해서 작성하는 게 낫다고 판단했다.

일반적으로 디자인 시스템이 업데이트될 때, 팀은 두 가지 선택지를 마주한다:
- 점진적 마이그레이션: 페이지별로 천천히 바꿈. 단점은 같은 컴포넌트인데 구 버전과 신 버전이 섞여 있는 상황이 벌어진다.
- 전면 교체: 특정 페이지나 기능을 완전히 싹 바꿈. 초기 비용이 크지만, 이후 유지보수가 깔끔하다.

충전 페이지는 전자상거래 흐름의 핵심이고, 사용자가 자주 방문하는 곳이라 시각적 일관성이 중요했다. 그래서 전면 교체로 가기로 했다.

파일 구조와 변경 범위

JSP 파일 개수로 보면 4개 템플릿을 손봤고, CSS는 공통 파일과 테마 파일 양쪽을 업데이트했다.

라이트·다크 모드 동시 지원의 기술적 고민

다크 모드를 "나중에 덧붙인 것처럼" 구현하면, 색상 값이 중복되고 관리가 복잡해진다. 예를 들어:

/* 좋지 않은 방식 */
.charge-button {
  background-color: #007AFF;  /* 라이트 모드 기준 */
}

.dark-mode .charge-button {
  background-color: #0A84FF;  /* 다크 모드 오버라이드 */
}

이 방식은 두 가지 문제가 있다:
- 스타일 정의가 두 곳에 흩어진다.
- 색상이 하드코딩되어 있어, 디자인 시스템이 변경되면 모든 곳을 일일이 수정해야 한다.

대신 CSS 변수(커스텀 프로퍼티)를 활용하면 훨씬 깔끔하다:

/* 좋은 방식 */
:root {
  --color-primary: #007AFF;
  --color-button-bg: var(--color-primary);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-primary: #0A84FF;
  }
}

.charge-button {
  background-color: var(--color-button-bg);
}

이번 작업에서는 이런 식으로 색상 체계를 정리했다. SUNRISE.css라는 테마 파일에 라이트/다크 모드의 모든 색상 변수를 정의하고, 템플릿에서는 그냥 변수 이름만 참조하는 구조로 만들었다.

섹션별 개편의 의도

각 섹션이 독립적인 파일(_sections/ 폴더)로 분리되어 있다. 이건 좋은 설계다:
- 재사용성: 다른 페이지에서도 같은 섹션을 임포트할 수 있다.
- 테스트 용이성: 한 섹션만 변경해도 다른 부분에 영향이 적다.
- 팀 협업: 여러 사람이 동시에 다른 섹션을 작업할 수 있다.

예를 들어, 충전 금액 선택(_charge-amounts.jsp)은 라이트 모드에서는 밝은 배경에 진한 텍스트, 다크 모드에서는 어두운 배경에 밝은 텍스트를 보여야 한다. 이때 각 섹션이 자기 스타일을 캡슐화하고 있으면, 다른 섹션에 실수로 스타일을 적용할 일이 줄어든다.

코드리뷰와 일관성 유지

이렇게 큰 UI 변경은 코드리뷰가 중요하다. 특히 확인할 포인트들:
- 색상 값 일관성: 하드코딩된 색상이 남아 있진 않은지
- 라이트/다크 모드 커버리지: 모든 요소가 두 모드에서 읽을 수 있는지
- 접근성: 색상 대비(contrast)가 WCAG 기준을 만족하는지
- 반응형: 모바일/태블릿에서도 레이아웃이 깨지지 않는지

JSP 파일 변경과 CSS 변경을 분리해서 검토하는 것도 좋다. 템플릿은 구조를, CSS는 시각적 표현을 담당하므로, 각각의 관점에서 확인할 사항이 다르다.

회고: 디자인 시스템과의 동기화

이 작업을 통해 느낀 건, 디자인 시스템과 개발 코드의 동기화가 얼마나 중요한지다. Figma에서 정의된 24프레임이 실제 구현에 정확히 반영되려면, 단순히 색상 값을 복사하는 게 아니라 문맥을 이해해야 한다.

• 왜 이 배경색은 하이라이트가 필요한가?
• 다크 모드에서 같은 정보 계층을 유지하려면?
• 터치 타겟은 충분히 크게 되어 있는가?

이런 질문들을 하나씩 답하면서 마크업과 스타일을 다시 썼다. 결과적으로 Figma 디자인에 더 가깝고, 유지보수하기도 쉬운 코드가 됐다.

다음에 비슷한 규모의 UI 개편이 나오면, 같은 방식을 또 쓸 수 있겠다는 확신이 생겼다.

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

• 27인치모니터 쿠팡에서 보기 →
• 기계식키보드 쿠팡에서 보기 →
• 책상조명 쿠팡에서 보기 →

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