1) 문제점
- 내부에서 엑셀/파일로만 관리되던 100건 이상의 방대한 브랜드 마케팅 자료가 자산화되지 못함
- 단순 자료 보관을 넘어, 수익을 창출할 수 있는 '유료 구독(Membership)' 시스템의 부재
- PC와 모바일 등 접속 환경에 따라 화면이 깨지거나 달라 보여, 일관된 앱(App) 사용자 경험 제공이 어려움

2) 프로젝트 목표
- 자산화 및 수익화: 아카이빙 자료를 DB화하고, 구독 여부에 따라 정보 공개 범위를 제어하는 '페이월(Paywall)' 구축
- Mobile-First UX: PC 브라우저 접속 시에도 모바일 앱 비율(430px)로 화면을 고정하여 앱과 동일한 몰입감 제공
- 운영 효율화: 개발 지식이 없는 내부 담당자가 직접 콘텐츠를 발행하고 회원을 관리할 수 있는 시스템 구축

3) 주안점
- 구독 전환 유도: 텍스트 타이핑 모션과 콘텐츠 블러(Blur) 처리를 통해 비구독자의 호기심을 자극하고 결제를 유도
- 탐색 경험 개선: 리스트에서 페이지 이동 없이 내용을 즉시 확인하는 '아코디언 UI'를 적용하여 이탈률 감소
- 비즈니스 기능 강화: 단순 관리를 넘어, {고객명} 치환 이메일 발송 및 1:1 채팅 상담 기능을 통해 '재구독(Retention)' 관리까지 가능한 올인원 어드민 구현


******** 시연영상 https://youtu.be/Z3ASLODc8mw *********

***** https://youtu.be/Z3ASLODc8mw 시연영상 *****

1) 포트폴리오 소개
브랜드 마케팅/프로모션 사례를 아카이빙하고, 이를 자산화하여 '유료 구독 모델(Membership)'로 수익화하는 모바일 중심 웹 플랫폼입니다.

기존에 흩어져 있던 마케팅 데이터를 체계적으로 분류(Archiving)하고, 사용자의 구독 여부에 따라 콘텐츠 공개 범위를 제어하는 '페이월(Paywall)' 시스템을 핵심으로 구축했습니다. 특히 PC 브라우저 접속 시에도 모바일 앱과 동일한 UX 경험을 제공하는 'Mobile View Layout'을 적용하여 디바이스 파편화를 최소화했습니다.

2) 작업 범위
- 기획 분석 및 설계: 클라이언트 요구사항 기반의 기능 명세 및 DB 설계
- UI/UX 개발: Mobile-First 디자인 시스템 구축 (PC 화면 중앙 정렬 레이아웃 포함)
- Front-end 개발: Next.js 15(App Router) 기반의 반응형 웹 애플리케이션 구현
- Back-end/Admin 개발: 콘텐츠 관리(CMS), 회원/구독 관리, CRM 기능 구현
- 배포 및 인프라: Vercel 배포 및 환경 설정

3) 주요 업무
[사용자(Front) 기능 - 몰입도 높은 구독 경험]
① 모바일 앱 스타일의 UI/UX
- PC 접속 시 430px 모바일 뷰포트 중앙 정렬 및 배경 딤드(Dimmed) 처리로 앱 사용성 구현
- 홈 화면 진입 시 브랜드 철학을 전달하는 '타이핑 텍스트 애니메이션' 구현
② 직관적인 아카이빙 탐색
- 페이지 이동 없이 리스트에서 내용을 즉시 확인하는 '아코디언(Accordion) UI' 적용
- 브랜드 로고, 분류, 게시일 등 핵심 정보를 구조화된 테이블 형태로 시각화
③ 구독 수익화 모델 (Paywall)
- 비구독자 대상 콘텐츠 하단 블러(Blur) 처리 및 '구독 유도(CTA)' 버튼 노출
- 구독 플랜(월간/연간) 선택 및 결제 시뮬레이션 프로세스 구현
- 마이페이지 내 결제 영수증 다운로드 및 멤버십 상태 관리

[관리자(Admin) 기능 - 운영 자동화]
① 올인원 대시보드
- 실시간 회원 가입 현황, 구독 전환율, 매출 추이, 인기 콘텐츠 통계 시각화
② 콘텐츠 CMS (저작 도구)
- 블록 기반 에디터로 텍스트/이미지 작성 및 미리보기 지원
- 스위치 버튼 하나로 콘텐츠의 'Premium/Free' 공개 범위 즉시 설정
③ CRM 및 마케팅 자동화
- 카카오톡 스타일의 '1:1 실시간 문의' 채팅 인터페이스 (관리자 응대 기능)
- 치환 변수({user_name}, {plan} 등)를 활용한 타겟 마케팅 이메일 발송 시스템
- 회원별 구독 상태(Active/Expired/Suspended) 모니터링 및 관리

4) 주안점
① 기획 의도의 정확한 시각화
- 브랜드 포인트 컬러(#FEFF06)를 활용한 강렬한 아이덴티티 구축 및 타이핑 모션을 통한 감성적 접근
② 수익화를 위한 기술적 장치
- Next.js의 Middleware를 활용하여 구독 여부에 따른 서버 사이드 리다이렉트 및 콘텐츠 접근 권한을 엄격하게 제어하여 보안성 강화
③ 운영 효율성 극대화
- 개발 지식이 없는 운영자도 손쉽게 콘텐츠를 올리고, 고객 문의를 실시간으로 처리할 수 있도록 직관적인 Admin UX 설계에 집중