Hinto AI와 Framer 연동 방법

이 가이드에서는 Hinto AI 지식 베이스를 Framer와 연동하는 방법을 설명합니다. 다음 단계를 따라 하면 문서, 아티클, 폴더를 포함한 모든 콘텐츠를 Framer CMS로 원활하게 가져올 수 있습니다. 이를 통해 Framer 사이트 내에서 완벽하게 작동하는 동적 도움말 센터를 구축할 수 있습니다. 진행하려면 Hinto AI와 Framer 계정이 모두 활성화되어 있어야 합니다.

1단계: 아티클 동기화하기

1. Framer 프로젝트에서 왼쪽 사이드바의 CMS 패널로 이동합니다.

2. Cmd/Ctrl + K를 눌러 명령 팔레트를 열거나, 캔버스 하단의 플러그인 아이콘을 클릭합니다. Hinto AI를 검색하여 선택하고 플러그인을 실행합니다.

3. 나타나는 New Collection 창에서 이름을 'Articles'로 입력하고 Create를 클릭합니다. 이 컬렉션에는 개별 도움말 아티클이 모두 저장됩니다.

4. API 키를 얻으려면 Hinto AI 웹 앱으로 이동하여 프로젝트를 엽니다.

5. 설정 아이콘을 클릭하여 Project Settings를 열고, 사이드 메뉴에서 API Keys를 선택합니다.

6. New API Key + 버튼을 클릭합니다.

7. 키 이름을 입력하고(예: 'Framer Integration') Create API Key를 클릭합니다.

8. 복사 아이콘을 클릭하여 새 API 키를 클립보드에 복사합니다.

9. Framer로 돌아와 API Key 필드에 키를 붙여넣고 Continue를 클릭합니다.

10. Hinto Content Sync 창에서 Content Type이 Articles로 설정되어 있는지 확인합니다.

11. (선택 사항) 내부 링크가 올바르게 작동하도록 하려면 Advanced Settings를 펼치고 아티클이 게시될 사이트의 전체 기본 URL 경로를 입력합니다.

12. Import를 클릭하여 동기화를 시작합니다. 이제 Hinto AI 아티클이 Framer의 'Articles' 컬렉션에 나타납니다.

2단계: 폴더 구조 동기화하기

콘텐츠를 정리하고 탐색 메뉴를 구성하는 데 필수적인 폴더 구조를 가져오기 위해 동일한 과정을 반복합니다.

1. Collections 옆의 + 아이콘을 클릭하여 Hinto AI 플러그인을 다시 실행합니다.
2. 새 컬렉션 이름을 'Folders'로 지정하고 Create를 클릭합니다.
3. 동일한 Hinto AI API 키를 해당 필드에 붙여넣고 Continue를 클릭합니다.
4. Content Type 드롭다운에서 Folders를 선택합니다.
5. Import를 클릭합니다. 이제 Hinto AI의 폴더 구조를 'Folders' 컬렉션에서 사용할 수 있습니다.

이제 Hinto AI 아티클과 폴더를 Framer로 성공적으로 가져왔습니다. 이 두 CMS 컬렉션을 사용하여 문서 페이지를 구축하고, 탐색 메뉴를 만들고, 도움말 센터를 디자인할 수 있습니다.