figma·2025년 12월 10일·3분 읽기큐레이션 요약

이제 정부용 피그마

Figma Make이 Figma for Government에 추가되어 연방 기관이 보안 환경에서 대화형 프로토타입을 더 빠르게 제작할 수 있게 됐다는 내용이다. Figma는 이를 통해 정책 담당자, 디자이너, 개발자, 연구자, IT 담당자가 협업하며 시민 대상 서비스를 더 일찍 검증하고 접근성과 일관성을 높일 수 있다고 설명한다. Figma for Government는 FedRAMP Moderate 인증 환경을 기반으로 하며, 일부 클라우드 인프라의 완전한 규정 준수는 2026년에 완료될 예정이지만 Make은 현재 승인된 환경에서 사용할 수 있다. ## 공공 서비스 디지털화의 복잡성 - 정부 서비스는 시민 생활과 직접 연결되므로 사용성, 접근성, 신뢰도가 중요하다. - 정책 담당자, 기술 담당자, 운영 책임자 등 다양한 이해관계자의 요구를 조율해야 한다. - 요구사항이 계속 변하고 디자인·개발 인력이 제한적이어서 정적인 목업만으로는 빠른 검증이 어렵다. - 2024년 온라인 여권 갱신 시스템 사례에서는 2025년까지 200만 명 이상이 온라인으로 갱신했으며, 이용자의 97%가 긍정적인 경험을 보고했다. - 미국 행정명령도 시민 대상 서비스에서 사용성, 접근성, 디자인 일관성의 중요성을 강조했다. ## Figma Make의 역할 - 텍스트 프롬프트를 활용해 아이디어를 대화형 프로토타입으로 구현한다. - 기존에는 정적 시안을 주고받으며 수주가 걸리던 작업을 수시간 내에 탐색할 수 있다. - 다양한 사용자 흐름과 화면 구성을 빠르게 만들어 초기 단계에서 비교·수정할 수 있다. - 시민과 실제 사용자를 개발 전에 참여시켜 업무 흐름과 가정을 검증할 수 있다. - Figma 내부의 공유 라이브러리, 디자인 패턴, 접근성 기준과 연계해 결과물의 일관성을 유지한다. ## 협업과 서비스 품질 향상 - 디자이너, 정책 담당자, 연구자, 엔지니어, IT 담당자가 하나의 실시간 협업 공간에서 작업할 수 있다. - 아이디어 구상부터 프로토타입, 사용자 테스트, 개발 전달까지의 단절을 줄인다. - 연방 혜택, 금융 커뮤니케이션, 교육 플랫폼, 우주 임무 지원 시스템, 연구 서비스 등 복잡한 공공 업무에 적용할 수 있다. - 공유 디자인 시스템을 활용해 여러 기관과 서비스에서 접근성과 시각적 일관성을 높일 수 있다. - 시민의 피드백을 더 이른 시점에 반영해 개발 후반의 수정 비용과 실패 위험을 줄일 수 있다. ## 보안 및 규정 준수 - Figma Make은 Figma for Government의 승인된 환경에서 제공된다. - Figma for Government는 FedRAMP Moderate 권한을 기반으로 정부 기관의 보안 요구사항을 충족하도록 설계됐다. - 다만 Figma의 일부 클라우드 인프라는 2026년에 완전한 FedRAMP Moderate 규정 준수를 달성할 예정이다. - 글에서는 이러한 진행 상황과 별개로 Make 자체는 현재 승인된 환경에서 사용할 수 있다고 설명한다. ## 향후 방향 - Figma는 Figma Make을 시민 중심의 공공 서비스와 기관 내부 도구를 현대화하는 핵심 기능으로 확대하려 한다. - 정부 기관이 더 많은 아이디어를 빠르게 실험하고, 사용자 검증을 거쳐 실제 서비스로 발전시키는 것이 목표다. - 국립공원관리청의 431개 국립공원 디지털 앱 사례처럼, 작은 팀도 Figma를 활용해 대규모 공공 정보 서비스를 구축할 수 있음을 강조한다. 실무적으로는 Figma Make을 최종 서비스 개발 도구라기보다, 보안 환경에서 정책·업무 흐름을 빠르게 검증하는 프로토타이핑 도구로 활용하는 것이 적절하다. 도입 전에는 조직의 데이터 분류 기준과 FedRAMP 적용 범위, 2026년 예정된 인프라 규정 준수 일정을 별도로 확인해야 한다.

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

접근성Figma디자인 시스템프로토타이핑+3

slack·2025년 11월 19일·4분 읽기큐레이션 요약

안드로이드 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이 오류·제목·목록 구조·상태 변화를 정확히 인식하는지 함께 검증해야 한다. 또한 드래그처럼 정밀한 동작이 필요한 기능에는 접근성 사용자 지정 동작이나 명시적인 편집 모드를 제공하는 것이 효과적이다.

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

접근성Androidkeyboard-navigationjetpack-compose+2

google·2025년 10월 28일원문

StreetReaderAI: 문맥 인식 (새 탭에서 열림)

StreetReaderAI는 구글 리서치에서 개발한 시각장애인 및 저시력자를 위한 혁신적인 스트리트 뷰 프로토타입으로, 멀티모달 AI인 Gemini를 활용해 시각적 정보를 실시간 음성 정보로 변환합니다. 기존 지도 서비스가 제공하지 못했던 스트리트 뷰 이미지의 맥락과 지리적 특성을 실시간 대화형 인터페이스로 설명함으로써, 시각장애인이 가상 세계를 자유롭게 탐색하고 실제 경로를 미리 파악할 수 있도록 돕는 것이 이 기술의 핵심입니다. **사용자 중심의 직관적 내비게이션** * 키보드 화살표 키나 음성 명령을 사용하여 게임을 하듯 가상 공간 내 시점 전환 및 이동이 가능합니다. * 사용자가 시점을 회전할 때마다 현재 방위(예: "북동쪽을 보고 있습니다")와 정면에 랜드마크나 장소가 있는지를 음성으로 즉각 피드백합니다. * "가상 걸음(Virtual steps)" 기능을 통해 앞뒤로 이동하며 이동 거리와 도로 정보, 주변 상점 및 시설물에 대한 정보를 실시간으로 수신할 수 있습니다. **AI 디스크라이버(AI Describer)를 통한 상황별 맥락 인식** * 단순한 이미지 분석을 넘어 사용자의 위도·경도, 도로 데이터, 현재 시야의 스트리트 뷰 이미지를 결합해 맞춤형 설명을 생성합니다. * 보행 안전과 내비게이션 정보에 집중하는 '기본 모드'와 지역의 역사적·건축적 배경을 상세히 설명하는 '투어 가이드 모드'를 제공합니다. * 사용자가 현재 장면에서 궁금해할 만한 후속 질문(예: "저 건물의 입구는 어디인가요?")을 AI가 스스로 예측하여 제안함으로써 탐색의 효율성을 높였습니다. **AI 채팅과 강력한 세션 메모리 기능** * Gemini Multimodal Live API를 활용하여 사용자와 실시간 대화가 가능하며, 사용자의 질문에 맞춰 시각적 정보를 해석합니다. * 약 100만 토큰 이상의 긴 컨텍스트 윈도우를 활용해 사용자가 세션 동안 탐색한 모든 경로와 이미지를 기억합니다. * 이를 통해 "방금 지나온 버스 정류장에 벤치가 있었니?" 또는 "아까 본 편의점에서 여기까지 얼마나 떨어져 있어?"와 같은 과거의 맥락이 포함된 복합적인 질문에 정확히 답변할 수 있습니다. **사용자 평가 및 실무적 시사점** 11명의 시각장애인을 대상으로 한 연구 결과, 사용자들은 StreetReaderAI를 통해 목적지의 지형지물을 미리 확인하고 보행 경로를 계획하는 데 큰 도움을 얻었습니다. 이 기술은 수조 개의 스트리트 뷰 이미지를 텍스트 기반의 데이터로 변환할 필요 없이, 필요할 때마다 실시간으로 AI가 해석해 준다는 점에서 확장성이 매우 높습니다. 향후 이와 같은 멀티모달 AI 기술이 지도 앱에 통합된다면 시각장애인의 이동권과 정보 접근성을 획기적으로 개선할 수 있을 것입니다.

