8. 홈페이지 빌더

대상: 병원장, 병원 관리자 (Owner / Admin)

목적

병원 소개, 의료진, 진료과목, 오시는 길, 예약 신청 등 환자가 보는 공개 랜딩페이지 를 AI 기반으로 자동 생성하고 사이드바에서 직접 편집·공개합니다.

별도 디자인/개발 없이 템플릿 → 색상 → 강점 3가지만 선택 하면 병원 홈페이지 한 장이 만들어지고, 좌측 사이드바의 드래그앤드롭 으로 의료진/진료과목/특징/FAQ 순서를 바꿀 수 있습니다.

홈 한 장으로 끝내도 되고, 진료과목·의료진·오시는 길처럼 내용이 많은 항목은 페이지를 여러 장으로 나눠 헤더 메뉴(2단계 드롭다운)로 연결할 수 있습니다(8.4). 한국어로 만든 내용을 그대로 두고 영어·일본어·중국어를 켜서 함께 공개할 수도 있습니다(8.6).

8.1 홈페이지 빌더 들어가기

병원 페이지 좌측 사이드바 부가 기능 → 홈페이지 메뉴를 클릭합니다.

상단에는 홈페이지 공통 설정 이 있습니다. 이 조직의 모든 홈페이지에 동일하게 적용되는 항목입니다.

항목	설명
홈페이지 주소	공개 사이트가 사용할 서브도메인 (예: `www6.your-domain`) — 한 번 정해두면 모든 페이지가 공유
홈페이지 표시용 전화번호	비워두면 병원정보의 대표 전화번호가 그대로 사용됩니다
홈페이지 표시용 주소	비워두면 병원정보의 주소가 그대로 사용됩니다
로고 / 파비콘	헤더 로고와 브라우저 탭 아이콘. 기존에 운영 중인 사이트 URL을 입력하면 후보를 자동으로 가져옵니다 (베타)

💡 공통 설정이 먼저입니다. 페이지를 여러 개 만들 수 있지만 주소·전화·로고는 조직 전체에서 한 벌만 유지됩니다.

8.2 새 홈페이지 만들기 — 3 가지만 고르면 끝

"새 홈페이지" 버튼을 누르면 위저드가 열립니다.

1. 템플릿 고르기

새 홈페이지를 만들 때는 먼저 템플릿을 고릅니다. 각 카드는 실제 렌더 화면을 축소한 미리보기라 완성 모습을 미리 볼 수 있습니다.

탭	템플릿	이런 병원에
홈 한 장	스탠다드	대부분의 병원 — 정돈된 기본형
홈 한 장	에디토리얼	소개·의료진을 앞세운 프리미엄 톤
홈 한 장	쇼케이스	시설·장비 사진이 많은 병원
홈 한 장	컴팩트	진료 항목이 많아 한 페이지에 다 담을 때
여러 페이지	스탠다드 멀티 / 에디토리얼 멀티 / 쇼케이스 멀티	홈 + 진료과목·의료진·오시는 길(에디토리얼은 비용 안내까지) 페이지가 함께 만들어집니다

여러 페이지 템플릿은 다중 페이지 유료 기능이 켜진 조직에서만 고를 수 있습니다. 잠긴 카드를 누르면 문의 안내가 뜹니다.
템플릿은 섹션 배치와 글꼴을 정합니다. 색은 아래에서 따로 고릅니다.
여러 페이지 템플릿은 홈이 먼저 만들어지고, 진료과목·의료진·오시는 길 페이지의 문구는 AI가 한 장씩 순서대로 채웁니다(개인정보처리방침·이용약관·비용 안내는 기본 문구로 만들어집니다). 페이지 목록에서 "AI 작성 중" 배지를 볼 수 있고, 실패한 페이지는 "다시 시도"로 다시 요청할 수 있습니다. 화면을 닫았다가 돌아오면 "이어서 작성"으로 계속됩니다.

2. 색상 (Primary Color)

버튼·강조 컬러로 사용됩니다. 사전 정의된 8가지(하늘/청록/초록/네이비/보라/금색/회색/진회색) 외에 직접 을 선택해 헥스 코드를 입력할 수도 있습니다.

