에스테틱 홈페이지 제작기, 측정한 피부로 시작하는 모아스킨랩
요약 에스테틱 홈페이지 제작에서 저희가 가장 먼저 정한 것은 "느낌 말고, 측정한 피부로 시작합니다"라는 한 문장이었습니다. 모아스킨랩은 실제 고객이 아니라, 블러썸팩토리가 서울 성수동의 가상 피부관리실을 정하고 실제 의뢰처럼 원장님의 강점부터 잡아 만든 포트폴리오 홈페이지입니다. 스캔 라인이 지나가는 첫 화면, 6가지 측정 리포트, 1분 피부 타입 진단, 원소표 성분 카드를 왜 이렇게 설계했는지 디자이너가 직접 풀어 드립니다.
성수동의 가상 스킨케어 랩, 강점을 이렇게 정했습니다
피부관리실을 몇 군데 다녀 본 고객은 비슷한 의심을 품고 있습니다. "지난번엔 이걸 권하고, 이번엔 저걸 권하던데, 정말 내 피부에 맞는 걸까?" 관리를 고르는 기준이 보이지 않으니 권유가 곧 영업처럼 느껴집니다. 새 관리실이 많은 성수에서는 이 의심을 먼저 풀어 주는 곳이 선택받습니다.
그래서 가상의 피부관리실 '모아스킨랩'을 정하고, 12년 동안 피부 분석 한 길을 걸어 온 윤서아 원장이라는 가상 인물에게 강점 하나를 주었습니다. "수분, 유분, 민감도 등 6가지를 먼저 측정하고, 그 수치를 근거로 관리 프로그램을 고르는 랩 방식"입니다. 측정부터 재측정까지 원장 한 사람이 같은 기준으로 본다는 점도 묶었고, 이 문장이 가격표까지 모든 섹션의 기준이 되었습니다.
사진은 포트폴리오라서 연출 사진(AI 생성 이미지와 무료 사진)을 썼습니다. 실제 제작에서는 원장님과 측정 장면, 관리실을 저희가 직접 촬영합니다. 측정이 강점인 곳이라면, 기기 앞에서 원장님이 수치를 설명하는 사진 한 장이 어떤 문구보다 강한 증거가 됩니다.
첫 화면: '느낌'에 줄을 긋고 '측정한 피부'에 형광펜을
사이트를 열면 "Calibrating sensor" 문구와 함께 숫자가 000에서 100%까지 올라가고, 노란 스캔 빛이 화면을 훑고 지나갑니다. 측정기를 켜는 순간을 흉내 낸 인트로입니다. 보정이 끝나면 제목의 '느낌'에 취소선이 그어지고 '측정한 피부'에 노란 형광펜이 칠해집니다. 무엇을 버리고 무엇을 택했는지를 첫 3초 안에 보여 주고 싶었습니다.
오른쪽 사진 위로는 스캔 라인이 오르내리고, 커서를 따라 조준선이 움직이며 좌표와 수분 수치가 실시간으로 바뀝니다. 수분, 유분, 민감도 원형 게이지는 숫자를 세며 차오릅니다. 사진 아래에는 'Fig. 01 측정 화면 예시'와 '예시 수치'를 적어 실제 고객 결과로 오해하지 않게 했고, 버튼은 '첫 방문 피부 측정 예약'과 '1분 피부 타입 진단' 두 개로 줄였습니다.
디자인 언어: 색 하나하나가 데이터의 뜻을 갖도록
가장 엄격하게 지킨 규칙은 색의 의미입니다. 클린 화이트(#FBFCF7) 바탕에 실험실 모눈종이 같은 옅은 격자를 깔고, 글자는 잉크(#141B18)로 잡았습니다. 시트러스 옐로(#F5D63D)는 '측정 포인트와 내 수치'에만, 소프트 민트(#BDE8D5)는 '적정 범위'에만 썼습니다. 한 가지 뜻에만 쓰면 방문자는 리포트를 보자마자 "노란 점이 민트 밖에 있으니 관리가 필요하구나"를 설명 없이 이해합니다.
피부관리실 홈페이지 디자인이라고 하면 보통 핑크와 베이지, 꽃을 먼저 떠올립니다. 편안하지만 이 업체의 강점인 정확함은 말해 주지 못합니다. 그래서 굵은 Pretendard Variable 헤드라인에 Instrument Sans 숫자, Martian Mono 측정 라벨을 짝지어 실험 리포트 같은 정밀함을 만들고, 레몬과 젤 텍스처 사진으로 상큼함을 더해 차가운 병원처럼 보이지 않게 했습니다.
| 요소 | 고른 것 | 이유 |
|---|---|---|
| 바탕 | 클린 화이트와 모눈종이 격자 | 실험 노트 위에서 내 피부를 보는 느낌 |
| 시트러스 옐로 | 측정 포인트와 내 수치에만 | 노란색이 곧 '내 숫자'로 읽히게 |
| 소프트 민트 | 적정 범위에만 | 범위 안인지 밖인지 한눈에 |
| 라벨 글꼴 | Martian Mono | 측정 기기 화면 같은 정밀함 |
| 사진 | 레몬, 젤 텍스처, 밝은 관리실 | 숫자의 딱딱함을 상큼함으로 풀기 |
측정 리포트와 1분 진단: 고객이 스스로 납득하게
원장 소개 다음에는 "무엇을 재는지, 먼저 보여 드립니다." 섹션을 두었습니다. 측정 기기를 볼에 댄 사진 옆에 예시 리포트를 놓고, 수분, 유분, 민감도, 모공, 탄력, 톤 균일도 6개 항목마다 민트색 적정 범위 위로 내 수치 막대가 차오르며 노란 점이 찍히게 했습니다. 범위를 벗어난 숫자에는 붉은 글씨로 '낮음', '높음'이 붙고, 맨 아래에 "추천: 밸런스 랩"이 나옵니다.
리포트가 '원장님이 보는 화면'이라면, 다음은 '고객이 직접 해 보는 화면'입니다. "세안하고 아무것도 바르지 않은 채 30분이 지나면?" 같은 질문에 답을 고르면 다음 문항이 밀려 들어오고, 다섯 문항을 마치면 수분 부족형, 유수분 불균형형, 민감 반응형, 탄력 저하형 중 하나의 타입 카드와 축별 점수 막대, 어울리는 프로그램이 나타납니다.
피부관리실 예약의 가장 큰 망설임은 "가서 무슨 말을 듣게 될까"인데, 1분 동안 내 피부를 생각해 본 사람은 그 망설임이 훨씬 작아집니다. 결과 카드에는 '이 결과로 측정 예약' 버튼을 붙였고, 동시에 "간이 자가 진단으로 참고용입니다. 실제 프로그램은 내원 측정 결과를 보고 원장이 함께 정합니다."를 꼭 달았습니다. 퀴즈가 측정을 대신한다고 말하는 순간 이 업체의 강점이 무너지기 때문입니다.
프로그램, 성분, 가격까지 '숫자로 먼저'
| 섹션 | 담은 것 | 풀어 주는 망설임 |
|---|---|---|
| 원장 소개 | 12년 피부 분석, 측정·해석·선택 세 단계 | 누가 내 피부를 판단할까 |
| 측정 항목 | 6가지 예시 리포트, 같은 조건 3회 측정 평균 | 왜 이 관리를 권하는지 모르겠다 |
| 피부 타입 진단 | 5문항 퀴즈, 네 가지 결과 타입 | 내 피부 타입을 모르겠다 |
| 프로그램 4종 | 수분, 밸런스, 카밍, 탄력 랩과 가격대 | 메뉴가 많아 고르기 어렵다 |
| 성분 원소표 | 여섯 성분의 쓰임과 어울리는 타입 | 무엇을 바르는지 궁금하다 |
| 첫 방문과 가격 | 상담부터 4주 재측정까지, 가격대 표 | 추가 결제를 권하지 않을까 |
프로그램은 일부러 네 가지만 두었습니다. 메뉴판이 길면 고객은 결국 직원에게 맡기게 되고, 그 순간 권유에 대한 의심이 다시 생깁니다. 대신 "같은 프로그램 안에서도 수치에 따라 앰플 농도와 단계별 시간을 조절합니다"라고 적고, 카드마다 퀴즈 결과와 같은 H, B, S, E 글자를 달아 진단 결과에서 바로 내 카드를 찾게 했습니다.
성분은 원소 주기율표 타일로 정리했습니다. 히알루론산은 Ha, 나이아신아마이드는 Nc처럼 큰 기호로 적고, 카드를 누르면(PC는 올리면) 3D로 뒤집히며 쓰임과 어울리는 피부 타입이 나옵니다. 흔히 작은 글씨로 지나가는 부분이지만, 랩 콘셉트를 여기까지 이어 가면 오래 머무는 섹션이 됩니다.
첫 방문은 상담, 6가지 측정, 리포트 설명, 관리, 4주 후 재측정의 다섯 단계로 보여 주고 "결과를 듣고 관리는 다음에 받으셔도 괜찮습니다"라고 적었습니다. 가격 섹션 제목은 "가격도 숫자로 먼저."입니다. 첫 방문 측정과 리포트 3만 원대부터 4주 재측정 무료까지 한 표에 놓고, 추가 권유 없이 고른 프로그램 하나의 가격만 안내한다는 원칙을 밝혔습니다.
휴대폰 화면과 검색 세팅
모바일에서는 제목과 버튼을 먼저 세우고 스캔 사진을 아래로 내렸습니다. 커서가 없으니 조준선이 저절로 피부 위를 돌고, 화면 아래에는 '전화'와 '피부 측정 예약'을 고정했습니다. 퀴즈 선택지는 엄지로 누르기 쉽게 크게 키우고, 성분 원소표는 두 열로 다시 짜서 탭하면 뒤집히게 바꿨습니다.
페이지 제목은 "모아스킨랩 — 측정한 피부로 시작하는 성수 스킨케어 랩"으로, 설명 문구에는 "수분·유분·민감도를 먼저 측정", "피부 분석 전문 원장"을 담았습니다. 실제 제작에서는 "성수 피부관리실", "성수 스킨케어샵"처럼 고객이 실제로 치는 검색어를 제목과 소제목에 넣고, 프로그램과 성분마다 설명 글을 만들어 스킨케어샵 홈페이지로서도 잡히게 합니다. 첫 화면 외 이미지는 지연 로딩하고, 움직임 줄이기 설정을 켠 기기에서는 효과를 줄입니다.
포트폴리오 자체는 가상 업체라 noindex로 검색에서 빼 두었습니다. 실제 의뢰라면 업체 정보를 담은 구조화 데이터를 넣고 네이버 서치어드바이저와 구글 서치 콘솔에 등록한 뒤 검색 노출용 칼럼을 함께 발행합니다. 피부관리실과 에스테틱에 맞춘 구성은 「피부관리실 홈페이지 제작」에 정리해 두었습니다.
제작은 원장님 인터뷰로 시작해 강점 한 문장, 섹션과 프로그램 구조, 직접 촬영, 디자인과 효과, 검색 세팅 순으로 진행하고, 오픈 후에는 퀴즈 참여와 예약 클릭 같은 숫자를 함께 확인합니다. 비용은 330만 원(부가세 포함)이며 직접 촬영이 포함되고 페이지 수와 수정 횟수에 제한이 없습니다. 검색 노출용 칼럼 6편과 오픈 후 3개월 유지보수도 무료이고, 이후 유지보수 정기권은 월 110만 원입니다. 다른 업종 사례는 홈페이지 포트폴리오에서 보실 수 있고, 우리 관리실의 강점을 어떤 장치로 보여 줄지는 무료 상담으로 먼저 물어보셔도 됩니다.
자주 묻는 질문
에스테틱 홈페이지 제작 비용은 얼마인가요?
블러썸팩토리는 330만 원(부가세 포함)이며 직접 촬영, 페이지와 수정 횟수 제한 없음, 검색 노출용 칼럼 6편, 오픈 후 3개월 유지보수가 포함됩니다.
피부 측정 기기가 없는 관리실도 이런 홈페이지를 만들 수 있나요?
네, 측정 리포트는 강점을 보여 주는 한 가지 방법일 뿐이며 인터뷰에서 원장님 관리실만의 강점을 찾아 그에 맞는 장치를 설계합니다.
홈페이지에 피부 타입 퀴즈 같은 기능도 넣을 수 있나요?
네, 질문과 결과 타입, 추천 프로그램을 원장님 기준으로 함께 정해 만들고 결과에서 바로 예약으로 이어지게 연결합니다.
프로그램이나 가격이 바뀌면 직접 고쳐야 하나요?
오픈 후 3개월은 무료로 수정해 드리고, 이후에는 유지보수 정기권으로 프로그램과 가격, 이벤트 변경을 맡기실 수 있습니다.
피부관리실도 마케팅 대행까지 맡길 수 있나요?
마케팅 대행은 병의원 전문으로만 진행하지만, 홈페이지 제작과 유지보수 정기권은 피부관리실을 포함해 업종과 상관없이 맡기실 수 있습니다.