홈 · 칼럼 · 홈페이지 제작 · 한의원

한의원 홈페이지 제작, 담연한의원 '40분 진료'를 수묵화로 담다

이준걸 팀장 · 블러썸팩토리 실무 마케터6분 읽기

한의원 홈페이지 제작, 담연한의원 '40분 진료'를 수묵화로 담다

요약 한의원 홈페이지 제작에서 가장 중요한 것은 "여기도 금방 끝나는 진료 아닐까" 하는 의심을 첫 화면에서 풀어 주는 일입니다. 담연한의원은 블러썸팩토리가 가상의 한의원을 정하고, 실제 의뢰처럼 원장님의 강점부터 정해 만든 포트폴리오 홈페이지입니다. 먹이 번지는 인트로, 40분 진료, 원내 탕전까지 어떤 판단으로 화면을 짰는지 디자이너가 직접 정리했습니다.

먹이 번지는 인트로부터 산 능선 패럴랙스와 진료 과목 카드까지, 담연한의원 홈페이지를 처음부터 끝까지 스크롤한 화면

이런 한의원이라고 가정했습니다

담연한의원은 실제 한의원이 아니라 저희가 포트폴리오용으로 만든 가상의 한의원입니다. 서울의 한 동네에 있는 한의원으로 정하고, 실제 의뢰를 받았을 때처럼 "이 원장님은 무엇이 다른가"부터 적었습니다.

한의원을 찾는 분들은 대개 오래된 피로나 통증, 소화 문제로 이미 지쳐 있습니다. 여러 곳을 다녀 봤기 때문에 "몇 마디 묻고 침 맞고 끝나는 진료"를 경험했을 가능성이 높습니다. 그래서 강점 한 문장을 이렇게 정했습니다. 첫 진료에 40분 이상 맥진과 문진으로 체질과 생활을 먼저 듣고, 탕약은 원내에서 직접 달이는 대표원장입니다.

이 한 문장이 정해지면 홈페이지의 모든 섹션은 그 약속을 증명하는 장치가 됩니다. 이 방식은 병원 브랜딩, 원장님에서 시작해야 하는 이유에서 자세히 설명드렸습니다.

첫 화면: 먹 한 방울로 이름을 체험하게

'담연(淡然)'은 담백하고 고요하다는 뜻입니다. 이름의 뜻을 글로 설명하기보다 첫 3초에 느끼게 하고 싶었습니다. 그래서 한지 위에 먹물 한 방울이 떨어져 번지고, 그 번짐 안에서 히어로 사진이 피어나게 했습니다. 이어서 세로쓰기 '淡然'과 첫 문장이 붓이 지나가듯 써지고, 마지막에 붉은 낙관이 찍힙니다.

한지 위 먹 한 방울, 번진 먹 속에서 피어나는 사진, 세로쓰기 淡然과 첫 문장이 완성된 휴대폰 첫 화면 1
한지 위 먹 한 방울, 번진 먹 속에서 피어나는 사진, 세로쓰기 淡然과 첫 문장이 완성된 휴대폰 첫 화면 2
한지 위 먹 한 방울, 번진 먹 속에서 피어나는 사진, 세로쓰기 淡然과 첫 문장이 완성된 휴대폰 첫 화면 3
인트로는 약 3초 안에 끝나며, 한의원 이름의 뜻을 설명 없이 체험하게 합니다.

첫 문장은 "몸의 균형을 천천히 되찾는 시간"입니다. 처음엔 증상 이름을 앞세운 문장도 생각했지만, 그러면 다른 한의원 홈페이지와 구별되지 않았습니다. 이 한의원의 차이는 서두르지 않는 진료이므로, 첫 문장도 속도에 대한 약속으로 만들었습니다. 바로 아래에는 '40분 첫 진료', '院內 원내 탕전', '1:1 대표원장 직접 진료' 세 숫자를 작게 두어 약속의 근거를 먼저 보여 줍니다.

히어로 바로 다음 섹션은 '40분'이라는 숫자를 크게 보여 줍니다. 그 옆에는 맥을 짚는 사진을 두고, 이어서 望·聞·問·切 네 글자로 원장님이 무엇을 보고, 듣고, 묻고, 짚는지 하나씩 풀었습니다.

"첫 진료는 40분, 듣는 것부터 시작합니다" 문장과 큰 숫자 40, 맥을 짚는 손 사진이 놓인 화면
강점을 형용사가 아닌 숫자로 보여 주면, 의심을 가진 방문자도 한 번에 납득합니다.

