gitlab2026년 3월 9일

파일 트리 브라우저로 저장 (새 탭에서 열림)

GitLab 18.9 버전에서 새롭게 도입된 '파일 트리 브라우저'는 웹 환경에서도 IDE와 유사한 코드 탐색 경험을 제공하여 개발자의 생산성을 높여줍니다. 기존의 번거로운 뒤로 가기 방식이나 브레드크럼(breadcrumb) 의존 방식에서 벗어나, 파일 구조를 유지한 채 직관적으로 코드를 탐색할 수 있는 환경을 구축한 것이 핵심입니다. 이 기능은 GitLab.com뿐만 아니라 자가 관리형(Self-Managed) 및 전용(Dedicated) 인스턴스에서도 모두 사용할 수 있습니다. ### 직관적인 파일 구조 탐색 및 동기화 * **IDE 스타일의 트리 뷰**: 파일 및 디렉토리 구조를 측면 패널에 상시 표시하여, 현재 위치를 잃지 않고 코드의 계층 구조를 한눈에 파악할 수 있습니다. * **실시간 위치 동기화**: 메인 콘텐츠 영역에서 파일을 선택하면 트리 뷰가 해당 파일의 상위 디렉토리를 자동으로 확장하고 위치를 강조해 줍니다. * **유연한 레이아웃**: 트리 패널은 접거나 크기를 조절할 수 있어, 사용자의 화면 작업 공간에 맞춰 최적화가 가능합니다. ### 강력한 검색 및 키보드 중심의 내비게이션 * **빠른 파일 필터링**: 트리 브라우저가 열린 상태에서 'F' 키를 누르면 검색창이 활성화되며, 파일명이나 확장자의 일부를 입력해 원하는 파일로 즉시 이동할 수 있습니다. * **W3C ARIA 표준 준수**: 키보드 사용자와 스크린 리더 사용자를 위해 W3C ARIA treeview 패턴을 구현하였습니다. 화살표 키, Enter, Space, Home, End 키 등을 사용하여 손을 마우스로 옮기지 않고도 모든 탐색이 가능합니다. * **반응형 인터페이스**: 데스크톱에서는 사이드바 형태로 제공되지만, 작은 화면에서는 토글 방식의 드로어(drawer)로 전환되며 모바일에서는 코드 뷰를 최대로 활용할 수 있도록 숨김 처리됩니다. ### 대규모 저장소를 위한 성능 최적화 * **페이지네이션(Pagination) 적용**: 항목이 매우 많은 대형 저장소에서도 성능 저하가 발생하지 않도록 페이지네이션 기술을 도입하여 필요한 만큼 데이터를 로드합니다. * **확장성**: 프로젝트 규모가 커지더라도 트리 뷰의 응답성을 유지하도록 설계되어 대규모 엔터프라이즈 환경에서도 쾌적한 사용이 가능합니다. ### 활용 팁 및 권장 사항 새로운 파일 트리 브라우저를 효율적으로 사용하려면 `Shift + F` 단축키를 기억하는 것이 좋습니다. 저장소 뷰에서 이 키를 눌러 브라우저를 즉시 켜고 끌 수 있으며, 파일 검색 시에는 `F` 키를 활용해 계층 구조를 일일이 클릭하지 않고도 대상 파일에 접근하는 방식을 추천합니다. GitLab은 향후 성능 및 접근성을 더욱 개선할 예정이므로 피드백 이슈를 통해 개선 의견을 전달하는 것도 좋은 방법입니다.

keyboard-navigationgitlabaccessibilitydevsecops+4

slack2025년 11월 19일

안드로이드 VPAT 여정 (새 탭에서 열림)

