윤곽 성형외과 홈페이지 제작기: 압구정 리안성형외과 포트폴리오
요약 윤곽 성형외과 홈페이지 제작에서 저희가 결과 사진보다 먼저 보여 주기로 한 것은 마취와 회복이었습니다. 이 글은 블러썸팩토리가 서울 압구정의 가상 윤곽·리프팅 성형외과 '리안성형외과'를 정하고, 실제 의뢰처럼 원장님의 원칙부터 세워 만든 포트폴리오 홈페이지의 제작기입니다. 핑크빛 메시가 흐르는 인트로, 옆얼굴 위에 그려지는 S라인, 수술 전·중·후를 한 바퀴 도는 안전 캐러셀, 휴대폰 화면과 검색 세팅까지 디자이너가 어떤 판단으로 만들었는지 순서대로 보여 드립니다.
윤곽 수술 환자가 가장 두려워하는 것부터 정리했습니다
리안성형외과는 실제 고객이 아니라 저희가 포트폴리오용으로 만든 가상의 압구정 성형외과입니다. 그래도 진행은 실제 의뢰와 똑같이 했습니다. 원장님 인터뷰를 한다고 가정하고, 윤곽 수술을 고민하는 환자가 어떤 마음으로 상담을 예약하는지부터 적었습니다.
윤곽 수술을 알아보는 분들이 결정을 미루는 이유는 결과보다 과정입니다. "전신마취는 안전할까", "붓기가 빠질 때까지 혼자 버틸 수 있을까", "수술 뒤에 연락하면 누가 받아 줄까".
그래서 리안의 강점은 "마취과 전문의가 수술일 원내에 상주하고, 수술 후에는 1:1 전담 매니저가 3개월 정기 점검까지 회복을 맡는다"로 정했습니다. 헤드라인은 "안전과 회복까지 디자인하는 윤곽"입니다. 윤곽의 선을 그리는 일과 그 선에 이르는 과정을 설계하는 일을 한 문장에 담았습니다. 이 순서로 정한 이유는 병원 브랜딩, 원장님에서 시작해야 하는 이유에 자세히 적어 두었습니다.
첫 화면: 결과 사진보다 '마취과 전문의 상주'가 먼저
사이트를 열면 블러시 핑크와 누드 색 덩어리가 천천히 흐르다 가운데로 모이고, 그 위에 Rian 글자가 흐린 상태에서 유리처럼 맺힌 뒤 빛이 한 번 지나갑니다.
히어로에는 옆얼굴 사진 위로 반투명 유리 구체가 떠 있습니다. 이 구체는 뒤의 사진과 배경을 실제 렌즈처럼 거꾸로 비추고, 마우스를 따라 움직이며 굴절 모양이 바뀝니다. 그리고 사진 위에 유리 카드 두 장을 붙였습니다. '마취과 전문의 상주'와 '1:1 전담 회복 관리'입니다. 결과 사진이나 시술 목록이 아니라 이 두 가지가 첫 화면에서 가장 먼저 읽히도록 한 것이 이 홈페이지의 가장 중요한 결정이었습니다.
윤곽 성형외과 홈페이지 디자인: 같은 압구정, 엘란과 정반대로
저희 포트폴리오에는 같은 압구정의 가상 성형외과 엘란이 이미 있습니다. 엘란은 딥 차콜과 금선으로 '비율을 보는 판단'의 무게감을 만들었습니다. 리안은 일부러 정반대를 택했습니다. 윤곽 수술 환자에게 필요한 것은 무게감이 아니라 안심이기 때문입니다. 같은 지역, 같은 진료과라도 강점이 다르면 색과 질감이 이렇게 달라집니다. 엘란의 제작기는 성형외과 홈페이지 제작기: 압구정 엘란성형외과에서 보실 수 있습니다.
바탕은 블러시 핑크, 누드, 크림이 섞여 흐르는 그라데이션 메시로 깔고, 그 위에 반투명 유리 카드와 유리 구체를 띄웠습니다. 영문은 Fraunces 이탤릭으로 부드럽게, 한글은 가는 Pretendard로 정갈하게 짝지었습니다. 핑크 화면은 자칫 글이 흐려지기 쉬워, 글자색은 딥 로즈 한 가지로 통일해 어디서나 읽기 편하게 했습니다.
| 요소 | 고른 것 | 이유 |
|---|---|---|
| 바탕 | 블러시 핑크 #F6D9DD, 누드 #E9C9B8, 크림 #FFF8F3 | 수술의 무게 대신 피부처럼 따뜻한 회복의 감각 |
| 글자색 | 딥 로즈 #5A2E3A 한 가지 | 핑크 위에서도 또렷하고, 검정보다 화면과 어울림 |
| 포인트 | 로즈 #D88A9A | '회복실', '안전' 같은 핵심 단어의 이탤릭 강조에만 |
| 서체 | Fraunces 이탤릭 + Pretendard | 여성스럽지만 흐트러지지 않는 위계 |
| 질감 | 유리 카드, 유리 구체, 흐르는 메시 | 투명함으로 '숨기는 것 없는 과정'을 표현 |
섹션마다 "수술 뒤에 혼자가 아닐까"에 답하기
첫 섹션은 리안의 약속입니다. "윤곽 수술의 완성은 수술대 위가 아니라, 회복실에서 끝납니다." 이 문장은 스크롤에 따라 한 단어씩 선명해집니다. 그 아래 마취과 전문의 상주, 1:1 전담 회복 매니저, 원장 직접 상담·집도·경과 세 장의 유리 카드가 스크롤할 때 살짝 떠오르며 빛 반사가 한 번 지나갑니다.
다음은 리안의 판단 기준을 보여 주는 '흐르는 윤곽 라인'입니다. 옆얼굴 사진 위에 이마, 코, 입술, 턱끝, 턱선을 잇는 S라인이 스크롤에 맞춰 그려집니다. 사각턱, 광대, 실리프팅, 지방이식 버튼을 누르면 해당 부위가 빛나고, 옆 카드의 설명이 바뀝니다. 사각턱을 누르면 "턱각만 잘라내면 옆선이 꺾여 보일 수 있습니다"라는 설명이 나옵니다. 한 부위를 깎는 병원이 아니라 흐름을 잇는 병원이라는 이야기를 사진 위의 선 하나로 보여 준 것입니다.
이 홈페이지의 대표 장치는 '3D 안전 캐러셀'입니다. 수술 전 상담과 3D CT 분석, 마취 전 평가, 마취과 전문의 상주 모니터링, 대표원장 직접 집도, 1인 회복실 안정, 1:1 전담 회복 관리까지 여섯 장의 유리 카드가 원형으로 돌아갑니다. PC에서는 스크롤하면 카드가 회전하고, Before, During, After 표시가 지금 단계를 알려 줍니다. 카드마다 맨 아래에 대표원장, 마취과 전문의, 전담 회복 매니저처럼 그 단계를 책임지는 사람을 적었습니다. "안전합니다"라는 말 대신, 단계마다 누가 곁에 있는지를 보여 주는 것이 더 믿을 만하다고 판단했습니다.
| 섹션 | 담은 것 | 풀어 주는 망설임 |
|---|---|---|
| 리안의 약속 | 마취과 전문의, 전담 매니저, 원장 직접 | 수술만 하고 끝나지 않을까 |
| 흐르는 윤곽 라인 | S라인 위 사각턱·광대·실리프팅·지방이식 | 필요 이상으로 깎지 않을까 |
| 진료 3층 | 뼈, 피부, 볼륨으로 나눈 진료 | 나는 수술이 꼭 필요할까 |
| 안전 시스템 | 수술 전·중·후 6단계와 책임자 | 마취와 수술 중에 안전할까 |
| 의료진 | 집도의와 마취과 전문의를 나란히 | 수술하는 사람이 모든 걸 혼자 보지 않을까 |
| 회복실·회복 일정·FAQ | D-day부터 3M까지 6칸 | 언제 일상으로 돌아갈 수 있을까 |
의료진 섹션의 제목은 "수술하는 사람과 지키는 사람이 따로 있습니다"입니다. 대표원장과 마취과 전문의를 한 장의 사진에 나란히 세우고, 집도의가 수술에만 집중할 수 있도록 마취와 활력징후는 마취과 전문의가 따로 책임진다고 적었습니다. 이어지는 회복실 섹션에서는 1인 회복실 사진 위에 "회복의 모든 날에 같은 사람이 있습니다"를 두고, D-day 회복실 안정부터 D+1, D+3, D+7, 1M, 3M 정기 점검까지 회복 일정을 여섯 칸으로 펼쳤습니다. 수술 날짜를 고민하는 분이 자기 일정에 맞춰 미리 계산해 볼 수 있게 한 것입니다.
휴대폰 화면: 유리 구체는 저절로 돌고, 일정은 두 줄로
휴대폰 구성은 따로 다듬었습니다. 첫 화면은 옆얼굴 사진을 위로 크게 올리고, 그 아래 헤드라인과 설명을 두었습니다. 마우스가 없는 휴대폰에서는 유리 구체가 저절로 궤도를 돌고, 휴대폰을 기울이면 굴절이 함께 움직입니다.
안전 캐러셀은 손가락으로 끌어 돌리거나 아래 화살표로 넘길 수 있고, 회복 일정은 여섯 칸을 두 줄씩 쌓아 한 화면에서 3개월이 보이게 했습니다. 화면 아래에는 전화와 상담 예약 버튼을 고정해 어느 위치에서든 한 번에 누를 수 있고, 390px 폭에서 가로로 화면이 밀리지 않는지 따로 검수했습니다.
검색에 잡히게 한 장치, 그리고 실제 제작 과정
리안에는 "압구정 리안성형외과", "마취과 전문의 상주", "안면윤곽·실리프팅·지방이식"처럼 지역과 진료 분야, 강점이 함께 담긴 페이지 제목과 설명을 넣었습니다. 효과가 많은 만큼 첫 화면 아래의 사진은 지연 로딩으로 처리해 처음 열리는 속도를 지켰습니다. 다만 리안은 가상 병원이라 실제 검색에 잡히지 않도록 검색 제외(noindex)를 걸어 두었습니다.
실제 윤곽 성형외과 홈페이지를 만들 때는 병원 정보와 진료시간을 담은 구조화 데이터를 넣고, 네이버 서치어드바이저와 구글 서치 콘솔에 등록합니다. "사각턱 수술 회복 기간", "윤곽 수술 마취"처럼 환자가 실제로 검색하는 말로 칼럼 6편을 함께 써서 검색 입구를 늘립니다. 홈페이지가 상담 예약까지 이어지려면 상담실의 흐름도 함께 봐야 하는데, 그 이야기는 병원 상담 예약이 늘지 않을 때, 광고비보다 먼저 볼 곳에 정리해 두었습니다.
포트폴리오에는 연출 사진을 썼지만, 실제 제작에서는 원장님과 마취과 전문의, 회복실을 직접 촬영합니다. 진행은 원장님 인터뷰, 강점 한 문장, 섹션과 수술 페이지 구조, 촬영, 디자인과 효과, 검색 세팅, 오픈 후 숫자 확인 순서입니다. 강남 병원 안에서 약 10년 일한 실무 마케터 겸 디자이너가 처음부터 끝까지 직접 맡습니다.
병원 홈페이지 제작 비용은 330만 원(부가세 포함)이며 직접 촬영, 페이지와 수정 횟수 제한 없음, 검색용 칼럼 6편, 오픈 후 3개월 유지보수가 포함됩니다. 지금 홈페이지가 원장님의 강점을 잘 보여 주고 있는지 궁금하시면 무료 사전 진단을 신청해 주세요. 다른 업종의 제작 사례는 홈페이지 포트폴리오에서 보실 수 있습니다.
자주 묻는 질문
윤곽 성형외과 홈페이지 제작 비용은 얼마인가요?
블러썸팩토리의 홈페이지 제작은 330만 원(부가세 포함)이며 직접 촬영, 페이지와 수정 횟수 제한 없음, 검색용 칼럼 6편, 오픈 후 3개월 유지보수가 포함됩니다.
안전 시스템이나 회복 관리를 홈페이지 첫 화면에 두어도 괜찮을까요?
환자가 가장 두려워하는 것이 마취와 회복이라면 그것이 첫 화면의 증거가 되어야 합니다. 병원에 실제로 있는 체계를 인터뷰로 확인한 뒤 그대로 보여 드립니다.
같은 지역에 비슷한 성형외과가 많은데 어떻게 차별화하나요?
원장님의 강점 한 문장부터 정하면 색, 서체, 대표 장치가 모두 달라집니다. 리안과 엘란처럼 같은 압구정 성형외과도 전혀 다른 홈페이지가 됩니다.
유리 구체 같은 효과는 휴대폰에서도 보이나요?
마우스 대신 저절로 움직이는 궤도와 휴대폰 기울기에 반응하는 방식으로 바꾸고, 하단 고정 예약 바를 더해 휴대폰에서 쓰기 편하게 다듬습니다.
오픈 후 수정은 어떻게 하나요?
오픈 후 3개월은 수정 요청을 무료로 반영해 드리고, 이후에는 유지보수 정기권으로 이어 가거나 마케팅을 함께 하시면 무료로 관리해 드립니다.