---
title: 여정 커스터마이징
description: IDCloud 포털에서 직접 여정의 시각적 아이덴티티 — 로고, 색상, 배경, 버튼 모양 — 를 실시간 미리보기와 함께 구성합니다.
canonical: https://developer.unico.io/ko/dual-api/product-guide/portal-idcloud/settings/journey-customization
locale: ko
generated_by: markdown-export
---

**여정 커스터마이징**을 사용하면 지원 티켓 없이, 지원팀에 의존하지 않고, 결과를 즉시 확인하면서
유니코 신원 확인 여정에 브랜드의 시각적 아이덴티티를 적용할 수 있습니다.

로고, 배경색, 버튼 색상 및 모양, 콘텐츠 색상을 설정합니다. 게시하면 구성이 즉시 적용되어 해당
브랜치에서 시작되는 다음 여정부터 반영됩니다.

:::info
**대상:** iFrame, Redirect 또는 SDK 통합 모델로 Web Journey를 사용하는 고객.

**최종 사용자에게 달라지는 점:** 신원 확인 중에 보는 화면이 이제 귀사의 브랜드처럼 보입니다.

**위치:** IDCloud 포털 → 사이드바 **설정** → **커스터마이징** 탭.
:::

## 시작하기 전에

### 접속 권한

사용자 계정에 IDCloud 포털의 **설정** 영역에 대한 접속 권한이 필요합니다. 사이드바에 톱니바퀴
아이콘이 표시되지 않으면 계정 관리자에게 권한 부여를 요청하세요.

### 구성이 적용되는 방식

| | |
| :- | :- |
| **범위** | 커스터마이징은 **브랜치**별 및 **통합 모델**별로 적용됩니다. iFrame과 Redirect/SDK는 독립적인 구성을 가지며, 하나를 게시해도 다른 하나에는 영향을 주지 않습니다. |
| **적용 시점** | 게시 즉시, **그 시점 이후에 시작된** 여정부터 적용됩니다. 이미 진행 중인 여정은 이전 모습을 유지합니다. |
| **커스터마이징하지 않을 경우** | 여정은 기본 유니코 테마를 불러옵니다. |
| **여정 버전** | 미리보기는 **Web Journey v3.0** 디자인을 기준으로 합니다. 다른 버전에서는 미리보기가 실제 결과를 정확히 반영하지 않을 수 있습니다 — 이 경우 버전 업데이트에 대해 유니코에 문의하세요. |

### 준비해야 할 항목

- **로고**는 PNG 형식으로, 가능하면 투명 배경, 최대 높이 **60px**, 최대 크기 **100KB**.
- 브랜드 색상의 **16진수 코드** (예: `#1B3FA0`).

### 통합에서 구성 가능한 항목

통합 모델 외에도, 화면에 표시되는 내용은 통합의 **Web Journey 버전**에 따라 달라집니다. 이는 "이
필드가 보이지 않아요"의 가장 흔한 원인입니다:

| 기능 | 1.0 iFrame | 2.0 iFrame | 3.0 iFrame | 1.0 redirect | 2.0 redirect | 3.0 redirect |
| :- | :-: | :-: | :-: | :-: | :-: | :-: |
| **로고** | ✅ | 없음 | 없음 | ✅ | ✅ | ✅ |
| **배경색** | — | — | — | — | — | ✅ |
| **버튼 배경색** | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| **버튼 텍스트 색상** | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| **버튼 테두리 반경** | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| **콘텐츠 색상** | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |

요약하면: **배경색은 redirect의 Web Journey v3.0에서만 구성 가능**하며, iFrame에서는 로고가 Web Journey
v1.0에만 존재합니다. 색상과 버튼 모양은 모든 조합에서 작동합니다.

:::info
사용 중인 버전을 모르는 경우, 온보딩 담당자 또는 유니코 지원팀에 확인하세요.
:::

## 단계별 안내

### 1단계 — 커스터마이징 탭 열기

IDCloud 포털에서 사이드바의 **톱니바퀴 아이콘(설정)**을 클릭하세요. 화면은 바로 **커스터마이징**
탭으로 열립니다.

