여드름 피부과 홈페이지 제작기: 신촌 클리어피부과 포트폴리오
요약 여드름 피부과 홈페이지 제작에서 저희가 먼저 떠올린 사람은 원장님이 아니라, 처음 피부과에 가 보는 고등학생과 대학생이었습니다. 이 글은 블러썸팩토리가 서울 신촌의 가상 여드름 피부과 '클리어피부과'를 정하고, 실제 의뢰처럼 원장님의 진료 방식부터 세워 만든 포트폴리오 홈페이지의 제작기입니다. 말랑하게 튀어 오르는 인트로, 30초 피부 타입 테스트, 치료 일기 폴라로이드, 휴대폰 화면과 검색 세팅까지 디자이너가 어떤 판단으로 만들었는지 순서대로 보여 드립니다.
10대·20대 여드름 환자의 마음부터 적었습니다
클리어피부과는 실제 고객이 아니라 저희가 포트폴리오용으로 만든 가상의 신촌 피부과입니다. 그래도 진행은 실제 의뢰와 똑같이 했습니다. 원장님 인터뷰를 한다고 가정하고, 이 병원을 찾는 환자가 어떤 마음으로 문을 여는지부터 정리했습니다.
여드름으로 피부과를 찾는 10대와 20대는 "치료하면 정말 나아지나?"라는 의심과 "병원은 어렵고 무섭다"는 긴장을 함께 안고 옵니다. 여드름은 하루아침에 달라지지 않아, 좋아지고 있는지 몰라 중간에 그만두는 경우도 많습니다.
그래서 클리어의 강점은 시술이나 장비가 아니라 진료 방식으로 정했습니다. "진료 때마다 같은 각도로 사진을 찍어 지난 사진과 나란히 보여 주고, 학생 눈높이로 쉽게 설명하는 원장"입니다. 헤드라인은 "여드름 치료, 일기처럼 기록해요"로 정했습니다. 치료를 일기처럼 남긴다는 말은 어린 환자에게도 바로 이해되고, 같이 확인한다는 약속이 들어 있습니다. 강점을 먼저 세우는 이유는 병원 브랜딩, 원장님에서 시작해야 하는 이유에 자세히 적어 두었습니다.
첫 화면: 무섭지 않게, 말랑하게 튀어 오르는 3초
사이트를 열면 둥근 비눗방울들이 아래에서 통통 튀어 오르고, CLEAR 글자가 길게 늘어났다가 납작하게 착지한 뒤 젤리처럼 출렁이며 제자리를 찾습니다. 글자에 마우스를 올리거나 손가락으로 누르면 다시 말랑하게 흔들립니다. 병원 홈페이지라기보다 친구가 보낸 앱처럼 느껴지게 하는 것이 목표였습니다. 첫 3초에 긴장이 풀려야 아래 내용까지 읽습니다.
히어로 가운데에는 웃는 학생 사진을 물방울 모양 틀에 담고, 옆에 'DAY 01' 스티커와 손글씨 메모 "짜지 말고, 기록!"을 붙였습니다. 아래에는 "진료 때마다 같은 각도로 사진을 찍고, 지난번 사진과 나란히 보며 설명해요. 어려운 말 없이, 학생 눈높이로."라는 설명과 함께 '평일 저녁 8시까지', '신촌역 3분'을 작은 알약 표시로 넣었습니다. 하교 뒤에 들를 수 있는지는 학생과 보호자 모두에게 중요한 정보라 첫 화면에 올렸습니다.
여드름 피부과 홈페이지 디자인: 다이어리 꾸미기처럼
디자인의 기준은 10대·20대가 실제로 쓰는 다이어리 꾸미기와 스티커 문화입니다. 피부과에서 흔한 흰색과 파란색은 깨끗하지만, 학생에게는 "병원"이라는 긴장을 그대로 줍니다. 그래서 민트, 라일락, 버터 옐로의 파스텔을 주인공으로 쓰고, 글자색은 진한 포도색 잉크 한 가지로 맞춰 파스텔 위에서도 또렷하게 읽히게 했습니다.
모든 모서리를 둥글게 깎고, 사진은 천천히 모양이 바뀌며 숨 쉬는 물방울 틀에 담았습니다. 흰 테두리가 둘린 다이컷 스티커와 손글씨 서체 Gaegu로 쓴 메모가 화면 곳곳에 붙어 있습니다. 영문 CLEAR는 통통하고 굵은 Bricolage Grotesque 800으로 화면을 가득 채우고, 한글은 Pretendard 굵은 글자로 받쳤습니다.
| 요소 | 고른 것 | 이유 |
|---|---|---|
| 주요 색 | 민트 #BFF3E0, 라일락 #D9C8FF, 버터 옐로 #FFE98A | 병원의 긴장 대신 다이어리 같은 편안함 |
| 바탕·글자 | 크림 화이트 #FFFDF8, 그레이프 잉크 #241B45 | 순백·순흑보다 부드럽고, 파스텔 위에서도 대비 확보 |
| 서체 | Bricolage Grotesque + Pretendard + Gaegu | 영문은 통통한 인상, 한글은 정보, 손글씨는 원장님의 말투 |
| 모양 | 둥근 모서리, 물방울 사진 틀, 다이컷 스티커 | 뾰족한 곳이 없어 화면 전체가 말랑하게 느껴짐 |
| 움직임 | 젤리처럼 출렁이는 글자, 스프링 호버 | 누르고 싶게 만들어 끝까지 내려가게 함 |
섹션마다 학생의 질문 하나씩 풀기
첫 섹션은 "좋아졌다는 말 대신, 사진으로 같이 봐요."입니다. 원장님 사진을 폴라로이드처럼 기울여 붙이고, 손글씨 말풍선에 "좋아지는 걸 직접 보는 게 꾸준히 치료하는 제일 큰 힘이에요."라는 원장님의 말을 넣었습니다. 그 옆에 매번 찍어요, 나란히 봐요, 쉽게 말해요 세 카드로 진료 방식을 정리했습니다. '면포', '구진' 같은 말은 그림으로 풀어 준다는 문장도 여기에 넣었습니다.
다음은 30초 피부 타입 테스트입니다. "세안하고 1시간 뒤, 얼굴 전체가 번들거려요?" 같은 질문 카드 네 장에 '그래요'와 '아니요'로 답하거나 카드를 좌우로 밀면, 카드가 날아가고 마지막에 결과 카드가 뒤집히며 지성·복합성·민감성·여드름성 중 하나의 타입과 추천 관리 세 가지가 나옵니다. 학생에게 무거운 "상담 예약" 대신, 병원과의 첫 대화를 가벼운 테스트로 대신한 것입니다. 결과 아래에는 "정확한 타입은 진료실에서 사진으로 같이 확인해요"라는 문장과 상담 예약 버튼을 붙였습니다.
진료 고민 여섯 칸에는 면도 트러블, 등·가슴 여드름처럼 남학생이 먼저 묻기 어려운 고민을 '남학생 피부도' 카드로 따로 꺼내 두었고, 치료 이름은 작은 태그로만 붙여 겁나게 보이지 않게 했습니다.
이 홈페이지의 대표 장치는 '치료 일기'입니다. DAY 1 첫 진료부터 1주, 2주, 4주, 8주, 유지까지 마스킹테이프가 붙은 폴라로이드 카드를 옆으로 끌어 넘기면, 위쪽 진행 바와 주차 표시가 함께 움직입니다. "4주: 첫날 사진과 나란히"처럼 치료가 어떤 순서로 흘러가는지 미리 넘겨 보게 해, 막연한 불안을 과정이 보이는 치료로 바꾸고 싶었습니다. 카드 아래에는 "치료 기록 사진은 진료용으로만 보관하며, 동의 없이 외부에 공개하지 않아요"를 함께 적었습니다. 사진을 찍는다는 강점이 오히려 걱정이 되지 않도록 먼저 답한 것입니다.
| 섹션 | 담은 것 | 풀어 주는 망설임 |
|---|---|---|
| 원장님의 강점 | 매번 사진 기록, 나란히 비교, 쉬운 설명 | 치료하면 정말 나아지나 |
| 피부 타입 테스트 | 질문 4장과 결과 카드 | 병원에 가기엔 아직 부담스러운데 |
| 진료 고민 6 | 여드름부터 남학생 피부까지 | 내 고민도 여기서 볼까 |
| 치료 일기 | DAY 1부터 유지까지 6장 | 얼마나, 어떻게 다녀야 하나 |
| 공간·홈케어 | 파스텔 대기실, 집에서 쓰는 순서 | 병원이 어색하고 무섭지 않을까 |
| FAQ | 짜도 되나요, 학생 할인, 보호자 동반, 사진 보관 | 엄마랑 가야 하나, 사진은 어디에 쓰나 |
마지막 예약 섹션은 "첫 사진, 오늘 찍어 볼까요?"로 맺어 예약을 다시 치료 일기와 이었고, "친구랑 같이 와도, 보호자와 함께 와도 좋아요"를 더했습니다.
휴대폰 화면: 학생은 거의 휴대폰으로만 봅니다
10대·20대 환자는 사실상 휴대폰으로만 홈페이지를 보기에, 휴대폰 화면을 PC만큼 공들여 따로 짰습니다. 첫 화면은 CLEAR 글자를 위로, 학생 사진을 그 아래 물방울 틀로 겹치고, 헤드라인과 버튼이 한 화면 안에 들어오게 맞췄습니다.
피부 타입 테스트와 치료 일기는 원래 손가락으로 밀기 좋게 만든 장치라, 휴대폰에서 오히려 더 자연스럽습니다. 스티커는 손가락이 닿은 주변에서 밀려났다가 돌아오고, 스크롤할 때 살짝 흔들립니다. 화면 아래에는 전화와 상담 예약 버튼을 고정해 어느 위치에서든 한 번에 누를 수 있게 했고, 390px 폭에서 가로로 화면이 밀리지 않는지 따로 검수했습니다.
검색에 잡히게 한 장치, 그리고 실제 제작 과정
클리어에는 "신촌 여드름 피부과", "10대·20대 여드름, 여드름 흉터, 민감 피부"처럼 지역과 대상, 진료 분야가 함께 담긴 페이지 제목과 설명을 넣었습니다. 효과가 많은 만큼 첫 화면 아래의 사진은 지연 로딩으로 처리해 처음 열리는 속도를 지켰습니다. 다만 클리어는 가상 병원이라 실제 검색에 잡히지 않도록 검색 제외(noindex)를 걸어 두었습니다.
실제 여드름 피부과 홈페이지를 만들 때는 병원 정보와 진료시간을 담은 구조화 데이터를 넣고, 네이버 서치어드바이저와 구글 서치 콘솔에 등록합니다. "여드름 짜도 되나요", "여드름 흉터 치료 기간"처럼 학생과 보호자가 실제로 검색하는 말로 칼럼 6편을 함께 써서 검색 입구를 늘립니다. 같은 피부과라도 차분한 화보 톤으로 만든 사례는 피부과 홈페이지 제작기: 강남 루멘피부과에서 비교해 보실 수 있습니다. 환자층이 다르면 같은 진료과도 전혀 다른 홈페이지가 됩니다.
포트폴리오에는 연출 사진을 썼지만, 실제 제작에서는 원장님과 대기실, 진료실을 직접 촬영합니다. 진행은 원장님 인터뷰, 강점 한 문장, 섹션과 시술 페이지 구조, 촬영, 디자인과 효과, 검색 세팅, 오픈 후 숫자 확인 순서입니다. 강남 병원 안에서 약 10년 일한 실무 마케터 겸 디자이너가 처음부터 끝까지 직접 맡습니다. 첫 화면에 무엇을 둘지는 병원 홈페이지 제작, 첫 화면에 원장님이 보여야 하는 이유에서 따로 다뤘습니다.
병원 홈페이지 제작 비용은 330만 원(부가세 포함)이며 직접 촬영, 페이지와 수정 횟수 제한 없음, 검색용 칼럼 6편, 오픈 후 3개월 유지보수가 포함됩니다. 지금 홈페이지가 원장님의 강점을 잘 보여 주고 있는지 궁금하시면 무료 사전 진단을 신청해 주세요. 다른 업종의 제작 사례는 홈페이지 포트폴리오에서 보실 수 있습니다.
자주 묻는 질문
여드름 피부과 홈페이지 제작 비용은 얼마인가요?
블러썸팩토리의 홈페이지 제작은 330만 원(부가세 포함)이며 직접 촬영, 페이지와 수정 횟수 제한 없음, 검색용 칼럼 6편, 오픈 후 3개월 유지보수가 포함됩니다.
파스텔 디자인이면 병원으로서 신뢰가 떨어지지 않을까요?
환자층이 10대·20대라면 친근함이 먼저 신뢰가 됩니다. 대신 원장님의 진료 방식, 사진 보관 원칙, 보호자 동의 안내처럼 신뢰를 주는 정보를 화면마다 함께 둡니다.
피부 타입 테스트 같은 장치를 넣으면 예약에 도움이 되나요?
바로 예약하기 부담스러운 분이 먼저 가볍게 참여하는 단계가 되어, 결과 화면에서 상담 예약으로 자연스럽게 이어지도록 설계합니다.
치료 전후 사진 없이도 이런 홈페이지를 만들 수 있나요?
네. 클리어처럼 치료 과정을 일기 형식으로 보여 주면 실제 환자 사진 없이도 치료가 어떻게 흘러가는지 충분히 전달할 수 있습니다.
오픈 후 수정은 어떻게 하나요?
오픈 후 3개월은 수정 요청을 무료로 반영해 드리고, 이후에는 유지보수 정기권으로 이어 가거나 마케팅을 함께 하시면 무료로 관리해 드립니다.