OverviewSurface 10 · 11 · 12

Surface 10 · 11 · 12 (3개 디자인 surface)

기준 BE v0.19.0 / FE v0.20.0 — 2026-06-04. handoff brief §4 정합.

Overview

LinkMusic 은 도메인 한 시스템에 3개의 분리된 디자인 surface 를 갖는다. 같은 토큰을 쓰되 밀도· 정보량·터치타깃을 각자 최적화. ① Binding Constraint (design-brief §2-1) — 분리 자체는 변경 불가.

3 Surface 관계도

Surface 10 — 운영사 백오피스

  • URL: admin.linkmusic.space (현재 apps/admin)
  • 페르소나: 운영사 OPERATOR (4 직무 한 앱 공유)
  • UX 원칙: 효율성 우선 — 대량 작업 · 필터 · 키보드. 정보 밀도 高.
  • 밀도: compact (packages/ui/src/styles/surface-admin.css)
  • 상세: design_handoff_linkmusic/briefs/10-surface-ops-backoffice.md

Surface 11 — 매장 클라이언트 본사 모드

  • URL: space.linkmusic.io/admin/* (신규 앱 apps/space)
  • 페르소나: 본사 관리자 (HQ_MANAGER role) — 실 로그인 + 운영사 임퍼소네이션 도착지. 진짜 본사 기능이 단일 소스로 여기 있으므로, 운영사가 apps/admin 에서 발급한 임퍼소네이션 새 탭이 이 표면으로 도착한다.
  • UX 원칙: 안전성 우선 — 미리듣기 강제 · 즉시 송출 취소 불가 · 큰 확인 step
  • 밀도: comfortable (HQ scale · 15px · apps/space/src/app/globals.css [data-surface="hq"])
  • 임퍼소네이션 빨간 배너: 실 HQ_MANAGER 로그인은 배너 없음. 운영사 임퍼소네이션으로 진입하면 (lm_space_impersonation_session) 빨간 배너 + 60분 카운트다운 + [운영사 백오피스로 돌아가기] 가 항시 고정된다. HQShell 이 impersonation prop 으로 두 모드를 분기.
  • 상세: design_handoff_linkmusic/briefs/11-surface-store-hq-mode.md · design/hq-shared.jsx

Surface 12 — 매장 클라이언트 점장 모드

  • URL: space.linkmusic.io/store/* (apps/space · SPEC #050 layout 가드 + SPEC #064 Classic player 홈 도착)
  • 페르소나: STORE_MANAGER role · 점장 (40~50대 다수)
  • UX 원칙: 단순성 우선 — 3초 룰 · 큰 버튼 · 자가 복구
  • 밀도: comfortable (큰 폰트 · 넓은 터치타깃)
  • 도착한 화면: /store Classic player 홈(#064 — 재생 큐 소비·HTML <audio> 재생/일시정지·이전/다음·진행바·볼륨·곡 끝 자동 다음·큐 소진 refetch·재생 큐 목록·source/빈 상태 안내·[재시작] 자가 복구). 즉시방송·방송템플릿·점장 PL 선택·예약·온보딩·장애복구는 후속 stub/미구현 — Store Player Home
  • 상세: design_handoff_linkmusic/briefs/12-surface-store-mode.md · 시안 design_handoff_linkmusic/design/screens/home-classic.jsx

① Binding Constraints (3 surface 공통)

  • 2-클라이언트 구조 = 운영사 백오피스 + 매장 클라이언트 (본사/점장은 같은 앱에서 URL 분기)
  • 3 surface 분리 = 한 디자인 언어로 뭉치지 말 것. 공통 토큰은 공유, 밀도는 독립
  • 품질 = 정식 출시 레벨 (MVP 아님)
  • 모바일 v1 비대상 (점장 모드만 태블릿 + 긴급 모바일 고려)

v1 구현 우선순위

Surfacev1 상태
10 (운영사 · apps/admin)구현 중 — SPEC #001~#013
11 (본사 모드 · apps/space /admin/*)실 HQ_MANAGER 로그인 + HQShell + getHqMe topbar(본사명·plan·매장수) + 본사 기능 페이지(announcements·commercials·libraries·playlists·stores·support·settings·audit). 운영사 임퍼소네이션 도착지(cross-origin 핸드오프 — apps/admin 발급 → apps/space 새 탭, 빨간 배너+60분 카운트다운). apps/admin /admin/* 은 실 HQ_MANAGER 전용으로 남음
12 (점장 모드 · apps/space /store/*)placeholder(#050) — STORE_MANAGER 로그인 분기 + 가드. 셸·화면(home·즉시방송 등)은 후속

References

  • handoff 00-design-brief.md §4
  • handoff 10/11/12-surface-*.md · design/hq-shared.jsx
  • SPEC #005 (임퍼소네이션) · #006 (frontend bootstrap · 인증) · #050 (매장 클라이언트 apps/space 스캐폴드)
3 페르소나기술 스택