# 나만의 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: 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:
```
GET https://docs-kr.zep.us/creator/tutor/tutorial/4.md?ask=
```
The question should be specific, self-contained, and written in natural language.
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.