Cloudflare, 76억 뷰 UI, 턴스타일(Turnstile)과 챌린지 페이지(Challenge Pages) 전면 개편

Cloudflare의 Turnstile 위젯과 Challenge Pages는 매일 76억 회 노출되며, 인터넷에서 가장 많이 보이는 UI 중 하나임

디자인 감사(Design Audit)를 통해 UI의 일관성 부족, 기술적 용어 과다 사용 등 문제점을 파악하고, 사용자 여정(User Journey) 분석을 통해 개선 방향 설정

AAA 접근성(Accessibility) 표준 준수, 다국어 지원 강화를 통해 모든 사용자를 위한 UI/UX(User Experience) 개선을 목표로 함

76억 뷰 UI, 디자인 시스템(Design System) 구축의 중요성

본문에서 Cloudflare는 Turnstile 위젯과 Challenge Pages의 일관성 부족 문제를 해결하기 위해 통합된 정보 아키텍처(Unified Information Architecture)를 구축했다. 이는 UI의 각 요소(오류 메시지, 도움말 링크 등)의 위치와 구조를 통일하여 사용자가 UI를 더 쉽게 이해하도록 돕는다.

Don't Make Me Think: 사용자가 UI를 해석하는 데 들이는 인지 부하(Cognitive Load)를 최소화

AAA 접근성(Accessibility) 표준: 시각적 일관성(Visual Consistency)과 가독성(Readability) 사이의 균형을 유지

다국어 지원: 40개 이상의 언어 지원을 위해 간결하고 명확한 메시지 전달

결과적으로, 일관된 디자인 시스템(Design System)은 사용자 경험(UX)을 개선하고, 유지보수성을 높이며, 새로운 기능 추가 시 일관성을 유지하는 데 기여한다.

Rust 기반 UI 개발의 도전 과제

Cloudflare는 Turnstile 위젯과 Challenge Pages의 UI를 Rust로 구현하여 안전성(Safety)과 플랫폼 간 일관성(Consistency)을 확보했다. 하지만, Rust는 JavaScript 기반 프레임워크에 비해 UI 개발의 복잡성을 증가시킨다.

낮은 수준의 API 사용: `document.getElementById`, `createElement`, `appendChild` 등 저수준 API를 직접 사용

빌드 시간(Build Time) 증가: 컴파일 시간(Compile Time) 및 엄격한 타입 검사(Type Check)로 인해 빠른 UI 반복(Rapid UI Iteration) 어려움

디버깅(Debugging) 어려움: 툴링(Tooling) 생태계가 아직 발전 중

이러한 제약은 개발자가 UI 개발에 더욱 신중하고, 체계적인 접근 방식을 취하도록 유도하며, 테스트(Testing)의 중요성을 강조한다.

다국어 지원(Internationalization) 전략

Cloudflare는 38개 언어 지원을 위해 다국어 지원(Internationalization)에 많은 노력을 기울였다. 텍스트 길이의 변화, 오른쪽에서 왼쪽으로 읽는 언어(Right-to-Left Language) 지원, 문화적 차이를 고려한 숫자 표기 등 다양한 문제를 해결했다.

텍스트 길이 가변성: 영어보다 30~300% 긴 번역본을 고려한 레이아웃 설계

RTL(Right-to-Left) 언어 지원: 텍스트 방향, 정렬, 탐색 패턴, 아이콘, 애니메이션 등 전체 레이아웃 변경

지역 기반 숫자 표기: 서구식 숫자 표기 외 다양한 문화권의 숫자 표기 지원

이러한 노력은 모든 사용자가 자국어 환경에서 불편함 없이 UI를 이용하도록 돕고, 글로벌 서비스(Global Service)의 성공적인 운영을 위한 필수 요소이다.

사용자 중심의 테스트(Testing) 전략

Cloudflare는 Turnstile 위젯과 Challenge Pages의 리디자인(Redesign) 과정에서 사용자 중심의 테스트(Testing)를 통해 디자인 결정의 타당성을 검증했다.

A/B 테스트(A/B Test): 기존 UI와 새로운 UI를 비교하여 사용자 선호도 측정

사용자 피드백(User Feedback) 수집: 문제 해결(Troubleshooting)을 위한 명확한 안내 제공

AAA 접근성(Accessibility) 검증: WCAG 2.2 AAA 표준 준수

테스트 결과, 기존의 “I am human” 대신 “Verify you are human”과 같은 명확한 문구가 사용자에게 더 긍정적인 반응을 얻었다. 또한, 오류 발생 시 “Send Feedback” 대신 “Troubleshoot”를 제공하여 사용자의 문제 해결 의지(Problem-solving Intention)를 높였다.