# 레이아웃 관리

***

## 1. 상세 화면 관리

### 1-1. 상세 화면이란?

<kbd>상세 화면</kbd>은 <kbd>딜</kbd>/<kbd>리드</kbd>/<kbd>고객</kbd>/<kbd>회사</kbd> 등 각 오브젝트의 개별 항목을 클릭했을 때 확인할 수 있는 화면을 말합니다. \
아래는 세일즈맵 메뉴의 <kbd>세일즈</kbd> > <kbd>딜</kbd> 로 이동해, 개별 항목인 '프로슈마 B' 딜을 클릭했을 때 나타나는 상세 화면입니다.&#x20;

<figure><img src="https://266453150-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMQWZWEhmSM7VgdI2ju3B%2Fuploads%2FuPzr5XpwPPpPGngnpG25%2F%E1%84%89%E1%85%A1%E1%86%BC%E1%84%89%E1%85%A6%E1%84%92%E1%85%AA%E1%84%86%E1%85%A7%E1%86%AB%20%E1%84%80%E1%85%AA%E1%86%AB%E1%84%85%E1%85%B5.png?alt=media&#x26;token=dcc960b2-5641-4c18-955f-f8586caa2e68" alt=""><figcaption></figcaption></figure>

### 1-2. 상세 화면 편집하기

세일즈맵에서는&#x20;

> * 각 오브젝트의 <kbd>상세 화면</kbd>에 어떤 위젯을 추가할지
> * 각 위젯을 어떤 순서로 배치할지
> * 각 위젯에 어떤 필드를 노출할지

등 상세 화면의 레이아웃을 자유롭게 설정할 수 있습니다. 지금부터는 자세한 상세 화면 커스터마이징 방법을 알아봅니다.

{% @arcade/embed flowId="Hh3h4sB5U0cRU4wAfddz" url="<https://app.arcade.software/share/Hh3h4sB5U0cRU4wAfddz>" %}

{% stepper %}
{% step %}
세일즈맵 메뉴의 <kbd>회사 설정</kbd> > <kbd>오브젝트 관리</kbd> > <kbd>커스터마이징할 오브젝트 선택</kbd> > <kbd>상세 화면 관리</kbd>로 이동합니다.
{% endstep %}

{% step %}
기존에 만들어져 있던 <kbd>상세 화면</kbd>을 수정하거나, 새로운 <kbd>상세 화면</kbd>을 생성합니다.
{% endstep %}

{% step %} <kbd>기본 정보 탭</kbd>에서는 편집하고 있는 상세 화면의 이름/설명/공유 범위를 입력합니다.
{% endstep %}

{% step %} <kbd>상세 화면 편집 탭</kbd> 에서는 편집하고 있는 상세 화면에 추가할 위젯/탭/앱을 선택합니다.&#x20;
{% endstep %}

{% step %}
각 위젯의 <kbd>⚙️</kbd> 버튼을 클릭하면,  어떤 필드를 이 위젯에 노출할지 설정할 수 있습니다.
{% endstep %}

{% step %}
각 위젯의 <i class="fa-dice-six">:dice-six:</i> 버튼을 클릭한 채로 드래그하면 위젯의 순서를 변경할 수 있습니다.
{% endstep %}
{% endstepper %}

### 1-3. 편집된 레이아웃 확인하기

{% @arcade/embed flowId="uCFEjM38NKEdrbnnkHkP" url="<https://app.arcade.software/share/uCFEjM38NKEdrbnnkHkP>" %}

{% stepper %}
{% step %}
상세화면 레이아웃을 편집한 <kbd>오브젝트</kbd> 목록으로 이동합니다.&#x20;
{% endstep %}

{% step %} <kbd>오브젝트</kbd> 목록에서 개별 항목을 클릭합니다.&#x20;
{% endstep %}

{% step %}
상세화면 좌측 상단의 레이아웃 박스를 클릭해 방금 수정한 레이아웃으로 변경합니다.&#x20;
{% endstep %}

{% step %}
레이아웃이 잘 설정되었는지 확인합니다.
{% endstep %}
{% endstepper %}

***

## 2. 미리보기 관리

### 2-1. 미리보기란?

<kbd>딜</kbd>/<kbd>리드</kbd>/<kbd>고객</kbd>/<kbd>회사</kbd> 등 오브젝트의 각 목록에서 개별 항목에 커서를 가져다대면, 탭 모양의 아이콘이 뜹니다.

이때 이 아이콘을 클릭했을 때 아래 화면과 같이 나타나는 사이드 탭을 <kbd>미리보기</kbd>라고 합니다. 미리보기 화면은 상세화면보다 간결한 정보를 담고 있는 것이 특징입니다.

아래는 프로슈마 B때 나타나는 <kbd>미리보기</kbd>를 가지고 왔어요.

