외과 홈페이지 제작, 이음외과 '흉터까지 생각하는 봉합'을 화면으로 만든 과정

요약 상처·흉터 클리닉 홈페이지 제작에서 저희가 붙잡은 질문은 "방금 다친 사람이 이 화면에서 가장 먼저 알아야 할 것은 무엇인가"였습니다. 이음외과는 블러썸팩토리가 서울 마포의 가상 상처·흉터 봉합 외과를 정하고, 실제 의뢰처럼 원장님의 강점부터 세워 만든 포트폴리오 홈페이지입니다. 찢어진 종이를 꿰매는 인트로, 반창고 카드, 90일 회복 타임라인까지 어떤 판단으로 만들었는지 디자이너가 직접 정리했습니다.

마포의 가상 상처·흉터 외과, 강점부터 정했습니다

이음외과는 실제 고객이 아니라 저희가 포트폴리오용으로 만든 가상의 외과입니다. 서울 마포에서 찢어진 상처, 화상, 흉터 재건, 아이 상처를 보는 봉합 클리닉이라고 정하고, 실제 의뢰처럼 "이 홈페이지를 여는 사람은 지금 어떤 상황인가"부터 적었습니다.

답은 분명했습니다. 대개 방금 다쳤거나, 아이가 다쳐 마음이 급한 보호자입니다. 이분들이 가장 먼저 알고 싶은 것은 두 가지입니다. 지금 가면 봐 주는지, 그리고 꿰맨 자리가 흉터로 남지 않을지. 앞의 것은 시간의 문제이고, 뒤의 것은 원장님 실력의 문제입니다.

그래서 강점 한 문장을 응급 상처도 성형 봉합으로, 첫 땀부터 흉터까지 생각하는 외과 전문의가 평일 밤 10시·주말 8시까지 직접 봉합한다로 정했습니다. 헤드라인은 "상처를 닫는 순간부터, 흉터를 생각합니다."입니다. 급한 마음과 흉터 걱정을 한 문장 안에서 함께 받는 문장입니다. 원장님의 강점에서 시작하는 방식은 병원 브랜딩, 원장님에서 시작해야 하는 이유에 정리해 두었습니다.

첫 화면: 3초 동안 한 땀씩 꿰매는 인트로

사이트를 열면 화면을 가로지르는 찢어진 종이 두 조각이 왼쪽부터 지퍼처럼 맞붙고, 바늘이 지나간 자리마다 코랄 실이 한 땀씩 꿰매지며 IEUM 로고가 완성됩니다. '상처를 잇는 병원'이라는 정체성을 설명 없이 3초 안에 보여 주는 장면입니다. 급한 분을 오래 붙잡지 않도록 인트로는 짧게, 건너뛰기(SKIP) 버튼도 함께 두었습니다.

인트로가 끝나면 가장 먼저 보이는 것은 문장 위의 작은 표시입니다. '지금 진료 중 · 오늘 22:00까지 봉합'. 다친 사람에게 가장 급한 정보를 헤드라인보다 위에 올렸습니다. 그 아래 헤드라인, 성형 봉합 설명, "지금 봉합 문의하기" 버튼이 이어지고, 맨 아래에는 '6-0 머리카락보다 가는 실', '22:00 평일 밤까지 봉합', 'Sat · Sun 주말·공휴일 진료' 세 숫자를 나란히 두었습니다.

화면 오른쪽 아래에는 '지금 다치셨나요?' 칩을 고정했습니다. 현재 시각을 기준으로 진료 중인지와 마감 시간을 보여 주며 맥박처럼 두 번씩 깜빡이고, 누르면 진료시간, 응급처치 세 가지, 전화 버튼이 열립니다. 어느 섹션을 읽고 있든 다친 사람이 길을 잃지 않게 하는 비상구입니다.

외과 홈페이지 디자인: 화이트, 스킨 베이지, 코랄 봉합선