접근성AIgemini멀티모달 AI+5

figma·2025년 10월 13일·3분 읽기큐레이션 요약

Figma에서 접근성을 개선하는

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

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

접근성Figmafigjamdev-mode+4

google·2025년 7월 1일원문

소리 위치 파악 기술 (새 탭에서 열림)

구글 리서치와 딥마인드가 발표한 '스피치컴퍼스(SpeechCompass)'는 다중 마이크를 활용한 음원 위치 추적 기술을 통해 모바일 자막 서비스의 가독성과 접근성을 혁신적으로 개선합니다. 기존의 실시간 자막 앱들이 여러 명의 발화 내용을 구분 없이 나열하던 한계를 극복하기 위해, 이 시스템은 소리가 들려오는 방향을 실시간으로 계산하여 발화자별로 색상과 화살표 지표를 제공합니다. 이를 통해 사용자는 복잡한 설정 없이도 그룹 대화에서 '누가, 어느 방향에서' 말하고 있는지를 직관적으로 파악할 수 있습니다. ### 기존 모바일 자막 기술의 한계와 해결책 * **인지 부하 문제:** 기존의 실시간 자막(Live Transcribe) 서비스는 모든 대화 내용을 하나의 텍스트 흐름으로 합쳐서 보여주기 때문에, 여러 명의 대화자가 섞여 있을 때 누가 어떤 말을 했는지 구분하기 어렵고 사용자의 인지적 부담이 큽니다. * **기존 방식의 제약:** 시각 정보를 활용한 발화자 분리는 카메라 시야 확보가 필요하고, 음성 특징점(Voiceprint) 기반 방식은 각 화자의 목소리를 미리 등록해야 하는 번거로움과 프라이버시 문제가 존재합니다. * **위치 기반 접근:** SpeechCompass는 대화자들이 물리적으로 서로 다른 위치에 있다는 점에 착안하여, 소리의 방향 정보를 활용해 발화자를 분리(Diarization)하고 시각적 가이드를 제공합니다. ### 다중 마이크를 이용한 실시간 음원 위치 추적 * **TDOA 알고리즘:** 각 마이크에 소리가 도달하는 시간 차이(Time-Difference of Arrival)를 이용해 소리의 도달 각도를 계산합니다. * **GCC-PHAT 적용:** 위상 변환을 이용한 일반화된 상호 상관(Generalized Cross Correlation with Phase Transform) 기법을 사용하여 소음 환경에서의 내성을 높이고 연산 속도를 최적화했습니다. * **정밀도 향상:** 커널 밀도 추정(Kernel Density Estimation)과 같은 통계적 기법을 결합하여 위치 추적의 정밀도를 높였으며, 4개의 마이크를 탑재한 전용 케이스는 360도 전 방향 감지를 지원합니다. 일반 스마트폰의 마이크 2개로도 소프트웨어 구현을 통해 180도 범위 내에서 작동이 가능합니다. ### 하드웨어 및 소프트웨어 구현의 효율성 * **저사양 최적화:** 별도의 거대 머신러닝 모델이나 가중치가 필요 없는 알고리즘 기반 방식이므로, 저전력 마이크로컨트롤러와 제한된 메모리 환경에서도 원활하게 작동합니다. * **낮은 지연 시간과 프라이버시:** 음성의 고유 특성을 추출할 필요 없이 소리의 물리적 성질만 활용하므로 실시간 처리가 가능하며, 개인 식별 정보나 비디오 데이터를 요구하지 않아 사용자 프라이버시를 강력하게 보호합니다. * **범용성:** 특정 언어에 의존하지 않는 기술이므로 전 세계 모든 언어에 즉시 적용 가능하며, 대화 장소를 옮기거나 휴대폰 위치를 바꿔도 즉각적으로 환경에 재적응합니다. ### 사용자 인터페이스와 실용성 * **시각적 분리:** 안드로이드 앱 인터페이스에서 각 발화자는 고유의 색상으로 구분되며, 대화창 옆에 표시되는 화살표 아이콘을 통해 발화자의 방향을 실시간으로 알려줍니다. * **접근성 향상:** 청각 장애인이나 난청 사용자가 그룹 대화의 흐름을 놓치지 않도록 돕고, 회의록 작성이나 다국어 번역 시에도 발화 주체를 명확히 하는 데 유용합니다. SpeechCompass는 복잡한 하드웨어나 클라우드 연산 없이도 모바일 기기 자체의 마이크 배열만으로 그룹 대화의 접근성을 획기적으로 높일 수 있음을 보여줍니다. 이 기술은 향후 다양한 모바일 접근성 도구에 통합되어, 청각 장애인뿐만 아니라 복잡한 회의 환경에서 기록이 필요한 일반 사용자들에게도 실질적인 도움을 줄 것으로 기대됩니다.

접근성speech-to-textsound-localizationspeaker-diarization+3

figma·2025년 4월 1일·4분 읽기큐레이션 요약

디자인이 모두를 위한 이유 |

