1) 문제점
- 프랑스 시장에서 비비고 라면 브랜드 인지도가 낮아 효과적인 마케팅 채널 부재
- 기존 일방향 광고 방식으로는 MZ세대 소비자 참여 유도가 어려움
- 온라인 마케팅 캠페인 성과 측정 및 고객 데이터 수집 체계 미흡
- 소셜미디어 바이럴 확산을 위한 공유 콘텐츠 부족

2) 프로젝트 목표
- 브랜드 인게이지먼트 강화: 인터랙티브 성격 테스트를 통해 소비자 참여형 마케팅 구현
- 제품-소비자 연결: 성격 유형별 라면 캐릭터 매칭으로 제품 친밀도 향상
- 바이럴 확산: SNS 공유 기능을 통한 자발적 브랜드 노출 확대
- 구매 전환 유도: 쿠폰 발급 시스템을 통한 실제 구매 연결
- 데이터 기반 마케팅: 테스트 결과 및 방문자 통계 수집으로 소비자 인사이트 확보

3) 주안점
- 프랑스어 완전 로컬라이즈를 통한 현지 소비자 친화적 UX 제공
- 모바일 최적화로 SNS 유입 사용자의 이탈률 최소화
- 부드러운 애니메이션과 캐릭터 비주얼로 브랜드 호감도 상승
- 이메일 기반 쿠폰 시스템으로 마케팅 활용 가능한 고객 DB 구축
- 관리자 대시보드를 통한 실시간 캠페인 성과 모니터링

<프로젝트 개요>
CJ 비비고 프랑스 시장 마케팅 캠페인을 위한 인터랙티브 성격 테스트 마이크로사이트를 개발했습니다. 사용자가 8개의 질문에 답하면 MBTI 기반 2축 분류 시스템(E/I, P/J)을 통해 4가지 라면 캐릭터(CHI-CHEE, MAPPEE, DAREE, JJANEE) 중 하나로 매칭되며, 해당 캐릭터에 맞는 비비고 라면 제품 정보와 할인 쿠폰을 제공합니다.

<기술 스택 및 아키텍처>
프론트엔드는 Next.js 14 App Router와 React 18, TypeScript를 기반으로 SPA 형태로 구현했습니다. 상태 관리는 Zustand를 활용하여 퀴즈 진행상황을 로컬 스토리지에 저장함으로써 브라우저 새로고침 시에도 진행상황이 유지되도록 했습니다. 백엔드는 Next.js API Routes로 서버리스 API를 구축하고, Supabase(PostgreSQL)를 연동하여 테스트 결과 통계와 쿠폰 발급 이력을 관리합니다. 이메일 발송은 Resend API를 활용하여 캐릭터별 맞춤 HTML 템플릿으로 쿠폰을 자동 발송합니다.

<주요 기능 구현>
성격 테스트는 E/I(외향/내향), P/J(인식/판단) 2축 분류 알고리즘을 구현하여 4가지 결과 유형으로 분류합니다 결과 페이지는 동적 라우팅(/result/[type])으로 캐릭터별 맞춤 콘텐츠를 제공하며, Vercel OG를 활용해 소셜 미디어 공유 시 캐릭터별 동적 미리보기 이미지를 생성합니다. SNS 공유는 Web Share API 기반 네이티브 공유와 WhatsApp, Threads 직접 링크를 지원하고, 쿠폰 시스템은 이메일 중복 검증을 통해 1인 1쿠폰 정책을 적용했습니다. 관리자 대시보드에서는 실시간 테스트 통계, 캐릭터별 분포, 일별 방문자 추이, Referrer 분석 기능을 제공합니다.

<기술적 이슈 및 해결>
모바일 전용 서비스 특성상 iOS Safe Area 대응과 터치 인터랙션 최적화가 필요했으며, 데스크톱 접속 시에는 QR코드를 제공하여 모바일 유도 UX를 구현했습니다. Motion(Framer Motion) 라이브러리로 페이지 전환, 카드 슬라이드, 캐릭터 인터랙션 등 부드러운 애니메이션을 적용하여 사용자 경험을 향상시켰습니다. 이미지는 WebP 포맷과 Next.js Image 컴포넌트를 활용해 성능을 최적화했고, X-Frame-Options 헤더 설정과 입력값 검증으로 보안을 강화했습니다. 프랑스어 완전 로컬라이즈를 통해 현지 소비자 친화적인 UX를 제공합니다.