성형외과 홈페이지 제작기: 압구정 엘란성형외과 포트폴리오

요약 성형외과 홈페이지 제작에서 저희가 가장 먼저 정하는 것은 이 병원이 무엇을 판단 기준으로 삼는지, 원장님의 강점 한 문장입니다. 이 글은 블러썸팩토리가 서울 압구정의 가상 성형외과 '엘란성형외과'를 정하고, 실제 의뢰처럼 원장님의 상담 원칙부터 세워 만든 포트폴리오 홈페이지의 제작기입니다. 금선 프리로더, 얼굴 비율을 그려 보이는 도해, 휴대폰 화면과 검색 세팅까지 디자이너가 어떤 판단으로 만들었는지 차례로 보여 드립니다.

압구정 성형외과라고 가정하고, 강점 한 문장부터 정했습니다

엘란성형외과는 실제 고객이 아니라 저희가 포트폴리오용으로 만든 가상의 압구정 성형외과입니다. 그래도 진행은 실제 의뢰와 똑같이 했습니다. 원장님 인터뷰를 한다고 가정하고, 이 병원 문을 여는 환자가 어떤 마음인지부터 정리했습니다.

압구정에서 성형외과를 찾는 분들은 정보가 이미 많습니다. 여러 곳에서 상담을 받아 봤고, 그래서 가장 경계하는 것이 과한 권유입니다. "눈만 하러 왔는데 코와 윤곽까지 권하지 않을까" 하는 걱정을 안고 들어옵니다. 그래서 엘란의 강점은 "부위 하나보다 얼굴 전체의 비율을 먼저 보고, 덜어내는 결정부터 말해 주는 대표원장의 1:1 직접 상담"으로 정했습니다.

이 문장이 정해지자 홈페이지의 순서도 정해졌습니다. "무엇을 더할까"보다 "얼굴 전체가 어떻게 어울리는가"를 먼저 말하고, 그 판단 기준을 눈으로 보여 준 다음, 진료 분야와 원장과 안전 시스템으로 신뢰를 쌓는 흐름입니다. 원장님의 강점에서 출발하는 이유는 병원 브랜딩, 원장님에서 시작해야 하는 이유에 자세히 적어 두었습니다.

첫 화면: 금빛 선 하나로 시작하는 3초

엘란의 첫 3초는 얇은 금빛 선 하나로 시작합니다. 선이 그어지면 ÉLAN 글자가 그 위로 떠오르고, E 위의 악센트 획이 마지막으로 그려지며 로고가 완성됩니다. 000에서 100까지 숫자가 올라간 뒤 커튼이 위로 걷힙니다. 이 병원의 콘셉트인 '균형의 선'을 로고가 만들어지는 순간부터 보여 주고 싶었습니다.

커튼이 걷히면 "얼굴의 균형을 먼저 봅니다"라는 세리프 문장이 한 글자씩 흐릿함에서 선명하게 나타납니다. 오른쪽 인물 사진은 아주 느리게 확대되고, 사진 위로 황금비 분할선이 그려집니다. 화려하게 움직이기보다 천천히 초점이 맞춰지는 느낌을 택한 것은, 서두르지 않는 상담이라는 강점과 첫 인상의 속도를 맞추기 위해서입니다.

첫 화면에 담을 것은 결국 세 가지입니다. 누가 진료하는지, 무엇을 잘하는지, 어떻게 예약하는지입니다. 엘란은 이 세 가지를 한 화면 안에, 강점 문장과 같은 목소리로 담았습니다.

성형외과 홈페이지 디자인: 딥 차콜과 샴페인 골드 한 가지

압구정 성형외과 홈페이지는 화려한 경우가 많습니다. 처음에는 밝은 화이트에 핑크 계열을 섞은 부드러운 톤도 생각했지만, 그 색은 과한 권유를 경계하는 환자에게 오히려 가볍게 읽힐 수 있었습니다. 그래서 딥 차콜 바탕에 샴페인 골드 한 가지만 포인트로 쓰고, 화려함 대신 절제된 고급스러움을 택했습니다.

한글 제목은 가는 Noto Serif KR, 영문은 Cormorant Garamond 이탤릭으로 짝을 지어 잡지 같은 글자 위계를 세웠습니다. 사이트의 모든 선은 1px 금선으로 통일했습니다. 구분선, 버튼 테두리, 진행 표시가 모두 같은 선이라, 스크롤하는 내내 '균형의 선'이라는 콘셉트가 끊기지 않습니다.

