> ## Documentation Index
> Fetch the complete documentation index at: https://developers.argosidentity.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 라이브폼 커스터마이징

> 결과 페이지 및 언어별 이미지 설정을 통해 브랜드에 맞는 사용자 경험을 제공하는 방법을 안내합니다.

결과 페이지 커스터마이징 기능은 ID check 인증 완료 후 사용자에게 표시되는 결과 페이지를 맞춤 설정할 수 있는 기능입니다. 승인(Approved), 거절(Rejected), 보류(Pending) 상태별로 언어별 맞춤 페이지를 구성하여 사용자에게 명확하고 일관성 있는 브랜드 경험을 제공할 수 있습니다.

## 활용 사례

<AccordionGroup>
  <Accordion title="금융 서비스의 브랜드 일관성 유지" icon="building-columns">
    은행이나 핀테크 서비스에서는 승인 시 환영 메시지와 함께 다음 단계 안내(계좌 개설, 카드 발급 등)를 제공하고, 거절 시에는 재시도 방법이나 고객센터 연락처를 안내할 수 있습니다. 보류 상태에서는 추가 서류 제출 방법과 예상 처리 시간을 명확히 안내하여 고객 불안감을 해소할 수 있습니다.
  </Accordion>

  <Accordion title="글로벌 서비스의 다국가 지원" icon="globe">
    국제 서비스를 제공하는 플랫폼에서는 각 국가별 언어로 결과 페이지를 구성하여 현지화된 사용자 경험을 제공할 수 있습니다. 각 지역의 문화적 특성을 반영한 이미지와 메시지를 활용하여 사용자 친화적인 인터페이스를 구축할 수 있습니다.
  </Accordion>

  <Accordion title="e-커머스 플랫폼의 판매자 온보딩" icon="cart-shopping">
    온라인 마켓플레이스에서는 판매자 인증 완료 시 판매 시작 가이드와 함께 프로모션 혜택을 안내하고, 거절 시에는 개선 방안과 재신청 절차를 상세히 제공할 수 있습니다.
  </Accordion>
</AccordionGroup>

<Tip>
  **사용자 경험 최적화**

  결과 페이지는 사용자 여정의 중요한 터치포인트입니다. 각 상태별로 적절한 감정 톤과 후속 행동 유도를 통해 사용자 만족도를 높이고 서비스 완료율을 개선할 수 있습니다.
</Tip>

***

## Step 1: 결과 페이지 설정 접근

ID check 프로젝트의 결과 페이지를 커스터마이징하기 위해 대시보드에서 해당 프로젝트의 결과 페이지 설정 메뉴에 접근합니다.

<Frame caption="결과 페이지 커스터마이징 설정 화면">
  <img src="https://mintcdn.com/argosidentity/352WpTnZFyEfW7I6/images/dashboard/new/pj/cx_customizing/livform_customizing.png?fit=max&auto=format&n=352WpTnZFyEfW7I6&q=85&s=a71b109b1fead073b3b00e5795a64c1d" alt="결과 페이지 커스터마이징 설정" width="1916" height="909" data-path="images/dashboard/new/pj/cx_customizing/livform_customizing.png" />
</Frame>

***

## Step 2: 상태 및 언어 설정

결과 페이지를 설정할 상태와 언어 조합을 선택합니다.

<Info>
  **상태별 설정 가능**

  Approved(승인), Rejected(거절), Pending(보류) 각 상태별로 개별 설정이 가능하며, 지원하는 모든 언어에 대해 각각 다른 페이지를 구성할 수 있습니다.
</Info>

| 설정                    | 설명                                            |
| --------------------- | --------------------------------------------- |
| **Status & Language** | 커스터마이징할 결과 상태(승인/거절/보류)와 언어를 조합하여 선택합니다.      |
| **미리 보기 기능**          | 설정 과정에서 오른쪽 미리 보기 창을 통해 실시간으로 결과를 확인할 수 있습니다. |

***

## Step 3: 시각적 요소 설정

각 결과 페이지의 시각적 구성 요소를 설정합니다.

| 설정             | 설명                                     |
| -------------- | -------------------------------------- |
| **KYC 결과 이미지** | 각 페이지별로 노출할 이미지를 업로드하여 브랜드 정체성을 반영합니다. |
| **이미지 최적화**    | 다양한 디바이스와 화면 크기에 적합한 이미지 규격을 권장합니다.    |

***

## Step 4: 텍스트 콘텐츠 작성

사용자에게 전달할 메시지를 작성합니다.

| 필드         | 설명                                  | 제한      |
| ---------- | ----------------------------------- | ------- |
| **메인 텍스트** | 신원 인증 결과에 맞는 직관적이고 명확한 주요 메시지       | 최대 125자 |
| **서브 텍스트** | 메인 텍스트를 보완하고 사용자의 후속 행동을 안내하는 상세 정보 | 최대 100자 |

<Note>
  **텍스트 작성 가이드라인**

  각 지원되는 언어별(우측 상단)로 승인/대기중/거절 상태의 메인 텍스트, 서브 텍스트를 기입하세요. 사용자가 접할 수 있는 거절 상세 메시지는 커스텀이 되지 않습니다.
