■ 프로젝트 개요
에스테틱 1인샵 랜딩페이지를 제작하며, 정보 나열 중심이던 기존 화면을 신뢰 → 이해 → 행동 흐름으로 재구성한 프로젝트이다.
■ 문제
핵심 메시지, 모바일에서 예약·상담가 눈에 띄지 않은 문제
■ 역할
콘텐츠 흐름 재정의하여 페이지 구조 기획 및 HTML/CSS 기반 반응형 랜딩페이지 구현
■ 해결 방식
페이지를 다음 흐름으로 재구성
- 첫 화면에서 신뢰 요소 명확화
- 1:1 프라이빗 케어, 전문성, 평점 등 핵심 정보 전면 배치
- CTA 위치 재설계
- 스크롤 위치와 관계없이 접근 가능한 고정(Fixed) CTA 버튼을 적용
- 모바일에서는 접근성을 우선 고려
- 정보 구조 단순화
- 서비스 설명을 묶음 단위로 정리
- 불필요한 장식 요소 제거
- 외부 공유 최적화
- 카카오톡 공유 시 미리보기가 안정적으로 나오도록 OG 구조 점검
■ 사용 기술
- HTML / CSS / JS
- 반응형 레이아웃 설계
- Open Graph 메타 태그 설정
■ 결과 / 배운 점
- 방문자가 페이지 흐름을 따라 자연스럽게 행동하도록 유도할 수 있었다.
- “예쁜 화면”보다 구조와 동선이 전환에 더 중요하다는 점을 다시 확인했다.
- 소규모 비즈니스 랜딩에서는 과한 기능보다 명확한 메시지가 핵심이라는 것을 체감했다.