Landing Scroll Story

Landing Scroll Story는 서비스 URL, README, 소개글로 바로 실행되는 Next.js 랜딩 사이트를 통째로 만들어 줘요. 질문은 최대 3개이고, 실행하고 배포할 수 있는 프로젝트 zip을 받아요.

템플릿 2종

Light (SEO 우선)

• 움직이는 막대의 어두운 히어로, 떠 있는 알약 메뉴, 벤토 카드, 스크롤로 고정되는 쇼케이스, 이용 방법, FAQ
• 상세 가이드 페이지, FAQPage와 WebSite JSON-LD
• 운영 URL을 설정하기 전까지 sitemap과 robots는 닫혀 있어요(Preview 배포는 절대 색인되지 않아요)

Cinematic (비주얼 우선)

• GSAP + ScrollTrigger + Lenis 연출
• 히어로가 벤토 그리드로 줄어들고, 스크롤에 따라 움직이는 Lottie 인트로, 값 카드, 마퀴 쇼케이스, 커튼 푸터가 이어져요
• 모바일 대응 레이아웃 포함

이렇게 동작해요

1. URL, README, 또는 짧은 설명을 주세요.
2. light 또는 cinematic을 고르세요. 스킬이 하나를 추천하고 이유를 설명해요.
3. 문구를 채우고, 브랜드 색을 한 줄로 설정하고, 빌드와 타입 검사를 하고, 데스크톱과 모바일 폭을 확인해요.
4. 실행, 문구 수정, 배포(Vercel, Cloudflare, Search Console) 메모가 담긴 프로젝트 zip을 받아요.

결과 예시

아래 스크린샷은 이 스킬로 만든 가상의 샘플 서비스("Brewly") 화면이에요.

알아두세요

• cinematic 템플릿의 아트워크는 코드로 만든 단순한 도형이에요. 완성도를 높이려면 public/landing/의 파일을 직접 만든 아트워크로 바꾸세요.
• cinematic 템플릿은 여러 섹션을 하이드레이션 이후에 그려서 서버 HTML에 본문 대부분이 없어요. 검색 순위가 중요하면 light를 고르세요.
• 개발 환경에서 데스크톱과 390px 너비로 확인했어요. 실기기와 Safari 테스트는 포함되지 않아요.
• 문구의 품질은 원본 자료에 달려 있어요. 스킬은 수치, 고객, 수상 내역을 지어내지 않아요.

라이선스와 출처 표기

• cinematic 템플릿은 SEED Design System(github.com/daangn/seed-design)의 랜딩 페이지 코드를 바탕으로 해요. Apache-2.0, Copyright 2025 주식회사 당근마켓. 라이선스 전문과 고지는 전달되는 프로젝트에 포함돼요. SEED와 당근의 로고, 이름, 미디어는 포함되지 않아요. 이 제품은 당근과 제휴, 후원, 보증 관계가 없어요.
• GSAP는 무료 Standard License로 사용해요. Pretendard 폰트는 SIL OFL 1.1이에요.