헤드스파 홈페이지 제작기, 두피부터 보고 쉬게 하는 숲
요약 헤드스파 홈페이지 제작에서 저희가 가장 먼저 정한 것은 "씻기 전에 먼저 두피를 보고, 그날의 두피에 맞춰 쉬게 한다"는 한 문장이었습니다. 숲헤드스파는 실제 고객이 아니라, 블러썸팩토리가 서울 연남동의 가상 헤드스파를 정하고 실제 의뢰처럼 원장님의 강점부터 잡아 만든 포트폴리오 홈페이지입니다. 수증기가 걷히는 첫 화면, 직접 움직여 보는 두피 진단 렌즈, 물방울이 흐르는 진행 과정을 왜 이렇게 설계했는지 디자이너가 직접 풀어 드립니다.
연남동의 가상 헤드스파, 강점을 이렇게 정했습니다
헤드스파를 찾는 분들의 마음은 두 겹입니다. 겉으로는 "좀 쉬고 싶다"이지만, 그 아래에는 당기는 두피, 오후면 가라앉는 정수리, 샴푸만 바꿔도 가려운 예민함, 가늘어진 것 같은 머리카락 같은 각자의 고민이 있습니다. 그런데 대부분의 헤드스파 홈페이지는 쉼만 보여 주고 고민에는 답하지 않습니다.
그래서 가상의 헤드스파 '숲'을 정하고, 12년 동안 두피 관리를 해 온 한서준 원장이라는 가상 인물에게 강점 하나를 주었습니다. "관리 전에 원장이 두피를 확대해서 직접 보고, 그날의 두피 상태에 맞춰 스파를 설계한다"입니다. 진단부터 마무리까지 원장 한 사람이 1:1로 맡는다는 점도 함께 묶었고, 이 문장이 모든 섹션의 기준이 되었습니다.
사진은 포트폴리오라서 연출 사진(AI 생성 이미지와 무료 사진)을 썼습니다. 실제 제작에서는 원장님과 관리 룸, 확대 스코프로 두피를 보는 장면을 저희가 직접 촬영합니다. 손길을 맡기는 곳일수록 누가 내 머리를 만지는지 얼굴로 보여 주는 것이 가장 큰 안심이 됩니다.
첫 화면과 진단 렌즈: 쉬게 하기 전에 먼저 들여다보게
사이트를 열면 화면 전체가 안개로 덮여 있고, 그 위에 로고가 그려집니다. 이어서 안개가 원형으로 걷히며 스팀 아래에서 눈을 감은 고객의 사진이 드러납니다. 헤드스파의 첫 감각은 따뜻한 김과 물소리라서, 사진을 그냥 띄우기보다 수증기 속에서 천천히 나타나게 했습니다. 인트로가 끝난 뒤에도 김이 은은하게 피어오르고, 유리에 맺힌 물방울이 가끔 흘러내립니다.
제목은 "두피부터 보고, 쉬게 합니다." 한 줄입니다. '쉬게 합니다'만 쓰면 다른 곳과 구별되지 않고, '진단'만 앞세우면 쉬러 온 분에게 딱딱합니다. 그래서 순서를 문장에 그대로 담았고, 오른쪽 아래에 '확대 진단 관리 전 10분, 원장 1:1 직접, 프라이빗 2실' 카드를 두어 감성적인 사진 옆에서 구체적인 사실이 함께 읽히게 했습니다.
바로 아래에는 "대부분의 헤드스파는 물부터 틉니다. 숲은 먼저 봅니다."라는 문장이 스크롤에 맞춰 한 단어씩 짙어집니다. 읽는 속도를 일부러 늦춰 이 차이가 머리에 남게 하려는 장치입니다.
가장 공들인 곳은 그다음의 두피 진단 렌즈입니다. "관리 전에 확대해서 봅니다"를 글로만 쓰면 지나치기 쉬워서, 방문자가 그 경험을 미리 해 보게 만들었습니다. PC에서 커서를 움직이면 원형 확대 렌즈가 두피 사진 위를 따라다니고, 네 구역을 지날 때마다 '각질과 당김', '피지와 유분 많음', '붉은 기와 예민', '모발 굵기 가늘어짐' 라벨이 뜹니다. 옆 카드의 수분, 유분, 각질, 예민도 게이지와 추천 코스도 함께 바뀌고, '코스 보기'를 누르면 아래 코스 탭의 해당 타입으로 내려갑니다.
헤드스파는 의료기관이 아니므로 화면의 수치를 검사 결과처럼 받아들이면 곤란합니다. 그래서 카드 아래에 "화면의 수치는 이해를 돕기 위한 예시입니다. 의료적 진단이 아닌 관리 설계를 위한 확인입니다."라고 적고, 탈모 고민 코스에는 "의료적 확인이 필요해 보이면 병원 상담을 먼저 권해 드립니다"를 넣었습니다. 솔직하게 선을 긋는 문장이 오히려 믿을 이유가 됩니다.
디자인 언어: 숲의 물과 수증기를 색으로
색은 딥 포레스트(#0E1F18)와 파인(#1C3A2D)을 어두운 바탕으로, 안개(#E9EEE9)와 미스트 화이트(#F6F7F3)를 밝은 바탕으로 쓰고 세이지(#A7BBA5)로 그 사이를 이었습니다. 버튼에는 웜 우드(#D4B791)를 써서 차가운 초록에 손의 온기를 더했습니다. 금색과 검정으로 고급스러움을 내는 흔한 스파 공식도 있지만, 숲이라는 이름과 연남동의 정원 같은 분위기에는 초록과 나무색이 더 잘 맞았습니다.
제목은 한글 세리프 Hahmlet의 가는 굵기로 느린 호흡을 만들고, 본문은 Pretendard로 맞췄습니다. 렌즈의 좌표와 수치에는 Azeret Mono를 써서 정밀함을 주었습니다. 부드러운 세리프와 기계 같은 고정폭 글꼴이 한 화면에 있는 것이 곧 '쉼과 진단'이라는 이 업체의 두 얼굴입니다. 어두운 진단 섹션과 밝은 코스 섹션을 번갈아 놓아 스크롤에 물결 같은 리듬도 주었습니다.
| 요소 | 고른 것 | 이유 |
|---|---|---|
| 바탕색 | 딥 포레스트와 안개 화이트를 번갈아 | 진단은 집중되게, 쉼은 가볍게 |
| 포인트 색 | 웜 우드 | 초록의 차가움에 손의 온기를 더하기 |
| 제목 글꼴 | Hahmlet 가는 세리프 | 천천히 숨 쉬는 듯한 속도감 |
| 수치와 라벨 | Azeret Mono | 확대 스코프 화면 같은 정밀함 |
| 효과 | 수증기, 물방울, 확대 렌즈 | 헤드스파의 감각과 강점을 함께 보여 주기 |
섹션 구성: 쉬러 온 마음과 두피 고민을 함께 풀기
| 섹션 | 담은 것 | 풀어 주는 망설임 |
|---|---|---|
| 숲의 순서 | 먼저 보는 이유, 200배·1:1·4타입 | 다른 헤드스파와 뭐가 다를까 |
| 두피 진단 렌즈 | 구역별 상태, 수치 게이지, 추천 코스 | 내 두피를 제대로 봐 줄까 |
| 타입별 코스 | 건성, 지성, 민감, 탈모 고민 네 코스와 가격대 | 나한테 맞는 코스를 모르겠다 |
| 진행 과정 | 진단, 클렌징, 스파, 마무리 네 단계와 시간 | 처음 가면 무엇을 하게 될까 |
| 원장 소개와 공간 | 12년 경력, 한마디, 프라이빗 룸 2실 | 누가 만질까, 북적이진 않을까 |
코스 탭을 누르면 "두피가 자주 당기고, 하얀 각질이 어깨에 떨어지는 분께"처럼 고객이 자기 모습을 알아보는 문장이 먼저 나오고, 관리 내용과 소요 시간, 가격대, 권장 주기가 이어집니다. 아래에는 첫 방문 진단과 미니 스파(50분, 6만 원대)부터 모든 코스를 한 장의 표로 정리했습니다. 가격을 숨기면 문의 전에 떠나는 분이 많아서, 가격대는 처음부터 보이게 하고 정확한 금액은 진단 후 안내한다고 적었습니다.
진행 과정은 네 장의 카드 위로 물방울 하나가 스크롤에 맞춰 흘러가며 선을 채우게 했습니다. 마지막 단계에 "다시 확대해 보며 집에서의 관리 습관을 알려 드립니다"를 적어, 처음에 본 두피를 끝에서 다시 본다는 흐름을 완성했습니다. 원장 소개는 "씻기 전에 먼저 봅니다. 그래야 무엇을 덜어낼지 알 수 있으니까요."를 크게 걸고, 이어지는 공간 섹션에서 "한 번에 한 분만"을 다시 보여 줍니다.
휴대폰 화면과 검색 세팅
헤드스파는 퇴근길이나 주말 약속 전에 휴대폰으로 찾는 경우가 대부분입니다. 모바일에서는 사진을 세로로 크게 잘라 얼굴과 수증기가 화면을 채우게 했고, 화면 아래에는 '전화'와 '진단 포함 예약하기' 버튼을 늘 붙여 두었습니다. 커서가 없으니 진단 렌즈는 스크롤에 맞춰 스스로 네 구역을 지나가게 바꿨고, 게이지는 두 줄 두 칸으로 다시 짜서 숫자가 작아지지 않게 했습니다.
페이지 제목은 "숲헤드스파 · SUP Head Spa — 두피부터 보고, 쉬게 합니다"로, 설명 문구에는 "관리 전 두피를 확대 진단", "연남동 1:1 예약제 헤드스파"를 담았습니다. 실제 제작에서는 "연남 헤드스파", "홍대 두피관리"처럼 고객이 실제로 치는 검색어를 제목과 소제목에 넣고, 코스마다 설명 글을 만들어 두피관리 홈페이지로서도 잡히게 합니다. 첫 화면 외 이미지는 지연 로딩하고, 움직임 줄이기 설정을 켠 기기에서는 효과를 줄입니다.
포트폴리오 자체는 가상 업체라 noindex로 검색에서 빼 두었습니다. 실제 의뢰라면 업체 정보를 담은 구조화 데이터를 넣고 네이버 서치어드바이저와 구글 서치 콘솔에 등록한 뒤 검색 노출용 칼럼을 함께 발행합니다. 헤드스파와 피부관리실에 맞춘 구성은 「피부관리실 홈페이지 제작」에 따로 정리해 두었습니다.
제작은 원장님 인터뷰로 시작해 강점 한 문장, 섹션과 코스 구조, 직접 촬영, 디자인과 효과, 검색 세팅 순으로 진행하고, 오픈 후에는 예약 버튼 클릭 같은 숫자를 함께 확인합니다. 비용은 330만 원(부가세 포함)이며 직접 촬영이 포함되고 페이지 수와 수정 횟수에 제한이 없습니다. 검색 노출용 칼럼 6편과 오픈 후 3개월 유지보수도 무료이고, 이후 유지보수 정기권은 월 110만 원입니다. 다른 업종 사례는 홈페이지 포트폴리오에서 보실 수 있고, 우리 헤드스파에 어떤 장치가 맞을지는 무료 상담으로 먼저 물어보셔도 됩니다.
자주 묻는 질문
헤드스파 홈페이지 제작 비용은 얼마인가요?
블러썸팩토리는 330만 원(부가세 포함)이며 직접 촬영, 페이지와 수정 횟수 제한 없음, 검색 노출용 칼럼 6편, 오픈 후 3개월 유지보수가 포함됩니다.
두피 진단 기기가 없어도 이런 홈페이지를 만들 수 있나요?
네, 진단 렌즈는 강점을 보여 주는 한 가지 방법일 뿐이며 인터뷰에서 원장님 헤드스파만의 강점을 찾아 그에 맞는 장치를 설계합니다.
수증기 같은 효과가 많으면 휴대폰에서 느리지 않나요?
첫 화면 외 이미지는 지연 로딩하고 효과는 가벼운 캔버스 연출로 만들어, 휴대폰에서 직접 확인한 뒤 오픈합니다.
코스와 가격이 바뀌면 수정해 주시나요?
오픈 후 3개월은 무료로 수정해 드리고, 이후에는 유지보수 정기권으로 코스 구성과 가격, 이벤트 변경을 맡기실 수 있습니다.
헤드스파도 마케팅 대행까지 맡길 수 있나요?
마케팅 대행은 병의원 전문으로만 진행하지만, 홈페이지 제작과 유지보수 정기권은 헤드스파를 포함해 업종과 상관없이 맡기실 수 있습니다.