inclusive-design

접근성을 위한 지속적인 AI: GitHub이 피드백을 포용으로 전환하는 방법 (새 탭에서 열림)

현대적인 소프트웨어 개발 환경에서 접근성(Accessibility)은 더 이상 부가적인 요소가 아니며, AI와 개발자 교육을 통해 제품의 근본적인 포용성을 확보하는 것이 필수적입니다. 이 글은 접근성 프로그램 매니저의 관점에서 기술적 격차를 줄이고 모든 사용자에게 일관된 경험을 제공하기 위한 전략적 접근을 제시합니다. **접근성과 AI의 전략적 융합** - AI 기술을 활용하여 기존의 접근성 한계를 극복하고, 더욱 지능적이고 자동화된 포용성 솔루션을 구축합니다. - 접근성 데이터와 AI 모델을 연결하는 기술적 교량(Bridge) 역할을 통해, 다양한 사용자 환경에 실시간으로 대응하는 인터페이스를 구현합니다. **개발자 교육 및 포용적 제품 배포** - 개발 단계에서부터 접근성을 고려할 수 있도록 체계적인 교육 프로그램을 제공하여, 팀 전체가 포용적 디자인 원칙을 내재화하도록 돕습니다. - 단순히 가이드라인을 준수하는 것을 넘어, 모든 사람이 차별 없이 사용할 수 있는 제품(Inclusive Products)을 배포하는 것을 최종적인 목표로 삼습니다. 접근성은 제품 설계의 사후 처리가 아닌 핵심 가치가 되어야 합니다. AI와 교육 시스템을 유기적으로 결합하여 접근성을 개발 프로세스의 기본 설정(Default)으로 전환할 때, 진정으로 모두를 위한 기술 혁신이 가능해집니다.

토스의 새로운 얼굴 만들기 (새 탭에서 열림)

토스는 서비스의 인상과 신뢰감을 효과적으로 전달하기 위해 기존의 인물 그래픽을 고도화했습니다. 기존의 귀엽고 어린 이미지를 탈피하여 똑똑하고 믿음직한 '토스다운' 인상을 구축하고, 글로벌 확장에 발맞춰 다인종·다문화 환경을 포용할 수 있는 보편적인 디자인 체계를 마련하는 데 집중했습니다. 이를 통해 어떤 화면에서도 완성도를 유지하며 사용자에게 친근하면서도 전문적인 가치를 전달하는 새로운 페르소나를 완성했습니다. **토스다운 신뢰감을 주는 인물 비율 조정** - 기존 그래픽은 얼굴의 세로 비율이 짧아 다소 어려 보이고 신뢰감이 부족하다는 피드백이 있었습니다. - 얼굴 형태를 크게 바꾸어 이질감을 주는 대신, 눈·코·입의 배치와 표현을 미세하게 조정하여 지적이고 성숙한 인상의 균형점을 찾았습니다. - 도형을 단순히 이어 붙인 구조에서 탈피하여 목과 어깨의 곡선을 다듬고 입체감을 더해 조형적 완성도를 높였습니다. - 단정하고 전문적인 분위기를 자아낼 수 있도록 과한 디테일이 배제된 짧은 목폴라 형태의 의상을 기본 착장으로 설정했습니다. **성별과 인종의 경계를 허무는 중립적 디자인** - 특정 성별로 치우치지 않는 중성적인 헤어 스타일을 개발하여 성별 중립적인 인상을 구현했습니다. - 헤어의 부피감을 보완하고 라인을 정돈하여 화면 크기가 커지더라도 그래픽의 밀도가 떨어져 보이지 않도록 개선했습니다. - 단일한 스킨톤에서 벗어나 이모지의 표준을 참고한 다섯 가지 스킨톤 체계를 정의함으로써 다양성을 수용했습니다. - 여러 인물이 등장하는 화면에서는 다양한 스킨톤을 섞어 배치할 수 있도록 가이드를 마련하여 유니버설 디자인의 가치를 투영했습니다. **글로벌 확장을 고려한 포용적 그래픽 시스템** - 한국 중심의 서비스에서 글로벌 시장으로 확장함에 따라 특정 문화권에 국한되지 않는 보편적인 얼굴이 필요해졌습니다. - 노란색과 같은 추상적인 중립 컬러 대신 실제 인종의 다양성을 반영한 컬러 시스템을 선택하여 사용자들의 공감을 유도했습니다. - 디자인 개선 후 실제 앱 적용 시 주변 인터페이스 요소들과 자연스럽게 어우러지며 브랜드의 지향점을 명확히 드러내고 있습니다. 이러한 개편은 단순한 시각적 변화를 넘어 토스가 지향하는 포용성과 신뢰라는 브랜드 가치를 사용자에게 더 가깝게 전달하는 역할을 합니다. 향후에도 인종, 성별, 연령에 관계없이 누구나 자신을 투영할 수 있는 중립적이고 포용적인 그래픽 시스템을 지속적으로 확장해 나갈 것으로 기대됩니다.

