# 추천 에디터 디자인 가이드

이 문서에서는 쇼핑몰에 어울리는 추천 레이아웃을 그루비에서 제공하는 에디터로 디자인할 수 있는 가이드를 제공합니다. 추천 영역 셋팅이 좀 더 어려운 PC/ 환경의 내용을 주로 다룹니다.

## **PC/웹 환경**

PC/웹 환경의 쇼핑몰에 추천 상품을 진열할 때에는 추천 영역의 너비를 정확하게 지정해주는 것이 중요합니다.<br>

**쇼핑몰의 검색 결과 상품이 진열되는 영역의 너비 확인**

<figure><img src="https://files.helpdocs.io/p92xn84cjv/articles/6km0vejthl/1606459541734/image.png" alt=""><figcaption></figcaption></figure>

1. PC/웹 환경의 쇼핑몰에서 상품을 검색<br>

<figure><img src="https://files.helpdocs.io/p92xn84cjv/articles/6km0vejthl/1606459786052/image.png" alt=""><figcaption></figcaption></figure>

2. 키보드의 F12키를 눌러서 개발자 도구 열기\
   \* 또는 크롬 기준으로 설정 > 도구 더보기 > 개발자 도구를 클릭
3. 개발자도구에서 요소 선택 (select element) 아이콘 클릭

{% hint style="success" %}
&#x20;요소 선택 아이콘을 클릭하면 브라우저 화면 상의 요소들의 크기, 폰트 스타일, HTML 코드 등을 확인할 수 있습니다.
{% endhint %}

<figure><img src="https://files.helpdocs.io/p92xn84cjv/articles/6km0vejthl/1606459860497/image.png" alt=""><figcaption></figcaption></figure>

4. 요소 선택 아이콘이 선택된 채로
5. 검색 결과 영역으로 마우스 이동
6. 너비 확인 (예시의 경우 1014 px)

&#x20;

### **추천 에디터 디자인 - 추천 유형 선택**

<figure><img src="https://files.helpdocs.io/p92xn84cjv/articles/6km0vejthl/1606459903952/image.png" alt=""><figcaption></figcaption></figure>

1. 추천 정확도가 높은 소수의 상품만 진열하려면 가로형 선택
2. 다양한 상품을 진열하려면 슬라이드형 선택

<figure><img src="https://files.helpdocs.io/p92xn84cjv/articles/6km0vejthl/1606459955306/image.png" alt=""><figcaption></figcaption></figure>

&#x20;

1. 쇼핑몰에서 확인한 너비 값을 그대로 입력
2. 그 외 1줄 당 아이템 개수, 폰트 크기 등을 수정

{% hint style="info" %}
추천 에디터 사용법은 [추천 2단계 2) 에디터](/old-admin/ai-recommendation/ai-recommendation-create/step2-editor.md)를 확인해 주세요.
{% endhint %}

<figure><img src="https://files.helpdocs.io/p92xn84cjv/articles/6km0vejthl/1606460000540/image.png" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
슬라이드를 선택한 경우 좌우 화살표 버튼으로 인하여 가로형보다 상품이 진열되는 영역이 더 작은 너비로 노출됩니다. \
(정확히는 160 px만큼 작은 너비로 노출됩니다.)
{% endhint %}

만약 상품이 진열되는 영역을 원래 사이즈로 유지하고 싶은 경우

* 실제 쇼핑몰에서 확인한 너비 값에 160을 더하여 너비를 지정해주세요.
* 그리고 추천 코드를 삽입할 때 다음과 같이 삽입해주세요.

  <pre data-full-width="false"><code>&#x3C;div class='groobee_recommendation' id='생성한 추천의 아이디' style="margin-left:-80px;">
  &#x3C;/div>
  </code></pre>

{% hint style="success" %}
margin-left 값은 해당 영역을 원래 위치보다 왼쪽으로 특정값만큼 이동시킬 때 사용합니다.
{% endhint %}

<figure><img src="https://files.helpdocs.io/p92xn84cjv/articles/6km0vejthl/1606463987014/image.png" alt=""><figcaption></figcaption></figure>

***

&#x20;

## **모바일 환경**

모바일 환경에서는 2종의 가로형만 사용 가능합니다.&#x20;

<figure><img src="https://files.helpdocs.io/p92xn84cjv/articles/6km0vejthl/1606460126719/image.png" alt=""><figcaption></figcaption></figure>

모바일 환경의 경우 PC/웹 환경과 다르게 별도의 너비 값을 지정하지 않아도 됩니다.<br>

<figure><img src="https://files.helpdocs.io/p92xn84cjv/articles/6km0vejthl/1606460178804/image.png" alt=""><figcaption></figcaption></figure>

너비 값을 제외한 1줄 당 아이템 개수, 폰트 크기 등을 수정

{% hint style="info" %}
추천 에디터 사용법은 [추천 2단계 2) 에디터](/old-admin/ai-recommendation/ai-recommendation-create/step2-editor.md)를 확인해 주세요.
{% endhint %}


---

# 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://docs.groobee.ai/old-admin/ai-recommendation/ai-recommendation-create/design-guide.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.