광고 슬롯 시각화와 어드민 UI 전면 개선

한 번에 꽤 많은 걸 쏟아냈다. 보안 패치, UI 라이브러리 교체, 운영 대시보드 개선, 광고 UX까지 — 커밋 하나에 담기엔 묵직한 범위였다.

왜 이걸 한 번에 묶었나

솔직히 말하면, 처음엔 각각 별도 PR로 가져갈 계획이었다. 그런데 shadcn UI 리뉴얼을 시작하자마자 components.json과 package.json이 같이 바뀌기 시작했고, 기존 어드민 컴포넌트들이 연쇄적으로 영향을 받았다. 그 김에 광고 UX 쪽 수정도 어차피 같은 컴포넌트 레이어를 건드려야 했고, 보안 패치는 package-lock.json 수준에서 이미 묶인 상태였다.

팀 리딩하다 보면 이런 상황을 자주 마주친다. 이상적으로는 "보안 패치만", "UI 리뉴얼만" 나눠야 하지만, 의존성 체인이 같은 레이어에 걸려 있으면 억지로 쪼개다가 오히려 불완전한 중간 상태가 배포되는 게 더 위험하다. 이번엔 그 트레이드오프를 명시적으로 판단해서 묶기로 했다.

변경 파일별로 뭘 했나

SlotMatrix.tsx는 이번 작업에서 가장 공들인 부분이다. 광고 슬롯이 어떤 지면에 어떻게 배치돼 있는지 운영자가 한눈에 파악하기 어렵다는 피드백이 반복됐었는데, 이 컴포넌트를 통해 매트릭스 형태로 시각화하면서 그 문제를 어느 정도 해소했다. AdUnitFormEnhanced.tsx는 이름에서 보이듯 기존 폼의 "강화판"이다 — 기존 AdUnitForm을 바로 교체하지 않고 Enhanced 버전을 병행해서 점진적으로 전환하는 패턴을 택했다.

shadcn 리뉴얼에서 신경 쓴 것들

shadcn UI는 "설치하면 끝"이 아니다. components.json에 baseColor, cssVariables, 경로 alias 설정이 맞지 않으면 팀원들이 npx shadcn@latest add 돌릴 때마다 엉뚱한 위치에 파일이 생성된다. 이번에 이 설정을 팀 컨벤션에 맞게 정리한 게 사실 조용하지만 중요한 작업이었다.

// components.json 핵심 설정 구조 (예시)
{
  "style": "default",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.ts",
    "css": "src/app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui"
  }
}

이 파일 한 줄 잘못 건드리면 이후 컴포넌트 추가할 때마다 경로 불일치 이슈가 생긴다. 코드리뷰에서 이 파일 변경이 들어오면 항상 "왜 이 값이 바뀌었는지" 짚고 넘어가는 이유다.

보안 패치 — 조용하지만 절대 미루면 안 되는 것

package-lock.json이 변경 파일 목록에 있다는 건 단순 의존성 정리 이상의 의미다. 어드민 쪽은 외부 노출이 제한적이라도 내부 운영자가 쓰는 시스템인 만큼 취약 패키지를 그대로 끌고 가면 내부 보안 감사에서 걸린다. npm audit이나 pnpm audit 결과를 CI에서 체크하고 있는데, 이번 패치로 몇 가지 moderate/high 항목을 정리했다.

팀원들이 UI 작업에 집중하다 보면 이런 의존성 보안 업데이트를 "나중에"로 미루는 경향이 있다. 총괄 입장에서는 이게 기술 부채로 쌓이는 걸 막기 위해 — 이번처럼 큰 변경이 생기는 타이밍에 — 같이 처리하는 게 현실적으로 효율적이다.

회고

• Enhanced 컴포넌트 패턴은 부드럽게 전환할 수 있어 좋지만, 언제 구버전을 deprecated 처리할지 명확한 기준을 팀 내에 공유해야 나중에 "이 파일 지워도 돼요?" 질문이 안 생긴다
• SlotMatrix 같은 시각화 컴포넌트는 초반에 운영자와 한 번이라도 같이 보면서 피드백 받는 게 수정 사이클을 훨씬 줄여준다
• 보안 패치 + UI 리뉴얼을 한 커밋에 담은 건 현실적인 판단이었지만, PR 설명에 "의존성 변경 이유"를 명시적으로 적어두는 게 나중에 blame 추적할 때 팀에게 친절하다

다음엔 슬롯 매트릭스 인터랙션 부분을 더 다듬을 것 같다. 끝.

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

• 기계식키보드 쿠팡에서 보기 →
• 모니터암 쿠팡에서 보기 →
• 외장SSD 쿠팡에서 보기 →

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