differz · mgm 바카라(Wishket)

프로젝트 배경

1) 문제점
• 지도자 과정 정보가 흩어져 있어 찾기 불편했음
• 신청 방식이 비공식적이고 관리 어려웠음
• 협회의 전문성과 신뢰도가 온라인에 잘 드러나지 않았음

2) 프로젝트 목표
• 지도자 교육과 신청 정보를 한곳에 모은 공식 홈페이지 구축
• 강사 소개, 교육 일정, 자격 안내 등 통합 제공
• 협회 브랜드 신뢰도 향상 및 지원자 접근성 개선

3) 주안점
• 정보 구조화로 사용자 편의성 강화
• 지도자 개별 페이지로 전문성 강조
• 확장 가능한 구조로 기능 추가 대비
• 반응형 웹으로 접근성 확보

프로젝트 성과

공식 정보 허브 구축

흩어져 있던 지도자 과정, 신청 절차, 교육 일정 등을 하나의 플랫폼에 통합하여 정보 접근성 개선

신청 프로세스 디지털화

지도자 신청을 온라인 폼 기반으로 전환해 관리 효율성과 사용자 편의성 향상

지도자 브랜드 강화

지도자별 프로필 페이지를 통해 소속감 부여 및 협회 소속 강사의 전문성 시각적으로 전달

반응형 웹으로 사용성 확대

모바일 및 태블릿 환경에서도 동일한 정보 탐색이 가능하도록 최적화

확장 가능성 고려한 설계

향후 강의 영상, 자격증 발급 등 기능 추가를 고려한 구조로 구축하여 지속 운영 기반 마련

핵심 기능

지도자 소개 페이지

– 협회 소속 지도자들의 프로필을 개별 페이지로 구성하여 전문성과 신뢰도 강조

온라인 지도자 신청 폼

– 지도자 과정 신청을 손쉽게 할 수 있는 온라인 신청 폼 제공
– 신청 내역은 자동 정리되어 운영자 확인 가능

교육 일정 안내 섹션

– 정기적인 교육 일정 및 장소 정보를 보기 쉽게 정리해 수강 편의성 향상

반응형 웹 구현

– 데스크톱, 태블릿, 모바일에서도 최적화된 UI 제공으로 접근성과 사용성 강화

Framer 기반의 부드러운 인터랙션

– Framer의 기능을 활용한 부드러운 전환 효과와 사용자 친화적인 인터페이스 구현

진행 단계

요구사항 정리 및 목표 설정

2024.09.

– 협회의 목적, 주요 콘텐츠(지도자 소개, 신청 등), 필요한 기능 정리
– 브랜드 신뢰도 향상과 신청 절차 간소화를 목표로 설정

정보 설계 및 와이어프레임 구성

2024.09.

– 페이지 흐름 및 사용자 동선 기획
– 지도자 신청 중심의 간단명료한 구조로 정보 설계

디자인 및 인터랙션 작업 (Framer)

2024.09.

– 협회에 어울리는 전문적이고 신뢰감 있는 UI 디자인
– Framer를 활용해 인터랙션 요소 및 애니메이션 적용

기능 구현 및 폼 연동

2024.09.

– 지도자 신청 폼 구현
– 각 지도자별 상세 페이지, 교육 일정 등 동적 콘텐츠 구성

최종 배포 및 운영 지원

2024.10.

– 도메인 연결 및 최종 배포
– Framer에서 직접 운영 가능한 방식으로 관리자 전달 및 운영 가이드 제공

프로젝트 상세

1) 포트폴리오 소개
전문 댄스 지도자 교육과 협회 활동을 위한 공식 홈페이지 개발
협회의 철학과 자격제도, 강사 소개 등 정보를 명확하게 전달하는 플랫폼 구축
• 주 타깃: 댄스 지도자 자격에 관심 있는 일반인, 예비 강사, 현직 댄서

2) 작업 범위
• 기획, 디자인, 프론트엔드 개발 전반
• Next.js + Tailwind 기반 반응형 웹 구축
• 협회 소개 및 지도자 등록 신청 기능 포함
• 모바일 접근성을 고려한 유연한 구조 설계

3) 주요 업무
• 협회 개요 및 비전 소개
• 댄스 지도자 자격 제도 안내 페이지 구성
• 강사진/지도자 목록 및 프로필 상세 페이지
• 온라인 신청·등록 폼 제작 (구글폼 또는 자체 연동)
• 공지사항, 활동 갤러리, 교육일정 소개 섹션
• 반응형 디자인 및 쉬운 탐색을 위한 UX 구조

4) 주안점
• 전문성과 신뢰를 전달하는 레이아웃 및 UI 톤 설정
• 복잡한 정보를 사용자가 쉽게 이해할 수 있도록 정보 구조화
• 추후 강의 영상, 수료증 자동화 등 확장 고려한 설계
• 지도자 개별 페이지를 통해 브랜딩 강화 및 소속감 부여