3. 강점 (Strengths) — 최대 6개

진료/서비스의 특징을 6개 한도로 고릅니다.

최신 장비 · 비급여 명료화 · 전문 의료진 · 친절한 상담 · 접근성 좋음 · 합리적 비용
빠른 예약 · 야간 진료 · 주차 가능 · 비대면 상담 · 다국어 진료 · 정기 건강검진
+ 직접 입력 — 위 목록에 없는 강점을 직접 추가 (1개당 한 줄)

세 가지를 모두 채우면 우측 하단 "홈페이지 생성" 버튼이 활성화됩니다.

💡 카테고리 자동 반영: 병원정보의 카테고리(치과·한의원·산부인과·피부과·안과·정형외과·내과·소아과·이비인후과·비뇨기과·정신건강의학과·성형외과·가정의학과 등 13종)에 맞춰 LLM 프롬프트가 자동으로 조정됩니다. 같은 강점이라도 카테고리에 맞는 진료 항목·이미지 키워드·표현 톤이 생성되며, 의료광고법상 주의어도 카테고리별로 필터링됩니다.

생성에는 약 20–40초가 걸립니다. 끝나면 자동으로 CMS 편집 화면 으로 전환됩니다.

8.3 CMS 편집 화면 — 좌 사이드바 + 우 실시간 미리보기

화면 구성은 단순합니다.

영역	역할
상단	← 나가기 · 변경 표시(`변경없음`/`변경있음`) · `처음으로 되돌리기` · `저장` · `공개하기`
좌측 패널	위에서부터 페이지 목록(8.4) → 섹션별 편집 항목 — 아코디언
공통 설정	미리보기 위쪽 아코디언 — 스타일 설정 · 챗봇 · SEO · 언어(8.6). 사이트 전체에 적용됩니다
중앙 패널	실시간 미리보기 — 섹션마다 끄기/켜기 토글, 텍스트는 더블클릭으로 직접 편집
우측 가이드	미리보기 섹션과 위치가 동기화되는 페이지 구조 안내 (히어로 → 소개 → 의료진 → …)

자주 쓰는 동작

저장: 명시적으로 저장 버튼을 눌러야 반영됩니다 (자동 저장 없음). 변경이 있으면 상단에 변경있음 배지가 표시됩니다.
공개하기: 슬러그가 정해진 상태에서 누르면 짧은 확인 다이얼로그(공개하시겠습니까?)가 뜨고 공개 를 누르면 즉시 반영됩니다. 이미 공개된 페이지에서 다시 누르면 비공개로 돌립니다.
처음으로 되돌리기: 마지막 저장 시점이 아닌 생성 직후 상태로 되돌립니다.
AI 배지: 텍스트 옆에 노란 AI 배지가 표시된 항목은 LLM이 자동 생성한 문구입니다. 직접 수정하면 배지가 사라집니다.

템플릿 바꾸기 (스타일 설정)

CMS 왼쪽 스타일 설정에서 같은 종류(홈 한 장끼리 / 여러 페이지끼리)의 다른 템플릿으로 바꿀 수 있습니다. 바꾸면 직접 조정한 섹션 순서와 레이아웃은 템플릿 기본값으로 돌아가지만, 문구·이미지·번역은 그대로 남습니다. 이전에 "분위기"로 만든 홈페이지는 그대로 분위기 선택이 보이며 달라지지 않습니다.

8.4 페이지 여러 장 만들기 (다중 페이지)

홈 한 장으로 시작하지만, 진료과목·의료진·오시는 길처럼 내용이 많은 항목은 별도 페이지로 나눌 수 있습니다. 좌측 사이드바 맨 위 페이지 그룹에서 관리합니다.

⚠️ 다중 페이지는 신청이 필요한 기능입니다. 꺼져 있으면 버튼이 페이지 추가 (유료) 로 보이고, 누르면 기능 문의 창이 열립니다. 스텝노트 팀이 조직에 기능을 켜주면 바로 사용할 수 있습니다.

페이지 추가하기

+ 페이지 추가 를 누르면 아래 항목을 정합니다.