Slack은 2024년 대규모 UI 개편 이후 제3자 VPAT 평가를 진행하며 Android 전반의 접근성 문제를 발견했다. 단순한 색상 대비·이미지 라벨 문제뿐 아니라 오류 안내, 제목 구조, 입력 필드 라벨, 목록 개수, 드래그 앤 드롭 등 반복적인 문제가 확인되었고, 이를 공통 컴포넌트와 TalkBack 지원 개선으로 해결했다. 특히 시각적 UI를 추가하는 데 그치지 않고, 스크린 리더 사용자가 동일한 기능을 수행할 수 있도록 의미 구조와 대체 조작 방식을 제공하는 데 중점을 두었다. ## VPAT 평가와 Android 접근성 문제의 분류 - VPAT(Voluntary Product Accessibility Template)는 제품이 접근성 표준을 얼마나 충족하는지 설명해 고객의 구매 판단을 돕는 문서다. - Slack은 IA4 UI 개편 이후 2024년에 외부 접근성 전문 업체를 통해 VPAT 평가를 실시했다. - Android, iOS, 데스크톱에서 문제가 발견되었으며, Android에서는 다음과 같은 유형이 주요 이슈로 나타났다. - 오류 메시지가 스크린 리더에 전달되지 않음 - 제목이 제목 요소로 식별되지 않음 - 입력 필드에 영구적인 접근성 라벨이 없음 - 목록 항목 수가 잘못 안내됨 - 워크스페이스 순서 변경 기능이 드래그 앤 드롭에 의존함 - 취소선 정보가 스크린 리더에 전달되지 않음 - 오류를 색상만으로 표시함 - 키보드 탐색과 포커스 문제는 다수 보고되었지만, Android의 대형 화면 지원이 아직 제한적이어서 후속 과제로 남겼다. ## 오류 메시지의 스크린 리더 전달 - 잘못된 값을 입력한 뒤 “Next” 또는 제출을 누르면 오류가 화면에 표시되지만, TalkBack에는 오류 상태와 원인이 전달되지 않았다. - 오류 표시 방식은 크게 두 가지였다. - `OutlinedTextField` 바로 아래에 오류 메시지를 표시 - `SKBanner`를 이용해 오류 배너를 표시 - 두 경우 모두 TalkBack이 오류를 자동으로 읽지 않아 사용자가 화면을 직접 탐색해야 했다. - 해결 방법: - `OutlinedTextField`를 수정해 입력 필드에 포커스가 갔을 때 오류 상태와 메시지를 안내하도록 변경 - 오류 유형의 `SKBanner`도 오류 발생 시 스크린 리더가 내용을 읽도록 수정 ## 제목 구조와 페이지 탐색 개선 - 제목이 시맨틱하게 식별되지 않으면 스크린 리더 사용자가 페이지의 구조를 빠르게 파악하거나 제목 단위로 이동하기 어렵다. - Preferences와 같은 목록 내부에서 누락된 제목 요소를 찾아 수정했다. - 외부 업체는 상단 앱 바의 제목도 heading으로 지정할 것을 제안했지만, 다른 Android 앱과 표준 동작을 비교한 결과 일관된 Android 관행이 아니라고 판단해 해당 티켓은 종료했다. ## 입력 필드의 영구 라벨 문제 - 일부 입력 필드는 placeholder만 라벨로 사용했다. - 사용자가 텍스트를 입력하면 placeholder가 사라지므로, 인지적 어려움이 있는 사용자는 필드의 목적을 잊을 수 있다. - 메시지 입력 영역(AMI)은 공간 제약 때문에 이상적인 해결책을 적용하지 못했다. - 검색 필드에는 돋보기 아이콘을 추가했다. - 입력 전후에도 해당 필드가 검색용이라는 시각적 단서를 제공한다. - 작은 디자인 변경으로 입력 필드의 목적을 더 명확하게 만들었다. - 이 문제는 접근성 개선이 반드시 복잡한 기술적 변경을 요구하지 않으며, 적절한 시각적·의미적 단서만으로도 사용성을 크게 높일 수 있음을 보여준다. ## 목록 항목 수를 정확히 안내 - TalkBack의 “항상 목록 항목 수 말하기” 설정이 켜져 있으면 목록의 전체 항목 수가 안내된다. - Slack의 구형 Slack Kit(SK) Bottom sheet에서는 장식용 divider까지 목록 항목으로 계산됐다. - 실제 행이 5개이고 divider가 2개면 TalkBack이 “7개 항목이 있는 목록”이라고 안내했다. - 해결을 위해 `SKListAdapter`에 새로운 `SKListAccessibilityDelegate`를 도입했다. - 이 delegate는 접근성용 `CollectionInfo`를 덮어써 실제 의미 있는 목록 항목 수만 전달한다. ## 드래그 앤 드롭을 대체하는 워크스페이스 이동 방식 - 워크스페이스 전환기에서는 워크스페이스를 선택한 뒤 드래그해 순서를 변경해야 했다. - 손의 움직임이나 정교한 조작이 어려운 사용자는 이 기능을 수행하기 힘들거나 사용할 수 없었다. - 해결 방법: - 워크스페이스 전환기에 `Edit` 모드를 추가했다. - 편집 모드에서는 각 행에 6점 모양의 드래그 핸들을 표시해 이동 가능한 요소임을 명확히 했다. - TalkBack 사용자를 위해 사용자 지정 접근성 동작인 “앞으로 이동(Move before)”과 “뒤로 이동(Move after)”을 추가했다. - TalkBack 컨텍스트 메뉴의 세 손가락 탭 또는 `L`, `r` 제스처로 항목을 이동할 수 있게 했다. - 정렬이 끝나면 우측 상단의 “Done” 버튼을 눌러 편집 모드를 종료한다. - 시각적 드래그 UI와 스크린 리더용 명령형 조작을 함께 제공해 동일한 기능에 여러 접근 경로를 마련했다. ## 남은 접근성 개선 과제 - 취소선 정보가 스크린 리더에 전달되지 않는 문제와 오류를 색상만으로 표시하는 문제도 주요 이슈로 분류되었다. - 키보드 탐색과 포커스는 Android 태블릿 등 대형 폼 팩터에서 특히 중요하지만, Slack Android의 대형 화면 지원이 충분하지 않아 추가 검토 과제로 남았다. - 접근성 문제는 개별 화면의 수정만으로 끝나지 않고 공통 UI 컴포넌트와 접근성 메타데이터 처리 계층까지 개선해야 반복을 줄일 수 있다. 접근성을 개선할 때는 시각적 표시만 추가하지 말고, TalkBack이 오류·제목·목록 구조·상태 변화를 정확히 인식하는지 함께 검증해야 한다. 또한 드래그처럼 정밀한 동작이 필요한 기능에는 접근성 사용자 지정 동작이나 명시적인 편집 모드를 제공하는 것이 효과적이다.

