본 콘텐츠는 사용자의 편의를 고려해 자동 기계 번역 서비스를 사용하였습니다. 영어 원문과 다른 오류, 누락 또는 해석상의 미묘한 차이가 포함될 수 있습니다. 필요하시다면 영어 원문을 참조하시기를 바랍니다.
이미 보셨을 겁니다. 의식적으로 등록하지는 않았지만, 목격했을 수도 있습니다. 사람인지 확인하는 작은 위젯이요. 웹사이트에 액세스하기 전에 전체 페이지 보안 검사를 하는 거죠. 인터넷을 사용해 본 적이 있다면 Cloudflare의 Turnstile 위젯 또는 챌린지 페이지를 경험한 적이 있을 것이며, 아마도 그보다 훨씬 더 많이 발견했을 것입니다.
수백만 개의 웹 사이트에 익숙한 Turnstile 위젯
인터넷의 상당 부분이 Cloudflare의 보호를 받는다는 의미입니다. Turnstile 위젯과 챌린지 페이지는 매일 76억 7천만 회 제공됩니다. 이건 오타가 아닙니다. 수십억 달러에 달합니다. 이것은 인터넷에서 가장 많이 볼 수 있는 사용자 인터페이스일 수 있습니다.
그리고 여기에는 엄청난 책임이 따릅니다.
수십억 개의 눈알이 있는 제품을 설계하는 것은 어려울 뿐만 아니라 근본적으로 다른 접근 방식이 필요합니다. 일본 시골에 있는 누군가의 할머님, 상파울루의 10대 청소년, 베를린의 시각 장애인 개발자, 라고스의 바쁜 임원에게는 모든 픽셀, 모든 단어, 모든 상호 작용이 효과가 있어야 합니다. 동시에요. 좌절의 순간에
오늘은 Turnstile과 Challenge Pages를 새롭게 디자인한 과정을 공유하고자 합니다. 이 이야기는 우리 세 사람이 세 부분으로 나누어 진행하는 스토리입니다. 의사 결정을 내린 디자인 프로세스와 연구(Leo), 전례 없는 규모로 변경 사항을 배포하기 위한 엔지니어링 과제(Ana), 수십억 사용자에게 측정 가능한 영향(Marina) .
설계 관점에서 Cloudflare가 이 문제에 어떻게 접근했는지부터 살펴보겠습니다.
솔직히 말해서, 자신이 인간임을 증명하라는 요청을 좋아하는 사람은 없습니다. 여러분도 인간입니다. 제가 사람인 걸 알아요. 믿기지 않는 사람은 사용자와 사용자가 액세스하려는 웹 사이트 사이에 있는 작은 위젯이라는 사실을 알고 있을 것입니다. 경미한 불편을 초래하는 경우에만 해당됩니다. 최악의 경우는요? 갑자기 창 밖으로 컴퓨터를 내던지고 싶어 했던 적이 있을 것입니다. 우리도 다 가본 적이 있습니다. 아무도 여러분을 비난하지 않을 것입니다.
Turnstile이 로그인 흐름에 통합됨
세계가 피할 수 없는 AI 혁명으로 예감되는 가운데, 보안 인증의 필요성은 더욱 커지고 있습니다. Cloudflare에서는 봇 공격이 크게 증가하는 것을 목격했으며, 이에 대응하여 조직에서는 보안 조치에 더 막대한 투자를 하고 있습니다. 이는 더 많은 최종 사용자에게 더 많은 인증 질문을 더 자주 발행한다는 것을 의미합니다.
숫자로 다음과 같은 이야기가 나옵니다.
2023년: 매일 21.4억 건
2024년: 매일 30억 건
2025년: 매일 53.5억 건
보안 검사는 전년 대비 평균 58.1% 증가한 수치입니다. 보안 검사가 더 많다는 것은 최종 사용자가 불편을 느낄 기회가 많다는 것을 의미합니다. 자신과 고객을 보호하기 위해 이러한 검증 시스템을 통합하는 회사가 많아질수록 어딘가에서 누군가가 나쁜 경험을 할 가능성이 높아집니다.
우리는 플래그십 제품을 면밀히 살펴보고 이러한 경험을 하는 수십억 명의 사람들이 지금 일을 제대로 하고 있는지 자문해 볼 때라는 것을 알고 있었습니다. Cloudflare는 보안 환경뿐만 아니라 더 인간적인 인터넷 환경을 구축하려는 사명을 다하고 있나요?
결국, Cloudflare는 더 잘할 수 있습니다.
무언가를 다시 설계하기 전에, 우리는 무엇으로 작업하고 있는지 이해해야 했습니다. Turnstile 및 챌린지 페이지 모두에서 모든 상태, 모든 오류 메시지, 모든 상호 작용에 대한 포괄적인 감사를 수행하는 것으로 시작했습니다.
최상의 결과가 아니었습니다.
Turnstile 위젯의 불일치 상태. 통합된 접근 방식이 없는 다양한 상태
불일치가 눈에 띄었습니다. 저희는 다양한 오류 시나리오에 걸쳐 통합된 접근 방식을 가지고 있지 않았습니다. 일부 메시지는 과도하게 장황하고 기술적입니다("장치 시계가 잘못된 시간으로 설정되어 있거나 이 인증 질문 페이지가 실수로 중개자에 의해 캐시되어 더 이상 사용할 수 없습니다"). 너무 모호해서 도움이 되지 않는 경우도 있었습니다("시간 초과"). 시각적 언어는 다양한 레이아웃, 다양한 계층 구조, 다양한 어조 등 아주 다양했습니다.
우리는 또한 온라인으로 받은 피드백을 검토했습니다. 소셜 미디어, 지원 티켓, 커뮤니티 포럼까지 모두 읽어드립니다. 좌절감을 느낄 수 있었고, 피할 수 있는 경우가 많았습니다.
저희 피드백 메커니즘을 예로 들어 보겠습니다. Cloudflare에서는 사용자에게 "위젯이 항상 실패합니다" 또는 "위젯이 항상 실패합니다"와 같은 피드백 옵션을 제공했습니다. 하지만 차이점은 무엇일까요? 접속 실패 빈도를 어떻게 알 수 있었을까요? Cloudflare는 사용자들에게 가장 좌절스러운 순간에 있을 때 모호한 옵션을 해석해 보라고 요청했습니다. 해석에 여지를 더 많이 남겨 둘수록 피드백은 덜 유용했고, 소셜 채널에서 더 많은 좌절을 겪었습니다.
이전 피드백 화면: '위젯이 가끔 실패함'과 '위젯이 항상 실패함' 비교 - 차이점은 무엇인가요?
의심스러운 활동을 감지하거나 사이트 소유자가 보안 설정을 강화했을 때 전체 페이지 보안 블록을 표시하는 챌린지 페이지(Challenge Pages)에서도 비슷한 문제가 있었습니다. 일부 주는 혼란을 초래했습니다. 기술 전문 용어를 너무 많이 사용하는 경우도 있었습니다. 사용자가 가장 필요로 할 때 실행 가능한 지침을 제공하지 못한 경우가 많았습니다.
인증 질문 페이지의 불일치 상태. 통합된 접근 방식이 없는 다양한 상태
감사는 우리를 겸허하게 만들었습니다. 하지만 Cloudflare를 통해 집중해야 할 부분을 명확하게 파악할 수 있었습니다.
더 나은 경험을 설계하려면 먼저 사용자가 선택할 수 있는 모든 경로를 이해해야 했습니다. 행복 경로는 무엇이었나요? 하나라도 있었을까요? 그리고 좌절감을 심화시키는 불행한 경로는 무엇이었을까요?
감정 추적을 통해 초기 발생부터 오류 시나리오까지 전체 사용자 여정 매핑
이는 진정한 교차 기능 노력이었습니다. 우리는 모든 에지 케이스의 기술적 세부 사항을 알고 있는 Ana 등의 엔지니어 및 제품이 어떻게 작동하는지뿐만 아니라 사용자가 느끼는 방식, 즉 Cloudflare에 대한 사랑과 미움을 이해하는 제품 측의 마리나와 긴밀히 협력했습니다. 참조하십시오.
Cloudflare에는 가장 똑똑한 사람들이 봇 방어를 담당하고 있습니다. 하지만 인텔리전스와 명확성은 같은 것이 아닙니다. 기술적 복잡성과 사용자 단순성 사이에는 미묘한 균형이 있습니다. 이 두 가지가 성공적으로 함께 조화를 이룰 때에만 사람들이 실제로 이해할 수 있는 방식으로 정보를 전달할 수 있습니다.
핵심은 메시지가 모든 사람에게 효과가 있어야 한다는 것입니다. 모든 나이의 사용자. 모든 정신적 또는 신체적 능력. 모든 문화적 배경. 모든 수준의 기술적 정교함. 이것이 바로 대규모 설계의 진정한 의미입니다. 에지 케이스를 무시할 수 없습니다. 그러한 규모에서는 더 이상 에지 케이스가 아니기 때문입니다.
UX 디자인에서 가장 영향력 있는 책 중 하나는 Steve Krug의 Don't Make Me Think입니다. 핵심 원칙은 간단합니다. 사용자가 인터페이스를 해석, 이해, 디코딩하려고 시도하는 모든 순간이 마찰의 순간이라는 것입니다. 그리고 특히 좌절스러운 순간에 겪는 마찰은 포기로 이어집니다.
감사 결과, Cloudflare가 사용자에게 너무 많은 생각을 하도록 요구하고 있었던 것으로 드러났습니다. 서로 다른 정보가 서로 다른 상태에 따라 UI에서 동일한 공간을 차지했습니다. 일관된 시각적 계층 구조는 없었습니다. Turnstile에서 오류 상태가 발생하는 사용자는 인증 질문 페이지와는 완전히 다른 곳에서 정보를 찾을 수 있습니다.
우리는 모든것을 지배할 수 있는 하나의 정보 아키텍처라는 근본적인 결정을 내렸습니다.
Turnstile 위젯 및 인증 질문 페이지 간에 구조가 일관적인 통합 정보 아키텍처를 표시하는 시각적 다이어그램
Turnstile과 Challenge Pages는 이제 동일한 구조적 패턴을 따릅니다. 동일한 시각적 계층 구조. 동일한 배치의 동작, 설명 텍스트, 문서 링크 배치.
이로 인해 설계 옵션에 제약이 있었나요? 물론입니다. 우리는 프레임워크에 맞지 않는 많은 창의적인 아이디어를 '아니오'라고 말해야 했습니다. 하지만 제약은 좋은 디자인의 적이 아닙니다. 좋은 디자인의 가장 좋은 친구인 경우가 많습니다. 이렇게 옵션을 제한함으로써 실제로 중요한 세부 사항을 더 깊이 파헤칠 수 있었습니다.
사용자에게는 UI의 각 부분이 의미하는 바를 다시 배울 필요가 없다는 엄청난 이점이 있습니다. 오류 상태가 일관적으로 보입니다. 도움말 링크는 항상 같은 위치에 있습니다. 하나의 상태를 이해하고 나면 모든 것을 이해하게 됩니다. 이는 인지 부하를 최소한으로 줄이는 것입니다. 정확히는 보안 검증 중에 있어야 하는 곳에 맞추어야 합니다.
수십억 명이 볼 수 있는 것을 재설계할 때, 책임을 어떻게 유지하시나요? 테스트하세요. 많이요.
나이, 디지털 기술, 문화적 배경 등의 다양성을 고려하여 8개의 서로 다른 국가에서 참가자 8명을 모집했습니다. 우리는 기술에 능숙한 얼리어답터를 찾고 있는 것이 아니라, 새로운 설계가 모든 사람에게 어떤 효과가 있는지 파악하고 싶었습니다.
우리의 접근 방식은 엄격했습니다. 참가자들은 어느 것이 '오래된 것'인지 "새로운 것"인지 알지 못한 채 현재 경험과 제안된 변경 사항을 볼 수 있었습니다. 우리는 편향을 제거하기 위해 포지셔닝의 균형을 맞췄습니다. 새로운 아이디어를 테스트하는 데 그치지 않고 애초에 무엇이 변해야 하는지에 대한 기존의 가정에도 도전했습니다.
A/B 테스트에서 테스트되는 두 가지 버전의 Turnstile
한 가지 가설: 경쟁사와 협력해야 할까요? 모든 주에서 CAPTCHA 공급자의 '나도 인간이다'를 표시하는 경우가 많습니다. 고유한 콘텐츠를 이용합니다. "사용자가 인간인지 확인하는 중", "확인하는 중...", "성공!"
너무 복잡하게 구성했나요? 우리는 그것을 정면으로 테스트했습니다.
우리의 접근 방식이 결정적으로 승리했습니다. 상호작용성 상태에서 "당신이 인간인지 확인해 보세요"는 8점 만점에 5점을 얻었고, "나도 인간이다"는 3점을 얻었습니다. 확인 중인 주(state)의 경우 0.5와 비교했을 때 7.5로 훨씬 더 극적이었습니다. 사용자들은 단순히 정보를 듣는 것이 아니라 무슨 일이 일어나고 있는지 알고 싶어했습니다.
사용자 테스트 결과: 사용자들은 경쟁사 스타일의 디자인보다 우리의 접근 방식을 강력히 선호했습니다
이 실험은 기능으로 제공되지는 않았지만, 매우 유용한 경험이었습니다. 그저 단순히 단순히 차별성을 위해서가 아니라 다르다는 점을 확신할 수 있었습니다. 일부는 이미 맞았습니다.
연구 결과, 저희가 사용자를 실망시켰던 네 가지 영역이 밝혀졌습니다.
관료적 방식이 아닌 도움말. 사용자에게 오류가 발생하면 Cloudflare는 "피드백 전송" 기능을 제공했습니다. 테스트 결과, 이들은 당황했습니다. "이걸 누구에게 보내? 웹 사이트가요? Cloudflare? 우리 인터넷 서비스 공급자가?" 더 중요한 점은 가장 큰 좌절을 겪는 순간에 사람들이 신고를 하는 것이 아니라 문제를 해결하고 싶어 한다는 점입니다. Cloudflare는 "피드백 전송"을 "문제 해결"로 교체했습니다.
문제가 되는 '피드백 전송' 프롬프트: 사용자가 자신이 피드백을 누구에게 보내는지 알 수 없었음
주의, 경보가 아닙니다. 우리는 오류에 빨간색 배경을 아낌없이 사용했습니다. 테스트의 반응은 본능적이었습니다. 참가자들은 자신이 실패했다고 느꼈고 무력감을 느꼈습니다. 다시 시도하면 해결할 수 있는 간단한 문제에 대해서도 사용자들은 최악의 상황을 가정하고 포기했습니다. 최대 채도의 빨간색은 "해결해야 할 사항이 있습니다"라는 메시지를 전달하지 못했습니다. 그것은 "당신들은 실패했고, 당신이 할 수 있는 것은 아무것도 없습니다"라는 것을 알리는 것이었습니다. 수정: 빨간색이 아이콘에만 표시되고 텍스트나 배경에는 표시되지 않음.
진화: 오류 상태 설명이 명확하지 않은 빨간색 상태에서 중간색 텍스트를 사용하여 오류 정보를 훨씬 더 명확하고 간결하게 설명합니다.
장황하지 않고 스캔 가능. 저희는 오류를 기술적 세부 사항으로 자세히 설명하려고 노력했습니다. 하지만 역효과가 발생했습니다. 기술자가 아닌 사용자는 이 도구가 소외되었다고 느꼈습니다. 기술적인 사용자에게는 필요하지 않았습니다. 모두 위젯이라는 작은 영역에서 읽으려고 했습니다. 그 교훈은, 특히 스트레스가 많은 순간에 협소한 공간에서는 더 적은 것이 더 크다는 것입니다.
모든 사용자가 액세스할 수 있습니다. Cloudflare의 감사 결과 일부 주에서 10px의 글꼴이 발견되었습니다. 기술적으로 AA(일반 텍스트의 경우 최소 4.5:1, 큰 텍스트의 경우 3:1 이상) 준수를 충족했지만 실제로는 가독성이 떨어지는 회색 텍스트. 전체 인터넷에 서비스를 제공한다면 '기술 규정 준수'만으로는 충분하지 않습니다.
저희는 WCAG 2.2 AAA 표준(가장 엄격하고 엄중한 수준의 웹 접근성 규정 준수)을 충족하는 명확한 목표를 설정했습니다. 이 표준은 심각한 장애가 있는 사용자를 포함하여 가장 광범위한 사용자가 콘텐츠에 액세스할 수 있도록 설계되었습니다. 재설계 내내 시각적 일관성과 가독성이 충돌할 때는 가독성이 승리했습니다. 매번 그렇습니다.
이는 비전을 넘어 확장되었습니다. Cloudflare는 자동화된 규제 준수 도구가 포착할 수 없는 것 이상의 기능을 제공하는 스크린 리더 사용자, 키보드 전용 네비게이터, 색각이 있는 사람을 위해 설계되었습니다.
접근성은 장애에 관한 것만이 아니라 언어와 관련됩니다. 영어로는 되지만, 독일어에서는 넘칩니다. 스페인어로 작성된 간결한 내용이 일본어로는 명확하지 않습니다. 40개 이상의 언어를 지원하면서 우리는 근본적으로 간소화해야 했습니다. "웹 사이트에 연결할 수 없음/문제 해결" 패턴이 이제 영어, 불가리아어, 덴마크어, 독일어, 그리스, 일본어, 인도네시아어, 러시아어, 슬로바키아어, 슬로베니아어, 세르비아어, 필리핀어 등 다양한 언어로 작동합니다.
12개 언어에 걸쳐 새롭게 설계된 오류 상태 — 다양한 텍스트 길이에도 일관된 레이아웃
그러면 실제로 무엇을 전송했을까요?
먼저, 변경하지 않은 내용을 살펴보겠습니다. 행복 경로 — "인증하는 중" → "인증하는 중..." → "성공!" — 탁월한 테스트 결과. 사용자들은 각 단계에서 무슨 일이 일어나고 있는지 이해했습니다. 주마다 다른 고유한 콘텐츠 때문에 지나치게 복잡해질까 걱정했지만, 실제로는 우리가 경쟁 우위를 확보할 수 있었습니다.
행복한 경로: 본인 인증 → 인증 → 성공! 이들 상태는 잘 테스트되었으며 대체로 변경되지 않았습니다
하지만 작업이 필요한 주에 대해서는 배운 모든 것을 바탕으로 중요한 변화를 수행했습니다.
우리는 오류 상태의 텍스트 양을 근본적으로 줄였습니다. "장치 시계가 잘못된 시간으로 설정되었거나 이 인증 질문 페이지가 실수로 중개자에 의해 캐시되어 더 이상 사용할 수 없습니다"와 같은 장황한 설명 대신, 이제 다음과 같이 표시됩니다.
명확하고 단순한 상태 이름(예: "잘못된 장치 시간")
눈에 띄는 '문제 해결' 링크
다 됐습니다. 이제 자세한 지침이 사용자가 필요할 때 열리는 전용 모달 화면에 표시되므로, 사용자가 실제로 읽고 문제 해결 단계를 따를 수 있는 공간이 제공됩니다.
문제 해결 모달: 위젯을 복잡하게 하지 않으면서 사용자가 필요할 때 상세 지침을 제공합니다
문제 해결 모달이 맥락을 제공합니다("이 오류는 기기의 시계 또는 캘린더가 부정확할 때 발생합니다. 이 웹 사이트의 보안 인증 절차를 완료하려면, 귀하의 장치가 귀하의 시간대에 올바른 날짜와 시간으로 설정되어 있어야 합니다."), 시도할 번호가 매겨진 단계, 문서 링크, 사용자가 문제 해결을 시도한 후에만 Cloudflare에 피드백을 제출할 수 있는 옵션이 포함되어 있습니다. 먼저 도움을 주고, 피드백을 두 번째로 제공합니다.
이제 모든 주에서는 대비와 가독성에 대한 WCAG 2.2 AAA 표준을 충족합니다. 글꼴 크기에는 최소 크기가 설정되어 있습니다. 대화형 요소는 명확하게 포커스를 맞출 수 있어야 하며 화면 읽기 프로그램을 통해 제대로 발표됩니다.
Turnstile 및 인증 질문 페이지의 통합 경험
이제 사용자에게 작은 Turnstile 위젯이나 전체 인증 질문 페이지가 표시되든, 정보 아키텍처는 일관됩니다. 동일한 계층 구조. 동일한 배치. 같은 멘탈 모델.
챌린지 Pages는 이제 상단에 웹 사이트 이름 및 파비콘, 명확한 상태 메시지(예: "인증 성공" 또는 "브라우저가 오래되었습니다"), 그리고 아래에 설명된 지침 등 깨끗한 구조를 따르고 있습니다. 오렌지색이나 빨간색 텍스트로 가득 찬 벽이 더 이상 없습니다. 컨텍스트가 없는 기술 전문 용어는 없습니다.
명확한 문제 해결 지침과 함께 인증 질문 페이지 상태를 다시 설계했습니다.
모든 콘텐츠는 40여 개의 지원 언어로 테스트되었습니다. Cloudflare의 프로세스에는 세 가지 유효성 검사 계층이 포함되었습니다.
설계 팀의 초기 설계 검토
자격을 갖춘 벤더의 전문 번역
원어민 Cloudflare 직원의 최종 검토
단순히 번역의 정확성을 위해서가 아니라 언어마다 콘텐츠 길이가 매우 다른 경우에도 시각적 디자인을 유지하는 것이 중요했습니다.
따라서 더 명확하고, 더 접근하기 쉬워, 덜 불편하고, 그리고 무엇보다도, 똑같이 안전한 보안 검증 경험을 누릴 수 있습니다. 우리는 경험을 개선하기 위해 보호 기능까지 타협하지 않았습니다. 우리는 좋은 설계와 강력한 보안이 상충되지 않는다는 것을 증명했습니다.
왼쪽에서 다시 디자인된 Turnstile 위젯과 오른쪽에서 다시 디자인된 인증 질문 페이지
하지만 경험을 설계하는 것은 절반의 도전에 불과했습니다. 수십억 명의 사용자에게 제공하고 싶은가요? 이때 Ana가 등장합니다.
프론트엔드 엔지니어로 일하면서 가장 힘든 부분은 div를 센터링하는 것입니다. 실제로는 특히 플랫폼의 기본 요소와 가까운 곳에서 작업할 때 실제 문제가 훨씬 더 깊이 있는 경우가 많습니다. 네이티브 API를 사용하여 인터넷 인프라의 중요한 부분을 구축하면 UI 개발, 타협, 장기적인 유지 가능성에 대해 다르게 생각해야 합니다.
저희 경우에는 Rust를 사용하여 Turnstile 위젯과 인증 질문 페이지 모두의 UI를 처리합니다. 이러한 결정으로 플랫폼 전반에 걸쳐 안전과 일관성 측면에서 분명한 이점이 나타났지만, 프런트엔드의 복잡성도 증가했습니다. 우리 중 많은 사람은 일반적인 UI 상호 작용이 거의 무료인 React와 같은 최신 프레임워크의 인체 공학에 익숙합니다. Rust를 사용한다는 것은 document.getElementById와 같은 하위 수준 구문을 사용하여 간단한 상호 작용조차도 다시 구현해야 한다는 것을 의미했습니다. createElement 및 appendChild.
또한, 컴파일 시간과 엄격한 검사로 인해 자연스러운 UI 반복 속도가 JavaScript 기반 프레임워크에 비해 느려졌습니다. 툴링 생태계가 계속 진화하고 있으므로 디버깅도 더 많이 필요했습니다. 이러한 제약 때문에 우리는 UI 개발에 접근하는 방식을 더 신중하고, 더 사려 깊으며, 궁극적으로 더 훈련할 수 있게 되었습니다.
처음에는 패딩 조정이나 정렬 변경과 같은 작은 시각적 조정처럼 보였던 것이 훨씬 더 큰 문제인 국제화를 빠르게 드러냈습니다.
번역이 가능해진 다음에는 16개의 UI 상태에서 38개의 언어로 콘텐츠를 읽고 사용할 수 있도록 보장해야 했습니다. 텍스트 길이 가변성만으로도 신중한 설계 결정이 필요했습니다. 일부 번역은 영어보다 30~300% 더 길 수 있습니다. “Stuck?”과 같은 짧은 영어 문자열 "Tidak bisa melanjutkan?" in 인도네시아어 또는 "Es geht nicht Weiter?" 레이아웃 요건을 극적으로 변화시켰습니다.
오른쪽에서 왼쪽으로 쓰는 언어 지원 때문에 또 다른 복잡성이 추가되었습니다. 아랍어, 페르시아어, 페르시아어, 히브리어를 지원한다는 것은 텍스트 방향을 바꾸는 것 이상을 의미했습니다. 정렬, 탐색 패턴, 방향 아이콘, 애니메이션 흐름을 포함한 전체 레이아웃을 미러링해야 했습니다. 이러한 요소의 대부분은 암묵적으로 왼쪽에서 오른쪽으로 가정하여 설계되었으므로 우리는 다시 되돌아보고 진정한 양방향 의사 결정을 내려야 했습니다.
정렬된 목록에도 특별한 주의가 필요했습니다. 모든 문화권에서 서양의 1, 2, 3 번호 체계를 사용하는 것은 아니며, 숫자 시퀀스를 하드코딩하면 인터페이스가 낯설거나 부정확하게 느껴질 수 있습니다. 모든 언어에서 자연스럽고 문화적으로 적절하다고 느껴지도록 로케일 인식 번호 매기기와 완전히 번역 가능한 목록 형식에 의존했습니다.
피드백 보고서에 조치 포인트를 나열하기 시작하면서 정확성이 더욱 중요해졌습니다. 모든 작업이 제대로 렌더링되고, 올바른 흐름을 트리거하며, 여러 상태, 언어, 에지 케이스에서 일관되게 작동해야 했습니다.
목표를 달성하기 위해 우리는 테스트에 막대한 투자를 했습니다. 단위 테스트는 고립된 상태에서 로직을 검증하는 데 도움이 되었고, 엔드투엔드 테스트를 통해 새로운 상태와 언어가 실제 시나리오에서 예상대로 작동하는지 확인했습니다. 이러한 테스트의 기반을 통해 우리는 안전하게 반복할 수 있다는 자신감을 얻었고, 회귀를 방지했으며, 사용자가 피드백 보고서를 신뢰할 수 있고 실행 가능한 상태로 유지할 수 있었습니다.
일련의 기술적 제약으로 시작된 이 일이 더 강력하고 포용성 있으며 검증된 UI 시스템을 구축할 수 있는 기회로 바뀌었습니다. 더 적은 추상화를 사용하고 브라우저 기본 요소에 더 가깝게 작업하면서 가정을 재고하고, 국제화 전략을 개선하며, 전반적인 품질 기준을 높여야 했습니다.
그 결과는 단순히 작동하는 솔루션이 아니라 우리가 신뢰하는 솔루션을 탄생시켰습니다. 그 신뢰 덕분에 div를 가운데에 배치하는 것이 쉬운 경우에도 계속 개선할 수 있습니다.
수십억 명의 사람들을 위한 설계를 하는 일은 Cloudflare에서 진지하게 받아들이는 책임입니다. 이러한 규모에서는 측정 가능한 데이터를 활용하여 설계 선택이 실제로 어떤 영향을 미치는지 알려주는 것이 필수적입니다. 이러한 변경 사항을 준비하면서, 인터넷에서 가장 많이 보이는 UI를 더욱 인간적으로 만드는 데 성공했는지 여부를 알려주는 5가지 핵심 메트릭 에 집중하고 있습니다.
Cloudflare의 주요 북극성은 인증 질문 해결률, 즉발행된 인증 질문 중 성공적으로 완료된 비율을 말합니다. "중간 캐싱"과 같은 기술 전문 용어에서 벗어나 "잘못된 장치 시간"과 같이 간단하고 실행 가능한 레이블로 전환됨에 따라 CSR이 크게 증가할 것으로 예상됩니다. CSR이 높다고 해서 봇을 더 잘 차단한다는 의미는 아닙니다. 실수로 합법적인 인간 사용자에게 걸려 넘어지는 장애물을 제거한다는 의미입니다.
사용자가 인증 질문 페이지에서 보내는 1초는 필요한 정보를 얻지 못하는 셈입니다. 조사에 따르면 사용자들은 빨간색 텍스트 벽을 보고 선택의 여지가 없는 경우가 많았습니다. 새로운 스캔 가능한 무채색 디자인을 통해 사용자가 몇 분이 아닌 몇 초 만에 문제를 식별하고 해결할 수 있도록 완료 시간 을 추적하고 있습니다.
과거에 우리가 "새포레이션 레드"를 후하게 사용하자 사용자들은 자신이 실패했다고 느끼고 그냥 포기하는 내장 같은 반응을 얻었습니다. Cloudflare는 빨간색을 아이콘에만 사용하고 통합 아키텍처를 사용하여 포기율을 줄이는 것을 목표로 합니다. 저희는 사용자가 무력감을 느끼고 멀리 클릭할 필요가 없다고 느끼는 대신 문제 해결을 클릭할 수 있는 힘을 갖기를 원합니다.
제품 관점에서 가장 큰 변화 중 하나는 새로운 문제 해결 모달입니다. 위젯 내에서 직접적으로 명확하고 번호가 매겨진 단계를 제공함으로써 저희는 UI에 셀프 서비스 지원을 구축하고 있습니다. 우리는 이 결과로 Cloudflare 고객과 자체 내부 팀에 대한 지원 티켓의 양이 측정 가능할 정도로 감소할 것으로 예상됩니다.
보안 문제를 좋아하는 경우가 드물다는 것을 알고 있지만, 혼란을 주기 때문에 미워해서는 안 됩니다. 저희는 커뮤니티 포럼, 피드백 보고서, 소셜 채널에 걸쳐 소셜 정서 를 모니터링하여 대화가 "이 위젯이 작동하지 않습니다"에서 "문제가 있었지만 해결했습니다"로 전환되는지 확인하고 있습니다.
제품 관리자인 제 목표는 종종 보이지 않는 보안이며, 가장 좋은 문제는 사용자가 절대 볼 수 없는 문제입니다. 하지만 인증 질문으로 반드시 보아야 한다면 그것은 경비가 아니라 비서여야 합니다. 이번 재설계는 AAA 접근성 과 높은 보안 표준 이 경쟁 관계에 있지 않다는 것을 증명합니다. 이 둘은 동전의 양면과 같습니다. Turnstile과 Challenge Pages의 아키텍처를 통합하여 더 빠르게 반복할 수 있으며, 그 어느 때보다 더 인도적으로 인터넷을 보호할 수 있는 기반을 구축했습니다.
이번 재설계는 결승선이 아니라 기반입니다.
사용자가 새로운 경험과 상호 작용하는 방식을 계속 모니터링하고 있으며, 파악한 내용을 바탕으로 지속적으로 개선해나갈 것입니다. 새로운 디자인에 우리가 구축한 피드백 메커니즘은 단순히 문제를 보고하도록 요구하는 대신 사용자가 문제를 해결하는 데 실제로 도움이 되는 피드백 메커니즘으로 이전보다 더 풍부한 인사이트를 제공할 것입니다.
보안 환경이 어떻게 발전하고 있는지도 지켜보고 있습니다. 봇 공격이 점점 더 정교해지고 AI로 사람의 행동과 자동화된 행동의 경계가 계속 모호해지면서 검증은 더욱 어려워질 것입니다. 우리가 할 일은 인간의 경험을 악화시키지 않으면서 계속 보안을 개선하여 앞서 나가는 것입니다.
새로운 Turnstile 또는 챌린지 페이지를 보고 피드백이 있으면 Cloudflare는 이를 듣고 싶습니다. 커뮤니티 포럼 을 통해 문의하시거나 환경 자체에 내장된 피드백 메커니즘을 사용하세요.