> For the complete documentation index, see [llms.txt](https://help.sixshop.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.sixshop.com/learn-sixshop/store-design/develop/lookbook.md).

# 룩북 페이지 구성하기

## 룩북이란?

<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>

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