프로젝트 배경
[문제점]
영어 원서 교육 프로그램 'Sparklish'의 인지도 및 접근성 부족
교육 프로그램의 핵심 가치와 차별점을 효과적으로 전달할 디지털 플랫폼 부재
학부모들의 교육 의사결정을 위한 객관적 성과 지표 전달 채널 미흡
교육 서비스 상담/신청을 위한 간편한 접점 부족
모바일 사용자를 위한 최적화된 정보 전달 방식 필요
[프로젝트 목표]
'Sparklish' 브랜드 가치와 교육적 효과 전달 위한 매력적 랜딩페이지 구축
학부모/교육기관의 신뢰 형성 위한 성과 중심 콘텐츠 설계
모바일 사용자 경험 최적화로 접근성 향상
상담 신청 전환율 증대를 위한 직관적 CTA 구현
SEO 최적화로 유기적 트래픽 증대
[주안점]
타겟 감성 접근: 학부모의 교육적 관심사/니즈 반영한 메시지 설계
신뢰성 강화: 객관적 성과 지표 시각화 및 전문적 디자인 적용
직관적 정보 전달: 아이콘/인포그래픽 활용한 교육 효과 명확화
모바일 최적화: 다양한 디바이스 환경 고려한 반응형 디자인
성능 최적화: Next.js 기반 빠른 로딩 속도와 SEO 친화적 구조
전환 유도: 카카오톡 상담 연결 등 명확한 행동 유도 요소 배치
영어 원서 교육 프로그램 'Sparklish'의 인지도 및 접근성 부족
교육 프로그램의 핵심 가치와 차별점을 효과적으로 전달할 디지털 플랫폼 부재
학부모들의 교육 의사결정을 위한 객관적 성과 지표 전달 채널 미흡
교육 서비스 상담/신청을 위한 간편한 접점 부족
모바일 사용자를 위한 최적화된 정보 전달 방식 필요
[프로젝트 목표]
'Sparklish' 브랜드 가치와 교육적 효과 전달 위한 매력적 랜딩페이지 구축
학부모/교육기관의 신뢰 형성 위한 성과 중심 콘텐츠 설계
모바일 사용자 경험 최적화로 접근성 향상
상담 신청 전환율 증대를 위한 직관적 CTA 구현
SEO 최적화로 유기적 트래픽 증대
[주안점]
타겟 감성 접근: 학부모의 교육적 관심사/니즈 반영한 메시지 설계
신뢰성 강화: 객관적 성과 지표 시각화 및 전문적 디자인 적용
직관적 정보 전달: 아이콘/인포그래픽 활용한 교육 효과 명확화
모바일 최적화: 다양한 디바이스 환경 고려한 반응형 디자인
성능 최적화: Next.js 기반 빠른 로딩 속도와 SEO 친화적 구조
전환 유도: 카카오톡 상담 연결 등 명확한 행동 유도 요소 배치
핵심 기능
메인 비주얼 섹션
영어 원서 교육의 가치 전달하는 헤드라인
학습 경험을 시각화한 이미지/영상 요소
즉각적 행동 유도 CTA 배치
학습 경험을 시각화한 이미지/영상 요소
즉각적 행동 유도 CTA 배치
서비스 핵심 가치 전달 섹션
아이콘 기반 3-4개 핵심 교육 가치 제시
원서 읽기 방법론 시각적 설명
타 영어 교육과의 차별점 강조
원서 읽기 방법론 시각적 설명
타 영어 교육과의 차별점 강조
성과 지표 시각화 섹션
만족도 95%, 협력학교 500개 등 핵심 지표 인포그래픽
학습 효과 데이터 시각화
신뢰 요소(인증/수상 내역) 제시
학습 효과 데이터 시각화
신뢰 요소(인증/수상 내역) 제시
학습 효과 설명 섹션
단계별 학습 과정 시각화
실제 학습자 피드백/사례 제시
교육적 효과의 과학적 근거 제공
실제 학습자 피드백/사례 제시
교육적 효과의 과학적 근거 제공
카카오톡 상담 CTA 섹션
원클릭 카카오톡 상담 연결 버튼
간편 정보 입력 폼
문의 후 프로세스 안내
간편 정보 입력 폼
문의 후 프로세스 안내
진행 단계
기획 및 전략 수립
2025.05.
타겟 페르소나 분석/니즈 파악
핵심 메시지와 USP 도출
정보 구조 및 사용자 흐름 설계
핵심 메시지와 USP 도출
정보 구조 및 사용자 흐름 설계
디자인
2025.05.
브랜드 아이덴티티 반영한 디자인 시스템 구축
핵심 섹션별 시각적 요소 디자인
반응형 UI 설계 및 프로토타입 제작
핵심 섹션별 시각적 요소 디자인
반응형 UI 설계 및 프로토타입 제작
개발
2025.05.
Next.js 프로젝트 세팅/기본 구조 개발
반응형 컴포넌트 구현
성과 지표 시각화 구현
카카오톡 상담 연결 기능 개발
반응형 컴포넌트 구현
성과 지표 시각화 구현
카카오톡 상담 연결 기능 개발
테스트 및 최적화
2025.05.
크로스 브라우저/디바이스 호환성 테스트
성능/접근성 최적화
SEO 요소 점검 및 보완
성능/접근성 최적화
SEO 요소 점검 및 보완
배포 및 모니터링
2025.05.
서비스 배포 및 초기 운영
사용자 행동 분석 및 개선점 도출
사용자 행동 분석 및 개선점 도출
프로젝트 상세
1) 포트폴리오 소개
서비스 카테고리: 교육 서비스 랜딩페이지
메인 타깃: 초중고 학생 학부모 및 교육기관 관계자
서비스 개요: 영어 원서 읽기 교육 프로그램 'Sparklish' 홍보용 랜딩페이지 제작
2) 작업 범위
랜딩페이지 기획 및 구성
UI/UX 디자인 및 퍼블리싱
반응형 웹 개발
프론트엔드 개발 (Next.js 기반)
3) 주요 업무
교육 서비스 특성을 반영한 메인 비주얼 구성
서비스 핵심 가치 전달을 위한 섹션별 콘텐츠 배치
신뢰성 강화를 위한 성과 지표 시각화 (만족도 95%, 협력학교 500개 등)
학습 효과 및 혜택을 강조하는 아이콘 기반 정보 전달
카카오톡 상담 연결 CTA 버튼 구현
4) 주안점
학부모의 교육 관심사를 고려한 감성적 메시지 전달
신뢰할 수 있는 교육 브랜드 이미지 구축을 위한 깔끔하고 전문적인 디자인
모바일 환경에서의 최적화된 사용자 경험 제공
빠른 로딩 속도와 SEO 최적화를 고려한 성능 중심 개발
서비스 카테고리: 교육 서비스 랜딩페이지
메인 타깃: 초중고 학생 학부모 및 교육기관 관계자
서비스 개요: 영어 원서 읽기 교육 프로그램 'Sparklish' 홍보용 랜딩페이지 제작
2) 작업 범위
랜딩페이지 기획 및 구성
UI/UX 디자인 및 퍼블리싱
반응형 웹 개발
프론트엔드 개발 (Next.js 기반)
3) 주요 업무
교육 서비스 특성을 반영한 메인 비주얼 구성
서비스 핵심 가치 전달을 위한 섹션별 콘텐츠 배치
신뢰성 강화를 위한 성과 지표 시각화 (만족도 95%, 협력학교 500개 등)
학습 효과 및 혜택을 강조하는 아이콘 기반 정보 전달
카카오톡 상담 연결 CTA 버튼 구현
4) 주안점
학부모의 교육 관심사를 고려한 감성적 메시지 전달
신뢰할 수 있는 교육 브랜드 이미지 구축을 위한 깔끔하고 전문적인 디자인
모바일 환경에서의 최적화된 사용자 경험 제공
빠른 로딩 속도와 SEO 최적화를 고려한 성능 중심 개발

카카오톡 상담 버튼이 화면에 상시 떠있도록 디자인

카카오톡 상담 버튼이 화면에 상시 떠있도록 디자인

카카오톡 상담 버튼이 화면에 상시 떠있도록 디자인

카카오톡 상담 버튼이 화면에 상시 떠있도록 디자인

카카오톡 상담 버튼이 화면에 상시 떠있도록 디자인



