여정 커스터마이징

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

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

정보

대상: iFrame, Redirect 또는 SDK 통합 모델로 웹 여정(CbU)을 사용하는 고객.

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

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

시작하기 전에

접속 권한

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

구성이 적용되는 방식

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

준비해야 할 항목

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

통합에서 구성 가능한 항목

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

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

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

정보

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

단계별 안내

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

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

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

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

2단계 — 통합 모델 선택

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

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

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

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

3단계 — 로고 업로드

경고

Redirect or SDK에서 사용 가능합니다. iFrame에서는 CbU 1.0에서만 사용 가능합니다.

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

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

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

4단계 — 색상 설정

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

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

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

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

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

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

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

5단계 — 버튼 구성

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

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

테두리 반경의 참고 값:

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

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

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

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

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

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

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

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

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

7단계 — 게시

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

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

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

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

경고

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

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

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

   

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

   

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

   

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

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

FAQ

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

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

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

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

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

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

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

빠른 참조

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

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