대장항문외과 홈페이지 제작, 편안외과 '이름 대신 번호'를 화면으로 만든 과정
요약 대장항문외과 홈페이지 제작에서 저희가 가장 먼저 붙잡은 질문은 "누가 볼까, 누가 들을까"였습니다. 편안외과는 블러썸팩토리가 서울 잠실의 가상 대장항문·수면 내시경 클리닉을 정하고, 실제 의뢰처럼 원장님의 강점부터 세워 만든 포트폴리오 홈페이지입니다. 성에 닦기 인트로, 이름을 묻지 않는 익명 사전 문진, 수면 내시경 하루 타임라인까지 어떤 판단으로 만들었는지 디자이너가 직접 정리했습니다.
잠실의 가상 대장항문외과, 강점부터 정했습니다
편안외과는 실제 고객이 아니라 저희가 포트폴리오용으로 만든 가상의 대장항문외과입니다. 서울 잠실에서 치질·변비·항문 통증과 수면 대장내시경을 보는 클리닉이라고 정하고, 실제 의뢰와 똑같이 "이 병원을 찾는 사람은 어떤 마음으로 홈페이지를 여는가"부터 적었습니다.
대장항문 진료를 알아보는 분들은 증상보다 다른 것을 먼저 걱정합니다. 대기실에서 이름이 불리지 않을까, 진찰이 너무 민망하지 않을까, 아는 사람과 마주치지 않을까. 그래서 몇 달씩 참다가 오는 경우가 많습니다. 이 망설임을 풀지 못하면 아무리 경력이 좋아도 예약으로 이어지지 않습니다.
그래서 강점 한 문장을 이렇게 정했습니다. 여성 대장항문 전문의가 1인 진료실에서 직접 보고, 이름 대신 번호로 부르며, 수면 내시경은 당일 검사·당일 설명. 헤드라인은 "말하기 어려운 곳일수록, 조용하고 분명하게."입니다. 가려 줄 것은 가리고, 진단은 분명하게 하겠다는 약속입니다. 강점 한 문장에서 디자인을 시작하는 이유는 병원 브랜딩, 원장님에서 시작해야 하는 이유에 자세히 적어 두었습니다.
첫 화면: 성에 낀 유리를 닦아 내듯
사이트를 열면 화면 전체가 성에 낀 유리처럼 뿌옇습니다. 잠시 뒤 가운데부터 둥글게 닦아 낸 듯 맑아지며 "말하기 어려운 곳일수록, 조용하고 분명하게."라는 문장이 드러나고, 가장자리에는 서리가 액자처럼 남습니다. PC에서는 커서가 지나가는 자리의 서리도 함께 닦입니다. '흐릿하게 가려 주지만, 봐야 할 것은 또렷하게'라는 이 병원의 원칙을 설명하기 전에 먼저 눈으로 느끼게 하고 싶었습니다.

첫 화면 왼쪽 아래에는 유리로 된 작은 번호 티켓을 붙였습니다. "Now calling, 이름은 부르지 않습니다. 번호로 진료실 1에 안내해요."라는 문구와 함께 027, 028처럼 숫자가 일정한 간격으로 넘어갑니다. '이름 대신 번호'를 문장으로 한 번 말하고 끝내지 않고, 화면에 머무는 내내 계속 보여 주는 장치입니다.
버튼은 두 개만 두었습니다. "익명 사전 문진 해보기"와 "전화 예약"입니다. 이 병원을 찾는 분들은 바로 전화하기보다 먼저 혼자 확인해 보고 싶어 하기 때문에, 이름을 남기지 않아도 되는 문진을 첫 번째 버튼으로 세웠습니다.
대장항문외과 홈페이지 디자인: 차가운 흰색 대신 라벤더 유리
병원 홈페이지는 흔히 흰색과 파란색으로 깨끗함을 말합니다. 하지만 민망한 증상으로 들어온 분에게 차가운 흰색은 진찰대의 조명처럼 느껴질 수 있습니다. 그래서 라벤더와 웜 그레이, 딥 플럼만 남겨 조용하고 사적인 온도를 만들었습니다.
한글은 Noto Sans KR을 가는 굵기로 써서 속삭이듯 읽히게 했고, 영문은 Newsreader 이탤릭으로 "Softly, yet clearly."처럼 부드럽게 받쳤습니다. 카드, 헤더, 버튼은 모두 뒤가 흐릿하게 비치는 프로스티드 유리 질감으로 통일했습니다. 사이트 전체가 '가려 주지만 내용은 또렷한' 하나의 재질로 읽히게 하려는 선택입니다.
| 요소 | 고른 것 | 이유 |
|---|---|---|
| 바탕색 | 페이퍼 #F6F4F8, 웜 그레이 #E7E3EA | 진찰실의 차가운 흰색 대신 조용한 밝기 |
| 포인트 | 라벤더 #CFC6EA, 딥 라벤더 #8E80C2 | 긴장을 낮추는 색, 대장항문 진료의 무거움을 덜기 |
| 활자와 마무리 | 딥 플럼 #2E2440, 밤 플럼 #1F182C | 검정보다 부드럽고, 푸터에서 차분하게 닫기 |
| 서체 | Noto Sans KR 가는 굵기 + Newsreader 이탤릭 | 크게 외치지 않고 조용히 말하는 목소리 |
| 질감 | 프로스티드 유리(배경 흐림) | 프라이버시를 사이트 전체의 재질로 표현 |
섹션마다 '누가 볼까'를 하나씩 풀기
첫 화면 다음에는 "편안외과의 프라이버시는 약속이 아니라 구조입니다."라는 섹션을 두었습니다. 여성 전문의가 직접, 1인 진료실, 이름 대신 번호 호출, 당일 내시경·당일 설명 네 가지를 카드로 나눠, 마음가짐이 아니라 동선과 공간과 호출 방식으로 지킨다는 점을 보여 줍니다.
이어지는 "흐릿하게, 그러나 분명하게." 섹션은 공간 갤러리입니다. 칸막이로 나뉜 1인 대기석, 대기실에서 보이지 않는 복도, 라벤더 내시경실, 차 한 잔의 회복 라운지 사진이 처음엔 유리 뒤에 흐릿하게 있다가, 화면 가운데로 올수록 서서히 선명해집니다. 스크롤을 내리는 행동 자체가 '가까이 와야 보이는 공간'을 경험하게 만듭니다.

