프로젝트 배경
1) 문제점
- 기존 나비엔 브랜드 캠페인은 오프라인 중심이었고, MZ세대를 타깃으로 하는 온라인 몰입형 콘텐츠가 부족했음
- 감성 마케팅을 위한 독립 웹페이지의 개발 역량이 내부에 부재했음
2) 프로젝트 목표
- 브랜드 정체성을 반영한 온라인 굿즈몰과 타로점 체험 페이지를 구축해 사용자 참여를 유도
- 캠페인 전용 마이크로사이트로 유입을 늘리고, 마케팅 효과를 극대화
3) 주안점
- 디자인 요소가 강조된 사이트의 구조를 무너뜨리지 않고 정교하게 개발
- 타로점 결과 등 동적 콘텐츠의 사용자 몰입도를 높이는 구현 방식 설계
- HTML, CSS, JavaScript, PHP 기반으로 안정적인 유지보수 가능한 구조 구성
- 기존 나비엔 브랜드 캠페인은 오프라인 중심이었고, MZ세대를 타깃으로 하는 온라인 몰입형 콘텐츠가 부족했음
- 감성 마케팅을 위한 독립 웹페이지의 개발 역량이 내부에 부재했음
2) 프로젝트 목표
- 브랜드 정체성을 반영한 온라인 굿즈몰과 타로점 체험 페이지를 구축해 사용자 참여를 유도
- 캠페인 전용 마이크로사이트로 유입을 늘리고, 마케팅 효과를 극대화
3) 주안점
- 디자인 요소가 강조된 사이트의 구조를 무너뜨리지 않고 정교하게 개발
- 타로점 결과 등 동적 콘텐츠의 사용자 몰입도를 높이는 구현 방식 설계
- HTML, CSS, JavaScript, PHP 기반으로 안정적인 유지보수 가능한 구조 구성
프로젝트 성과
높은 사용자 참여율 달성
- 타로 콘텐츠의 흥미성과 인터랙션으로 평균 페이지 체류 시간 증가
- 이벤트 시작 일주일 내 수천 건의 타로 결과 조회 기록
- 이벤트 시작 일주일 내 수천 건의 타로 결과 조회 기록
브랜드 인지도 향상 기여
- 나비엔의 감성 캠페인 이미지 강화에 기여
- SNS 자발적 공유 유도 및 바이럴 확산
- SNS 자발적 공유 유도 및 바이럴 확산
캠페인 페이지 완성도 향상
- 디자인 요소를 고려한 정밀한 마크업 및 스크립트 구현으로 시각적 완성도 극대화
- 다양한 해상도에 대응한 반응형 개발로 접근성 확보
- 다양한 해상도에 대응한 반응형 개발로 접근성 확보
유연한 콘텐츠 관리 구조 제공
- PHP 기반으로 결과 메시지, 이미지 등의 콘텐츠 수정이 용이하도록 구조 설계
- 향후 유사 캠페인에 재활용 가능한 코드 기반 구축
- 향후 유사 캠페인에 재활용 가능한 코드 기반 구축
클라이언트 만족도 제고
- 일정 내 요청사항을 반영하며 안정적인 결과물 제공
- 전반적인 마케팅 효과를 견인한 프로젝트로 내부 기획팀의 긍정적 피드백 확보
- 전반적인 마케팅 효과를 견인한 프로젝트로 내부 기획팀의 긍정적 피드백 확보
핵심 기능
타로 카드 선택 및 결과 페이지 출력
- 사용자가 원하는 카드 2장을 선택하면, 카드별 결과를 기반으로 맞춤 메시지 출력
단꿈 굿즈 상점 소개 및 CTA 버튼 연결
- 캠페인과 연계된 단꿈 굿즈들을 소개하고, 외부 쇼핑몰 및 이벤트 페이지로 연결되는 버튼 제공
랜딩형 구조로 구성된 스크롤 인터랙션
- 사용자의 스크롤에 따라 콘텐츠가 순차적으로 등장하는 구조로 설계하여 몰입감 있는 경험 제공
PHP 기반 결과 관리 및 통계 수집 기능
- 선택된 타로 카드 및 사용자 이용 데이터를 간단히 저장/분석할 수 있도록 PHP 연동 처리
모바일 중심 반응형 UI 지원
- 모바일 사용자 타깃에 맞춰 모든 기능이 모바일 최적화되도록 CSS 및 레이아웃 구성
진행 단계
요구사항 분석 및 기능 정의
2022.10.
- 캠페인 기획안 기반으로 사용자 흐름 및 기능 범위 파악
- 디자인 시안에 맞춰 개발 요소 및 구현 방식 정리
- 디자인 시안에 맞춰 개발 요소 및 구현 방식 정리
개발환경 구축 및 프론트엔드 구조 설계
2022.10.
- HTML/CSS/JavaScript 기반 구조 설계
- PHP를 활용한 결과 연동 구조 및 기본 서버 연동 환경 구성
- PHP를 활용한 결과 연동 구조 및 기본 서버 연동 환경 구성
기능 구현 및 인터랙션 개발
2022.11.
- 타로 카드 선택, 결과 출력 등 핵심 기능 개발
- 애니메이션 효과 및 사용자 경험 강화 요소 적용
- 애니메이션 효과 및 사용자 경험 강화 요소 적용
테스트 및 수정 피드백 반영
2022.12.
- 다양한 디바이스 테스트 및 브라우저 호환성 확인
- 클라이언트 피드백 수렴 후 기능 개선 및 오류 수정
- 클라이언트 피드백 수렴 후 기능 개선 및 오류 수정
최종 배포 및 런칭 지원
2023.01.
- 캠페인 시작 일정에 맞춰 서버 반영 및 배포
- 안정성 모니터링 및 이슈 발생 시 대응 지원
- 안정성 모니터링 및 이슈 발생 시 대응 지원
프로젝트 상세
1) 포트폴리오 소개
- 브랜드 굿즈를 판매하고, 타로점 체험 콘텐츠를 제공하는 이커머스 기반 마케팅 사이트 개발
- 주요 타깃은 브랜드 팬층 및 감성 콘텐츠에 관심 있는 20~30대 사용자
2) 작업 범위
- HTML, CSS, JavaScript, PHP를 활용한 프론트엔드 및 백엔드 퍼블리싱
- 디자인 시안 기반 페이지 마크업, 상점 기능 구현, 타로점 기능 연동
3) 주요 업무
- 상품 리스트 및 상세 페이지 구현
- 타로점 결과 랜덤 출력 로직 구성
- 주문/신청 폼 연동 및 데이터 처리
- 반응형 UI 대응
4) 주안점
- 클라이언트가 제공한 디자인 시안에 맞춘 정교한 마크업
- 브랜드 감성 유지를 위한 프론트 인터랙션 구현
- 타로 기능의 안정적 연동 및 사용자 경험 고려한 로딩 처리
- 브랜드 굿즈를 판매하고, 타로점 체험 콘텐츠를 제공하는 이커머스 기반 마케팅 사이트 개발
- 주요 타깃은 브랜드 팬층 및 감성 콘텐츠에 관심 있는 20~30대 사용자
2) 작업 범위
- HTML, CSS, JavaScript, PHP를 활용한 프론트엔드 및 백엔드 퍼블리싱
- 디자인 시안 기반 페이지 마크업, 상점 기능 구현, 타로점 기능 연동
3) 주요 업무
- 상품 리스트 및 상세 페이지 구현
- 타로점 결과 랜덤 출력 로직 구성
- 주문/신청 폼 연동 및 데이터 처리
- 반응형 UI 대응
4) 주안점
- 클라이언트가 제공한 디자인 시안에 맞춘 정교한 마크업
- 브랜드 감성 유지를 위한 프론트 인터랙션 구현
- 타로 기능의 안정적 연동 및 사용자 경험 고려한 로딩 처리



