Design Tokens $extensions Checker는 토큰 파일의 메타데이터 레이어를 감사하는 브라우저 기반 도구입니다. W3C 형식의 design tokens JSON을 붙여넣으면 PenPot, Style Dictionary, 팀 거버넌스 설정 등 여러 도구에서 누적된 모든 $extensions 객체를 추출하여 네임스페이스, 속성, 메타데이터를 한눈에 보여줍니다. extensions는 논리적으로 그룹화되어 표시되므로 중복 또는 불필요한 항목을 쉽게 파악할 수 있습니다. 항목별 또는 일괄 삭제 후 정리된 JSON을 미리 보고 워크플로우에 바로 복사할 수 있습니다. 작성자의 이전 도구인 Relicss와 마찬가지로 모든 처리는 브라우저에서 이루어지며 데이터는 외부로 전송되지 않습니다.
Deque는 캐나다 접근성법(ACA)과 Phase 1 디지털 기술 접근성 규정에 따른 전체 시행 일정을 정리했습니다. 기술 기준은 2024년 5월에 공표된 국가표준 CAN/ASC-EN 301 549로, WCAG 2.1 AA를 포함하는 EN 301 549 v3.2.1을 채택하며 웹사이트를 넘어 소프트웨어, 모바일 앱, PDF, 하드웨어, 통신 기술로 범위가 확대됩니다. 주요 기한은 다음과 같습니다: 2027년 12월 5일까지 모든 직원 대상 접근성 교육 의무화 및 연방 정부 웹사이트 완전 준수; 2028년 12월 5일까지 대규모 연방 규제 조직(직원 500명 이상)의 공개 웹사이트, 디지털 문서, 모바일 앱, 조달 시 Accessibility Conformance Report(ACR) 제출 의무화. Deque는 향후 공식 업데이트 시 불필요한 재작업을 피하기 위해 지금 EN 301 549 + WCAG 2.2 AA를 목표로 삼을 것을 권고합니다.
Manuel Matuzović는 Chrome 144+에서 사용 가능한 새로운 HTML <geolocation> 요소를 소개합니다. 이 요소는 위치 접근 허용을 위한 내장 권한 버튼을 렌더링하며, 브라우저 벤더들이 범용 구현이 너무 복잡하다고 판단해 폐기된 <permission> 요소에서 발전한 결과입니다. 세 가지 핵심 속성을 지원합니다: accuracymode(기본값 "approximate" 또는 "precise", 버튼 아이콘과 레이블 변경), autolocate(이전에 권한이 부여된 경우 페이지 로드 시 onlocation 이벤트 발생), watch(사용자 이동에 따라 이벤트 지속 발생). 기만적인 UI 패턴을 방지하기 위해 opacity, transform, inline-size, letter-spacing 등 스타일링이 의도적으로 제한되며, 대비가 3:1 미만이거나 font-size가 허용 범위를 벗어나면 버튼이 작동을 멈춥니다. 새로운 :granted 의사 클래스를 통해 권한 승인 후 버튼 스타일을 지정할 수 있습니다.
Combobox vs. Multiselect vs. Listbox: 올바른 선택 방법 — Smashing Magazine
TAG: 컴포넌트
Vitaly Friedman은 드롭다운, combobox, multiselect, listbox, dual listbox 등 다섯 가지 목록 선택 패턴의 차이를 가시성, 필터링 기능, 선택 모드 측면에서 명확히 설명합니다. 핵심 원칙은 자주 사용하는 옵션을 숨기지 말고 미리 선택하거나 chip으로 표시하는 것입니다. 5개 미만 항목은 라디오 버튼이나 체크박스가 적합하고, 200개 이상의 항목 목록에는 빠른 필터링을 위해 combobox나 multiselect가 유용합니다. 흔히 간과되는 dual listbox(transfer list)는 대량 선택과 역할 할당에 특히 유용하며, drag-and-drop보다 더 빠르고 접근성이 뛰어난 경우가 많습니다. 모든 목록 유형은 키보드 탐색을 지원해야 하며, 7개 이상의 옵션이 있는 목록에는 "전체 선택" / "전체 해제" 컨트롤을 제공해야 합니다.
TetraLogical의 "Accessible building blocks for web" 동영상 시리즈는 제목, 이미지, 링크, 버튼, 폼 필드 등 다섯 가지 기본 HTML 요소를 명확한 언어, 포용적 시각 디자인, 올바른 구현이라는 세 가지 기준으로 다룹니다. 주요 내용은 다음과 같습니다: 제목은 건너뜀 없이 <h1>–<h6> 계층 구조를 사용해야 하고; 이미지는 설명보다 목적에 집중한 정확한 alt 텍스트가 필요하며(예: "보라색 핀 아이콘"이 아닌 "주소"); 링크는 최소 4.5:1 대비율과 밑줄 등 색 이외의 시각적 단서가 필요하고; 네이티브 <button> 요소로 만든 버튼은 tabindex 및 role="button" 수동 설정이 불필요하며; 폼 필드는 id/for 속성으로 <label>과 <input>을 연결하고 테두리 색은 주변 색과 최소 3:1 대비를 유지해야 합니다. 각 동영상에는 영국 수어(BSL) 버전도 제공됩니다.
Monday.com의 Design Systems Lead인 Elad는 Vibe 디자인 시스템 팀이 주석 중심의 Figma 핸드오프 문서를 Cursor에서 사용하는 AI 최적화 스펙 파일로 대체한 과정을 소개합니다. 워크플로우의 핵심은 Figma 링크를 입력하면 해당 프레임에서 기술 스펙을 생성하는 커스텀 VS Code 확장 도구이며, Cursor는 이 스펙과 컴포넌트 명명, Storybook 스토리 구조, WCAG 접근성 요구사항을 다루는 cursor rules 라이브러리를 함께 활용해 타입, 테스트, Storybook 문서를 포함한 70–90% 완성도의 컴포넌트 코드를 생성합니다. Figma MCP는 스크린샷 추출 및 code-connect 매핑에 활용됩니다. "info" 및 "empty state" 같은 신규 컴포넌트는 개발자 핸드오프 미팅 없이 디자인에서 Storybook 항목으로 바로 이어집니다. 모든 변경 사항은 GitHub pull request 검토와 Figma 브랜치 승인을 거쳐 품질 기준을 유지하면서 사이클 타임을 대폭 단축합니다.
Jesse Showalter 팀은 회계·장부 관리 분야를 위한 AI 미팅 어시스턴트 Vinyl의 fractional 디자인 파트너로 참여했으며, 이 프로젝트는 200만 달러의 펀딩을 이끌어냈습니다. 팀이 해결한 세 가지 문제는 모두 디자인 시스템의 핵심 원칙과 직결됩니다. 첫 번째: 확장성 — Figma에서 원시 토큰(primitive tokens)에서 의미 토큰(semantic tokens)으로 이어지는 완전한 변수 세트를 구축하여 모든 화면에서 즉각적인 라이트/다크 테마 전환이 가능하도록 했습니다. 두 번째: Framer 마케팅 사이트에 content-editing 2.0 거버넌스를 도입하여 Command+L로 섹션을 잠금 처리하거나 선택적으로 해제함으로써 마케팅 팀이 레이아웃이나 개발자 관리 영역을 건드리지 않고 카피와 이미지를 수정할 수 있습니다. 세 번째: 가격 계산기와 목차 사이드바 등 복잡한 기능은 Framer의 Workshop AI 도구(약 800줄의 코드 생성)와 수작업으로 작성한 84줄의 TSX 컴포넌트로 구현했습니다.
Monday.com의 Design Systems Lead인 Elad는 Vibe 디자인 시스템 팀이 주석 중심의 Figma 핸드오프 문서를 Cursor에서 사용하는 AI 최적화 스펙 파일로 대체한 과정을 소개합니다. 워크플로우의 핵심은 Figma 링크를 입력하면 해당 프레임에서 기술 스펙을 생성하는 커스텀 VS Code 확장 도구이며, Cursor는 이 스펙과 컴포넌트 명명, Storybook 스토리 구조, WCAG 접근성 요구사항을 다루는 cursor rules 라이브러리를 함께 활용해 타입, 테스트, Storybook 문서를 포함한 70–90% 완성도의 컴포넌트 코드를 생성합니다. Figma MCP는 스크린샷 추출 및 code-connect 매핑에 활용됩니다. "info" 및 "empty state" 같은 신규 컴포넌트는 개발자 핸드오프 미팅 없이 디자인에서 Storybook 항목으로 바로 이어집니다. 모든 변경 사항은 GitHub pull request 검토와 Figma 브랜치 승인을 거쳐 품질 기준을 유지하면서 사이클 타임을 대폭 단축합니다.
Jesse Showalter 팀은 회계·장부 관리 분야를 위한 AI 미팅 어시스턴트 Vinyl의 fractional 디자인 파트너로 참여했으며, 이 프로젝트는 200만 달러의 펀딩을 이끌어냈습니다. 팀이 해결한 세 가지 문제는 모두 디자인 시스템의 핵심 원칙과 직결됩니다. 첫 번째: 확장성 — Figma에서 원시 토큰(primitive tokens)에서 의미 토큰(semantic tokens)으로 이어지는 완전한 변수 세트를 구축하여 모든 화면에서 즉각적인 라이트/다크 테마 전환이 가능하도록 했습니다. 두 번째: Framer 마케팅 사이트에 content-editing 2.0 거버넌스를 도입하여 Command+L로 섹션을 잠금 처리하거나 선택적으로 해제함으로써 마케팅 팀이 레이아웃이나 개발자 관리 영역을 건드리지 않고 카피와 이미지를 수정할 수 있습니다. 세 번째: 가격 계산기와 목차 사이드바 등 복잡한 기능은 Framer의 Workshop AI 도구(약 800줄의 코드 생성)와 수작업으로 작성한 84줄의 TSX 컴포넌트로 구현했습니다.
Design Tokens $extensions Checker는 토큰 파일의 메타데이터 레이어를 감사하는 브라우저 기반 도구입니다. W3C 형식의 design tokens JSON을 붙여넣으면 PenPot, Style Dictionary, 팀 거버넌스 설정 등 여러 도구에서 누적된 모든 $extensions 객체를 추출하여 네임스페이스, 속성, 메타데이터를 한눈에 보여줍니다. extensions는 논리적으로 그룹화되어 표시되므로 중복 또는 불필요한 항목을 쉽게 파악할 수 있습니다. 항목별 또는 일괄 삭제 후 정리된 JSON을 미리 보고 워크플로우에 바로 복사할 수 있습니다. 작성자의 이전 도구인 Relicss와 마찬가지로 모든 처리는 브라우저에서 이루어지며 데이터는 외부로 전송되지 않습니다.
Deque는 캐나다 접근성법(ACA)과 Phase 1 디지털 기술 접근성 규정에 따른 전체 시행 일정을 정리했습니다. 기술 기준은 2024년 5월에 공표된 국가표준 CAN/ASC-EN 301 549로, WCAG 2.1 AA를 포함하는 EN 301 549 v3.2.1을 채택하며 웹사이트를 넘어 소프트웨어, 모바일 앱, PDF, 하드웨어, 통신 기술로 범위가 확대됩니다. 주요 기한은 다음과 같습니다: 2027년 12월 5일까지 모든 직원 대상 접근성 교육 의무화 및 연방 정부 웹사이트 완전 준수; 2028년 12월 5일까지 대규모 연방 규제 조직(직원 500명 이상)의 공개 웹사이트, 디지털 문서, 모바일 앱, 조달 시 Accessibility Conformance Report(ACR) 제출 의무화. Deque는 향후 공식 업데이트 시 불필요한 재작업을 피하기 위해 지금 EN 301 549 + WCAG 2.2 AA를 목표로 삼을 것을 권고합니다.
Manuel Matuzović는 Chrome 144+에서 사용 가능한 새로운 HTML <geolocation> 요소를 소개합니다. 이 요소는 위치 접근 허용을 위한 내장 권한 버튼을 렌더링하며, 브라우저 벤더들이 범용 구현이 너무 복잡하다고 판단해 폐기된 <permission> 요소에서 발전한 결과입니다. 세 가지 핵심 속성을 지원합니다: accuracymode(기본값 "approximate" 또는 "precise", 버튼 아이콘과 레이블 변경), autolocate(이전에 권한이 부여된 경우 페이지 로드 시 onlocation 이벤트 발생), watch(사용자 이동에 따라 이벤트 지속 발생). 기만적인 UI 패턴을 방지하기 위해 opacity, transform, inline-size, letter-spacing 등 스타일링이 의도적으로 제한되며, 대비가 3:1 미만이거나 font-size가 허용 범위를 벗어나면 버튼이 작동을 멈춥니다. 새로운 :granted 의사 클래스를 통해 권한 승인 후 버튼 스타일을 지정할 수 있습니다.
Combobox vs. Multiselect vs. Listbox: 올바른 선택 방법 — Smashing Magazine
Vitaly Friedman은 드롭다운, combobox, multiselect, listbox, dual listbox 등 다섯 가지 목록 선택 패턴의 차이를 가시성, 필터링 기능, 선택 모드 측면에서 명확히 설명합니다. 핵심 원칙은 자주 사용하는 옵션을 숨기지 말고 미리 선택하거나 chip으로 표시하는 것입니다. 5개 미만 항목은 라디오 버튼이나 체크박스가 적합하고, 200개 이상의 항목 목록에는 빠른 필터링을 위해 combobox나 multiselect가 유용합니다. 흔히 간과되는 dual listbox(transfer list)는 대량 선택과 역할 할당에 특히 유용하며, drag-and-drop보다 더 빠르고 접근성이 뛰어난 경우가 많습니다. 모든 목록 유형은 키보드 탐색을 지원해야 하며, 7개 이상의 옵션이 있는 목록에는 "전체 선택" / "전체 해제" 컨트롤을 제공해야 합니다.
TetraLogical의 "Accessible building blocks for web" 동영상 시리즈는 제목, 이미지, 링크, 버튼, 폼 필드 등 다섯 가지 기본 HTML 요소를 명확한 언어, 포용적 시각 디자인, 올바른 구현이라는 세 가지 기준으로 다룹니다. 주요 내용은 다음과 같습니다: 제목은 건너뜀 없이 <h1>–<h6> 계층 구조를 사용해야 하고; 이미지는 설명보다 목적에 집중한 정확한 alt 텍스트가 필요하며(예: "보라색 핀 아이콘"이 아닌 "주소"); 링크는 최소 4.5:1 대비율과 밑줄 등 색 이외의 시각적 단서가 필요하고; 네이티브 <button> 요소로 만든 버튼은 tabindex 및 role="button" 수동 설정이 불필요하며; 폼 필드는 id/for 속성으로 <label>과 <input>을 연결하고 테두리 색은 주변 색과 최소 3:1 대비를 유지해야 합니다. 각 동영상에는 영국 수어(BSL) 버전도 제공됩니다.
이번 주의 주목 아이템은 2026년 디자인 시스템 작업이 나아갈 방향을 보여주었습니다. Monday.com의 Vibe 팀은 주석 중심의 Figma 핸드오프 문서를 Cursor에서 직접 사용하는 AI 최적화 스펙 파일로 대체했습니다. 커스텀 VS Code 확장이 Figma 링크를 받아 Figma MCP를 통해 기술 스펙을 생성하고, Cursor가 이를 컴포넌트 명명, Storybook 구조, WCAG 요구사항을 다루는 cursor rules 라이브러리와 결합해 타입, 테스트, 문서를 포함한 70~90% 완성도의 컴포넌트 코드를 생성합니다. 이 모든 흐름은 여전히 GitHub PR 검토와 Figma 브랜치 승인을 거쳐 품질 기준을 유지하면서도, 1,000명 이상의 엔지니어를 지원하는 3명의 개발자와 3명의 디자이너로 구성된 팀의 개발 사이클을 대폭 단축했습니다.
Jesse Showalter의 실제 클라이언트 케이스 스터디(200만 달러를 조달한 AI 미팅 어시스턴트 Vinyl)는 같은 원칙을 더 작은 규모에서 보여주었습니다. Figma에서 primitive-to-semantic 토큰 아키텍처로 제품 전체의 즉각적인 라이트/다크 전환이 가능했고, Framer의 콘텐츠 편집 거버넌스로 마케팅 팀이 레이아웃을 건드리지 않고 카피를 관리할 수 있었으며, Framer Workshop AI가 몇 번의 프롬프트만으로 가격 계산기에 필요한 약 800줄의 코드를 생성했습니다. 두 사례 모두 잘 구축된 토큰 레이어가 모든 것을 확장 가능하게 만드는 핵심 승수임을 보여줍니다.
접근성과 컴포넌트 가이드가 한 주를 마무리했습니다. Vitaly Friedman의 combobox, multiselect, dual listbox 비교 매트릭스는 각 패턴을 언제 적용해야 하는지에 대한 명확한 기준을 제공했습니다. TetraLogical의 접근 가능한 HTML 빌딩 블록 동영상 시리즈는 제목, 이미지, 링크, 버튼, 폼 필드 다섯 가지 기본 요소를 정밀한 WCAG 대비와 레이블링 요구사항과 함께 다루었습니다. 그리고 오래된 PenPot 및 Style Dictionary 항목이 누적된 토큰 파일을 정리하는 팀을 위한 design token $extensions 메타데이터 감사 도구도 새롭게 공개되었습니다.
Key Takeaways
Monday.com의 AI 기반 Figma-to-Cursor 워크플로우는 핸드오프 미팅 없이 테스트와 Storybook 문서를 포함한 70~90% 완성도의 컴포넌트 코드를 제공하면서도 PR 및 Figma 브랜치 품질 기준을 유지합니다.
Primitive-to-semantic 토큰 아키텍처는 디자인 시스템을 지속 가능하게 만드는 핵심 승수입니다. 이번 주 두 케이스 스터디 모두에서 즉각적인 다크 모드와 확장 가능한 컴포넌트 재사용을 가능하게 했습니다.
Dual listbox는 체계적으로 과소 활용되고 있습니다. 대량 선택과 역할 할당에서 drag-and-drop보다 빠르고 접근성이 뛰어나며, 규모가 클수록 기본 선택지가 되어야 합니다.
