# 룩북 페이지 구성하기

## 룩북이란?

<figure><img src="/files/k9bbOBk6G2JehUNLxHkN" alt=""><figcaption></figcaption></figure>

'룩북’이란 내 상점에서 판매, 전시하는 상품을 이미지나 동영상으로 재구성한 포트폴리오 페이지를 말합니다. 일반적으로 ‘룩북’은 의류를 대상으로 제작되는 콘텐츠지만, 이 외에도 내 브랜드의 가치나 방향성을 전달할 목적으로 여러 상품에 응용해 볼 수 있습니다.

식스샵에서는 대표적으로 1️⃣ 한 페이지로 구성하기, 2️⃣ 여러 페이지로 구성하기, 3️⃣블로그 섹션으로 구성하기로 룩북을 구성해 볼 수 있습니다.\
사이트에 디자인을 어떻게 적용되는지 미리 볼 수 있는 아래 [참고 링크](https://www.sixshop.com/sixshop_lookbook/choice)를 확인해 주세요.

{% embed url="<https://mysix.shop/3ZieuAD>" %}

> 룩북을 구성할 썸네일 이미지는 잘림이 없도록 같은 비율로 제작을 권장해요.

{% hint style="danger" %}
**잠깐! 룩북 콘텐츠가 추가될 ‘페이지’를 먼저 생성해 주세요.**\
\[디자인 편집 > 좌측 하단 메뉴(≡)]를 클릭 후 상단 머리글 메뉴 오른쪽 \[ + ] 버튼을 클릭하여 페이지를 추가할 수 있어요.
{% endhint %}

## 1. 한 페이지로 구성하기

> 한 페이지로만 깔끔하게 이미지를 보여 주는 방법이에요.&#x20;

### 1-1. 갤러리 섹션으로 룩북 제작하기

갤러리 섹션과 사용자 편집 섹션을 조합하여 심플하고 모던한 룩북으로 연출해 볼 수 있어요.

<figure><img src="/files/jmg4HcfT40SdorvLrnTg" alt=""><figcaption></figcaption></figure>

\[디자인 편집 > 좌측 하단 메뉴(≡)]에서 룩북을 추가할 페이지 하단의 \[+ 섹션 추가하기] 버튼을 클릭하여 ‘갤러리 섹션’을 추가해 주세요.

#### 1-1-1. 슬라이드

<figure><img src="/files/iiO2684Vies4hNnkwfo9" alt=""><figcaption></figcaption></figure>

추가된 갤러리 섹션을 더블 클릭 후 왼쪽 패널이 활성화되면 '내용' 탭 하단의 \[+ 이미지] 버튼을 선택하여 첨부할 이미지 파일을 업로드해 주세요.

<figure><img src="/files/QM9OAfDdHmD1MgngfeRC" alt=""><figcaption></figcaption></figure>

'디자인' 탭에서 종류를 슬라이드로 설정 후 한 번에 노출되길 원하는 이미지 개수로 열을 설정해 주세요.

<figure><img src="/files/87uwTadukEZClxgb6N7T" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
가장 메인에 보일 이미지는 바둑판 배열로 전체 이미지를 작게 배치하여 생성 후 업로드 해주면 단조롭지 않게 구성할 수 있어요.
{% endhint %}

#### 1-1-2. 비대칭

<figure><img src="/files/jcDoIsYl2hV9iWZiGkD9" alt=""><figcaption></figcaption></figure>

추가된 갤러리 섹션을 더블 클릭 시 왼쪽 패널이 활성화되면 '내용' 탭 하단의 \[+ 이미지] 버튼을 선택하여 첨부할 이미지 파일을 업로드해 주세요.

<figure><img src="/files/t7POxSyeFqIqnfC6iF7i" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
원하는 콘셉트에 맞게 썸네일 테두리 모양을 선택하여 변경해볼 수 있어요.
{% endhint %}

### 1-2. 사용자 편집 섹션으로 룩북 제작하기

추가된 이미지 요소에 링크를 연결하여 페이지 이동이 가능한 룩북으로 연출해 볼 수 있어요.

<figure><img src="/files/J1E1WrZl92uJJyrEIBuE" alt=""><figcaption></figcaption></figure>

\[디자인 편집 > 좌측 하단 메뉴(≡)]에서 룩북을 추가할 페이지에서하단의 \[+ 섹션 추가하기] 버튼을 클릭하여 ‘사용자 편집 섹션’을 추가해 주세요.

#### 1-2-1. 이미지

<figure><img src="/files/M76KzZ9VXq79gBDVSXWH" alt=""><figcaption></figcaption></figure>

사용자 편집 섹션을 더블 클릭 후 왼쪽 하단의 \[+ 요소 추가하기] 버튼을 클릭하여 ‘이미지’를 추가해 주세요.

<figure><img src="/files/VbGdzUwH9uRLrizFCUg8" alt=""><figcaption></figcaption></figure>

사용자 편집 섹션을 더블 클릭 시 왼쪽 패널이 활성화되며, 단 개수 설정을 변경할 수 있어요.

<figure><img src="/files/YjcbzBSUSBaw0n1jTiXW" alt=""><figcaption></figcaption></figure>

추가된 이미지 요소를 더블 클릭 시 왼쪽 패널이 활성화되며, '디자인' 탭에서 비율을 변경할 수 있어요.

<figure><img src="/files/CGr5vNO8TXVyCp2QcjnK" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
하나의 섹션에 최대 4칸까지 단을 나눠서 이미지 비율을 각각 설정할 수 있기에 여러 형태와 사이즈로 구성이 가능해요.
{% endhint %}

#### 1-2-2. 슬라이드

<figure><img src="/files/BQkvfReRLeIitMjq7sR3" alt=""><figcaption></figcaption></figure>

사용자 편집 섹션 추가 후 왼쪽 하단의 \[+ 요소 추가하기] 버튼을 클릭하여 ‘슬라이드’를 추가해 주세요.

<figure><img src="/files/E0CWje4jUc0aDe9uTfu0" alt=""><figcaption></figcaption></figure>

슬라이드 요소를 더블 클릭 시 왼쪽 패널이 활성화되며, ‘이미지’ 탭 하단 \[+] 버튼을 선택하여 이미지 업로드 후 이미지 위에 마우스를 올리면 오른쪽 상단의 ‘톱니바퀴’ 아이콘을 클릭하여 제목 및 설명 추가와 링크를 설정할 수 있어요.

<figure><img src="/files/aSUfrZ8O1Poc9BTZz96T" alt=""><figcaption></figcaption></figure>

사용자 편집 섹션을 더블 클릭 시 왼쪽 패널이 활성화되면 단 개수를 설정할 수 있어요.

<figure><img src="/files/V4oDGQ6qzK8HdG10iI44" alt=""><figcaption></figcaption></figure>

추가된 슬라이드 요소를 더블 클릭 시 왼쪽 패널이 활성화되면 '디자인' 탭에서 비율을 변경할 수 있어요.

<figure><img src="/files/En9fwH6VsJHulanRlGWU" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
하나의 섹션에 최대 4칸까지 단을 나눠서 이미지 비율을 각각 설정하여 여러 형태와 크기로 구성할 수 있어요.
{% endhint %}

## 2. 여러 페이지로 구성하기

> 1\) 여러 페이지를 준비하여, 룩북 이미지 클릭 시 다른 페이지로 이동하도록 할 수 있어요.
>
> 2\) 페이지 내부 콘텐츠 구성에 어려움이 있다면, 위 [1번 과정](https://help.sixshop.com/learn-sixshop/store-design/develop/lookbook#id-1)을 참고해 주시면 좋아요.

{% hint style="danger" %}
페이지가 생성되어 있어야 링크를 연결할 수 있어요. 갤러리 섹션 또는 사용자 편집 섹션을 이용하여 이미지를 추가해 주세요.
{% endhint %}

<figure><img src="/files/oDwYFRgpog3FZYD0giF6" alt=""><figcaption></figcaption></figure>

해당 페이지에서는 갤러리 섹션을 이용하여 진행했어요.\
\[디자인 편집 > 좌측 하단 메뉴(≡)]에서 룩북을 추가할 페이지 하단의 \[+ 섹션 추가하기] 버튼을 클릭하여 ‘갤러리 섹션’을 추가해 주세요.

<figure><img src="/files/mlAr5BzhFHzgnDVi26pE" alt=""><figcaption></figcaption></figure>

\[갤러리 섹션 > 더블 클릭] 후 왼쪽 패널의 ‘이미지’ 탭 하단 \[+] 버튼을 클릭하여 이미지를 추가해 주세요. 추가 된 이미지 위에 마우스를 올리면 오른쪽 상단의 ‘톱니바퀴’ 아이콘을 클릭하여 제목 및 설명과 버튼, 링크를 추가할 수 있어요.

<figure><img src="/files/aXSYYxWzPFFrmrwg9xak" alt=""><figcaption></figcaption></figure>

이미지 클릭 시 연결될 페이지 링크를 복사하여 각각의 이미지에 주소를 추가해 주세요.

<figure><img src="/files/9EhTUs15ihI5sx0u2cRm" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/KsoFQztjWZ6GvdbNDTZn" alt=""><figcaption></figcaption></figure>

1번 이미지에서 원하는 메뉴를 클릭 시 2번 이미지와 같이페이지 전환되어 보이게 됩니다.

## 3. 블로그 섹션으로 룩북 제작하기

> 링크 활용 방법이 다소 어렵게 느껴진다면, 블로그를 활용하여 룩북으로 연출해 볼 수 있어요.

{% hint style="danger" %}
블로그 섹션으로 룩북 생성을 위해서는 블로그 메뉴에 게시글이 등록되어 있어야 합니다.\
이 과정을 마치지 않았다면 [블로그 게시글 작성](https://help.sixshop.com/learn-sixshop/store-manager/blog#id-2)을 먼저 진행해 주세요.
{% endhint %}

### 3-1. 블로그 섹션 추가하기

<figure><img src="/files/7dIvoIFHDIajpA7KnbXG" alt=""><figcaption></figcaption></figure>

\[디자인 편집 > 좌측 하단 메뉴(≡)]에서 룩북을 추가할 페이지 하단의 \[+ 섹션 추가하기] 버튼을 클릭하여 ‘블로그 섹션’을 추가해 주세요.

<figure><img src="/files/cpLZvGcixJ6dCKyrjwRI" alt=""><figcaption></figcaption></figure>

추가된 블로그 섹션을 더블 클릭 하여, 왼쪽 패널이 활성화되면 노출할 블로그 카테고리를 선택해 주세요.

### 3-2. 블로그 섹션 디자인 설정하기

#### 3-2-1. 나열

<figure><img src="/files/HITj9sY4voNolXBEfd19" alt=""><figcaption></figcaption></figure>

블로그 섹션이 선택된 상태로 왼쪽 패널의 '디자인' 탭을 클릭 후 종류를 나열로 변경해 주세요.

<figure><img src="/files/al9G087NkfVWBWMS9YFE" alt=""><figcaption></figcaption></figure>

블로그 섹션의 종류를 나열로 선택 시 작성된 게시글 내용 전체가 페이지에 나열되어 보이게 됩니다.

#### 3-2-2. 격자

<figure><img src="/files/XMkD4zkxkyLP3gksmjzu" alt=""><figcaption></figcaption></figure>

블로그 섹션이 선택된 상태로 왼쪽 패널의 '디자인' 탭을 클릭 후 종류를 격자로 변경해 주세요.

<figure><img src="/files/aQpRkJynBRxFWkJwimYB" alt=""><figcaption></figcaption></figure>

블로그 섹션 종류를 격자로 변경 시 블로그 메뉴에 등록된 게시글의 썸네일 이미지가 격자로 보이게 됩니다.


---

# 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://help.sixshop.com/learn-sixshop/store-design/develop/lookbook.md?ask=<question>
```

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.