상처 클리닉 홈페이지에 피와 붉은색을 쓰면 불안이 커집니다. 반대로 차가운 병원 파랑을 쓰면 '아플 것 같은' 인상이 남습니다. 저희는 깨끗한 화이트 위에 피부색에 가까운 스킨 베이지와 부드러운 코랄만 써서 '깨끗하게 아무는 회복'의 온도를 만들었습니다.

가장 공들인 것은 선입니다. 사이트의 구분선과 밑줄을 모두 코랄 봉합 땀으로 바꿨습니다. 제목의 핵심 단어 아래에는 땀 모양 밑줄이 그려지고, PC에서는 화면 왼쪽 세로 봉합선이 스크롤한 만큼 한 땀씩 이어지며 바늘과 땀 수가 표시됩니다. 페이지를 읽어 내려가는 흐름 자체가 하나의 봉합 과정이 되도록 한 것입니다.

섹션 구성: 다친 날의 불안에서 흉터 이후의 안심까지

첫 섹션은 원장의 봉합 철학입니다. "같은 상처도, 어떻게 꿰매느냐에 따라 흉터가 달라집니다."라는 제목 아래, 겉만 당겨 묶은 봉합과 속을 녹는 실로 먼저 잇는 성형 봉합을 단면 그림 두 장으로 나란히 비교했습니다. 말로 "성형 봉합"이라고만 하면 광고처럼 들리지만, 장력이 어디에 걸리는지 그림으로 보면 누구나 차이를 이해합니다.

다음은 "어떤 상처로 오셨나요?" 섹션입니다. 찢어진 상처, 화상, 흉터 재건, 아이 상처 네 장의 카드는 모서리가 반창고처럼 말려 있습니다. 누르면 대각선으로 떼어지며 뒤집혀 '이럴 때 / 이음의 방식 / 다음 내원'을 보여 줍니다. 예를 들어 찢어진 상처 카드 뒷면에는 피부 결 방향으로 2겹 봉합, 얼굴은 6-0 가는 실, 얼굴 5일·몸 10~14일 전후 실밥 제거가 적혀 있습니다. 내 상처가 어디에 해당하고 앞으로 몇 번 오면 되는지가 한 장에 정리됩니다.

이 사이트의 대표 효과는 회복 타임라인입니다. "흉터는 90일에 걸쳐 천천히 자리 잡습니다." 아래의 막대를 Day 1에서 7, 30, 90으로 움직이면, 그림 속 흉터의 붉은 기와 두께, 실밥, 테이프가 연속으로 변하며 옅어지고 시기별 관리 방법도 함께 바뀝니다. 실제 전후 사진 없이도 회복 과정을 이해할 수 있게 하고, "실제 사진이 아닌 이해를 돕기 위한 그림"이라는 안내를 바로 아래 적었습니다.

"지금 다치셨다면" 섹션만 배경을 차콜로 바꿨습니다. 꾹 눌러 지혈, 흐르는 물로 세척, 연고는 바르지 않기, 출발 전 전화. 오는 동안 기억할 네 가지를 큰 숫자 카드로 두고, 이어서 접수·상처 확인부터 드레싱·관리 안내까지 "도착 후 약 40분"의 흐름을 분 단위로 보여 줍니다. 출혈이 멈추지 않거나 손가락이 잘 움직이지 않으면 응급실로 가라는 안내도 숨기지 않고 적었습니다. 갈 곳을 정직하게 알려 주는 병원이 오히려 신뢰를 얻습니다.

의료진 섹션에는 "상처를 닫는 건 외과의사의 일이고, 흉터를 줄이는 건 한 땀의 정성입니다."라는 원장님 한마디를 두고, 야간·주말을 맡는 원장도 같은 봉합 원칙과 기록 방식으로 진료하며 실밥 제거와 흉터 관리는 처음 봉합한 원장이 이어 본다는 점을 적었습니다. 밤에 와도 같은 기준이라는 약속입니다.

휴대폰 화면: 전화와 진료시간을 늘 한 번에

