AI 에디터 알아보기
AI 에디터는 자연어로 홈페이지 디자인을 수정할 수 있는 AI 홈페이지 빌더의 핵심 도구입니다.
복잡한 편집 도구를 배울 필요 없이, 원하는 내용을 말로 입력하면 AI가 디자인을 수정합니다.
1. AI 에디터란
AI 에디터는 AI 디자인 어시스턴트가 탑재된 홈페이지 편집 도구입니다. 텍스트, 이미지, 색상, 레이아웃 등을 자연어로 요청하면 AI가 자동으로 수정합니다.
| 특징 | 설명 |
|---|---|
| 자연어 편집 | "배경색을 파란색으로 바꿔줘"처럼 말로 입력하면 AI가 디자인을 수정합니다. |
| 영역 선택 편집 | 수정할 영역을 직접 클릭하여 선택한 후 수정을 요청할 수 있습니다. |
| 실시간 미리보기 | PC와 모바일 화면에서 편집 결과를 바로 확인할 수 있습니다. |
| 반응형 디자인 | PC, 태블릿, 모바일 화면 모두 자동으로 최적화됩니다. |
| 대화 맥락 유지 | 연속 대화 시 이전 요청의 맥락을 기억하여 자연스럽게 수정을 이어갈 수 있습니다. |
2. AI 에디터 진입 방법
- 어드민에 로그인합니다.
- 좌측 메뉴에서 디자인 수정을 클릭합니다.
- 디자인 수정 허브에서 "에디터 시작하기" 버튼을 클릭합니다.
- AI 에디터가 별도 브라우저 창으로 열립니다.
안내에디터는 별도 브라우저 창에서 열리며, 어드민 창은 그대로 유지됩니다. 에디터에서 발행을 완료하면 어드민의 디자인 수정 허브가 자동으로 "발행 완료" 상태로 업데이트됩니다.
3. 화면 구성
AI 에디터는 어드민과 별도의 브라우저 창에서 열리며, 크게 세 영역으로 구성됩니다.
헤더 영역
| 위치 | 요소 | 설명 |
|---|---|---|
| 좌측 | 어드민으로 이동 | 클릭하면 에디터를 닫고 어드민으로 돌아갑니다. |
| 좌측 | 템플릿명 | 현재 적용된 템플릿 이름이 표시됩니다. |
| 우측 | PC/모바일 미리보기 | 클릭하면 홈페이지를 새 탭에서 미리보기합니다. |
| 우측 | 상태 배지 | "편집 중"(노란색) 또는 "발행 완료"(초록색)로 현재 상태를 표시합니다. |
| 우측 | 저장 | 편집 내용을 저장합니다. |
| 우측 | 발행하기 | 편집 내용을 실제 홈페이지에 반영합니다. |
AI 어시스턴트 패널 (좌측)
AI 디자인 어시스턴트와 대화하는 영역입니다.
- 채팅 영역 : AI와의 대화 내용이 표시됩니다.
- 예시 프롬프트 칩 : 자주 사용하는 수정 요청을 빠르게 선택할 수 있습니다. (색상 테마 변경, 폰트 변경, 레이아웃 수정, 갤러리 변경 등)
- 입력창 : 수정하고 싶은 내용을 자연어로 입력합니다. Enter 키로 전송, Shift+Enter로 줄바꿈할 수 있습니다.
- 더보기 메뉴 : "대화 초기화"와 "새로 만들기" 기능을 제공합니다.
프리뷰 영역 (우측)
편집 중인 홈페이지가 실시간으로 표시되는 영역입니다. 프리뷰에서 수정할 섹션을 직접 클릭하여 선택할 수 있습니다.
섹션 관리 패널 (좌측 탭)
좌측 패널에서 세 가지 탭을 통해 홈페이지 구성을 관리할 수 있습니다.
| 탭 | 설명 |
|---|---|
| 섹션 | 페이지 섹션 목록을 확인하고, 드래그로 순서를 변경하거나, 섹션을 추가/삭제할 수 있습니다. |
| 스타일 | 홈페이지 전체 스타일을 설정합니다. |
| 확장 | 확장 기능을 제공합니다. |
4. 편집 방법
AI 에디터에서는 네 가지 방법으로 홈페이지를 수정할 수 있습니다.
방법 1: 영역 선택 편집 (Crop Edit)
프리뷰 영역 에서 수정할 부분을 직접 클릭하여 선택한 후 수정을 요청하는 방식입니다.
- 상단 Draw를 선택합니다.
- 프리뷰 영역에서 수정할 섹션을 클릭합니다.
- 선택 영역 근처에 나타나는 입력 팝업에 수정 내용을 입력합니다.
- Enter 키를 누르거나 적용 버튼을 클릭하면 AI가 수정을 진행합니다.
방법 2: 채팅 편집 (Chat Edit)
좌측 AI 어시스턴트 패널의 입력창에서 직접 수정을 요청하는 방식입니다. 영역을 선택하지 않아도 됩니다.
- 좌측 입력창에 수정하고 싶은 내용을 자연어로 입력합니다.
- Enter 키를 누르면 AI가 수정을 진행합니다.
방법 3: 스타일 수정
상단 '스타일 수정'을 선택하여 기본 색상과 폰트를 한번에 변경하는 방식입니다.
- 상단 '스타일 수정'을 클릭합니다.
- 기본 색상과 기본 폰트를 한번에 적용할 수 있습니다. 클릭 시 바로 적용됩니다.
방법 4: 직접수정
상단 'Edit'을 선택하여 페이지의 색상과 글꼴, 폰트 사이즈를 조절하는 방식입니다.
- 상단 'Edit'을 클릭합니다.
- 기본 색상과 기본 폰트를 세밀하게 조정할 수 있습니다.
채팅 편집이 유용한 경우
| 상황 | 예시 |
|---|---|
| 수정할 위치를 정확히 모를 때 | "헤더에 있는 버튼 색상 바꿔줘" |
| 홈페이지 전체를 수정할 때 | "전체 색상 톤을 따뜻하게 바꿔줘", "폰트 전부 고딕으로 바꿔줘" |
| 화면에 보이지 않는 요소를 수정할 때 | "페이지 타이틀을 변경해줘" |
| 빠르게 수정하고 싶을 때 | "로고 색상 바꿔줘" |
5. 수정 요청 예시
AI 디자인 어시스턴트에게 다양한 수정을 요청할 수 있습니다.
| 수정 유형 | 요청 예시 |
|---|---|
| 텍스트 변경 | "버튼 텍스트를 '바로가기'로 변경해줘" |
| 색상 변경 | "배경색을 파란색으로 바꿔줘" |
| 폰트 변경 | "전체 폰트를 나눔고딕으로 변경해줘" |
| 섹션 추가 | "배너 하단에 갤러리 섹션을 추가해줘" |
| 섹션 삭제 | "이 섹션을 삭제해줘" |
| 레이아웃 수정 | "이미지를 왼쪽에, 텍스트를 오른쪽에 배치해줘" |
| 위젯 추가 | "예약 위젯을 추가해줘", "게시판을 추가해줘" |
| 글로벌 수정 | "전체 색상 톤을 따뜻하게 바꿔줘" |
6. 섹션 구성
AI 에디터에서 관리할 수 있는 주요 섹션은 다음과 같습니다. 업종에 따라 기본 구성이 달라질 수 있습니다.
| 섹션 | 설명 |
|---|---|
| 헤더 | 로고, 메뉴 등 상단 영역 |
| 히어로 배너 | 메인 이미지와 핵심 문구가 표시되는 대형 배너 영역 |
| 갤러리/포트폴리오 | 이미지 갤러리 또는 포트폴리오 영역 |
| 스태프 소개 | 팀원 또는 담당자를 소개하는 영역 |
| 가격표 | 서비스 가격 정보를 표시하는 영역 |
| 공지사항 | 공지사항 목록을 표시하는 영역 |
| FAQ | 자주 묻는 질문을 표시하는 영역 |
| 오시는 길 | 지도와 위치 정보를 표시하는 영역 |
| 상담 문의 | 방문자가 문의를 남길 수 있는 입력폼 영역 |
| 예약 위젯 | 예약 기능을 제공하는 영역 (어드민 설정 필요) |
섹션 관리 패널에서 섹션 순서를 드래그로 변경하거나, 섹션의 표시/숨김을 토글할 수 있습니다.
7. 템플릿 변경하기
현재 적용된 템플릿을 다른 템플릿으로 변경할 수 있습니다.
- AI 어시스턴트 패널의 더보기(⋯) 메뉴를 클릭합니다.
- "새로 만들기"를 선택합니다.
- 확인 다이얼로그에서 주의사항을 확인하고 진행합니다.
- 템플릿 갤러리에서 원하는 템플릿을 선택하고 "적용하기"를 클릭합니다.
8. 자주 묻는 질문
Q. AI 에디터를 사용하려면 비용이 추가로 드나요?
아닙니다. AI 에디터는 AI 홈페이지 빌더 이용료에 포함되어 있으며, 직접 운영과 광고 대행 모두 동일하게 이용할 수 있습니다.
Q. AI가 수정한 결과가 마음에 들지 않으면 어떻게 하나요?
AI에게 다시 수정을 요청할 수 있습니다. "좀 더 진하게", "다른 색상으로" 등 연속으로 대화하면 AI가 이전 맥락을 기억하여 수정합니다.
Q. 편집 중에 브라우저를 닫으면 작업 내용이 사라지나요?
저장 버튼을 클릭하여 저장한 내용은 유지됩니다. 저장하지 않은 편집 내용은 유실될 수 있으므로, 작업 중 수시로 저장하는 것을 권장합니다.
Q. 모바일에서 AI 에디터를 사용할 수 있나요?
AI 에디터는 PC 환경에서만 이용할 수 있습니다. 모바일로 어드민에 접속하면 대시보드 확인, 게시판 관리, 예약/문의 확인 등의 기능을 이용할 수 있습니다.
Q. 대화 기록이 저장되나요?
현재 세션(브라우저 창이 열려 있는 동안) 내에서는 대화 맥락이 유지됩니다. 에디터를 닫고 다시 열면 이전 대화 기록은 초기화됩니다.