한의원 홈페이지 디자인: 여백이 주인공인 수묵화

한의원 홈페이지 디자인은 자칫하면 전통 문양과 갈색으로 무거워지기 쉽습니다. 저희는 현대적인 한옥과 수묵화의 고요함을 기준으로 삼아 색을 다섯 개로 제한했습니다. 한지 아이보리(#F4EFE6) 바탕에 먹색(#1E1C1A) 글자, 월넛과 청자색을 조금 곁들이고, 낙관 주색(#9E3D2A)은 세로쓰기 '淡然'의 낙관 한 곳에만 썼습니다.

요소고른 것이유
바탕한지 아이보리와 은은한 종이 질감화면이 아니라 종이를 넘기는 듯한 차분함
제목 서체고운바탕붓글씨의 느낌을 절제해 품위를 지킴
한자·숫자Noto Serif KR氣·痛 같은 큰 한자와 40 같은 숫자가 단정하게 섬
본문Pretendard긴 설명도 휴대폰에서 편하게 읽힘
포인트세로쓰기 淡然과 붉은 낙관 하나장식을 줄여 여백이 주인공이 되게 함

철학 섹션은 안개 낀 산 사진을 먼 산, 중간 능선, 앞 소나무 세 겹으로 나눠 서로 다른 속도로 움직이게 했습니다. 그 위로 "서두르지 않으면, 몸은 제 균형을 기억해 냅니다"라는 문장이 차례로 떠오릅니다. 진료 철학을 설명하는 대신 풍경으로 보여 주는 장면입니다.

안개 낀 산 능선 위로 "서두르지 않으면, 몸은 제 균형을 기억해 냅니다" 문장이 떠오른 철학 섹션
세 겹의 산이 다른 속도로 움직여, 천천히 균형을 찾는다는 진료 철학을 스크롤로 느끼게 했습니다.

섹션마다 하나의 의심을 풀었습니다

진료 과목은 한자 한 글자로 압축했습니다. 氣(만성 피로·소화), 痛(통증), 女(여성 질환), 體(다이어트·체질 관리), 補(수험생·직장인 보약) 다섯 장의 카드에 마우스를 올리면 아래에서 먹이 차오르듯 설명으로 바뀝니다. 긴 목록을 읽지 않아도 내 증상이 어디에 속하는지 바로 찾을 수 있습니다.

氣·痛·女·體·補 다섯 장의 한자 카드 중 女 카드가 먹색으로 차올라 여성 질환 설명이 보이는 화면
한자 한 글자는 눈에 빨리 들어오고, 먹이 차오르는 움직임은 담연이라는 이름과 같은 언어로 이어집니다.

다음은 원내 탕전입니다. 배경을 먹색으로 바꾸고, 탕약을 따르는 사진과 약재 사진 아래에 체질 처방, 약재 선별, 원내 탕전, 복용 안내 네 단계를 두었습니다. 한약을 처음 먹는 분이 가장 궁금해하는 "어디서, 어떻게 달이나"를 화면 하나로 답합니다.

먹색 배경 위에 "약은 원내에서, 직접 달입니다" 제목과 탕약을 따르는 사진, 약재 사진이 놓인 원내 탕전 섹션
이 섹션만 배경을 어둡게 바꿔, 탕약이 끓는 공간에 들어선 듯한 분위기를 만들었습니다.
섹션담은 것풀어 주는 의심
대표원장 진료 방식40분, 望·聞·問·切여기도 금방 끝나는 진료 아닐까
진료 과목 5한자 카드와 대표 증상내 증상도 보는 곳일까
원내 탕전처방부터 복용 안내까지 4단계약은 어디서 어떻게 만드나
의료진·공간대표원장 소개, 1인 치료실누가, 어떤 곳에서 치료하나
첫 진료 안내·FAQ방문 순서, 비용, 보험처음 가면 무엇을 하나

모든 섹션 사이에는 굵기가 변하는 먹선 하나가 스크롤을 따라 그려집니다. 진료가 끊기지 않고 한 획으로 이어진다는 인상을 주기 위해서입니다. 마지막 예약 영역에서는 그 선이 원(엔소)으로 닫힙니다. 포트폴리오에는 연출 사진을 썼지만, 실제 제작에서는 원장님과 치료실, 탕전실을 저희가 직접 촬영합니다.

휴대폰 화면: 터치에서는 카드가 스스로 차오르게

휴대폰에는 마우스가 없으니 진료 과목 카드를 그대로 두면 설명을 볼 수 없습니다. 그래서 휴대폰에서는 화면 가운데로 온 카드에 먹이 자동으로 차오르게 바꿨습니다. 스크롤만 해도 다섯 과목의 설명을 차례로 읽게 됩니다.

휴대폰에서 먹이 차오른 진료 과목 카드, 대표원장 소개, 자주 묻는 질문 화면과 하단 고정 예약 바 1
휴대폰에서 먹이 차오른 진료 과목 카드, 대표원장 소개, 자주 묻는 질문 화면과 하단 고정 예약 바 2
휴대폰에서 먹이 차오른 진료 과목 카드, 대표원장 소개, 자주 묻는 질문 화면과 하단 고정 예약 바 3
하단의 '전화'와 '첫 진료 예약' 바는 어느 화면에서나 같은 자리에 있습니다.

화면 아래에는 '전화'와 '첫 진료 예약' 바를 고정했습니다. 사진이 먹 번짐으로 드러나는 효과는 다 드러난 뒤 일반 이미지로 바꿔 휴대폰이 무거워지지 않게 했고, 움직임을 줄이도록 설정한 기기에서는 효과를 최소화합니다.

검색에 잡히게 한 장치

페이지 제목에는 한의원 이름과 "몸의 균형을 천천히 되찾는 한의원"을, 검색 설명에는 40분 진료, 원내 탕전, 다섯 진료 과목을 함께 넣었습니다. 첫 화면을 뺀 사진은 지연 로딩으로 불러와 효과가 많아도 첫 화면이 빨리 뜹니다.

담연한의원은 가상이라 검색에 잡히지 않도록 noindex를 걸었습니다. 실제 한의원 홈페이지 리뉴얼이나 신규 제작에서는 '지역 + 한의원', '지역 + 증상' 검색어로 과목별 페이지를 나누고, 병원 정보를 구조화 데이터로 넣고, 네이버 서치어드바이저와 구글 서치 콘솔에 등록합니다. 검색용 칼럼 6편도 함께 써 드립니다. 리뉴얼 시점이 궁금하시면 병원 홈페이지 리뉴얼, 지금 해야 한다는 신호 7가지를 참고해 주세요.

우리 한의원에 적용한다면

한방병원 홈페이지든 동네 한의원이든 순서는 같습니다. 원장님 인터뷰로 강점 한 문장을 찾고, 그 문장을 증명할 섹션과 과목 페이지를 짠 뒤, 직접 촬영하고 디자인과 효과를 입힙니다. 오픈 후에는 검색 세팅을 마치고 실제 숫자를 함께 확인합니다. 강남 병원 안에서 약 10년 일한 실무 마케터 겸 디자이너가 기획부터 제작까지 직접 맡습니다.

비용은 330만 원(부가세 포함)이며 직접 촬영, 페이지 수와 수정 횟수 제한 없음, 칼럼 6편, 오픈 후 3개월 유지보수가 포함됩니다. 다른 업종의 화면은 홈페이지 포트폴리오에서 보실 수 있고, 지금 홈페이지에서 무엇부터 바꿀지 궁금하시면 무료 사전 진단을 신청해 주세요. 마케터가 직접 살펴보고 답장드립니다.

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

자주 묻는 질문

한의원 홈페이지 제작 비용은 얼마인가요?

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

한의원 홈페이지에 진료 과목이 많은데 다 보여 줘야 하나요?

메인에서는 대표 과목 몇 개로 압축해 찾기 쉽게 하고, 세부 증상은 과목별 페이지와 칼럼으로 나눠 검색에 잡히게 하는 것을 권합니다.

먹 번짐 같은 효과가 있으면 느리지 않나요?

효과가 끝나면 일반 이미지로 바꾸고 첫 화면 외 사진은 지연 로딩으로 불러와, 휴대폰에서도 빠르게 뜨는지 확인한 뒤 오픈합니다.

한의원 홈페이지 리뉴얼을 하면 기존 검색 노출이 사라지지 않나요?

기존 주소와 검색 유입을 먼저 확인하고 주소 연결을 정리한 뒤 바꾸기 때문에, 쌓아 둔 노출을 최대한 지키면서 리뉴얼합니다.

진료 시간이나 비급여 안내는 직접 수정할 수 있나요?

오픈 후 3개월은 무료로 수정해 드리고, 이후에는 유지보수 정기권이나 간단한 수정 방법 안내 중에서 고르실 수 있습니다.