# AI Studio 가이드
## AI Studio 가이드
AI Studio는 자연어 프롬프트로 웹사이트, 랜딩 페이지, 인터랙티브 경험을 더 빠르게 만들 수 있는 AI 기반 빌더입니다. 처음부터 모든 것을 직접 만드는 대신, 원하는 것을 설명하고, 템플릿을 사용하고, URL이나 이미지를 참조해서 AI로 결과를 다듬을 수 있습니다. AI Studio는 전용 워크스페이스에서 프로젝트를 체계적으로 관리하면서 제작 속도를 높이도록 설계되었습니다.
**중요**: AI Studio는 **Labs**를 통해 이용할 수 있습니다. 사용하기 전에 하위 계정에서 활성화해야 합니다.
***
### 목차
* [AI Studio란?](#ai-studio란)
* [AI Studio의 주요 장점](#ai-studio의-주요-장점)
* [AI Studio 위치](#ai-studio-위치)
* [AI Studio 홈 및 인터페이스 개요](#ai-studio-홈-및-인터페이스-개요)
* [AI Studio에서 프로젝트 만들기](#ai-studio에서-프로젝트-만들기)
* [프롬프트로 시작하기](#프롬프트로-시작하기)
* [AI Studio의 후속 질문 기능](#ai-studio의-후속-질문-기능)
* [템플릿으로 시작하기](#템플릿으로-시작하기)
* [프로젝트 편집 및 다듬기](#프로젝트-편집-및-다듬기)
* [프로젝트 미리보기 및 검토](#프로젝트-미리보기-및-검토)
* [버전 히스토리](#버전-히스토리)
* [폼 및 캘린더 연동](#폼-및-캘린더-연동)
* [AI Studio에서 폼 작동 방식](#ai-studio에서-폼-작동-방식)
* [AI Studio에서 캘린더 작동 방식](#ai-studio에서-캘린더-작동-방식)
* [프로젝트 발행하기](#프로젝트-발행하기)
* [프로젝트 제출 데이터](#프로젝트-제출-데이터)
* [워크플로우와 폼 제출 연결 방법](#워크플로우와-폼-제출-연결-방법)
* [현재 제한사항 및 주의사항](#현재-제한사항-및-주의사항)
* [자주 묻는 질문](#자주-묻는-질문)
***
## AI Studio란?
AI Studio는 아이디어를 실제 작동하는 디지털 경험으로 더 빠르게 바꿔주는 대화형 AI 빌더입니다. 프롬프트로 레이아웃, 콘텐츠, 이미지, 멀티 페이지 경험을 생성한 다음 후속 지시사항으로 결과를 다듬을 수 있습니다.
AI Studio는 한 페이지 또는 같은 웹 프로젝트 내에서 여러 연결된 섹션을 만들 수 있어, 사용자가 각 부분을 수동으로 만드는 대신 더 완성된 시작점에 빠르게 도달하도록 도와줍니다. 또한 페이지 전체에 일관된 디자인을 적용하고, 프롬프트와 페이지 목표에 맞춰 콘텐츠를 생성하며, 나중에 다듬을 수 있는 탄탄한 초안을 제공합니다. 사용자가 이미지를 제공하지 않으면 AI Studio가 히어로 섹션과 보조 영역을 위한 비주얼을 생성할 수 있습니다. 사용자가 이미지를 업로드하고 AI Studio에 사용하라고 명확히 요청하면, 해당 비주얼을 페이지에 배치할 수 있습니다.
AI Studio는 표준 웹사이트나 랜딩 페이지에만 한정되지 않습니다. 다단계 설문, 커스텀 캘린더 예약 플로우, 브랜드 폼, 기타 고객 대면 경험 등 인터랙티브한 프론트엔드 경험도 만들 수 있습니다. 이는 AI Studio를 정적인 페이지뿐만 아니라 고객 경험을 구축하는 더 넓은 창작 워크스페이스로 만듭니다.
AI Studio로 다음과 같은 작업을 할 수 있습니다:
* 실제 URL을 레이아웃과 구조 영감으로 사용해 랜딩 페이지 만들기
* 업로드한 브랜드 사진으로 온라인 스토어 구축하기
* 특정 비즈니스 사용 사례를 위한 대시보드 레이아웃 생성하기
* 캘린더와 연결된 예약 페이지 만들기
* 콘텐츠, 비주얼, CTA가 이미 배치된 웹사이트 구축하기
***
### AI Studio의 주요 장점
AI Studio는 팀이 더 빠르게 제작하고, 더 쉽게 실험하며, 수동 작업을 줄여 아이디어에서 런칭까지 이어지도록 도와줍니다. 가장 큰 장점은 생성, 반복, 미리보기, 프로젝트 관리를 하나의 워크스페이스에서 결합한다는 것입니다.
* **빠른 제작**: 모든 섹션을 수동으로 만드는 대신 프롬프트로 시작
* **자연스러운 편집**: 평범한 언어로 변경 요청하면 AI가 프로젝트를 업데이트
* **유연한 영감**: 템플릿, URL, 스크린샷, 업로드 이미지로 결과 가이드
* **안전한 반복**: 버전 히스토리와 복구 옵션으로 더 자신감 있게 변경 테스트
* **내장 정리 기능**: 프로젝트, 폴더, 최근 작업, 즐겨찾기를 한 곳에서 관리
* **제작 경로**: 프로젝트가 준비되면 미리보기, 발행, 커스텀 도메인 연결
***
### AI Studio 위치
AI Studio는 Labs에서 활성화된 후 하위 계정 내 좌측 네비게이션에서 이용할 수 있습니다. 이를 통해 시간이 지나도 같은 워크스페이스에서 프로젝트로 돌아가 계속 작업하기 쉬워집니다.
1. HighLevel에서 하위 계정을 엽니다.
2. **Labs**에서 **AI Studio**를 활성화합니다(아직 켜져 있지 않다면).
3. 좌측 네비게이션에서 **AI Studio**를 클릭합니다.
***
### AI Studio 홈 및 인터페이스 개요
AI Studio 홈 화면은 새 프로젝트를 시작하고, 과거 작업을 다시 열고, 만든 모든 것을 관리하는 곳입니다. 이 레이아웃을 이해하면 생성, 편집, 정리 사이를 빠르게 이동하기 쉬워집니다.
AI Studio를 열면 다음을 볼 수 있습니다:
* 만들고 싶은 것을 입력하는 설명 박스
* **최근 본 항목**, **내 프로젝트**, **즐겨찾기**, **템플릿** 같은 탭
* 랜딩 페이지, 대시보드, 이커머스 스토어, 포트폴리오, 블로그 같은 템플릿 옵션
* 프로젝트 접근과 최근 작업이 있는 좌측 사이드바
홈 영역에서 새 프로젝트를 시작하고, 기존 프로젝트를 열고, 프로젝트 이름을 바꾸고, 프로젝트를 폴더로 이동하거나 삭제할 수 있습니다.
***
### AI Studio에서 프로젝트 만들기
AI Studio는 시작하는 여러 방법을 제공해서, 이미 가지고 있는 입력 유형에서 시작할 수 있게 도와줍니다. 아이디어, 템플릿, 웹사이트 참조, 이미지 중 무엇으로 시작하든 목표는 같습니다: 강력한 첫 번째 초안에 더 빠르게 도달하는 것입니다.
#### 프롬프트로 시작하기
만들고 싶은 것을 설명하는 프롬프트를 입력할 수 있습니다. 더 자세한 내용을 제공할수록 AI Studio가 첫 번째 버전을 더 잘 만들 수 있습니다. 프롬프트와 함께 파일, 이미지, 실시간 URL 같은 보조 입력을 구조, 레이아웃, 스타일 영감으로 사용할 수도 있습니다.
**프롬프트 예시:**
* 온라인 예약이 가능한 치과 클리닉 웹사이트 만들기
* 첨부된 브랜드 이미지를 사용해 프리랜스 디자이너 포트폴리오 사이트 구축하기
* 네비게이션 스타일과 전체 구조 영감으로 이 URL을 사용해 가족 캠핑장 홈페이지 만들기:
* 첨부된 홈페이지 스크린샷을 히어로 섹션, 간격, 타이포그래피의 시각적 방향으로 사용해 부티크 스킨케어 웹사이트 만들기
#### AI Studio의 후속 질문 기능
사용자가 완벽한 프롬프트를 작성할 필요는 없습니다. 요청이 너무 광범위하면 AI Studio가 빌드하기 전에 간단한 후속 질문을 할 수 있습니다.
예를 들어, 사용자가 "내 비즈니스용 웹사이트를 만들어줘"라고 말하면, AI Studio가 "어떤 종류의 비즈니스를 위해 만드는 건가요?"라고 물을 수 있습니다. 이는 사용자가 설정을 혼자 알아내는 대신 목표를 선택할 수 있게 해주어 경험을 더 쉽게 만듭니다.
#### 템플릿으로 시작하기
템플릿은 친숙한 구조로 더 빠른 시작점을 원할 때 유용합니다. AI Studio는 다음과 같은 일반적인 프로젝트 유형의 템플릿을 제공합니다:
* 랜딩 페이지
* 대시보드
* 이커머스 스토어
* 포트폴리오
템플릿으로 시작하려면 Templates(템플릿) 탭을 클릭한 다음 원하는 템플릿을 선택하세요.
***
### 프로젝트 편집 및 다듬기
AI Studio는 대화형 빌더로 가장 잘 작동합니다. 첫 번째 버전에 얽매이지 않으므로 목표에 맞을 때까지 계속 결과를 개선하기 쉽습니다. 생성 후에도 AI Studio에 계속 프롬프트를 주어 다음과 같은 변경을 할 수 있습니다:
* 색상이나 스타일 변경
* 헤드라인이나 본문 텍스트 다시 쓰기
* 연락처 폼이나 예약 섹션 추가
* 특정 섹션에 참조 URL이나 스크린샷 사용
**후속 프롬프트 예시:**
* 오렌지 대신 연한 초록색으로 색상 변경
* Contact(연락처) 페이지 추가
* 상단 네비게이션을 참조 URL과 비슷하게 만들기
* 첨부된 스크린샷과 비슷한 고객 후기 섹션 추가
* 히어로 섹션 비주얼을 첨부된 이미지로 변경
AI Studio는 프로젝트에서 업로드된 이미지도 사용할 수 있습니다. 이미지를 제공하지 않으면 비주얼을 생성해줄 수 있습니다.
***
### 프로젝트 미리보기 및 검토
미리보기 도구는 발행 전에 프로젝트가 어떻게 보이는지 확인하는 데 도움이 됩니다. 이 컨트롤은 레이아웃을 검토하고, 여러 페이지를 테스트하고, 여러 기기 유형에서 경험을 확인하는 데 유용합니다.
편집기 안에서 다음이 가능합니다:
* \*\*Preview(미리보기)\*\*와 **Code(코드)** 뷰 사이 전환
* 데스크톱, 태블릿, 모바일 모드로 프로젝트 보기
* 페이지 드롭다운으로 멀티페이지 프로젝트에서 페이지 간 전환
* 선택한 페이지를 새 탭에서 열거나 변경 후 미리보기 새로고침
***
### 버전 히스토리
각 AI 생성 변경은 나중에 돌아갈 수 있는 버전을 만듭니다. 이는 이전 초안을 잃어버릴 걱정 없이 작업을 더 안전하게 다듬을 수 있는 방법을 제공합니다. 버전 히스토리에서 다음이 가능합니다:
* 이전 버전 열기
* 이전 버전 미리보기
* 버전 북마크하기
* 필요 시 이전 버전으로 되돌리기
이는 변경 사항을 비교하고, 프롬프트 결과를 취소하고, 목표에 더 잘 맞는 버전으로 돌아가고 싶을 때 유용합니다.
버전 히스토리를 보려면 프로젝트 내에서 Version History(버전 히스토리) 버튼을 클릭하세요.
***
### 폼 및 캘린더 연동
폼과 캘린더는 AI가 생성한 페이지를 정보를 수집하거나 비즈니스와 시간을 예약할 수 있는 실제 작동하는 경험으로 바꾸는 데 도움이 됩니다. AI Studio는 이러한 액션을 위한 프론트엔드 경험을 구축한 다음 HighLevel 계정에서 기능을 작동시키는 데 필요한 연결 단계를 안내할 수 있습니다. 이는 처음부터 결과를 더 유용하게 만들면서도 폼과 캘린더가 언제 연결될지 사용자가 제어할 수 있게 합니다.
**중요**: 폼과 캘린더는 자동으로 연결되지 않습니다. AI Studio가 폼이나 예약 섹션의 레이아웃을 만들 수 있지만, 하위 계정으로 데이터를 보내기 시작하기 전에 해당 구성 요소를 연결하라고 요청해야 합니다.
#### AI Studio에서 폼 작동 방식
AI Studio는 프롬프트로 폼 기반 섹션과 페이지 경험을 만들 수 있습니다. 예를 들어, 연락처 폼, 등록 폼, 피드백 폼, 리드 캡처 섹션을 페이지에 추가하라고 요청할 수 있습니다. 이 단계에서 폼은 먼저 프론트엔드 레이아웃으로 시작됩니다. 즉, CRM에 연결되기 전에도 폼이 페이지에 나타날 수 있습니다.
폼이 제출을 수집하기 시작하게 하려면 AI Studio에 연결하라고 요청하거나 채팅에서 프롬프트가 나올 때 Connect(연결)를 클릭하세요. 이는 다음에 사용되는 **Connect to CRM(CRM에 연결)** 플로우를 시작합니다:
* 하위 계정에서 연락처 생성
* 폼 제출 캡처
* 추적 트리거를 통한 워크플로우 지원
연결 단계가 완료되면 AI Studio가 연결된 설정에 폼을 연결하여 제출이 HighLevel 계정으로 흘러가게 할 수 있습니다.
전체 안내는 [AI Studio에서 폼과 캘린더 연결하기](/hyperclass-docs/ai-ai-employee/connect-forms-and-calendars-in-ai-studio.md) 전용 가이드를 참고하세요.
#### AI Studio에서 캘린더 작동 방식
AI Studio는 예약 중심 페이지도 만들 수 있습니다. 예약 페이지, 상담 예약 페이지, 디스커버리 콜 페이지를 요청하면 스케줄링을 중심으로 페이지를 구축하고 예약 섹션을 추가할 수 있습니다.
예약 경험을 기능하게 하려면 AI Studio가 하위 계정에 이미 존재하는 캘린더를 감지하고 연결할 것을 선택하라고 프롬프트를 할 수 있습니다. 개략적으로 캘린더 플로우는 다음과 같이 작동합니다:
1. AI Studio가 페이지에 예약 영역을 만듭니다.
2. 하위 계정에서 캘린더를 선택합니다.
3. 해당 캘린더가 페이지에 연결됩니다.
이는 예약 페이지를 수동으로 다시 만들지 않고도 실제 작동하는 스케줄링 경험으로 바꾸기 쉽게 만듭니다.
전체 안내는 [AI Studio에서 폼과 캘린더 연결하기](/hyperclass-docs/ai-ai-employee/connect-forms-and-calendars-in-ai-studio.md) 전용 가이드를 참고하세요.
***
### 프로젝트 발행하기
발행은 프로젝트를 초안에서 검토, 공유, 런칭할 수 있는 것으로 이동시키기 쉽게 만듭니다. AI Studio는 단계적 발행 플로우를 사용해서 먼저 미리보기 도메인에 발행하고, 라이브 경험을 확인하고, 커스텀 도메인으로 이동하기 전에 업데이트할 수 있게 합니다.
사이트가 발행된 후에도 사용자는 계속 편집할 수 있습니다. 해당 변경 사항은 사용자가 다시 발행할 때까지 초안으로 남습니다. 이는 즉시 라이브 버전을 변경하지 않고도 페이지를 더 안전하게 개선할 수 있게 만듭니다.
발행 플로우는 다음과 같이 작동합니다:
1. \*\*Publish(발행)\*\*를 클릭한 다음 모듈에서 \*\*Publish(발행)\*\*를 다시 클릭합니다.
2. 아이콘, 이름, 설명, 소셜 이미지를 업데이트합니다. \*\*Apply Changes(변경 적용)\*\*를 클릭한 다음 \*\*Publish(발행)\*\*를 클릭합니다.
3. 커스텀 도메인을 추가하려면 \*\*Publish(발행)\*\*를 클릭한 다음 \*\*Add Custom Domain(커스텀 도메인 추가)\*\*를 클릭합니다.
4. 도메인을 입력합니다. 도메인을 자동으로 연결하려면 continue(계속)를 클릭하고 프롬프트가 나올 때 도메인을 승인하세요. 자동으로 승인하고 싶지 않다면 \*\*Add Record Manually(수동으로 레코드 추가)\*\*를 선택하고 DNS 레코드를 직접 추가하세요.
이 플로우는 먼저 미리보기 링크로 발행하고, 기본 사이트 세부사항을 업데이트하고, 준비가 되면 브랜드 도메인으로 이동할 기회를 제공합니다.
AI Studio 프로젝트가 도메인에 연결되면 해당 연결이 \*\*Domain Hub(도메인 허브)\*\*에 나타납니다.
* 프로젝트는 Sites(사이트) 아래 AI Studio에 있습니다
* 도메인 연결은 Domain Hub에서 관리됩니다
* 발행된 페이지는 해당 연결된 도메인에 나타납니다
***
### 프로젝트 제출 데이터
연결되면 폼 제출은 AI Studio 프로젝트 자체가 아닌 연결된 하위 계정 CRM 설정으로 들어갑
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://hyperclass.gitbook.io/hyperclass-docs/ai-ai-employee/ai-studio-in-highlevel.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.