외과 홈페이지 제작, 온결외과 '당일 진단'을 화면으로 만든 과정
요약 외과 홈페이지 제작에서 가장 먼저 정해야 할 것은 디자인보다 '검사 결과를 기다리는 환자의 불안을 어떻게 덜어 줄까'입니다. 온결외과는 블러썸팩토리가 갑상선·유방·하지정맥 클리닉이라는 가상의 외과를 정하고, 실제 의뢰처럼 원장님의 강점부터 정해 만든 포트폴리오 홈페이지입니다. 첫 화면의 숨 고르기 인트로부터 검사 당일 시간표까지, 어떤 판단으로 만들었는지 디자이너가 직접 정리했습니다.
이런 외과라고 가정했습니다
온결외과는 실제 병원이 아니라 저희가 포트폴리오용으로 만든 가상의 외과입니다. 서울의 한 동네에서 갑상선·유방·하지정맥을 중심으로 보는 클리닉이라고 정하고, 실제 의뢰를 받았을 때와 똑같이 "이 원장님은 무엇이 다른가"부터 적었습니다.
이 병원을 찾는 환자를 떠올려 보면 답이 나옵니다. 건강검진에서 갑상선 결절이 보인다는 말을 듣거나, 유방 촬영 후 재검 안내를 받은 분들입니다. 이분들은 정보를 찾기 전에 이미 마음이 불안하고, 결과를 기다리는 며칠을 가장 힘들어합니다. 그래서 강점 한 문장을 이렇게 정했습니다. 검사 당일 원장님이 직접 초음파를 보고, 그 자리에서 화면을 함께 보며 설명하는 '당일 진단'입니다.
이 한 문장이 정해지면 나머지는 그 약속을 증명하는 장치가 됩니다. 저희가 병원 브랜딩, 원장님에서 시작해야 하는 이유에서 말씀드린 방식을 외과에 그대로 적용한 셈입니다.
첫 화면: 정보보다 숨 한 번을 먼저
보통 유방외과 홈페이지나 갑상선 클리닉 홈페이지는 첫 화면에 장비 사진과 진료 과목을 빼곡히 올립니다. 저희는 반대로 갔습니다. 불안한 사람에게 정보를 쏟아 내면 오히려 더 조급해지기 때문입니다. 그래서 첫 3초는 깊은 숲색 화면에서 세이지색 구슬이 한 번 들이쉬는 장면으로 시작하고, 그 원이 열리며 첫 문장이 단어 단위로 천천히 떠오르게 했습니다.
첫 문장은 "오늘 본 것은, 오늘 설명합니다."입니다. 처음엔 "정확한 진단" 같은 말도 후보에 올렸지만, 어느 외과든 할 수 있는 말이라 버렸습니다. 대신 환자가 가장 원하는 것, 즉 기다리지 않아도 된다는 약속을 그대로 문장으로 만들었습니다. 배경의 여러 겹 물결 선은 4초 들숨과 4초 날숨 리듬으로 부풀고 가라앉고, 옆의 '숨을 고르세요' 표시도 같은 박자로 움직입니다.
오른쪽에는 원장님 사진을 크게 두었습니다. 누가 내 초음파를 직접 보는지 첫 화면에서 알 수 있어야 하기 때문입니다. 이 원칙은 병원 홈페이지 제작, 첫 화면에 원장님이 보여야 하는 이유에서 더 자세히 다뤘습니다.
외과 홈페이지 디자인: 차가운 흰색 대신 조용한 온도
병원 홈페이지라고 하면 흰 바탕에 파란색을 떠올리기 쉽습니다. 하지만 검사를 앞둔 환자에게 그 색은 진료실의 긴장을 그대로 떠올리게 합니다. 그래서 리넨(#F3EFE7), 세이지(#8FA593), 깊은 숲색(#23382E)만으로 따뜻하고 조용한 온도를 만들었습니다. 스크롤할수록 배경이 리넨에서 연세이지, 세이지, 숲색으로 깊어져 읽는 동안 마음이 가라앉는 흐름을 따라가게 했습니다.
| 요소 | 고른 것 | 이유 |
|---|---|---|
| 색 | 리넨, 세이지, 깊은 숲색 | 병원 특유의 차가운 흰색 대신 안정감 있는 자연색 |
| 한글 서체 | Pretendard | 결과 설명처럼 또렷하게 읽혀야 하는 문장에 적합 |
| 영문 서체 | Instrument Serif 이탤릭 | 손글씨처럼 부드럽게 받쳐 딱딱함을 덜어 줌 |
| 사진 모양 | 둥근 아치 | '안전한 방'에 들어선 듯한 인상 |
| 움직임 | 느린 easing, 부드러운 스크롤 | 모든 효과가 같은 호흡으로 움직이게 통일 |
섹션마다 하나의 망설임을 풀었습니다
갑상선, 유방, 하지정맥은 서로 다른 진료지만 원칙은 하나입니다. 그래서 세 클리닉 사진을 왼쪽에 고정해 두고, 오른쪽 설명을 스크롤하면 사진이 크로스페이드로 바뀌며 지금 읽는 클리닉만 또렷해지게 했습니다. 세 페이지로 흩어 놓는 것보다 '세 개의 클리닉, 하나의 원칙'이 한눈에 들어옵니다.
가장 공들인 장치는 검사 당일 타임라인입니다. "당일에 설명합니다"라는 말은 누구나 할 수 있으니, 시간표로 증명하기로 했습니다. 스크롤에 맞춰 물결 모양 선이 그려지면서 09:30 접수, 09:45 원장 직접 초음파, 10:05 결과 설명, 10:20 귀가가 차례로 켜집니다.
| 섹션 | 담은 것 | 풀어 주는 망설임 |
|---|---|---|
| 당일 진단 철학 | 접수부터 설명까지 약 40분 | 결과를 며칠씩 기다려야 하나 |
| 세 클리닉 | 갑상선, 유방, 하지정맥 + 일반외과 | 내 증상을 여기서 보나 |
| 검사 당일 타임라인 | 시간대별 진행 순서 | 하루를 통째로 비워야 하나 |
| 의료진 | 대표원장과 전문의 소개 | 누가 내 검사를 보나 |
| 공간·장비 | 대기 공간, 상담실, 초음파 장비 | 검사 환경이 편안할까 |
| FAQ·오시는 길 | 조직검사, 타 병원 결과지, 금식 | 무엇을 준비해 가야 하나 |
공간 섹션부터는 배경이 숲색으로 바뀝니다. "기다리는 시간도 진료의 일부입니다"라는 제목 아래 대기 공간, 상담실, 초음파실을 아치 사진으로 보여 줍니다. 포트폴리오에는 연출 사진을 썼지만, 실제 제작에서는 원장님과 병원 공간을 저희가 직접 촬영합니다.
휴대폰 화면: 엄지 하나로 전화와 예약
재검 안내를 받은 환자는 대부분 휴대폰으로 병원을 찾습니다. 그래서 화면 아래에 '전화'와 '진료 예약하기' 바를 고정해 어느 섹션을 읽다가도 바로 연락할 수 있게 했습니다. 마우스가 닿으면 물결이 비켜 가는 효과는 휴대폰에서 터치로 바꿨고, 고정 사진 클리닉은 사진과 설명이 위아래로 이어지게 다시 짰습니다.
움직임을 줄이도록 설정한 휴대폰에서는 효과를 최소화해 내용만 차분하게 보이게 했습니다. 효과가 많아도 글이 먼저 읽혀야 한다는 기준은 끝까지 지켰습니다.
검색에 잡히게 한 장치
하지정맥류 병원 홈페이지든 갑상선 클리닉 홈페이지든, 예쁘기만 하면 아무도 찾아오지 않습니다. 페이지 제목에는 병원 이름과 '갑상선·유방·하지정맥 클리닉', 강점 문장을 함께 넣었고, 검색 설명에는 당일 진단을 한 문장으로 담았습니다. 첫 화면을 뺀 사진은 모두 지연 로딩으로 불러와 효과가 많아도 첫 화면이 빨리 뜨게 했습니다.
온결외과는 가상 병원이라 검색에 잡히지 않도록 noindex를 걸어 두었습니다. 실제 제작에서는 지역 + 진료과 검색어를 페이지별로 나누고, 병원 정보를 구조화 데이터로 넣고, 네이버 서치어드바이저와 구글 서치 콘솔에 등록합니다. 검색 노출용 칼럼 6편도 함께 써 드립니다. AI 검색까지 고려한 방법은 병원 AI 검색, 챗GPT와 네이버 AI 브리핑에 우리 병원이 나오려면에 정리해 두었습니다.
우리 외과에 적용한다면
순서는 같습니다. 원장님 인터뷰로 강점 한 문장을 찾고, 그 문장을 증명할 섹션과 진료 페이지 구조를 짠 뒤, 병원을 직접 촬영하고 디자인과 효과를 입힙니다. 오픈 후에는 검색 세팅을 마치고 실제 숫자를 함께 확인합니다. 강남 병원 안에서 약 10년 일한 실무 마케터 겸 디자이너가 기획부터 제작까지 직접 맡습니다.
비용은 330만 원(부가세 포함)이며 직접 촬영, 페이지 수와 수정 횟수 제한 없음, 칼럼 6편, 오픈 후 3개월 유지보수가 포함됩니다. 다른 화면 구성이 궁금하시면 홈페이지 포트폴리오를 둘러보시고, 지금 홈페이지에서 무엇부터 바꿀지 궁금하시면 무료 사전 진단을 신청해 주세요. 마케터가 직접 살펴보고 답장드립니다.
자주 묻는 질문
외과 홈페이지 제작 비용은 얼마인가요?
블러썸팩토리는 330만 원(부가세 포함)이며 직접 촬영, 페이지 수와 수정 횟수 제한 없음, 검색용 칼럼 6편, 오픈 후 3개월 유지보수가 포함됩니다.
갑상선, 유방, 하지정맥처럼 클리닉이 여러 개면 페이지를 따로 만들어야 하나요?
메인에서는 하나의 원칙으로 묶어 보여 주고, 검색을 위해 클리닉별 상세 페이지를 따로 두는 것을 권합니다.
이런 효과가 많으면 홈페이지가 느리지 않나요?
움직임은 가벼운 방식으로만 만들고 첫 화면 외 사진은 지연 로딩으로 불러와, 휴대폰에서도 첫 화면이 빨리 뜨도록 확인합니다.
진료 시간이나 의료진이 바뀌면 직접 수정할 수 있나요?
오픈 후 3개월은 무료로 수정해 드리고, 이후에는 유지보수 정기권이나 간단한 수정 방법 안내 중에서 고르실 수 있습니다.
원장님 사진은 꼭 새로 찍어야 하나요?
강점이 원장님의 진료 방식이라면 직접 촬영을 권하며, 제작 비용에 촬영이 포함되어 있습니다.