이 사이트의 중심은 익명 사전 문진입니다. "말하기 어려운 증상, 고르기만 하세요."라는 제목 아래 '배변 때 피가 묻어요', '뭔가 튀어나와요', '잔변감이 있어요' 같은 증상 칩 아홉 개가 있습니다. 고르면 임시 번호가 붙은 익명 카드가 펼쳐지고, 기간과 나이대를 고르면 치핵, 치열, 치루, 변비 상담, 수면 대장내시경 가운데 맞을 수 있는 진료를 안내합니다. 입력한 내용은 저장도 전송도 되지 않고, 화면을 닫으면 사라진다는 문장을 칩 바로 위에 적어 두었습니다.

결과에는 "진단이 아닌 안내입니다. 정확한 판단은 진찰 후에."라는 문장을 함께 두었고, 다음 버튼도 "번호로만 예약하기"로 이름 붙였습니다. 문진에서 예약까지 이름을 묻지 않는 흐름이 끊기지 않게 하려는 것입니다.
| 섹션 | 담은 것 | 풀어 주는 망설임 |
|---|---|---|
| 프라이버시 4가지 | 여성 전문의, 1인 진료실, 번호 호출, 당일 설명 | 누가 볼까, 누가 들을까 |
| 유리 공간 갤러리 | 1인 대기석, 복도, 내시경실, 회복 라운지 | 대기실에서 마주치지 않을까 |
| 익명 사전 문진 | 증상 칩, 기간·나이대, 진료 안내 | 내 증상은 어디로 가야 할까 |
| 진료 과목 5가지 | 치핵, 치열, 치루, 변비, 수면 내시경 | 무조건 수술하라고 하지 않을까 |
| 내시경 하루 타임라인 | 08:30 도착부터 10:00 원장 설명까지 | 검사 날 무엇을 하게 될까 |
| 원장과 FAQ | 원장 한마디, 경력, 질문 5개 | 진찰은 어떻게 하는지 민망하다 |
진료 과목의 제목은 "대장항문 진료, 필요한 만큼만."입니다. 대부분은 생활 습관과 약, 간단한 처치로 시작하고, 수술이 필요할 때도 범위는 최소로 한다는 원칙을 먼저 밝혔습니다. 수술이 무서워 미루는 분들이 많아서입니다.
수면 내시경 섹션은 "수면 내시경 날, 오전 한나절이면 됩니다."라는 제목으로 하루를 시간표로 보여 줍니다. 08:30 도착과 번호표, 08:45 번호 호출, 09:00 수면 대장내시경, 09:25 회복 라운지, 10:00 원장 설명과 귀가까지 다섯 단계가 스크롤을 따라 라벤더 점선으로 이어지며 흐림에서 선명하게 켜집니다. 무엇이 기다리는지 알면 덜 긴장하기 때문입니다.

