PC웹모바일웹iOSAndroidCONCEPT즉시 구현 가능
QR 캠페인 도달률·방문 분석 대시보드 + 마케팅 랜딩
QR 캠페인 스캔·방문 데이터를 도달률·CVR·시간대로 분석하는 마케팅 운영 대시보드 + 모바일 랜딩 시안. Neobrutalist Bold 팔레트(핫핑크·옐로·블랙)로 캠페인·MZ 타겟에 최적화된 UI를 구현했습니다.
본 시안은 의뢰 전 도메인 이해·UI 흐름을 검증한 개념 증명입니다. chamlab 표준 스택(Supabase + Next.js + Vercel)으로 1~2개월 내 실서비스 구현이 가능하며, 동일 스택의 자체 앱(chamlab-grow 등)에서 검증된 패턴입니다.
시안 의도
QR 코드 기반 캠페인 유입 추적·모바일 랜딩·CRM 흐름을 한 서비스로 통합한 마케팅 운영 도구 시안. 전자명함 서비스의 QR 공유·방문 로그 패턴과 동일한 기술 구조를 마케팅 캠페인 도메인에 적용
시안 한계 · 주의
실제 UTM 파라미터 수집·지역/기기별 세분화 데이터 파이프라인은 구현 단계에서 확정. 차트는 인라인 SVG/CSS 근사치
구현 스택
동일 시안을 실제로 구현할 때 사용하는 기본 스택입니다
웹 프론트엔드
Next.js + TypeScript
모바일 앱
Flutter + Dart
백엔드/DB
Supabase (PostgreSQL)
이메일
Resend
인증
Supabase Auth
시안 화면
주요 기능
- 캠페인 랜딩 — QR 스캔 유입 모바일 히어로 + 카운트다운 CTA
- 서비스 소개 — 핵심 가치 3블록 + 후기 카드 + 최종 CTA
- 문의·신청 폼 — 이름·연락처·관심 옵션·동의 체크박스
- KPI 대시보드 — 스캔 수·도달률·CVR·평균 체류 + 시간대 차트
- QR 발급·관리 — 캠페인별 QR 발급·UTM 편집·ON/OFF
- 방문자 CRM — 방문 이력·재방문 표시·자동 알림 룰·세그먼트 필터
기술 스택
Next.jsTypeScriptSupabasePostgreSQLTailwind CSSResend
작업 범위
모바일 랜딩 3화면PC 관리자 3화면매핑 1화면HTML 시안 + Playwright export
프로젝트 정보
- 유형
- 개념 시안 (CONCEPT)
- 타겟
- 마케팅 캠페인 운영자
- 기간
- 시안 단계
- 스택
- Next.js + Supabase (가정)