keyboard-navigationaccessibilityandroidjetpack-compose+2

figma2025년 10월 13일

Figma에서 접근성을 개선하는 (새 탭에서 열림)

Figma는 키보드만으로 캔버스와 댓글을 조작하고, 스크린 리더로 파일 내용을 더 정확히 이해할 수 있도록 15가지 이상의 접근성 기능을 출시했다. 제품별 키보드 단축키, 더 논리적인 포커스 이동, 풍부한 객체 설명과 서식 정보, 향상된 색상 대비가 포함된다. 이를 통해 장애가 있는 사용자뿐 아니라 장시간 작업하거나 다양한 환경에서 Figma를 사용하는 모든 사용자의 탐색성과 작업 흐름을 개선하는 것이 목표다. ## 캔버스 조작을 위한 키보드 기능 확대 - 키보드만으로 캔버스 객체를 이동·조정·정렬할 수 있는 기능이 제품 전반으로 확대됐다. - **Figma Slides** - 발표자 노트 크기 조정 - AI를 활용한 글쓰기 톤 변경 - **FigJam** - 표의 행과 열 추가·삭제·순서 변경 - 스탬프, 투표, 와시 테이프 추가 및 조정 - AI 요약, 임베드 링크·동영상 같은 캔버스 객체 탐색 - 마커 선과 형광펜 스트로크 선택 및 조정 - **Figma Design** - 선 추가·선택·조정 - 룰러 가이드 추가·삭제·편집 - 타원에서 호(arc) 생성 및 편집 - **공통 기능** - 편집 모드와 보기 전용 모드에서 링크 열기 - 키보드로 링크 사이를 이동 ## 댓글과 Dev Mode 주석 탐색 - 댓글을 추가하고, 위치를 옮기고, 댓글 간 이동을 키보드 단축키로 처리할 수 있다. - Dev Mode 주석도 키보드로 추가·이동·탐색할 수 있다. - 피드백을 확인하거나 답변할 때 포커스가 흐트러지지 않도록 설계되어 협업과 핸드오프 과정이 개선된다. - 댓글 관련 기능은 베타 제품에서는 제공되지 않을 수 있다. ## 사용자 설정을 통한 조작 방식 개인화 - 입력 중 Figma 전용 단축키가 동작하지 않도록 설정할 수 있다. - 다른 사용자가 스포트라이트를 사용할 때 자동으로 따라가는 기능을 켜거나 끌 수 있다. - 사용자는 작업 방식이나 보조기술 사용 환경에 맞춰 키보드 동작을 조정할 수 있다. ## 스크린 리더 지원 강화 - 버튼, 메뉴, 패널 등 인터랙티브 요소를 Tab 키로 이동할 때 더 논리적인 순서를 따른다. - 메뉴 열기, 버튼 실행, 툴바 옵션 선택 등 특정 동작으로 바로 이동할 수 있다. - 객체를 읽을 때 유형, 이름, 상태 등 더 자세한 정보가 제공된다. - 새 댓글이나 파일 변경 사항 같은 중요한 업데이트가 더 일관되게 안내된다. - 굵게, 기울임, 목록, 링크 등 서식 있는 텍스트 구조를 스크린 리더가 보존해 읽는다. - Buzz와 Slides의 캔버스 객체도 스크린 리더가 인식하고 안내한다. - 이러한 개선은 캔버스의 객체 순서를 파악하고 파일 변경 사항을 놓치지 않도록 돕는다. ## 향상된 색상 대비 - 간단한 토글로 라이트 모드와 다크 모드 모두에서 인터페이스의 색상 대비를 높일 수 있다. - 접근성 설정, Actions 메뉴, General 설정에서 기능을 활성화할 수 있다. - 텍스트와 아이콘의 가독성이 높아지고, 버튼과 외곽선이 더 뚜렷하게 표시된다. - 인터페이스 구조를 파악하고 필요한 요소를 빠르게 찾기 쉬워진다. - 햇빛이나 강한 조명 아래에서도 화면을 보기 쉬우며, 장시간 화면을 사용하는 경우 눈의 부담을 줄일 수 있다. ## 실용적인 활용 키보드 중심으로 작업하는 사용자는 Figma의 전체 키보드 컨트롤 목록을 확인해 자주 쓰는 캔버스·댓글 단축키를 익히는 것이 좋다. 스크린 리더 사용자는 객체 설명과 서식 있는 텍스트 지원을 활용하고, 일반 사용자도 색상 대비 설정을 활성화하면 장시간 작업이나 밝은 환경에서 더 편하게 Figma를 사용할 수 있다.