설정 화면에는 세 개의 탭이 있습니다 — **커스터마이징**, **웹훅**, **QR 코드**. 이 가이드는
첫 번째 탭을 다룹니다.

![사이드바에서 톱니바퀴 아이콘이 강조된 설정 화면](/img/product-guide/journey-customization/en/01-settings-tab.png)

*커스터마이징 탭이 선택된 설정 화면.*

### 2단계 — 통합 모델 선택

왼쪽 열에서 **iFrame** 또는 **Redirect or SDK**를 선택하세요 — 모델에 따라 양식 필드가
달라집니다.

화면은 세 영역으로 구성됩니다: 왼쪽의 **모델 선택기**, 중앙의 **양식**, 그리고 게시 전에 모든
변경에 반응하는 오른쪽의 **실시간 미리보기**.

**두 모델을 모두 사용하는 경우 둘 다 구성해야 합니다.** 이들은 독립적인 구성입니다 — 하나를
조정하고 게시한 다음 다른 것도 반복하세요.

![전체 커스터마이징 화면: 모델 선택기, 양식, 미리보기](/img/product-guide/journey-customization/en/02-integration-model.png)

*iFrame / Redirect or SDK 선택기, 양식, 미리보기.*

### 3단계 — 로고 업로드

:::warning
**Redirect or SDK**에서 사용 가능합니다. iFrame에서는 Web Journey v1.0에서만 사용 가능합니다.
:::

**로고 추가**를 클릭하고 파일을 선택하세요. 요구 사항: **PNG**, 최대 높이 **60px**, 최대 크기
**100KB**.

**투명 배경의 PNG를 사용하세요.** 이렇게 하면 로고가 어떤 배경색에서도 잘 작동합니다 — 흰색
배경의 PNG는 배경에 색이 적용되면 눈에 보이는 사각형이 됩니다. 또한 로고의 가로형 버전을
선호하세요: 사용 가능한 공간이 넓고 짧습니다.

![형식, 높이, 크기 요구 사항이 표시된 로고 추가 필드](/img/product-guide/journey-customization/en/03-customization-form.png)

*형식, 높이, 크기 요구 사항이 있는 "로고 추가" 필드.*

### 4단계 — 색상 설정

양식에는 **배경**, **버튼**, **콘텐츠** 아래에 그룹화된 네 개의 색상 필드가 있습니다:

| 필드 | 여정에서 나타나는 위치 | 기본값 | 사용 가능 여부 |
| :- | :- | :- | :- |
| **배경색** | 여정 화면의 배경 | `#F2F2F7` | **redirect의 Web Journey v3.0**에서만 |
| **버튼 → 배경색** | 액션 버튼의 채우기 색 (예: "셀피 촬영") | — | 모든 버전 |
| **버튼 → 텍스트 색상** | 버튼 내부의 텍스트 | — | 모든 버전 |
| **콘텐츠 색상** | 제목 및 설명 (예: "신원 확인") | `#000000` | 모든 버전 |

이들 중 어느 것이든 **16진수 값을 직접 입력**하거나(예: `#1B3FA0`) 필드 왼쪽의 **색상 견본을
클릭**하여 시각적 선택기를 열 수 있습니다. 배경과 콘텐츠 필드는 비워두면 여정이 필드 자체에
자리표시자로 표시된 기본값을 사용합니다.

**배경색은 단색이 아니라 그라디언트로 적용됩니다.** 설정한 색조는 그라디언트의 상단이며, 화면
하단으로 갈수록 점점 어두워집니다. 매우 어두운 색조는 거의 검은색에 가까운 바탕이 됩니다 —
균일한 결과를 원한다면 중간에서 밝은 색조를 선택하세요.

**버튼 배경에는 브랜드의 주요 색상을 사용하세요.** 사용자가 가장 먼저 찾아야 하는 요소이기
때문입니다. 눈에 띄지 않으면 여정의 전환율이 떨어집니다.

**네 가지 색상을 하나씩이 아니라 한 세트로 선택하세요.** 이들은 서로 영향을 미칩니다: 어두운
배경에 검은색 콘텐츠 색상을 사용하면 여정을 읽을 수 없게 되고, 흰색 카드에 밝은 버튼을 사용하면
그냥 사라져 보일 수 있습니다. 네 가지를 모두 설정한 다음 미리보기(6단계)에서 결과를 확인하세요.

