컴플라이언스 상세 페이지를 좌측 고정 네비 구조로 개편하고 스타일 부채 정리

compliance 상세 페이지 레이아웃을 가로 탭에서 좌측 sticky 네비 구조로 전면 교체했다. CSS/SCSS도 함께 정리해서 디자인 시스템 쪽 부채를 일부 갚은 작업이다.

왜 가로 탭을 버렸나

가로 탭(horizontal tab) 구조는 섹션 수가 적을 때는 무난하다. 문제는 compliance 상세 페이지처럼 섹션이 늘어나는 구조에서다. 탭이 한 줄을 넘기 시작하면 줄바꿈이 생기거나 overflow 처리가 어색해지고, 각 탭이 어느 콘텐츠 영역을 가리키는지 시각적 연결이 흐려진다. 사용자가 스크롤을 내리면 탭 자체가 뷰포트 밖으로 사라져서 지금 어느 섹션에 있는지 맥락을 잃는 경우도 잦았다.

좌측 sticky 네비로 바꾸면 이 문제들이 꽤 깔끔하게 해소된다. 세로 방향으로 섹션 목록이 나열되므로 항목이 늘어도 레이아웃이 무너지지 않고, position: sticky를 쓰면 스크롤 중에도 네비가 뷰포트에 고정되어 사용자가 항상 현재 위치를 인식할 수 있다. 어드민 상세 페이지처럼 콘텐츠가 세로로 긴 화면에서는 사실 이쪽이 더 자연스러운 패턴이다.

변경 대상 파일은 세 개였다.

sticky 네비 구현에서 챙겨야 할 것들

sticky 레이아웃은 구조를 잘못 짜면 예상과 다르게 동작한다. 실제로 팀 내에서도 position: sticky가 왜 안 먹히냐고 물어보는 경우가 꽤 있는데, 대부분 부모 요소에 overflow: hidden 혹은 overflow: auto가 걸려 있거나, sticky 요소의 높이가 부모 컨테이너와 같아서 스크롤할 공간 자체가 없는 경우다.

이번 구조는 대략 아래 패턴으로 잡았다.

// _compliance.scss
.compliance-detail-wrap {
  display: flex;
  align-items: flex-start; // stretch 아니라 flex-start — 중요
  gap: 24px;
}

.compliance-nav {
  position: sticky;
  top: 80px; // 상단 고정 헤더 높이 고려
  width: 200px;
  flex-shrink: 0;
}

.compliance-content {
  flex: 1;
  min-width: 0; // flex item 텍스트 overflow 방지
}

align-items: flex-start를 빠트리면 flex 기본값인 stretch 때문에 네비 영역 높이가 콘텐츠 높이만큼 늘어나서 sticky가 사실상 동작하지 않는다. 이게 sticky 안 먹히는 가장 흔한 원인 중 하나다. 코드리뷰 때도 이 부분을 명시적으로 주석 달아두도록 했다. 나중에 이 코드를 건드릴 사람이 "왜 flex-start지?" 하고 지우면 바로 버그가 된다.

디자인 시스템 정리 — 작지만 중요한 이유

apple.css 를 건드린 게 이번 작업에서 사실 제일 조심스러운 부분이었다. 사이트 공통 CSS는 파급 범위를 명확히 파악하지 않으면 손대기 꺼려지는 파일이다. 이번엔 compliance 탭 구조에 종속된 클래스들이 공통 CSS에 섞여 있었는데, 그게 탭 컴포넌트를 다른 페이지에서 재사용하면서 생긴 흔적이었다.

정리 방향은 단순했다.

• compliance 전용 스타일 → _compliance.scss로 이동
• 공통 CSS에서 더 이상 참조되지 않는 탭 관련 클래스 제거
• 클래스 네이밍 BEM 기준으로 통일

규모가 크지 않더라도 이런 정리 작업이 쌓이면 나중에 새 기능을 붙이거나 디자인 변경이 들어올 때 영향 범위 파악이 훨씬 수월해진다. 반대로 이걸 안 하고 넘어가면 "이 클래스 지워도 되나요?"라는 질문이 계속 나오고, 결국 아무도 손 못 대는 레거시가 된다. 팀장 입장에서 이런 부채 상환 커밋은 기능 커밋만큼이나 가치 있다고 생각해서 리뷰 때도 꼼꼼하게 챙기는 편이다.

끝