룩북 페이지 구성하기
룩북이란?
'룩북’이란 내 상점에서 판매, 전시하는 상품을 이미지나 동영상으로 재구성한 포트폴리오 페이지를 말합니다. 일반적으로 ‘룩북’은 의류를 대상으로 제작되는 콘텐츠지만, 이 외에도 내 브랜드의 가치나 방향성을 전달할 목적으로 여러 상품에 응용해 볼 수 있습니다.
식스샵에서는 대표적으로 1️⃣ 한 페이지로 구성하기, 2️⃣ 여러 페이지로 구성하기, 3️⃣블로그 섹션으로 구성하기로 룩북을 구성해 볼 수 있습니다. 사이트에 디자인을 어떻게 적용되는지 미리 볼 수 있는 아래 참고 링크를 확인해 주세요.
룩북을 구성할 썸네일 이미지는 잘림이 없도록 같은 비율로 제작을 권장해요.
잠깐! 룩북 콘텐츠가 추가될 ‘페이지’를 먼저 생성해 주세요. [디자인 편집 > 좌측 하단 메뉴(≡)]를 클릭 후 상단 머리글 메뉴 오른쪽 [ + ] 버튼을 클릭하여 페이지를 추가할 수 있어요.
1. 한 페이지로 구성하기
한 페이지로만 깔끔하게 이미지를 보여 주는 방법이에요.
1-1. 갤러리 섹션으로 룩북 제작하기
갤러리 섹션과 사용자 편집 섹션을 조합하여 심플하고 모던한 룩북으로 연출해 볼 수 있어요.
[디자인 편집 > 좌측 하단 메뉴(≡)]에서 룩북을 추가할 페이지 하단의 [+ 섹션 추가하기] 버튼을 클릭하여 ‘갤러리 섹션’을 추가해 주세요.
1-1-1. 슬라이드
추가된 갤러리 섹션을 더블 클릭 후 왼쪽 패널이 활성화되면 '내용' 탭 하단의 [+ 이미지] 버튼을 선택하여 첨부할 이미지 파일을 업로드해 주세요.
'디자인' 탭에서 종류를 슬라이드로 설정 후 한 번에 노출되길 원하는 이미지 개수로 열을 설정해 주세요.
가장 메인에 보일 이미지는 바둑판 배열로 전체 이미지를 작게 배치하여 생성 후 업로드 해주면 단조롭지 않게 구성할 수 있어요.
1-1-2. 비대칭
추가된 갤러리 섹션을 더블 클릭 시 왼쪽 패널이 활성화되면 '내용' 탭 하단의 [+ 이미지] 버튼을 선택하여 첨부할 이미지 파일을 업로드해 주세요.
원하는 콘셉트에 맞게 썸네일 테두리 모양을 선택하여 변경해볼 수 있어요.
1-2. 사용자 편집 섹션으로 룩북 제작하기
추가된 이미지 요소에 링크를 연결하여 페이지 이동이 가능한 룩북으로 연출해 볼 수 있어요.
[디자인 편집 > 좌측 하단 메뉴(≡)]에서 룩북을 추가할 페이지에서하단의 [+ 섹션 추가하기] 버튼을 클릭하여 ‘사용자 편집 섹션’을 추가해 주세요.
1-2-1. 이미지
사용자 편집 섹션을 더블 클릭 후 왼쪽 하단의 [+ 요소 추가하기] 버튼을 클릭하여 ‘이미지’를 추가해 주세요.
사용자 편집 섹션을 더블 클릭 시 왼쪽 패널이 활성화되며, 단 개수 설정을 변경할 수 있어요.
추가된 이미지 요소를 더블 클릭 시 왼쪽 패널이 활성화되며, '디자인' 탭에서 비율을 변경할 수 있어요.
하나의 섹션에 최대 4칸까지 단을 나눠서 이미지 비율을 각각 설정할 수 있기에 여러 형태와 사이즈로 구성이 가능해요.
1-2-2. 슬라이드
사용자 편집 섹션 추가 후 왼쪽 하단의 [+ 요소 추가하기] 버튼을 클릭하여 ‘슬라이드’를 추가해 주세요.
슬라이드 요소를 더블 클릭 시 왼쪽 패널이 활성화되며, ‘이미지’ 탭 하단 [+] 버튼을 선택하여 이미지 업로드 후 이미지 위에 마우스를 올리면 오른쪽 상단의 ‘톱니바퀴’ 아이콘을 클릭하여 제목 및 설명 추가와 링크를 설정할 수 있어요.
사용자 편집 섹션을 더블 클릭 시 왼쪽 패널이 활성화되면 단 개수를 설정할 수 있어요.
추가된 슬라이드 요소를 더블 클릭 시 왼쪽 패널이 활성화되면 '디자인' 탭에서 비율을 변경할 수 있어요.
하나의 섹션에 최대 4칸까지 단을 나눠서 이미지 비율을 각각 설정하여 여러 형태와 크기로 구성할 수 있어요.
2. 여러 페이지로 구성하기
1) 여러 페이지를 준비하여, 룩북 이미지 클릭 시 다른 페이지로 이동하도록 할 수 있어요.
2) 페이지 내부 콘텐츠 구성에 어려움이 있다면, 위 1번 과정을 참고해 주시면 좋아요.
페이지가 생성되어 있어야 링크를 연결할 수 있어요. 갤러리 섹션 또는 사용자 편집 섹션을 이용하여 이미지를 추가해 주세요.
해당 페이지에서는 갤러리 섹션을 이용하여 진행했어요. [디자인 편집 > 좌측 하단 메뉴(≡)]에서 룩북을 추가할 페이지 하단의 [+ 섹션 추가하기] 버튼을 클릭하여 ‘갤러리 섹션’을 추가해 주세요.
[갤러리 섹션 > 더블 클릭] 후 왼쪽 패널의 ‘이미지’ 탭 하단 [+] 버튼을 클릭하여 이미지를 추가해 주세요. 추가 된 이미지 위에 마우스를 올리면 오른쪽 상단의 ‘톱니바퀴’ 아이콘을 클릭하여 제목 및 설명과 버튼, 링크를 추가할 수 있어요.
이미지 클릭 시 연결될 페이지 링크를 복사하여 각각의 이미지에 주소를 추가해 주세요.
1번 이미지에서 원하는 메뉴를 클릭 시 2번 이미지와 같이페이지 전환되어 보이게 됩니다.
3. 블로그 섹션으로 룩북 제작하기
링크 활용 방법이 다소 어렵게 느껴진다면, 블로그를 활용하여 룩북으로 연출해 볼 수 있어요.
블로그 섹션으로 룩북 생성을 위해서는 블로그 메뉴에 게시글이 등록되어 있어야 합니다. 이 과정을 마치지 않았다면 블로그 게시글 작성을 먼저 진행해 주세요.
3-1. 블로그 섹션 추가하기
[디자인 편집 > 좌측 하단 메뉴(≡)]에서 룩북을 추가할 페이지 하단의 [+ 섹션 추가하기] 버튼을 클릭하여 ‘블로그 섹션’을 추가해 주세요.
추가된 블로그 섹션을 더블 클릭 하여, 왼쪽 패널이 활성화되면 노출할 블로그 카테고리를 선택해 주세요.
3-2. 블로그 섹션 디자인 설정하기
3-2-1. 나열
블로그 섹션이 선택된 상태로 왼쪽 패널의 '디자인' 탭을 클릭 후 종류를 나열로 변경해 주세요.
블로그 섹션의 종류를 나열로 선택 시 작성된 게시글 내용 전체가 페이지에 나열되어 보이게 됩니다.
3-2-2. 격자
블로그 섹션이 선택된 상태로 왼쪽 패널의 '디자인' 탭을 클릭 후 종류를 격자로 변경해 주세요.
블로그 섹션 종류를 격자로 변경 시 블로그 메뉴에 등록된 게시글의 썸네일 이미지가 격자로 보이게 됩니다.
Last updated
