> 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)