글로벌 댄스 오디션 참가자를 사전 접수받고, 참가자에게 트레이닝을 제공한 뒤 경연 대회에 참여할 수 있도록 하는 플랫폼을 기획·개발·배포까지 전담으로 진행한 사례를 공유합니다. 단순 “사전 접수 폼”이 아니라, 참가 신청 → 트레이닝 → 대회 참가까지 한 흐름으로 설계된 서비스이며, 해외 참가자가 패키지(Standard / Audition)를 선택하고, Plan Your Trip·About 등 K-컬처 경험과 연결되는 구조입니다. 기획 단계부터 DB·API·프론트 전 영역을 직접 설계·구현했고, 이 글에서는 프로젝트 의도, 페르소나, 기술 선택, 아키텍처, 구현 상세, 스크린샷까지 정리했습니다.
프로젝트 의도와 성격
이 플랫폼이 풀려는 문제
글로벌 댄스 오디션은 해외 참가자가 많고, 당일 접수만으로는 운영 부담이 크고 참가자 이탈도 발생합니다. 참가 희망자를 사전 접수로 미리 받아두면, 운영 측에서는 인원·트레이닝·대회 일정 계획을 세우기 쉽고, 참가자에게는 트레이닝과 경연 대회 참가까지 안내·연결할 수 있습니다. 이 프로젝트는 “사전 접수만”이 아니라 사전 접수 → 트레이닝 → 경연 대회 참가를 한 플랫폼에서 지원하는 것이 목적이었습니다.
“사전 접수 → 트레이닝 → 경연 대회” 흐름
- 사전 접수: 참가 희망자가 패키지(Standard: 참가 100% 보장 / Audition: 오디션을 통해 참가)를 선택하고, 필요한 정보를 입력해 접수합니다.
- 트레이닝: 접수된 참가자에게 K-POP·댄스 트레이닝 기회가 제공되고, “Plan Your Trip” 등으로 한국 방문·K-컬처 체험과 연결됩니다.
- 경연 대회: 트레이닝과 준비를 거쳐 최종적으로 경연 대회에 참여할 수 있도록 일정·안내가 이어집니다.
즉, **타깃은 “글로벌 댄스 참가자”**이고, **의도는 “사전 접수로 참가자를 받아 트레이닝하고 경연 대회에 참여시키는 것”**입니다. 랜딩·패키지 구매·오디션 보기·Plan Your Trip·About Us 등 화면은 이 흐름을 지원하기 위해 설계되었습니다.
페르소나와 타깃
1. 글로벌 댄스 참가 희망자 (핵심 사용자)
- 누구: 해외에서 K-POP·댄스에 관심 있는 참가자, 오디션·경연 대회에 도전하고 싶은 사람
- 역할: 사전 접수를 통해 패키지(Standard / Audition)를 선택하고, 트레이닝·대회 참가까지 한 번에 신청
- 니즈: “어떤 패키지가 나에게 맞는지”, “트레이닝·대회 일정은 어떻게 되는지”, “한국에서 어떤 경험을 할 수 있는지”를 명확히 알고 싶어 함
- 플랫폼과의 관계: 사전 접수·패키지 구매·오디션 보기·Plan Your Trip·About를 통해 참가 경로를 이해하고 신청하는 주체
2. 운영·기획 측
- 누구: 오디션·트레이닝·경연 대회를 기획·운영하는 측
- 역할: 사전 접수 데이터 수집, 참가자별 패키지·상태 관리, 트레이닝·대회 일정 안내
- 니즈: 접수 건별 조회·정리·연락, 패키지별·일정별 통계, 확장 가능한 접수·관리 구조
- 플랫폼과의 관계: 접수·패키지·트레이닝·대회 정보를 플랫폼에 반영하고 참가자와 소통하는 주체
3. K-컬처·여행 관심자 (연계 타깃)
- 누구: K-POP·한국 문화·한국 방문에 관심은 있으나 “오디션 참가”까지는 아니라는 사용자
- 역할: Plan Your Trip, About Us, How It Works 등을 통해 K-컬처 교육·방송·경험 정보를 탐색
- 니즈: “무엇을 할 수 있는지”, “어떤 프로그램이 있는지”를 시각·텍스트로 이해
- 플랫폼과의 관계: 랜딩·About·Plan Your Trip으로 진입해, 필요 시 패키지·사전 접수로 전환될 수 있는 잠재 참가자
이렇게 참가 희망자·운영·K-컬처 관심자 세 가지 페르소나를 두고, “사전 접수 → 트레이닝 → 경연 대회”와 “패키지 선택·K-컬처 경험”을 한 플랫폼에서 지원하도록 설계했습니다.
의도 정리 (한 줄 요약)
- 플랫폼 의도: 글로벌 댄스 참가자를 사전 접수로 받고, 참가자에게 트레이닝을 제공한 뒤 경연 대회에 참여할 수 있도록 end-to-end로 지원하는 플랫폼을 만든다.
- 패키지의 의미: Standard(참가 100% 보장)는 오디션 없이 트레이닝·대회 참가가 보장되고, Audition(오디션을 통해 참가)은 오디션 통과 시 동일한 경험으로 이어집니다. 참가자는 자신의 예산·목표에 맞는 패키지를 선택해 사전 접수합니다.
프로젝트 배경과 목표
왜 사전 접수·트레이닝·경연 대회 플랫폼인가
글로벌 댄스 오디션은 참가자가 해외에 많고, 단순 “당일 접수”만으로는 운영 효율과 참가자 경험이 모두 떨어집니다. 사전 접수로 인원과 패키지(Standard / Audition)를 미리 파악하고, 트레이닝으로 참가 준비와 K-컬처 체험을 연결한 뒤, 경연 대회에 참여시키는 end-to-end 흐름이 필요했습니다. 이 프로젝트는 그 요구를 반영해 “안내 → 패키지 선택·접수 → 완료/확인”과 “Plan Your Trip·About·How It Works”까지 한 서비스로 구축하는 것이 목표였습니다.
목표 정리
- 참가자: 오디션·패키지 안내를 보고, Standard 또는 Audition 패키지를 선택하고 사전 접수 완료 → 트레이닝·대회 참가까지 연결
- 운영: 접수 데이터의 조회·정리·연락, 패키지별·일정별 관리
- 기술: 확장 가능하고 유지보수하기 쉬운 구조로 기획부터 배포까지 한 번에 수행
기획·프론트엔드·백엔드·DB 설계·구현을 전부 직접 담당했습니다.
프로젝트 개요
- 목적: 글로벌 댄스 오디션 참가자를 사전 접수받고, 트레이닝을 제공한 뒤 경연 대회 참가까지 이어지는 플랫폼 구축
- 타깃: 글로벌 댄스·K-POP 참가 희망자, 운영·기획 측, K-컬처·여행 관심자
- 핵심 흐름: 사전 접수(패키지 선택) → 트레이닝 → 경연 대회 참가
- 역할: 기획, 프론트엔드, 백엔드, DB 설계·구현 전부 수행
- 기간: 설계부터 오픈까지 전 과정을 단일 인력으로 수행
페르소나별 시나리오와 기대 효과
참가 희망자 시나리오
해외 참가자는 “Welcome to K-POP Dance Stage”, “Buy Package” 메시지를 보고 Standard Package(참가 100% 보장) 또는 Audition Package(오디션을 통해 참가) 중 하나를 선택합니다. “오디션 보기”로 오디션 정보를 확인하고, 필요 시 사전 접수(패키지 구매·정보 입력)를 진행합니다. 접수 완료 후에는 트레이닝·대회 일정 안내를 받고, “Plan Your Trip”에서 K-POP 여정·한국 방문 경험을, “About Us”에서 K-컬처 교육·방송 소개를 볼 수 있습니다. **“한 번 접수하면 트레이닝·대회까지 연결된다”**는 경험이 목표입니다.
운영 시나리오
운영 측은 접수 건별로 이름·연락처·패키지·국가 등을 조회·정리하고, 트레이닝·대회 일정에 맞춰 참가자에게 안내합니다. 추후 관리자 화면·접수 목록 API(페이지네이션·필터)를 붙이면 패키지별·날짜별 통계와 연락 이력 관리까지 같은 구조에서 확장할 수 있습니다.
K-컬처 관심자 시나리오
“Plan Your Trip”, “How It Works”, “About Us”에서 K-POP 여정·K-컬처 교육·방송 내용을 탐색합니다. 한복·궁궐 등 이미지와 텍스트로 “무엇을 경험할 수 있는지”를 이해하고, 관심이 생기면 패키지·사전 접수로 자연스럽게 전환될 수 있게 했습니다.
기술 스택 선정 이유
프론트엔드: Next.js
랜딩·패키지·Plan Your Trip·About·접수 폼 등 페이지가 많고, 해외 사용자를 고려해 초기 로딩과 메시지 명확성이 중요했습니다. Next.js를 선택해 서버에서 안내·소개 페이지를 렌더링하고, 패키지 선택·접수 폼은 클라이언트에서 유효성 검사·제출 처리까지 한 흐름으로 구현했습니다. App Router로 랜딩·패키지·Plan Your Trip·About·접수·완료 페이지를 분리하고, 필요한 부분만 클라이언트 컴포넌트로 두어 번들 크기를 줄였습니다. 다크 모드·언어 선택(KO 등)도 같은 앱 안에서 지원할 수 있게 구성했습니다.
백엔드: Nest.js
접수 데이터 저장·조회·(선택) 알림·패키지 연동을 하나의 백엔드에서 관리하고 싶었고, TypeScript 기반에 모듈·의존성 주입 구조가 잘 잡혀 있는 Nest.js를 선택했습니다. 접수 제출 API, 유효성 검사, DB 저장을 컨트롤러·서비스·엔티티 레이어로 나누어 구현했고, 추후 관리자용 접수 목록 API나 이메일·알림·패키지 상태 확장 시에도 구조를 유지하기 쉬웠습니다.
데이터베이스: MariaDB
접수 건별로 이름·연락처·패키지 유형(Standard/Audition)·국가·제출 시각 등을 관계형으로 다루는 것이 자연스러워 RDB를 사용했습니다. MariaDB는 MySQL과 호환되면서도 라이선스·성능 면에서 선택지로 적합했고, 접수 테이블에 인덱스를 걸어 날짜·패키지·상태별 조회가 빠르게 나오도록 설계했습니다.
| 구분 | 기술 | 선택 이유 요약 |
|---|---|---|
| 프론트엔드 | Next.js | 랜딩·패키지·Plan Your Trip·About·접수, SSR·번들 최적화 |
| 백엔드 | Nest.js | TypeScript, 모듈 구조, API·확장성 |
| 데이터베이스 | MariaDB | 관계형 모델, 접수·패키지 데이터 저장·조회 |
아키텍처 개요
전체 구조는 프론트(Next.js) – API(Nest.js) – DB(MariaDB) 3단으로 구성했습니다. 프론트는 랜딩·Buy Package·Plan Your Trip·About·How It Works·접수 폼·완료 페이지와 라우팅 담당, 백엔드는 접수 제출 API·유효성 검사·저장·(선택) 목록 API 담당, DB는 접수·패키지 관련 데이터 저장 및 조회 최적화를 담당합니다. 추후 관리자 화면이나 트레이닝·대회 일정 연동을 붙일 때도 같은 API·DB 구조를 재사용할 수 있게 두었습니다.
데이터베이스 설계
사전 접수의 핵심 엔티티는 접수(Application) 한 건과 패키지 유형(Standard / Audition)입니다. 접수 테이블에는 이름·이메일·연락처·패키지 유형·국가·(선택) 메모·제출 시각·IP 등 필요한 필드를 넣었고, 운영에서 “날짜별·패키지별·상태별 조회”가 잦을 수 있어 제출일·패키지·상태 컬럼에 인덱스를 걸었습니다. 패키지 유형·이벤트 종류는 코드 테이블이나 ENUM으로 두어 나중에 옵션이 늘어나도 스키마 변경을 최소화할 수 있게 했습니다. 트레이닝·대회 일정을 별도 테이블로 두면 “접수 → 트레이닝 → 대회” 흐름을 데이터로 추적·확장하기 쉽습니다.
API 설계
백엔드에서는 접수 제출 API(POST)를 핵심으로 두었습니다. 요청 본문에 이름·이메일·연락처·패키지 유형(Standard/Audition)·국가 등 필드를 담아 보내면, 서버에서 유효성 검사(필수값·형식·길이) 후 DB에 저장하고 성공/실패와 메시지를 JSON으로 반환했습니다. 중복 제출 방지는 이메일+이벤트 키 조합 또는 쿠키·토큰으로 제한할 수 있도록 설계했고, (선택) 관리자용 접수 목록 API(GET, 페이지네이션·패키지·날짜 필터)도 같은 엔티티를 조회하는 형태로 확장할 수 있게 두었습니다. 패키지별·트레이닝·대회 일정을 내려주는 API는 정적 또는 DB 기반으로 추가할 수 있습니다.
프론트엔드 구조
Next.js App Router 기준으로 랜딩(메인)·Buy Package·Plan Your Trip·About·How It Works·접수 폼·완료 페이지를 두었습니다. 랜딩에서는 “Welcome to K-POP Dance Stage”, “Buy Package”, “오디션 보기” 버튼과 캐러셀을 배치하고, 바로 아래 Buy Package 섹션에 Standard Package $1,000 (참가 100% 보장) / Audition Package $65 (오디션을 통해 참가) 두 카드를 노출했습니다. Plan Your Trip에서는 “PLAN YOUR K-POP JOURNEY”, “THE WORLD OPENS THROUGH K-POP STAGE” 타이틀과 댄스 연습 이미지, “How It Works” 섹션을 두었고, About에서는 “ABOUT”, “UNIQUE JOURNEY AWAIT”, “All about the K-Culture Education & Broadcast”와 한복·궁궐 이미지, K-컬처 교육·방송 설명을 배치했습니다. 접수 폼·완료 페이지는 기존에 정리한 대로 “안내 → 입력 → 제출 → 완료/확인” 흐름으로 구현했습니다.
사전 접수·패키지·트레이닝·대회 흐름 상세
패키지 선택 (Standard / Audition)
- Standard Package ($1,000): 참가 100% 보장. 오디션 없이 트레이닝·경연 대회 참가 권한이 주어집니다.
- Audition Package ($65): 오디션을 통해 참가. 오디션 통과 시 트레이닝·대회 참가로 이어집니다.
참가자는 메인·Buy Package 섹션에서 두 옵션 중 하나를 선택하고, “오디션 보기”로 오디션 정보를 확인한 뒤 사전 접수(정보 입력·제출)를 진행합니다.
접수 흐름
안내(랜딩·패키지) → 개인정보·참가 정보 입력 → 제출 → 완료/확인 순서로 구성했습니다. 제출 후에는 “접수가 완료되었습니다”, “확인 방법(이메일·문의처)” 등을 완료 페이지에 표시해 참가자가 다음 단계(트레이닝·대회 안내)를 인지할 수 있게 했습니다.
트레이닝·경연 대회 연결
접수 데이터는 DB에 저장되므로, 운영 측에서 참가자별로 패키지·연락처를 확인하고 트레이닝 일정·경연 대회 일정을 안내할 수 있습니다. “Plan Your Trip”, “How It Works”는 이 여정(K-POP 여정·한국 방문·트레이닝·대회)을 사전에 이해시키는 콘텐츠 역할을 합니다.
해외 사용자 고려 사항
- 언어·메시지: 라벨·에러·안내 문구를 짧고 명확하게 작성하고, 언어 선택(KO 등)을 헤더에 두어 다국어 확장을 고려했습니다.
- 폼 구조: 필드 수를 필요한 만큼만 두어 부담을 줄였고, 패키지 선택은 카드 형태로 시각적으로 구분해 선택을 쉽게 했습니다.
- 로딩·에러: 네트워크가 느린 환경을 가정해 제출 중 로딩 표시와 타임아웃·재시도 안내를 넣었습니다.
- 다크 모드: 헤더에 다크/라이트 토글을 두어 선호에 맞는 화면을 제공할 수 있게 했습니다.
성능과 접근성
- 초기 로딩: 랜딩·Plan Your Trip·About 등은 서버에서 렌더링해 첫 화면이 빨리 뜨도록 했고, 접수 폼 관련 스크립트만 클라이언트에서 로드했습니다.
- 접근성: 폼 필드에
label·aria-*를 붙이고, 에러 시 포커스·에러 메시지 연동을 해 두어 키보드·스크린리더 사용을 고려했습니다.
개발 과정에서의 고민과 해결
- 중복 제출: 같은 사용자가 여러 번 제출하는 것을 막기 위해 이메일+이벤트 기준 중복 체크 또는 제출 후 버튼 비활성화·리다이렉트로 처리했습니다.
- 스팸·부정 접수: (선택) reCAPTCHA·rate limit을 도입할 수 있도록 API 구조를 두었고, 필요 시 IP·제출 빈도 제한을 추가할 수 있습니다.
- 데이터 검증: 프론트와 백엔드 모두에서 동일한 규칙으로 검증해, 프론트를 우회한 요청에도 잘못된 데이터가 저장되지 않도록 했습니다.
- 패키지·가격 노출: Standard $1,000, Audition $65 등 가격과 혜택을 카드에 명확히 표시해 참가자가 선택 시 혼동이 없도록 했습니다.
확장 가능성
- 트레이닝·대회 일정: 접수와 연계해 트레이닝·대회 일정 테이블·API를 두면 “접수 완료 후 다음 일정” 안내를 자동화할 수 있습니다.
- 패키지 확장: 새 패키지(예: 그룹 패키지, VIP 패키지)를 추가할 때는 패키지 코드·가격·설명만 데이터와 UI에 반영하면 됩니다.
- 다국어: 언어 선택을 확장해 랜딩·패키지·About 문구를 다국어로 제공할 수 있습니다.
- 관리자 기능: 접수 목록·검색·엑셀 추출·이메일 발송·패키지별 통계는 같은 DB·API 위에 관리자 UI를 붙이면 됩니다.
요약: 의도·페르소나·기능 한눈에
| 구분 | 내용 |
|---|---|
| 의도 | 글로벌 댄스 참가자를 사전 접수받아 트레이닝을 제공하고 경연 대회에 참여시키는 플랫폼 |
| 참가 희망자 | 패키지(Standard/Audition) 선택·사전 접수 → 트레이닝·대회 참가 |
| 운영 | 접수·패키지·트레이닝·대회 일정 관리·안내 |
| K-컬처 관심자 | Plan Your Trip·About·How It Works로 탐색 → 필요 시 접수 전환 |
| 핵심 기능 | 랜딩·Buy Package(Standard $1,000 / Audition $65)·오디션 보기·Plan Your Trip·About·How It Works·사전 접수·완료 |
| 기술 | Next.js(프론트), Nest.js(API), MariaDB(DB) |
자주 고려되는 질문 (구현 관점)
Q. Standard와 Audition 패키지 차이는?
Standard는 참가 100% 보장으로, 별도 오디션 없이 트레이닝·경연 대회 참가 권한이 주어집니다. Audition은 오디션을 통과한 참가자만 트레이닝·대회로 이어지며, 참가 비용이 상대적으로 낮게 책정됩니다. 접수 시 패키지 유형을 DB에 저장해 운영 측에서 참가자별 혜택·일정을 구분해 안내할 수 있습니다.
Q. 트레이닝·대회 일정은 어떻게 연동하나?
접수 데이터에 패키지·연락처가 있으므로, 운영 측에서 트레이닝·대회 일정 테이블·API를 두고 “접수 완료 후 N일 뒤 트레이닝”, “대회 D-day” 등을 안내할 수 있습니다. 추후 참가자 전용 페이지에서 “내 일정”을 보여주는 확장도 같은 구조로 가능합니다.
Q. 다국어는?
헤더에 언어 선택(KO 등)이 있으므로, 문구를 키·값으로 분리해 다국어 리소스를 붙이면 랜딩·패키지·About·접수 폼 라벨을 다국어로 제공할 수 있습니다.
Q. 접수와 결제는?
현재는 접수(정보 입력·제출)까지를 플랫폼에서 담당하고, 결제는 외부 결제 모듈 또는 별도 프로세스로 연동할 수 있도록 설계해 두었습니다. 패키지별 가격($1,000 / $65)은 UI에 노출하고, 결제 완료 시 접수 상태를 “결제 완료”로 업데이트하는 확장이 가능합니다.
Q. 메인·패키지·Plan Your Trip·About가 같은 앱인가?
네. Next.js 단일 앱 안에서 랜딩·Buy Package·Plan Your Trip·About·How It Works·접수·완료 라우트를 모두 제공합니다. 공통 헤더(로고·언어·다크 모드·메뉴)·푸터·SEO 설정을 한 번에 관리할 수 있습니다.
트레이닝·경연 대회 연동 관점
사전 접수만으로 끝나는 것이 아니라 트레이닝과 경연 대회 참가까지 이어지는 것이 이 프로젝트의 의도입니다. 따라서 접수 데이터는 “참가자 풀”이 되고, 운영 측에서는 (1) 접수 건별 패키지·연락처 확인, (2) 트레이닝 일정·장소 안내, (3) 경연 대회 일정·참가 조건 안내를 순차적으로 진행할 수 있습니다. 플랫폼에 “트레이닝 일정” 페이지나 “대회 안내” 페이지를 추가하면, 참가자가 접수 완료 후 다음 단계를 스스로 확인할 수도 있습니다. Plan Your Trip·How It Works는 “어떤 여정을 겪게 되는지”를 미리 보여주어 참가 동기를 높이는 역할을 합니다.
참가자 여정과 화면별 기대 효과
1단계: 인지·관심 (랜딩·Buy Package)
참가자가 처음 사이트에 들어오면 “Welcome to K-POP Dance Stage”, “Buy Package” 메시지와 오디션 보기 버튼을 보게 됩니다. 바로 아래 Standard Package($1,000, 참가 100% 보장)와 Audition Package($65, 오디션을 통해 참가) 두 카드가 있어, **“무엇을 선택할 수 있는지”**와 **“얼마인지”**를 한눈에 파악할 수 있습니다. 기대 효과: 참가 의사가 있는 사용자가 패키지를 비교하고 다음 단계(오디션 보기·접수)로 넘어가기 쉽게 합니다.
2단계: 이해·동기 (Plan Your Trip·About·How It Works)
Plan Your Trip에서는 “PLAN YOUR K-POP JOURNEY”, “THE WORLD OPENS THROUGH K-POP STAGE”와 댄스 연습 이미지로 K-POP 여정을 시각화하고, How It Works로 참가 절차를 안내합니다. About에서는 K-컬처 교육·방송과 한복·궁궐 이미지로 한국에서의 경험을 전달합니다. 기대 효과: “트레이닝·대회가 어떤 경험인지”를 이해하고, 참가 동기가 높아집니다.
3단계: 신청 (사전 접수·완료)
패키지를 선택한 참가자가 이름·연락처·패키지 유형·국가 등을 입력해 제출하면, 접수 완료 페이지에서 “접수가 완료되었습니다”, “확인 방법(이메일·문의처)” 등을 보게 됩니다. 기대 효과: 참가자가 “다음에 무엇이 일어나는지”를 인지하고, 운영 측은 접수 데이터를 바탕으로 트레이닝·대회 안내를 진행할 수 있습니다.
4단계: 트레이닝·경연 대회 (운영 연동)
접수된 참가자에게 이메일·문자 등으로 트레이닝 일정·장소, 경연 대회 일정·참가 조건을 안내합니다. 플랫폼에 “내 일정” 페이지를 추가하면 참가자가 로그인 후 자신의 트레이닝·대회 일정을 확인할 수 있도록 확장할 수 있습니다. 기대 효과: 사전 접수 → 트레이닝 → 경연 대회까지 한 흐름이 데이터와 운영 프로세스로 완성됩니다.
정리: 타깃별로 다른 진입점
- 참가 의사가 확실한 사용자: 랜딩 → Buy Package → 오디션 보기 → 접수 폼으로 직행
- 먼저 경험을 알고 싶은 사용자: Plan Your Trip·About·How It Works 탐색 후 패키지·접수로 전환
- 운영: 접수 목록·패키지별 통계로 트레이닝·대회 일정 계획 및 안내
이렇게 타깃(참가 희망자 vs K-컬처 관심자)에 따라 진입 경로가 달라지도록 화면을 배치했고, 모두 같은 플랫폼 안에서 일관된 브랜딩과 UX를 유지했습니다. 요약하면, 이 플랫폼은 “사전 접수 페이지” 하나가 아니라 사전 접수 → 트레이닝 → 경연 대회를 지원하는 참가자 여정 전체를 담는 서비스로 설계되었고, 랜딩·패키지·Plan Your Trip·About·접수·완료가 그 여정의 각 단계를 지원합니다. 기술적으로는 Next.js(프론트), Nest.js(API), MariaDB(DB)로 구성되어 있으며, 의도와 페르소나를 명확히 한 뒤 화면과 API를 설계·배포한 경험이 있습니다. 비슷한 오디션·트레이닝·대회 연동 프로젝트가 필요하시면 편하게 문의해 주세요.
스크린샷
메인 랜딩과 패키지 구매(Standard / Audition) 섹션
KPOP STAGE 헤더(언어 선택 KO, 다크 모드, 햄버거 메뉴) 아래 히어로 영역에 "Welcome to K-POP Dance Stage", "Buy Package", "이제 세계가 지켜본다. KPOP Dance Stage의 주인공이 될 시간." 문구와 오디션 보기 버튼이 있습니다. 캐러셀 네비게이션과 음소거 아이콘이 보이고, 아래 Buy Package 섹션에 Standard Package $1,000 (참가 100% 보장) / Audition Package $65 (오디션을 통해 참가) 두 가지 패키지가 카드로 배치된 화면입니다.
Plan Your Trip / K-POP Journey·How It Works
KPOP STAGE 로고, 언어(KO), 다크 모드, 햄버거 메뉴가 있는 상단 아래, 큰 타이틀 "PLAN YOUR K-POP JOURNEY", **"THE WORLD OPENS THROUGH K-POP STAGE"**와 댄스 연습/오디션 분위기의 스튜디오 사진이 배치되어 있습니다. 하단에 "How It Works" 섹션 제목이 보이는, K-POP 여정·참가 과정(트레이닝·대회) 소개 페이지입니다.
About Us / K-컬처 소개
헤더 아래 "ABOUT", "UNIQUE JOURNEY AWAIT" 타이틀과 부제 "All about the K-Culture Education & Broadcast"가 있고, About Us 섹션에 한복을 입은 참가자들이 궁궐 배경에서 셀카를 찍는 대형 이미지가 배치되어 있습니다. 하단에 "KPOPSTAGE는 국제 관객을 위한 K-컬처 교육, 방..."으로 시작하는 설명 문단이 보이는 소개(About Us)·K-컬처 교육·방송 페이지입니다.
마무리
Next.js, Nest.js, MariaDB로 글로벌 댄스 참가자를 사전 접수받아 트레이닝 후 경연 대회 참가까지 이어지는 플랫폼을 설계·구현했습니다. 의도(사전 접수 → 트레이닝 → 경연 대회)와 페르소나(참가 희망자·운영·K-컬처 관심자)를 명확히 하고, 랜딩·패키지·Plan Your Trip·About·접수·완료까지 한 흐름으로 기획부터 배포까지 전 과정을 수행한 경험이 있습니다.
오디션·이벤트 접수 시스템, 사전 신청·트레이닝·대회 연동, 참가자 관리 기능 등 비슷한 규모나 요구사항의 프로젝트 개발이 필요하시면 편하게 문의해 주세요. 프로젝트에서는 “참가자에게 무엇을 제공하는지(트레이닝·대회)”와 “어떤 페르소나가 쓰는지”를 먼저 정리한 뒤 화면과 API를 설계했고, 그 결과 확장과 유지보수를 유연하게 가져갈 수 있었습니다.