[인증(IAM) UI/UX 고도화] Keycloakify 기반 React 디자인 시스템 통합 및 IAM 프레젠테이션 계층 디커플링

💡 [통합 인증(IAM) UI/UX 고도화] Component-Driven Architecture 기반 UI 컴포넌트 격리 및 시각적 회귀 테스트(VRT) 파이프라인 구축

[한 줄 요약] 백엔드(Keycloak)와 디커플링된 React 프레젠테이션 계층에 Storybook 기반의 컴포넌트 주도 개발(CDD)과 자동화된 테스트 체계를 결합하여, 무거운 인증 서버 구동 없이도 UI를 검증하는 아키텍처를 수립한 프로젝트입니다.

📌 배경 및 문제 상황 (Problem)

- 디커플링에 따른 UI 검증 사각지대 발생: Keycloakify 도입으로 프런트엔드를 백엔드에서 분리했으나, 역설적으로 복잡한 IAM 인증 상태(비밀번호 만료, 2FA 인증, 약관 동의 등)를 테스트하기 위해 매번 로컬에 무거운 Keycloak 서버를 기동하고 특정 사용자 상태를 세팅해야 하는 오버헤드가 발생. - 전사 SSO UI의 시각적 회귀(Visual Regression) 리스크: 공통 인증 컴포넌트의 사소한 CSS 변경이 여러 서비스 화면에서 사이드 이펙트(UI 깨짐)를 유발할 수 있으나, 이를 배포 전에 감지할 통합 테스트 환경이 부재. - 형상 관리 및 협업 병목: 비즈니스 로직과 화면이 분리됨에 따라 기획/디자인 조직과 개발 조직 간 UI 상태 스펙에 대한 커뮤니케이션 비용이 늘고, 파편화된 문서로 유지보수성이 하락.

🛠️ 해결 과정 및 역할 (Action)

1. [Keycloak Context 추상화 및 독립적 테스트 샌드박스(Storybook) 구축]

Storybook을 전사 통합 인증 UI의 단일 진실 공급원(SSOT, Single Source of Truth)으로 도입하여, 뷰(View) 렌더링 파이프라인을 원자(Atom) 단위로 격리하는 컴포넌트 주도 개발(CDD) 아키텍처를 설계함.
Keycloak 서버에 강결합된 OIDC 세션 및 상태값(kcContext)을 Storybook 내에서 Mocking하는 추상화 어댑터를 구현. 이를 통해 백엔드 인프라 의존성 없이 프런트엔드 모듈 단독으로 엣지 케이스(Edge-case)를 렌더링하고 검증할 수 있는 샌드박스 환경을 구축함.

2. [CI/CD 파이프라인 연동 기반 시각적 회귀 테스트(VRT) 자동화]

빌드 파이프라인에 Storybook Test Runner 및 Chromatic(또는 유사 VRT 툴)을 연동하여, 프레젠테이션 계층의 테스트 자동화 체계를 확립함.
UI 레포지토리에 PR(Pull Request) 발생 시, 이전 릴리즈와 현재 컴포넌트 간의 픽셀 단위 시각적 변경 사항(Visual Regression)과 컴포넌트 인터랙션(Click, Input 훅 등) 테스트가 CI 환경에서 자동으로 수행되도록 파이프라인을 구성함.

3. [전사 통합 디자인 시스템 생태계 및 문서화 체계 수립]

테스트 완료 후 빌드된 정적 Storybook 페이지를 사내 클라우드에 자동 퍼블리싱하여, 개발/디자인/기획 이해관계자가 인증 UI 상태를 확인하고 인터랙션할 수 있는 '살아있는 문서(Living Documentation)' 인프라를 수립함.

📈 업무 성과 (Result)

무거운 백엔드 인증 서버(Keycloak) 기동 및 데이터 세팅 없이 UI 컴포넌트를 독립적으로 테스트할 수 있게 되어, 프런트엔드 개발 및 디버깅 리드타임을 단축했습니다.
CI 파이프라인에 통합된 자동화 테스트(VRT)를 통해, 전사 SSO 테마 변경 시 발생할 수 있는 휴먼 에러와 레이아웃 붕괴를 배포 전 단계에서 잡아낼 수 있게 했습니다.
복잡한 IAM 엣지 케이스가 Storybook 코드로 명세화됨에 따라, 커뮤니케이션 오버헤드와 별도 문서 작성 부담을 줄이고 다기능(Cross-functional) 팀 간 협업 효율을 높였습니다.