피그마와 구글: 일본 (새 탭에서 열림)

Figma의 오픈 캔버스는 전통적인 선형적 교육 도구의 한계를 넘어, 보편적 학습 설계(UDL)를 실현하는 강력한 플랫폼으로 기능합니다. 이 도구는 모든 유형의 학습자가 각자의 방식대로 정보를 시각화하고 협업할 수 있는 유연한 환경을 제공하여 교육의 문턱을 낮춥니다. 결과적으로 피그마는 단순한 디자인 도구를 넘어, 학생들의 심리적 안전감을 높이고 참여를 이끌어내는 포용적 교실의 핵심 인프라로 자리매김하고 있습니다. ### 선형적 틀을 깨는 비선형적 학습 공간 * 기존의 슬라이드 기반 도구(PowerPoint 등)는 정보를 순차적으로만 전달해야 하는 제약이 있어, 전체적인 맥락을 파악하려는 학습자에게 걸림돌이 되기도 합니다. * 피그마의 무한한 캔버스는 학생들이 정보 간의 관계를 시각적으로 매핑하고, 자신만의 논리 구조에 따라 자유롭게 탐색할 수 있는 '공간적 사고'를 지원합니다. * 학습자는 캔버스를 확대하거나 축소하며 전체 구조와 세부 내용을 동시에 파악할 수 있어, 인지적 부하를 줄이고 자기 주도적인 학습 경험을 설계할 수 있습니다. ### 다각적 소통을 통한 참여의 평등화 * 커서 채팅, 스탬프, 위젯과 같은 상호작용 기능은 언어 장벽이 있는 학생이나 대중 앞에서 말하기를 주저하는 내성적인 학생들에게 새로운 소통 창구를 제공합니다. * 실시간 협업 기능을 통해 교사와 학생은 물리적 거리에 상관없이 같은 공간에 머무는 듯한 '공동체 의식'을 경험하며, 이는 학습 동기 부여로 이어집니다. * 말하기 중심의 전통적 수업 방식에서 벗어나 시각적 요소, 텍스트, 이모지 등 다양한 매체를 활용해 자신의 생각을 표현함으로써 모든 학생이 소외되지 않고 참여할 수 있습니다. ### 보편적 학습 설계(UDL)와 접근성 강화 * 피그마는 다양한 학습 요구를 가진 학생들을 위해 고대비 모드, 스크린 리더 지원 등 접근성 기능을 지속적으로 강화하고 있습니다. * 교사는 학생 개개인의 특성에 맞춰 레이아웃을 커스터마이징하거나 서포트 도구를 배치함으로써, 신경다양성(Neurodiversity)을 가진 학습자들도 편안하게 학습할 수 있는 환경을 조성할 수 있습니다. * 정답을 찾아가는 '과정'이 캔버스에 고스란히 남기 때문에, 교사는 결과물뿐만 아니라 학생의 사고 흐름을 파악하여 보다 정교한 개별 피드백을 제공할 수 있습니다. ### 실용적인 제언 교육 현장에서 피그마를 단순한 UI 디자인 도구로만 국한하지 말고, **브레인스토밍, 복잡한 개념의 시각화, 그리고 비동기적 협업을 위한 범용 교육 도구**로 도입해 보길 권장합니다. 처음 시작할 때는 복잡한 기능을 가르치기보다 간단한 템플릿을 활용해 학생들이 캔버스 위에서 자유롭게 노는 환경을 만들어주는 것이 포용적 교실을 만드는 첫걸음이 될 것입니다.

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