디자인은 디자이너만의 전문 영역이 아니라 문제를 해결하고 아이디어를 전달하는 보편적인 사고방식이자 업무 방식이라는 글이다. 기술과 제품이 발전할수록 디자인은 하드웨어에서 인터페이스와 소프트웨어 경험으로 확장되었으며, 성공적인 제품은 엔지니어링뿐 아니라 사용자 조사와 접근성, 직관성이 함께 만들어낸다. 따라서 조직 전체가 디자인 지식을 공유하고 모든 구성원이 디자인 과정에 참여할 때 더 나은 제품과 시스템을 규모 있게 만들 수 있다. ## 디자인은 특정 직군의 소유물이 아니다 - 디자인은 단순한 시각적 결과물이나 전문 기술이 아니라 다음과 같은 역할을 한다. - 세상을 바라보는 관점 - 아이디어를 소통하는 언어 - 문제와 도전을 해결하는 프레임워크 - 제품과 프로세스를 개선하는 업무 방식 - 디자인은 누구의 소유도 아니며, 직함과 관계없이 누구나 활용할 수 있어야 한다. - 개인 디자이너의 역량에는 한계가 있으므로, 팀 전체가 디자인 지식을 갖추면 다음을 달성할 수 있다. - 더 뛰어난 사용자 경험 제공 - 더 효율적인 업무 프로세스 설계 - 조직 차원의 시스템 개선 - 디자인의 미래는 개별 디자이너나 디자인 부서에만 머무르지 않고, 조직 전체의 공동 실천으로 확장되는 데 있다. ## 기술 발전과 함께 진화한 디자인 - 디자인의 본질은 문제 해결이다. - 기술이 새로운 가능성을 열 때마다 디자인은 그 기술을 사람들이 이해하고 사용할 수 있는 제품과 경험으로 변환한다. - 디자인은 기술 프로토타입을 실제 시장에서 사용할 수 있는 제품으로 발전시키는 핵심 요소다. - 하드웨어 성능만으로는 제품의 성공을 보장할 수 없으며, 사용자가 제품을 어떻게 이해하고 사용하는지까지 고려해야 한다. ## 워크맨이 보여준 사용자 중심 디자인 - 1979년 소니는 기존 Pressman 테이프 레코더 기술을 바탕으로 휴대용 스테레오를 개발했다. - 엔지니어링 측면에서는 다음과 같은 개선이 이루어졌다. - 부품 소형화 - 녹음 기능 제거 - 음질 향상 - 가볍고 휴대하기 쉬운 형태 구현 - 그러나 워크맨의 대중적 성공에는 직관적인 인터페이스와 사용자 조사가 결정적인 역할을 했다. - 소니의 코조 오손은 초기 프로토타입을 출장 중 직접 테스트하며 다음과 같은 사용자 요구를 확인했다. - 더 작고 휴대하기 쉬운 기기 - 더 넓은 사용자층이 쉽게 사용할 수 있는 조작 방식 - 함께 음악을 듣는 사회적 경험 - 이러한 조사 결과로 다음 기능이 도입되었다. - 두 사람이 동시에 들을 수 있는 듀얼 헤드폰 잭 - 함께 듣는 중 대화할 수 있는 ‘핫라인’ 버튼 - 파란색과 은색 본체, 주황색 버튼의 독특한 색상 조합도 검정·회색 중심의 당시 전자제품과 차별화되어 제품의 상징성을 높였다. - 워크맨은 기술, 사용자 테스트, 접근성, 인터페이스 설계, 시각적 차별화가 결합해 문화적 아이콘이 된 사례다. ## 하드웨어에서 인터페이스 디자인으로 - 2000년대 중반부터 산업의 관심은 하드웨어 자체에서 이를 작동시키는 소프트웨어로 이동했다. - 맥북, 아이팟, 아이폰의 성공은 하드웨어 엔지니어링뿐 아니라 다음 요소에 크게 의존했다. - 사용하기 쉬운 소프트웨어 인터페이스 - 햅틱 피드백 - 터치스크린 상호작용 - 일관되고 이해하기 쉬운 조작 경험 - 앱스토어의 등장으로 모바일 소프트웨어 시장이 성장했고, 기업들은 더 혁신적이고 잘 설계된 디지털 경험을 만들기 위해 경쟁했다. - Web 2.0과 모바일 앱의 확산은 소프트웨어 중심 기업의 성장을 이끌었다. - 소프트웨어는 물리적 장치의 제약을 넘어 복잡한 디지털 기능을 사용자가 이해할 수 있도록 만드는 인터페이스 디자인을 크게 발전시켰다. ## 물리적 제품을 모방한 초기 디지털 인터페이스 - 초기 디지털 인터페이스는 스큐어모피즘을 활용해 기존의 물리적 사물을 모방했다. - 버튼, 슬라이더, 스크롤 휠처럼 사용자에게 익숙한 물리적 요소를 디지털 화면에 재현해 학습 부담을 줄였다. - 이는 새로운 디지털 환경을 낯설어하는 사용자에게 기존 경험을 연결해 주는 방식이었다. - 이후 디지털 기술이 발전하면서 인터페이스는 물리적 사물의 모방을 넘어 디지털 환경에 특화된 새로운 상호작용 방식으로 확장되기 시작했다. 조직에서는 디자인을 결과물을 만드는 마지막 단계로 한정하기보다, 문제 정의부터 사용자 조사와 의사결정까지 모든 구성원이 참여하는 공통 방식으로 다루는 것이 좋다. 디자이너뿐 아니라 엔지니어, 기획자, 마케터도 사용자 관점과 실험적 사고를 공유할 때 제품의 완성도와 조직의 실행력이 함께 높아진다.

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

접근성사용자 경험design-thinkingsoftware-design+3

figma·2025년 3월 12일·3분 읽기큐레이션 요약

eBay가 Figma로 브랜드

eBay는 브랜드와 제품 팀이 따로 관리하던 디자인 시스템을 Figma 중심의 통합 문서 플랫폼인 ‘Evo Playbook’으로 재구축했다. 300쪽이 넘는 Playbook은 접근성, 디자인, 코드 정보를 한곳에 모으고, Figma 변경 사항을 자동 검증·게시해 문서를 살아 있는 업무 흐름으로 만들었다. 핵심은 중앙화된 문서, 라이브러리 메타데이터, Component Status API, Figma 플러그인 자동화다. ## 기존 문서화 방식의 한계 - 디자인 시스템 정보가 여러 Figma 파일에 흩어져 있었다. - 디자이너, 개발자, 접근성 담당자가 각각 별도의 문서를 관리했다. - 디자이너가 Figma의 정적 파일을 수정한 뒤, 별도 티켓을 통해 문서 사이트에 반영해야 했다. - 컴포넌트 상태를 수동 테이블로 관리해 정보가 빠르게 오래되었다. - 외부 에이전시가 만든 기존 Playbook은 실제 eBay의 디자인·개발 업무와 분리되어 유지보수가 어려웠다. ## Evo와 eBay Playbook의 통합 방향 - eBay는 기존 시스템을 부분 수정하지 않고 문서화 파이프라인을 처음부터 다시 설계했다. - 브랜드 가이드, 제품 디자인 시스템, 기술 문서를 별도 사이트가 아닌 하나의 공간에 통합했다. - 2024년 11월 공개된 Evo는 약 30년 된 eBay의 시각 언어를 현대화한 디자인 시스템이다. - 300쪽 이상의 Playbook을 통해 내부 팀과 외부 에이전시가 동일한 기준을 참고할 수 있도록 했다. - 문서를 단순한 참고 자료가 아니라 영감과 사용 경험을 제공하는 제품처럼 설계했다. ## Component Status API로 구현 상태 통합 - eBay는 모든 디자인 시스템 라이브러리의 컴포넌트 상태를 추적하는 내부 API를 만들었다. - Figma 컴포넌트 설명에 컴포넌트 이름과 버전 메타데이터를 기록한다. - API는 다음 라이브러리의 구현 여부와 버전을 통합적으로 확인한다. - Figma 컴포넌트 라이브러리 - 네이티브 라이브러리 - Skin, Marko, React 등 웹 컴포넌트 라이브러리 - Playbook의 컴포넌트 페이지에는 플랫폼별 리소스 링크, 최신 버전, 상태가 표시된다. - 개발자는 자신이 사용하는 프레임워크에 컴포넌트가 존재하는지, Figma 버전 및 문서와 일치하는지 바로 확인할 수 있다. ## Figma 기반 자동화와 게시 - 모든 컴포넌트, 가이드라인, 접근성 안내는 Figma에서 작성하고 수정한다. - eBay는 문서 내보내기 기능을 수행하는 자체 Figma 플러그인을 개발했다. - 플러그인은 변경 내용을 다음과 같이 처리한다. - 문서 구조와 콘텐츠를 추출 - 린팅을 통해 형식과 규칙을 검사 - 유효성을 검증 - CMS에 자동 게시 - 과거에는 문서 업데이트에 며칠이 걸렸지만, 자동화 이후 Figma 수정 사항이 2분 이내에 Playbook에 반영된다. - 개발자가 CMS를 직접 수정할 필요가 없어 문서 업데이트의 진입 장벽이 낮아졌다. ## 브랜드와 제품 조직 사이의 사일로 해소 - OneExperience 팀은 브랜드, 디자인 시스템, 디자인 기술, 콘텐츠를 아우르는 교차 기능 조직으로 구성됐다. - 디자인과 개발 문서가 서로 다른 원천에서 관리되지 않고 동일한 workflow에서 생성된다. - 디자인 시스템 문서가 실제 라이브러리와 자동으로 연결되므로 문서와 구현 사이의 불일치가 줄어든다. - 빠른 업데이트 덕분에 팀들이 문서화를 별도의 행정 업무가 아니라 일상적인 설계 과정의 일부로 받아들이게 되었다. ## 실용적인 적용 시사점 - 디자인 시스템 문서를 정적 웹 페이지로 관리하기보다 실제 설계 도구와 연결된 살아 있는 문서로 운영하는 것이 효과적이다. - 컴포넌트 이름과 버전을 메타데이터로 표준화하면 여러 플랫폼의 구현 상태를 자동으로 추적할 수 있다. - Figma 플러그인, 린터, API를 결합하면 문서 품질 검증과 게시를 자동화할 수 있다. - 브랜드 가이드와 제품 디자인 시스템을 분리하기보다 하나의 소스 오브 트루스로 통합하면 조직 간 협업과 일관성이 향상된다.

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

