Razorpay는 다양한 플랫폼과 제품군 전반에서 일관되고 직관적인 사용자 경험을 유지하기 위해 'Blade'라는 디자인 시스템을 구축했습니다. Blade는 디자인과 엔지니어링 사이의 간극을 메워 개발 워크플로우를 최적화하며, 복잡한 핀테크 제품의 UI 개발 속도를 대폭 향상하는 것을 목표로 합니다. 결과적으로 이를 통해 개발자는 반복적인 스타일 작업에서 벗어나 핵심 비즈니스 로직에 더욱 집중할 수 있게 되었습니다.

크로스 플랫폼 일관성을 위한 Blade 시스템 구축

웹과 모바일(Android, iOS) 환경 모두를 지원하기 위해 React와 React Native를 기반으로 한 통합 컴포넌트 라이브러리를 운영합니다.
제품별로 파편화되어 있던 UI 요소를 표준화하여, 어떤 서비스에서도 사용자가 동일한 브랜드 경험을 느낄 수 있도록 설계했습니다.
디자인 토큰(Design Tokens)을 활용하여 색상, 타이포그래피, 간격 등의 스타일 요소를 코드화하고 이를 중앙에서 관리함으로써 변경 사항을 실시간으로 전체 플랫폼에 반영합니다.

개발자 경험(DX) 향상과 워크플로우 자동화

Blade CLI와 같은 자체 도구를 개발하여 컴포넌트 생성 및 설정 과정을 자동화하고, 개발자가 수동으로 수행하던 반복 작업을 최소화했습니다.
포괄적인 문서화와 실시간 프리뷰 기능을 제공하는 스토리북(Storybook)을 통해 개발자가 컴포넌트의 사양과 사용법을 즉각적으로 파악할 수 있도록 지원합니다.
자동화된 린팅(Linting) 및 테스트 스크립트를 워크플로우에 통합하여, 코드 작성 단계에서부터 디자인 시스템 준수 여부를 검증합니다.

접근성(A11y) 및 품질 보증 내재화

모든 기본 컴포넌트에 WCAG(웹 콘텐츠 접근성 지침) 표준을 내장하여, 별도의 추가 작업 없이도 접근성이 보장된 제품을 개발할 수 있는 환경을 제공합니다.
컴포넌트 단위의 엄격한 유닛 테스트와 시각적 회귀 테스트(Visual Regression Testing)를 통해 시스템 업데이트 시 발생할 수 있는 의도치 않은 UI 오류를 사전에 방지합니다.
디자인 시스템 전담 팀이 정기적으로 피드백을 수렴하고 라이브러리를 고도화하여 최신 기술 트렌드와 비즈니스 요구사항을 즉각 반영합니다.

대규모 조직에서 제품의 확장성을 확보하려면 단순한 가이드를 넘어 도구화된 디자인 시스템이 필수적입니다. Razorpay의 사례처럼 디자인 시스템을 라이브러리 형태를 넘어 개발 프로세스 자체에 통합하는 방식은 개발 효율성과 제품 품질을 동시에 잡을 수 있는 가장 실무적인 전략입니다.