</Note>

위와 같은 세부 설정을 마쳤다면, **저장**을 눌러주세요.

***

## Step 5: 테스트 및 최적화

결과 페이지 설정 완료 후 다음과 같은 방식으로 검증하고 최적화할 수 있습니다:

<Steps>
  <Step title="상태별 테스트">
    각 상태별 테스트 제출을 통해 결과 페이지를 확인합니다.
  </Step>

  <Step title="언어 설정 검토">
    다양한 언어 설정에서의 페이지 표시를 검토합니다.
  </Step>

  <Step title="브랜드 일관성 점검">
    이미지와 텍스트의 브랜드 일관성을 점검합니다.
  </Step>

  <Step title="지속적 개선">
    사용자 행동 데이터와 피드백을 분석하여 효과성을 지속적으로 개선합니다.
  </Step>
</Steps>

***

## 결과 페이지 커스터마이징의 장점

<CardGroup cols={2}>
  <Card title="브랜드 일관성" icon="palette">
    브랜드 일관성을 유지한 사용자 경험을 제공합니다.
  </Card>

  <Card title="다국가 지원" icon="globe">
    다국가 서비스를 위한 언어별 맞춤 설정이 가능합니다.
  </Card>

  <Card title="사용자 만족도 향상" icon="face-smile">
    상태별 최적화된 메시지 전달로 사용자 만족도를 향상시킵니다.
  </Card>

  <Card title="서비스 완료율 개선" icon="chart-line-up">
    후속 행동 유도를 통한 서비스 완료율을 개선합니다.
  </Card>
</CardGroup>

<Info>
  라이브폼 커스터마이징 기능은 계속하여 업그레이드 중에 있습니다. 더욱 다양한 옵션을 통해 귀하의 서비스로 연결되는 신원인증 기능을 제공하도록 하겠습니다.
</Info>

***

## Custom Theme (쿼리 스트링)

<Note>
  Custom Theme는 이 대시보드 페이지에서 설정하는 기능이 아닙니다. 라이브폼 URL에 쿼리 스트링 파라미터를 직접 추가하여 적용합니다.
</Note>

결과 페이지 커스터마이징 외에도, `mainColor`와 `innerColor` 쿼리 스트링 파라미터를 사용하여 라이브폼의 CTA 버튼 및 positive 액션 UI 요소에 브랜드 색상을 적용할 수 있습니다. KYC 플로우 전반에 걸쳐 일관된 브랜딩을 유지할 수 있습니다.

### 쿼리 스트링 파라미터

| 파라미터         | 형식                            | 설명                                    |
| ------------ | ----------------------------- | ------------------------------------- |
| `mainColor`  | `#` 포함 6자리 hex (예: `#AEFF00`) | CTA 버튼 및 주요 액션 요소의 기본 색상을 설정합니다.      |
| `innerColor` | `#` 포함 6자리 hex (예: `#FFFFFF`) | CTA 버튼 및 액션 요소 내부의 텍스트/아이콘 색상을 설정합니다. |

<Warning>
  * `#` 접두사는 필수입니다. `#` 없이 값을 입력하면 (예: `AEFF00`) 정상적으로 적용되지 않습니다.
  * 반드시 암호화하여 사용해야 합니다. 위 값들은 `encrypted` 파라미터 안에 포함되어야 합니다.
</Warning>

**예시 URL:**

```
https://form.argosidentity.com?pid={project_Id}&encrypted={'mainColor': '#AEFF00', 'innerColor': '#FFFFFF'}
```

<Note>
  `encrypted` 내부의 내용은 암호화되어야 합니다. 위 URL은 설명을 위해 암호화되지 않은 상태로 표시됩니다.
</Note>

### 컬러 미리보기

<div style={{display: 'flex', gap: '12px', alignItems: 'center', margin: '16px 0'}}>
  <div style={{display: 'flex', alignItems: 'center', gap: '6px'}}>
    <div style={{width: '16px', height: '16px', borderRadius: '4px', backgroundColor: '#AEFF00', border: '1px solid #E5E7EB'}} />

    <span style={{fontSize: '13px', color: '#374151'}}>`mainColor`: `#AEFF00`</span>
  </div>

  <div style={{display: 'flex', alignItems: 'center', gap: '6px'}}>
    <div style={{width: '16px', height: '16px', borderRadius: '4px', backgroundColor: '#FFFFFF', border: '1px solid #E5E7EB'}} />

    <span style={{fontSize: '13px', color: '#374151'}}>`innerColor`: `#FFFFFF`</span>
  </div>
</div>

<Frame caption="Custom Theme 적용된 라이브폼 (mainColor: #AEFF00, innerColor: #FFFFFF)">
  <img src="https://mintcdn.com/argosidentity/4V7KlU72S_FWV-KF/images/liveform/custom-theme/custom_theme_ko.png?fit=max&auto=format&n=4V7KlU72S_FWV-KF&q=85&s=46a3f38e895b62285f6ab72de03af67d" alt="커스텀 브랜드 색상이 적용된 라이브폼 시작 화면의 녹색 CTA 버튼" style={{maxHeight: '400px', width: 'auto'}} width="394" height="870" data-path="images/liveform/custom-theme/custom_theme_ko.png" />