keyboard-navigationfigmafigjamaccessibility+4

figma2025년 8월 3일

디자인에 마우스가 필요 (새 탭에서 열림)

Figma는 마우스 없이도 디자인 작업을 수행할 수 있도록 키보드 접근성 기능을 대폭 강화했다. 이제 키보드만으로 캔버스 이동, 객체 삽입, 정밀한 선택이 가능하며, 스크린 리더가 작업 내용을 읽어줘 사용자가 현재 위치와 상태를 파악하기 쉬워졌다. 이는 키보드나 스크린 리더를 주로 사용하는 디자이너도 디자인 프로세스에 온전히 참여할 수 있도록 장벽을 낮추려는 업데이트다. ## 키보드만으로 이어지는 디자인 작업 - 기존에는 키보드만 사용할 경우 프레임 간 이동, 컴포넌트 선택, 새 요소 추가가 어려웠다. - 캔버스 상단에 갇히거나 잘못된 영역으로 확대·축소되는 등 작업 흐름이 끊기는 문제가 있었다. - 이번 업데이트는 기존 단축키에 더해 패닝, 삽입, 선택 기능을 보완해 디자인 스프린트, 공동 작업, 디자인 리뷰까지 마우스 없이 수행할 수 있게 한다. - 기능 개발 과정에서 키보드와 스크린 리더를 사용하는 디자이너 및 알파 사용자들의 피드백을 반영했다. ## 방향키 기반 캔버스 이동 - 방향키로 캔버스를 상하좌우로 이동할 수 있다. - `Shift` 키를 함께 사용하면 더 빠르게 이동하거나 스크롤할 수 있다. - 새 키보드 단축키를 통해 확대·축소를 세밀하게 조정할 수 있다. - 이동 도구와 손 도구에도 키보드로 접근할 수 있어 캔버스 탐색의 유연성이 높아졌다. ## 키보드로 객체 삽입과 배치 - 도형, 텍스트 등 대부분의 객체 유형을 키보드만으로 캔버스에 추가할 수 있다. - 프레임은 키보드 단축키와 십자선 형태의 안내 화면을 이용해 원하는 위치에 삽입할 수 있다. - `Enter` 키를 사용하면 화면 중앙에 텍스트를 배치할 수 있다. - 마우스 포인터 없이도 삽입 위치를 확인하고 객체를 생성할 수 있다. ## 키보드 기반 객체 선택 - 새로운 키보드 박스 선택 도구로 캔버스의 객체를 선택할 수 있다. - 방향키로 분홍색 커서를 이동해 객체 위에 놓은 뒤 `Enter`를 누르면 해당 객체를 선택한다. - 객체를 하나씩 선택하거나 선택 상자를 이용해 여러 객체를 동시에 선택할 수 있다. - 선택한 객체의 위치 조정 역시 키보드 중심으로 처리할 수 있다. ## 스크린 리더와 포용적인 디자인 - 사용자가 수행하는 작업을 스크린 리더가 읽어주므로 현재 상태와 위치를 파악하기 쉬워졌다. - 이번 기능은 단순히 Figma 사용성을 개선하는 것을 넘어, 더 많은 사람이 창작 과정에 참여하도록 하는 데 목적이 있다. - Figma는 색상 선택기의 대비 검사기를 통해 텍스트와 그래픽이 WCAG 기준을 충족하는지 확인할 수 있도록 지원한다. - 디자인에서 의미 있는 HTML 시맨틱 태그를 지정할 수 있어 스크린 리더를 지원하는 제품 설계에도 활용할 수 있다. - 접근성을 일회성 점검 항목이 아니라 지속적으로 개선해야 할 제품 개발 원칙으로 보고 있다. 마우스 사용이 어렵거나 키보드·스크린 리더를 선호하는 사용자는 Figma의 키보드 단축키와 스크린 리더 지원을 활성화해 작업 흐름을 점검해볼 만하다. 팀 차원에서도 이러한 기능을 활용하면 접근성을 고려한 디자인 협업 환경을 더 쉽게 구축할 수 있다.

