kapitalletter · 위시켓(Wishket)

프로젝트 배경

예술 기반 HR·CSR 프로그램은 수요가 꾸준함에도 불구하고,
실제 탐색과 도입 결정 과정은 복잡한 중개 구조로 인해 비효율이 많았습니다.

문의는 HR 기업을 통해 이루어지는 반면 예산과 의사결정은 기업·기관이 담당해,
정보 전달이 정확히 이어지지 않고 상담이 지연되며 전환율이 낮아지는 문제가 지속되었습니다. 또
한 담당자가 프로그램의 실제 효과와 흐름을 직접 파악하기 어려워 선택 과정에 부담이 컸습니다.

이 문제를 해결하기 위해 마인드케이션은 기업 담당자가 중간 단계를 거치지 않고도
프로그램을 직접 탐색·비교·이해할 수 있는 독립형 플랫폼을 구축했습니다.

가격·시간·키워드 기반 검색과 구조화된 상세 정보를 통해 탐색 흐름을 단순화하고,
뮤지컬 테라피 데모로 프로그램의 핵심 경험을 웹에서도 빠르게 파악할 수 있도록 했습니다.
이를 통해 중간 단계에서 발생하던 정보 왜곡을 줄이고,
담당자가 스스로 비교·결정할 수 있는 직관적인 선택 구조를 마련했습니다.

프로젝트 성과

인터랙티브 체험 기능 제공

인터랙티브 프리뷰, 실시간 북마크·신청 기능 등 체감 가능한 체험 요소를 강화하여
프로그램을 보기만 하는 정보가 아니라 직접 경험하는 흐름으로 전환했습니다.

반응형 클래스 도입으로 모바일 최적화

모든 페이지에 반응형 구조를 적용해 모바일에서도
일관된 사용성과 매끄러운 사용자 경험을 제공했습니다.

SEO 최적화

SSR·SSG 기반 구조로 검색엔진 친화적인 환경을 구축하여
노출 가능성과 서비스 접근성을 크게 개선했습니다.

핵심 기능

뮤지컬 테라피 체험하기

실제 프로그램에서 진행되는 활동들을 미리 체험해볼 수 있습니다.

프로그램 찾기

마인드케이션만의 특별한 프로그램들을 찾아볼 수 있습니다.
원하는 키워드로 검색하거나, 가격대∙소요시간, 주요 키워드로 필터링된 프로그램 리스트를
조회할 수 있습니다.

프로그램 자세히보기

프로그램과 관련된 소요 시간과 참여 인원, 추천 대상 등의 상세 정보를 살펴볼 수 있습니다. 해당 프로그램이 필요하다면 프로그램 신청을 진행할 수 있습니다.

프로젝트 상세

사용자가 스스로 탐색하고 결정하며, 중간 과정 없이 프로그램의 가치가 명확히 전달되는 플랫폼을 목표로
서비스 기획부터 개발까지 전 과정을 설계·구현했습니다.

1) 작업 범위
(1) 서비스 기획
• 서비스 구조(IA) 정의
• 사용자 시나리오 및 요구사항 설계
• 검색·필터 흐름 기획
• 신청과 문의 플로우 설계
• 인터랙티브 프리뷰(뮤지컬 테라피 데모) UX 구조 설계

(2) UI/UX 디자인
• 모바일과 데스크톱을 아우르는 디자인 시스템 제작
• 반응형 레이아웃 구성
• 주요 화면의 UX 흐름 정비
• 프로그램 카드, 상세 페이지, 신청 흐름 UI 설계

(3) 프론트엔드 개발
• 반응형 레이아웃 구현
• UI 요소 전면 개발
• 검색 및 필터 로직 구현
• 신청 기능 개발
• 문의 기능 개발
• API 연동 및 데이터 구조 정리
• 인터랙티브 프리뷰 기능 구현

(4) 분석 및 운영 지원
• GA4 이벤트 개발 반영
• 사용자 행동 기반 데이터 수집 구조 설계

2) 주요 기능
• 검색 기능
• 조건별 필터링(가격, 소요시간, 키워드 등)
• 프로그램 상세 정보 제공
• 찜하기 기능
• 신청 기능
• 문의 기능
• 인터랙티브 프리뷰(뮤지컬 테라피 데모 체험)

3) 주안점
프로그램 선택의 진입장벽을 낮추고, 상담 이전에
프로그램의 매력을 빠르게 체감할 수 있도록 하는 기능 강화에 중점을 두었습니다.