<figure><img src="https://266453150-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMQWZWEhmSM7VgdI2ju3B%2Fuploads%2F8o7HCHEkSXKh0h10z5O6%2F%E1%84%86%E1%85%B5%E1%84%85%E1%85%B5%E1%84%87%E1%85%A9%E1%84%80%E1%85%B5%20%E1%84%92%E1%85%AA%E1%84%86%E1%85%A7%E1%86%AB%20%E1%84%80%E1%85%AA%E1%86%AB%E1%84%85%E1%85%B5.png?alt=media&#x26;token=c7448aff-4965-406c-bc0f-bb4bde4ef318" alt=""><figcaption></figcaption></figure>

### 2-2. 미리보기 화면 편집하기

각 오브젝트의 <kbd>미리보기</kbd> 역시 사용자가 의도와 쓰임에 맞게 자유롭게 편집할 수 있습니다.

{% @arcade/embed flowId="8F62Nakaykvc0P7NpQix" url="<https://app.arcade.software/share/8F62Nakaykvc0P7NpQix>" %}

{% stepper %}
{% step %} <kbd>회사 설정</kbd> > <kbd>오브젝트 관리</kbd> > <kbd>커스터마이징할 오브젝트 선택</kbd> > <kbd>미리보기 관리</kbd> 로 이동
{% endstep %}

{% step %}
기존에 만들어져 있던 <kbd>미리보기</kbd>를 수정하거나, 새로운 <kbd>미리보기</kbd>를 생성
{% endstep %}

{% step %} <kbd>기본 정보</kbd> 탭에서 레이아웃 이름/설명/공유 범위 선택
{% endstep %}

{% step %} <kbd>미리보기 편집</kbd> 탭에서 미리보기에 어떤 <kbd>탭</kbd>이 보이도록 할지, 상세 정보에 어떤 <kbd>필드</kbd>가 보이도록 할지 설정
{% endstep %}

{% step %}
각 탭과 필드 좌측의 <i class="fa-dice-six">:dice-six:</i> 버튼을 클릭한 채로 드래그(드래그앤 드롭)해 위젯의 배치 변경
{% endstep %}
{% endstepper %}

***

## 3. 생성 화면 관리

### 3-1. 생성 화면이란?

생성 화면이란 <kbd>고객</kbd>/<kbd>회사</kbd>/<kbd>리드</kbd>/<kbd>딜</kbd>등의 오브젝트를 생성할 때 나타나는 팝업창을 말합니다.

아래는 딜 파이프라인 페이지에서 `+딜` 버튼을 클릭했을 때 나타나는 생성 화면입니다.&#x20;

<figure><img src="https://266453150-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMQWZWEhmSM7VgdI2ju3B%2Fuploads%2FEn8EE2DGxxD9NT3WJDIP%2F%E1%84%89%E1%85%A2%E1%86%BC%E1%84%89%E1%85%A5%E1%86%BC%20%E1%84%92%E1%85%AA%E1%84%86%E1%85%A7%E1%86%AB%20%E1%84%80%E1%85%AA%E1%86%AB%E1%84%85%E1%85%B5.png?alt=media&#x26;token=ef4b25da-a4d6-44cf-856f-a43089b5fc3f" alt=""><figcaption></figcaption></figure>

### 3-2. 생성 화면 편집하기

앞서 살펴 본 상세 화면, 미리보기 화면과 마찬가지로 생성 화면도 커스터마이징 할 수 있습니다.

생성 화면을 잘 구성해두면 개별 오브젝트를 생성할 때부터 누락되는 내용 없이 꼼꼼히 정보를 저장할 수 있기 때문에, 생성 화면 커스터마이징은 무척 중요합니다.

{% @arcade/embed flowId="QHvcvRbvMAuvoI1YJoLK" url="<https://app.arcade.software/share/QHvcvRbvMAuvoI1YJoLK>" %}

{% stepper %}
{% step %}
생성 화면 커스터마이징은 <kbd>회사 설정</kbd> > <kbd>오브젝트 관리</kbd> > <kbd>커스터마이징할 오브젝트 선택</kbd> > <kbd>생성 화면 관리</kbd>에서 진행할 수 있습니다.&#x20;
{% endstep %}

{% step %}
`수정` 버튼을 클릭합니다.
{% endstep %}

{% step %} <kbd>생성 화면 수정</kbd>  화면으로 이동하면, 생성 화면에서 노출시키고자 하는 필드의 체크박스를 체크해주세요.
{% endstep %}
{% endstepper %}

{% hint style="warning" %}
오브젝트 생성 화면에서 입력란을 필수로 설정하고자 하는 경우, 또는 기존 필수 입력으로 되어 있는 필드를 선택 항목으로 설정하고자 하는 경우 필드 자체의 필수 여부를 바꿔주어야 합니다.

필드의 필수 여부는 <kbd>회사 설정</kbd> > <kbd>필드 관리</kbd>에서 수정할 수 있습니다. 자세한 내용은 아래 문서를 참고해주세요.
{% endhint %}

{% content-ref url="field-management" %}
[field-management](https://docs.salesmap.kr/settings/object-management/field-management)
{% endcontent-ref %}