Marketing Landing — /landing (본사·점장 설득 공개 랜딩)
SPEC #079 도입. design_handoff_linkmusic_17 screens/marketing-landing.html 정식 시안 정합 — 본사·점장 설득 마케팅 랜딩으로 재구성. 시각·카피 교체, 동작·라우팅 보존. FE-only · BE 변경 0.
Overview
space.linkmusic.io 접속 시 가장 먼저 만나는 단일 공개 마케팅 랜딩. 대상은
본사 잠재고객(도입 결정자) + 점장 + 기존 로그인 사용자 셋 모두다. 이전의 점장 전용
안내 랜딩(유일 CTA = 로그인)을 대체해, B2B 도입을 설득하는 마케팅 페이지로 재구성했다.
- 주 CTA = 도입 문의 —
mailto:contact@linkmusic.io(제목 프리필 포함). 히어로·FAQ·하단 CTA 밴드 등 여러 곳에 노출. - 보조 진입 = 점장 로그인 — 헤더·하단 CTA·푸터의
<Link href="/login">. 이미 계정이 있는 점장/본사를 셸로 연결.
시안 정합 완료:
design_handoff_linkmusic_17/design/screens/marketing-landing.html정식 시안을 자체완결로 충실 포팅했다. 이 랜딩은 앱 semantic 토큰이 아닌 자체 teal 팔레트를 쓰며, 본문·테마 토글을 client componentmarketing-landing.tsx+ CSS Modulemarketing-landing.module.css에 격리한다(앱 전역 테마/<html>미관여). 카피·alt 는 시안의 한국어 그대로. 시각·카피만 교체하고 동작·라우팅은 100% 보존.
범위: 공개 랜딩 1페이지(헤더 + 히어로 + 문제제기 + 작동방식 3스텝 + 본사 혜택 + 매장 간편성 + 제품 갤러리 + 신뢰 + FAQ + 하단 CTA 밴드 + 푸터). 회원가입·결제 안내·다국어는 범위 밖.
구성
app/landing/page.tsx— Server Component. session 을 보고 인증자 redirect 만 수행한 뒤<MarketingLanding/>를 렌더. 본문 fetch 없음(정적 페이지).app/landing/marketing-landing.tsx—'use client'본문 컴포넌트. 자체 다크/라이트 테마 토글(wrapperdata-theme만 토글,localStorage('lm-landing-theme')영속 —<html>미관여).app/landing/marketing-landing.module.css— 자체 teal 팔레트 CSS Module.- 미들웨어
middleware.tsisPublic()에/landing등록 — 미인증 진입 허용. - 인증 사용자 redirect 는 page(server) 가 책임(미들웨어가 우회시키므로).
제품 스크린샷
실제 제품 캡처 5종(public/landing/*.png)을 사용한다 — hq-dash(본사 대시보드)·
hq-ann(본사 안내방송)·home-classic(점장 플레이어 홈)·store-rec(점장 즉시 방송 녹음)·
onboarding-env(점장 온보딩 환경 점검).
각 캡처는 라이트/다크 2벌(name.png + name-dark.png)로 준비하고, ProductShot
컴포넌트가 두 <img> 를 모두 렌더한 뒤 CSS(.root[data-theme])로 보이는 쪽만 노출한다
(숨은 쪽은 display:none + aria-hidden 으로 SR 도 무시). 테마 토글 시 캡처도 함께 스왑된다.
페이지 구조
| 영역 | 내용 |
|---|---|
헤더 (landing-header) | teal 로고 + “Linkmusic Space” wordmark + 라이트/다크 토글 버튼 + 점장 로그인 ghost 버튼 |
| 히어로 | eyebrow(“프랜차이즈 매장 음악·안내방송 플랫폼”) + h1 “전 매장의 음악과 방송을, 본사가 한곳에서” + 보조 문구 + 주 CTA 도입 문의하기 + 신뢰 포인트 2종 + hq-dash 제품 캡처 |
| 문제제기 | ”왜 필요한가” — 매장마다 제각각·공연권 리스크·번거로운 안내 전달 3카드 |
| 작동방식 3스텝 | 본사가 준비 → 매장 자동 재생 → 필요할 때 즉시 방송 |
| 본사 혜택 | ”본사가 얻는 것” — 일괄 통제·브랜드 일관성·운영 부담↓·즉시/예약/긴급 송출 4카드 + hq-ann 캡처 |
| 매장 간편성 | ”매일 PC만 켜두면 끝” — 음악 자동 재생·즉시 방송·예약 송출·긴급 안내 4기능 + home-classic 캡처 |
| 제품 갤러리 | ”실제 제품 화면” — store-rec·onboarding-env·hq-dash 캡처 갤러리 |
| 신뢰 | ”링크뮤직이 책임집니다” — 적법한 음원·안전 방송 규칙·온보딩 지원 3카드 |
| FAQ | 도입 절차·계정 발급·비용·장비 4문항 native <details> 아코디언 + 도입 상담 mailto 사이드 |
| 하단 CTA 밴드 | ”매장 음악, 본사가 직접 챙기세요” + 주 CTA 도입 문의하기 + “이미 계정이 있으신가요? 점장 로그인” |
푸터 (landing-footer) | teal 로고 + “Copyright 2026. Chilloen inc. all rights reserved.” + 문의 · 점장 로그인 |
긴급 안내방송은 surface ① FR-2.8 민감 기능이라 “안전·고지 의무 한정” 으로 명시한다(마케팅 남용 차단). 카피는 시안 문구 그대로.
인증 분기 (§D10·D11)
- 미인증 (
session.accessToken부재): 정상 노출. 로그인 강제 X. - 인증된 HQ_MANAGER:
/admin으로 server-sideredirect(). - 인증된 STORE_MANAGER:
/store로 server-sideredirect(). - 인증된 알 수 없는 role(OPERATOR · 기타):
/login으로 fail-closed(defense-in-depth).
session.role 은 login / refresh / change-password 핸들러가 세션에 저장한다
(lib/session.ts SessionData.role). /landing page 는 본문 fetch 가 없는 정적 페이지라
refreshIfNeeded·me 호출 없이 cookie 만 보고 분기한 뒤, 미인증일 때만 client 본문을 렌더한다.
스타일 정책
- 자체완결 teal 팔레트 — 이 랜딩은 앱 전역 semantic 토큰이 아닌 CSS Module
(
marketing-landing.module.css) 안의 자체 teal 변수를 쓴다. 앱 테마/<html>를 건드리지 않는다. - 자체 다크/라이트 토글 — wrapper
data-theme만 토글하고localStorage('lm-landing-theme')로 영속. 제품 캡처는ProductShot가 테마에 맞춰 라이트/다크 자산을 스왑한다. - 인라인 SVG 아이콘(시안 모양을 JSX 규칙으로 변환 — className·camelCase 속성). 외부 아이콘 라이브러리 의존 없음.
- 반응형 —
wrap컨테이너 + 그리드. 모바일에서 히어로·갤러리는 스택, 넓은 폭에서 다열 정렬.
a11y
- heading 계층 — h1(히어로) → h2(각 섹션 제목) → h3(카드). 헤더·본문·푸터는 시맨틱 landmark
(
<header>·<main>·<footer>). - 주 CTA(도입 문의)는
mailto:<a>, 점장 로그인 진입은<Link href="/login">(next/link) — 라우팅 이동이므로 link 시맨틱. - 테마 토글 버튼은
aria-label="라이트/다크 전환". 장식 SVG·숨은 다크 캡처는aria-hidden.
미구현 / 후속
- F2 다국어 (한국어 + 영어 토글).
- F3 SEO 메타 (og:image · twitter card · robots).
- F4 운영사·본사용 별도 랜딩 (별 도메인 또는 별 SPEC).
References
- SPEC #079 — 본 문서의 단일 출처.
- 시안: workspace parent dir
design_handoff_linkmusic_17/design/screens/marketing-landing.html(정합 대상) - 요청서:
design_handoff_linkmusic/briefs/requests/store-landing.md§3 apps/space/src/app/landing/page.tsx·apps/space/src/app/landing/marketing-landing.tsxapps/space/src/app/landing/marketing-landing.module.css·apps/space/src/app/landing/page.test.tsxapps/space/public/landing/*.png(제품 캡처 라이트/다크 5종)apps/space/middleware.ts(/landingpublic 등록)