keyboard-navigationfigmawcagscreen-readers+2

discord2025년 2월 26일

키보드만으로 디스 (새 탭에서 열림)

Discord는 마우스나 트랙패드 없이도 키보드만으로 대부분의 기능을 탐색하고 사용할 수 있는 키보드 내비게이션을 제공한다. Tab과 방향키로 인터랙티브 요소와 목록을 이동하고, Enter로 선택하며, 메시지 관리·서버 및 DM 탐색·음성 통화·서버 정리까지 단축키로 처리할 수 있다. 일부 기능은 기본 단축키가 없지만 사용자 지정 Keybind로 보완할 수 있다. ## 키보드로 버튼과 목록 탐색 - Discord에서 **Tab**을 누르면 현재 선택된 요소를 나타내는 포커스 상자가 표시된다. - Tab으로 버튼, 아이콘 등 인터랙티브 요소 사이를 이동한다. - 원하는 요소를 선택한 뒤 **Enter/Return**을 누르면 마우스로 클릭한 것처럼 실행된다. - DM 목록이나 서버 채널 목록에서는 **방향키**로 위아래 항목을 이동할 수 있다. - 메시지를 선택하면 해당 메시지에 직접 작업을 수행할 수 있다. ## 메시지 관리 단축키 메시지를 포커스한 상태에서 다음 키를 사용할 수 있다. - **E 또는 ↑**: 마지막 메시지 수정 - **+**: 리액션 추가 - **Backspace**: 메시지 삭제 - **R**: 메시지에 답장 - **P**: 메시지 고정 - **F**: 선택한 메시지 전달 - **Esc**: 채팅 입력창으로 이동 - 메뉴나 모달이 열려 있으면 먼저 닫는다. - **Alt/Option + Enter/Return**: 메시지를 읽지 않음으로 표시 ## 서버와 DM 빠르게 이동하기 - **Ctrl/Cmd + Option + ↑/↓**: 서버 목록 이동 - **Option + ↑/↓**: 채널 또는 DM 목록 이동 - **Option + Shift + ↑/↓**: 읽지 않은 채널이나 DM으로 이동 - **Ctrl/Cmd + Shift + Option + ↑/↓**: 멘션이 포함된 읽지 않은 채널이나 DM으로 이동 - **Ctrl/Cmd + Option + →**: 마지막으로 보던 서버와 DM 탭 사이 전환 - **Shift + Page Up**: 텍스트 채널에서 가장 오래된 읽지 않은 메시지로 이동 ## 음성 및 영상 통화 제어 통화 전후에도 키보드 단축키로 주요 기능을 실행할 수 있다. - **Ctrl + '**: 현재 보고 있는 개인 또는 그룹 DM에서 통화 시작 - **Ctrl/Cmd + Enter/Return**: 걸려 오는 DM 통화 받기 - **Esc**: 걸려 오는 DM 통화 거절 - **Ctrl/Cmd + Shift + M**: 마이크 음소거 - **Ctrl/Cmd + Shift + D**: 디퍼닝 - 마이크와 통화 소리를 모두 끈다. - **Ctrl/Cmd + Shift + Alt/Option + V**: 현재 참여 중인 통화 화면으로 이동 - 음성 채널 연결 해제 단축키는 기본 제공되지 않지만, 사용자 지정 **Keybind**로 만들 수 있다. ## 키보드만으로 드래그 앤 드롭 서버 아이콘과 일부 채널은 키보드로 위치를 옮길 수 있다. 서버 폴더를 만들거나 서버 목록을 정리할 때도 활용 가능하다. - 키보드 내비게이션으로 이동할 서버를 선택한다. - **Ctrl/Cmd + D**를 눌러 항목을 “집어 든다”. - **방향키**로 원하는 위치까지 이동한다. - **Enter**를 눌러 새 위치에 배치한다. - 채널 이동은 해당 서버를 소유했거나 채널을 이동할 권한이 있는 경우 사용할 수 있다. 키보드 중심으로 Discord를 사용하려면 먼저 Tab, 방향키, Enter 조합에 익숙해지는 것이 좋다. 자주 사용하는 기능 중 기본 단축키가 없는 작업은 사용자 지정 Keybind로 등록하면 마우스 사용을 더욱 줄일 수 있다.

keyboard-navigationdiscordaccessibilitykeyboard-shortcuts+1

figma2023년 5월 15일

그잼 스크린 리더 (새 탭에서 열림)

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

keyboard-navigationfigjamreactscreen-readers+2

figma2022년 11월 16일

피그마 접근성 팀과의 대화 | 피그마 블로그 (새 탭에서 열림)

