피부과 홈페이지 제작기: 강남 루멘피부과 포트폴리오

요약 피부과 홈페이지 제작에서 저희가 가장 먼저 정하는 것은 디자인이 아니라 원장님의 강점 한 문장입니다. 이 글은 블러썸팩토리가 서울 강남의 가상 피부과 '루멘피부과'를 정하고, 실제 의뢰처럼 원장님의 진료 원칙부터 세워 만든 포트폴리오 홈페이지의 제작기입니다. 첫 화면의 빛 인트로, 매거진처럼 읽히는 디자인, 휴대폰 화면과 검색 세팅까지 디자이너가 어떤 판단으로 만들었는지 순서대로 보여 드립니다.

강남 피부과라고 가정하고, 원장님의 강점부터 정했습니다

루멘피부과는 실제 고객이 아니라 저희가 포트폴리오용으로 만든 가상의 강남 피부과입니다. 그래도 진행 순서는 실제 의뢰와 똑같이 했습니다. 원장님 인터뷰를 한다고 가정하고, 이 병원을 찾는 환자가 어떤 마음으로 들어오는지부터 적었습니다.

강남에서 피부과를 고르는 분들은 이미 시술 이름을 많이 압니다. 리프팅, 토닝, 스킨부스터를 검색하며 여러 병원을 돌아본 상태라 "또 무언가를 권유받겠지" 하는 피로감을 안고 들어옵니다. 그래서 루멘의 강점은 "피부의 결과 톤을 먼저 읽고, 필요한 만큼만 정밀하게 하는 덜어내는 진료, 상담한 원장이 시술과 경과까지 직접 본다"로 정했습니다.

이 한 문장이 정해지면 나머지 결정이 쉬워집니다. 첫 화면에 시술 목록을 늘어놓지 않고, 철학과 원장 소개와 진료 과정이 모두 '읽고, 덜어내고, 정밀하게'로 이어지도록 짰습니다. 강점을 먼저 세우는 이유는 병원 브랜딩, 원장님에서 시작해야 하는 이유에 더 자세히 적어 두었습니다.

첫 화면: 어둠 속 작은 빛에서 시작한 이유

루멘(LUMEN)은 빛이라는 뜻입니다. 그래서 첫 3초를 이름 그대로 만들었습니다. 어두운 화면 가운데 작은 빛이 하나 켜지고, 그 빛이 퍼지면서 페이지 전체가 밝아집니다. 이어서 화면을 가득 채우는 크기의 "Skin, as it is."가 한 줄씩 아래에서 올라옵니다.

효과를 넣을 때 저희가 지키는 기준은 하나입니다. 병원의 성격을 강하게 만들지 못하면 넣지 않습니다. 빛이 번지는 인트로는 "피부 본연의 빛을 살린다"는 메시지를 말보다 먼저 몸으로 느끼게 하고, 커서를 따라 움직이는 은은한 스포트라이트는 피부가 빛을 받는 순간을 보여 줍니다. 그 아래에는 "더하기보다, 본연의 결과 빛을 살리는 피부과"라는 한국어 문장과 상담 예약 버튼을 바로 두어, 분위기에 취해 행동이 멀어지지 않게 했습니다.

첫 화면에 무엇이 보여야 하는지는 병원마다 다르지만, 원리는 같습니다. 이 병원이 누구이고 무엇을 잘하며 어떻게 예약하는지가 몇 초 안에 읽혀야 합니다. 이 부분은 병원 홈페이지 제작, 첫 화면에 원장님이 보여야 하는 이유에서 따로 다뤘습니다.

피부과 홈페이지 디자인: 광고가 아니라 화보처럼

디자인의 기준은 패션 매거진의 에디토리얼 지면입니다. 처음에는 피부과에서 흔히 쓰는 하늘색이나 민트 계열의 깨끗한 의료 톤도 생각했지만, 강남의 피로한 환자에게 그 색은 "또 하나의 피부과"로 읽힐 가능성이 컸습니다. 그래서 오프화이트 바탕에 웜 블랙 활자, 포인트는 흙빛 클레이 한 가지만 남겼습니다.

영문 제목은 대비가 강한 디도 계열 세리프인 Bodoni Moda를 화면을 가득 채우는 크기로 썼습니다. 글자가 크고 가늘면 '광고'보다 '화보'처럼 읽힙니다. 한글 본문은 Pretendard로 또렷하게 받쳐 가독성을 지켰고, 큰 숫자와 그림 번호(Fig.), 세로 캡션 같은 잡지식 장치로 정보를 나눴습니다.

섹션마다 환자의 망설임 하나씩 풀기

