여행 박람회 프로모션 웹
서비스 기획·UX/UI
D06 · WEB · BRAND
제품·시연 사례제공된 제품 화면 · 예시 데이터
온라인 교육 웹사이트
강의 카탈로그와 상세 정보, 강사 소개, 수강 상품·가격을 탐색하도록 구성한 교육 웹 프론트엔드입니다. 교육 콘텐츠의 선택을 돕는 화면과 반응형 탐색을 다뤘습니다.
- 사례
- 강의 탐색 및 수강 상품 소개 교육 웹사이트
- 수행 유형
- 제품·시연 사례
- 작업 범위
- 교육 메인 · 강의 탐색·상세 · 강사 소개 · 수강 상품·가격 · 반응형
- 자료
- 제공된 제품 화면 · 예시 데이터
강의 정보를 비교하며 탐색하는 흐름
메인에서 강의 탐색으로 이어지고 강의·강사·가격 정보를 함께 살펴볼 수 있도록 구성했습니다. 강의 카탈로그에는 검색과 분류, 수준·시간·가격·평점 정보, 상세 모달을 포함합니다.
강사 소개와 참여 양식
강사의 소개와 전문 분야, 강의 관련 정보를 카드에 묶고 강사 참여 양식을 별도로 구성했습니다. 이름과 이메일, 가르칠 내용을 입력하는 경로를 통해 정보를 읽는 화면과 참여 행동을 연결했습니다.
수강 상품의 차이를 읽기 쉽게
플랜별 가격과 제공 항목을 나란히 비교하고 주요 선택지를 구분했습니다. 취소·팀 플랜·체험 등에 관한 FAQ를 함께 배치해 수강 상품 선택에 필요한 내용을 모았습니다. 타입이 정의된 강의·강사·플랜 데이터를 바탕으로 만든 반응형 교육 소개·탐색 프론트엔드입니다.
PROJECT INFO
- 제작: 쿤웍스
- 제품: 교육 웹사이트 프론트엔드
- 기술: React · TypeScript · Vite · Tailwind CSS
비슷한 일을 준비 중이라면.이 사례 정보가 문의서에 함께 담깁니다.
MORE · WEB · BRAND
같은 분야의 다른 사례
우리 업무에 적용한다면.
이 사례 정보가 문의서에 함께 담깁니다.