wai-aria

2 개의 포스트

figma3분 읽기큐레이션 요약

그잼 스크린 리더

FigJam은 스크린 리더와 키보드만으로 캔버스의 콘텐츠를 읽고 만들 수 있도록 지원을 공식 출시했다. 사용자는 캔버스와 메뉴 사이를 이동하며 파일 구조, 텍스트가 포함된 도형, 스티키, 표, 이미지 대체 텍스트를 확인·편집할 수 있다. 다만 커서 채팅, 투표, 위젯, 자유형 벡터 편집 등 일부 기능은 아직 지원되지 않으며, Figma는 실제 사용자 피드백을 바탕으로 접근성을 계속 확장할 계획이다. ## 협업 도구 전체를 위한 접근성 - FigJam은 아이디어를 정리하고 의사결정을 맞추는 협업 중심 도구이므로, 팀 구성원 모두가 참여할 수 있어야 한다는 판단에서 접근성 개선 대상이 됐다. - Figma 프로토타입에 스크린 리더 지원을 도입한 뒤, 다음 단계로 FigJam을 선택했다. - 정밀한 디자인 도구인 Figma보다 FigJam은 기능이 상대적으로 표면에 드러나 있어, 접근 가능한 UI 패턴을 실험하기에 적합했다. ## 스크린 리더로 가능한 작업 - 스크린 리더 및 키보드 사용자는 캔버스의 여러 요소와 메뉴·화면 사이에서 포커스를 이동할 수 있다. - 다음 콘텐츠를 읽고 생성·편집할 수 있다. - FigJam 파일의 구조 - 텍스트가 포함된 도형 - 스티키 노트 - 표 - 이미지의 대체 텍스트 - 캔버스에서는 콘텐츠를 문자 그대로 읽는 것뿐 아니라, 계층 구조와 캔버스 내 위치를 통해 맥락도 파악해야 한다. - 아직 지원되지 않는 기능에는 커서 채팅 탐색, 스탬프 조정, 투표, 이모트 휠, 위젯 상호작용, 선·하이라이트·와시 테이프·마커 같은 자유형 벡터 노드 편집이 포함된다. ## ARIA 표준만으로는 부족했던 캔버스 접근성 - WAI-ARIA는 웹 콘텐츠와 애플리케이션의 접근성과 상호운용성을 높이기 위한 기술 명세다. - 일반적인 웹사이트나 단순한 위젯과 달리, Figma·FigJam 같은 캔버스 기반 도구에는 참고할 만한 접근성 패턴과 모범 사례가 충분하지 않았다. - 따라서 팀은 처음부터 정해진 구현 방식을 따르기보다, 실제로 도구를 사용할 수 있게 만드는 핵심 기능이 무엇인지 먼저 정의했다. - 접근성 테스트 기관 Fable과 협력해 보조공학 사용자들의 테스트와 피드백을 수집했다. - 일부 베타 테스터는 디지털 화이트보드나 실제 화이트보드 경험도 없었기 때문에, 기존 도구의 사용 패턴을 전제로 하지 않고 사용자 여정을 새롭게 설계했다. ## 다양한 키보드와 보조공학 환경 고려 - 스크린 리더 종류, 설정, 보조공학 기술, 국제 키보드 배열에 따라 사용 가능한 조합이 매우 다양하다. - 베타 인터뷰를 통해 팀은 스크린 리더 사용 방식에 대해 지속적으로 새로운 사실을 발견했다. - 이 과정에서 얻은 패턴은 FigJam뿐 아니라 Figma 전반의 접근성 개선에도 활용됐다. - React 컴포넌트에 ARIA 레이블과 태그를 적용하는 등, 코드베이스에 재사용 가능한 접근성 패턴을 구축했다. - 한 번 만들어진 패턴은 다른 엔지니어들도 반복해서 적용할 수 있어 제품 전체의 접근성 향상에 기여한다. ## 단계적 출시와 향후 과제 - 캔버스 기반 협업 도구의 접근성에는 확립된 정답이 부족했기 때문에, 초기 출시 범위를 핵심 사용자 여정 중심으로 정했다. - 제품을 한 번에 완성하기보다 실제 사용과 채택 데이터를 통해 부족한 부분을 확인하고 개선하는 방식을 택했다. - 특히 여러 사용자가 동시에 상호작용하는 커서 채팅 같은 멀티플레이어 기능은 스크린 리더 환경에 적합한 모델을 추가로 연구해야 한다. - 이번 출시는 전체 접근성 작업의 끝이 아니라, 이후 기능 확장을 위한 기반에 가깝다. 실제로 FigJam 파일을 만들 때는 요소에 명확한 텍스트와 이미지 대체 텍스트를 제공하고, 콘텐츠의 계층과 위치를 일관되게 구성하는 것이 좋다.

