> 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="https://3985481653-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FA2fSsDo5KsIVkUoDIV1b%2Fuploads%2F2reNyY9rHpqbMp04t4d3%2F20250422_113914.png?alt=media&amp;token=19c43155-9dea-417f-9bb9-68bb9d18d027" 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="https://3985481653-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FA2fSsDo5KsIVkUoDIV1b%2Fuploads%2FZB5i4CenvUEkJOeAMGqC%2F20250423_075538.png?alt=media&amp;token=7d71e7d2-a08a-4a7f-ba82-b799023cd236" alt=""><figcaption><p>좌측 상단에 Component -> Add Component -> Table을 선택하여 Component를 추가한 후 내용을 입력한다.</p></figcaption></figure>

<figure><img src="https://3985481653-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FA2fSsDo5KsIVkUoDIV1b%2Fuploads%2FrwBMdLEKNT74aiFXYsX3%2F20250423_080137.png?alt=media&amp;token=27909700-0a34-4dd5-b8b5-135ecb0a0938" alt=""><figcaption><p>청구서 Title을 위해 병합하고자 하는 셀을 선택하여 Merge를 눌러 병합 방향과 병합할 셀의 개수를 선택한다.</p></figcaption></figure>

***

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

<figure><img src="https://3985481653-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FA2fSsDo5KsIVkUoDIV1b%2Fuploads%2FdXU3lJSEYUgoW5kjMQ9X%2F20250423_084755.png?alt=media&amp;token=bd76e5d0-c0c4-465e-984c-731c4aa18b8c" 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="https://3985481653-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FA2fSsDo5KsIVkUoDIV1b%2Fuploads%2F66dzquITPa02f6wcj7HR%2F20250423_090549.png?alt=media&amp;token=fb3752fc-39a4-4324-8d82-b0dbf7f0b3ef" alt=""><figcaption><p>Component -> Add Component -> Related List</p></figcaption></figure>

<figure><img src="https://3985481653-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FA2fSsDo5KsIVkUoDIV1b%2Fuploads%2FLBmLc5k8xCA2Re3PYDsu%2F20250423_090728.png?alt=media&amp;token=105b0930-0eaf-4f2f-b536-f8617d74c655" alt=""><figcaption><p>추가하려는 상품의 개체 선택 -> 보여 줄 필드 선택 -> Add</p></figcaption></figure>

<figure><img src="https://3985481653-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FA2fSsDo5KsIVkUoDIV1b%2Fuploads%2FnsIOufUM0gvzslfaH0Vg%2F20250423_091509.png?alt=media&amp;token=aa852ac8-34c2-43fe-9287-f878e25c20b6" alt=""><figcaption><p>화살표를 사용해 필드의 순서를 변경 -> Sum, GRoup by 여부 선택 -> Confirm</p></figcaption></figure>

***

<figure><img src="https://3985481653-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FA2fSsDo5KsIVkUoDIV1b%2Fuploads%2Fk2gcC0iaqvZPxgXPLqBE%2Fimage.png?alt=media&amp;token=6e10d49b-ec2f-4990-a03d-41f448ba1830" alt=""><figcaption><p>Preview</p></figcaption></figure>

<figure><img src="https://3985481653-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FA2fSsDo5KsIVkUoDIV1b%2Fuploads%2FROs9vl9Ht8IvHFKe2776%2Fimage.png?alt=media&amp;token=42fdc57b-93bc-4720-95e2-087d02deecad" alt=""><figcaption></figcaption></figure>