> ## Documentation Index
> Fetch the complete documentation index at: https://foliant-help.iforiti.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 비주얼과 코드 간 전환

> 코드 템플릿을 블록으로 변환하고, 비주얼 템플릿의 코드를 편집하는 방법과 다시 전환할 때 작업 내용이 어떻게 되는지 알아보세요.

모든 템플릿은 내부적으로 Liquid와 HTML로 되어 있습니다. **비주얼** 편집기는 블록과 문서 스타일로 이 코드를 자동으로 만들고, **코드** 편집기는 코드 자체를 보여 줍니다. 편집기 상단의 **비주얼** 탭과 **코드** 탭으로 전환합니다. Foliant는 전환할 때 코드를 절대 버리지 않습니다. 일반 블록으로 바꿀 수 없는 부분은 **사용자 지정 Liquid** 블록으로 유지합니다.

## 시작하기 전에

**비주얼** 탭은 요금제에 따라 다릅니다. 사용할 수 없는 경우 탭에 이 기능이 포함된 요금제가 표시되며, 코드 편집기는 평소처럼 작동합니다. [비주얼 편집기 요금제별 제공 여부](https://foliant-help.iforiti.com/ko/template-editor/visual-editor-plans.md)를 참조하세요.

## 코드 템플릿을 블록으로 변환

1. 편집기에서 템플릿을 엽니다. **코드**로 열립니다.
2. **비주얼** 탭을 클릭합니다. **비주얼로 변환** 대화 상자가 열립니다.
3. 시작 방법을 선택합니다.

| 옵션 | 결과 |
| - | - |
| **블록 레이아웃으로 시작** | **레이아웃**(예: **송장**, **배송 명세서** 또는 **반품 양식**)을 선택하고 **블록 레이아웃 사용**을 클릭합니다. 현재 코드가 해당 레이아웃으로 대체됩니다. 저장하기 전에는 **취소**를 클릭하면 코드가 복원되고, 저장한 후에는 버전 기록에 남아 있습니다. |
| **내 코드를 사용자 지정 Liquid 블록으로 유지** | **내 코드 유지**를 클릭합니다. 코드가 유지되며, 그 주변에 새 블록을 추가할 수 있습니다. Foliant는 인식하는 섹션(헤더, 주소, 품목 표, 합계 등)이 동일한 주문 정보를 인쇄하는 경우 일반 블록으로 바꾸고, 나머지는 모두 같은 위치에 사용자 지정 Liquid 블록으로 유지합니다. |

4. 페이지를 확인한 후 저장합니다.

제공되는 레이아웃은 템플릿에 따라 다릅니다. 주문당 문서 하나(송장, 대변 메모, 견적서, 배송 명세서, 반품 양식, 상업 송장, 구매 주문서, 일반 주문 문서, 배송 라벨, 영수증) 또는 선택한 모든 주문에 대한 문서 하나(피킹 리스트, 주문 요약)입니다. 유형이 없는 템플릿에 특정 문서 유형의 레이아웃을 적용하면 해당 유형이 지정됩니다. 따라서 송장 레이아웃을 적용하면 송장으로 번호가 매겨집니다.

## 비주얼 템플릿의 코드 보기 또는 편집

1. 비주얼 템플릿에서 **코드** 탭을 클릭합니다. **컴파일된 Liquid**가 표시됩니다. 이는 Foliant가 블록과 문서 스타일로 생성한 코드이며, 읽기 전용입니다.
2. 변경하려면 **코드 편집**을 클릭합니다. 이후 코드 편집기가 활성화되며, 저장하면 코드가 저장됩니다.
3. 저장하면 Foliant가 코드에서 블록을 다시 읽어 들이므로 템플릿은 비주얼 상태로 유지됩니다.

개별 블록의 컴파일된 코드도 열 수 있습니다. 블록을 선택하고 해당 블록의 **콘텐츠** 탭에서 **컴파일된 Liquid 보기**를 클릭하세요.

## 코드 편집 후 비주얼로 다시 전환

**비주얼** 탭을 클릭합니다. Foliant가 코드에서 블록을 읽어 들입니다.

* 코드를 변경하지 않은 블록은 원래대로 돌아옵니다.
* 일부 코드가 더 이상 해당 블록과 일치하지 않거나 블록 바깥에 작성된 경우, **비주얼로 다시 전환할까요?** 대화 상자의 **사용자 지정 Liquid로 유지되는 부분** 아래에 해당 부분과 이유가 표시됩니다.
  * **편집된 코드**: 블록의 코드가 변경되어 사용자 지정 Liquid 블록이 됩니다.
  * **블록 바깥에 작성됨**: 블록 사이에 새로 추가한 코드입니다.
* 계속하려면 **비주얼로 전환**을 클릭하고, 코드를 계속 편집하려면 **Liquid에 머무르기**를 클릭합니다.

삭제되는 내용은 없으며, 전환을 실행 취소할 수 있습니다. 전환하기 전에 코드 오류를 먼저 수정해야 합니다.

## 템플릿을 스타터로 바꾸기

상단 표시줄의 \*\*스타터로 바꾸기…\*\*는 편집기의 모든 내용을 스타터 템플릿이나 디자인으로 바꿉니다. 스타터는 코드 템플릿이므로 비주얼 템플릿은 코드 템플릿이 됩니다. 저장하기 전까지는 아무것도 바뀌지 않으며, **취소**를 클릭하면 이전 내용이 복원됩니다.

## 참고 사항

* 사용자 지정 Liquid 블록도 다른 블록처럼 이동하고, 스타일을 지정하고, 조건을 설정할 수 있습니다. 코드는 작성된 그대로 인쇄됩니다.
* 변환은 템플릿별로 이루어지며, 직접 선택한 경우에만 실행됩니다.
* 구매한 디자인으로 만든 템플릿은 디자인 편집기를 사용하며, 여기에서 비주얼이나 코드로 전환할 수 없습니다.

## 관련 문서

* [템플릿 편집기 열기](https://foliant-help.iforiti.com/ko/template-editor/editor-overview.md)
* [템플릿 코드 편집](https://foliant-help.iforiti.com/ko/template-editor/code-editor.md)
* [블록 참조](https://foliant-help.iforiti.com/ko/template-editor/block-catalogue.md)
* [비주얼 편집기 요금제별 제공 여부](https://foliant-help.iforiti.com/ko/template-editor/visual-editor-plans.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.