Joy Nails & Spa

살롱은 이미 Milano Cloud로 예약을 받고 있고, 직원들도 그 화면에 익숙합니다. 예약을 새로 만들었다면 예약 정보가 두 군데로 갈라지고 직원들은 새 시스템을 처음부터 익혀야 했을 것입니다. 고객에게 돌아가는 것 없이 비용과 위험만 생기는 일입니다.

그래서 사이트는 쓰던 예약 포털로 링크를 겁니다. 대신 필요할 만한 자리에는 빠짐없이 걸어 두었습니다. 첫 화면과 헤더, 푸터, 모바일 메뉴, 서비스 섹션, 그리고 Dazzle Dry 프로모션까지입니다. 이 연동은 링크 하나이고, 그게 이 문제에 필요한 전부입니다.

살롱의 콘텐츠는 서비스와 영업시간, 주소, 후기 정도이고 좀처럼 바뀌지 않습니다. 게다가 고객의 수정 요청은 SERVITH를 거쳐서 들어옵니다. CMS를 넣으면 호스팅 비용과 관리자 화면, 그리고 공격받을 자리가 늘어날 뿐인데, 정작 풀 문제가 없습니다. 그래서 콘텐츠는 타입이 붙은 설정 파일에 두었고, 수정할 일이 생기면 몇 줄 고쳐서 다시 배포하면 끝납니다.

런타임 의존성은 next, react, react-dom이 전부입니다. UI 라이브러리도, 애니메이션 라이브러리도, 애널리틱스도, 폼 라이브러리도 없습니다. 스크롤에 맞춰 나타나는 효과나 숫자가 올라가는 애니메이션, 맨 위로 가는 버튼은 프레임워크를 들일 이유가 아니라 작은 컴포넌트로 직접 만들 일이었습니다.

일부러 그렇게 했습니다. 살롱 사이트는 휴대폰에서, 그것도 종종 데이터를 쓰면서, 근처 두 곳을 놓고 고민하는 중에 열립니다. 이런 자리에서는 페이지 무게가 곧 전환율입니다.

설정 모듈 하나에 사이트 주소와 상호, 주소, 전화번호, 인스타그램 계정, 예약 링크, 그리고 색인할 페이지 목록을 담았습니다. 여기서 메타데이터와 사이트맵, robots, JSON-LD가 전부 만들어집니다. 살롱 주소는 코드 어디에도 두 번 나오지 않고, 화면에 보이는 모든 주소가 이 한 곳에서 나옵니다.

next/image 최적화는 끄고, 이미지는 PowerShell 스크립트로 미리 최적화해서 넣습니다. 원본은 최적화한 결과물과 나란히 보관합니다. 갤러리가 큰 비중을 차지하는 살롱 사이트가 최적화 서버를 거치지 않고도 빠른 이미지를 갖게 되고, 덕분에 완전한 정적 빌드도 가능해졌습니다.

동네 가게에게는 이 부분이 곧 마케팅입니다.

Home은 따로 두고, 나머지 페이지(About, Services, Lookbook, Testimonials, Contact)는 레이아웃을 함께 씁니다. 서비스 내용은 살롱이 실제로 파는 방식을 그대로 옮겼습니다. 핸드 케어와 인조 네일, 폴리시 체인지, 풋 케어, 그리고 살롱이 파트너로 두고 있는 Dazzle Dry 전용 코너를 넣었습니다. 독성이 없고 UV 램프가 필요 없으며 5분이면 마르는 제품입니다.