눈 성형외과 홈페이지 제작기: 신사 모노성형외과 포트폴리오
요약 눈 성형외과 홈페이지 제작에서 저희가 붙잡은 숫자는 0.5mm였습니다. 이 글은 블러썸팩토리가 서울 신사의 가상 눈 성형 전문 병원 '모노성형외과'를 정하고, 실제 의뢰처럼 원장님의 기준부터 세워 만든 포트폴리오 홈페이지의 제작기입니다. 빨간 점 하나가 눈꺼풀이 되는 인트로, 쌍꺼풀 라인을 직접 바꿔 보는 라인 디자이너, 흑백과 빨간색 한 점만 쓴 디자인, 휴대폰 화면과 검색 세팅까지 디자이너가 어떤 판단으로 만들었는지 순서대로 보여 드립니다.
눈만 하는 병원, 강점을 숫자 하나로 정했습니다
모노성형외과는 실제 고객이 아니라 저희가 포트폴리오용으로 만든 가상의 신사 성형외과입니다. 그래도 진행은 실제 의뢰와 똑같이 했습니다. 원장님 인터뷰를 한다고 가정하고, 눈 성형을 알아보는 환자가 어떤 상태로 들어오는지부터 적었습니다.
눈 성형을 고민하는 분들은 인라인, 인아웃, 몇 mm 같은 말을 이미 검색해 보고 옵니다. 그래도 끝까지 남는 질문은 하나입니다. "그래서 내 눈에는 어떤 라인이 맞을까?"
그래서 모노의 강점은 "15년간 눈 성형만 해 온 대표원장이 쌍꺼풀 라인을 0.5mm 단위로 직접 디자인한다"로 정했습니다. 헤드라인은 "눈 하나만, 15년."입니다. 병원 이름 모노(MONO)도 '하나'라는 뜻에서 가져왔습니다. 강점 한 문장을 먼저 정하는 이유는 병원 브랜딩, 원장님에서 시작해야 하는 이유에 자세히 적어 두었습니다.
첫 화면: 빨간 점 하나가 눈꺼풀이 되는 3초
사이트를 열면 빈 흰 화면에 빨간 점 하나가 찍힙니다. 점은 가로선으로 늘어나 눈꺼풀 곡선이 되고, 그 위에 쌍꺼풀선과 7.5 MM 치수가 그려집니다. 이어서 선이 다시 곧게 펴지고 그 위로 MONO 글자가 솟아오르며, 선은 접혀서 마침표가 됩니다. 마지막으로 12단 그리드 선이 착착 그려지며 화면이 열립니다. 원장님이 상담실에서 펜 하나로 라인을 그리는 장면을 첫 3초로 옮긴 것입니다.
히어로는 왼쪽에 "눈 하나만, 15년."과 "쌍꺼풀 라인은 0.5mm 단위로, 대표원장이 직접 디자인합니다"를, 오른쪽에 흑백 인물 사진을 두었습니다. 사진에 마우스를 올리면 빨간 십자선과 X·Y 좌표가 따라다녀, 얼굴을 정밀하게 재는 느낌을 줍니다. 아래에는 EYE ONLY, 2011, 0.5 MM 세 가지 숫자를 제도 도면의 표제란처럼 정리했습니다. 화면 맨 아래의 거대한 MONO 글자는 사진과 겹치는 부분만 흑백이 반전되고, 끝의 빨간 점이 0.5mm를 상징합니다.
성형외과 홈페이지 디자인: 흑, 백, 그리고 빨간 선 하나
디자인의 기준은 스위스 인터내셔널 타이포그래피와 미니멀한 브루탈리즘입니다. 성형외과 홈페이지에서 흔한 금색과 대리석, 우아한 세리프는 '고급스러움'은 주지만 '정밀함'은 약합니다. 모노가 팔아야 하는 것은 0.5mm를 다루는 손의 정밀함이라, 설계 도면의 언어를 빌렸습니다.
12단 그리드 선을 화면에 그대로 드러내고, (01) 같은 괄호 번호, 좌표, 눈금을 라벨처럼 썼습니다. 서체는 Archivo 한 가족만 쓰되, 가장 넓고 굵은 900과 가장 가는 100~200을 극단적으로 대비시켜 BY NUMBERS, LINE DESIGNER 같은 섹션 제목을 포스터처럼 세웠습니다. 사진은 모두 흑백으로 두어, 화면에 빨간색이 나오는 곳은 쌍꺼풀선과 0.5라는 숫자, 예약 버튼뿐입니다.
| 요소 | 고른 것 | 이유 |
|---|---|---|
| 바탕·글자 | 순백 #FFFFFF, 순흑 #0A0A0A | 장식을 모두 걷어 내 선과 숫자만 남기기 위해 |
| 포인트 | 시그널 레드 #FF2B2B 한 가지 | 쌍꺼풀선, 0.5, 예약 버튼에만 써서 시선을 모음 |
| 보조색 | 그레이 #6E6E6E | 라벨과 좌표처럼 한 단계 낮은 정보 |
| 서체 | Archivo 100~900, 너비 62~125 + Pretendard | 한 가족 안의 극단적 대비로 '한 가지만 하는 병원'을 닮게 |
| 장치 | 드러난 12단 그리드, 괄호 번호, 십자선 좌표 | 0.5mm를 재는 제도(製圖)의 언어 |
섹션마다 "내 눈에 맞는 라인"에 다가가기
히어로 다음은 'BY NUMBERS', 숫자로 보는 원칙입니다. 외곽선만 있던 15, 1, 0.5가 스크롤에 맞춰 아래에서부터 채워지고, 옆에 진행률이 000%부터 올라갑니다. 15년 눈만 봤다, 진료 과목은 하나, 라인은 0.5mm 단위로. 세 숫자가 차오르는 동안 이 병원의 원칙을 모두 읽게 됩니다. 0.5만 빨간색으로 채워, 세 숫자 중 무엇이 핵심인지 분명히 했습니다.
이 홈페이지의 대표 장치는 '라인 디자이너'입니다. 인라인, 인아웃, 아웃라인, 자연유착 네 버튼을 누르면 눈 일러스트 위의 빨간 쌍꺼풀선이 부드럽게 모양을 바꾸고, 유형 이름이 무작위 글자로 바뀌다 정착합니다. 슬라이더를 끌면 4mm부터 10mm까지 0.5mm 단위로 선 높이와 눈금자, 치수선이 실시간으로 바뀝니다. 오른쪽에는 그 라인의 설명과 '어울리는 눈'이 함께 나옵니다. 상담실에서 원장님과 거울 앞에서 하는 일을 미리 체험하게 해, "이 병원은 라인을 정말 이렇게 정하는구나"를 손으로 느끼게 하고 싶었습니다.
일러스트 아래에는 "이해를 돕기 위한 일러스트입니다. 실제 라인은 눈꺼풀 두께·지방량·눈 뜨는 힘을 진찰한 뒤 원장이 직접 정합니다"를 넣었습니다. 체험이 곧 결정처럼 읽히지 않도록, 결정은 진찰에서 한다는 선을 함께 긋는 것입니다.
그 다음 'EYE INDEX'는 여섯 가지 눈 수술을 사진 없이 이름, 설명, 수술 시간만으로 목차처럼 정리했습니다. 줄에 마우스를 올리면 검게 반전되며 빨간 화살표가 나타납니다.
| 섹션 | 담은 것 | 풀어 주는 망설임 |
|---|---|---|
| 숫자로 보는 원칙 | 15년, 진료 과목 1, 0.5mm | 정말 눈을 전문으로 하는 곳일까 |
| 철학 | 먼저 재고 그리기, 거울 앞에서 함께, 상담한 원장이 수술 | 사진 한 장으로 라인을 정하지 않을까 |
| 라인 디자이너 | 유형 4가지, 4~10mm 슬라이더 | 내 눈에는 어떤 라인이 맞을까 |
| 눈 수술 6 | 매몰부터 재수술까지, 수술 시간 | 내 경우는 어떤 수술일까 |
| 대표원장 | 15년, 다른 수술 0, 라인 단위 0.5mm | 상담과 수술하는 사람이 다르지 않을까 |
| 진료 과정·공간·FAQ | 4단계, 100% 예약제, 질문 5개 | 회복은 얼마나, 재수술도 되나 |
원장 소개는 "눈은 0.5mm에서 인상이 바뀝니다. 그래서 15년 동안 다른 수술은 하지 않았습니다."라는 말로 시작합니다. 원장님 흑백 사진은 가로 줄 단위로 좌우에서 밀려 들어와 맞춰지고, 그 위에도 빨간 십자선이 지나갑니다. 경력 아래에는 YEARS ON EYES 15, OTHER SURGERY 0, LINE UNIT 0.5MM 세 숫자를 다시 한 번 두어, 첫 화면의 약속을 원장님 이름으로 마무리했습니다.
휴대폰 화면: 손가락으로 끄는 0.5mm
휴대폰에서는 PC의 그리드를 한 줄 구성으로 다시 짜고, 헤드라인과 세 숫자 아래에 흑백 사진을 두었습니다. 마우스가 없는 휴대폰에서는 사진이 맞춰진 뒤 십자선이 눈 위치로 저절로 이동하고, 화면을 누르면 그 자리로 옮겨 갑니다.
라인 디자이너는 휴대폰에서 더 자연스럽습니다. 슬라이더를 손가락으로 끌어 0.5mm씩 바꾸고, 눈 일러스트 위에서 위아래로 끌어도 높이가 바뀝니다. 화면 아래에는 검은 전화 버튼과 빨간 상담 예약 버튼을 고정해, 빨간색이 끝까지 '다음 행동'을 가리키게 했습니다. 390px 폭에서 가로로 화면이 밀리지 않는지도 따로 검수했습니다.
검색에 잡히게 한 장치, 그리고 실제 제작 과정
모노에는 "신사 모노성형외과", "눈 하나만, 15년", "쌍꺼풀 라인 0.5mm"처럼 지역과 진료 분야, 강점이 함께 담긴 페이지 제목과 설명을 넣었습니다. 첫 화면 아래의 사진은 지연 로딩으로 처리해 처음 열리는 속도를 지켰습니다. 다만 모노는 가상 병원이라 실제 검색에 잡히지 않도록 검색 제외(noindex)를 걸어 두었습니다.
실제 눈 성형외과 홈페이지를 만들 때는 병원 정보와 진료시간을 담은 구조화 데이터를 넣고, 네이버 서치어드바이저와 구글 서치 콘솔에 등록합니다. "인아웃 라인 차이", "쌍꺼풀 재수술 시기"처럼 환자가 실제로 검색하는 말로 칼럼 6편을 함께 써서 검색 입구를 늘립니다. AI 검색이 병원을 소개할 때 무엇을 읽는지는 병원 AI 검색, 챗GPT와 네이버 AI 브리핑에 우리 병원이 나오려면에 정리해 두었습니다.
같은 성형외과라도 얼굴 전체의 비율을 먼저 보는 병원은 전혀 다른 홈페이지가 됩니다. 딥 차콜과 금선으로 만든 사례는 성형외과 홈페이지 제작기: 압구정 엘란성형외과에서 비교해 보실 수 있습니다. 포트폴리오에는 연출 사진을 썼지만, 실제 제작에서는 원장님과 상담실, 공간을 직접 촬영합니다. 진행은 원장님 인터뷰, 강점 한 문장, 섹션과 수술 페이지 구조, 촬영, 디자인과 효과, 검색 세팅, 오픈 후 숫자 확인 순서이며, 강남 병원 안에서 약 10년 일한 실무 마케터 겸 디자이너가 처음부터 끝까지 직접 맡습니다.
병원 홈페이지 제작 비용은 330만 원(부가세 포함)이며 직접 촬영, 페이지와 수정 횟수 제한 없음, 검색용 칼럼 6편, 오픈 후 3개월 유지보수가 포함됩니다. 지금 홈페이지가 원장님의 강점을 잘 보여 주고 있는지 궁금하시면 무료 사전 진단을 신청해 주세요. 다른 업종의 제작 사례는 홈페이지 포트폴리오에서 보실 수 있습니다.
자주 묻는 질문
눈 성형외과 홈페이지 제작 비용은 얼마인가요?
블러썸팩토리의 홈페이지 제작은 330만 원(부가세 포함)이며 직접 촬영, 페이지와 수정 횟수 제한 없음, 검색용 칼럼 6편, 오픈 후 3개월 유지보수가 포함됩니다.
라인 디자이너 같은 체험 화면도 만들 수 있나요?
네. 원장님이 상담에서 실제로 쓰는 기준과 설명을 인터뷰로 정리한 뒤, 환자가 미리 눌러 볼 수 있는 화면으로 옮깁니다.
전후 사진 없이도 성형외과 홈페이지가 설득력이 있을까요?
원장님의 기준을 숫자와 체험으로 보여 주면 사진이 없어도 이 병원이 어떻게 결정하는지가 전달됩니다. 실제 사진을 쓸 때도 이 구조 위에 더합니다.
흑백 디자인이면 차갑게 느껴지지 않나요?
장식을 덜어 낸 만큼 원장님의 문장과 숫자가 또렷해집니다. 병원의 성격에 따라 색을 고르며, 모든 성형외과에 흑백을 권하지는 않습니다.
오픈 후 수정은 어떻게 하나요?
오픈 후 3개월은 수정 요청을 무료로 반영해 드리고, 이후에는 유지보수 정기권으로 이어 가거나 마케팅을 함께 하시면 무료로 관리해 드립니다.