원문 읽기(새 탭에서 열림)
figma3분 읽기큐레이션 요약

DesignSystems.com의 새로운

DesignSystems.com은 디자인 시스템을 만들고 운영하는 디자이너·개발자·관리자를 위한 지식 공유 플랫폼으로 자리 잡고 있다. 이 글은 2019년 6월에 공개된 주요 콘텐츠 네 가지를 소개하며, 아이콘 설계부터 접근성 높은 React 컴포넌트, 에이전시 협업, 화이트라벨링까지 디자인 시스템의 실무 범위를 보여준다. 핵심은 재사용성과 일관성을 유지하면서도 다양한 사용자와 제품 요구에 유연하게 대응하는 것이다. ## 아이콘 시스템 설계와 구현 - 아이콘 제작의 기본 원칙부터 개발자 전달까지 다루는 종합 가이드를 소개한다. - 주요 내용은 다음과 같다. - 아이콘의 스트로크와 필(fill) 설계 - Boolean 연산을 활용한 아이콘 제작 - 아이콘을 체계적으로 구성하고 관리하는 방법 - 개발자 핸드오프를 위한 파일 및 자산 준비 - 아이콘은 단순한 그래픽 요소가 아니라 디자인 시스템의 일관성과 사용성을 좌우하는 핵심 자산으로 설명된다. ## 에이전시 관점의 디자인 시스템 구축 - Instrument는 Nike, Google, Airbnb 등과 협업하며 일회성 결과물이 아닌 확장 가능한 디자인 시스템을 구축한다. - 재사용 가능한 기능성 컴포넌트를 여러 애플리케이션과 규모에 걸쳐 활용하는 것을 중시한다. - 디자인 시스템의 성공을 위해서는 다음 과정이 중요하다. - 클라이언트와 시스템의 목표 및 범위에 대한 공통 이해 형성 - 높은 수준의 협업을 통한 요구사항 조율 - 특정 프로젝트를 넘어 장기적으로 활용 가능한 구성요소 설계 - 디자인 시스템은 산출물 하나가 아니라 브랜드, 제품, 기술을 연결하는 협업 프로세스로 제시된다. ## 접근성을 공유하는 React 컨테이너 - Zendesk의 오픈소스 디자인 시스템 Garden은 접근성 및 키보드 조작을 공통 패턴으로 관리하기 위해 “컨테이너” 패턴을 사용한다. - 컨테이너는 화면 UI를 직접 렌더링하지 않고 다음 기능을 담당한다. - 키보드 및 마우스 상호작용 처리 - React 컴포넌트 간 접근성 로직 공유 - RTL(오른쪽에서 왼쪽으로 읽는 언어) 레이아웃 지원 - 새 라이브러리인 `react-containers`는 스타일이 포함된 전체 패키지를 설치하지 않아도 비시각적 로직만 사용할 수 있도록 별도 저장소로 분리됐다. - 기존 패턴보다 더 작고 효율적으로 다시 작성됐으며, WAI-ARIA Authoring Practices 1.1에 더욱 가깝게 구현됐다. ## 사용자에게 권한을 제공하는 화이트라벨링 - Dawn Labs는 제3자가 디자인 시스템을 직접 커스터마이즈할 수 있으면서도 제품 전체의 일관성을 유지해야 하는 문제를 다뤘다. - 사용한 기술은 다음과 같다. - `styled-components` - `styled-system` - GraphQL 백엔드 - CSS 변수와 전역 CSS 주입 - 기본 디자인 토큰과 구조는 통제하면서도, 최종 사용자가 클라이언트의 개입 없이 원하는 스타일을 수정할 수 있도록 “스타일링 탈출구”를 제공했다. - 화이트라벨 시스템은 일관된 기본 경험과 사용자별 커스터마이징 사이의 균형이 중요하다. ## 커뮤니티 중심의 지식 공유 - DesignSystems.com은 디자인 시스템 제작자, 디자이너, 개발자, 관리자가 경험과 실무 지식을 공유하는 것을 목표로 한다. - 다양한 분야의 기고를 통해 디자인 시스템을 시각 디자인에만 한정하지 않고 다음 영역까지 확장한다. - 접근성 - 컴포넌트 아키텍처 - 협업과 운영 - 사용자 커스터마이징 - 플랫폼의 성장은 운영팀뿐 아니라 커뮤니티 구성원의 사례와 기여에 기반한다. 디자인 시스템을 구축할 때는 재사용 가능한 컴포넌트와 명확한 시각 규칙뿐 아니라 접근성, 협업 프로세스, 확장 가능한 커스터마이징 구조까지 함께 설계하는 것이 좋다. 특히 공통 로직은 별도 모듈로 분리하고, CSS 변수나 디자인 토큰을 활용하면 일관성과 유연성을 동시에 확보할 수 있다.

원문 읽기(새 탭에서 열림)