> For the complete documentation index, see [llms.txt](https://help.smallbuilder.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.smallbuilder.com/ko/smallbuilder-documents/undefined-2/undefined.md).

# 청구서 템플릿 생성 예제

* 청구서 작성을 위해 Target Object, Template Name, Template Label 을 입력한 후 저장한다.

<figure><img src="/files/ydKM4LkAfTDmgz0M4M25" alt=""><figcaption></figcaption></figure>

***

* 문서의 각 페이지 상단이나 하단에 일관된 스타일로 회사 정보를 배치하여 문서의 통일성을 유지하기 위해 \[Page Header Component]를 사용한다.

{% content-ref url="/pages/83UetQDxdvhQ4INUIlIc" %}
[페이지 상단에 로고 이미지를 고정하는 방법](/ko/smallbuilder-documents/undefined-1-1/undefined.md)
{% endcontent-ref %}

***

* 청구서에 기본 정보를 나타내기 위해 \[Table Component] 사용한다.

<figure><img src="/files/ADWE7Rjim6RdLJi0j1Vd" alt=""><figcaption><p>좌측 상단에 Component -> Add Component -> Table을 선택하여 Component를 추가한 후 내용을 입력한다.</p></figcaption></figure>

<figure><img src="/files/FFM8LSqwp6o4XmcCpZYD" alt=""><figcaption><p>청구서 Title을 위해 병합하고자 하는 셀을 선택하여 Merge를 눌러 병합 방향과 병합할 셀의 개수를 선택한다.</p></figcaption></figure>

***

* 청구서에 Salesforce 레코드값을 넣기 위해 원하는 위치에 커서를 둔 후 필드를 추가한다.

<figure><img src="/files/ktKPoi0ytbsw4v8boAGg" alt=""><figcaption><p>field 입력 위치 선택 -> Component -> field -> 추가 할 field 선택 -> 데이터 타입별 포멧을 선택한다.</p></figcaption></figure>

***

* 청구서에서 각 컴포넌트 사이의 간격을 조절하거나 내용을 분리하여 문서의 가독성을 높이고자 할 때 \[Empty, Divider] 컴포넌트를 사용한다.

{% content-ref url="/pages/hs7Vcle6pujXNMmGq7Vg" %}
[컴포넌트 사이에 공백 넣는 방법](/ko/smallbuilder-documents/undefined-1-1/undefined-1.md)
{% endcontent-ref %}

{% content-ref url="/pages/O726eA2oYB4hkMLswmLX" %}
[컴포넌트 사이에 구분선 넣는 방법](/ko/smallbuilder-documents/undefined-1-1/undefined-2.md)
{% endcontent-ref %}

***

* 청구하는 상품의 목록을 나타내고자 할 때 \[Related List]를 사용한다.

<figure><img src="/files/661NWZPoVTQnKgfgOHdg" alt=""><figcaption><p>Component -> Add Component -> Related List</p></figcaption></figure>

<figure><img src="/files/EmnMBPy9XeDWLMY9cSRE" alt=""><figcaption><p>추가하려는 상품의 개체 선택 -> 보여 줄 필드 선택 -> Add</p></figcaption></figure>

<figure><img src="/files/kQQk1w8jkKrcGoooEnoY" alt=""><figcaption><p>화살표를 사용해 필드의 순서를 변경 -> Sum, GRoup by 여부 선택 -> Confirm</p></figcaption></figure>

***

<figure><img src="/files/s9sgF4B6Onk9iNo04PNO" alt=""><figcaption><p>Preview</p></figcaption></figure>

<figure><img src="/files/IJphbhQnAH9jnqMxMbmS" alt=""><figcaption></figcaption></figure>