항목	설명
유형	진료과목 상세 / 의료진 소개 / 오시는 길·안내 / 빈 페이지 — 고른 유형에 맞는 섹션 골격이 미리 깔립니다
페이지 제목	브라우저 탭과 헤더 메뉴에 쓰이는 이름
상위 메뉴	`최상위 메뉴로 추가` 또는 기존 페이지 `아래` — 아래로 넣으면 헤더에서 펼쳐지는 하위 메뉴가 됩니다 (메뉴는 2단계까지)
페이지 주소	주소 뒤에 붙는 영문 슬러그. 상위 메뉴를 고르면 `/services/implant` 처럼 상위 주소 아래로 들어갑니다
AI로 초안 내용 채우기	켜면 병원 정보·카테고리에 맞춰 문구 초안을 자동으로 채웁니다 (빈 페이지는 해당 없음)

페이지 목록에서 할 수 있는 것

조작	설명
이름 클릭	그 페이지 편집으로 전환합니다. 저장하지 않은 변경이 있으면 잠기고 `저장 후 다른 페이지로 이동할 수 있어요.` 안내가 뜹니다
눈 아이콘	헤더 메뉴에 표시 / 숨김. 페이지는 그대로 살아 있고 메뉴에서만 빠집니다
`발행` / `내리기`	페이지 단위 공개. 발행된 페이지에는 초록색 지구본 아이콘이 붙습니다
점 6개 핸들(⋮⋮)	드래그로 순서 변경 — 이 순서가 곧 헤더 메뉴 순서입니다. 같은 상위 아래에서만 옮길 수 있습니다
휴지통	페이지 삭제. 확인 창이 한 번 뜨고, 지우면 되돌릴 수 없습니다

홈은 특별합니다. 삭제·숨김·순서 변경이 되지 않고 항상 맨 위입니다.
한 사이트에 홈 포함 40장까지 만들 수 있습니다. 버튼 오른쪽의 3/40 이 현재 개수입니다.
상위 메뉴는 만들 때만 정할 수 있습니다. 나중에 상위를 바꾸려면 페이지를 지우고 다시 만들어야 합니다.

💡 공개는 두 단계입니다. 페이지에서 발행 을 눌러도 사이트 자체가 공개되지 않았다면 환자에게 보이지 않습니다. 사이트 공개는 상단 공개하기 버튼입니다.

8.5 헤더 메뉴와 소셜 채널

헤더 메뉴

메뉴를 따로 짜는 화면은 없습니다. 발행됐고 + 메뉴 표시가 켜진 페이지가 사이드바 순서 그대로 헤더 메뉴가 됩니다.

하위 페이지가 있는 항목은 PC에서 마우스를 올리면 하위 메뉴가 펼쳐집니다. 상위 항목 자체도 클릭하면 그 페이지로 이동합니다.
모바일에서는 햄버거 메뉴 안에서 ▾ 를 눌러 하위 메뉴를 펼칩니다.
메뉴 이름은 페이지 제목을 그대로 씁니다.

소셜 채널

좌측 사이드바 예약 아코디언 안 소셜 채널 에 주소를 넣으면 헤더 오른쪽에 아이콘으로 붙습니다.

지원 채널: 카카오톡 채널 · 네이버 톡톡 · 네이버 블로그 · 인스타그램 · 유튜브 · 페이스북
주소를 비우면 그 채널은 사라집니다 — 추가/삭제 버튼이 따로 없습니다.
표시 순서는 위 목록 순서로 고정됩니다.

8.6 다국어로 공개하기 (영어 · 일본어 · 중국어)

한국어로 만든 페이지를 원본으로 두고, 켠 언어만 자동 번역 해서 함께 공개합니다.

언어 켜기

미리보기 위쪽 공통 설정(스타일 설정·챗봇·SEO 옆)의 언어 아코디언을 엽니다.

한국어는 원본이고 항상 공개 됩니다. 끌 수 없습니다.
English · 日本語 · 中文 체크박스로 원하는 언어만 켭니다. 하나만 켜도 되고 셋 다 켜도 됩니다. (중국어는 간체입니다.)
켜면 언어마다 58/411 번역됨 처럼 진행률이 보입니다. 한국어 원문을 고쳐서 번역이 낡아진 문구가 있으면 · 원문 변경 3 이 함께 표시됩니다.