다친 순간 홈페이지를 여는 곳은 거의 언제나 휴대폰입니다. 그래서 모바일 하단에 '전화'와 '진료시간 · 오시는 길' 버튼을 고정하고, '지금 다치셨나요?' 칩도 그 위에 함께 띄웠습니다. 한 손으로 지혈하면서도 엄지 하나로 전화할 수 있어야 하기 때문입니다.

PC의 세로 봉합선은 휴대폰에서 섹션 경계마다 가로 봉합선으로 바꿔 차례로 꿰매지게 했습니다. 반창고 카드는 한 장씩 크게 세로로 쌓고, 회복 타임라인은 그림과 막대, 관리 체크리스트가 한 화면에 이어지도록 정리했습니다. 390px 폭에서 가로 밀림이 없는지도 따로 검수했습니다.

검색 세팅, 그리고 실제 외과에 적용한다면

상처 봉합은 "마포 상처 봉합", "야간 봉합 병원", "아이 이마 찢어짐 성형외과"처럼 급하게, 구체적으로 검색합니다. 그래서 페이지 제목은 "이음외과 | 상처·흉터 성형 봉합 — 꿰매는 순간부터 흉터를 생각합니다"로 정하고, 설명 문구에 성형 봉합, 평일 22시, 주말 진료, 마포를 담았습니다. 효과가 많아도 첫 화면 아래 이미지는 지연 로딩해 처음 열리는 속도를 지켰고, 가상 병원이라 검색 제외(noindex)를 걸어 두었습니다.

실제 제작에서는 진료시간과 야간·주말 진료 정보를 구조화 데이터로 넣어 지도와 검색 결과에 정확히 뜨게 하고, "얼굴 찢어짐 흉터", "실밥 언제 빼나요"처럼 다친 날 검색하는 질문으로 칼럼 6편을 함께 씁니다. 처치실과 봉합 도구, 원장님 손은 직접 촬영해 '정밀한 손'을 사진으로 증명합니다.

같은 외과라도 환자의 마음이 다르면 화면은 전혀 달라집니다. 검사 결과를 기다리는 불안을 다룬 온결외과 제작기, 말하기 어려운 증상의 망설임을 다룬 편안외과 제작기와 함께 보시면 강점 한 문장이 디자인을 어떻게 바꾸는지 비교하실 수 있습니다.

병원 홈페이지 제작 비용은 330만 원(부가세 포함)이며 직접 촬영, 페이지와 수정 횟수 제한 없음, 검색용 칼럼 6편, 오픈 후 3개월 유지보수가 포함됩니다. 이후 유지보수 정기권은 월 110만 원이며, 월 마케팅이나 개원 마케팅을 함께 하시면 무료입니다. 우리 병원 홈페이지에서 무엇부터 바꾸면 좋을지는 무료 사전 진단으로 먼저 확인해 보세요. 마케터가 직접 보고 성의 있게 답장드립니다.

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

자주 묻는 질문

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

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

'지금 진료 중' 표시는 실제 시간에 맞춰 바뀌나요?

네, 방문자의 현재 시각과 병원 진료시간을 비교해 진료 중, 마감 시간, 휴진을 자동으로 보여 주도록 만듭니다.

흉터 전후 사진 없이도 설득이 되나요?

회복 과정을 그림 타임라인으로 보여 주면 사진 없이도 시기별 변화와 관리법을 이해시킬 수 있습니다. 실제 사진은 동의를 받은 경우에만 함께 씁니다.

야간·주말 진료 시간이 자주 바뀌면 어떻게 하나요?

오픈 후 3개월은 무료로 수정해 드리고, 이후에는 유지보수 정기권으로 진료시간과 휴진 안내를 빠르게 반영해 드립니다.

휴대폰에서 효과 때문에 느려지지 않나요?

봉합선과 카드 효과는 가벼운 방식으로 만들고 첫 화면 아래 이미지는 지연 로딩해, 휴대폰에서 직접 검수한 뒤 오픈합니다.