![배경색, 버튼 색상, 콘텐츠 색상 필드와 미리보기 결과](/img/product-guide/journey-customization/en/04-colors.png)

*배경색, 버튼 배경/텍스트 색상, 콘텐츠 색상 필드와 미리보기 결과.*

### 5단계 — 버튼 구성

세 개의 필드가 여정의 액션 버튼(예: "셀피 촬영")을 제어합니다:

| 필드 | 기능 |
| :- | :- |
| **배경색** | 버튼의 채우기 색상 |
| **텍스트 색상** | 버튼 내부 텍스트의 색상 |
| **테두리 반경** | 픽셀 단위의 모서리 둥글기 |

**테두리 반경**의 참고 값:

- 0 → 사각형 버튼, 각진 모서리
- 8~16 → 약간 둥근 모서리
- 24 이상 → 필 모양(완전히 둥근 형태)

버튼 높이의 절반을 넘는 값은 더 이상 결과를 바꾸지 않습니다 — 필 모양이 한계입니다.

**버튼 배경에는 브랜드의 주요 색상을 사용하세요.** 사용자가 가장 먼저 찾아야 하는 요소입니다 —
눈에 띄지 않으면 여정의 전환율이 떨어집니다. 그리고 테두리 반경을 제품의 나머지 부분과
일치시켜, 여정이 타사 사이트가 아니라 앱의 연속처럼 느껴지도록 하세요.

![미리보기에 반영된 버튼과 테두리 반경 필드](/img/product-guide/journey-customization/en/05-button-border-radius.png)

*배경색, 텍스트 색상, 테두리 반경과 미리보기에 반영된 버튼.*

### 6단계 — 모바일과 데스크톱에서 미리보기 확인

오른쪽의 미리보기는 모든 변경 사항에 대해 업데이트됩니다. 상단의 **Mobile / Desktop** 선택기를
사용하여 두 형식을 모두 확인하세요.

유효하지 않은 색상 값 — 색상 이름, 불완전한 16진수 코드 — 을 입력하면 필드에 **빨간색 테두리**가
표시되고 값이 미리보기에 적용되지 않습니다. 계속하기 전에 수정하세요.

**항상 Mobile 모드에서 검증하세요.** 대부분의 최종 사용자는 휴대폰으로 인증을 완료합니다.
가장 중요한 형식입니다. 그리고 세 가지 대비를 확인하세요: 버튼 배경에 대한 버튼 텍스트, 여정
카드에 대한 버튼, 배경색에 대한 콘텐츠 색상. 흰색 카드에 흰색 버튼을 설정하여 그냥 사라져 보이는
경우가 흔합니다 — 미리보기는 게시 전에 이를 드러내기 위해 존재합니다.

![미리보기 패널의 Mobile / Desktop 선택기](/img/product-guide/journey-customization/en/06-live-preview.png)

*Mobile / Desktop 선택기와 유효하지 않은 값이 강조된 색상 필드.*

### 7단계 — 게시

**게시** 버튼은 보류 중인 변경 사항이 있는 즉시 활성화됩니다.

- **게시**는 구성을 저장하고 여정에 적용합니다.
- **취소**는 편집한 모든 내용을 버리고 필드를 마지막으로 게시된 상태로 되돌립니다.
- **유니코 기본값으로 되돌리려면**, 색상 필드를 비우고(자리표시자가 다시 나타나도록) 로고를
  제거한 후 게시하세요.

**버전 기록이 없습니다.** 잘못된 구성을 게시한 경우, 값을 조정하고 다시 게시하는 것이 해결
방법입니다 — 이전 버전을 한 번의 클릭으로 복원하는 방법은 없습니다. 그래서 이전 단계에서
미리보기를 확인하는 것이 중요합니다. 아직 게시하지 않았다면 취소로 해결할 수 있습니다.

### 8단계 — 허용된 도메인 등록

:::warning
**iFrame** 모델에서만 사용 가능합니다.
:::