Figma는 디자인 도구가 시각적 경험에만 국한되지 않고 모든 사용자가 접근 가능해야 한다는 비전 아래, 새로운 스크린 리더 프로토타입 베타 버전을 발표했습니다. 이는 디자인 프로세스 전반에 걸쳐 장벽을 허물려는 Figma의 지속적인 노력의 일환으로, 시각 장애가 있는 디자이너와 협업자가 디자인 파일의 구조와 내용을 더 깊이 있게 이해할 수 있도록 돕는 것을 목표로 합니다. **디자인 접근성 강화를 위한 비전** * Figma는 "모두를 위한 디자인(Design for all)"이라는 철학을 바탕으로, 시각 중심적인 인터페이스 때문에 디자인 소외 계층이 발생하던 문제를 해결하고자 합니다. * 단순한 도구 사용의 편의성을 넘어, 디자인 결과물뿐만 아니라 디자인 과정 자체에 누구나 참여할 수 있는 포용적인 환경을 구축하는 데 집중하고 있습니다. * 이를 위해 내부 연구팀과 접근성 전문가들이 협업하여 시각적 정보를 텍스트와 음성으로 전환하는 최적의 메커니즘을 탐구해 왔습니다. **스크린 리더 프로토타입 베타의 주요 기능** * 이번에 공개된 프로토타입은 캔버스 내 레이어의 구조, 텍스트 내용, 그리고 각 디자인 요소의 속성을 스크린 리더가 인식할 수 있는 형태로 변환하여 제공합니다. * 사용자는 디자인 파일 내에서 논리적인 순서에 따라 요소를 탐색할 수 있으며, 복잡한 디자인 시스템의 계층 구조를 음성을 통해 파악할 수 있습니다. * 현재 단계에서는 베타 버전을 통해 실제 사용자들의 피드백을 수집하며, 디자인 객체 간의 관계성을 더 명확하게 전달할 수 있도록 알고리즘을 고도화하고 있습니다. **지속적인 연구와 커뮤니티 협력** * Figma는 접근성 개선이 단발성 기능 업데이트가 아닌 장기적인 연구(Research)와 설계(Design)가 필요한 과제임을 강조합니다. * 내부 팀인 'Inside Figma'를 중심으로 접근성 기술의 한계를 테스트하고 있으며, 실제 장애를 가진 사용자 그룹과의 긴밀한 협력을 통해 실질적인 해결책을 모색하고 있습니다. * 이번 베타 발표는 접근성 로드맵의 시작점이며, 향후 더 넓은 범위의 사용자들이 디자인 생태계에 참여할 수 있도록 기술적 지원을 확대할 계획입니다. Figma의 이번 시도는 단순히 기능을 추가하는 것을 넘어 디자인 도구의 표준을 확장하려는 중요한 발걸음입니다. 시각 장애가 있는 동료와 협업하거나 디자인 시스템의 접근성을 검토해야 하는 조직은 이번 베타 버전에 참여하여 피드백을 제공함으로써, 더욱 포용적인 디자인 워크플로우를 함께 구축해 나갈 수 있습니다.

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

Figma는 모든 사람이 디자인 과정에 참여할 수 있도록 시각적 캔버스의 장벽을 허물고, 보조 공학 기기 사용자들을 위한 접근성 혁신을 추진하고 있습니다. 단순히 UI를 수정하는 수준을 넘어, 복잡한 공간 정보를 시맨틱 데이터로 변환하여 스크린 리더와 키보드만으로도 디자인 구조를 이해할 수 있는 환경을 구축했습니다. 이러한 노력은 디자인 도구가 지향해야 할 포용성의 새로운 기준을 제시하며, 협업의 범위를 시각 장애인 및 운동 장애인 사용자에게까지 확장하는 결실을 보았습니다. ### 시각적 캔버스의 시맨틱 구조화 * 기존의 웹 접근성은 선형적인 문서 구조에 최적화되어 있으나, Figma의 캔버스는 비선형적이고 복합적인 레이어 구조를 가집니다. * 이를 해결하기 위해 Figma는 캔버스의 객체들을 스크린 리더가 해석할 수 있는 별도의 '시맨틱 레이어'로 매핑하여 시각적 정보를 텍스트와 구조 정보로 변환했습니다. * 디자인 파일 내의 레이어 계층 구조(부모-자식 관계)를 트리 형태로 전달하여, 시각 없이도 디자인의 맥락과 논리적 흐름을 파악할 수 있게 설계했습니다. ### 키보드 내비게이션 및 포커스 관리 최적화 * 마우스 없이도 복잡한 디자인 요소를 탐색할 수 있도록 포커스 트래킹 시스템을 개선하고, 시각적으로 명확한 포커스 표시기를 도입했습니다. * 캔버스 내 수많은 객체 사이를 빠르게 이동할 수 있는 '건너뛰기 링크'와 단축키 시스템을 정교화하여 탐색 효율성을 높였습니다. * 객체의 크기, 색상, 위치와 같은 속성 정보를 스크린 리더가 사용자에게 일관성 있게 전달하도록 ARIA(Accessible Rich Internet Applications) 속성을 고도화했습니다. ### 협업을 위한 접근성 기능 강화 * 디자인 검토 과정에서 주석(Comments)이나 피드백을 보조 공학 기기 사용자가 실시간으로 확인하고 응답할 수 있는 인터페이스를 마련했습니다. * 다양한 사용자가 동시에 작업하는 환경에서도 현재 누가 어디를 보고 있는지, 어떤 요소가 수정되었는지를 음성으로 안내받을 수 있는 기능을 강화했습니다. * 접근성 체크리스트와 플러그인을 통해 디자이너 스스로가 접근성이 높은 결과물을 만들 수 있도록 돕는 도구적 지원을 병행하고 있습니다. 접근성은 한 번의 업데이트로 완성되는 것이 아니라 지속적인 개선이 필요한 과정입니다. 개발자와 디자이너는 Figma가 제공하는 시맨틱 인프라를 적극 활용하여, 설계 초기 단계부터 대비 대비, 텍스트 크기, 논리적 레이어 순서를 고려하는 '접근성 우선 디자인(Accessibility-First Design)' 습관을 갖출 것을 권장합니다.

