← 포트폴리오 목록
홀+배달 결합 주점 프랜차이즈 가맹 모집 랜딩페이지
홀 영업과 배달을 하나의 주방에서 결합 운영하는 주점 프랜차이즈의 가맹 모집 랜딩페이지를, 설득형 카피라이팅과 데이터 스토리텔링 중심으로 React + TypeScript 기반 단일 스크롤 구조로 설계·구현합니다.
카운트업 애니메이션 동기화 엔진 구현useInView 훅과 requestAnimationFrame으로 스크롤 진입 시점에 맞춰 다중 카운터를 동기화하는 로직을 설계합니다.
실시간 수익 계산 로직 설계투자금·기간·비중 3개 변수를 조합하는 손익분기 계산 공식을 useMemo로 메모이제이션해 즉시 재계산 구조를 구현합니다.
폼 메타데이터 수집 파이프라인 구축React Hook Form 제출 이벤트에 유입 경로·체류 시간 메타데이터를 결합해 API로 전송하는 파이프라인을 설계합니다.
Overview
프로젝트 개요
홀 영업과 배달을 하나의 주방에서 결합 운영하는 주점 프랜차이즈의 가맹 모집 랜딩페이지를, 설득형 카피라이팅과 데이터 스토리텔링 중심으로 React + TypeScript 기반 단일 스크롤 구조로 설계·구현합니다. 초기 투자금 애니메이션 카운터, 참여형 수익 계산기, 상담신청 폼을 하나의 흐름으로 연결해 예비창업자(30대 후반~40대 초반 맞벌이 부부)가 숫자로 직접 확인하며 상담까지 자연스럽게 이어지도록 설계합니다.
요구사항 정의
프로젝트 핵심 과제
프로젝트 진행 시 해결한 핵심 기술 과제입니다.
홀 매출과 배달 매출이 혼합된 손익 구조를 하나의 계산기 로직으로 표현하는 수식 설계가 필요합니다
카운트업 애니메이션과 차트 렌더링이 동시에 스크롤 트리거되는 상황에서 프레임 드랍 없이 처리되는 렌더링 구조 설계가 필요합니다
맞벌이 부부 타겟의 상반된 우려(투자 부담 vs 운영 병행)를 하나의 카피 흐름 안에서 순서대로 해소하는 콘텐츠 구조 설계가 필요합니다
모바일 세로 스크롤에서 데이터 시각화 차트의 가독성을 유지하면서 정보 밀도를 낮추는 반응형 레이아웃 설계가 필요합니다
핵심 기능 1
설득형 히어로 및 핵심 브랜드 메시지
첫 화면 3초 안에 핵심 가치를 전달하도록 헤드라인 '낮엔 홀 손님, 밤엔 배달까지 — 하나의 주방으로 두 개의 매출을 만듭니다'와 서브헤드 '초기 투자 부담을 낮춘 홀+배달 결합형 주점
핵심 기능 2
초기 투자금 애니메이션 카운터 및 수익 데이터 시각화
'수익성 증명' 섹션의 헤드라인 '창업의 수익성을 숫자로 증명하는 합리적인 선택'과 함께 '초기 투자금', '표준 평수 기준 창업 비용'
핵심 기능 3
참여형 수익 계산기
예비창업자가 초기 투자금, 예상 운영 기간, 홀/배달 비중을 슬라이더와 입력 필드로 직접 조정하면 '예상 손익분기 도달 시점'과 '월 예상 순수익 구간'을 실시간으로 계산해 보여주는 인터랙티브 계산기입니다
핵심 기능 4
상담신청 폼 및 모바일 우선 반응형 최적화
'지금 상담 신청하면, 담당자가 1:1로 창업 조건을 함께 검토해드립니다'라는 안내 카피와 함께 이름·연락처·희망 지역·희망 평수를 입력받는 상담신청 폼을 배치하고, 제출 시 '상담 신청이 접수되었습니다
구현 과정
프로젝트 진행 단계
STEP 1
카피 톤앤매너 및 정보 구조 설계
타겟 페르소나 분석, 헤드라인/서브헤드/CTA 카피 초안 작성, 섹션별 정보 구조(IA) 설계
STEP 2
히어로·스탯 섹션 프론트엔드 구현
React 컴포넌트 구조 설계, Framer Motion 애니메이션·Chart.js 시각화 8종 구현
STEP 3
계산기 및 상담신청 폼 API 연동
Express 기반 계산 로직·폼 제출 API 5개 구현, Prisma로 상담 데이터 스키마 설계
STEP 4
반응형 QA 및 통합 테스트
375/768/1440px 3개 뷰포트 크로스 브라우저 검증, 폼 유효성·계산기 엣지 케이스 테스트 진행
프로젝트 성과
카운트업 애니메이션 동기화 엔진 구현useInView 훅과 requestAnimationFrame으로 스크롤 진입 시점에 맞춰 다중 카운터를 동기화하는 로직을 설계합니다.
실시간 수익 계산 로직 설계투자금·기간·비중 3개 변수를 조합하는 손익분기 계산 공식을 useMemo로 메모이제이션해 즉시 재계산 구조를 구현합니다.
폼 메타데이터 수집 파이프라인 구축React Hook Form 제출 이벤트에 유입 경로·체류 시간 메타데이터를 결합해 API로 전송하는 파이프라인을 설계합니다.
모바일 우선 반응형 타이포 시스템 설계clamp 기반 유동 타이포 스케일로 375px~1440px 전 구간에서 헤드라인 줄바꿈이 깨지지 않는 구조를 구현합니다.
Review
기술적 주안점
- 스크롤 인터랙션과 유동 타이포 스케일을 결합해 모바일 세로 화면에서도 헤드라인이 첫 화면 안에서 완결되는 구조를 구현합니다
- 카운트업 애니메이션과 차트 시각화를 뷰포트 진입 트리거로 동기화해 데이터 스토리텔링 흐름을 구현합니다
- 입력 조건에 따라 손익분기 시점과 순수익 구간을 즉시 재계산하는 클라이언트 사이드 계산 엔진을 구현합니다
