# 팝업창 구성요소 최적화

{% hint style="info" %}
메인의 팝업창을 관리하고 최적화 하는 과정을 하나씩 따라해볼 수 있습니다.
{% endhint %}

이 문서에서는 팝업창을 최적화하는 과정을 예로 들어 원격 구성을 활용한 A/B Test의 진행 과정을 설명합니다. 단계별로 하나씩 따라하면 누구나 쉽게 설정할 수 있습니다.

## 팝업창 구성요소 최적화

산업군 혹은 서비스 형태와 무관하게 대부분의 서비스에서는 화면 진입 시 팝업이 노출되는 경우가 많습니다. 이 문서에서는 홈 진입 시 노출되는 팝업을 예로 들어, 원격구성 기능을 어떻게 적용하고, 또 A/B 실험에 활용할 수 있는지 확인합니다.

### 1. 팝업창을 원격구성으로 관리

이미지처럼 메인 화면에서 최대 75%의 할인을 제공하는 /금/토/일 할인 프로모션을 진행한다고 가정합니다.

![서비스 화면 예시](/files/ph1JV3HQ7tLydcvsl21i)

핵클의 원격구성 탭 > 새 파라미터 생성하기 > **Home\_banner** 라는 이름의 파라미터 키를 생성합니다. **JSON 으로 구성요소를 원하는 대로 작성** 해보겠습니다.

![팝업을 관리할 원격구성 생성](/files/jTafogVqDTA5IdYbbV4E)

아래 이미지처럼 JSON 으로 팝업창의 구성요소 (이미지, 제목, 설명) 을 모두 포함하여 저장합니다. 저장하는 즉시 서비스에 반영됩니다.

![팝업의 구성요소를 원격구성 JSON 으로 관리](/files/j7baTRAagDbQp4Q6bQoO)

### 2. 팝업창의 효과를 검증하기 위해 A/B 실험을 진행

기존에는 모든 사용자에게 주말 한정, 제한 시간을 강조한 문구로 프로모션을 홍보했습니다.

이를 최대 할인율을 강조한 문구로 수정한 버전을 A/B Test 하여 그 효과를 실험합니다.

* 기존 문구(Group A) : 주말 한정, 시간 강조한 문구
  * "title": "주말특가,메이크업 특집"\
    "description": "매주 금/토/일 3일간! 최대혜택! 봄맞이 단독특집"
* 변경 문구(Group B) : 최대 할인율 강조한 문구
  * "title": "최대 75% 할인,메이크업 단독특집"\
    "description": "고민하던 그 제품, 최대 75% 역대급 할인"

![](/files/SVvPhjxQVMNyyZta2a4H)

![강조사항이 다른 문구로 팝업창 A/B Test 설계](/files/X3k75ta37lEEwqCgvnWB)

### 3. 원격구성으로 조건별 문구를 수정 및 관리

원격구성으로 JSON을 수정합니다. 노출 규칙 및 세부 변경 사항을 설정하여 즉시 반영할 수 있습니다.\
**원격구성에서 유저를 다시 설정할 필요 없이 A/B 테스트의 그룹들을 타켓팅**할 수 있습니다. 실험키를 선택하고, Group B 에 노출되는 문구를 아래 이미지처럼 변경하면 수정 사항이 즉시 반영됩니다.

![원격구성으로 A/B 테스트에서 노출할 문구 관리](/files/EhWbRV1j6RpPgrPufYEX)

### 4. A/B Test 로 효과적인 값 확인, 최적화

원격구성에서 작성한 내용이 반영된 상태에서, 해당 원격구성이 반영된 A/B Test 화면을 확인하면 아래와 같이 그 결과를 확인할 수 있습니다.

변동 사항에 대해 성공지표(메인 팝업창의 클릭률)를 확인하고, 더 나은 테스트 그룹을 Winner 로 설정하여 서비스에 반영할 수 있습니다.

이렇게 **원격구성을 통해 별도의 코드 작업없이 실험을 진행**하고, 자세한 A/B Test 결과를 확인함으로써 서비스를 빠르게 최적화할 수 있습니다.([A/B Test 데이터 분석](/ab-test/data-analysis/interpret-results.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.hackle.io/remote-configs/ab-test-example/how-to-optimize-popup.md?ask=<question>
```

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.