협업 중심의 교실을 조성 (새 탭에서 열림)

Design the Future(DTF)는 100명의 고등학생이 장애인을 위한 솔루션을 개발하는 디자인 씽킹 워크숍을 진행하며, 기존의 오프라인 방식을 탈피해 FigJam을 활용한 디지털 협업 환경을 구축했습니다. 이들은 물리적 제약을 넘어선 실시간 상호작용과 체계적인 템플릿 활용을 통해 참가자들이 복잡한 문제 해결 과정에 더욱 몰입할 수 있도록 유도했습니다. 결과적으로 디지털 도구는 단순한 도구의 전환을 넘어, 정보의 가시성을 높이고 더 넓은 범위의 포용적 디자인을 가능케 하는 핵심 엔진 역할을 수행했습니다. **디지털 전환을 통한 대규모 워크숍의 확장성 확보** * 과거 오프라인에서 포스트잇과 화이트보드로 진행하던 방식에서 벗어나, FigJam을 도입함으로써 수백 명의 참가자가 시공간의 제약 없이 동시에 접속할 수 있는 환경을 마련했습니다. * 100명의 학생이 실시간으로 커서를 움직이며 아이디어를 공유하는 과정은 시각적 활기를 더해주었으며, 이는 대규모 그룹 내에서도 각 개인의 참여를 촉진하는 장치가 되었습니다. * 물리적인 장소 섭외나 교구 준비의 번거로움을 줄이는 동시에, 모든 작업 결과물이 실시간으로 저장되어 데이터 유실 없이 워크숍 이후에도 지속적인 피드백이 가능해졌습니다. **장애 당사자와의 공감을 위한 포용적 인터페이스** * 이번 프로젝트의 핵심은 '파트너'라고 불리는 장애 당사자들과 학생들의 직접적인 소통이었으며, FigJam은 신체적 제약이 있는 파트너들도 아이디어를 제안하고 검토할 수 있는 접근성을 제공했습니다. * 위젯과 스탬프 기능을 활용해 텍스트 입력이 어려운 상황에서도 감정을 표현하거나 의견을 투표할 수 있어, 기술이 장벽이 아닌 연결의 매개체가 되도록 설계했습니다. * 학생들은 파트너의 인터뷰 내용을 보드에 직접 기록하고 시각화하며, 단순히 관찰하는 수준을 넘어 당사자의 고충에 깊이 공감하는 '엠퍼시 맵(Empathy Map)'을 정교하게 구축할 수 있었습니다. **위젯과 템플릿을 활용한 디자인 프로세스의 구조화** * 디자인 씽킹의 단계(정의, 아이디어 도출, 프로토타이핑, 테스트)를 FigJam 보드 내에 구역별로 구조화하여 학생들이 복잡한 공학적 설계 과정에서 길을 잃지 않도록 가이드를 제공했습니다. * 타이머 기능을 사용하여 논의 시간을 엄격하게 관리함으로써 몰입도를 높였고, 투표 위젯을 통해 민주적이고 신속한 의사결정을 지원했습니다. * 특히 복잡한 아이디어를 시각화하는 과정에서 플로우차트와 다이어그램 기능을 적극 활용해, 추상적인 해결책을 구체적인 프로토타입 설계도로 변환하는 속도를 높였습니다. 성공적인 디자인 씽킹 워크숍을 위해서는 단순한 아이디어 나열을 넘어, 참가자들이 데이터 사이의 연결고리를 찾을 수 있는 시각적 구조를 설계하는 것이 중요합니다. FigJam과 같은 협업 도구를 도입할 때, 기술적 기능 사용법을 가르치기보다 워크숍의 목적에 맞는 맞춤형 템플릿을 미리 구축해 두는 것이 참여자들의 창의성을 극대화하는 가장 효과적인 방법입니다.