2025.11 - 2025.12
Chap Landing
브랜드 메시지 전달과 앱 다운로드 유도를 동시에 만족시키는 랜딩 페이지를 구현했습니다.
역할
랜딩 페이지 FE 전담
기술
Next.js / TypeScript / Tailwind CSS
문제 상황
서비스의 핵심 메시지가 산발적으로 배치되어 첫 화면에서 전달력이 약했고, 다운로드 유도도 분산되어 있었습니다.
해결 방식
메시지 우선순위를 재정의하고 CTA 위치를 집중시켜 한 번의 스크롤 안에서 핵심 정보가 모두 읽히도록 구성했습니다.
구현 포인트
- 첫 화면에 핵심 가치 제안과 CTA를 함께 배치해 정보 탐색 비용을 줄였습니다.
- 브랜드 톤에 맞춘 타이포그래피와 간격 시스템을 Tailwind 유틸리티로 정리했습니다.
- 모바일과 데스크톱에서 메시지 계층이 유지되도록 반응형 레이아웃을 설계했습니다.
트러블슈팅
처음에는 섹션별 스타일 차이가 커서 브랜드 인상이 약했는데, 공통 간격과 타이포 토큰을 기준으로 전체 톤을 다시 맞췄습니다.