치과 홈페이지 제작기, 먼저 보여 주는 동네 가족 치과

요약 치과 홈페이지 제작에서 저희가 가장 먼저 정한 것은 색이나 효과가 아니라 "치과가 무서운 이유"였습니다. 소담치과는 블러썸팩토리가 포트폴리오용으로 만든 가상의 가족 치과이며, 실제 의뢰처럼 원장님의 강점을 한 문장으로 정한 뒤 첫 화면부터 예약 버튼까지 그 문장 하나로 설계했습니다. 이 글은 그 과정을 만든 디자이너가 직접 정리한 제작기입니다.

이런 동네 치과라고 가정했습니다

소담치과는 실제 병원이 아닙니다. 저희가 포트폴리오를 만들 때는 가상의 병원을 하나 정하고, 진짜 의뢰를 받은 것처럼 원장님 인터뷰를 상상하며 강점부터 정합니다. 이번에는 서울의 한 주거지역에서 아이부터 부모님 세대까지 온 가족이 다니는 동네 치과로 설정했습니다.

동네 치과 홈페이지를 기획하면서 가장 오래 붙잡은 질문은 "사람들은 치과의 무엇이 무서울까"였습니다. 저희가 내린 답은 아픔 그 자체보다 '무엇을 할지 모르는 상태'였습니다. 의자에 누우면 입을 벌린 채 아무것도 볼 수 없고, 어떤 기구가 들어오는지 모릅니다. 아이 손을 잡고 오는 부모님도, 치료를 몇 년째 미뤄 온 부모님 세대도 같은 이유로 문 앞에서 망설입니다.

그래서 원장님의 강점을 이렇게 한 문장으로 정했습니다. "치료 전에 내 치아를 화면으로 먼저 보여드리고, 아프지 않게 천천히 진료하는 원장." 이후의 모든 결정은 이 문장을 더 믿게 만드는지, 아닌지로 골랐습니다.

첫 화면: "먼저 보여드리고, 천천히 시작할게요"

헤드라인은 강점 문장을 환자에게 건네는 말투로 바꾼 것입니다. "최신 장비" "꼼꼼한 진료" 같은 말은 어느 치과 홈페이지에나 있어서 비교의 근거가 되지 못합니다. 대신 이 병원에 오면 무엇이 먼저 일어나는지를 약속처럼 적었습니다. 사진 옆 작은 스티커도 "치료 전, 화면으로 먼저"로 맞춰서, 눈이 어디에 먼저 닿든 같은 메시지를 만나게 했습니다.

효과도 같은 기준으로 골랐습니다. 배경의 둥근 도형과 사진 테두리가 천천히 모양을 바꾸며 숨을 쉬듯 움직이고, 마우스 쪽으로 살짝 부풀어 오릅니다. 헤드라인 글자는 하나씩 통통 튀어 오르며 자리를 잡습니다. 치과 홈페이지 디자인에서 흔히 쓰는 차가운 파란색과 반듯한 직선을 일부러 피하고, 손으로 만지면 말랑할 것 같은 인상을 주려 했습니다. 버튼은 "진료 예약하기" 옆에 "처음 오시는 날 보기"를 나란히 두어, 아직 예약할 마음이 없는 분도 다음으로 누를 곳이 있게 했습니다.

첫 화면이 왜 이렇게까지 중요한지는 「병원 홈페이지 제작, 첫 화면에 원장님이 보여야 하는 이유」에서 더 자세히 다뤘습니다.

크림 바탕과 둥근 모서리, 디자인 언어를 고른 이유