접근성Figma디자인 시스템API+3

discord·2025년 2월 26일·3분 읽기큐레이션 요약

키보드만으로 디스

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로 등록하면 마우스 사용을 더욱 줄일 수 있다.

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

접근성discordkeyboard-shortcutskeyboard-navigation+1

figma·2024년 11월 20일·4분 읽기큐레이션 요약

피그마 패턴 라이브

UI3 개편은 Figma 내부 디자인 시스템이 오랜 성장 과정에서 파편화되었다는 문제를 드러냈고, 이를 해결하기 위해 Figma Pattern Library(FPL)를 처음부터 다시 구축하게 만들었습니다. 디자이너와 엔지니어가 페어 프로그래밍에 가까운 방식으로 협업해 디자인 의도와 코드 구현을 연결하고, 변수·REST API·테마 모드를 기반으로 일관되고 접근성 높은 제품 개발의 기반을 마련했습니다. FPL은 단순한 컴포넌트 모음이 아니라 조직 전체의 공통 언어이자 UI3를 확장하기 위한 단일 진실 공급원으로 설계되었습니다. ## UI3가 드러낸 내부 디자인 시스템의 문제 - Figma는 다른 팀의 디자인 시스템 구축을 돕는 제품을 만들고 있었지만, 내부 시스템은 오랜 기간의 급속한 성장과 제품 확장으로 분리되어 있었습니다. - 동일해야 할 컴포넌트가 서로 조금씩 달랐고, 연결이 끊긴 컴포넌트 인스턴스가 누적되었습니다. - UI3를 모든 Figma 제품에 적용하려면 새로운 화면 디자인만으로는 부족했습니다. - 여러 팀이 일관되고 효율적으로 작업할 수 있는 견고한 기반 시스템이 필요했습니다. ## 디자이너와 엔지니어의 페어 협업 - Wayne Sun과 Tom Williams는 디자이너와 엔지니어로 구성된 5명의 소규모 팀을 만들었습니다. - 개발에서 한 사람이 코드를 작성하고 다른 사람이 실시간 검토하는 페어 프로그래밍처럼, 디자이너와 엔지니어가 긴밀하게 짝을 이루어 작업했습니다. - 디자이너는 시각적·사용자 경험 의도를 전달하고, 엔지니어는 이를 실제 컴포넌트와 토큰 시스템으로 구현했습니다. - 이 방식은 디자인 파일과 제품 코드 사이의 간극을 줄이고, 양쪽이 공유할 수 있는 시스템 언어를 만드는 데 목적이 있었습니다. - 그 결과 새로운 내부 디자인 시스템인 Figma Pattern Library(FPL)가 탄생했습니다. ## 스타일과 스프레드시트에서 변수 중심 구조로 전환 - 기존 시스템은 Figma의 변수 기능이 등장하기 전에 만들어졌습니다. - 디자이너는 Figma 스타일을 사용했지만, 엔지니어는 별도의 Google Sheets에서 색상 토큰을 관리했습니다. - 스프레드시트가 제품 변경 사항을 즉시 반영하지 못하면서 디자인 파일과 실제 코드의 색상이 달라지는 문제가 발생했습니다. - 팀은 Figma 변수와 REST API를 활용해 디자인과 코드가 자동으로 동기화될 수 있는 구조를 만들었습니다. - 타이포그래피 변수를 새로 만들고, 기존 타이포그래피 스타일이 이 변수들을 별칭으로 참조하도록 구성했습니다. - 색상 스타일은 중앙 관리가 가능한 색상 변수로 마이그레이션했습니다. - 색상 변수에 CSS 정의도 추가해 Dev Mode의 검사 패널에서 개발자가 올바른 변수명과 코드 표현을 확인할 수 있게 했습니다. ## Primitive와 Semantic 변수로 색상 체계 정리 - 색상은 밝기와 어두움이 체계적으로 이어지는 **color ramp**를 기반으로 구성했습니다. - 기본 색상 단위인 **Primitive 변수**는 색상 계열별로 정리하고, 100부터 1000까지 단계적으로 구분했습니다. - 실제 UI 용도를 나타내는 **Semantic 변수**는 Primitive 변수를 별칭으로 참조합니다. - 예를 들어 특정 색상값을 직접 사용하는 대신 배경, 텍스트, 테두리 같은 의미 기반 변수로 연결할 수 있습니다. - Semantic 변수는 다음과 같은 테마와 제품별 모드를 지원하도록 설계되었습니다. - 라이트 모드와 다크 모드 - Figma Design - FigJam - Slides - Dev Mode - 이 구조 덕분에 하나의 공통 컴포넌트가 제품이나 테마에 따라 색상만 자연스럽게 바꿀 수 있습니다. - Primitive 변수의 값을 수정하면 이를 참조하는 Semantic 변수와 컴포넌트에 변경 사항을 일괄 적용할 수 있습니다. ## FPL의 역할 - FPL은 UI3의 시각적 스타일을 정의하는 동시에, 이를 실제 제품에 일관되게 구현하기 위한 기술적 기반입니다. - 디자인과 엔지니어링을 분리된 단계로 처리하지 않고, 초기 설계부터 함께 검증하는 협업 모델을 채택했습니다. - 변수와 모드 기반의 구조는 여러 제품과 테마를 지원하면서도 공통된 사용자 경험을 유지하도록 돕습니다. - 중앙화된 토큰과 컴포넌트는 중복 구현과 미세한 시각적 차이를 줄이고, 향후 변경 사항을 더 빠르게 확산시킬 수 있습니다. FPL 사례는 디자인 시스템을 단순한 UI 컴포넌트 저장소가 아니라 디자인 토큰, 테마, 코드 연동, 협업 방식까지 포함하는 조직의 공통 인프라로 다뤄야 한다는 점을 보여줍니다. 특히 디자인 파일과 코드가 서로 다른 토큰을 관리하지 않도록 변수와 자동 동기화를 도입하는 것이 규모가 큰 제품 조직에 실용적인 출발점입니다.

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

