본인인증 모듈 | UI 디자인 사전

설명

정보통신망법과 전자금융거래법 영향으로 거의 모든 한국 서비스가 이 흐름을 씁니다. KCB와 NICE, SCI 같은 본인확인기관에 위탁된 외부 페이지로 점프하거나 임베드되고, 사용자는 통신사 선택, 약관 다중 동의, 이름·주민번호·휴대폰 입력, 마지막에 6자리 SMS OTP 입력까지 30초 안에 끝내야 해요. 외부 모듈이라 디자인은 우리 손에 없지만, 진입 직전 화면과 실패한 뒤 어디로 가야 할지를 안내하는 부분은 우리가 책임져야 합니다.

🖼️ 미니어처

본인 인증

SKT KT LGU+

알뜰SK 알뜰KT

전체 동의

필수

선택

본인인증 받기

💬 AI에게 이렇게 말하세요

한국형 본인인증 진입 화면을 만들어 주세요. 왜 인증이 필요한지 1줄, 어떤 정보를 사용하는지 chip 3개, '본인인증하기' CTA 1개로 구성합니다.
통신사 선택 5개(SKT, KT, LGU+, 알뜰폰SKT, 알뜰폰KT/LGU+) → 약관 다중 체크박스(전체 + 5개 개별 + 필수/선택 라벨) → '인증번호 받기' 흐름의 placeholder UI를 만들어 주세요.
외부 본인확인 모듈에서 돌아온 뒤 성공/실패 콜백을 받는 페이지를 만들어 주세요. 실패 시 '다시 시도' + '다른 방법으로 인증'(이메일·간편인증) 두 옵션 제시.

왜 한국에만 있나요

정보통신망법 제23조의2(주민등록번호 사용 제한)와 전자금융거래법이 본인확인 의무를 만든 결과예요. 외국 서비스는 이 흐름을 그대로 차용할 수 없고, 본인확인기관(KCB·NICE·SCI)을 거쳐야 해요. AI 코딩 시 "한국 회원가입" 같은 키워드만으로는 모델이 일반 OTP 흐름을 만들어 버리므로, 본인인증은 외부 모듈을 호출하는 패턴이라는 점을 명시해 줘야 합니다.

약관 다중 체크 UX 핵심

전체 동의 1개와 개별 동의 4~6개로 구성합니다.
필수와 선택 라벨을 명시해요.
각 약관 옆에 '보기' 버튼을 두고 클릭하면 전문 모달이 뜨도록 처리합니다.
선택 약관을 미체크해도 가입이 가능해야 해요(필수만 강제).

⚡ 사용 예 (한 줄)

// 본인확인 진입 (KCB 예시)
const openVerification = () => window.open('/api/auth/kcb/init', 'verify', 'width=480,height=640')

🧩 컴포넌트 매핑

외부 본인확인 모듈은 직접 만들지 않아요. KCB·NICE·SCI iframe 또는 redirect를 사용합니다. 진입과 리턴 UX만 다루고, shadcn/ui Dialog + Checkbox + Button + input-otp를 조합해요. 간편인증 대안으로는 카카오, 네이버, 통신사 PASS가 있습니다.

🚫

이렇게 하지 마세요

본인인증을 가입 단계 직전에 들이미는 것은 위험합니다. 사용자가 가치를 느끼기 전에 주민번호를 요구하면 이탈 1순위예요. 결제·금융 직전까지 미루고, 그 시점에 '왜 필요한지'를 명시해 주세요.

🇰🇷

국내 UI 특징

만 14세 미만은 법정대리인 동의가 따로 필요해요. 외국인은 외국인등록번호 흐름이 따로 분기됩니다. 통신사 알뜰폰은 분류가 별도여서 SKT/KT/LGU+ 3사만 노출하면 알뜰폰 사용자가 막혀요. 최근에는 PASS·카카오·네이버 간편인증을 동등한 옵션으로 제시하는 게 표준이에요.