가족 치과에서 가장 어려운 균형은 '따뜻하지만 유치하지 않게'입니다. 아이를 생각하면 밝은 원색을 쓰고 싶어지지만, 그러면 임플란트를 알아보는 부모님 세대가 "여기는 아이들 치과구나" 하고 나가 버립니다. 그래서 바탕은 크림색(#FBF6EE)으로 깔고, 코랄을 행동 버튼에만, 세이지와 버터, 피치는 구역을 나누는 데만 썼습니다. 글씨와 큰 면은 딥 그린(#1E4636)으로 잡아 전체가 가볍게 뜨지 않도록 무게를 더했습니다.

글꼴은 한글을 Pretendard 굵게, 영문을 끝이 둥근 Fraunces 이탤릭으로 짝지었습니다. "Shown first, treated gently." 같은 영문 한 줄이 들어가면 한글 제목의 단단함이 조금 풀어집니다. 모서리는 버튼부터 카드, 사진까지 모두 둥글게 했습니다. 각진 곳이 하나도 없다는 것이 화면 전체에서 은근히 '아프지 않게'를 말해 준다고 판단했습니다.

섹션마다 망설임을 하나씩 풀어 갑니다

첫 화면 다음부터는 환자가 머릿속에 품고 있는 질문 순서대로 섹션을 놓았습니다. 맨 먼저 나오는 '원장의 진료 방식'에는 엑스레이가 큰 모니터에 떠 있는 상담실 사진을 두고 "기구보다 먼저, 화면을 켭니다"라고 적었습니다. 헤드라인이 약속한 것을 사진 한 장으로 바로 증명하는 자리입니다.

그다음은 "그래도 아프지 않을까"라는 질문에 답하는 차례입니다. 마취 통증을 줄이는 과정을 표면 마취, 체온에 맞춘 마취액, 아주 천천히 주입, 중간중간 확인의 네 단계로 나눠 카드로 보여 줍니다. 막연히 "안 아프게 해 드립니다"라고 쓰는 것보다, 구체적으로 무엇을 하는지 보여 주는 편이 훨씬 설득력 있다고 봤습니다.

진료 과목은 소아, 예방과 스케일링, 충치와 신경 치료, 교정과 심미, 임플란트 다섯 가지입니다. 스크롤하면 파스텔 카드가 한 장씩 위로 포개지며 차례로 나타나는데, 아이 첫 검진부터 부모님 임플란트까지 한 병원에서 이어진다는 흐름을 손끝으로 느끼게 하려는 장치입니다. 소아치과 홈페이지처럼 아이만 내세우지 않고, 가족 모두가 자기 자리를 찾도록 카드마다 색을 다르게 줬습니다.

'처음 오시는 날'은 이 홈페이지에서 제가 가장 아끼는 섹션입니다. 도착과 문진표, 원장이 직접 이야기 듣기, 사진과 엑스레이, 화면으로 함께 보기, 결정은 천천히, 이렇게 다섯 단계를 점선이 스크롤에 맞춰 이어 그리며 보여 줍니다. 진료실에서 원장님이 하는 방식, 즉 무엇을 할지 미리 보여 주는 방식을 홈페이지에서 똑같이 해 본 것입니다. 마지막 예약 영역에는 "오늘은 상담만, 그것도 충분한 시작입니다"라고 써서 문턱을 한 번 더 낮췄습니다.

휴대폰 화면은 따로 설계했습니다

동네 치과를 찾는 분들은 대부분 휴대폰으로, 그것도 아이를 안은 채 한 손으로 봅니다. 그래서 화면 맨 아래에 '전화'와 '진료 예약' 버튼을 고정해, 어느 섹션을 읽고 있든 엄지 한 번이면 연락할 수 있게 했습니다. 처음 오시는 날의 점선 경로는 휴대폰에서 세로로 길게 이어지도록 다시 배치했습니다.

마우스가 없는 휴대폰에서는 효과도 바꿨습니다. PC에서 마우스를 따라 기울던 사진 카드는 터치 화면에서 스크롤에 맞춰 살짝 흔들리는 움직임으로 대신하고, 마우스 쪽으로 부풀던 배경 도형은 스스로 천천히 움직이게 했습니다. 움직임을 줄이도록 설정한 기기에서는 효과를 모두 끄고 내용만 깔끔하게 보이도록 처리했습니다.

검색에 잡히게 한 장치와 실제 제작 과정

홈페이지는 예뻐도 검색에서 보이지 않으면 소용이 없습니다. 소담치과는 페이지 제목에 병원 이름과 "먼저 보여드리고, 천천히 시작하는 가족 치과"를, 검색 설명에 "아이부터 부모님까지 온 가족이 다니는 동네 치과"를 넣었습니다. 사진은 화면에 가까워질 때 불러오도록 지연 로딩을 걸어, 효과가 많아도 첫 화면이 빨리 뜨게 했습니다. 다만 이 사이트는 가상 병원이라 검색에 노출되지 않도록 noindex로 막아 두었습니다.

실제 치과 홈페이지 제작에서는 여기에 지역 이름과 진료 과목을 엮은 검색어, 병원 정보를 검색엔진에 알려 주는 구조화 데이터, 네이버 서치어드바이저와 구글 서치 콘솔 등록까지 함께 세팅합니다. 포트폴리오에 쓴 사진은 연출 사진이지만, 실제 작업에서는 원장님과 진료실을 직접 촬영합니다. AI 검색에 병원이 언급되게 하는 방법은 「병원 AI 검색, 챗GPT와 네이버 AI 브리핑에 우리 병원이 나오려면」에 정리해 두었습니다.

우리 치과에 적용한다면 순서는 같습니다. 원장님 인터뷰로 강점 한 문장을 찾고, 섹션과 진료 페이지 구조를 짠 다음, 촬영과 디자인, 검색 세팅을 거쳐 오픈 후 숫자를 함께 확인합니다. 제작비는 330만 원(부가세 포함)이며 직접 촬영, 페이지와 수정 횟수 제한 없음, 검색 노출용 칼럼 6편, 오픈 후 3개월 유지보수가 포함됩니다. 지금 홈페이지를 바꿀 때가 됐는지 궁금하시면 무료 사전 진단을 신청해 주세요. 다른 업종 작업은 홈페이지 포트폴리오에서 보실 수 있습니다.

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

자주 묻는 질문

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

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

이렇게 움직이는 효과가 많으면 홈페이지가 느려지지 않나요?

사진은 화면에 가까워질 때 불러오고 효과는 가벼운 방식으로 만들어 첫 화면이 먼저 뜨게 하며, 움직임을 줄이도록 설정한 기기에서는 효과를 끄고 내용만 보여 줍니다.

소아 진료와 성인 진료를 한 홈페이지에 함께 담아도 괜찮을까요?

괜찮습니다. 색과 말투를 아이 쪽으로 치우치지 않게 잡고 진료 과목을 카드로 나누면, 아이를 둔 부모님과 임플란트를 알아보는 분 모두 자기 자리를 찾을 수 있습니다.

오래된 홈페이지라면 치과 홈페이지 리뉴얼도 가능한가요?

가능합니다. 기존 도메인과 검색 기록은 그대로 살리면서 강점 문장부터 다시 정하고, 구조와 디자인, 검색 세팅을 새로 잡아 드립니다.

오픈한 뒤에 병원에서 직접 내용을 바꿀 수 있나요?

오픈 후 3개월 동안은 진료시간이나 공지 같은 수정을 요청만 주시면 무료로 반영해 드리고, 이후에는 월 정기 유지보수로 이어서 관리해 드립니다.