# 원페이지 구성하기

## 원페이지란?

여러 페이지를 하나로 합쳐 한 화면에서 스크롤을 이용하여 위아래로 이동하며 콘텐츠를 살펴볼 수 있습니다. 회사 소개 또는 프로모션 페이지 등에 주로 활용할 수 있는 메뉴예요.

{% embed url="<https://www.sixshop.com/sixshop_onepage/onepage>" %}

<figure><img src="https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Ld5OD2VFGhsB7IF4FTG%2Fuploads%2FM5tRX9kHD4Qn20rD7XuK%2Fimage.png?alt=media&#x26;token=beddf7e4-b5e7-4942-a370-7b0a1eb75fdf" alt=""><figcaption></figcaption></figure>

## 1. 기본 요소 추가하기

> **원페이지는 여러 페이지를 하나의 메뉴 안에 포함된 형태로 노출하는 기능입니다.**\
> 실제 상점에 노출될 상위 메뉴는 \[원페이지] 유형으로, 하위에 묶일 페이지들은 \[페이지] 유형으로 추가해 주셔야 합니다.

<figure><img src="https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Ld5OD2VFGhsB7IF4FTG%2Fuploads%2Fbb87QqmmettwpRinxlpq%2FGroup%20239256.png?alt=media&#x26;token=b2ededba-0705-4448-b90a-af091ddb006b" alt=""><figcaption><p>예들 들어, 위 이미지에서 ONEPAGE라는 메뉴를 클릭하면 메뉴 ①, 메뉴 ②...의 콘텐츠가 한 페이지에 노출됩니다.</p></figcaption></figure>

### 1-1. 원페이지(상위 메뉴) 추가하기

✅ 먼저 사이트의 메뉴가 될 원페이지(상위 메뉴)를 추가해 주세요.

\[디자인 편집 > 좌측 하단 메뉴(≡)]를 클릭하면 나타나는 패널의 오른쪽 상단 ① \[+ (메뉴 추가)] 버튼 선택 후 ② 종류를 원페이지로 선택해 주시면 됩니다.

<figure><img src="https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Ld5OD2VFGhsB7IF4FTG%2Fuploads%2Fg1XS6bxNTXtkvKIJadKP%2Fimage.png?alt=media&#x26;token=52f3b326-3edf-474f-a788-3955ff521bd3" alt=""><figcaption></figcaption></figure>

### 1-2. 하위 페이지 추가하기

✅ 원페이지가 생성되었다면 하위에 묶일 페이지들을 구성할 차례입니다.

원페이지 생성 후 ① \[+ 하위 페이지 추가하기] 버튼을 클릭하여 패널이 활성화되면, ② 원하는 페이지 템플릿을 선택해 주세요.

<figure><img src="https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Ld5OD2VFGhsB7IF4FTG%2Fuploads%2FANOmJYJXI5jeXRjDWegM%2Fimage.png?alt=media&#x26;token=4c41ef30-a4f3-4fd7-ba65-15308e610fd3" alt=""><figcaption></figcaption></figure>

페이지 템플릿 선택 후 ③ 메뉴 이름, 하위 주소를 입력 ④ 추가하기 버튼을 클릭하면, ⑤ 하위 메뉴가 생성된 것을 확인해 보실 수 있어요.

<figure><img src="https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Ld5OD2VFGhsB7IF4FTG%2Fuploads%2FvtH89JglfQPka93bG7hh%2Fimage.png?alt=media&#x26;token=89392585-3817-40e9-b34d-5e435c2f9878" alt=""><figcaption></figcaption></figure>

✅ 원페이지의 하위 메뉴를 여러 페이지로 운영하려면, 원페이지(상위 메뉴)가 선택된 상태로 오른쪽 상단 \[+ (메뉴 추가)] 버튼을 선택하여 하위 페이지를 추가할 수 있습니다.

작업 후, 생성된 새로운 하위 메뉴를 드래그하여 원페이지 하단으로 옮겨 주세요. 모든 하위 메뉴가 같은 선상에 배치되었다면, 원페이지로 정상적으로 묶인 상태입니다.

