문제점
• 영어 교육 콘텐츠가 연령·시리즈별로 분산되어 있어, 브랜드 메시지와 학습 가치 전달이 어려움.
• B2B(학교·학원)와 B2C(학부모·학생) 모두를 타깃으로 하는 일관된 UX 구조가 부재.
• 콘텐츠의 전문성과 접근성을 동시에 보여줄 수 있는 시각적 경험 요소 부족.

프로젝트 목표
• 영어 e-Book 중심 교육 플랫폼의 메인 페이지를 구축하여 브랜드 전문성과 접근성을 함께 전달
• 연령대별 대표 콘텐츠를 직관적으로 소개하고, 학습 철학을 시각적으로 표현
• AI 기반 영상 콘텐츠를 결합해 교육 브랜드의 신뢰감과 혁신 이미지를 강화

주안점
• Webflow 기반의 반응형 UI/UX 설계로 학습 콘텐츠의 가독성과 접근성 개선
• 브랜드 신뢰도와 교육적 깊이를 시각적으로 강조하는 디자인 구현
• 비개발자도 쉽게 콘텐츠를 수정할 수 있는 CMS 구조 구축

1) 소개

본 프로젝트는 유아부터 청소년까지 폭넓은 학습 연령층을 대상으로 한
영어 e-Book 콘텐츠 및 학습 플랫폼의 메인 페이지 구축 과제입니다.

B2B(학교, 학원 등 교육기관)와 B2C(학부모, 학생)를 모두 타깃으로 하는 서비스로,
다양한 영어 e-Book 시리즈를 소개하고, 교육 콘텐츠의 전문성과 신뢰감을 효과적으로 전달하는 것을 목표로 했습니다.

서비스의 핵심은 교육 콘텐츠의 깊이 + 플랫폼의 접근성을 강조하는 UX 구조 설계이며,
AI 기반 영상 콘텐츠를 결합하여 브랜드의 학습 철학과 가치를 시각적으로 표현했습니다.


2) 작업 범위

■ 주요 수행 범위
- Webflow 기반 UI/UX 디자인 및 개발
- 메인(마케팅) 페이지 구축 및 콘텐츠 아키텍처 설계
- 커스텀 JavaScript / CSS를 통한 인터랙션 및 애니메이션 구현
- AI 기반 영상 제작 및 Webflow 내 배포
- 반응형 웹 구현 (PC / Tablet / Mobile 환경 최적화)


3) 주요 업무

■ 메인 페이지 설계
- 교육 서비스의 가치와 차별점을 직관적으로 전달하는 랜딩 구조 기획
- 카테고리별 콘텐츠(유아, 초등, 중등, 고등) 및 대표 e-Book 시리즈 전시
- 영어도서관 구성, 도서 추천, 학습 프로그램 소개 섹션 구성

■ 신뢰성 강화 영역
- 대형 브랜드 및 파트너사 로고 노출
- 서비스 실적 및 협력 기관 소개를 통한 브랜드 신뢰도 강화

■ 사용자 경험 중심 설계
- 문의/상담 폼 개발로 고객 전환 포인트 구축
- AI 제작 영상 삽입으로 플랫폼 특장점 시각화
- 스크롤 기반 인터랙션 및 섬세한 전환 애니메이션 구현

■ 기술 구현
- Webflow CMS 구조 설계로 비개발자도 쉽게 콘텐츠 수정 가능
- 커스텀 코드(JavaScript, CSS)를 활용한 고유한 레이아웃 및 모션 구성
- Cloudflare 연동 및 최적화된 반응형 구조로 모든 디바이스에서 안정적 표시


4) 주안점

■ 디자인 & 신뢰감
- 교육 브랜드의 전문성과 안정감을 강조하는 컬러톤 및 비주얼 구성
- 콘텐츠 가독성과 정보 접근성을 고려한 직관적 UI 레이아웃

■ 유지보수 & 확장성
- Webflow의 CMS 기능을 활용해 비개발자도 손쉽게 콘텐츠 업데이트 가능
- 향후 신규 e-Book 시리즈나 영상 추가 시 유연하게 확장 가능한 구조

■ 기술적 완성도
- 커스텀 JavaScript / CSS를 통한 인터랙티브 효과 구현
- AI 영상 콘텐츠 자체 제작으로 차별화된 브랜딩 경험 제공
- 전 디바이스 대응 반응형 설계로 UX 일관성 확보