기계 번역으로 제공되는 번역입니다. 제공된 번역과 원본 영어의 내용이 상충하는 경우에는 영어 버전이 우선합니다.

# 디자인 및 레이아웃
<a name="storefronts-design-layout"></a>

레이아웃 유형을 선택하고 매장의 디자인, 브랜딩 및 콘텐츠 섹션을 사용자 지정합니다.

## 레이아웃 유형
<a name="layout-types"></a>

스토어프론트를 생성할 때 구조, 모양 및 배포 모델을 결정하는 레이아웃 유형을 선택합니다. 각 레이아웃 유형은 특정 사용 사례에 맞게 설계되었습니다.

### 사용 가능한 레이아웃 유형
<a name="layout-types-available"></a>

**레이아웃 스타일**에서 다음 옵션을 사용할 수 있습니다.

#### 독립 실행형
<a name="layout-types-standalone"></a>

전용 도메인 또는 하위 도메인에 배포된 전체 페이지 스토어프론트입니다. 자체 웹 대상으로 작동하는 독립 저장소를 원하는 경우이 레이아웃을 사용합니다.

#### 임베디드
<a name="layout-types-embedded"></a>

iframe을 통해 기존 웹 페이지 내에 통합되도록 설계된 스토어프론트입니다. 이 레이아웃은 지정된 섹션에 상거래 기능을 추가하는 동시에 현재 웹 사이트 아키텍처를 유지합니다.

#### 전자 상거래
<a name="layout-types-ecommerce"></a>

쇼핑 스타일 브라우징 경험을 제공하는 제품 그리드 레이아웃입니다. 이 레이아웃에는 배너 섹션과 대용량 카탈로그에 최적화된 제품 타일이 포함되어 있습니다.

#### 캠페인
<a name="layout-types-campaign"></a>

수요 창출 및 대상 마케팅에 최적화된 랜딩 페이지 레이아웃입니다. 이 레이아웃에는 히어로 섹션, 주요 제품 하이라이트, 리소스 섹션 및 가치 제안 요소가 포함됩니다.

### 레이아웃 유형 변경
<a name="layout-types-changing"></a>

배포 전후 언제든지 레이아웃 유형을 변경할 수 있습니다. 레이아웃 유형을 변경하면 스토어프론트가 새 레이아웃과 일치하도록 재구성됩니다. 제품 선택 및 태그 구성은 보존됩니다.

1. 매장을 열고 **디자인** 탭을 선택합니다.

1. **레이아웃 스타일**에서 다른 레이아웃 옵션을 선택합니다.

1. **저장**을 선택합니다.

### 필터 패널 스타일
<a name="layout-types-filter-panel"></a>

**옵션**에서 **필터 제어는** **압축** 및 **아코디언**을 제공합니다. **제품 크기** 제어는 **스몰**, **미디엄** 및 **라지**를 제공합니다.

### 제품 타일 크기
<a name="layout-types-tile-sizes"></a>

스토어 프런트 홈 페이지에서 제품 타일의 크기를 제어할 수 있습니다.
+ **소형** - 소형 타일, 행당 더 많은 제품이 표시됩니다.
+ **중간** - 균형 타일 크기(기본값).
+ **대형** - 세부 정보가 더 잘 보이는 눈에 띄는 타일입니다.