원장 섹션의 한마디는 "어디가 불편한지 말하는 것부터 용기가 필요하다는 걸 압니다. 그래서 묻는 건 최소로, 설명은 충분히 합니다."입니다. FAQ 제목도 "조용히 묻고 싶었던 것들"로 정하고, '정말 이름을 부르지 않나요?', '진찰은 어떻게 하나요? 부끄러워서 망설여져요.'처럼 실제로 소리 내 묻기 어려운 질문을 그대로 실었습니다.

휴대폰 화면: 익명 문진과 전화를 엄지 아래에
이런 증상은 대개 혼자 있을 때 휴대폰으로 검색합니다. 그래서 모바일에서는 화면 아래에 '익명 문진'과 '전화 예약' 버튼을 고정해, 어느 섹션을 읽다가도 바로 넘어갈 수 있게 했습니다. 버튼의 순서도 PC와 같이 익명 문진을 앞에 두었습니다.
증상 칩은 손가락으로 누르기 쉽게 두 줄로 크게 다시 배치했고, 커서가 없는 휴대폰에서는 라벤더 빛이 스스로 천천히 떠다니도록 바꿨습니다. 내시경 타임라인은 세로로 길게 이어지도록 정리하고, 390px 폭에서 가로로 화면이 밀리지 않는지 따로 검수했습니다.



검색 세팅, 그리고 실제 대장항문외과에 적용한다면
대장항문외과는 "잠실 항문외과", "치질 병원 여의사", "수면 대장내시경 당일 결과"처럼 지역과 조건을 붙여 검색하는 분이 많습니다. 그래서 페이지 제목은 "편안외과 | 여성 대장항문 전문의 · 수면 대장내시경 — 조용하고 분명하게"로, 설명 문구에는 1인 진료실, 이름 대신 번호, 당일 검사·당일 설명, 잠실을 모두 담았습니다. 효과가 많아도 첫 화면 아래 사진은 지연 로딩으로 처리해 처음 열리는 속도를 지켰고, 가상 병원이라 검색 제외(noindex)를 걸어 두었습니다.
실제 제작에서는 병원 정보와 진료시간을 담은 구조화 데이터를 넣고 네이버 서치어드바이저와 구글 서치 콘솔에 등록합니다. 치핵, 치열, 치루, 수면 내시경처럼 진료마다 환자가 실제로 검색하는 질문으로 칼럼 6편을 함께 써서 검색 입구를 늘립니다. 공간 사진도 실제 대기실과 회복실을 직접 촬영해, 칸막이와 동선이 사진으로 증명되게 합니다.
같은 외과라도 강점이 다르면 홈페이지는 전혀 달라집니다. 검사 결과를 기다리는 불안을 다룬 온결외과 제작기, 다친 날의 급한 마음을 다룬 이음외과 제작기와 비교해 보시면 차이가 잘 보입니다.
병원 홈페이지 제작 비용은 330만 원(부가세 포함)이며 직접 촬영, 페이지와 수정 횟수 제한 없음, 검색용 칼럼 6편, 오픈 후 3개월 유지보수가 포함됩니다. 지금 홈페이지가 환자의 망설임을 풀어 주고 있는지 궁금하시면 무료 사전 진단을 신청해 주세요. 자동 답변이 아니라 마케터가 직접 살펴보고 답장드립니다. 다른 업종 사례는 홈페이지 포트폴리오에서 보실 수 있습니다.
자주 묻는 질문
대장항문외과 홈페이지 제작 비용은 얼마인가요?
330만 원(부가세 포함)이며 직접 촬영, 페이지와 수정 횟수 제한 없음, 검색용 칼럼 6편, 오픈 후 3개월 유지보수가 포함됩니다.
익명 사전 문진 같은 기능도 만들 수 있나요?
네, 증상 선택과 진료 안내를 병원 진료 과목에 맞게 설계합니다. 개인정보를 받지 않는 방식이라 저장 없이 화면 안에서만 동작하게 만들 수 있습니다.
민감한 진료과인데 공간 사진은 어떻게 찍나요?
환자가 없는 시간에 대기실, 복도, 회복실을 직접 촬영하고, 사람이 필요한 장면은 동의를 받은 직원이나 연출로 얼굴이 드러나지 않게 찍습니다.
효과가 많으면 휴대폰에서 느리지 않나요?
흐림 효과와 움직임은 가벼운 방식으로 만들고 첫 화면 아래 사진은 지연 로딩해, 휴대폰에서 직접 검수한 뒤 오픈합니다.
오픈 후 진료시간이나 원장님 정보가 바뀌면요?
오픈 후 3개월은 무료로 수정해 드리고, 이후에는 유지보수 정기권으로 이어 가거나 마케팅을 함께 하시면 무료로 관리해 드립니다.