iFrame에서는 여정이 귀사의 페이지 안에 임베드되어 실행됩니다. 보안을 위해 여기에 등록된 도메인만
이를 로드할 수 있습니다.

1. 오른쪽 상단에서 **도메인 구성**을 클릭하세요.

   ![강조된 도메인 구성 버튼](/img/product-guide/journey-customization/en/07-configure-domains-button.png)

2. 사이드 패널에는 **등록된 도메인** 목록이 표시되며, 각 도메인에는 **편집**(연필) 및
   **삭제**(휴지통) 작업이 있습니다.

   ![등록된 도메인 목록이 있는 도메인 구성 패널](/img/product-guide/journey-customization/en/08-domains-list.png)

3. 도메인을 추가하려면 **도메인 생성**을 클릭하고, 도메인을 입력한 후 **저장**을 클릭하세요.

   ![도메인 생성 양식](/img/product-guide/journey-customization/en/09-create-domain.png)

프로토콜을 포함하여 도메인을 입력하세요 (`https://yoursite.com`).

**이 목록은 보안 설정이며 별도로 저장됩니다.** 메인 화면의 **게시**가 아니라 패널 자체의
**저장**을 통해 적용됩니다. 테스트 및 스테이징 도메인도 등록하고, 더 이상 사용하지 않는 도메인은
제거하세요 — 이것은 누가 여정을 임베드할 수 있는지에 대한 목록입니다.

## FAQ

**이미 진행 중인 여정에도 변경 사항이 적용되나요?** 아니요. 게시된 구성은 게시 이후에 시작된
여정에 적용됩니다.

**로고와 배경 필드가 보이지 않는 이유는 무엇인가요?** 두 가지 가능한 원인이 있습니다. 첫째:
**iFrame**이 선택되어 있을 수 있습니다 — iFrame에서는 여정이 귀사 페이지에 임베드되므로 이미
배경과 아이덴티티가 제공됩니다. 둘째: **Web Journey 버전**이 해당 필드를 노출하지 않을 수 있습니다.
배경색은 redirect의 Web Journey v3.0에만 존재하며, 로고는 iFrame의 Web Journey v1.0에만 존재합니다.
"시작하기 전에"의 표를 확인하세요.

**업로드 시 로고가 거부되었습니다. 왜 그런가요?** 세 가지 요구 사항을 확인하세요: **PNG** 형식,
최대 높이 **60px**, 최대 크기 **100KB**.

**화면 하단의 배경이 너무 어둡게 보입니다.** 예상된 동작입니다 — 배경은 위에서 아래로 어두워지는
그라디언트로 렌더링됩니다. 더 밝은 기본 색조를 선택하세요.

**미리보기가 실제 여정과 일치하지 않습니다.** 미리보기는 **Web Journey v3.0** 디자인을 기준으로
합니다. 통합이 다른 버전인 경우 결과가 다를 수 있습니다 — 버전 업데이트 검토를 위해 유니코에
문의하세요.

**잘못된 구성을 게시했습니다. 어떻게 되돌리나요?** 화면을 다시 열고 값을 조정하거나(기본값으로
되돌리려면 값을 지우고) 다시 게시하세요. 버전 기록은 없습니다. 아직 게시하지 않았다면 **취소**를
클릭하세요.

**누가 제 계정의 커스터마이징을 변경했나요?** 화면에는 이 기록이 표시되지 않습니다. 마지막
변경을 누가, 언제 했는지 확인하려면 유니코 지원팀에 문의하세요.

## 빠른 참조

```text
IDCloud 포털
 └─ 설정 (사이드바의 톱니바퀴 아이콘)
     └─ 커스터마이징 탭
         ├─ iFrame ............... 버튼 (배경, 텍스트 색상, 테두리 반경)
         │                         콘텐츠 (콘텐츠 색상)
         │                         + 도메인 구성
         └─ Redirect or SDK ...... 로고 (PNG, 60px, 100KB)
                                   배경 (색상, 그라디언트로 적용)
                                   버튼 (배경, 텍스트 색상, 테두리 반경)
                                   콘텐츠 (콘텐츠 색상)

실시간 미리보기 · Mobile / Desktop · 취소 · 게시
```