수익 대시보드 순수익 섹션 마크업과 라벨 구조 개선

대시보드 수익 요약 영역의 UI/UX 개선 작업을 진행했다. 복잡하게 얽혀 있던 순수익 섹션의 마크업을 정리하고 라벨 표기를 명확하게 다시 정의했는데, 이 작은 refactor 가 왜 필요했고 어떤 고민이 담겼는지 회고해본다.

수익 대시보드, 왜 단순화가 필요했나

관리자 영역의 수익 요약 페이지는 운영팀이 매일 들어오는 공간이다. 순수익(net revenue)은 비용 계산이 복잡해서, 처음에는 여러 sub-line 으로 세분화해서 표현했었다. 각 항목마다 계산식이나 부연 설명이 필요했고, 마크업도 깊이 있게(nested div 많이) 작성되어 있었다.

문제는 이 복잡함이 쌓일수록:
- 스타일 조정할 때마다 의존성 체크가 필요함
- 새로운 메트릭을 추가하려면 기존 구조를 파고 들어야 함
- 운영팀 피드백(라벨이 헷갈린다, 어떤 숫자가 뭔지 모르겠다)이 계속 들어옴

그래서 이번 작업은 단순한 "코드 정리"가 아니라, 정보 구조의 재설계라고 봤다.

정보 구조 단순화의 방향

먼저 순수익 관련 sub-line 들을 검토했다. 실제 운영팀이 필요로 하는 정보가 뭔지, 어떤 항목은 꼭 보여줄 필요가 있는지, 어떤 건 요약해도 되는지 우선순위를 다시 정했다.

<!-- Before: 깊고 복잡한 구조 -->
<div class="net-revenue-section">
  <div class="metric-wrapper">
    <div class="label-group">
      <span class="label">순수익</span>
      <span class="sub-label">기본</span>
    </div>
    <div class="value-group">
      <!-- 여러 sub-line 들이 각자 div로 감싸져 있음 -->
    </div>
  </div>
</div>

<!-- After: 플랫한 구조, 라벨과 값이 명확 -->
<div class="metric net-revenue">
  <span class="label">순수익</span>
  <span class="value">${netRevenue}</span>
</div>

불필요하게 중첩된 div들을 제거했고, 라벨 표기도 일관되게 통일했다. 특히 "기본", "조정값", "최종값" 같은 모호한 용어들을 더 명확한 표현으로 바꿨다.

라벨 정리에서의 고민

수익 관련 라벨은 정말 까다로운 부분이다. 같은 개념을 부서마다 다르게 부르기도 하고, 계산 방식이 여러 가지일 수 있기 때문이다.

이번 정리에서는:
- 계산 단계를 명확하게 → "총 수익", "공제액", "순수익"처럼 단계적 표현
- 단위나 기준 명시 → "KRW", "기간"처럼 필요하면 추가 정보 명확히
- 약자/축약어 제거 → 한눈에 읽을 수 있도록

이렇게 하면 운영팀이 대시보드를 볼 때 "어? 이게 뭐지?" 하며 멈추는 시간이 줄어든다. 작은 개선이지만 매일 쓰는 페이지니까 누적 효과는 크다.

코드 유지보수성 관점

마크업을 평탄화하면 CSS 스타일링도 훨씬 간단해진다. 깊은 중첩이 없으면 specificity 문제도 적고, 반응형 대응도 수월하다.

또한 이런 대시보드 템플릿은 자주 복사 & 붙여넣기로 확장되는 경향이 있다. 처음부터 단순하고 명확한 구조라면, 다른 개발자가 이를 참고해 새로운 메트릭 섹션을 추가할 때도 실수가 줄어든다.

<!-- 단순한 구조이므로 복사 & 커스텀이 쉬움 -->
<div class="metric cost-adjusted">
  <span class="label">조정된 원가</span>
  <span class="value">${adjustedCost}</span>
</div>

마치며

이 refactor 작업을 통해 느낀 건, 관리자 UI 도 사용자 중심으로 설계되어야 한다는 것이다. 비록 내부 운영 페이지지만, 매일 들어오는 사람들의 인지 부하를 줄이는 게 결국 서비스 품질을 높이는 길이다.

그리고 코드 정리와 UX 개선은 분리된 것처럼 보여도 함께 일어난다. 깔끔한 마크업이 명확한 정보 구조를 가능하게 하고, 명확한 정보 구조가 운영팀의 실수를 줄인다.