</Frame>

### 변경 대상

#### `mainColor` — 화면별 적용 요소

<Expandable title="mainColor 상세 적용 범위">
  | 화면                                             | 적용 요소                                                   |
  | ---------------------------------------------- | ------------------------------------------------------- |
  | 시작 페이지 (`/main`)                               | 시작 / 전송 버튼 (그라디언트 배경)                                   |
  | 신분증 촬영 (`/shoot-id-card`)                      | 촬영 버튼, 앞면 방향 라벨 색상, 촬영 가이드 (positive 슬라이드 배경, 아이콘 스트로크) |
  | 신분증 뒷면 촬영 (`/shoot-id-card-back`)              | 촬영 버튼, 촬영 가이드 (positive 슬라이드 배경, 아이콘 스트로크)              |
  | 신분증 검토 (`/id-card-review`)                     | 제출 / 재촬영 버튼                                             |
  | Knowledge-Based 폼 (`/knowledge-form`)          | 다음 단계 버튼                                                |
  | 추가 정보 폼 (`/additional-form`)                   | 제출 버튼                                                   |
  | 주소 검색 (`/address`)                             | 선택 버튼, 지도 핀 아이콘 배경, "주소 변경" 링크 텍스트 색상                   |
  | 셀피 촬영 — passive (`/shoot-face`)                | 가이드 텍스트, 진행 상태 텍스트                                      |
  | Active Liveness 가이드 (`/active-liveness-guide`) | 단계 안내 텍스트 및 아이콘 색상                                      |
  | 제출 결과 (`/submission-result`)                   | 재시도 / 완료 버튼, 결과 상태 아이콘 (승인)                             |
  | 얼굴 인증 (`/face-auth`, `/face-auth-result`)      | 시작 버튼, 결과 확인 버튼                                         |
  | 오류 페이지 (`/error-page`)                         | 재시작 / 재시도 버튼 (refresh, not-allow-file-upload 타입만)       |
  | PC QR 스캔 페이지                                   | 페이지 배경 그라디언트, QR 코드 모서리 테두리 색상                          |
  | 알림 팝업 (전체 화면)                                  | 성공 아이콘만 (`success` 타입); error / warning / info 아이콘은 미적용 |
  | SVG 아이콘 (전체 화면)                                | Positive 테마 그라디언트 아이콘 (예: ShieldCheck)                  |
</Expandable>

#### `innerColor` — 적용 요소

<Expandable title="innerColor 상세 적용 범위">
  | 화면             | 적용 요소                                                 |
  | -------------- | ----------------------------------------------------- |
  | 전체 화면 — CTA 버튼 | 버튼 텍스트 색상 (`innerColor`가 `#FFFFFF` 또는 `#FFF`인 경우 미적용) |
  | 전체 화면 — 헤더     | 현재 선택된 언어 버튼 텍스트 색상                                   |
  | 신분증 촬영 가이드     | Positive 슬라이드 안내 텍스트 색상                               |
</Expandable>

#### 미적용 대상

| 요소                               | 사유                    |
| -------------------------------- | --------------------- |
| Negative 표시 (거절, 경고 아이콘)         | Negative 테마 색상 고정     |
| Error / Warning / Info 알림 팝업 아이콘 | 각 테마 색상 고정            |
| 검정색 본문 텍스트                       | Custom Theme 적용 대상 아님 |
| 신분증 뒷면 방향 라벨                     | 분홍색 고정                |

<Info>
  Custom Theme는 현재 CTA 버튼 및 승인 관련 UI 등 positive 액션 요소에만 적용됩니다. Negative 표시(거절, 경고) 및 기존 검정색 텍스트는 변경되지 않으며, 이 요소들에 대한 지원은 향후 업데이트에서 제공될 예정입니다.
</Info>

<Tip>
  대시보드 **프로젝트 설정 > 프로젝트 정보**의 [쿼리스트링 암복호화 툴](/dashboard/ko/project-management/project-settings/project-info#쿼리스트링-암복호화-툴)을 사용하여 Custom Theme 파라미터를 간편하게 테스트할 수 있습니다.
</Tip>

***

## 관련 문서

<CardGroup cols={2}>
  <Card title="프로젝트 정보" icon="sliders" href="/dashboard/ko/project-management/project-settings/project-info">
    브랜딩 및 Return URL 설정을 확인합니다.
  </Card>

  <Card title="라이브폼 언어 지원" icon="language" href="/ko/idcheck/getting-started/liveform-languages">
    라이브폼이 지원하는 언어 목록을 확인합니다.
  </Card>

  <Card title="Return URL 가이드" icon="arrow-turn-down-right" href="/ko/idcheck/getting-started/liveform-url/return-url-guide">
    Return URL 설정 방법을 확인합니다.
  </Card>
</CardGroup>