교정 치과 홈페이지 제작기, 목동 바른이치과 '먼저 보여 주는 교정'

요약 교정 치과 홈페이지 제작에서 저희가 가장 먼저 정한 것은 "교정을 시작하기 전에 결과로 가는 과정을 먼저 보여 준다"는 한 문장입니다. 이 글은 블러썸팩토리가 서울 목동의 가상 교정 전문 치과 '바른이치과'를 정하고, 실제 의뢰처럼 원장님의 강점부터 세워 만든 포트폴리오 홈페이지의 제작기입니다. 치아가 제자리로 들어가는 인트로, 스크롤로 18개월이 지나가는 교정 시뮬레이션, 민트와 딥 틸의 도면 같은 디자인, 휴대폰 화면과 검색 세팅까지 디자이너가 어떤 판단으로 만들었는지 순서대로 설명합니다.

목동 교정 치과라고 가정하고, 강점 한 문장부터 정했습니다

바른이치과는 실제 고객이 아니라 저희가 포트폴리오용으로 만든 가상의 교정 전문 치과입니다. 그래도 진행 순서는 실제 의뢰와 똑같이 했습니다. 원장님 인터뷰를 한다고 가정하고, 교정을 고민하는 환자가 어떤 마음으로 홈페이지에 들어오는지부터 적었습니다.

교정은 짧아도 1년, 길면 2년이 넘습니다. 환자가 가장 불안한 것은 비용보다 "얼마나 걸리고, 중간에 내 치아가 어떻게 변하는지 모른 채 맡겨야 한다"는 점입니다. 학원과 학교 사이에 다녀야 하는 청소년의 부모님, 회의 때 장치가 보일까 걱정하는 직장인도 같은 질문을 합니다. 그래서 바른이치과의 강점은 "교정 전문의 한 명이 진단부터 마지막 유지장치까지 직접 보고, 3D 시뮬레이션으로 교정 과정을 먼저 보여 준다"로 정했습니다.

이 한 문장이 정해지자 홈페이지의 뼈대가 바로 나왔습니다. '먼저 보여 준다'는 시뮬레이션 섹션이, '한 명이 끝까지'는 원장 이동 트랙이 맡습니다. 강점을 먼저 세우는 이유는 병원 브랜딩, 원장님에서 시작해야 하는 이유에 자세히 적어 두었습니다.

첫 화면: 가지런해지는 장면을 3초 안에

사이트를 열면 삐뚤빼뚤한 앞니 여섯 개가 민트 점선 자리로 하나씩 '착착' 들어갑니다. 화면 위의 기울기 수치가 14.2°에서 0.0°로 줄어들고, 마지막에 철사 라인과 BARUN 로고가 완성됩니다. 교정이라는 진료를 설명 없이 3초 만에 보여 주는 장면이 필요했습니다.

인트로가 끝나면 "가지런해질 나를, 시작 전에 먼저 봅니다."라는 제목이 나옵니다. 오른쪽 인물 사진 위에는 동공선, 스마일 라인, 정중선 같은 측정선이 차례로 그려지고 각도가 숫자로 올라갑니다. 진단을 정밀하게 한다는 말을 문장보다 먼저 눈으로 보게 한 것입니다. 왼쪽 아래의 둥근 민트색 상담 예약 버튼은 커서를 가까이 가져가면 따라 끌려와, 누르고 싶게 만드는 작은 장치입니다.

제목 아래에는 교정 전문의 1인 진료, 3D 구강 스캔 진단, 0.1mm 단위 이동 설계, 유지장치까지 직접이라는 네 가지 약속을 한 줄로 놓았습니다. 첫 화면에 무엇이 보여야 하는지는 병원 홈페이지 제작, 첫 화면에 원장님이 보여야 하는 이유에서 따로 다뤘습니다.

치과 홈페이지 디자인: 따뜻한 가족 치과와 다른 언어로

같은 치과라도 교정 전문은 성격이 다릅니다. 저희가 먼저 만든 가족 치과 소담치과 제작기가 크림색과 둥근 모서리로 '무섭지 않음'을 말했다면, 바른이치과는 '정밀함'을 말해야 했습니다. 그래서 둥근 블롭 대신 직선과 직각, 격자로 화면을 짰습니다.

화면 곳곳에는 설계 도면처럼 좌표 라벨, 측정선, 모눈이 깔려 있고 작은 라벨은 모노스페이스 서체로 썼습니다. 색은 화이트와 아이스 그레이 바탕에 프레시 민트와 딥 틸 두 가지만 남겼습니다. 민트는 깨끗한 치아와 새 장치의 느낌, 딥 틸은 의료 기술의 무게를 맡습니다.

스크롤을 내리면 18개월이 먼저 지나갑니다

이 홈페이지에서 가장 공을 들인 곳은 3D 교정 시뮬레이션 섹션입니다. 화면이 멈춘 채 스크롤을 내리면 위아래 치열 28개 치아가 0개월에서 6개월, 12개월, 18개월로 조금씩 가지런해집니다. 큰 개월 수 숫자와 단계 설명이 함께 바뀌고, 아래의 평균 이탈(mm), 최대 회전(°), 아치 일치율(%)이 실시간으로 움직입니다.

환자에게 이 섹션은 상담의 예고편입니다. "첫 상담에서 이런 화면을 함께 본다"는 것을 미리 경험하면 상담 예약의 문턱이 낮아집니다. 다만 결과를 약속하는 것처럼 보이지 않도록 "예시 시뮬레이션 화면이며, 실제 이동 과정과 기간은 진단 후 사람마다 달라진다"는 안내를 바로 아래에 붙였습니다.

