[실습 2] 하이엔드 스크롤리텔링 랜딩페이지 만들기: 브랜드 기획 & 동적 UI 생성 (8편)

"트렌디하지 못했던 음료 ' Pine Bud Eye ', 바이브 코딩으로 애플 스타일 프리미엄 에코 웰니스 브랜드로 재탄생시키다!"

 

진짜 실력은 실전 가상 프로젝트를 수행해 볼 때 완성됩니다. 이번 실습 프로젝트의 주제는 추억의 식음료 브랜드인 **'Pine Bud Eye'**을 2030 세대를 겨냥한 힙한 프리미엄 웰니스 스파클링 에코 음료로 리브랜딩하고, 화면 스크롤에 반응하는 **스크롤리텔링(Scrollytelling) 랜딩페이지**를 만드는 것입니다.

 

오늘 [바이브 코딩 마스터 시리즈 8편]에서는 브랜드 컨셉 기획 프롬프트 작성 노하우부터, 스크롤 인터랙션 반응형 동적 UI/UX 컴포넌트를 AI로 순식간에 구현하는 기초 과정을 세세히 알아보겠습니다.

🚀 [바이브 코딩 마스터 시리즈 1~10편 목차]

• 🔹 1회차: 코딩의 패러다임이 바뀐다, 바이브 코딩이란? (필수 용어 설명)
• 🔹 2회차: 바이브 코딩을 완성하는 강력한 기술 스택 (Claude, Cursor, Next.js 등)
• 🔹 3회차: 상상하는 모든 것, 바이브 코딩으로 어디까지 가능할까? (웹앱, 자동화)
• 🔹 4회차: AI의 잠재력을 200% 끌어내는 바이브 코딩 프롬프트 스킬
• 🔹 5회차: 실무 현장에 바이브 코딩 도입하기: 기획부터 환경 세팅까지
• 🔹 6회차: 실무 현장에 바이브 코딩 도입하기: 트러블슈팅과 보안 검증
• 🔹 7회차: [실습 1] 내 PC에 Claude Code CLI 환경 구축 및 첫 스크립트 작성
• 📌 8회차: [실습 2] 하이엔드 스크롤리텔링 랜딩페이지 만들기 (기초편) [현재글]
• 🔹 9회차: [실습 3] 하이엔드 스크롤리텔링 랜딩페이지 만들기 (심화 & 디자인)
• 🔹 10회차: 완성된 프로젝트 배포 및 블로그스팟 커스텀 도메인 수익화 전략

📌 이 글의 핵심 목차

• 1. 프로젝트 기획: ' Pine Bud Eye ' 브랜드 리브랜딩 컨셉 설정
• 2. 랜딩페이지 와이어프레임 구조 설계 (Hero, Story, Feature, CTA)
• 3. AI에게 동적 UI/UX 컴포넌트 생성을 지시하는 프롬프트 작성
• 4. Framer Motion 스크롤 애니메이션 기초 연동 실습
• 자주 묻는 질문 (FAQ)

1. 프로젝트 기획: 'PINE BUD' 브랜드 리브랜딩 컨셉 설정

우리의 목표는 Pine Bud Eye 브랜드에 **"Pine Bud Sparkling Therapy"**라는 웰니스 무드를 입히는 것입니다.

🌿 브랜드 Vibe 정의

- Main Color: Deep Forest Green (`#1b4332`), Pine Pastel Mint (`#d8f3dc`)
- Mood: 애플 웹사이트 스타일의 미니멀리즘, 청량감, 프리미엄 3D 캔 감성
- Typography: 세련된 'Pretendard' 및 영문 'Outfit' 폰트 조합

2. 랜딩페이지 와이어프레임 구조 설계 (Hero, Story, Feature, CTA)

스크롤 흐름에 따라 사용자의 몰입감을 최대로 끌어올릴 4단계 섹션을 설계합니다.

1. Hero Section: "상쾌함의 새로운 정점" 웅장한 헤드라인과 스크롤시 회전하는 메인 캔 비주얼
2. Brand Story Section: 스크롤 내림에 따라 텍스트가 서서히 선명해지는 Fade-In 효과
3. Key Features Section: 솔싹 추출물 100% 스파클링 성분 카드 3종 인터랙티브 배치
4. CTA (Call to Action): 사전 예약 및 구매하기 파스텔 모달창 버튼

3. AI에게 동적 UI/UX 컴포넌트 생성을 지시하는 프롬프트 작성

Cursor Composer 대화창에 입력할 구체적인 프롬프트 작성 예시입니다.

💬 실전 지시 프롬프트:
"Next.js와 Tailwind CSS를 사용해서 ' Pine Bud Eye ' 리브랜딩 히어로 컴포넌트(`HeroSection.tsx`)를 만들어줘.
- 배경은 딥 포레스트 그린 그라데이션 적용
- 메인 타이틀: '머릿속까지 맑아지는 웰니스 스파클링, PINE BUD'
- 스크롤을 내릴 때 헤드라인 폰트가 부드럽게 커지는 Framer Motion `useScroll` 애니메이션을 적용해 줘."

4. Framer Motion 스크롤 애니메이션 기초 연동 실습

AI가 생성해 준 `framer-motion` 스크롤 트리거 코드를 확인해 봅시다. useScroll과 useTransform 훅을 활용하여 스크롤 위치에 따라 투명도와 Y축 위치가 반응합니다.

const { scrollYProgress } = useScroll();
const opacity = useTransform(scrollYProgress, [0, 0.3], [1, 0]);
const scale = useTransform(scrollYProgress, [0, 0.3], [1, 0.8]);

자주 묻는 질문 (FAQ)

Q 애니메이션 라이브러리를 쓸 때 스크롤이 버벅거리면 어떻게 하나요?

CSS `will-change: transform` 속성을 부여하거나, AI에게 "GPU 가속(hardware acceleration)을 사용하는 Framer Motion 옵션으로 최적화해 줘"라고 요청하면 해결됩니다.

이어지는 9회차 포스팅에서는 [실습 3] 애플 웹사이트급 부드러운 스크롤 애니메이션 심화 구현 및 Midjourney 3D 시각 자산 연동 방법을 집중 다뤄보겠습니다!