Figma의 접근성 팀은 스크린 리더 지원을 개발 초기부터 다양한 사용자와 함께 검증해야 한다고 강조한다. 프로토타입 스크린 리더 베타를 통해 VoiceOver와 JAWS의 차이, 저시력 사용자의 시각·음성 병행 사용, 키보드 포커스의 중요성을 확인했다. Figma는 앞으로도 접근성 파트너와 협력해 지원 범위를 넓히고, 디자이너가 생성 HTML과 접근성 품질을 더 직접적으로 관리할 수 있는 도구를 제공할 계획이다. ## 오픈 베타를 통해 확인한 실제 사용자 요구 - 내부 테스트만으로는 실제 사용 환경과 보조공학 사용자의 요구를 충분히 파악하기 어렵다. - Mac VoiceOver에서는 잘 작동하던 기능도 JAWS 등 다른 스크린 리더에서는 추가 조정이 필요했다. - 스크린 리더 사용자는 시각 정보를 전혀 사용하지 않는 경우만 있는 것이 아니다. - 저시력 사용자는 화면의 시각 정보와 음성 정보를 함께 활용할 수 있다. - 다양한 상호작용 방식을 제공하면 더 넓은 사용자에게 도움이 된다. - 이에 따라 Figma는 주요 스크린 리더 기술을 개발 후반이 아니라 초기 단계부터 테스트하기로 했다. ## 시각 경험과 스크린 리더 경험의 연결 베타 테스트 결과, 스크린 리더 사용 경험은 시각적 UI와 분리된 별도 기능이 아니라 두 경험이 서로 보완되어야 한다는 점이 드러났다. - 접근성 트리에 요소의 위치 정보를 제공해, 시각 정보를 일부 활용하는 사용자가 스크린 리더 커서의 화면상 위치를 파악할 수 있게 했다. - 클릭 가능한 요소에 키보드 포커스가 있을 때도 “On hover” 상호작용을 실행하도록 조정했다. - 스크린 리더 커서가 이동하면 스크롤 영역도 함께 이동하도록 구현했다. - 프로토타입 도구 모음이 자동으로 숨겨질 때 키보드 포커스를 고려했다. - 화면을 탐색할 때 도구 모음이 방해되지 않아야 한다. - 동시에 현재 포커스된 컨트롤은 계속 화면에 보여야 한다. - 개발 과정에서 접근성 사용자를 단순히 “시각 사용자”와 “음성 사용자”로 나누는 기존 가정을 수정하게 됐다. ## 접근 가능한 프로토타입 진입 경로 프로토타입 자체가 스크린 리더로 접근 가능하더라도, Figma 디자인에서 해당 프로토타입으로 이동할 방법이 없으면 전체 경험은 접근 가능하지 않다. - 실제 출시 과정에서 프로토타이핑 모드로 바로 이동하는 단축키를 추가했다. - Mac: `Option + Command + Return` - PC: `Alt + Ctrl + Enter` - 스크린 리더 지원을 지속적으로 켤 수 있는 토글을 제공했다. - Figma Community를 통해 접근성 기능 사용법을 더 적극적으로 안내했다. - 기능 단위가 아니라 사용자가 처음부터 끝까지 수행하는 전체 흐름을 검증해야 한다는 교훈을 얻었다. ## 접근성 파트너와의 공동 테스트 Figma는 보조공학 사용자와 기업을 연결하는 Fable과 협력해 기능을 검증하고 있다. - Fable은 특정 사용자 흐름 테스트부터 심층 사용자 인터뷰까지 지원한다. - 사용자 피드백을 반영해 접근성 관련 컨트롤과 키보드 단축키를 더 쉽게 찾도록 개선하고 있다. - 접근성 탐색용 키보드 단축키를 키보드 단축키 패널에 포함하는 작업을 진행했다. - 키보드 단축키 패널 자체도 스크린 리더와 키보드로 접근 가능하도록 개선 중이다. - FigJam에서는 화면 구성의 정보 계층을 명확히 전달하기 위해 다음 정보를 스크린 리더에 제공한다. - 각 항목의 자식 수 - 형제 항목 수 - 캔버스 내 요소의 맥락을 파악하는 데 필요한 구조 정보 - 다양한 스크린 리더 소프트웨어와 숙련도 차이를 고려하면서 기능을 조정할 수 있었다. ## 앞으로의 접근성 방향 Figma 팀은 현재의 프로토타입 스크린 리더 지원이 완성된 상태가 아니라고 설명한다. - 콘텐츠가 기본적으로 스크린 리더 사용자에게 항상 제공되도록 하는 것을 우선순위로 삼고 있다. - 디자이너가 Figma가 생성하는 HTML을 더 세밀하게 제어할 수 있도록 할 계획이다. - 스크린 리더에 익숙하지 않은 디자이너도 자신의 디자인 접근성을 평가할 수 있는 도구를 개발하려 한다. - 접근성을 출시 직전의 점검 항목이 아니라 제품 설계와 개발 전반에 포함되는 기준으로 정착시키려 한다. 접근성 기능을 만들 때는 특정 스크린 리더 하나만 기준으로 삼지 말고, 실제 보조공학 사용자와 함께 초기 단계부터 테스트하는 것이 중요하다. 또한 개별 기능의 접근성뿐 아니라 사용자가 해당 기능에 도달하고, 탐색하고, 조작하는 전체 경로를 검증해야 한다.

