프로젝트 배경
1) 문제점
- 멀티 플랫폼 데이터 동기화 이슈: 웹(q6b6-web), 앱(q6b6-app), 백엔드(q6b6-was)가 분리되어 있어 사용자 진행상황 및 데이터 일관성 관리가 복잡함
- 하드코딩된 콘텐츠 관리: 영상 URL, 퀴즈 내용, 이벤트 기간이 소스코드에 하드코딩되어 있어 콘텐츠 업데이트 시 코드 수정 및 재배포
필요
- 분산된 에셋 관리: asset-manager, qr-manager 등이 별도 시스템으로 분리되어 있어 통합 관리 및 유지보수가 어려움
- 제한적인 분석 기능: GTM을 통한 기본적인 이벤트 트래킹만 가능하고, 사용자 행동 패턴 및 콘텐츠 효과성 분석 기능 부족
2) 프로젝트 목표
- 통합 콘텐츠 관리 시스템: CMS(Content Management System) 구축을 통해 영상, 퀴즈, 이벤트 기간을 코드 수정 없이 실시간으로 관리할 수 있는 기능 개발
- 고도화된 사용자 분석: 사용자 여정 분석, A/B 테스트, 콘텐츠 효과성 측정을 위한 대시보드 시스템 구축
- 확장 가능한 아키텍처: 마이크로서비스 기반으로 에셋 관리, QR 관리, 콘텐츠 관리를 통합하여 운영 효율성 향상
3) 주안점
- 실시간 콘텐츠 업데이트:
- Headless CMS 도입을 통한 마케터/기획자의 직접적인 콘텐츠 관리 가능
- 코드 수정 없이 영상 URL, 퀴즈 문항, 이벤트 기간 등 실시간 변경 지원
- 고도화된 분석 시스템:
- 사용자 행동 히트맵, 콘텐츠별 완료율, 이탈 지점 분석 대시보드 구축
- 실시간 이벤트 모니터링 및 알림 시스템 도입
- 확장성 및 운영 효율성:
- Docker 기반 마이크로서비스 아키텍처로 시스템 확장성 확보
- CI/CD 파이프라인을 통한 무중단 배포 및 롤백 시스템 구축
- 모니터링 및 로깅 시스템(ELK Stack) 도입으로 장애 대응 시간 단축
- 멀티 플랫폼 데이터 동기화 이슈: 웹(q6b6-web), 앱(q6b6-app), 백엔드(q6b6-was)가 분리되어 있어 사용자 진행상황 및 데이터 일관성 관리가 복잡함
- 하드코딩된 콘텐츠 관리: 영상 URL, 퀴즈 내용, 이벤트 기간이 소스코드에 하드코딩되어 있어 콘텐츠 업데이트 시 코드 수정 및 재배포
필요
- 분산된 에셋 관리: asset-manager, qr-manager 등이 별도 시스템으로 분리되어 있어 통합 관리 및 유지보수가 어려움
- 제한적인 분석 기능: GTM을 통한 기본적인 이벤트 트래킹만 가능하고, 사용자 행동 패턴 및 콘텐츠 효과성 분석 기능 부족
2) 프로젝트 목표
- 통합 콘텐츠 관리 시스템: CMS(Content Management System) 구축을 통해 영상, 퀴즈, 이벤트 기간을 코드 수정 없이 실시간으로 관리할 수 있는 기능 개발
- 고도화된 사용자 분석: 사용자 여정 분석, A/B 테스트, 콘텐츠 효과성 측정을 위한 대시보드 시스템 구축
- 확장 가능한 아키텍처: 마이크로서비스 기반으로 에셋 관리, QR 관리, 콘텐츠 관리를 통합하여 운영 효율성 향상
3) 주안점
- 실시간 콘텐츠 업데이트:
- Headless CMS 도입을 통한 마케터/기획자의 직접적인 콘텐츠 관리 가능
- 코드 수정 없이 영상 URL, 퀴즈 문항, 이벤트 기간 등 실시간 변경 지원
- 고도화된 분석 시스템:
- 사용자 행동 히트맵, 콘텐츠별 완료율, 이탈 지점 분석 대시보드 구축
- 실시간 이벤트 모니터링 및 알림 시스템 도입
- 확장성 및 운영 효율성:
- Docker 기반 마이크로서비스 아키텍처로 시스템 확장성 확보
- CI/CD 파이프라인을 통한 무중단 배포 및 롤백 시스템 구축
- 모니터링 및 로깅 시스템(ELK Stack) 도입으로 장애 대응 시간 단축
프로젝트 성과
마케팅 ROI 및 브랜드 인게이지먼트 극대화
- 참여율 향상: 기존 단순 광고 대비 인터랙티브 체험을 통한 사용자 참여 시간 증가
- 바이럴 효과 증대: SNS 공유 기능을 통한 자발적 브랜드 홍보로
- 바이럴 효과 증대: SNS 공유 기능을 통한 자발적 브랜드 홍보로
크로스 플랫폼 기술 역량 및 확장성 확보
- 성능 최적화 달성: 영상 스트리밍 품질 자동 조절 및 디바이스별 최적화로 로딩 시간 단축
- 재사용 가능한 아키텍처: MobX 상태관리 및 모듈화된 컴포넌트로 향후 유사 프로젝트 개발 시간 절약
- 재사용 가능한 아키텍처: MobX 상태관리 및 모듈화된 컴포넌트로 향후 유사 프로젝트 개발 시간 절약
데이터 드리븐 의사결정 체계 구축 및 운영 비용 절감
- 운영 효율성: QR 코드 자동화 및 실시간 모니터링으로 운영 인력 절감, 서버 리소스 효율성 향상
- 예측 분석 역량: 사용자 이탈 지점 파악을 통한 콘텐츠 개선으로 완료율 향상
- 예측 분석 역량: 사용자 이탈 지점 파악을 통한 콘텐츠 개선으로 완료율 향상
핵심 기능
영상 스트리밍 최적화
네트워크 환경에 따른 적응형 화질 조절 및 다중 포맷 지원
실시간 이벤트 관리
시간대별 콘텐츠 노출 로직과 이벤트 기간 관리
프로젝트 상세
1) 포트폴리오 소개
모바일 신제품 출시를 위한 "월드 이벤트" 인터랙티브 마케팅 플랫폼
- 서비스 카테고리: 브랜드 마케팅/이벤트 플랫폼
- 메인 타깃: 갤럭시 신제품에 관심 있는 소비자층 (20-40대)
- 목적: 이벤트를 통한 제품 체험 및 브랜드 인게이지먼트 향상
2) 작업 범위
개발 참여 범위:
- Front-end 개발: Next.js 기반 반응형 웹 애플리케이션
- Back-end 개발: Python Flask 기반 API 서버 구축
- 지원 환경:
- 반응형 웹 (모바일/태블릿/데스크톱)
- Android/iOS 네이티브 앱
- QR 관리 시스템
- 에셋 관리 시스템
3) 주요 업무
핵심 기능:
- 인터랙티브 메인 맵: 터치 기반 네비게이션으로 다양한 콘텐츠 탐색
- 영상 체험 시스템:
- 제품 기능 소개 영상
- iOS/Android 최적화된 멀티 포맷 스트리밍 (HLS, MP4)
- 퀴즈 시스템:
- 시간대별 타겟팅 퀴즈 노출 로직
- 제품 특징 기반 O/X 퀴즈
- 매장 방문 인증: QR 코드 스캔을 통한 오프라인 매장 방문 확인
- 스탬프/리워드 시스템: 미션 완료에 따른 경품 응모 기능
- SNS 공유 기능: 체험 결과 공유를 통한 바이럴 마케팅
주요 페이지:
- 메인 체험 맵: 인터랙티브 3D 스타일 체험 공간
- 영상 센터: 제품별 기능 소개 영상 라이브러리
- 퀴즈 모달: 팝업 형태의 인터랙티브 퀴즈
- 매장 방문 인증: QR 스캔 카메라 인터페이스
- 리워드 페이지: 경품 응모 및 당첨 확인
4) 주안점
개발 시 중점 사항:
- 크로스 플랫폼 최적화: 웹과 앱에서 동일한 사용자 경험 제공
- 영상 스트리밍 최적화: 네트워크 환경에 따른 적응형 화질 조절 및 다중 포맷 지원
- 실시간 이벤트 관리: 시간대별 콘텐츠 노출 로직과 이벤트 기간 관리
- 사용자 행동 추적: Google Tag Manager를 통한 상세한 사용자 여정 분석
- 모바일 UX 최적화: 터치 인터페이스와 세로 모드 강제를 통한 모바일 최적화
- 브랜드 일관성: 브랜드 가이드라인에 맞는 UI/UX 설계
모바일 신제품 출시를 위한 "월드 이벤트" 인터랙티브 마케팅 플랫폼
- 서비스 카테고리: 브랜드 마케팅/이벤트 플랫폼
- 메인 타깃: 갤럭시 신제품에 관심 있는 소비자층 (20-40대)
- 목적: 이벤트를 통한 제품 체험 및 브랜드 인게이지먼트 향상
2) 작업 범위
개발 참여 범위:
- Front-end 개발: Next.js 기반 반응형 웹 애플리케이션
- Back-end 개발: Python Flask 기반 API 서버 구축
- 지원 환경:
- 반응형 웹 (모바일/태블릿/데스크톱)
- Android/iOS 네이티브 앱
- QR 관리 시스템
- 에셋 관리 시스템
3) 주요 업무
핵심 기능:
- 인터랙티브 메인 맵: 터치 기반 네비게이션으로 다양한 콘텐츠 탐색
- 영상 체험 시스템:
- 제품 기능 소개 영상
- iOS/Android 최적화된 멀티 포맷 스트리밍 (HLS, MP4)
- 퀴즈 시스템:
- 시간대별 타겟팅 퀴즈 노출 로직
- 제품 특징 기반 O/X 퀴즈
- 매장 방문 인증: QR 코드 스캔을 통한 오프라인 매장 방문 확인
- 스탬프/리워드 시스템: 미션 완료에 따른 경품 응모 기능
- SNS 공유 기능: 체험 결과 공유를 통한 바이럴 마케팅
주요 페이지:
- 메인 체험 맵: 인터랙티브 3D 스타일 체험 공간
- 영상 센터: 제품별 기능 소개 영상 라이브러리
- 퀴즈 모달: 팝업 형태의 인터랙티브 퀴즈
- 매장 방문 인증: QR 스캔 카메라 인터페이스
- 리워드 페이지: 경품 응모 및 당첨 확인
4) 주안점
개발 시 중점 사항:
- 크로스 플랫폼 최적화: 웹과 앱에서 동일한 사용자 경험 제공
- 영상 스트리밍 최적화: 네트워크 환경에 따른 적응형 화질 조절 및 다중 포맷 지원
- 실시간 이벤트 관리: 시간대별 콘텐츠 노출 로직과 이벤트 기간 관리
- 사용자 행동 추적: Google Tag Manager를 통한 상세한 사용자 여정 분석
- 모바일 UX 최적화: 터치 인터페이스와 세로 모드 강제를 통한 모바일 최적화
- 브랜드 일관성: 브랜드 가이드라인에 맞는 UI/UX 설계

메인 페이지