번역 채우기

공개하기 를 누를 때 자동으로 비어 있거나 낡은 문구만 번역합니다. 이미 번역된 문구는 다시 번역하지 않아 두 번째부터는 훨씬 빠릅니다.
기다리지 않고 지금 채우려면 언어 옆 지금 번역 을 누릅니다.
언어를 켜기만 해서는 번역되지 않습니다. 지금 번역 이나 공개하기 가 있어야 문구가 채워집니다.
페이지가 많으면 한 번에 다 채우지 못할 수 있습니다. 이때는 "남은 문구는 다시 공개할 때 이어서 번역합니다" 안내가 뜨고, 다음 공개 때 남은 문구부터 이어서 채웁니다.

번역 다듬기

언어 옆 번역 다듬기 를 누르면 페이지를 골라 문구를 하나씩 고칠 수 있습니다. 한국어 원문과 번역이 나란히 보입니다.

💡 직접 고친 문구는 자동 번역이 절대 덮어쓰지 않습니다. 병원 이름 표기나 진료 항목의 공식 영문 명칭처럼 반드시 지켜야 하는 표현은 여기서 한 번 고쳐두면 계속 유지됩니다.

환자에게 보이는 모습

주소는 한국어에 접두사가 없습니다. 한국어 https://슬러그.stepnote.site/, 영어 /en, 일본어 /ja, 중국어 /zh 이고, 하위 페이지는 /en/doctors 처럼 붙습니다.
언어를 2개 이상 켜면 공개 페이지 헤더(모바일은 햄버거 메뉴 안)에 언어 선택 메뉴 가 자동으로 생깁니다.
번역이 없는 문구는 한국어가 그대로 보입니다. 번역이 덜 끝나도 페이지가 비거나 깨지지 않습니다.
검색엔진에는 같은 페이지의 언어별 주소가 서로 연결(hreflang)되어 전달됩니다.

아직 되지 않는 것

SEO 제목·설명은 아직 번역되지 않습니다. /en 에서도 브라우저 탭 제목과 검색결과 문구는 한국어로 나옵니다.
예약을 접수한 뒤 뜨는 안내 문구는 한국어입니다.
이미지·로고 안에 그려진 글자는 번역 대상이 아닙니다.

8.7 의료진 / 진료과목 / 특징 / FAQ — 드래그앤드롭 순서 변경

이 네 섹션은 좌측 사이드바에서 항목을 추가/삭제할 뿐 아니라 순서도 자유롭게 바꿀 수 있습니다.

조작법

좌측 사이드바에서 의료진 / 진료과목 / 특징 / FAQ 아코디언을 엽니다.
각 항목 왼쪽의 점 6개 핸들(⋮⋮) 을 마우스로 잡습니다.
위/아래로 드래그하면 순서가 바뀌고, 미리보기에 즉시 반영됩니다.

의료진 드래그 시 주의

의료진은 두 곳에서 노출됩니다.

상단 체크리스트 — 노출 여부 토글
하단 상세 폼 — 이름/직함/소개 입력

두 영역의 순서는 자동으로 동기화 됩니다. 어느 쪽에서 끌어도 같은 결과가 됩니다. 의료진별 사진 슬롯도 함께 따라 이동하므로 사진을 다시 올릴 필요는 없습니다.

💡 의료진 추가는 두 가지 방법: 사이드바의 + 멤버 외 추가 버튼으로 직접 입력하거나, + 의료진 추가 로 새 슬롯을 만들 수 있습니다. 등록된 직원을 자동으로 후보로 보여주지는 않습니다 (스텝노트 멤버 자료와는 분리되어 있습니다).

💡 기본 의료진 자동 채움: 새 페이지 생성 시 LLM이 의료진을 비워두면 1번 슬롯에 조직 소유자 이름 + 카테고리(전공) 가, 2·3번 슬롯에 플레이스홀더가 자동으로 채워집니다. 의료진 섹션이 빈 상태로 노출되지 않게 하기 위함이며, 그대로 두지 말고 본인 정보로 수정해 주세요.

