데모 어드민 전면 정비

새벽 2시 작업이었다. 낮에 기획 리뷰를 하면서 데모 어드민 페이지들이 죄다 다크 테마 하나만 쓰고 있다는 지적이 나왔고, 거기다 몇몇 메뉴는 클릭해도 아무 반응이 없는 "죽은 메뉴" 상태였다. 이걸 그냥 두면 외부에 데모 링크 공유할 때 인상이 영 좋지 않으니, 그날 밤 안에 정리하기로 했다.

우선순위를 어떻게 잡았냐

두 가지 문제가 묶여 있었다.

1. 테마 단조로움 — analytics, booking, crm, ecommerce, healthcare, hr 6개 데모가 전부 같은 다크 팔레트라 "하나 보면 다 본 것 같다"는 느낌
2. 죽은 메뉴 — 사이드바 항목 일부가 href="#" 상태거나 JS 핸들러가 없어서 클릭해도 아무것도 안 일어남

이 두 가지를 각각 따로 PR 낼 수도 있었지만, 어차피 같은 파일들이고 테마 작업 중에 메뉴도 같이 훑으면 한 번에 끝낼 수 있다고 판단했다. 묶어서 한 방에 처리.

작업 흐름

먼저 라이트 테마 CSS 변수 세트를 만들었다. 다크 테마가 이미 CSS 커스텀 프로퍼티로 잘 정리돼 있었기 때문에, [data-theme="light"] 셀렉터로 오버라이드하는 방식을 택했다. 전환 토글은 어드민 헤더에 버튼 하나로 붙이고, localStorage에 선택값을 저장해서 새로고침해도 유지되게 했다.

[data-theme="light"] {
  --bg-primary: #f8f9fa;
  --bg-secondary: #ffffff;
  --text-primary: #1a1a2e;
  --sidebar-bg: #ffffff;
  --border-color: #e2e8f0;
  /* ... */
}

그 다음이 데모 10종 테마 다양화였다. 6개 파일에 테마를 골고루 배분했다.

단순히 다크/라이트 이분법이 아니라, healthcare는 의료 도메인 특성상 민트 계열 액센트 컬러를 살짝 얹었다. 같은 라이트 테마라도 도메인 성격이 드러나도록.

죽은 메뉴 수리

테마 작업 중에 각 파일 사이드바를 하나씩 훑다 보니 죽은 메뉴가 꽤 많았다. 패턴은 두 가지였다.

• href="#" 그대로 방치된 앵커
• onclick 속성은 있는데 실제 함수가 정의 안 된 경우

데모 특성상 실제 라우팅을 다 구현할 수는 없으니, 클릭 시 해당 섹션을 메인 콘텐츠 영역에 인라인으로 로드하는 방식으로 통일했다. 최소한 클릭했을 때 "뭔가 반응한다"는 피드백을 주는 것이 목표였다. 완전한 기능 구현이 아닌, 데모로서의 신뢰감을 주는 수준.

새벽 작업이 주는 집중감

솔직히 낮에는 이런 작업 못 한다. 슬랙 알림, 리뷰 요청, 갑작스러운 질문들 — 컨텍스트 스위칭이 너무 잦다. 새벽 2시는 그런 게 없으니 6개 파일을 연속으로 열고, 패턴을 머릿속에 유지한 채 일관되게 처리할 수 있었다. 한 파일에서 발견한 패턴을 다음 파일에 바로 적용하는 흐름이 끊기지 않는다.

이번 커밋 하나로 데모 어드민의 첫인상이 확실히 달라졌다. 다음 단계는 각 데모별로 도메인 특화 위젯을 좀 더 다듬는 것인데, 그건 낮 작업으로 남겨뒀다.

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

• 모니터 쿠팡에서 보기 →
• 책상조명 쿠팡에서 보기 →
• 커피머신 쿠팡에서 보기 →

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