WIZ Design System

제품 사용자가 자기 계정의 보안을 관리하는 화면입니다. 어느 SaaS에나 필요한 보안 설정 IA를 WDS 컴포넌트로 조합해, 제품은 백엔드만 연결하면 됩니다(WDS는 표현 패턴·컴포넌트를 제공).

데모#

상단 시나리오 컨트롤로 정상 / 주의를 전환합니다. 주의에선 알 수 없는 위치의 의심 세션이 표에 나타나고 상단 경고가 함께 떠 — 위협을 한 화면에서 인지·조치하는 흐름을 보입니다. 실제 백엔드는 없습니다(UI Reference).

시나리오

인증 & 접근

로그인 방식을 관리하고 더 강한 인증을 켜세요.

2단계 인증 (2FA)로그인마다 인증 앱 코드 한 번 더사용 중
조직 SSOSAML · OAuth 2.0으로 IdP 연결미설정
패스키 · 생체 인증Face ID · 지문 · 하드웨어 보안 키사용 중

로그인 알림

의심스러운 활동을 메일로 받습니다.

새 기기 로그인 메일처음 보는 기기에서 로그인 시
비정상 위치 알림평소 지역 밖에서 접속 시
로그인 실패 알림5회 이상 실패 시

비밀번호

마지막 변경 42일 전

강도

자동 만료90일마다 강제 재설정

활성 세션

현재 로그인된 기기 — 모르는 세션은 회수하세요.

활성 세션 목록
기기	위치	최근 활동	상태
MacBook Pro · Chrome현재 기기	서울, KR	지금	활성
Windows PC · Edge	서울, KR	6월 14일 21:10	활성
iPhone 15 · Safari	부산, KR	6월 5일 11:25	유휴

위험 구역

되돌릴 수 없는 작업입니다. 신중히 진행하세요.

모든 기기 로그아웃현재 기기를 제외한 모든 세션을 즉시 회수

계정 삭제계정 · 프로젝트 · 모든 데이터를 영구 삭제

Security Settings — 인증&접근 · 알림 · 비밀번호 · 활성 세션 · 위험 구역(좁아지면 적층)

구성#

영역	역할	WDS
인증 & 접근	2FA · SSO · 패스키 — 사용 중/미설정 + 관리/설정	코어 아이콘 + Badge + Button(ghost)
로그인 알림	새 기기·비정상 위치·실패 알림 토글	Switch(라벨/설명 행)
비밀번호	강도 미터 + 자동 만료 + 변경	강도 미터 + Badge + Switch + Button
활성 세션	기기·위치·최근활동·상태 + 회수	Table + 상태 Badge + Button
위험 구역	전체 로그아웃 · 계정 삭제	error 토큰 테두리·제목 + Button

세션 상태 배지#

세션 상태는 3채널(텍스트 라벨 + 색)로 전달합니다 — 색만으로 의미를 싣지 않습니다.

상태	Badge	의미
활성	`success`	지금 사용 중
유휴	`neutral`	한동안 활동 없음
의심	`error`	비정상 위치·기기 — 회수 권장

레퍼런스 목업엔 세션에 Refunded 같은 결제 상태가 잘못 섞여 있었는데, 보안 맥락에 맞게 활성·유휴·의심·회수됨으로 재정의했습니다.

재사용 — 제품이 붙이는 것#

WDS는 UI 패턴 + 컴포넌트(표현) 를 제공하고, 각 제품이 자기 백엔드를 연결합니다.

WDS 제공	제품 연결
화면 IA · 컴포넌트 · 상태/배지/토큰	2FA 시크릿 · SSO(SAML/OAuth) 설정
의심 세션 표면(경고+표)	실제 세션 목록 · 지오로케이션 · 회수 API
강도 미터 · 변경 폼	비밀번호 정책 강제 · 저장(해시)

오너 전용 어드민 콘솔의 패스키·비밀번호·세션 로직이 이 패턴의 동작하는 예시입니다(맥락만 다름 — 어드민은 오너 1인, 이 패턴은 제품 사용자 본인).

적응형 동작#

컨테이너 폭	레이아웃
넓을 때	알림·비밀번호 2열, 세션 표 전체폭
좁을 때	2열이 단독 적층(`auto-fit minmax`), 표 가로 스크롤(caption=키보드 도달 region)

접근성#

계약	구현
토글 이름	시각 라벨과 별개로 `Switch`에 `aria-label`
상태 의미	색 + 텍스트 라벨(Badge 내용) 3채널 — 색맹 안전
위협 알림	의심 시 `Alert(warning)` `role` 낭독 + 표에 의심 행
표 도달	`caption` 제공 시 가로 스크롤 래퍼가 키보드 도달 region(WCAG 2.1.1)
아이콘	장식 아이콘 `aria-hidden` — 의미는 텍스트가 전달

신규 부품 (WDS 승격 후보)#

이 패턴이 드러낸 재사용 프리미티브 — 차기 정식 WDS 컴포넌트 후보입니다.

부품	용도	상태
PasswordStrength	강도 미터 + 라벨	데모 인라인 → 컴포넌트 승격 예정
SettingRow	라벨+설명+컨트롤 행	조합 패턴 → 프리미티브 검토
OneTimeCodeInput	OTP·2FA·복구 코드 입력	어드민 복구와 공용 신설 예정

사용 컴포넌트#

Table · Badge · Switch · Button · 코어 아이콘(ShieldIcon·FingerprintIcon·DeviceLaptopIcon 등) · Alert(의심 경고) · SegmentedButton(데모 컨트롤). 실제 백엔드는 없습니다 — UI Reference입니다.