페이지 에디터의 세 가지 강력한 패널 — 데이터(CMS) · AI 프롬프트 · 다국어(I18n) — 을 자세히 안내합니다. 화면 전체 구성은 에디터 화면 둘러보기, 기본 편집은 페이지 에디터 사용하기를 먼저 참고하세요.
세 패널 모두 먼저 캔버스에서 요소를 선택해야 동작합니다. (다국어 패널은 선택 없이도 전체 텍스트 목록을 보여줍니다.)
데이터 연결 (CMS)
의사·진료과·아티클처럼 자주 바뀌는 정보는 직접 입력하지 않고 데이터에 연결합니다. 한 번 연결하면 원본이 바뀔 때 페이지에도 자동 반영됩니다. 좌측 CMS 패널에서 설정합니다.
요소를 선택하면 데이터 소스 종류를 세 가지 중에서 고릅니다.
| 종류 | 언제 쓰나 |
|---|---|
| Async API | 외부 API에서 실시간으로 목록을 불러올 때 (의사·아티클 등) |
| Static JSON | 고정된 데이터를 직접 JSON으로 붙여넣을 때 |
| Locale | 사이트가 지원하는 언어 목록 자체를 데이터로 쓸 때 (언어 선택 메뉴 등) |
Async API
- Available APIs — 미리 등록된 API 목록이 카드로 표시됩니다. 카드를 클릭하면 바로 연결되고, 카드에 마우스를 올리면 주소·쿼리·데이터 경로를 미리 볼 수 있습니다. 연결된 카드에는 Active 배지가 붙습니다.
- API URL Template — 직접 주소를 입력할 수도 있습니다.
{{변수}}형태의 핸들바 변수를 넣으면 페이지의 Path Variables나 Context Values(기관 정보 등) 값으로 치환됩니다. 변수 칩을 클릭하면 커서 위치에 삽입되고, 바로 아래 Parsed API URL Preview에서 실제 호출 주소를 확인할 수 있습니다. - Data Path (선택) — 응답에서 목록(배열)이 들어있는 위치입니다. 예:
data.items. Preview로 응답을 불러오면 사용 가능한 필드가 표시되고, 필드를 클릭해 경로를 채울 수 있습니다. - Bind API 버튼으로 연결합니다. 이미 연결돼 있으면 상단 Currently bound 칸에 표시되고 Clear로 해제합니다.
- Prefetch on server — 켜면 이 목록을 서버 렌더링(SSR) 단계에서 미리 불러옵니다. SEO에 유리하고 첫 화면 깜빡임이 없어지지만, 서버 응답 시간이 늘어납니다.
Static JSON
코드 입력란에 JSON 배열 또는 객체를 붙여넣습니다. 형식이 올바르면 항목 수와 사용 가능한 필드가 표시됩니다. Bind JSON Data로 연결합니다. 외부 API 없이 소량의 고정 데이터를 보여줄 때 편리합니다.
Locale
사이트에 설정된 언어 목록을 데이터로 연결합니다. 노출할 언어를 체크로 고르고 Bind Locales를 누릅니다. 연결한 요소 안에서는 {{locale}}·{{code}} 핸들바로 각 언어 값을 표시할 수 있어, 언어 전환 메뉴 같은 것을 만들 때 씁니다.
중첩 연결 (Nested)
목록 안에 또 목록이 있을 때(예: 진료과마다 의사 배열) 사용합니다. 이미 컬렉션이 연결된 부모 요소 안의 요소를 선택해야 Nested 탭이 활성화됩니다. 부모 데이터에서 배열이 들어있는 Field Path(예: items, doctors)를 고르면, 미리보기로 실제 중첩 데이터를 확인하고 연결할 수 있습니다.
AI 프롬프트
선택한 요소를 자연어 지시로 생성·수정합니다. 좌측 AI Prompt 패널을 엽니다.
- 캔버스에서 바꾸고 싶은 요소를 선택합니다. 입력란 위 배지에 대상 요소가 표시됩니다.
- 원하는 바를 한국어/영어로 입력합니다. 예: "이 영역을 4칸 통계 섹션으로, 숫자는 굵은 파란색으로".
- 필요하면 이미지를 최대 3장까지 첨부할 수 있습니다(디자인 참고용).
- 전송하면 AI가 결과를 만들어 선택한 요소에 바로 적용합니다. 적용된 메시지에는 Applied 표시가 붙습니다.
- 생성 중에는 정지(■) 버튼으로 멈출 수 있고, 이전 요청들은 대화 형태로 히스토리에 남습니다. 히스토리의 결과를 클릭하면 미리보기로 다시 볼 수 있습니다.
AI는 선택 요소뿐 아니라 페이지 구조·에셋·컨텍스트 값·**디자인 변수(브랜드 색상 등)**를 함께 참고합니다. 그래서 "브랜드 색을 써줘" 같은 지시도 기존 디자인 시스템에 맞춰 반영됩니다.
다국어 (I18n)
페이지의 모든 텍스트를 언어별로 관리하고 AI 번역을 돌립니다. 우측 I18n 패널을 엽니다.
- 번역 항목 목록 — 페이지의 번역 가능한 텍스트가 모두 줄지어 나옵니다. 각 칸은 현재 편집 언어의 내용을 보여주며, 여기서 바로 수정하면 그 언어의 값으로 저장됩니다. (편집 언어는 상단 툴바에서 전환)
- 개별 번역 — 각 항목의 지구본(🌐) 버튼으로 그 항목 하나만 원하는 언어로 번역합니다.
- 여러 항목 한꺼번에 — 체크박스로 항목을 고른 뒤 Translate Selected → 대상 언어 를 선택하면, 현재 언어 기준으로 선택 항목을 한 번에 번역합니다. Select All(전체 선택), Check Highlighted (n)(캔버스에서 선택한 요소만 체크)도 있습니다.
- 언어별 게시(Locales) — 언어마다 게시 여부를 토글합니다. **기본 언어(Base)**는 항상 게시되며 끌 수 없습니다. 아직 번역이 덜 된 언어는 꺼 두었다가 준비되면 켜는 식으로 운영합니다.
번역 버튼은 번역 API가 설정돼 있어야 활성화됩니다. 입력만으로도 언어별 내용은 직접 관리할 수 있습니다.
정리
- 데이터(CMS) 로 목록을 원본에 연결 → 2. AI 프롬프트로 레이아웃을 빠르게 생성·수정 → 3. **다국어(I18n)**로 언어별 내용을 채우고 번역 → 4. 미리보기 확인 후 저장·게시.