Chéri Nails Website
Project Case Study
Chéri Nails Website
에토비코(토론토) 럭셔리 네일 살롱을 위한 마케팅 웹사이트. 브랜드 톤(럭셔리/힐링)을 유지하면서도 서비스 메뉴와 가격을 투명하게 제시하고, Lookbook(작업 갤러리)와 Contact 폼을 통해 예약/문의 전환을 강화했다. 1개월 내 1인 개발.
라이브 프로젝트 보기 →개요
Chéri Nails 웹사이트는 “럭셔리 네일 스튜디오” 브랜드 톤을 유지하면서, 방문자가 가장 빠르게 원하는 정보를 얻고(서비스/가격/스타일), 곧바로 행동(문의/예약)할 수 있도록 설계한 로컬 비즈니스 마케팅 사이트입니다.
첫 화면은 “A LUXURY NAIL STUDIO” 헤드라인과 함께 “Indulge in expert nail care…” 메시지로 감성 톤과 전문성을 동시에 전달하고, Learn More About Us로 자연스럽게 스크롤 탐색을 유도합니다.
본 프로젝트는 개발 기간 1개월, 1인 개발로 구축했습니다.
목표
브랜드 무드(럭셔리/정갈/힐링)를 첫 화면에서 즉시 전달
서비스 선택 과정에서 가장 큰 불확실성(가격)을 투명하게 제시해 신뢰 확보
Lookbook으로 “내가 원하는 스타일을 하는 곳인지”를 빠르게 확인 가능하게 구성
Testimonials로 사회적 증거(신뢰 신호)를 보강
Contact 섹션에서 위치/연락처/폼 제출을 한 번에 제공해 문의 전환을 단축
EN/KR 토글 기반의 다국어 확장 가능 구조 제공
정보 구조(IA)
상단 내비게이션은 방문자 의사결정 순서에 맞춰 구성했습니다.
Services: 카테고리별 서비스/가격표
Lookbook: 작업 결과(스타일) 갤러리
Testimonial: 고객 후기
Contact Us: 위치/연락처/문의 제출
이 구조는 “여기 어떤 곳인지 → 가격은 어떤지 → 스타일은 내 취향인지 → 바로 연락/예약” 흐름을 최소 클릭으로 연결합니다.
핵심 UX 결정
1) 브랜드 톤을 먼저 고정하고, 정보 탐색은 스크롤로 자연스럽게
Hero 카피와 이미지(마퀴 marquee)로 무드를 먼저 만들고, “Learn More About Us”로 사용자에게 “부담 없는 탐색”을 제시했습니다.
2) Services는 ‘카테고리 + 가격’ 중심으로 설계
Services는 “Where nails become art.” 메시지 아래, 다음과 같은 카테고리로 분리해 스캔이 가능하도록 구성했습니다.
Natural Nails
Kids Nails (Under 12 Years Old)
Nail Extensions
Dipping Powder
Extra Nail Services
각 카테고리에는 대표 항목과 가격(예: Blush Pedicure, Shellac Manicure 등)이 함께 표기되어 선택 불확실성을 줄입니다.
또한 각 섹션에 Book Now를 배치해 “결정한 순간”에 바로 행동하도록 연결했습니다.
3) Lookbook은 ‘설명보다 결과’로 설득
Moment Of Us(갤러리) 섹션에서 다양한 네일 디자인을 이미지 중심으로 제시해, 사용자가 스타일 적합성을 빠르게 판단할 수 있게 했습니다.
4) Testimonials로 신뢰 보강
Client Love 섹션을 별도로 두어 “완성도 + 케어 경험”을 강조하는 문장 구조로 신뢰 신호를 강화했습니다.
5) Contact는 ‘채널 선택 + 제출’까지 한 화면에서
Visit Us 섹션에서 공간 경험을 소개한 뒤, 주소/이메일/전화 정보와 Submit 폼을 함께 제공해 문의 전환 동선을 짧게 유지했습니다.
기술 구현
스택
| 영역 | 구현 | 비고 |
|---|---|---|
| 프레임워크 | Next.js 15.1 + React 19 | 마케팅 사이트에 적합한 구조 및 성능 기본값 |
| 언어 | TypeScript | 컴포넌트/콘텐츠 계약 안정화 |
| 스타일 | Tailwind CSS 3 | 빠른 반복과 일관된 디자인 토큰 |
| i18n | next-intl | EN/KR 토글 및 locale 기반 확장 |
| 문의 운영 | Nodemailer | 문의 폼 이메일 전송 |
| 스팸 방어 | reCAPTCHA Enterprise | 폼 악용/봇 제출 리스크 완화 |
| 최적화 | @next/bundle-analyzer | 번들 사이즈/성능 위생 유지 |
| SVG | @svgr/webpack | 로고/아이콘을 컴포넌트로 관리 |
구현 하이라이트
“섹션형 랜딩” 패턴(About → Services → Lookbook → Testimonial → Contact)으로 확장/수정이 쉬운 구조
Book Now CTA 반복 배치로 행동 유도 시점을 페이지 곳곳에 분산
문의 폼 운영을 고려한 “메일 전송 + 봇 방어” 조합
이 프로젝트가 보여주는 것
뷰티/로컬 비즈니스에서 중요한 브랜드 톤 + 가격 투명성 + 결과(포트폴리오) + 즉시 전환 흐름을 한 페이지 내에서 정리하는 역량
next-intl 기반 다국어 구조와 운영 가능한 문의 폼(메일/스팸 방어)까지 포함한 실무형 구현
1개월 내 1인 개발로 런칭 가능한 품질을 빠르게 만들고, 이후 개선을 이어갈 수 있는 구조 설계
Live: https://cherinails.servith.com/
Timeline: 1 month
Role: Solo delivery (IA → UI → i18n → contact operations)