keyboard-navigationhtmlscreen-readersweb-accessibility+1

figma2022년 5월 18일

접근성 향상을 위한 (새 탭에서 열림)

Figma는 디자인을 모든 사람이 참여할 수 있게 만드는 것을 목표로 하며, 이를 위해 시각장애·저시력 사용자를 위한 프로토타입 스크린 리더 베타를 발표했다. Figma 디자인은 일반 HTML이 아니어서 기존 스크린 리더가 내용을 읽기 어려웠지만, 프로토타입을 스크린 리더 전용 HTML로 변환하는 방식으로 문제를 해결했다. 이는 중요한 진전이지만, ARIA 역할·탭 순서·대체 텍스트 설정 등 접근성 지원을 확대하기 위한 추가 과제가 남아 있다. ## 프로토타입 스크린 리더 베타 - 기존에는 시각장애 사용자가 Figma 프로토타입을 열어도 스크린 리더에 “빈 캔버스” 레이블만 표시됐다. - 텍스트, 이미지, 버튼 등 프로토타입의 핵심 콘텐츠를 스크린 리더가 인식하지 못하는 문제가 있었다. - 베타 기능은 다음을 지원한다. - 텍스트 노트 읽기 - 이미지 대체 텍스트(alt text) 읽기 - 버튼과 키보드 동작을 통한 프로토타입 탐색 - Tab 키 등을 이용한 키보드 내비게이션 - 2022년 8월 업데이트를 통해 이 기능은 모든 사용자가 이용할 수 있는 오픈 베타로 전환됐다. ## Figma 디자인을 HTML로 변환하는 방식 - Figma는 웹 기반 애플리케이션이지만 디자인 결과물이 일반적인 HTML 요소로 그려지지 않는다. - 따라서 대부분의 스크린 리더가 Figma 캔버스의 텍스트와 인터페이스 구조를 직접 해석할 수 없었다. - Figma는 프로토타입을 스크린 리더 전용 HTML 표현으로 변환해 보조공학 기술에 제공하는 구조를 구현했다. - 이 변환 계층을 통해 스크린 리더가 화면에 표시된 콘텐츠와 상호작용 요소를 읽고 탐색할 수 있게 됐다. ## 함께 진행된 접근성 개선 - 다크 모드와 색상 대비 개선을 통해 다양한 시각적 요구를 지원했다. - WCAG 3.0 초안 기준에 부합하도록 색상 대비 준수를 강화했다. - Figma 데스크톱 앱과 Pro·Org·Enterprise 요금제에서 오디오 채팅 실시간 자막 기능을 오픈 베타로 제공했다. - Deque의 플랫폼 전반 접근성 평가를 받아 다음과 같은 개선 영역을 확인했다. - 키보드만으로 기능을 사용할 수 있도록 개선 - ARIA 레이블을 모범 사례에 맞게 적용 - Adee, Deque, Stark 등의 플러그인과 커뮤니티 파일을 통해 색상 대비 검사 등 접근성 도구 생태계도 확대되고 있다. ## 개발 프로세스에 접근성을 내재화 - Figma는 팀이 접근성을 고려하도록 권장하는 수준을 넘어, 제품을 설계·개발할 때 접근성을 필수적으로 반영하도록 하고 있다. - 키보드 전용 사용자와 스크린 리더 사용자를 지원하는 재사용 가능한 UI 컴포넌트를 제작하고 있다. - 새 기능과 코드가 접근성 모범 사례를 따르는지 확인할 수 있는 내부 도구도 개발 중이다. - 알파·베타 테스트에 접근성 사용자를 조기에 참여시켜 실제 사용 경험을 설계 과정에 반영하고 있다. ## 남은 과제 - 사용자가 디자인 요소에 직접 대체 텍스트를 지정할 수 있도록 해야 한다. - 컴포넌트에 ARIA 역할을 설정하는 기능이 필요하다. - 프로토타입 요소의 키보드 탭 순서를 지정할 수 있어야 한다. - 스크린 리더 지원은 시작 단계이며, 커뮤니티와 지속적으로 테스트하고 피드백을 받아 개선해야 한다. 실용적으로는 Figma에서 프로토타입을 제작할 때 이미지에 의미 있는 대체 텍스트를 제공하고, 키보드만으로 탐색 가능한 흐름과 충분한 색상 대비를 함께 검토하는 것이 권장된다.

