Project Detail

프로젝트 상세내용 화면입니다.뒤로가기

AdutionD

AuditionD는 React 기반 웹과 Flutter 하이브리드 앱을 결합해, 글로벌 K-POP 오디션 과정을 사용자·기업 모두에게 효율적으로 제공하는 플랫폼

사이트 링크 바로가기[앱 스토어](서비스 종료)

사이트2 링크 바로가기[어드민 사이트](서비스 종료)

작업기간 : 2025-02-01 ~ 2025-05-01 (12주)

React

axios

Radix/UI

Tailwind CSS

TypeScript

React-Query(Tanstack Query)

React-Query(Tanstack Query Table)

zustand

zod

stackflow

i18n

shadCn

eslint

flutter

사용자 앱 화면

앱 등록 화면(안드로이드,애플스토어)

어드민(일반,기업) 웹 화면

AuditionD (오디션디) – 글로벌 K-POP 온라인 오디션 플랫폼
AuditionD(오디션디)는 전 세계 누구나 K-POP 오디션에 참여할 수 있도록 설계된 글로벌 온라인 오디션 플랫폼입니다. 일반 사용자는 사전에 프로필 정보, 사진, 영상을 등록해두고, 기업이 개최한 오디션 기간에 맞춰 간편하게 지원할 수 있으며, 기업은 이를 통해 효율적으로 지원자를 확인하고 심사할 수 있습니다.
서비스 구조 및 주요 기능
유저 중심 오디션 지원 구조 사용자는 오디션 지원 시마다 콘텐츠를 새로 업로드하는 방식이 아닌, 프로필 정보·사진·동영상을 미리 등록해두고 오디션이 열렸을 때 선택적으로 지원하는 구조로 설계하여 반복 입력을 최소화하고 사용자 경험을 개선했습니다.
기업 오디션 운영 플로우 설계 기업은 오디션을 직접 생성·관리할 수 있으며, 오픈 전 → 오픈 → 심사 중 → 심사 완료 단계별 상태 플로우에 따라 지원 가능 여부 및 노출 UI가 동적으로 변경되도록 구현했습니다. 심사 완료된 오디션은 열람은 가능하되 추가 지원은 불가능하도록 제한했습니다.
기술 스택 및 구현 포인트
React 기반 프론트엔드 + Flutter 하이브리드 앱 배포 서비스는 React로 개발한 웹을 기반으로 Flutter를 씌워 앱 형태로 배포했으며, Flutter의 Stack Flow 네비게이션 구조를 활용해 페이지 전환 시 좌우 슬라이드 애니메이션이 자연스럽게 이어지도록 구현했습니다. 이를 통해 웹 기반 서비스임에도 네이티브 앱에 가까운 사용자 경험을 제공했습니다.
동영상 업로드 및 스트리밍 처리 (Vimeo 연동) 앱에서 업로드된 영상은 Vimeo API를 통해 업로드되며, 반환된 영상 URL을 서비스에 연결해 스트리밍 형태로 노출했습니다. 대용량 영상 처리 부담을 줄이면서 안정적인 재생 환경을 구성했습니다.
관리자(Admin) 시스템 설계
일반 관리자 / 기업 관리자 분리 운영 관리자 시스템은 일반 관리자와 기업 관리자로 분리되어 운영됩니다.
- 일반 관리자 - 사용자 정보 조회, 수정, 삭제 기능 - 사용자 데이터 변경 이력을 명확히 관리하기 위해 수정 시간(timestamp)을 기록하여 변경 내역 추적 가능하도록 구현
- 기업 관리자 - 오디션 생성 및 관리 - 지원자 목록 확인 및 심사 관리 - 기업 사용 환경을 고려해 로그인 세션을 3시간 유지하도록 쿠키 기반 인증을 구현하여 장시간 심사 작업에도 불편함 없이 사용할 수 있도록 설계

폴더 구조