Project Workflow
01
Planning & Research
- 무인키오스크 시장 조사 및 분석
- 타겟 고객 분석 (소상공인, 중소기업)
- 경쟁사 벤치마킹
- 랜딩페이지 목표 설정
02
Concept Development
- 브랜드 아이덴티티 수립
- 블루 컬러 기반 신뢰감 표현
- 사이트 구조 설계 (IA)
- 콘텐츠 구성 계획
03
Design System
- 컬러 팔레트 선정 (#22356F 메인 컬러)
- 타이포그래피 시스템 구축
- 와이어프레임 제작
- 디자인 가이드 작성
04
UI/UX Design
- 랜딩페이지 레이아웃 디자인 (Figma)
- 제품 소개 섹션 구성
- 고객 후기 디자인
- CTA 버튼 최적화
05
Development & Interaction
- HTML/CSS/JavaScript 구현
- 스크롤 애니메이션 적용
- 부드러운 섹션 이동 구현
- 호버 효과 및 인터랙션 추가
06
Testing & Launch
- 크로스 브라우징 테스트
- 반응형 디자인 검증
- 성능 최적화
- 최종 배포 및 GitHub Pages 호스팅
All sections
HTML 문서 내의 a태그를 사용한 부분들에서 'e.preventDefault()'로 바로 점프하는 동작을 막은 후 스크립트로 애니메이션을 제어하서 요소가 화면의 상단이나 중앙에 붙을 수 있도록 JavaScript로 구현했습니다. 'behavior: 'smooth'' 속성을 사용하여 부드럽게 애니메이션처럼 이동하도록 작업했습니다.
Visual
스크롤을 내리면 비주얼의 슬로건이 부드럽게 나타나도록 작업했습니다.
Sections
랜딩페이지의 특성을 고려하여 사용자의 시선을 잡아 끌 수 있도록 여러 섹션들에 다양한 호버 효과를 적용하였습니다.
Header & Viewport
길이가 긴 랜딩페이지의 특성상 헤더를 상단에 고정시키는 속성을 주었습니다. jQuery로 스크롤 위치를 자동으로 계산하여 스크롤이 100px 이상일때는 header에 scrolled 클래스를 추가하여 헤더의 배경색이 변경되고, 그렇지 않으면 제거되도록 작업했습니다. 또한 길이가 긴 랜딩페이지의 속성을 고려하여 스크롤이 300px 이상 내려가면 top 버튼이 나타나도록 하여 최상단으로 바로 이동 가능하도록 설계했습니다.
Review
서비스 이용자들의 실제 후기를 담아 서비스에 대한 신뢰도를 높였습니다. 시각적으로 한눈에 읽기 쉽도록 캐릭터와 말풍선으로 구성하였고, 서비스 선택을 고민하는 방문자가 쉽게 공감할 수 있는 내용들로 구성하여 설득력을 높였습니다.