keyboard-navigationaccessibilityhtmlwcag+3

figma2019년 8월 15일

유용한 플러그인으로 디자인 (새 탭에서 열림)

접근성을 디자인 초기부터 반영하지 않으면 시각·운동 능력 등에 제약이 있는 많은 사용자가 제품에서 배제될 수 있다. 이 글은 Figma에서 색상 대비와 키보드 포커스 순서를 점검할 수 있는 네 가지 플러그인을 소개하며, WCAG 기준을 디자인·개발 과정에 적용할 것을 권한다. 접근성 검사를 별도 단계가 아니라 디자인 워크플로의 일부로 만드는 것이 핵심이다. ## 색상 대비와 WCAG 기준 - 텍스트와 배경 사이의 충분한 대비는 다양한 시각 능력을 가진 사용자가 콘텐츠를 읽는 데 필수적이다. - WCAG는 색상 대비를 AA 또는 AAA 등급으로 평가하는 기준을 제공한다. - 소개된 플러그인들은 선택한 두 객체의 색상을 분석해 대비 비율과 기준 충족 여부를 확인한다. - 단순히 색상을 고르는 데 그치지 않고, 실제 텍스트 크기와 배경 조합을 고려해 가독성을 검증할 수 있다. ## Able: 대비 검사와 색각 이상 시뮬레이션 - 선택한 두 객체의 색상 대비를 분석한다. - 선택 영역이 바뀌면 결과도 자동으로 업데이트된다. - 텍스트와 배경 조합을 미리 볼 수 있는 프리뷰를 제공한다. - 다양한 색각 이상 유형에서 색상이 어떻게 보이는지 시뮬레이션할 수 있다. - 텍스트 색상과 배경 색상을 서로 바꿔 비교할 수 있다. - 각 색각 이상 유형별 영향을 받는 인구 비율도 확인할 수 있다. ## Contrast Checker: 대비 비율과 등급 확인 - 선택한 두 객체의 정확한 색상 대비 비율을 표시한다. - 선택된 레이어 중 텍스트 레이어가 있는지에 따라 상황에 맞는 미리보기를 제공한다. - AA/AA+와 AAA/AAA+ 등 여러 접근성 등급별 충족 여부를 보여준다. - 글꼴 크기가 18pt를 초과하는 경우에 적용되는 대비 기준도 별도로 확인할 수 있다. - Sketch 사용자에게 익숙한 Stark의 Figma용 대비 검사 도구다. ## Color Blind: 캔버스에서 보는 색각 이상 결과 - 선택한 디자인 요소가 여러 색각 이상 유형에서 어떻게 보이는지 확인한다. - 단순한 미리보기 대신, 선택한 요소를 복제해 캔버스에 직접 결과물을 생성한다. - 각 복제본은 해당 시각 유형을 나타내는 이름의 그룹으로 정리된다. - 완성된 화면 전체의 색상 체계와 정보 전달 방식이 색각 이상 사용자에게도 충분히 구분되는지 검토하는 데 유용하다. ## Focus Orderer: 키보드 탐색 순서 설계 - 브라우저가 키보드 포커스를 이동시킬 요소와 순서를 디자인에 표시한다. - 요소를 선택해 포커스 지점을 만들고, 캔버스에 순번을 표시할 수 있다. - 플러그인 UI에서 항목을 드래그하면 포커스 순서가 변경되고 캔버스의 번호도 자동으로 갱신된다. - 실제로 모든 요소를 탭 키로 순회하며 포커스 흐름을 테스트할 수 있다. - 디자인 단계에서 키보드 내비게이션을 고려하게 해, 구현 과정에서 접근성 요구사항이 누락되는 것을 줄인다. ## 접근성을 워크플로에 포함하기 - 색상 대비 검사는 시각적 가독성을, 포커스 순서 검사는 키보드 사용성을 다룬다. - 두 영역 모두 개발 완료 후 수정하기보다 디자인 단계에서 문제를 발견하는 편이 효율적이다. - WCAG 문서를 기준으로 플러그인 결과를 해석하고, 실제 사용자 환경에서의 사용성도 함께 검증해야 한다. - Figma 플러그인 API와 개발자 커뮤니티를 활용하면 팀에 맞는 접근성 검사 도구를 직접 만들 수도 있다. 이 플러그인들을 디자인 시스템과 리뷰 과정에 포함하면 접근성을 일회성 점검이 아니라 지속적인 품질 기준으로 운영할 수 있다. 특히 텍스트·배경 대비, 색각 이상 시뮬레이션, 키보드 포커스 순서를 모든 주요 화면에서 반복적으로 확인하는 것이 실용적인 접근이다.

keyboard-navigationfigmaaccessibilityjavascript+3