접근성Figma디자인 시스템디자인 토큰+4

figma·2024년 10월 20일·4분 읽기큐레이션 요약

Made in Figma: 국립공

미국 국립공원관리청(NPS)은 431개 국립공원과 기념지를 하나의 앱에서 다루기 위해, 과거의 인쇄 브로슈어 디자인 시스템인 매시모 비넬리의 ‘유니그리드(Unigrid)’를 디지털 인터페이스에 적용했다. GuideOne과 Twohy Design Works는 각 공원의 다양한 데이터와 서사를 수용하면서도 일관된 사용자 경험을 제공하는 앱을 만들었다. 이 사례는 오래 지속될 공공 서비스일수록 확장 가능한 디자인 시스템, 접근성, 협업 가능한 제작 환경이 중요하다는 점을 보여준다. ## 431개 공원을 하나의 앱으로 통합하기 - NPS는 요세미티 같은 대형 국립공원부터 펜실베이니아의 한 칸짜리 기념관까지 규모와 성격이 매우 다른 431개 시설을 관리한다. - 과거에는 방문객 안내를 위해 각 공원별 인쇄 브로슈어를 제작했다. - 2016년 GuideOne이 공원별 개별 앱을 개발하기 시작했지만, 이후 하나의 통합 NPS 앱으로 방향을 전환했다. - 통합 과정에서는 다음과 같은 문제가 발생했다. - 각 공원이 자체적으로 데이터를 관리하고 콘텐츠를 작성함 - 공원마다 역사, 시설, 방문 정보, 내러티브가 다름 - 서로 다른 데이터를 하나의 구조와 시스템으로 통합해야 함 - 장기간 유지될 정부 서비스이므로 내구성과 유지보수성이 필요함 - 다양한 장애와 접근성 요구를 가진 사용자를 지원해야 함 ## 인쇄 브로슈어에서 찾은 디자인의 출발점 - NPS 브로슈어는 오랫동안 공원마다 형식과 스타일이 제각각이었다. - 1977년 NPS는 디자이너 매시모 비넬리에게 모든 인쇄물의 그래픽 요소와 제작 방식을 표준화하는 시스템을 의뢰했다. - 이때 만들어진 유니그리드는 다음을 체계화했다. - 페이지 구성과 그리드 - 이미지와 텍스트의 배치 - 타이포그래피와 시각적 위계 - 브로슈어 제작 규격과 일관된 브랜드 표현 - GuideOne과 Twohy Design Works는 이 역사적 시스템을 그대로 복제하지 않고, 디지털 제품에 적합한 원칙으로 재해석했다. ## 유니그리드를 디지털 인터페이스로 확장 - 앱은 공원별 개성을 유지하면서도 전체 서비스가 하나의 제품처럼 보이도록 설계됐다. - 브로슈어에서 사용하던 구조적 일관성을 앱의 화면과 콘텐츠 구성에 적용했다. - 공식 NPS 앱은 다음 기능을 제공한다. - 공원과 시설을 탐색하는 인터랙티브 지도 - 방문객을 위한 핵심 정보 - 셀프 가이드 투어 - 공원별 장소, 활동, 안내 콘텐츠 - 디자인 시스템은 각 공원이 독자적인 콘텐츠를 제공하더라도 공통된 사용자 경험을 유지하도록 돕는다. - 즉, 유니그리드는 특정 화면의 시각적 스타일이 아니라 다양한 콘텐츠를 하나의 체계 안에 담는 운영 방식으로 활용됐다. ## 데이터와 엔지니어링을 함께 고려한 협업 - NPS 앱은 단순한 시각 디자인 프로젝트가 아니라 콘텐츠와 데이터 통합 프로젝트이기도 했다. - NPS, GuideOne의 개발팀, 디자인팀이 Figma를 통해 작업물을 공유하고 피드백을 주고받았다. - 디자인 단계에서 다음 사항을 함께 검토할 수 있었다. - 실제 NPS 데이터로 구현 가능한 화면인지 - 공원별 콘텐츠 차이를 시스템이 수용할 수 있는지 - 개발팀이 재사용 가능한 컴포넌트로 구현할 수 있는지 - 사용자의 탐색 흐름이 복잡한 공원 구조를 잘 반영하는지 - Figma는 디자인 시안을 전달하는 도구를 넘어, 기관 담당자와 디자이너, 개발자가 제약 조건을 조율하는 공동 작업 공간으로 사용됐다. ## 공공 서비스에 필요한 접근성과 지속성 - 정부용 소프트웨어는 일반적인 단기 제품보다 훨씬 긴 수명을 전제로 한다. - 따라서 유행하는 시각 효과보다 안정적인 구조와 유지 가능한 시스템이 중요하다. - 서로 다른 접근성 요구를 가진 많은 사용자가 이용하므로 정보의 명확한 위계와 예측 가능한 인터페이스가 필요하다. - 공원별 콘텐츠가 계속 추가·변경되더라도 전체 앱의 품질이 흔들리지 않도록 공통 디자인 규칙과 컴포넌트 체계가 기반이 됐다. ## 이 사례가 보여주는 디자인 시스템의 역할 - 디자인 시스템은 브랜드를 일관되게 보이게 하는 규칙에 그치지 않고, 대규모 조직의 다양한 콘텐츠를 운영하는 기반이 될 수 있다. - 역사적 디자인 자산을 디지털 환경에 적용할 때는 외형보다 그 안의 원칙을 계승하는 것이 중요하다. - 통합 서비스에서는 모든 콘텐츠를 똑같이 만드는 것보다, 차이를 수용할 수 있는 공통 구조를 만드는 것이 효과적이다. - NPS 앱은 종이 브로슈어의 시각 언어를 지도, 검색, 투어, 방문 정보가 결합된 디지털 경험으로 전환한 사례다. 장기적으로 운영될 공공 앱을 만든다면, 먼저 조직의 기존 콘텐츠와 디자인 자산에서 검증된 원칙을 찾고, 이를 재사용 가능한 컴포넌트와 명확한 데이터 구조로 변환하는 것이 좋다. 여기에 초기 단계부터 접근성과 개발 가능성을 함께 검토해야 일관되면서도 실제 운영에 강한 제품을 만들 수 있다.

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

접근성Figma디자인 시스템사용자 경험+2

microsoft·2024년 5월 16일원문

마이크로소프트에서 접근성을 (새 탭에서 열림)

