Cloudflare의 UX 엔지니어인 Sam Mason de Caires는 디자인과 개발의 가교 역할을 수행하며, 접근성(Accessibility)을 디자인 프로세스에 자연스럽게 통합하는 도구 개발에 집중하고 있습니다. 그는 특히 Figma 플러그인 'Contrast'를 개발하여 디자이너가 WCAG 표준을 실시간으로 준수할 수 있는 환경을 구축했으며, 이를 통해 포용적인 디지털 제품 제작의 중요성을 강조합니다. 기술적으로는 웹 표준 기술을 디자인 도구에 이식하여 워크플로우의 효율성을 극대화하는 것이 그의 핵심 접근 방식입니다.

디자인 접근성 도구 'Contrast'의 개발 배경

웹 콘텐츠 접근성 가이드라인(WCAG) 준수를 자동화하기 위해, 디자인 과정에서 실시간으로 색상 대비를 확인할 수 있는 Figma 플러그인을 개발했습니다.
디자이너가 별도의 외부 도구를 사용하지 않고도 작업 중인 레이어의 가독성을 즉각적으로 판단할 수 있도록 워크플로우 최적화에 중점을 두었습니다.
단순한 수치 제공을 넘어, 특정 색상이 기준을 통과하지 못할 때 대안이 될 수 있는 색상을 추천하는 기능을 포함하여 실질적인 해결책을 제시합니다.

성능 최적화와 기술적 도전

수만 개의 레이어가 포함된 대규모 디자인 파일에서도 플러그인이 멈추지 않고 실시간으로 동작할 수 있도록 비동기 처리 및 레이어 스캔 알고리즘을 최적화했습니다.
배경색과 전경색을 정확히 추출하기 위해 불투명도(Opacity), 블렌딩 모드(Blending modes), 그라데이션 등이 복합적으로 적용된 레이어의 최종 렌더링 색상을 계산하는 로직을 구현했습니다.
Figma 플러그인 API와 웹 기술(HTML, CSS, JavaScript) 간의 통신 구조를 효율화하여 UI 반응 속도를 개선했습니다.

UX 엔지니어링과 도구화(Tooling)의 가치

UX 엔지니어는 디자인 시스템의 일관성을 유지하기 위해 코드와 디자인 사이의 간극을 메우는 도구를 직접 제작해야 함을 강조합니다.
접근성은 프로젝트의 마지막 단계에서 점검하는 요소가 아니라, 도구화를 통해 디자인 시작 단계부터 강제되고 시스템화되어야 한다는 철학을 공유합니다.
반복적인 수동 작업을 자동화하는 플러그인을 통해 팀 전체의 생산성을 높이고, 디자이너가 창의적인 문제 해결에 더 집중할 수 있는 환경을 조성합니다.

성공적인 디자인 시스템 운영을 위해서는 'Contrast'와 같은 자동화 도구를 적극 도입하여 접근성 준수와 같은 필수 요구사항을 디자이너의 일상적인 작업 흐름 속에 내재화해야 합니다. 기술적 숙련도가 있는 UX 엔지니어라면 직접 필요한 도구를 제작하여 팀의 기술적 부채를 줄이고 제품의 품질을 상향 평준화하는 전략이 필요합니다.