부위가 아니라 비율: 섹션마다 신뢰를 쌓는 순서

이 홈페이지의 한가운데에는 '균형의 선' 도해가 있습니다. 옆얼굴 사진 위에 세 구간 기준선, E-line, 코이마각, 1:φ 비율선이 스크롤에 맞춰 차례로 그려지고 수치 라벨이 떠오릅니다. PC에서는 사진이 화면에 고정된 채 오른쪽 설명이 단계별로 바뀝니다. 원장님이 상담실에서 실제로 긋는 선을 미리 보여 주면, "여기는 부위를 파는 곳이 아니라 비율을 보는 곳"이라는 말을 설명 없이도 납득하게 됩니다.

진료 분야는 눈, 코, 윤곽, 가슴, 리프팅, 재수술 여섯 가지를 큰 세리프 글자 목록으로 만들었습니다. 마우스를 올리면 해당 사진이 커서를 따라 살짝 기울며 떠오릅니다. 부위를 나눠 보여 주되, 목록 위에는 "판단은 늘 얼굴 전체를 기준으로 한다"는 문장을 두었습니다.

대표원장 섹션만 아이보리로 바꿨습니다. 어두운 흐름을 지나다 밝은 지면이 나오면 스크롤에 호흡이 생기고, 원장님이 자연스럽게 주인공이 됩니다. 소개는 경력보다 "상담부터 경과까지 한 사람이", "하지 않아도 되는 것부터"라는 원칙을 먼저 두었습니다.

안전 시스템은 마취 전 과정 모니터링, 독립된 1인 회복실, 수술 후 관리 프로그램 세 가지로 나눠 아이콘과 짧은 항목으로 보여 줬습니다. 그 뒤의 상담 과정은 금선으로 이어진 다섯 개의 원으로 그렸는데, 마지막 단계를 '충분한 고민'으로 둔 것이 핵심입니다. 당일 결정을 권하지 않는다는 문장이 마지막 망설임을 풉니다.

휴대폰 화면: 호버 대신 탭, 하단에는 예약 바

성형외과 홈페이지도 대부분 휴대폰으로 봅니다. 마우스가 없는 휴대폰에서는 호버 효과가 쓸모없으니, 진료 목록은 탭하면 바로 아래에 사진과 설명이 바뀌어 나오도록 다시 만들었습니다. 커스텀 커서와 마그네틱 버튼도 휴대폰에서는 끄고, 대신 글자와 사진의 등장 효과를 살렸습니다.

화면 아래에는 전화와 "원장 1:1 상담 예약" 버튼을 고정했습니다. 버튼 문구까지 강점과 같은 말로 맞추면, 어느 화면에서 누르든 이 병원이 어떤 상담을 하는지 다시 한번 확인됩니다. 390px 폭에서 가로로 화면이 밀리지 않는지도 따로 검수했습니다.

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

엘란에는 "압구정 엘란성형외과", "1:1 원장 직접 상담"처럼 지역과 업종, 강점을 함께 담은 페이지 제목과 설명을 넣었습니다. 첫 화면 아래의 사진은 모두 지연 로딩으로 처리해 효과가 많아도 처음 열리는 속도를 지켰습니다. 다만 엘란은 가상 병원이라 실제 검색에 잡히지 않도록 검색 제외(noindex)를 걸어 두었습니다.

실제 압구정 성형외과 홈페이지를 만들 때는 병원 정보와 진료시간을 담은 구조화 데이터를 넣고, 네이버 서치어드바이저와 구글 서치 콘솔에 등록합니다. 눈, 코, 윤곽처럼 환자가 실제로 검색하는 말로 시술 페이지를 나누고, 칼럼 6편을 함께 써서 검색 입구를 늘립니다. 오래된 홈페이지를 고민 중이시라면 병원 홈페이지 리뉴얼, 지금 해야 한다는 신호 7가지도 함께 읽어 보세요.

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

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

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

자주 묻는 질문

성형외과 홈페이지 제작 비용은 얼마인가요?

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

프리로더나 도해 같은 효과가 있으면 느리지 않나요?

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

성형외과 홈페이지 리뉴얼도 맡길 수 있나요?

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

시술 부위별 페이지를 따로 만들 수 있나요?

페이지 수에 제한이 없어 눈, 코, 윤곽처럼 부위별 시술 페이지를 따로 만들고, 각 페이지가 그 부위 검색어로 찾아지도록 세팅합니다.

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

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