바로 앞 섹션에는 원장 사진이 진단, 3D 설계, 장치 시작, 정기 체크, 유지장치 다섯 단계를 스크롤에 맞춰 따라 이동하는 트랙을 두었습니다. "중간에 담당이 바뀌지 않는다"는 말을 문장으로 한 번, 움직임으로 한 번 더 보여 주는 셈입니다.

섹션마다 교정 환자의 망설임 하나씩

시뮬레이션 다음은 장치 고르기입니다. 투명교정, 세라믹, 설측 세 카드를 누르면 3D로 뒤집히며 장점과 고려할 점, 0~36개월 눈금 위의 예상 기간을 보여 줍니다. 장치를 나란히 비교하고 싶은 마음을 풀어 주되, "어떤 장치가 맞는지는 진단 후 함께 정한다"는 문장으로 결정을 상담으로 이어지게 했습니다.

원장 소개는 배경을 딥 틸로 바꿔 가장 조용한 장면으로 만들었습니다. 경력보다 "진단한 사람이 끝까지 보는 것. 그게 교정에서 가장 정직한 방법이라고 생각합니다."라는 원장님의 말을 먼저 크게 두고, 그 아래에 세 가지 약속을 카드로 정리했습니다.

장비 섹션의 제목은 "본뜨기 대신 스캔, 짐작 대신 화면."입니다. 끈적한 본뜨기 재료 없이 3분 스캔으로 시작한다는 점은 교정을 미뤄 온 분들에게 꽤 큰 이유가 됩니다.

휴대폰 화면: 시뮬레이션도 손가락으로

교정을 알아보는 분은 대부분 휴대폰으로 검색합니다. 그래서 휴대폰 화면을 따로 설계했습니다. 큰 제목은 세 줄로 나누어 첫 화면에서 다 읽히게 했고, 측정선 사진은 바로 아래에 이어 붙였습니다. 화면 아래에는 전화와 3D 상담 예약 버튼을 고정해 어느 위치에서든 한 번에 누를 수 있습니다.

교정 시뮬레이션은 휴대폰에서도 같은 방식으로 작동합니다. 치열 그림을 위에, 개월 수와 설명을 아래에 두어 손가락으로 쓸어내리는 동안 치아가 정렬되는 모습을 볼 수 있습니다. 390px 폭에서 가로로 화면이 밀리지 않는지도 따로 검수했습니다.

검색 세팅, 그리고 우리 치과에 적용한다면

바른이치과에는 "목동 교정 전문 바른이치과", "투명교정·청소년 교정·성인 교정"처럼 지역과 진료, 강점이 함께 담긴 페이지 제목과 설명을 넣었습니다. 다만 가상 병원이라 실제 검색에 잡히지 않도록 검색 제외(noindex)를 걸어 두었습니다. 화면 속 누적 상담 수 같은 숫자에도 "포트폴리오용 가상 수치"라고 표시했습니다.

실제 교정 치과 홈페이지를 만들 때는 병원 정보와 진료시간을 담은 구조화 데이터를 넣고, 네이버 서치어드바이저와 구글 서치 콘솔에 등록합니다. "투명교정 기간", "성인 교정 늦지 않을까"처럼 환자가 실제로 검색하는 질문으로 칼럼 6편을 함께 써서 검색 입구를 늘립니다. 시뮬레이션 화면도 원장님이 실제로 쓰시는 스캔 장비와 설계 화면에 맞춰 다시 그립니다.

진행은 원장님 인터뷰, 강점 한 문장, 섹션 구조, 촬영, 디자인과 효과, 검색 세팅, 오픈 후 숫자 확인 순서입니다. 강남 병원 안에서 약 10년 일한 실무 마케터 겸 디자이너가 처음부터 끝까지 직접 맡습니다. 홈페이지 제작 비용은 330만 원(부가세 포함)이며 직접 촬영, 페이지와 수정 횟수 제한 없음, 검색용 칼럼 6편, 오픈 후 3개월 유지보수가 포함됩니다. 다른 업종 사례는 홈페이지 포트폴리오에서, 지금 홈페이지에서 무엇부터 바꾸면 좋을지는 무료 사전 진단으로 먼저 확인해 보세요.

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

자주 묻는 질문

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

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

교정 시뮬레이션 같은 장치를 우리 치과에도 넣을 수 있나요?

네, 원장님이 실제 상담에서 보여 주시는 과정을 인터뷰로 듣고, 그 경험을 홈페이지에서 미리 해 볼 수 있는 장치로 새로 설계합니다.

효과가 많으면 홈페이지가 느려지지 않나요?

움직임은 위치와 투명도만 바꾸는 가벼운 방식으로 만들고, 첫 화면 아래 사진은 지연 로딩으로 처리해 처음 열리는 속도를 지킵니다.

교정 전문이 아닌 일반 치과도 이런 방식으로 만들 수 있나요?

네, 같은 틀을 복사하지 않고 원장님의 강점 한 문장에서 출발해 그 치과에 맞는 첫 화면과 장치를 새로 짭니다.

오픈 후 수정은 어떻게 하나요?

오픈 후 3개월은 수정 요청을 무료로 반영해 드리고, 이후에는 유지보수 정기권으로 이어 가거나 마케팅을 함께 하시면 무료로 관리해 드립니다.