마이크로소프트는 '세계 접근성 인식의 날(GAAD)'을 맞아 모든 개발자가 장애 여부와 상관없이 누구나 기술을 누릴 수 있도록 돕는 접근성 도구와 방법론을 제안합니다. 개발자는 복잡한 전문 지식 없이도 'Accessibility Insights'와 'Visual Studio'의 통합 도구를 활용해 개발 수명 주기 내에서 접근성 테스트를 손쉽게 수행할 수 있습니다. 궁극적으로 이러한 도구들은 단순히 규정을 준수하는 것을 넘어, 모든 사용자에게 공평하고 만족스러운 디지털 경험을 제공하는 것을 목표로 합니다. **FastPass를 통한 신속한 고부하 이슈 탐지** * Accessibility Insights for Web의 'FastPass' 기능을 활용하면 5분 이내에 사용자 경험에 큰 영향을 미치는 핵심 접근성 문제를 식별할 수 있습니다. * 오픈소스 엔진인 axe-core를 기반으로 한 자동화 체크를 통해 UI 코드를 작성하는 과정에서 즉각적인 피드백을 제공합니다. * 탭 정지(Tab Stops)와 같은 키보드 내비게이션 테스트를 포함하여, 스크린 리더나 확대 도구 사용자에게 혼란을 줄 수 있는 잘못된 포커스 순서를 바로잡도록 돕습니다. **Visual Studio 통합 접근성 검사기 활용** * Visual Studio 2022(버전 17.5 이상)에 내장된 접근성 검사기를 통해 별도의 도구 이동 없이 IDE 내에서 직접 문제를 발견하고 수정할 수 있습니다. * Accessibility Insights for Windows와 동일한 'Axe-Windows' 엔진을 사용하여 데스크톱 애플리케이션의 일반적인 접근성 오류를 정밀하게 감지합니다. * 개발 흐름을 유지하면서 동시에 접근성 스캐닝을 병행할 수 있어 개발 생산성과 포용성을 동시에 확보할 수 있습니다. **Quick Assess를 통한 정밀한 보조 테스트** * 자동화 도구로 감지하기 어려운 심층적인 이슈를 해결하기 위해 30분 이내로 수행 가능한 10가지 보조 테스트(Assisted tests)를 제공합니다. * 최근 업데이트를 통해 최신 웹 접근성 표준인 WCAG 2.2 기준에 대한 테스트 지원 및 안내 가이드를 도입했습니다. * 헤딩 레벨(Heading Levels) 검사 등 각 테스트 항목마다 해당 이슈가 왜 중요한지(Why It Matters)에 대한 설명과 함께 구체적인 수정 사례 및 리소스를 연결해 줍니다. 접근성 개선은 단순히 체크리스트의 항목을 지우는 작업이 아니라, 기술을 통해 모든 사람에게 평등한 기회를 제공하는 혁신의 과정입니다. 지금 바로 Accessibility Insights와 Visual Studio의 최신 기능을 개발 프로세스에 도입하여, 작은 단계부터 사용자 경험의 질을 높여보시길 권장합니다.

접근성웹 개발automated-testingvisual-studio+3

figma·2024년 4월 2일·3분 읽기큐레이션 요약

Framework by Figma에 여러분을 초대합니다

Figma는 디자인 시스템을 단순한 스타일 가이드가 아니라 제품 설계와 개발을 지탱하는 기반으로 보고, 이를 주제로 한 글로벌 행사 ‘Framework by Figma’를 2024년 4월 16일 개최한다고 소개했다. 행사는 새로운 기능, 운영 모범 사례, 디자인-코드 연결, 디자이너와 엔지니어 간 협업을 다룬다. 이후 행사에서는 Code Connect, 타이포그래피·그라디언트 변수, Library Analytics API 등이 공개됐다. ## 디자인 시스템의 확장과 복잡성 - 디자인 시스템은 초기의 단순한 스타일 가이드에서 제품 개발 전반의 기반으로 발전했다. - 실제 도입과 운영 과정에서는 도구 선택, 자동화, 접근성, 조직 내 채택률 관리 등 다양한 문제가 발생한다. - Figma는 현재와 미래의 복잡한 요구를 지원하는 기능과 운영 전략을 행사에서 공유하려 했다. - 시스템을 미리 구조화한 경우뿐 아니라 자유롭게 작업하는 상황도 지원해야 한다는 철학을 강조했다. ## Framework 행사에서 다룬 내용 - 새로운 디자인 시스템 기능을 심층적으로 소개한다. - 디자인 시스템을 효과적으로 구축하고 유지하는 모범 사례를 공유한다. - Verizon 등 업계 기업의 디자인 시스템 구축 및 운영 경험을 소개한다. - Figma 제품팀이 향후 개발 방향을 설명한다. - Bumble, GitHub, Hewlett Packard가 참여하는 디자인-코드 연계 라운드테이블을 진행한다. - 참가자들의 실무 질문에 답하는 전문가 Q&A를 마련한다. ## 디자이너와 엔지니어의 연결 - 성공적인 디자인 시스템에는 디자인과 개발 조직의 긴밀한 협업이 필요하다고 설명한다. - 세션은 디자인 원칙부터 기술적 구현까지 두 직군의 공통 관심사를 다룬다. - 디자인 시스템을 코드와 더 가깝게 연결하는 새로운 기능도 소개 대상에 포함됐다. - 이는 디자인 산출물이 실제 제품 코드로 이어지는 과정의 간극을 줄이려는 방향이다. ## 행사에서 공개된 기능 - **Code Connect**: 디자인 시스템 구성 요소와 개발자가 사용하는 코드 컴포넌트를 연결한다. - **타이포그래피 변수와 그라디언트 변수**: 디자인 토큰의 표현 범위를 확장하고 일관된 스타일 관리를 돕는다. - **Library Analytics API**: 조직 내 라이브러리 사용 현황과 디자인 시스템 채택 정도를 분석할 수 있도록 지원한다. - 이러한 기능은 디자인 시스템의 구축뿐 아니라 개발 연계와 조직 전체의 활용도 측정까지 지원하는 데 초점을 둔다. ## 글로벌 디자인 시스템 커뮤니티 - 본 행사는 온라인으로 진행되며 전 세계 디자인 시스템 실무자를 대상으로 했다. - 아시아 지역 온라인 행사는 4월 18일, 도쿄 행사는 4월 23일에 별도로 진행될 예정이었다. - 런던 등 여러 도시에서는 현지 밋업도 계획됐다. - 온라인 스트림을 통해 지역과 관계없이 주요 발표와 세션에 참여할 수 있도록 했다. Figma가 제시한 방향은 디자인 시스템을 엄격한 규칙만으로 운영하기보다, 구조화된 관리와 자유로운 창작을 함께 지원하는 것이다. 조직에서는 디자인 토큰과 컴포넌트 표준화뿐 아니라 코드 연결, 사용량 분석, 디자이너·엔지니어 간 협업 체계까지 함께 구축하는 것이 실용적이다.

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

접근성Figma디자인 시스템design-to-code+3

figma·2024년 3월 18일·3분 읽기큐레이션 요약

지금 바로 북마크해야 할