8.8 미리보기에서 바로 편집하기

중앙 미리보기에서 텍스트를 더블클릭 하면 인라인으로 수정할 수 있습니다. 사이드바 입력란을 일일이 찾지 않아도 됩니다.

미리보기 각 섹션 우측 상단의 토글 스위치 로 해당 섹션을 즉시 끄거나 켤 수 있습니다. 끈 섹션은 공개 페이지에 나타나지 않습니다.

이미지가 있는 슬롯(히어로/의료진 사진/갤러리)은 클릭하여 업로드 합니다. 업로드한 이미지는 슬롯 키 기준으로 저장되어, 의료진 순서를 바꿔도 따라옵니다.

8.9 예약 패널 (Sticky Booking Bar)

생성된 모든 페이지에는 화면 하단에 고정 예약 패널 이 항상 떠 있습니다.

헤더의 예약하기 버튼, 히어로의 온라인 예약하기, 미리보기 하단의 상담 신청 모두 같은 예약 패널을 펼치도록 동작합니다 — 외부 URL로 이동하지 않습니다.
입력 항목: 이름·연락처·희망 날짜·희망 시간·요청 사항·개인정보 동의.
접수된 예약은 좌측 사이드바 부가 기능 → 예약 메뉴에서 확인합니다.

8.10 공개와 슬러그(URL)

공개하기 전에 슬러그(서브도메인)를 정해야 합니다. 예: gangnam-smile
공개 URL은 https://gangnam-smile.stepnote.site 형태의 서브도메인 방식입니다.
하위 페이지는 그 뒤에 페이지 주소가 붙습니다: …/doctors, 2단계 메뉴는 …/services/implant.
다국어를 켰다면 한국어 외 언어는 앞에 접두사가 붙습니다: …/en, …/ja/doctors (8.6).
슬러그는 한 번 공개되면 변경되지 않는 것을 권장합니다(SEO·북마크 영향).
공개 후에는 사이트 카드의 공개됨 배지가 표시되며, 다시 공개하기 버튼을 누르면 비공개로 돌릴 수 있습니다.

💡 stepnote.site 디렉토리: www.stepnote.site 에 접속하면 공개된 병원 사이트 목록을 카드 형태로 볼 수 있습니다. 환자가 직접 검색해 찾아올 수 있는 공개 허브입니다.

8.11 커스텀 도메인 연결 (이미 보유한 URL 사용하기)

기본값은 슬러그.stepnote.site 형태이지만, 이미 보유한 도메인(www.your-clinic.com 등)으로 홈페이지를 노출할 수 있습니다. HTTPS 인증서는 자동으로 발급됩니다.

8.11.1 어디서 설정하나요?

좌측 사이드바 부가 기능 → 홈페이지 의 홈페이지 공통 설정 하단에 있는 "커스텀 도메인 연결" 카드에서 진행합니다.

8.11.2 고객이 해야 할 일

도메인 입력: 카드에 사용할 도메인을 입력하고 연결하기 버튼을 누릅니다.
- 예: www.your-clinic.com, home.your-clinic.kr
- StepNote가 자동으로 Vercel에 도메인을 등록합니다.

DNS 레코드 추가: 도메인을 구매한 등록기관(가비아·후이즈·Cloudflare·GoDaddy 등) 관리 화면에서 안내된 DNS 레코드를 그대로 추가합니다.

도메인 형태	추가할 레코드
서브도메인 (`www.your-clinic.com`)	CNAME → `cname.vercel-dns.com`
루트 도메인 (`your-clinic.com`)	A 레코드 → `76.76.21.21` (또는 등록기관이 ALIAS/ANAME 지원 시 그쪽 추천)

💡 등록기관에 따라 호스트(name) 필드는 www 또는 도메인 전체(www.your-clinic.com) 중 한 형식만 받습니다. UI에 표시된 값을 그대로 복사해 넣고, 거부되면 앞부분만(www) 다시 시도해보세요.