### 관련 주제
<a name="layout-types-related"></a>
+ 스토어프론트 생성
+ [색상 및 테마 사용자 지정](#color-and-theme-customization)
+ [캠페인 레이아웃](#campaign-layout)
+ [전자 상거래 레이아웃](#ecommerce-layout)

## 캠페인 레이아웃
<a name="campaign-layout"></a>

캠페인 레이아웃은 수요 창출, 제품 출시 및 마케팅 캠페인에 최적화된 랜딩 페이지 스타일 스토어 프런트를 생성합니다. 여기에는 히어로 콘텐츠, 추천 제품, 비디오, 가치 제안 및 리소스에 대해 구성 가능한 섹션이 포함되어 있습니다.

### 캠페인 레이아웃 섹션
<a name="campaign-layout-sections"></a>

캠페인 저장소는 다음 섹션으로 구성되며, 각 섹션은 독립적으로 구성할 수 있습니다.

#### 히어로 섹션
<a name="campaign-layout-hero"></a>

방문자에게 첫인상을 제공하는 상단 배너 영역입니다.
+ **헤드라인** - 기본 메시지
+ **하위 헤드라인** - 지원 텍스트
+ **배너 URL** - 배너 이미지의 URL 업로드 또는 제공
+ **Favicon URL** - Favicon에 대한 URL 업로드 또는 제공

#### 로고
<a name="campaign-layout-logo"></a>

캠페인 레이아웃 헤더의 로고 구성입니다. 필드 세부 정보는 섹션을 참조[로고 및 홈 버튼](#logo-and-home-button)하세요.

#### 홈 버튼
<a name="campaign-layout-home-button"></a>

캠페인 레이아웃 헤더의 홈 버튼 구성입니다. 필드 세부 정보는 섹션을 참조[로고 및 홈 버튼](#logo-and-home-button)하세요.

#### 제품 섹션
<a name="campaign-layout-product"></a>

제품 섹션에는 **섹션 헤더** 필드가 있습니다. 기본값은 추천 제품입니다.

#### 비디오 및 가치 제안
<a name="campaign-layout-video"></a>

비디오 및 구조화된 메시징을 통해 주요 이점을 전달하는 선택적 섹션입니다.
+ **비디오 임베드 URL** - 비디오 임베드(YouTube, Vimeo 또는 다이렉트 URL)
+ **가치 제안** - 아이콘 또는 짧은 설명이 있는 최대 4개의 혜택 문

자세한 내용은 [비디오 및 가치 제안](#video-and-value-propositions) 단원을 참조하십시오.

#### 리소스 섹션
<a name="campaign-layout-resources"></a>

백서, 사례 연구 또는 설명서와 같은 외부 콘텐츠를 연결하는 섹션입니다. 각 리소스 카드에는 다음 필드가 있습니다.
+ **제목**
+ **설명**
+ **링크 레이블**
+ **링크 URL**

### 캠페인 레이아웃을 구성하려면
<a name="campaign-layout-configure"></a>

1. 매장을 열고 **디자인** 탭을 선택합니다.

1. 레이아웃 스타일로 **캠페인**을 선택합니다.

1. 표시되는 양식 패널을 사용하여 각 섹션을 구성합니다.
   + **히어로 섹션** 필드 작성
   + **제품 섹션** 구성
   + (선택 사항) **비디오 임베드 URL** 및 **값 제안** 항목 추가
   + (선택 사항) **리소스** 추가

1. **저장**을 선택합니다.

1. 배포하기 전에 스토어프론트를 미리 보고 레이아웃을 확인합니다.

### 관련 주제
<a name="campaign-layout-related"></a>
+ [레이아웃 유형](#layout-types)
+ [비디오 및 가치 제안](#video-and-value-propositions)
+ [색상 및 테마 사용자 지정](#color-and-theme-customization)

## 전자 상거래 레이아웃
<a name="ecommerce-layout"></a>

전자 상거래 레이아웃은 구매자가 여러 제품을 비교하고 평가하는 대형 카탈로그가 있는 매장에 최적화된 배너 섹션을 통해 제품 그리드 브라우징 환경을 제공합니다.

### 전자 상거래 레이아웃 기능
<a name="ecommerce-layout-features"></a>
+ **배너 섹션** - 브랜딩 및 메시징이 포함된 구성 가능한 헤더 영역
+ **제품 그리드** - 필터링 및 정렬이 포함된 제품 타일의 응답형 그리드
+ **필터 사이드바** - 빠른 탐색을 위한 범주 및 태그 기반 필터링
+ **검색** - 제품 제목 및 설명 전반의 전체 텍스트 검색

### 전자 상거래 레이아웃을 구성하려면
<a name="ecommerce-layout-configure"></a>

1. 매장을 열고 **디자인** 탭을 선택합니다.

1. 레이아웃 스타일로 **전자 상거래**를 선택합니다.

1. **배너 섹션을** 구성합니다.
   + **메인 헤드라인** - 배너의 기본 제목 텍스트
   + **환영 메시지** - 헤드라인 아래에 표시되는 지원 텍스트
   + **헤드라인 오버레이 크기(%)** - 헤드라인이 차지하는 배너 너비의 백분율
   + **헤드라인 정렬** - 헤드라인을 왼쪽, 가운데 또는 오른쪽에 배치합니다.

1. **제품 그리드 설정** 구성:
   + 기본 제품 타일 크기(작음, 중간 또는 큼)를 선택합니다.
   + 행당 제품 수 구성
   + 타일에서 가격 표시 활성화 또는 비활성화

1. **저장**을 선택합니다.

### 전자 상거래 레이아웃을 사용해야 하는 경우
<a name="ecommerce-layout-when"></a>

다음과 같은 경우이 레이아웃을 사용합니다.
+ 카탈로그에는 많은 제품이 포함되어 있습니다.
+ 구매자는 범주를 탐색, 비교 및 필터링해야 합니다.
+ 최소한의 사용자 지정 콘텐츠 섹션으로 익숙한 쇼핑 경험을 원함

제품이 적거나 마케팅 메시징이 더 중요한 매장의 경우 캠페인 레이아웃 또는 독립 실행형 레이아웃을 고려하세요.

### 관련 주제
<a name="ecommerce-layout-related"></a>
+ [레이아웃 유형](#layout-types)
+ 제품 가져오기
+ 범주 및 배지

## 색상 및 테마 사용자 지정
<a name="color-and-theme-customization"></a>

조직의 브랜딩에 맞게 매장의 색상 팔레트를 사용자 지정할 수 있습니다. 디자인 탭의 **색상** 섹션에 액세스하여 매장 색상을 구성합니다.

### 구성 가능한 색상 요소
<a name="color-and-theme-elements"></a>

구성 가능한 색상 요소는 다음과 같습니다.
+ **기본 색상**
+ **버튼 색상**
+ **헤드라인 색상**

### 색상을 사용자 지정하려면
<a name="color-and-theme-customize"></a>

1. 매장을 열고 **디자인** 탭을 선택합니다.

1. 색상 섹션으로 스크롤**합니다**.

1. 각 색상 요소에 대해 색상 사각형을 선택하여 색상 선택기를 엽니다. 색상 선택기는 HSV 그라데이션과 색조 슬라이더를 제공합니다.

1. **저장**을 선택하여 색상을 적용합니다.

### 모범 사례
<a name="color-and-theme-best-practices"></a>
+ 가독성을 위해 텍스트와 배경색 간에 충분한 대비를 유지합니다.
+ 기본 색상 설정에 조직의 기본 브랜드 색상을 사용합니다.
+ 데스크톱 및 모바일 뷰포트 모두에서 색상을 테스트합니다.

### 관련 주제
<a name="color-and-theme-related"></a>
+ [레이아웃 유형](#layout-types)
+ [로고 및 홈 버튼](#logo-and-home-button)

## 로고 및 홈 버튼
<a name="logo-and-home-button"></a>

스토어프론트 헤더에 대한 사용자 지정 로고 및 홈 버튼을 구성할 수 있습니다. 로고는 조직의 브랜드를 나타내며 홈 버튼을 사용하면 매장의 기본 페이지 또는 외부 URL로 다시 탐색할 수 있습니다.

### 로고를 구성하려면
<a name="logo-and-home-button-logo"></a>

1. 매장을 열고 **디자인** 탭을 선택합니다.

1. **로고** 섹션에서 **로고 URL**을 입력합니다. URL을 붙여넣거나 **업로드**를 선택하여 이미지를 업로드합니다.

1. **저장**을 선택합니다.

로고는 스토어프론트 헤더의 왼쪽 상단 모서리에 나타납니다.

### 로고 요구 사항
<a name="logo-and-home-button-requirements"></a>
+ 형식: PNG, SVG 또는 JPEG
+ 권장 크기: 50\~200 x 50픽셀.
+ 공개적으로 액세스할 수 있는 URL(HTTPS)에서 호스팅되어야 합니다.

### 홈 버튼을 구성하려면
<a name="logo-and-home-button-home"></a>

홈 버튼은 매장 헤더에 나타나고 클릭할 수 있는 대상을 제공합니다.

1. 매장을 열고 **디자인** 탭을 선택합니다.

1. **홈 버튼** 섹션에서 다음 필드를 구성합니다.
   + **리디렉션 로고 URL** - 구매자가 로고를 선택할 때의 대상 URL입니다.
   + **기존 탭에서 열기** - 활성화하면 새 탭 대신 현재 브라우저 탭에서 링크가 열립니다.

1. **저장**을 선택합니다.

### 관련 주제
<a name="logo-and-home-button-related"></a>
+ [색상 및 테마 사용자 지정](#color-and-theme-customization)
+ [레이아웃 유형](#layout-types)
+ [개인 정보 보호 정책](#privacy-policy)

## 개인 정보 보호 정책
<a name="privacy-policy"></a>

개인 정보 보호 정책 섹션에는 활성화 토글과 개인 **정보 보호 정책 URL**, **바닥글 면책 조항**, **양식 면책 조항**의 세 가지 필드가 있습니다.

### 개인 정보 보호 정책을 구성하려면
<a name="privacy-policy-configure"></a>

1. 매장을 열고 **디자인** 탭을 선택합니다.

1. **개인 정보 보호 정책** 섹션에서 토글을 사용하여 기능을 활성화한 다음 다음 필드를 작성합니다.
   + **개인 정보 보호 정책 URL** - 조직의 개인 정보 보호 정책 페이지에 대한 링크를 입력합니다.
   + **바닥글 면책 조항** - 매장 바닥글에 대한 면책 조항 텍스트를 입력합니다.
   + **양식 면책 조항** - 양식에 표시된 면책 조항 텍스트를 입력합니다.

1. **저장**을 선택합니다.

### 참고
<a name="privacy-policy-notes"></a>
+ 구매자 정보를 수집하거나 쿠키를 사용하는 모든 매장에 개인 정보 보호 정책을 제공하는 것이 좋습니다.
+ 개인 정보 보호 정책 URL은 공개적으로 액세스할 수 있어야 합니다(HTTPS).
+ 구매자가 링크를 선택하면 새 브라우저 탭에서 링크가 열립니다.

### 관련 주제
<a name="privacy-policy-related"></a>
+ [로고 및 홈 버튼](#logo-and-home-button)
+ 배포

## 비디오 및 가치 제안
<a name="video-and-value-propositions"></a>

비디오 콘텐츠와 구조화된 가치 제안 문을 매장에 추가할 수 있습니다. 이러한 요소는 구매자에게 이점을 전달하는 데 도움이 되며 캠페인 및 독립 실행형 레이아웃 유형에서 사용할 수 있습니다.

### 값 제안 섹션
<a name="video-and-value-propositions-video"></a>

오른쪽의 토글을 사용하여이 섹션을 활성화하거나 비활성화합니다.

1. 매장을 열고 **디자인** 탭을 선택합니다.

1. **값 제안 섹션에서** **비디오 임베드 URL**을 입력합니다.

   지원되는 소스:
   + YouTube(URL 형식 포함)
   + 비메오
   + 직접 비디오 파일 URL(MP4)

1. **저장**을 선택합니다.

비디오는 매장의 지정된 섹션에 임베디드 플레이어로 표시됩니다.

### 가치 제안 추가
<a name="video-and-value-propositions-vp"></a>

가치 제안은 비디오와 함께 또는 전용 섹션에 표시되는 짧은 혜택 문입니다. 구매자가 매장을 사용해야 하는 이유를 전달합니다.

1. 매장을 열고 **디자인** 탭을 선택합니다.

1. **값 제안** 섹션에서 최대 4개의 항목을 추가합니다. 각 항목에 대해:
   + **제목** - 짧은 헤드라인
   + **설명** - 이점을 설명하는 1\~2개의 문장

1. **저장**을 선택합니다.

### 표시 동작
<a name="video-and-value-propositions-display"></a>
+ 캠페인 레이아웃에서 가치 제안은 히어로 및 비디오 아래의 전용 섹션에 표시됩니다.
+ 독립 실행형 레이아웃에서는 값 제안이 제품 카탈로그 섹션 아래에 나타납니다.
+ 임베디드 및 전자 상거래 레이아웃에서는 값 제안이 표시되지 않습니다.

### 관련 주제
<a name="video-and-value-propositions-related"></a>
+ [캠페인 레이아웃](#campaign-layout)
+ [레이아웃 유형](#layout-types)