홈페이지 제작은 건축 과정과 같습니다.
업종을 가리지 않습니다. 템플릿 없이 백지에서 코딩합니다.
01설계현황 확인 · 기획
홈페이지마다 도면을 새로 그립니다.
먼저 충분히 이야기를 나눈 다음 화면을 그립니다.
대지 조건
서울아산OK치과seoulasanok.com
- 진료 구성
- 임플란트 · 라미네이트 · 일반진료(턱관절 · 오버레이 · 미백)
- 보는 사람
- 임플란트는 50~60대 이상, 라미네이트는 20~30대
- 상담 흐름
- 네이버 예약 · 카카오톡 · 전화 → 내원 상담
- 설계
- 진료마다 페이지를 따로 두고, 진료시간과 오시는 길을 예약 바로 앞에 놓았습니다.
대지 조건
더아르스냅thearsnap.com
- 상품 구성
- 본식 스냅 — 메인 스냅 · 서브 스냅 · 옵션
- 보는 사람
- 사진을 보고 결정하는 예비부부
- 상담 흐름
- 포트폴리오 → 촬영 안내 → 예약 문의
- 설계
- 포트폴리오를 가장 큰 자리에 두고, 촬영 당일의 순서를 복도처럼 이었습니다.
다른 홈페이지를 따라 만들지 않습니다
먼저 어떤 일을 하시는지, 고객이 어떤 순서로 찾아오시는지 듣습니다. 그 다음 필요한 페이지와 순서를 정합니다.
필요한 기능을 미리 정해 오실 필요는 없습니다.
지금 하시는 일을 듣고 필요한 화면과 기능을 정리해 보여드립니다.
업무 확인
화면 구성
시안 제안
02기초 공사SEO·GEO·AEO 설계
SEO·GEO·AEO를 위해
기초부터 설계합니다.
검색엔진과 AI가 읽는 제목과 설명, 구조화 데이터까지 함께 작성합니다.
01 / 공터아직 정보가 없는 상태
주소만 있는 상태입니다.
검색엔진과 AI가 읽을 정보가 아직 없습니다.
02 / 기초SEO먼저 입력하는 기본 정보
제목과 기본 정보를 먼저 넣습니다.
메뉴와 진료시간, 위치를 검색엔진이 구분해 읽을 수 있게 작성합니다.
03 / 뼈대AEO질문별로 나눈 내용
환자의 질문에 맞춰 내용을 나눕니다.
진료 주제마다 제목과 사진 설명을 붙여 검색과 AI가 내용을 찾기 쉽게 만듭니다.
04 / 완성환자에게 보이는 화면
그 위에 실제 화면을 만듭니다.
환자는 완성된 화면을 보지만, 검색엔진은 그 아래에 적힌 정보까지 함께 읽습니다.
05 / 연결GEOAI가 참고하는 정보
AI가 참고할 출처를 연결합니다.
진료시간과 위치 같은 정보를 분명하게 적어 AI가 답할 때 참고할 수 있게 합니다.
- SEO검색 결과에 보여줄 정보네이버·구글
- GEOAI 답변의 출처가 될 정보ChatGPT
- AEO질문에 답할 수 있는 정보검색의 답변 상자
미사역 근처에 임플란트 상담 받을 수 있는 치과 있어? 퇴근하고 갈 수 있게 저녁에 하는 곳으로.
미사역 근처에서 저녁 시간에 임플란트 상담이 가능한 곳으로 서울아산OK치과가 있습니다.
- 위치 미사역 8번 출구 앞 · 일옹미사타워 3층
- 야간 진료 화·목 20:30까지
공사 현장은 AI 생성 이미지·영상입니다. 홈페이지 화면은 하마기획이 제작한 서울아산OK치과 첫 화면이며, 구조 표시와 AI 답변은 이해를 돕기 위한 재구성 예시입니다.
03설비기능 · 업무 자동화
홈페이지 하나에 예약, 알림, 관리가 붙습니다.
문의가 들어오면 알림을 보내고, 내용은 관리자 화면에 자동으로 남깁니다.
예약 · 상담 접수
환자가 문의를 보냅니다.
홈페이지
문의와 기록을 연결
알림톡 · 문자
접수자에게 알림톡, 원장님께 문자
관리자 페이지
문의 내역과 검색 설정을 한 화면에서
반복 업무 자동화
접수 정리와 기록을 자동으로
검색 콘솔 연동
검색 노출과 클릭 확인
04자재촬영 · 자료 조사
사진과 문안도 저희가 준비합니다.
사진작가가 병원에 찾아가 원장님과 직원분들의 프로필, 병원 시설을 직접 촬영합니다.
자재 명세서
홈페이지 제작
프로필 사진
원장님과 직원분들 · 병원에서 촬영
시설 사진
대기실 · 진료실 · 장비 · 병원에서 촬영
진료 내용 · 병원 정보
상담과 자료로 조사
문안
조사한 내용으로 작성
준비 하마기획
촬영 · 조사 · 작성
같은 홈페이지 안에서도 보는 사람에 따라 기획과 디자인을 달리합니다.
05마감디자인
보는 사람이 다르면, 구성도 달라집니다.
같은 병원 안에서도 진료마다 궁금해하는 내용이 다릅니다.
실제 제작 · 운영 중인 홈페이지
보는 사람20~30대 · 심미 치료를 알아보는 분
사진을 크게 보여주고 설명은 짧게
- 사진이 화면을 넓게 채우도록
- 한 화면에 한 장면씩 보이도록
보는 사람50~60대 이상 · 오래 미룬 치료를 알아보는 분
치료 경험과 사용하는 임플란트를 먼저
- 어려운 치료 경험을 먼저 확인할 수 있도록
- 사용하는 임플란트 이름을 바로 볼 수 있도록
다른 홈페이지도 보는 사람에 맞게 만들었습니다.
더아르스냅 · 브랜드 소개
웨딩 스냅
더아르스냅
웨딩 스냅
픽셀랩성형외과 · 메타셀
성형외과
픽셀랩성형외과 · 여드름흉터
성형외과
가람 샤오홍슈 마케팅
마케팅 대행
서울아산OK치과 · 턱관절
치과
06준공 검사성능 · 검색 구조 검증
공개하기 전에 한 번 더 확인합니다.
넘겨드리기 전에 환자가 보는 방식 그대로 열어 봅니다.
준공 검사표
검사 대상 · 지금 보고 계신 이 홈페이지
휴대폰 화면
글자 크기와 버튼 간격, 사진이 잘리지 않는지 실제 휴대폰으로 열어 봅니다.
확인
여는 속도
첫 화면이 뜨기까지 걸리는 시간을 잽니다.
확인
검색엔진이 읽는 정보
화면 꾸밈을 모두 걷어내도 병원 이름과 진료 내용, 진료시간, 위치가 글로 남아 있는지 확인합니다.
- 서버 렌더링
- 구조화 데이터
- 스크립트 없이도 읽힘
확인
누구나 읽을 수 있는지
글자와 배경의 대비, 화면을 소리로 읽어 주는 기능까지 확인합니다.
확인
검사 하마기획
기획 박가연 대표 · 디자인·개발 하마기획
홈페이지는 이 순서로 만듭니다.
작업 기간은 필요한 페이지와 기능을 확인한 뒤 안내드립니다.
현황 확인
받으시는 것현황 리포트
기획
받으시는 것페이지 구성안
화면 설계
받으시는 것화면 시안
개발
받으시는 것관리자 화면 계정
최종 확인
받으시는 것준공 검사표
07입주 후직접 수정 · 운영
간단한 수정은 병원에서 바로 할 수 있습니다.
문구와 이미지, 검색 키워드를 관리자에서 직접 바꿀 수 있습니다.
대표 문구 (첫 화면)
진료 철학이 첫 문장에서 드러나도록
저장저장됨 · 홈페이지에 반영되었습니다
이 페이지의 검색 키워드
- 임플란트
- 라미네이트
- 교정
실시간 미리보기
치아를 오래 쓰는 치료를 먼저 계획합니다
진단 결과와 치료 계획을 먼저 보여드립니다.
만든 뒤에도 함께 봅니다.
방문자가 어떤 페이지를 보고 어떤 버튼을 눌렀는지 기록합니다.
