> 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/create.md).

# 빈페이지로 시작하기

빈페이지로 사이트 생성 방법에 대해 알아봅니다.

빈페이지로 사이트를 개설하는 과정은 사이트 생성, 섹션 선택, 컬러 선택, 폰트 선택의 과정을 거치게 됩니다. 이 과정은 사이트 초기 디자인 구성을 위한 과정이며 진 중간에 바로 에디터로 넘어가거나 에디터에서 바로 시작을 하실 수도 있습니다.

{% hint style="info" %}
섹션 템플릿 선택 및 폰트,컬러 선택은 에디터 내에서도 설정이 가능합니다.
{% endhint %}

빈페이지를 통한 사이트 생성에 대한 자세한 내용은 아래 가이드를 참고 부탁드립니다.

## 1. 사이트 생성하기

### 1-1. 회원 사이트 생성하기

step1. 큐샵 회원 가입 및 로그인을 합니다. ([회원 가입하기](/customer_support/guide/setting/member.md))

step2. 큐샵 홈페이지 오른쪽 위 마이사이트로 이동합니다.

step3. \[**사이트 생성하기**] 버튼을 클릭합니다. ([사이트 생성하기](/customer_support/qshop/get_started/setup.md#id-2))

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2F9QpwaDXWTl9QnNlEc8aC%2F1_%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=ac9827e6-d488-42b7-80a5-455f0730d025" alt=""><figcaption></figcaption></figure>

step4. 오른쪽 위 \[**템플릿 없이 빈페이지로 시작하기**]를 클릭합니다.

{% hint style="info" %}
템플릿 페이지로 바로 이동하여 사이트를 생성 할 수 있습니다.
{% endhint %}

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2F129IFZzbF05TWMGWvJ3z%2F2_%EB%B9%88%ED%8E%98%EC%9D%B4%EC%A7%80%EB%A1%9C%20%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0.png?alt=media&amp;token=27cd21d5-b5f8-47e3-907a-19611682c11d" alt=""><figcaption></figcaption></figure>

step5. 사이트 이름, 사이트 URL을 입력하고 사이트 이용 목적을 선택합니다. \
쇼핑몰 개설을 원할 경우 쇼핑몰 기능 사용 토글을 활성화 합니다.

{% hint style="info" %}
비회원은 \[**게시하기**] 후 회원가입을 하여 사이트 관리자 페이지를 통해 URL 수정이 가능합니다.
{% endhint %}

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FbQGq9pD6wRMCpVIRd98i%2F5_%EC%82%AC%EC%9D%B4%ED%8A%B8%20%EC%A0%95%EB%B3%B4.png?alt=media&amp;token=1449b577-6fb4-41db-90e4-539a909387a5" alt=""><figcaption></figcaption></figure>

### 1-2. 비회원 사이트 생성하기

큐샵은 가입 전 사이트를 개설하고 에디터 사용하여 디자인 구성을 할 수 있습니다. \
큐샵의 기능을 직접 사용하신 후 \[**게시하기**] 과정에서 회원가입으로 이어져 생성하신 사이트를 소유할 수 있습니다.

#### 홈페이지에서 바로 생성하기

1. 홈페이지 \[**라이브 데모**]버튼을 클릭하여 사이트를 생성합니다.

   <figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FUhMYjVYPHd7wREXQF9uu%2F3_%EB%B9%84%ED%9A%8C%EC%9B%90%20%EB%8D%B0%EB%AA%A8.png?alt=media&amp;token=d606a796-0b47-4f06-a3a6-613115c4a085" alt=""><figcaption></figcaption></figure>

#### 템플릿 페이지를 통해 생성하기

1. 큐샵 홈페이지 위쪽 메뉴 중 \[**템플릿**]을 클릭합니다.
2. 오른쪽 위 \[**템플릿 없이 빈페이지로 시작하기**]를 클릭합니다.

   <figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FPeQK0brEcjrCfeObMuqv%2F4_%EB%B9%84%ED%9A%8C%EC%9B%90%20%EC%8B%9C%EC%9E%91.png?alt=media&amp;token=0304f20e-50ec-4c5b-9441-d1765295bc03" alt=""><figcaption></figcaption></figure>

## 2. 섹션 선택하기

빈페이지로 시작을 하게 될 경우 섹션 템플릿을 통해 사이트 초기 구성을 할 수 있으며 사이트에 공통적으로 적용이 될 색상과 폰트를 확인하고 적용할 수 있습니다.

{% hint style="info" %}
에디터에서 색상 및 폰트를 수정할 수 있습니다.
{% endhint %}

2-1. 섹션 템플릿을 통해 헤더,푸터,바디 에 해당되는 섹션을 추가합니다

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FQc9h74rl4VepSwgoa0gf%2F6_%EC%84%B9%EC%85%98%20%EC%84%A0%ED%83%9D.png?alt=media&amp;token=aa30ac24-1c14-479e-974d-ad15e80ed7c7" alt=""><figcaption></figcaption></figure>

<table data-header-hidden><thead><tr><th width="175">버리는</th><th>항목</th></tr></thead><tbody><tr><td>항목</td><td>설명</td></tr><tr><td><strong>헤더/메뉴(필수)</strong></td><td>사이트의 가장 상단에 배치되는 공통 해더 섹션 입니다.<br>페이지 메뉴 및 로그인,회원가입 등의 공통 메뉴로 구성됩니다.</td></tr><tr><td><strong>푸터(필수)</strong></td><td>사이트의 가장 하단에 배치되는 공통 푸터 섹션입니다.<br>사이트에 대한 사업자 정보, 고객센터 정보 등으로 구성됩니다.</td></tr><tr><td><strong>배너/CTA</strong></td><td>사이트 방문자에게 클릭이나 참여 행동을 유도하기 위한 용도로 사용됩니다.<br>눈에 잘 띄는 메세지와 버튼으로 구성됩니다.</td></tr><tr><td><strong>인트로</strong></td><td>페이지의 대문 역할을 하는 섹션입니다.<br>소개하고자 하는 내용에 대한 간결하고 핵심적인 내용들로 구성됩니다.</td></tr><tr><td><strong>소개</strong></td><td>전달하고자 하는 메세지와 정보에 대한 보다 자유롭고 상세한 내용과 디자인이 다뤄집니다.</td></tr><tr><td><strong>서비스</strong></td><td>서비스에 대한 상세한 정보를 여러 목적에 맞게 구성할 수 있습니다.</td></tr><tr><td><strong>미디어</strong></td><td>이미지, 갤러리, 동영상 등 여러 시각적인 콘텐츠를 통해 시각적인 표현이 두드러진 섹션입니다.</td></tr><tr><td><strong>상세정보</strong></td><td>고객 후기, 리뷰 인증, 고객사 목록, 연혁 소개 등 다양한 목적에 맞게 상세정보를 전달 할 수 있습니다.</td></tr><tr><td><strong>문의/연락</strong></td><td>입력폼을 통해 사이트 방문자의 참여 유도에 이용하거나 연락처, 지도 등에 대한 정보를 전달할 수 있습니다.</td></tr></tbody></table>

2-3. 추가 된 섹션은 왼쪽 **페이지 미리보기**를 통해 확인을 할 수 있으며 미리보기를 통해 섹션의 위치를 이동시키거나 추가된 섹션을 복제 또는 삭제를 할 수 있습니다.

{% hint style="info" %}
만약 빈페이지로 제작을 원할 경우 이 과정에서 섹션추가를 하지않고 \[**여기까지만 적용하기**] 또는 왼쪽 위 \[**X**] 아이콘 클릭 시 빈 페이지로 생성이 됩니다.
{% endhint %}

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2Fiw6xU66ZstEIx9uiTyAi%2F7_%EB%AF%B8%EB%A6%AC%EB%B3%B4%EA%B8%B0.png?alt=media&amp;token=f8cda77e-f055-48fd-be52-bd567f95437e" alt=""><figcaption></figcaption></figure>

## 3. 컬러 선택하기

사이트에 공통으로 적용이 될 컬러를 선택합니다. \
선택한 컬러에 따라 **미리보기**를 통해 색상이 반영이 되며, 컬러 셋을 통해 랜덤하게 컬러를 확인해 볼 수 있습니다.

3-1. 각 위치의 컬러를 직접 개별적으로 설정합니다.\
컬러가 변경 됨에 따라 미리보기를 통해 변경 된 항목의 색상이 반영 됩니다.

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FzgIPMWLPldigIrbAjkX5%2F8_%EC%BB%AC%EB%9F%AC%20%EC%84%A0%ED%83%9D.png?alt=media&amp;token=536b0609-6f33-45bb-892d-966a248542f7" alt=""><figcaption></figcaption></figure>

<table data-header-hidden><thead><tr><th width="207">버리는 항목</th><th></th></tr></thead><tbody><tr><td>항목</td><td>설명</td></tr><tr><td><strong>고정 아이콘</strong></td><td>해당 설정만을 잠급니다.<br>잠긴 설정은 컬러 셋 설정과 무관하게 유지가 됩니다.</td></tr><tr><td><strong>랜덤 화살표</strong></td><td>해당 설정만을 재 생성합니다.</td></tr><tr><td><strong>주요 글자 컬러</strong></td><td>섹션 본문의 배경 색상을 지정합니다.</td></tr><tr><td><strong>브랜드</strong> <br><strong>배경 컬러</strong></td><td>헤더 섹션의 배경 색상, 페이지 메뉴 블록의 글자색을 지정합니다.</td></tr><tr><td><strong>강조 컬러</strong></td><td>푸터 섹션의 배경색상, 아이콘, 버튼 블록의 색상을 지정합니다.</td></tr><tr><td><strong>보조 컬러</strong></td><td>상품목록, 상품슬라이드 블록의 할인율 표시 색상을 지정합니다.</td></tr><tr><td><strong>주요 글자 컬러</strong></td><td>페이지 메뉴 블록의 활성 상태, 라인, 도형, 텍스트 블록 및 입력폼 등의 텍스트에 대한 색상을 지정합니다.</td></tr><tr><td><strong>브랜드</strong> <br><strong>글자 컬러</strong></td><td>페이지 메뉴 블록의 메인/서브 메뉴 색상을 지정합니다.</td></tr><tr><td><strong>보조 글자 컬러</strong></td><td>버튼/입력폼 등의 버튼 위에 적용이 되는 텍스트 색상과 상품 목록/슬라이드에 적용되는 “정가” 표시 색상을 지정합니다.</td></tr></tbody></table>

3-2. 컬러 셋 설정을 통해 일괄적으로 컬러를 변경할 수 있습니다. \
개별 설정을 통해 잠긴 항목은 개별설정의 색상을 유지하게 되며, 잠기지 않은 항목들만 랜덤하게 변경이 됩니다.

{% hint style="info" %}
컬러셋의 색상 위치에 대한 자세한 내용은 \[[속성 패널 > 컬러](/customer_support/guide/design/editor/rnb.md#id-1-1)] 가이드를 참고 부탁드립니다.
{% endhint %}

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2F7mOwdksrHteQBiPR4wU3%2F9_%EC%BB%AC%EB%9F%AC%20%EC%85%8B%20%EC%84%A4%EC%A0%95.png?alt=media&amp;token=e7fab6d4-268d-4277-a096-df16f089195a" alt=""><figcaption></figcaption></figure>

<table data-header-hidden><thead><tr><th width="135">버리는</th><th>항목</th></tr></thead><tbody><tr><td>항목</td><td>설명</td></tr><tr><td><strong>다양성</strong></td><td>색상 조합의 다양성을 의미합니다.<br>높을수록 더 많은 색상 게열과 색상을 사용합니다.</td></tr><tr><td><strong>창의성</strong></td><td>색상 조합의 창의성을 의미합니다.<br>높을수록 색상간 대비 등이 커지고 과감해집니다.</td></tr></tbody></table>

## 4. 폰트 선택하기

4-1. 각각의 폰트를 개별적으로 선택합니다.\
컬러가 변경 됨에 따라 미리보기를 통해 변경 된 항목의 색상이 반영 됩니다.

{% hint style="info" %}
폰트에 대한 자세한 내용은 \[[속성 패널 > 폰트](/customer_support/guide/design/editor/rnb.md#id-1-2)] 가이드를 참고 부탁드립니다.
{% endhint %}

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FVLNsUyiNPWkRICGHJJNe%2F10_%ED%8F%B0%ED%8A%B8%20%EC%84%A0%ED%83%9D.png?alt=media&amp;token=568d626b-7e77-491f-a71c-fc815de58a7b" alt=""><figcaption></figcaption></figure>

<table data-header-hidden><thead><tr><th width="180">버리는 항목</th><th></th></tr></thead><tbody><tr><td>항목</td><td>설명</td></tr><tr><td><strong>고정 아이콘</strong></td><td>해당 설정만을 잠급니다.<br>잠긴 설정은 아래의 세트 선택과 무관하게 유지가 됩니다.</td></tr><tr><td><strong>랜덤 화살표</strong></td><td>해당 설정만을 재생성합니다.</td></tr><tr><td><strong>큰 제목글</strong></td><td>H1 텍스트 블록에 적용되는 폰트 스타일입니다.</td></tr><tr><td><strong>중간 제목글</strong></td><td>H2 텍스트 블록에 적용되는 폰트 스타일입니다.</td></tr><tr><td><strong>보통 제목글</strong></td><td>H3 텍스트 블록에 적용되는 폰트 스타일입니다.</td></tr><tr><td><strong>작은 제목글</strong></td><td>H4 텍스트 블록에 적용되는 폰트 스타일입니다.</td></tr><tr><td><strong>본문글</strong></td><td>body 텍스트 블록 및 사이트 대부분의 글자에 적용되는 폰트 스타일입니다.</td></tr><tr><td><strong>작은글/설명글</strong></td><td>small 텍스트 블록 및 설명글, 안내글 등에 적용되는 폰트 스타일입니다.</td></tr></tbody></table>

3-2. 폰트 셋 설정을 통해 일괄적으로 폰트를 변경할 수 있습니다. \
개별 설정을 통해 잠긴 항목은 개별설정의 폰트를 유지하게 되며, 잠기지 않은 항목들만 랜덤하게 변경이 됩니다.

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FNRHsWWRr7wN0mRPVGyz8%2F11_%ED%8F%B0%ED%8A%B8%20%EC%85%8B%20%EC%84%A4%EC%A0%95.png?alt=media&amp;token=bd8ff496-0147-4e73-b397-509f927eb4ec" alt=""><figcaption></figcaption></figure>

<table data-header-hidden><thead><tr><th width="141">버리는</th><th>항목</th></tr></thead><tbody><tr><td>항목</td><td>설명</td></tr><tr><td><strong>폰트 갯수</strong></td><td>폰트 셋을 통해 보여지는 폰트의 갯수를 설정합니다.</td></tr><tr><td><strong>범용성</strong></td><td>글꼴 조합의 범용성을 의미합니다. 높을수록 고딕체에 가까워집니다.</td></tr><tr><td><strong>친근성</strong></td><td>글꼴 조합의 친근성을 의미합니다. 높을수록 필기체에 가까워집니다.</td></tr></tbody></table>

## 5. 설정완료

모든 설정은 마친 후 오른쪽 아래 \[**설정 완료**]를 클릭합니다.

앞서 설정한 내용을 바탕으로 에디터로 이동이 되며, 에디터 비율은 50%로 생성이 됩니다.\
상단 메뉴바의 비율 조정을 통해 에디터 비율을 조정하실 수 있으며, 페이지 추가 및 섹션과 블록을 활용한 추가 디자인을 할 수 있습니다.

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2Fl50yBb5ATqoy13ZMR00T%2F12_%EC%84%A4%EC%A0%95%20%EC%99%84%EB%A3%8C.png?alt=media&amp;token=3014457f-c255-4fd3-b6c5-c0357fcc89a6" alt=""><figcaption></figcaption></figure>

### 5-1. 회원 사이트 소유하기

회원의 경우 큐샵 로그인 후 사이트를 생성하기때문에, 생성 된 사이트는 [마이사이트](/customer_support/qshop/get_started/setup.md#id-4)를 통해 확인이 가능합니다. \
만약 로그인을 하지 않은 상태에서 사이트를 생성하셨다면 \[**게시하기**]를 클릭하신 후 큐샵 로그인을 하게되면 소유를 하실 수 있습니다.

### 5-2. 비회원 사이트 소유하기

비회원 사용자의 경우 디자인 후 \[**게시하기**]를 클릭하면 아래와 같은 알림이 나타나게 됩니다.\
\[**확인**]버튼을 클릭하여 회원가입 후 사이트를 소유하게 되며, 생성 된 사이트는 마이 사이트를 통해 확인이 가능합니다.

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FuwxRXW6v1ac9QG7QrQEO%2F13_%EB%B9%84%ED%9A%8C%EC%9B%90%20%EA%B2%8C%EC%8B%9C.png?alt=media&amp;token=1d60eca5-d671-481d-b29b-3b3b357cc72d" alt=""><figcaption></figcaption></figure>