> For the complete documentation index, see [llms.txt](https://help.qshop.ai/customer_support/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.qshop.ai/customer_support/qshop/get_started/setup/ai.md).

# 큐샵AI로 시작하기

큐샵 AI 웹사이트 빌더에 대해 알아봅니다.

## 큐샵 AI 웹사이트 빌더란?

큐샵 AI 웹사이트 빌더는 큐샵AI가 선보일 다양한 기능 중 웹사이트의 레이아웃, 디자인, 스타일을 자동으로 생성해드리는 기능입니다.

사이트의 목적과 스타일에 대한 키워드를 입력하여 큐샵AI를 통해 보다 쉽게 사이트를 개설 할 수 있습니다.

{% hint style="info" %}
사이트 생성 과정에서 크레딧이 소모되며, 크레딧 적립 방법은 \[[마이베네핏](broken://pages/UjefM19Eh8CwRcHLrYid)] 가이드를 참고 부탁드립니다.
{% endhint %}

### 사이트 생성하기

1\. 큐샵 회원가입 또는 로그인을 합니다. ([큐샵 회원가입](/customer_support/qshop/get_started/setup.md#id-1))

2\. 큐샵 홈페이지의 프롬프트 입력창에 사이트의 목적과 스타일이 담긴 키워드를 입력합니다.

{% hint style="info" %}
아래 예시 이미지와 같은 형태로 입력을 합니다.

* 신축 아파트 분양 랜딩페이지, 넓은 전경 이미지와 밝은 톤의 모던 디자인으로 구성해주세요.
* 객실 및 시설을 잘 보여주는 펜션 홍보 홈페이지를 만들어줘
* 병원 세부 시술별 정보와 전후 사진으로 설득력을 확보하는 병원 서비스 상세페이지
* IT 기업 홈페이지, 블루 계열 컬러 시스템과 정돈된 카드 섹션으로 성과 중심 텍스트로 구성해주세요.
  {% endhint %}

3\. 키워드를 입력한 후 오른쪽 화살표 모양의 \[**생성하기**] 버튼을 클릭합니다.

4\. AI 사이트 생성 페이지로 이동하여, 입력한 프롬프트 내용을 확인합니다.

5\. 기재한 내용을 바탕으로 생성 된 브랜드명을 선택합니다.

{% hint style="info" %}
원하는 브랜드 명이 없다면 다른 이름으로 추천을 받거나, 직접 브랜드명을 입력하여 진행이 가능합니다.
{% endhint %}

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FSRTRJ6whVzjtQwZZiaj4%2F2_%EB%B8%8C%EB%9E%9C%EB%93%9C%EB%AA%85.png?alt=media&amp;token=c36f50f6-f048-41e5-a90d-dcc58d909f73" alt=""><figcaption></figcaption></figure>

6\. 다음은 브랜드 컬러를 선택합니다. \
큐샵 AI를 통해 추천 받은 색상을 선택할 수 있으며 브랜드 컬러를 직접 선택하여 이용을 할 수도 있습니다.

{% hint style="info" %}
원하는 브랜드 컬러가 없다면 다른 색상을 추천받을 수 있습니다.
{% endhint %}

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2F1bxWcGSr5zRwz8ACGRJX%2F3_%EB%B8%8C%EB%9E%9C%EB%93%9C%EC%BB%AC%EB%9F%AC.png?alt=media&amp;token=e365de88-6590-474e-8cfd-4c7c9a422e1e" alt=""><figcaption></figcaption></figure>

7\. 생성 할 사이트의 페이지 수를 선택합니다.

{% hint style="info" %}
생성이 완료 된 후 디자인 에디터를 통해 직접 페이지 추가 및 삭제를 할 수 있습니다.
{% endhint %}

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FNsBJQxy8drQGnIbMmPlU%2F4_%ED%8E%98%EC%9D%B4%EC%A7%80%EC%88%98.png?alt=media&amp;token=d56f57cd-f6b4-4ff6-9dfe-db1280c7f94d" alt=""><figcaption></figcaption></figure>

8\. 사이트에 적용 될 이미지 스타일을 선택합니다.

{% hint style="info" %}
선택 한 스타일을 바탕으로 이미지가 생성 됩니다.
{% endhint %}

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FbitlXq46yyX6rWVIMA62%2F5_%EC%9D%B4%EB%AF%B8%EC%A7%80%20%EC%8A%A4%ED%83%80%EC%9D%BC.png?alt=media&amp;token=d9ff9493-389c-461c-8b04-190073677218" alt=""><figcaption></figcaption></figure>

9\. AI와 대화를 통해 결정 된 내용을 확인한 뒤 \[**사이트 생성하기**] 버튼을 클릭합니다.
\
만약 원하는 내용이 아닐 경우, AI와 새로운 대화를 통해 본 과정을 다시 시작할 수 있습니다.

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FFc3g1tCzDvqVNUgz7h6P%2F6_%EC%82%AC%EC%9D%B4%ED%8A%B8%20%EC%83%9D%EC%84%B1%ED%95%98%EA%B8%B0.png?alt=media&amp;token=d0d17a34-4faf-4d89-92c9-a1fa21e4d772" alt=""><figcaption></figcaption></figure>

10\. 사이트 생성 방법을 선택합니다.

<details>

<summary>AI에게 모든 것을 맡기기</summary>

1\. \[**AI에게 모든 것을 맡기기]**&#xB97C; 클릭합니다.

{% hint style="info" %}
\[**AI에게 모든 것을 맡기기**] 클릭 시 100크레딧이 소모 됩니다.
{% endhint %}

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FynGjKILkGaY1MX9xF1b8%2F7_AI%20%EC%83%9D%EC%84%B1.png?alt=media&amp;token=a496e0f4-b84a-468e-9e29-fb68a5cfaa9d" alt=""><figcaption></figcaption></figure>

2\. 생성 된 사이트를 확인한 뒤 오른쪽 위 \[**스타일 수정하기**] 버튼을 클릭합니다.

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FuK2LcUX3BpVepTV9NND2%2F8_%EC%83%9D%EC%84%B1%20%EA%B3%BC%EC%A0%95.png?alt=media&amp;token=4b2cccc7-2b4f-4ae2-9857-954db6f088b9" alt=""><figcaption></figcaption></figure>

3\. 사이트에 적용 될 폰트, 버튼 모양, 이미지 모양 등의 스타일을 선택합니다.

{% hint style="info" %}
사이트 생성 후 에디터를 통해 스타일 수정을 할 수 있습니다.
{% endhint %}

4\. 모든 내용을 확인하셨다면 오른쪽 위 \[**사이트 게시하기**] 버튼을 클릭하여 사이트를 게시합니다.

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FPUBJIDlAtaUEBciA211B%2F9_%EC%8A%A4%ED%83%80%EC%9D%BC%20%EC%88%98%EC%A0%95.png?alt=media&amp;token=325c5364-2dee-4d15-b501-c178298ab64b" alt=""><figcaption></figcaption></figure>

</details>

<details>

<summary>사이트 구성 직접 진행하기</summary>

1\. \[**사이트구성선택하기**]를 클릭합니다.

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FGM0e1SxcBuaHMhAZOEvW%2F10_%EC%82%AC%EC%9D%B4%ED%8A%B8%20%EA%B5%AC%EC%84%B1%ED%95%98%EA%B8%B0.png?alt=media&amp;token=ef5586db-67db-4845-9fdf-6d4a599bc6ea" alt=""><figcaption></figcaption></figure>

2\. 미리보기 화면을 통해 생성 된 사이트를 확인하고, 섹션의 위치 변경을 할 수 있으며 오른쪽 \[**구성 선택하기**] 항목을 통해 섹션의 템플릿을 변경 할 수 있습니다.

{% hint style="info" %}
오른쪽 위 페이지 명을 클릭하여 각 페이지 마다 구성을 변경할 수 있습니다.
{% endhint %}

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2Fpt14sYIFfn0NrNsKPqN1%2F11_%EA%B5%AC%EC%84%B1%20%EC%84%A0%ED%83%9D.png?alt=media&amp;token=4f51d460-b2ea-4906-ba38-17fb54cf86ed" alt=""><figcaption></figcaption></figure>

3\. 구성을 확인 및 변경하셨다면 오른쪽 위 \[**사이트 생성하기**] 버튼을 클릭합니다.

{% hint style="info" %}
\[**사이트 생성하기**] 클릭 시 100크레딧이 소모 됩니다.
{% endhint %}

4\. 생성 된 사이트를 확인한 뒤 오른쪽 위 \[**스타일 수정하기**] 버튼을 클릭합니다.

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FuK2LcUX3BpVepTV9NND2%2F8_%EC%83%9D%EC%84%B1%20%EA%B3%BC%EC%A0%95.png?alt=media&amp;token=4b2cccc7-2b4f-4ae2-9857-954db6f088b9" alt=""><figcaption></figcaption></figure>

5\. 사이트에 적용 될 폰트, 버튼 모양, 이미지 모양 등의 스타일을 선택합니다.

{% hint style="info" %}
사이트 생성 후 에디터를 통해 스타일 수정을 할 수 있습니다.
{% endhint %}

6\. 모든 내용을 확인하셨다면 오른쪽 위 \[**사이트 게시하기**] 버튼을 클릭하여 사이트를 게시합니다.

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FPUBJIDlAtaUEBciA211B%2F9_%EC%8A%A4%ED%83%80%EC%9D%BC%20%EC%88%98%EC%A0%95.png?alt=media&amp;token=325c5364-2dee-4d15-b501-c178298ab64b" alt=""><figcaption></figcaption></figure>

</details>

11\. 사이트 생성이 완료 되었습니다. 생성 된 사이트 초안을 바탕으로 디자인 수정을 합니다.

{% hint style="info" %}
디자인 수정 방법은 \[[상점 디자인하기](/customer_support/guide/design.md)] 가이드를 참고 부탁드립니다.
{% endhint %}

### 기본 도메인 수정하기

큐샵 AI 웹사이트 빌더를 통해 사이트 생성 시 임의의 주소로 도메인이 생성이 됩니다. 때문에, 고객님께서 원하시는 도메인으로 변경을 해주셔야합니다.

큐샵AI로 만든 사이트는 생성 후 기간에 관계없이 1회 도메인 변경이 가능하며, 이후 변경일 기준 15일 마다 변경이 가능합니다.

{% hint style="info" %}
도메인 변경방법은 \[[도메인 설정](#undefined-2)] 가이드를 참고 부탁드립니다.
{% endhint %}