DNS 전파 대기: 보통 5분 ~ 1시간 가량 걸립니다. 카드 우측의 상태 확인 버튼으로 진행 상황을 확인할 수 있습니다.
- DNS 전파 대기 → DNS가 아직 보이지 않습니다. 시간이 더 필요합니다.
- SSL 인증서 발급 중 → DNS는 확인되었고, 인증서 발급을 기다리는 중입니다 (보통 1–2분).
- 연결됨 → 끝났습니다. https://your-clinic.com 으로 바로 접속됩니다.
연결 해제: 카드의 연결 해제 버튼으로 언제든 분리할 수 있습니다. 해제 후에는 기본 슬러그.stepnote.site 만 노출됩니다.

8.11.3 자주 묻는 질문

Q. HTTPS 인증서는 따로 사야 하나요? A. 아니요. 도메인이 연결되면 Let's Encrypt 인증서가 자동 발급·갱신됩니다.

Q. 도메인 등록기관에 따라 화면이 다른데, 어디에 넣나요? A. 대부분 "DNS 관리" 또는 "DNS 레코드" 메뉴 안에 있습니다. 가비아는 DNS 관리 → DNS 설정, Cloudflare는 DNS → Records, 후이즈는 DNS 관리도구 입니다. CNAME / A 두 가지 타입만 추가하면 됩니다.

Q. apex(루트) 도메인을 쓰고 싶은데 A 레코드가 안 보여요. A. 일부 등록기관은 apex에 ALIAS / ANAME 또는 CNAME flattening 기능을 제공합니다(Cloudflare 등). 이 경우 위 표의 CNAME 값을 그대로 사용해도 동작합니다.

Q. 도메인이 "다른 조직이 이미 사용 중" 이라고 나옵니다. A. 같은 StepNote 안에서 다른 조직이 먼저 연결한 경우입니다. 해당 조직에서 먼저 연결을 해제해야 합니다.

Q. 회사 명함이나 안내문에 어떤 주소를 적나요? A. 연결됨 상태가 되면 입력한 도메인이 메인 주소가 됩니다. 기본 슬러그.stepnote.site 도 동시에 살아 있긴 하지만, 광고·인쇄물에는 본인 도메인을 쓰는 편이 좋습니다.

자주 묻는 질문

Q. AI 생성 결과가 마음에 안 들어요. 다시 만들 수 있나요? A. 같은 템플릿/색상/강점 조합으로는 한 페이지가 1개만 생성됩니다. 새 페이지를 만들거나, CMS에서 텍스트를 직접 수정하세요. 처음으로 되돌리기 는 마지막 저장이 아닌 생성 직후 상태로 돌립니다.

Q. 한 사이트에 페이지를 여러 장 둘 수 있나요? A. 네. 다중 페이지 기능이 켜져 있으면 홈 포함 40장까지 만들고 헤더 메뉴로 연결할 수 있습니다(8.4). 주소·전화·로고는 조직 단위 공통 설정이라 모든 페이지가 함께 씁니다.

Q. 번역 문구가 어색합니다. 고치면 다음 공개 때 다시 덮어써지나요? A. 아니요. 번역 다듬기 에서 직접 고친 문구는 자동 번역이 건드리지 않습니다. 자동 번역은 비어 있거나 원문이 바뀐 문구만 채웁니다.

Q. 특정 페이지만 영어로 공개할 수 있나요? A. 언어는 사이트 단위로 켭니다. 다만 번역이 없는 문구는 한국어가 그대로 나오므로, 중요한 페이지부터 번역을 채워도 사이트는 정상 동작합니다.

Q. 번역이 다 안 채워진 채로 공개돼도 괜찮나요? A. 괜찮습니다. 번역이 없는 자리는 한국어가 그대로 노출되고, 다음 공개 때 남은 문구부터 이어서 번역합니다.

Q. 사이드바에 등록된 직원이 자동으로 의료진 후보로 뜨지 않나요? A. 현재는 자동 연동되지 않습니다. CMS에서 직접 의료진을 추가/입력해 주세요.

Q. 예약은 어디로 들어오나요? A. 좌측 사이드바의 예약 메뉴에서 확인 가능합니다. 챗봇 예약과 동일한 화면입니다.