홈페이지는 위에서 아래로 내려가며 환자의 질문에 차례로 답하는 구조여야 합니다. 루멘은 철학 다음에 진료 분야를 두었는데, 여섯 분야를 세로로 나열하지 않고 고정 가로 스크롤 갤러리로 만들었습니다. 스크롤하면 화면이 멈추고 카드가 옆으로 흘러가며, 카드 번호와 진행 바가 지금 몇 번째인지 알려 줍니다.

원장 소개와 공간 섹션에 들어서면 배경이 오프화이트에서 짙은 웜 블랙으로 천천히 바뀝니다. 조명을 낮춘 시술실에 들어서는 느낌을 주고 싶었습니다. 원장 소개에는 경력보다 "상담부터 시술, 경과 확인까지 같은 원장이 본다"는 원칙을 먼저 두었습니다.

휴대폰 화면: 효과는 살리고 손가락에 맞게

피부과 홈페이지는 대부분 휴대폰으로 열립니다. 그래서 PC를 줄인 화면이 아니라 휴대폰용 구성을 따로 다듬었습니다. 거대한 세리프 제목은 두 줄로 나누어 사진 위에 겹치게 배치했고, 화면 아래에는 전화와 상담 예약 버튼을 고정해 어느 위치에서든 한 번에 누를 수 있게 했습니다.

커서가 없는 휴대폰에서는 스포트라이트가 저절로 천천히 떠다니도록 바꿨습니다. 가로 스크롤 갤러리도 손가락으로 쓸어 넘기는 리듬에 맞췄고, 가로로 화면이 밀리는 일이 없도록 390px 폭에서 따로 검수했습니다.

검색에 잡히게 한 장치, 그리고 실제 제작 과정

예쁜 홈페이지도 찾아오는 사람이 없으면 소용없습니다. 루멘에는 "강남 루멘피부과", "덜어내는 진료"처럼 지역과 업종, 강점이 함께 담긴 페이지 제목과 설명을 넣었고, 첫 화면 아래의 사진은 모두 지연 로딩으로 처리해 효과가 많아도 처음 열리는 속도를 지켰습니다. 다만 루멘은 가상 병원이라 실제 검색에 잡히지 않도록 검색 제외(noindex)를 걸어 두었습니다.

실제 강남 피부과 홈페이지를 만들 때는 여기에 병원 정보와 진료시간을 담은 구조화 데이터를 넣고, 네이버 서치어드바이저와 구글 서치 콘솔에 등록합니다. "강남 피부과", "피부과 리프팅"처럼 환자가 실제로 검색하는 말로 칼럼 6편을 함께 써서 검색 입구를 늘립니다.

포트폴리오에는 연출 사진을 썼지만, 실제 제작에서는 원장님과 병원 공간을 직접 촬영합니다. 진행은 원장님 인터뷰, 강점 한 문장, 섹션과 시술 페이지 구조, 촬영, 디자인과 효과, 검색 세팅, 오픈 후 숫자 확인 순서입니다. 강남 병원 안에서 약 10년 일한 실무 마케터 겸 디자이너가 처음부터 끝까지 직접 맡습니다.

병원 홈페이지 제작 비용은 330만 원(부가세 포함)이며 직접 촬영, 페이지와 수정 횟수 제한 없음, 검색용 칼럼 6편, 오픈 후 3개월 유지보수가 포함됩니다. 지금 홈페이지가 원장님의 강점을 잘 보여 주고 있는지 궁금하시면 무료 사전 진단을 신청해 주세요. 다른 업종의 제작 사례는 홈페이지 포트폴리오에서 보실 수 있습니다.

완성된 홈페이지 직접 둘러보기 ↗

자주 묻는 질문

피부과 홈페이지 제작 비용은 얼마인가요?

블러썸팩토리의 홈페이지 제작은 330만 원(부가세 포함)이며 직접 촬영, 페이지와 수정 횟수 제한 없음, 검색용 칼럼 6편, 오픈 후 3개월 유지보수가 포함됩니다.

이런 인트로나 효과가 있으면 홈페이지가 느려지지 않나요?

효과는 위치와 투명도만 바꾸는 가벼운 방식으로 만들고, 첫 화면 아래 사진은 지연 로딩으로 처리해 처음 열리는 속도를 지킵니다.

피부과 홈페이지 리뉴얼도 이 방식으로 할 수 있나요?

네, 기존 홈페이지를 분석해 원장님의 강점 한 문장부터 다시 세우고, 살릴 내용은 옮기면서 구조와 디자인을 새로 짭니다.

휴대폰에서도 효과가 그대로 보이나요?

커서 효과는 휴대폰에서 저절로 움직이는 방식으로 바꾸고, 하단 고정 예약 바를 더해 손가락으로 쓰기 편한 화면으로 따로 다듬습니다.

오픈 후 수정은 어떻게 하나요?

오픈 후 3개월은 수정 요청을 무료로 반영해 드리고, 이후에는 유지보수 정기권으로 이어 가거나 마케팅을 함께 하시면 무료로 관리해 드립니다.