장사왕 스프린트 대시보드

테마

Story: 랜딩페이지 전면 개편 ​

메타 ​

항목값
Story IDE-01-S-01
EpicE-01 랜딩/GTM
상태ready-for-dev
우선순위P0
규모L
담당 개발자수민 (FE)

사용자 스토리 ​

As a 신규 방문자,
I want 광고 분석 중심의 랜딩페이지를 보고 싶다,
So that 장사왕이 광고 최적화를 도와주는 서비스임을 이해하고 가입할 수 있다.

수락 기준 (Acceptance Criteria) ​

AC-01: 히어로 섹션 A/B 테스트 ​

항목내용
Given사용자가 sellerking.io에 접속했을 때
When페이지가 로드되면
ThenHackle에 의해 A/B 버전 중 하나가 표시된다
A: "쿠팡 광고, 뭘 고쳐야 할지 모르겠다면?"
B: "광고비 줄이고, 순이익 늘리고"

AC-02: 가치 블록 3개 표시 ​

항목내용
Given사용자가 히어로 섹션을 지나 스크롤했을 때
When가치 블록 영역에 도달하면
Then3개 가치 블록이 순서대로 표시된다
1. 광고 상태 진단 (Status Badge)
2. 순이익 번역 (ROAS → 100원당 순이익)
3. 액션 가이드 (입찰가 조정 예시)

AC-03: Social Proof A/B 테스트 ​

항목내용
Given사용자가 Social Proof 섹션에 도달했을 때
When섹션이 표시되면
ThenHackle에 의해 A/B 버전 중 하나가 표시된다
A: "장사왕 셀러 10명 중 9명이 광고에서 순이익을 내고 있어요"
B: "장사왕과 함께한 셀러 절반 이상이 순이익이 개선됐어요"

AC-04: 정산 분석 연결 섹션 ​

항목내용
Given사용자가 Social Proof 다음 섹션에 도달했을 때
When정산 분석 연결 섹션이 표시되면
Then"정산 분석 알아보기" 링크가 /settlement로 연결된다

AC-05: FAQ 섹션 ​

항목내용
Given사용자가 FAQ 섹션에 도달했을 때
When아코디언 항목을 클릭하면
Then해당 FAQ 내용이 펼쳐지고 GA4 이벤트가 발생한다

AC-06: GNB 메뉴 변경 ​

항목내용
Given사용자가 페이지에 접속했을 때
WhenGNB가 표시되면
Then"광고 분석

AC-07: CTA 클릭 시 가입 페이지 이동 ​

항목내용
Given사용자가 CTA 버튼을 클릭했을 때
When히어로 CTA 또는 Final CTA 클릭 시
Then가입 페이지로 이동하고 GA4 이벤트가 발생한다

AC-08: 반응형 디자인 ​

항목내용
Given사용자가 모바일(375px)로 접속했을 때
When페이지가 로드되면
Then모든 섹션이 모바일에 최적화되어 표시된다

태스크 분해 ​

Task 1: 히어로 섹션 AC-01, AC-07 ​

  • [ ] 1.1: 히어로 섹션 컴포넌트 생성
  • [ ] 1.2: Hackle A/B 테스트 연동 (헤드라인)
  • [ ] 1.3: CTA 버튼 + GA4 이벤트 연동
  • [ ] 1.4: 제품 스크린샷 영역 (Surface Layer)

Task 2: 가치 블록 AC-02 ​

  • [ ] 2.1: 가치 블록 1: 광고 상태 진단 (Status Badge 비주얼)
  • [ ] 2.2: 가치 블록 2: 순이익 번역 (Before/After 비주얼)
  • [ ] 2.3: 가치 블록 3: 액션 가이드 (예시 UI)
  • [ ] 2.4: 스크롤 도달 시 GA4 이벤트 (view_value_block)

Task 3: Social Proof 섹션 AC-03 ​

  • [ ] 3.1: Social Proof 컴포넌트 생성
  • [ ] 3.2: Hackle A/B 테스트 연동 (메시지)
  • [ ] 3.3: 정적 데이터 표시 (하드코딩)

Task 4: 정산 분석 연결 섹션 AC-04 ​

  • [ ] 4.1: 정산 분석 연결 섹션 컴포넌트
  • [ ] 4.2: /settlement 링크 연결