프로토타이핑은 제품 개발 막바지의 보조 수단이 아니라, 아이디어 검증·사용자 조사·이해관계자 피드백·프레젠테이션 등 전 과정에서 팀의 공통 비전을 만드는 핵심 도구다. 이 글은 Figma 프로토타이핑 학습을 위해 기초 강의부터 발표, 모션과 플로우, 변수, 오피스 아워까지 23개의 영상·커뮤니티 파일·콘텐츠를 단계별로 큐레이션한다. 학습자는 자신의 수준과 목적에 맞는 자료를 골라 인터랙션 구현 능력을 높이고 더 나은 제품을 설계할 수 있다. ## 프로토타이핑의 역할 - 프로토타입은 제품의 동작과 사용자 경험을 시각화해 팀이 아이디어를 공유하도록 돕는다. - 사용자 테스트와 이해관계자 피드백을 통해 문제를 조기에 발견하고 반복적으로 개선할 수 있다. - 발표 자료에도 인터랙션을 추가해 정적인 화면보다 설득력 있게 제품의 흐름과 기능을 전달할 수 있다. - Figma는 모바일·태블릿·워치 등 다양한 디바이스 화면을 고려한 프로토타이핑 기능을 강화하고 있다. ## 기초 기능 익히기 - **「Build prototypes」(8분)** - 인터랙티브 프로토타입 제작의 기본 흐름을 소개한다. - 애니메이션을 적용하고 테스트 사용자에게서 피드백을 반영하는 방법을 다룬다. - **「Prototyping playlist」(50분)** - easing curve, transition, Smart Animate, 스크롤, 디바이스 프레임 등 핵심 기능을 짧은 영상들로 학습할 수 있다. - **「Prototyping 101」(63분)** - 프레임 간 기본 내비게이션부터 인터랙티브 컴포넌트 같은 고급 기능까지 설명한다. - **제품 담당자를 위한 Figma 학습 시리즈** - 디자이너가 아닌 제품 담당자도 가벼운 프로토타입을 직접 만들 수 있도록 안내한다. - 두 번째 영상에서는 transition, Smart Animate, 스크롤 동작 등을 활용해 화면을 더 실제처럼 만드는 방법을 다룬다. - **접근 가능한 프로토타입 커뮤니티 파일** - Figma의 접근성 모드를 활용해 프로토타이핑 화면의 정보를 스크린 리더로 읽을 수 있다. - macOS의 VoiceOver와 Windows의 JAWS 같은 도구를 통한 접근성 테스트에 활용할 수 있다. ## 발표 자료를 인터랙티브하게 만들기 - **「Presenting with Figma」(70분)** - Figma 프로토타이핑 기능을 활용해 역동적인 슬라이드 프레젠테이션을 구성하는 방법을 소개한다. - **발표 팁 영상** - 슬라이드 안에 프로토타입을 중첩해 실제로 스크롤되는 모바일 화면 등 인터랙티브 요소를 넣을 수 있다. - 이 방식은 이사회 보고, 수업, 제품 소개처럼 메시지 전달이 중요한 상황에 유용하다. - **Figma 앱으로 발표하기** - 모바일 앱에서 슬라이드를 직접 클릭하며 발표하는 방법을 보여준다. ## 영상·모션·사용자 플로우 학습 - 프로토타입의 완성도를 높이려면 단순한 화면 연결뿐 아니라 전환 효과, 애니메이션, 스크롤 동작을 함께 설계해야 한다. - Smart Animate와 easing curve를 사용하면 화면 변화가 더 자연스럽고 제품의 실제 동작에 가까워진다. - 모션과 플로우를 활용하면 사용자가 어떤 순서로 기능을 경험하는지 명확하게 검증할 수 있다. ## 변수와 고급 프로토타이핑 - 변수 기능을 활용하면 하나의 프로토타입에서 상태, 값, 조건에 따른 다양한 동작을 관리할 수 있다. - 반복되는 상태나 화면을 개별 프레임으로 복제하는 대신 변수와 인터랙티브 컴포넌트로 구성해 유지보수성을 높일 수 있다. - 복잡한 사용자 플로우와 여러 상태를 표현할 때 변수 기반 설계가 특히 유용하다. ## 오피스 아워와 실습 자료 - Figma의 오피스 아워 콘텐츠는 프로토타이핑 기능과 실제 활용 사례를 보충 학습할 수 있는 자료로 제공된다. - 영상뿐 아니라 Figma 커뮤니티 파일을 직접 열어 결과물을 확인하고 따라 해볼 수 있다. - 학습 방식에 따라 짧은 영상, 장시간 강의, 실습 파일, 소셜 콘텐츠 중 적합한 자료를 선택할 수 있다. 처음 시작한다면 기초 프로토타입 제작과 프레임 간 내비게이션부터 익힌 뒤, Smart Animate·스크롤·인터랙티브 컴포넌트로 확장하는 순서가 좋다. 이후 접근성 테스트, 변수, 발표용 프로토타입을 적용하면 실무에서 검증과 커뮤니케이션을 동시에 강화할 수 있다.

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

접근성Figma프로토타이핑user-research+3

figma·2024년 2월 11일·3분 읽기큐레이션 요약

디자인 시스템이란 무엇