<figure><img src="https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Ld5OD2VFGhsB7IF4FTG%2Fuploads%2FxgRZyBSOXHg6682LLz8H%2FGroup%201899.png?alt=media&#x26;token=c5dff6a7-e03c-4abe-b4fc-42c7ae2230a5" alt=""><figcaption></figcaption></figure>

### 1-3. 원페이지 콘텐츠 구성하기

원페이지와 하위 페이지가 모두 추가되었다면 원페이지의 기본 설정이 끝났습니다.\
이제 각 하위 페이지에서 왼쪽 하단 \[+ 섹션 추가하기]를 통해 원페이지를 구성할 콘텐츠를 채워 주세요.

{% hint style="info" %}
다양한 섹션 활용 방법은 [콘텐츠 구성 요소](https://help.sixshop.com/learn-sixshop/store-design/sections-and-elements) 안내서에서 확인할 수 있습니다.
{% endhint %}

<figure><img src="https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Ld5OD2VFGhsB7IF4FTG%2Fuploads%2FULYbv9raj1n0ymWuUZJ6%2Fimage.png?alt=media&#x26;token=69bac9ad-b5fb-44d3-b709-1b37bd9194fa" alt=""><figcaption></figcaption></figure>

## 2. 디자인 설정 방법

> **원페이지의 완성도를 높이는 디자인 기능 설정입니다.**\
> 고객이 좀 더 편리하게 페이지를 살펴볼 수 있도록 네비게이션, 하위 메뉴 펼치기 기능을 활용해 보세요.

### 2-1. 내비게이션 설정

원페이지 설정에서 내비게이션 설정이 가능하며, '없음' 상태에서는 네비게이션 없이, 고객이 화면 스크롤을 통해서만 페이지를 탐색하게 됩니다.

<figure><img src="https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Ld5OD2VFGhsB7IF4FTG%2Fuploads%2FeIRCo7YQ79gGios9k6bH%2Fimage.png?alt=media&#x26;token=57befc3d-11c6-428d-ac50-8086c91514b3" alt=""><figcaption></figcaption></figure>

'점' 상태에서는 화면 오른쪽 중앙에 메뉴 구분용 점이 존재합니다. 점을 클릭한 고객은 특정 위치로 빠르게 이동합니다.

<figure><img src="https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Ld5OD2VFGhsB7IF4FTG%2Fuploads%2FxoYKflUrh1ZjsHNViSX5%2Fimage.png?alt=media&#x26;token=6be1316b-4e67-49eb-9952-82ecf38ef3ed" alt=""><figcaption></figcaption></figure>

'점+글자' 상태에서는 마우스 오버 시 메뉴명이 함께 노출되어 고객에게 페이지 정보를 더 정확히 안내할 수 있어요.

<figure><img src="https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Ld5OD2VFGhsB7IF4FTG%2Fuploads%2FAhc9ECdRtDhmgXTO973s%2Fimage.png?alt=media&#x26;token=968075d7-c803-487a-b9df-bacf772bc069" alt=""><figcaption></figcaption></figure>

### 2-2. 하위 메뉴 펼치기

각 페이지의 메뉴명을 상단에 구분하여 노출하는 방식입니다. 각 메뉴명을 클릭 시 해당 영역으로 빠르게 이동할 수 있게 됩니다.

<figure><img src="https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Ld5OD2VFGhsB7IF4FTG%2Fuploads%2FsngcdhDMhhKCU4wSnrgb%2Fimage.png?alt=media&#x26;token=6c6ca995-7a57-4c1a-a9d7-5a2ea6c5b91d" alt=""><figcaption></figcaption></figure>

{% hint style="danger" %}
참고 사항

1. 상위 메뉴인 원페이지(ONEPAGE)는 하위 메뉴의 내용을 묶어서 보여 주는 역할만 합니다. 원페이지를 구성하는 콘텐츠를 수정하려면 각각의 하위 메뉴(메뉴 ①, 메뉴 ②...)에서 작업해 주셔야 합니다.
2. 브라우저 화면 비율이 100% 이하인 경우 내비게이션과 하위 메뉴 펼치기 기능이 정상 작동하지 않을 수 있어요.
   {% endhint %}