Design Tokens 사양의 $extensions 이해하기 — 2026년 5주 디자인 시스템
UI component architecture, design tokens, and semantic theming Compiled for immediate developer deployment.
calendar_todaysummarizeWeek 5-2026
article
Design Tokens 사양의 $extensions 이해하기
TAG: 토큰
W3C Design Tokens Community Group 사양에는 핵심 표준 범위 밖의 메타데이터를 저장하기 위한 의도적인 탈출구인 $extensions가 포함되어 있습니다. 팀은 이를 통해 Figma 동기화 ID, Style Dictionary 변환 설정, 거버넌스 주석, 버전 이력, WCAG 대비율과 같은 접근성 데이터를 저장할 수 있습니다. 사양은 명명 충돌 방지를 위해 역방향 도메인 표기법(com.yourcompany.featureName)을 의무화합니다. Penpot은 $extensions를 완전히 구현한 최초의 디자인 도구이며, Figma는 2025 Schema 발표 기준으로 아직 내보내기 시 extensions를 제거합니다. Style Dictionary, Tokens Studio, Terrazzo는 모두 extensions를 기본 지원합니다. 핵심 모범 사례로는 스키마 문서화, extensions의 선택적 사용 유지, 버전 관리에 커밋되는 토큰 파일에 민감 정보를 저장하지 않는 것이 있습니다.
효과적인 alt text는 장식용 이미지(빈 alt=""만 필요)와 정보 전달 이미지(의미 있는 설명 필요)의 명확한 구분에서 시작합니다. 이 글은 '이미지 제거' 테스트를 소개합니다. 디자인에서 이미지를 제거했을 때 정보 손실이 발생한다면 alt text가 필요합니다. 링크나 버튼인 이미지, 텍스트를 포함한 이미지, 로고는 항상 alt text가 필요합니다. Awwwards 같은 사이트에서 지적된 패턴인 인접 텍스트 레이블이 없는 아이콘에는 설명적인 alt text가 필수이며, 가시적인 텍스트 레이블이 권장되는 해결책입니다. 또한 책임 체계도 다룹니다. 이미지를 생성하거나 와이어프레임 또는 목업에 처음 삽입하는 사람이 alt text를 작성해야 하며, 이를 구현하는 개발자가 아닙니다. 설명 길이의 균형도 중요합니다. 유용할 만큼 충분한 맥락을 제공하되, 과도하지 않아야 합니다.
Kacper Rafalski는 2026년에도 97%의 웹사이트가 기본 WCAG 준수에 실패하는 가운데 지속되는 여섯 가지 접근성 실패 범주를 조사합니다. 이 글은 구체적인 함정들을 나열합니다. 제목 레벨 건너뜀(H2 → H4), 여러 H1 태그 사용, 시맨틱 마크업 없이 div를 제목으로 스타일링, 스크린 리더가 'Site Navigation Navigation'이라고 읽게 만드는 중복 ARIA 랜드마크 레이블, 3:1 UI 대비 기준을 충족하지 못하는 고스트 버튼, 그리고 자연스러운 탭 순서를 깨는 양수 tabindex 값 등이 있습니다. 폼에 대해서는 <label for> / id 연결, 오류 메시지를 위한 aria-describedby, 유효하지 않은 상태를 위한 aria-invalid를 다룹니다. DZP 내부고발 플랫폼과 TransACT EdTech 사례 연구는 체계적인 WCAG 감사가 실제로 어떻게 이루어지는지를 보여줍니다. 특히 후자는 WCAG 2.1 AA 준수가 정부 계약 수주의 결정적 요소가 되었습니다. 실용적인 도구로는 WebAIM Contrast Checker, Color Safe, Adobe Color의 색맹 시뮬레이터를 추천합니다.
Sascha Becker는 개발자들이 시맨틱 색상 역할에 이르게 된 네 단계의 진화 과정을 추적합니다. 일회성 hex 값 복사, 재사용 가능한 컴포넌트, 중앙화된 색상 변수, 그리고 역할 기반 테마 객체가 그 과정입니다. 핵심 주장은 primary, error, background.paper와 같은 이름이 색상의 외형이 아닌 *역할*을 설명한다는 것입니다. 이를 통해 수백 개의 화면 주석을 업데이트하지 않고도 브랜드 변경과 다크 모드에 안정적으로 대응할 수 있습니다. Material UI를 실제 예시로 사용하여 10개의 전체 팔레트 역할(primary, secondary, error, warning, info, success, background.default, background.paper, text.primary, text.secondary)을 설명하고, 테마 색상이 불투명해야 하는 이유(컴포넌트가 hover 및 focus 상태에 자체 투명도 레이어를 적용하기 때문), MUI가 지각적 대비를 고려하여 primary.light, primary.dark, primary.contrastText를 자동 생성하는 방식을 소개합니다. 실질적인 효과: 단일 한 페이지 테마 정의가 200개의 화면별 hex 주석을 대체합니다.
Martin Underhill은 접근성이 부족한 제품이 디자이너와 개발자가 자신의 제한된 세계관에서 구축한 자연스러운 결과라고 주장합니다. 마우스, 트랙패드, 터치를 기본으로 하면서 WCAG가 인식하는 다양한 입력 방식을 무시하는 것이 그 원인입니다. 그는 자신의 하이브리드 키보드 사용 방식을 통해 이를 설명합니다. Tab으로 폼 탐색, Space로 스크롤, ⌘+Tab으로 앱 전환, 심지어 iPhone에 Bluetooth 키보드 연결까지 합니다. 이러한 습관은 그에게 순수하게 키보드에만 의존하는 사용자들이 경험하는 장벽에 대한 부분적인 통찰을 줍니다. 특정 웹사이트의 100명 사용자가 입력 방식별로 어떻게 분류되는지를 보여주는 마이크로사이트를 인용하며, 글은 개인적 가정을 지속적으로 의심하는 것이 포용적 디자인으로 가는 유일한 지속 가능한 길이라는 촉구로 마무리됩니다.
핵심 메인테이너 Alex Rickabaugh와 알아보는 Angular Signal Forms
Angular Core 기술 책임자 Alex Rickabaugh가 CodeTV의 WebDev 팟캐스트에 출연하여 Angular v21에 도입된 새로운 Signal Forms 시스템을 설명합니다. Rickabaugh는 Angular의 두 가지 레거시 폼 접근 방식인 template-driven과 reactive(RxJS 기반)가 signals가 등장하기 전에 설계되어 signals와 깔끔하게 조합되지 않아 새로운 시스템이 필요하게 되었다고 설명합니다. Signal Forms는 폼 상태를 반응형 signals 그래프로 처리합니다. 값, 유효성 검사 상태, 비활성화 플래그 모두 derived signals로, 실제로 의존하는 UI 부분만 업데이트하여 전체 재렌더링을 방지합니다. API는 현재 experimental(developer preview가 아님)로 표시되어 있어, 일반적인 두 메이저 버전 안정성 보장 없이 릴리스 간에 변경될 수 있습니다. Interop 레이어를 통해 기존 폼 코드에서 한 번에 전부가 아닌 점진적 마이그레이션이 가능합니다. 또한 Angular의 지원 중단 철학(지원 중단은 일방적이 아닌 커뮤니티 주도) 및 ngModules에서 standalone으로의 변환을 자동화하는 CLI 마이그레이션 도구도 다룹니다.
W3C Design Tokens Community Group 사양에는 핵심 표준 범위 밖의 메타데이터를 저장하기 위한 의도적인 탈출구인 $extensions가 포함되어 있습니다. 팀은 이를 통해 Figma 동기화 ID, Style Dictionary 변환 설정, 거버넌스 주석, 버전 이력, WCAG 대비율과 같은 접근성 데이터를 저장할 수 있습니다. 사양은 명명 충돌 방지를 위해 역방향 도메인 표기법(com.yourcompany.featureName)을 의무화합니다. Penpot은 $extensions를 완전히 구현한 최초의 디자인 도구이며, Figma는 2025 Schema 발표 기준으로 아직 내보내기 시 extensions를 제거합니다. Style Dictionary, Tokens Studio, Terrazzo는 모두 extensions를 기본 지원합니다. 핵심 모범 사례로는 스키마 문서화, extensions의 선택적 사용 유지, 버전 관리에 커밋되는 토큰 파일에 민감 정보를 저장하지 않는 것이 있습니다.
핵심 메인테이너 Alex Rickabaugh와 알아보는 Angular Signal Forms
Angular Core 기술 책임자 Alex Rickabaugh가 CodeTV의 WebDev 팟캐스트에 출연하여 Angular v21에 도입된 새로운 Signal Forms 시스템을 설명합니다. Rickabaugh는 Angular의 두 가지 레거시 폼 접근 방식인 template-driven과 reactive(RxJS 기반)가 signals가 등장하기 전에 설계되어 signals와 깔끔하게 조합되지 않아 새로운 시스템이 필요하게 되었다고 설명합니다. Signal Forms는 폼 상태를 반응형 signals 그래프로 처리합니다. 값, 유효성 검사 상태, 비활성화 플래그 모두 derived signals로, 실제로 의존하는 UI 부분만 업데이트하여 전체 재렌더링을 방지합니다. API는 현재 experimental(developer preview가 아님)로 표시되어 있어, 일반적인 두 메이저 버전 안정성 보장 없이 릴리스 간에 변경될 수 있습니다. Interop 레이어를 통해 기존 폼 코드에서 한 번에 전부가 아닌 점진적 마이그레이션이 가능합니다. 또한 Angular의 지원 중단 철학(지원 중단은 일방적이 아닌 커뮤니티 주도) 및 ngModules에서 standalone으로의 변환을 자동화하는 CLI 마이그레이션 도구도 다룹니다.
효과적인 alt text는 장식용 이미지(빈 alt=""만 필요)와 정보 전달 이미지(의미 있는 설명 필요)의 명확한 구분에서 시작합니다. 이 글은 '이미지 제거' 테스트를 소개합니다. 디자인에서 이미지를 제거했을 때 정보 손실이 발생한다면 alt text가 필요합니다. 링크나 버튼인 이미지, 텍스트를 포함한 이미지, 로고는 항상 alt text가 필요합니다. Awwwards 같은 사이트에서 지적된 패턴인 인접 텍스트 레이블이 없는 아이콘에는 설명적인 alt text가 필수이며, 가시적인 텍스트 레이블이 권장되는 해결책입니다. 또한 책임 체계도 다룹니다. 이미지를 생성하거나 와이어프레임 또는 목업에 처음 삽입하는 사람이 alt text를 작성해야 하며, 이를 구현하는 개발자가 아닙니다. 설명 길이의 균형도 중요합니다. 유용할 만큼 충분한 맥락을 제공하되, 과도하지 않아야 합니다.
Kacper Rafalski는 2026년에도 97%의 웹사이트가 기본 WCAG 준수에 실패하는 가운데 지속되는 여섯 가지 접근성 실패 범주를 조사합니다. 이 글은 구체적인 함정들을 나열합니다. 제목 레벨 건너뜀(H2 → H4), 여러 H1 태그 사용, 시맨틱 마크업 없이 div를 제목으로 스타일링, 스크린 리더가 'Site Navigation Navigation'이라고 읽게 만드는 중복 ARIA 랜드마크 레이블, 3:1 UI 대비 기준을 충족하지 못하는 고스트 버튼, 그리고 자연스러운 탭 순서를 깨는 양수 tabindex 값 등이 있습니다. 폼에 대해서는 <label for> / id 연결, 오류 메시지를 위한 aria-describedby, 유효하지 않은 상태를 위한 aria-invalid를 다룹니다. DZP 내부고발 플랫폼과 TransACT EdTech 사례 연구는 체계적인 WCAG 감사가 실제로 어떻게 이루어지는지를 보여줍니다. 특히 후자는 WCAG 2.1 AA 준수가 정부 계약 수주의 결정적 요소가 되었습니다. 실용적인 도구로는 WebAIM Contrast Checker, Color Safe, Adobe Color의 색맹 시뮬레이터를 추천합니다.
Sascha Becker는 개발자들이 시맨틱 색상 역할에 이르게 된 네 단계의 진화 과정을 추적합니다. 일회성 hex 값 복사, 재사용 가능한 컴포넌트, 중앙화된 색상 변수, 그리고 역할 기반 테마 객체가 그 과정입니다. 핵심 주장은 primary, error, background.paper와 같은 이름이 색상의 외형이 아닌 *역할*을 설명한다는 것입니다. 이를 통해 수백 개의 화면 주석을 업데이트하지 않고도 브랜드 변경과 다크 모드에 안정적으로 대응할 수 있습니다. Material UI를 실제 예시로 사용하여 10개의 전체 팔레트 역할(primary, secondary, error, warning, info, success, background.default, background.paper, text.primary, text.secondary)을 설명하고, 테마 색상이 불투명해야 하는 이유(컴포넌트가 hover 및 focus 상태에 자체 투명도 레이어를 적용하기 때문), MUI가 지각적 대비를 고려하여 primary.light, primary.dark, primary.contrastText를 자동 생성하는 방식을 소개합니다. 실질적인 효과: 단일 한 페이지 테마 정의가 200개의 화면별 hex 주석을 대체합니다.
Martin Underhill은 접근성이 부족한 제품이 디자이너와 개발자가 자신의 제한된 세계관에서 구축한 자연스러운 결과라고 주장합니다. 마우스, 트랙패드, 터치를 기본으로 하면서 WCAG가 인식하는 다양한 입력 방식을 무시하는 것이 그 원인입니다. 그는 자신의 하이브리드 키보드 사용 방식을 통해 이를 설명합니다. Tab으로 폼 탐색, Space로 스크롤, ⌘+Tab으로 앱 전환, 심지어 iPhone에 Bluetooth 키보드 연결까지 합니다. 이러한 습관은 그에게 순수하게 키보드에만 의존하는 사용자들이 경험하는 장벽에 대한 부분적인 통찰을 줍니다. 특정 웹사이트의 100명 사용자가 입력 방식별로 어떻게 분류되는지를 보여주는 마이크로사이트를 인용하며, 글은 개인적 가정을 지속적으로 의심하는 것이 포용적 디자인으로 가는 유일한 지속 가능한 길이라는 촉구로 마무리됩니다.
이번 주 디자인 시스템 콘텐츠는 하나의 공통 주제로 수렴했습니다. 바로 외형이 아닌 역할로 이름을 짓는 것입니다. 이번 주 특집 기사는 W3C DTCG 사양의 $extensions 탈출구를 분석했습니다. 팀이 도구별 메타데이터, 거버넌스 주석, WCAG 대비율 같은 접근성 데이터를 토큰에 첨부하면서 핵심 사양을 깔끔하게 유지하는 방법을 보여줬습니다. Penpot은 이를 완전히 지원하는 최초의 디자인 도구이며, Figma는 아직 내보내기 시 extensions를 제거한다는 점을 extensions 중심 워크플로를 도입하기 전에 반드시 알아야 합니다.
Sascha Becker의 시맨틱 컬러 역할 글은 이를 보완했습니다. primary나 background.paper처럼 색상의 역할을 기술하는 이름을 사용하면 단일 테마 정의로 수백 개의 화면별 주석을 대체하고, 전체 감사 없이 브랜드 변경도 수용할 수 있습니다. Angular의 새로운 Signal Forms 심층 분석은 컴포넌트 시스템 관점을 보완했습니다. Signals 기반 폼 상태 반응성 모델이 전체 리렌더링을 없애고 레거시 접근 방식에서의 점진적 마이그레이션 경로를 제공함을 보여줬습니다.
접근성은 모든 주제를 관통했습니다. alt text 책임 체계부터 2026년에도 97%의 웹사이트가 여전히 안고 있는 WCAG 실패에 대한 실증적 감사까지, 접근성 부족은 제한된 세계관에서 설계하는 팀에서 예측 가능하게 나타나는 결과라는 메시지가 일관되게 전달되었습니다.
Key Takeaways
DTCG의 $extensions 필드는 토큰 파일에 도구별 메타데이터와 접근성 데이터를 담기에 적합한 공간이지만, Figma는 여전히 내보내기 시 이를 제거하므로 워크플로 설계 시 이를 반드시 고려해야 합니다.
시맨틱 컬러 역할 이름(primary, error, background.paper)은 화면별 주석 업데이트 없이도 브랜드 변경과 다크 모드에 견고하게 대응할 수 있게 합니다.
2026년에도 97%의 웹사이트가 기본 WCAG 기준을 충족하지 못하고 있으며, 제목 계층 오류, 고스트 버튼의 대비 미달, 잘못된 탭 순서가 가장 흔한 원인입니다.