디자인 시스템은 제품의 시각적 요소와 상호작용 방식을 일관되게 유지하도록 돕는 공통 언어이자 설계·개발을 위한 체계다. 색상, 아이콘, 버튼, 문구 같은 요소를 표준화하고 재사용함으로써 제작 시간을 줄이고 사용자 경험과 브랜드 정체성을 보호한다. 단순한 스타일 가이드가 아니라 원칙, 컴포넌트, 패턴, 기술 문서와 프로세스를 포괄하는 지속적으로 발전하는 기반이다. ## 디자인 시스템이란 무엇인가 - 제품과 서비스의 디자인·개발을 안내하는 **재사용 가능한 구성 요소와 표준의 집합**이다. - 복잡한 디지털 제품을 만들 때 팀이 공유할 수 있는 통일된 언어와 구조를 제공한다. - 요소를 매번 새로 설계하지 않아도 되므로 대규모 제품 개발에서 시간과 노력을 줄인다. - 디자인 시스템이 없으면 화면마다 스타일과 동작이 달라지는 **일관성 위기**가 발생할 수 있다. - 사용자가 인터페이스를 혼란스럽게 느낄 수 있다. - 브랜드 정체성이 약화될 수 있다. - 반복적인 디자인 작업과 구현 비용이 늘어난다. ## 디자인 시스템의 계층 구조 ### 1. 디자인 시스템 - 제품 생태계 전체를 아우르는 최상위 개념이다. - 다음과 같은 자원을 포함할 수 있다. - 기술 사양 - 디자인 토큰 - 컴포넌트 및 패턴 문서 - 모범 사례 - UX 설계 원칙 - 제품 개발 프로세스 - 고정된 규칙집이 아니라 제품과 조직의 변화에 따라 계속 발전하는 기반이다. ### 2. 컴포넌트 및 패턴 라이브러리 - 제품에서 반복적으로 사용하는 시각 요소와 상호작용 방식을 모아 둔 라이브러리다. - 컴포넌트의 예: - 버튼 - 입력 필드 - 기타 UI 요소 - 패턴의 예: - 내비게이션 흐름 - 데이터 표시 방식 - 레이아웃과 템플릿 - 반복되는 사용자 상호작용 - 코드 스니펫, 기술 사양, 사용 지침을 함께 제공해 디자인 의도를 실제 구현으로 연결한다. - 디자이너와 개발자가 동일한 기준을 참고하는 협업 지점 역할을 한다. - **컴포넌트 라이브러리**가 개별 UI 요소에 집중한다면, **패턴 라이브러리**는 더 넓은 문제 해결 방식과 사용자 흐름을 다룬다. ## 디자인 시스템과 스타일 가이드의 차이 - 스타일 가이드는 주로 다음과 같은 시각적 요소를 정의한다. - 색상 - 글꼴과 타이포그래피 - 이미지와 시각적 표현 - 디자인 시스템은 스타일 가이드보다 범위가 넓다. - 코딩 표준 - 사용성 원칙 - 상호작용 패턴 - 기술 문서 - 제품 개발 프로세스까지 포함할 수 있다. - 따라서 스타일 가이드는 디자인 시스템을 구성하는 일부로 볼 수 있다. ## 3. 기초 요소 - 제품의 전반적인 시각 언어와 목소리·말투를 정의한다. - 대표적인 구성 요소는 다음과 같다. - 색상 - 타이포그래피 - 아이콘 - 로고 - 일러스트레이션 - 접근성 가이드라인 - 브랜드 가이드라인 - 단순히 화면을 예쁘게 만드는 것을 넘어, 제품이 어떤 인상을 주고 어떤 방식으로 소통할지를 결정한다. ## 디자인 시스템과 UX - 디자인 시스템이 디자이너의 창의성을 제한하고 모든 화면을 똑같이 만든다는 것은 흔한 오해다. - 실제로는 반복적인 문제를 해결해 디자이너가 더 중요한 사용자 경험과 제품 문제에 집중하도록 돕는다. - 공통 요소와 기준을 재사용하면 일관성을 확보하면서도 제품 목적에 맞는 새로운 경험을 설계할 수 있다. - 색상, 아이콘, 버튼의 형태뿐 아니라 명확한 언어와 접근성까지 관리하므로 UX 전반에 영향을 준다. 디자인 시스템을 도입할 때는 단순히 UI 컴포넌트 목록을 만드는 데 그치지 말고, 디자인 원칙·접근성·코드·문서·협업 프로세스까지 함께 정의하는 것이 좋다. 또한 처음부터 모든 요소를 완성하려 하기보다 반복적으로 사용되는 핵심 요소부터 구축하고, 제품과 팀의 변화에 맞춰 지속적으로 관리해야 한다.

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

접근성디자인 시스템사용자 경험디자인 토큰+2

figma·2024년 1월 30일·3분 읽기큐레이션 요약

개발 모드 어노테

Figma의 Dev Mode 주석 기능은 디자이너와 개발자 사이에 흩어진 요구사항과 설계 의도를 하나의 공간에 모으기 위해 만들어졌다. 기존 주석은 작성에 시간이 많이 들고 디자인 변경에 따라 쉽게 낡으며 캔버스를 복잡하게 만든다는 문제가 있었다. Figma는 주석을 실제 디자인 속성·측정값·변수·컴포넌트와 연결하고, 캔버스 바깥에서 자동으로 배치해 최신 상태와 가독성을 함께 확보하려 했다. ## 디자이너와 개발자의 서로 다른 요구 - 디자이너는 시각적 결과만으로 표현하기 어려운 정보를 전달해야 한다. - 접근성 속성 - 인터랙션의 세부 동작 - 특정 디자인 결정을 내린 의도 - 개발자에게 디자인 파일은 정보가 지나치게 많아 실제 구현해야 할 부분을 찾기 어려울 수 있다. - 디자인 공유는 전체 파일을 전달하는 것과 다르며, 개발자가 집중해야 할 영역과 요구사항을 선별해 주는 과정이 필요하다. - Figma는 이러한 문제를 해결하기 위해 Dev Mode 안에 개발자용 사양을 큐레이션하는 전용 공간을 마련했다. - 디자이너도 Dev Mode에서 주석을 작성함으로써 개발자가 실제로 보게 될 화면과 맥락을 확인할 수 있고, 작업이 끝난 뒤 Dev Mode 링크를 공유할 수 있다. ## 기존 수동 주석의 한계 - 디자이너는 텍스트, 화살표, 치수선, 콜아웃 등을 직접 배치해야 하므로 주석 작성에 많은 시간이 든다. - 디자인이 변경되면 기존 주석이 수정되지 않아 실제 디자인과 설명 사이에 불일치가 생긴다. - 디자인 파일에 주석을 추가하려면 프레임을 옮기거나 주변 공간을 확보해야 한다. - 주석이 많아질수록 캔버스가 복잡해지고, 개발자가 필요한 정보를 찾기 어려워진다. - 작업이 완전히 확정된 뒤 “개발 준비 완료” 상태를 표시하는 방식에는 적합하지만, 지속적으로 변경되는 제품 개발 과정에는 한계가 있다. ## 디자인 속성과 연결되는 동적 주석 - Figma는 주석을 단순한 텍스트가 아니라 디자인의 실제 속성에 연결하는 방식을 고민했다. - 디자인 변경 시 연결된 주석과 치수선도 함께 갱신되도록 하면 디자이너가 정보를 반복해서 입력할 필요가 줄어든다. - 개발자는 디자이너가 계속 수정 중인 상황에서도 최신 디자인에 기반한 사양을 확인할 수 있다. - 디자인 시스템의 변수와 컴포넌트를 주석에서 직접 참조하면, 일반 텍스트보다 오류 가능성이 낮아진다. - 주석의 정보가 실제 디자인 요소 및 코드베이스와 가까워질수록 설계 사양과 구현 결과의 정합성이 높아진다. ## 캔버스를 어지럽히지 않는 위치 지정 - 기존 방식에서는 주석을 표시할 공간을 만들기 위해 프레임을 계속 재배치해야 했다. - Figma는 주석을 캔버스에 직접 차지시키지 않으면서도 개발자에게 충분히 잘 보이게 하는 방식을 탐색했다. - 최종 방향 중 하나는 주석을 자동으로 배치하고 표시하는 것이었다. - 자동 배치는 디자이너의 수동 정리 작업을 줄이고 개발자에게 더 깔끔한 화면을 제공할 수 있다. - 다만 확대·축소, 이동, 크기 조절, 최소화, 선택, 마우스 오버 등 다양한 상호작용을 고려해야 하므로 여러 프로토타입과 반복적인 조정이 필요했다. - 엔지니어링 팀은 주석 표시 로직을 조정해 다양한 화면 상태에서도 주석이 적절히 보이도록 하는 데 집중했다. ## 실용적인 시사점 Dev Mode의 주석은 디자인이 끝난 뒤 설명을 덧붙이는 문서화 도구라기보다, 변경 중인 디자인과 구현 요구사항을 지속적으로 연결하는 협업 기능에 가깝다. 주석을 작성할 때는 단순한 설명보다 접근성, 상태 변화, 인터랙션, 디자인 토큰처럼 실제 구현에 필요한 정보를 디자인 요소와 연결해 기록하는 것이 효과적이다.

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

접근성Figma디자인 시스템dev-mode+2