Task 5: FAQ 섹션 AC-05 ​

  • [ ] 5.1: 아코디언 컴포넌트 생성
  • [ ] 5.2: FAQ 콘텐츠 작성 (3~5개)
  • [ ] 5.3: 확장 시 GA4 이벤트 (expand_faq)

Task 6: GNB 변경 AC-06 ​

  • [ ] 6.1: GNB 메뉴 구조 변경
  • [ ] 6.2: 모바일 햄버거 메뉴 업데이트
  • [ ] 7.1: Final CTA 섹션
  • [ ] 7.2: Footer 업데이트 (필요 시)

Task 8: 반응형 & 최적화 AC-08 ​

  • [ ] 8.1: 모바일 반응형 (375px)
  • [ ] 8.2: 이미지 lazy loading
  • [ ] 8.3: WebP 포맷 적용

Task 9: 테스트 & QA ​

  • [ ] 9.1: A/B 테스트 동작 확인
  • [ ] 9.2: GA4 이벤트 검증
  • [ ] 9.3: 크로스 브라우저 테스트
  • [ ] 9.4: Lighthouse 성능 체크

Dev Notes ​

아키텍처 패턴 ​

항목내용
사용할 패턴Next.js 정적 페이지 + Hackle SDK
참고 구현기존 랜딩페이지 구조
피해야 할 것불필요한 클라이언트 사이드 로직

영향 받는 소스 트리 ​

sellerking-landing-amplify/
├── pages/
│   └── index.tsx                # 전면 개편
├── components/
│   ├── Hero.tsx                 # 🆕 신규 생성
│   ├── ValueBlock.tsx           # 🆕 신규 생성
│   ├── SocialProof.tsx          # 🆕 신규 생성
│   ├── SettlementLink.tsx       # 🆕 신규 생성
│   ├── FAQ.tsx                  # 🆕 신규 생성
│   └── GNB.tsx                  # 수정
└── lib/
    └── hackle.ts                # A/B 테스트 설정

기술 스택 ​

항목사용 기술버전
프레임워크Next.js기존 버전 유지
A/B 테스트Hackle기존 사용 중
분석GA4기존 사용 중

충돌 감지 ​

항목상태설명
기존 코드 충돌⚠️ 주의기존 랜딩 전면 교체
API 계약 변경✅ 없음-
DB 스키마 변경✅ 없음-
환경 변수 변경✅ 없음Hackle 기존 설정 사용

References ​

출처경로/링크참조 섹션
Epic Spec../epic-specs/E-01-landing-gtm.md전체
디자인TBD (봉희님 작업 후)-
Hackle 문서https://docs.hackle.ioA/B 테스트

이벤트 로깅 ​

이벤트명트리거파라미터GA4 여부
view_landing페이지 진입{variant: 'A'/'B'}✅
click_hero_cta히어로 CTA 클릭{variant: 'A'/'B'}✅
view_value_block가치 블록 스크롤 도달{block_number: 1/2/3}✅
click_final_ctaFinal CTA 클릭-✅
expand_faqFAQ 아코디언 확장{question_id: string}✅

핸드오프 전 체크리스트 ​

문맥 & 요구사항 ​

  • [x] 사용자 스토리가 명확한가?
  • [x] 수락 기준이 Given-When-Then 형식인가?
  • [x] 모든 엣지 케이스가 정의되었는가?

재해 예방 ​

  • [x] 기존 코드에 유사 기능 확인했는가?
  • [x] 충돌 감지 항목에 ⚠️ 설명이 있는가?
  • [x] 라이브러리 버전 호환성 확인했는가?

AI Agent 최적화 ​

  • [x] Dev Notes가 충분히 상세한가?
  • [x] References가 정확한가?
  • [x] 태스크 분해가 구체적인가?

최종 점검 ​

  • [x] 이벤트 로깅이 정의되었는가?
  • [x] 상태가 ready-for-dev로 설정되었는가?

검증 결과: ✅ PASS 검증일: 2026-01-20

생성일: 2026-01-20
마지막 수정: 2026-01-20

장사왕 Product Team

© 2026 장사왕