> 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="https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Ld5OD2VFGhsB7IF4FTG%2Fuploads%2FamkDN0oAAgDrRZmqOsYW%2FGroup%201821.png?alt=media&amp;token=9dc040ac-d3c5-41e8-a616-2df79b64a04a" 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="https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Ld5OD2VFGhsB7IF4FTG%2Fuploads%2FfZ7Wd6x7tbQOFYRUAsax%2FGroup%201801%20(2).png?alt=media&amp;token=18df9954-a4d8-44a6-82ef-4a5499fba0f5" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Ld5OD2VFGhsB7IF4FTG%2Fuploads%2FZDQAoksCCsCmYadTzND9%2FGroup%201848.png?alt=media&amp;token=63dd0cfb-6e41-49c6-95c0-2443b74ca936" 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%2FNOz24Hkgj2vVqjQXT8EY%2FGroup%201807.png?alt=media&amp;token=2f98326a-eb51-41c6-a198-d107bb6d27fd" 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%2FOvV969HPYr2ISmCRwTTS%2FGroup%201804.png?alt=media&amp;token=71c5bc80-e1f5-4ce2-8a9a-074f43018f2b" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Ld5OD2VFGhsB7IF4FTG%2Fuploads%2Fkd95jzuBKzJwSkQQT6WV%2FGroup%201849%20(1).png?alt=media&amp;token=d77478a2-b70b-46ed-ae20-2ea7d3399019" 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%2FDnmKXzr0i0ADy9oz8jCt%2FGroup%201865%20(1).png?alt=media&amp;token=07a1be6f-d8ae-4b6c-8348-23d279e382cf" alt=""><figcaption></figcaption></figure>

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

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

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

<figure><img src="https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Ld5OD2VFGhsB7IF4FTG%2Fuploads%2FPJhVMwL5PEITWMY9HrIX%2FGroup%201801%20(2).png?alt=media&amp;token=5b9aef30-7c3b-4981-843e-cae4fc5aaf81" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Ld5OD2VFGhsB7IF4FTG%2Fuploads%2Fl0bC7KgGEARM1keB6QPa%2FGroup%201811.png?alt=media&amp;token=e2685db2-12a6-4218-8d04-b71adf2cd69c" 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%2F4GicUnAbTcjKgk96YykJ%2FGroup%201836.png?alt=media&amp;token=d9fb03c7-38db-41ad-8a8b-82f203b199c3" 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%2FajlF0B2vRN0VWFwUndWf%2FGroup%201837.png?alt=media&amp;token=064503b4-a1af-483d-b1f7-87e9e4c3f051" 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%2FZstiQDa0Gn1uHGH9XIKf%2FGroup%201842%20(2).png?alt=media&amp;token=c73fae5d-dc30-4611-9760-6f7478c4154c" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Ld5OD2VFGhsB7IF4FTG%2Fuploads%2FP0wl8bULFeSb7dDV22kf%2FGroup%201812.png?alt=media&amp;token=2332c5c4-0250-453f-ba7f-f7bad0161e1a" 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%2FhLkzz1MOtDVWhcyn7Ixt%2FGroup%201838%20(1).png?alt=media&amp;token=dc892642-f328-456d-9560-92192b40f607" 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%2FJujRXXILwQjNa85F1xOb%2FGroup%201839%20(1).png?alt=media&amp;token=842f3d60-c16f-48f0-9c74-300802d7f507" 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%2FSqyLVrBOla0tJmiKnA80%2FGroup%201841%20(2).png?alt=media&amp;token=bb852b61-27ba-4dcc-a020-753bc3ed660e" 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%2FX4PnNCb9KeBIZmMDQD45%2FGroup%201843.png?alt=media&amp;token=e940c11a-c0ed-4e69-a4f0-44e5ee34f1a7" 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="https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Ld5OD2VFGhsB7IF4FTG%2Fuploads%2FTUU3nhM3LyMwGGnwwRfo%2FGroup%201847.png?alt=media&amp;token=460c88f6-b61f-4db0-bdc6-b03a5999484a" 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%2FoAW8apTzQKaRKNNtDlpq%2F%EB%A7%81%ED%81%AC%20%EA%B0%A4%EB%9F%AC%EB%A6%AC%20%EC%84%B9%EC%85%98%20(1).png?alt=media&amp;token=50ce2d0d-c9b0-472b-8c10-0c8902ab692a" 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%2Fe3NaxsUPwrXdn9USbxpu%2F%EB%A7%81%ED%81%AC%20%EA%B0%A4%EB%9F%AC%EB%A6%AC.png?alt=media&amp;token=1f19c88a-ec62-40ef-88e3-b3eecd3b587b" 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%2F8n6gPpGKSEJlsMksOnaK%2FGroup%201857.png?alt=media&amp;token=a0e75e29-6a86-4215-8a30-9a67f14a4306" 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%2FZkyMHcmCPfGIKRBNNE2X%2FGroup%201858.png?alt=media&amp;token=6ab38692-9e6d-4485-bc76-c3e03bff1d67" 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="https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Ld5OD2VFGhsB7IF4FTG%2Fuploads%2FozV6sgtcdeSTkzJpLZEm%2FGroup%201846%20(1).png?alt=media&amp;token=1e660a87-d753-4aa4-958f-824d730f5fc6" 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%2FiXdmZG2RZYArsEtyPvLO%2FGroup%201867.png?alt=media&amp;token=e6c06294-b942-4537-97e1-b6e2be8899ef" alt=""><figcaption></figcaption></figure>

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

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

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

<figure><img src="https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Ld5OD2VFGhsB7IF4FTG%2Fuploads%2FpIbOY84deEuW9t9l0QnE%2FGroup%201831.png?alt=media&amp;token=a9c6ceb4-ed77-44a6-9ad5-91fd868713ac" 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%2FYC7OhBQhQUL1ie3CQx1B%2FGroup%201828.png?alt=media&amp;token=424d8e19-0626-44ce-9b41-5fa27f14599a" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Ld5OD2VFGhsB7IF4FTG%2Fuploads%2FGfCm8RC4sPcBcF2SgK9M%2FGroup%201832%20(1).png?alt=media&amp;token=d847c597-861a-4332-9d72-771a0d516966" 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%2Fu5tve6obwHMaaOLyzwjp%2FGroup%201802.png?alt=media&amp;token=eea901d3-f89d-4275-ab40-84453ec1dd44" alt=""><figcaption></figcaption></figure>

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