> For the complete documentation index, see [llms.txt](https://docs-kr.zep.us/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs-kr.zep.us/creator/tutor/tutorial/4.md).
# 나만의 UI 만들기
1. ZEP 캔버스 위에 내가 원하는 형태의 UI를 그릴 수 있습니다. ZEP에서는 HTML 을 통해 UI를 표현할 수 있습니다.
2. `App.showWidget()` 함수를 통해, HTML 파일을 특정 위치에 불러올 수 있습니다. 이 때 인자로 파일명, 정렬, 위젯의 가로와 세로 크기를 정해줍니다. 정렬에 들어가는 값은 [ScriptApp](https://app.gitbook.com/o/-MkvEtFn2kFBYSN4_5rX/s/iW553XSGeKCAPpImxXi3/~/changes/bRylDKw8UxLaVWLvuhVV/creator/zep-script-v2_kr/api/scriptapp)에서 Methods를 참고해주세요.
3. 생성한 변수에 `sendMessage()` 메소드를 통해, 원하는 값을 HTML 파일에 전달할 수 있습니다.
4. main.js에서 전달 받은 값을 사용하려면, HTML 문법에 맞게 작성한 다음 `addEventListener`를 통해 message 타입을 아래 예시와 같이 값을 받아올 수 있습니다.
* main.js
```jsx
//UI가 노출될 위치(정렬, 가로, 세로) 값을 변수로 사전에 제작
let postion = 'middle';
let width = 400;
let height = 400;
// my.html로 state라는 태그를 만들어 hello라는 값을 전달
let _widget = App.showWidget('my.html', position, width, height);
_widget.sendMessage({
state: "hello",
});
```
* my.html
```html
-
```
{% hint style="warning" %}
참고
\- 튜토리얼의 App type은 installable App을 권장합니다.
\- .js파일의 파일이름은 반드시 main 이어야 합니다. main.js 파일을 준비합니다.
\- 배포 방법을 아직 모르신다면,[ ZEP Script 배포 가이드](/creator/dev-guide/zep-script.md)를 참고해주세요.
{% endhint %}
***
[외부 API 통신하기](/creator/reference/api.md)
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## 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, and the optional `goal` query parameter:
```
GET https://docs-kr.zep.us/creator/tutor/tutorial/4.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
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.