> ## Documentation Index
> Fetch the complete documentation index at: https://documentation.onesignal.com/llms.txt
> Use this file to discover all available pages before exploring further.
# HTML로 인앱 메시지 디자인하기
> 최대한의 유연성, 반응성 및 브랜딩을 위해 OneSignal의 HTML 에디터를 사용하여 인앱 메시지를 디자인하고 사용자 지정하세요.
## 개요
OneSignal은 두 가지 인앱 메시지 에디터를 제공합니다:
* 비기술자를 위한 [드래그 앤 드롭](./design-your-in-app-message) GUI
* 레이아웃, 동작 및 반응성에 대한 픽셀 단위의 완벽한 제어를 원하는 개발자를 위한 HTML 에디터.
**HTML 에디터로 할 수 있는 것:**
* **레이아웃:** 복잡한 반응형 레이아웃 구축(예: 나란히 배치된 CTA).
* **폼:** 인라인으로 입력 수집(이메일, 피드백, 설문조사).
* **글꼴 및 브랜드:** 사용자 지정 웹 글꼴 및 CSS 변수 사용.
* **JS 액션:** 클릭 추적, 사용자 태그 지정, 결과 전송 등.
### 요구 사항
* **iOS:** 3.9.0+
* **Android:** 4.6.3+
* 앱이 이전 SDK를 사용하는 경우 인앱 메시지는 Center Modal 레이아웃으로 렌더링됩니다.
***
## HTML 인앱 만들기 및 미리보기
**Messages > New In-App**으로 이동하여 인앱 메시지를 만들고, 편집하고, 테스트하고, 일시 중지하고, 복제하거나 삭제하세요.
미리 만들어진 템플릿으로 빠르게 시작하세요.
JavaScript 라이브러리를 사용하여 상호 작용을 추적하고 인앱 동작을 트리거하세요.
왼쪽에 HTML 코드를 입력하고 실시간으로 미리 봅니다. **Send Test In-App**을 사용하여 반응성과 디자인을 테스트하세요.
### 추적 가능한 레이블 추가
클릭이 추적되고 실행 가능하도록 대화형 요소에 `data-onesignal-unique-label`을 추가하세요.
```html theme={null}
```
### JavaScript로 클릭 액션 바인딩
```js theme={null}
// 사용자가 버튼을 클릭할 때 사용자를 태그 지정
document.querySelector(".tag-user").onclick = (e) => {
OneSignalIamApi.tagUser(e, { fiz: "baz" });
};
```
자세한 내용은 [In-App JS 라이브러리 문서](./in-app-message-api)를 참조하세요.
### 에셋 지원
에셋은 제공한 URL에서 렌더링 시간에 로드됩니다.
```html theme={null}
```
### 개인화
[Liquid 구문 사용](./using-liquid-syntax)을 사용하여 사용자 데이터 값을 동적으로 삽입하세요:
```html theme={null}
안녕하세요 {{ name | default: '회원님' }}!
```
**지원되는 컨텍스트:**
* `div`, `p`, `li`와 같은 요소 내부의 텍스트
* `
**HTML 에디터로 할 수 있는 것:**
* **레이아웃:** 복잡한 반응형 레이아웃 구축(예: 나란히 배치된 CTA).
* **폼:** 인라인으로 입력 수집(이메일, 피드백, 설문조사).
* **글꼴 및 브랜드:** 사용자 지정 웹 글꼴 및 CSS 변수 사용.
* **JS 액션:** 클릭 추적, 사용자 태그 지정, 결과 전송 등.
### 요구 사항
* **iOS:** 3.9.0+
* **Android:** 4.6.3+
* 앱이 이전 SDK를 사용하는 경우 인앱 메시지는 Center Modal 레이아웃으로 렌더링됩니다.
***
## HTML 인앱 만들기 및 미리보기
**Messages > New In-App**으로 이동하여 인앱 메시지를 만들고, 편집하고, 테스트하고, 일시 중지하고, 복제하거나 삭제하세요.
### 추적 가능한 레이블 추가
클릭이 추적되고 실행 가능하도록 대화형 요소에 `data-onesignal-unique-label`을 추가하세요.
```html theme={null}
```
### JavaScript로 클릭 액션 바인딩
```js theme={null}
// 사용자가 버튼을 클릭할 때 사용자를 태그 지정
document.querySelector(".tag-user").onclick = (e) => {
OneSignalIamApi.tagUser(e, { fiz: "baz" });
};
```
```
### 개인화
[Liquid 구문 사용](./using-liquid-syntax)을 사용하여 사용자 데이터 값을 동적으로 삽입하세요:
```html theme={null}