Brad와 Ian Frost가 말하는 AI + Design System — 2026년 19주 디자인 시스템
이번 주는 ShopTalk Show에 Brad Frost와 Ian Frost가 출연해 AI가 디자인 시스템 워크플로우를 어떻게 바꾸고 있는지를 논의하며 시작되었습니다. Brad는 AI 세션을 Eddie Design System과 연결된 spec 마크다운 파일 — 핵심 컴포넌트, 디자인 토큰,… 개발자가 바로 활용할 수 있도록 정리했습니다.
calendar_todaysummarize2026년 19주차
article
태그: 토큰읽기_시간: 12분
Design Token Linting: 무엇을, 왜 하는가
디자인 토큰은 코드이며 CSS나 JavaScript와 동일한 수준의 린팅이 필요합니다. 이 글은 토큰 린팅 규칙을 세 가지 등급으로 분류합니다. 커밋을 차단하는 critical 규칙(깨진 참조, 순환 의존성, 타입-값 불일치, 불완전한 토큰 구조), 경고를 표시하는 quality 규칙(네이밍 컨벤션, 중복 값 감지, 컴포넌트 토큰 수준의 WCAG 명암비 검사, 다크 모드 완성도, 참조 깊이 제한), 그리고 장기적 건강을 위한 nice-to-have 규칙(시멘틱 네이밍, 미사용 토큰 감지, 스케일 일관성)입니다. 또한 달러 접두사 필드를 사용하는 W3C DTCG 스펙 형식과 일반 툴체인 형식의 차이를 설명하며, 린팅 개념은 두 형식에 동일하게 적용된다고 밝힙니다. 핵심 4가지 규칙만으로도 실제 문제의 80%를 잡을 수 있다는 실용적인 온보딩 경로도 제시합니다.
2026년 5월 7일부로 미국 보건복지부(HHS)는 Section 504 디지털 접근성 준수 기한을 1년 연장했습니다. 직원 15명 이상의 조직은 2027년 5월 11일까지, 더 작은 조직은 2028년 5월 10일까지 WCAG 2.1 Level A/AA를 준수해야 합니다. 중요한 점은, 연장된 것은 기한뿐이며 범위나 요구 사항은 변하지 않았다는 것입니다. Section 504에 따른 장애인 차별 금지 의무는 오늘도 유효하며, 접근성이 부족한 디지털 경험으로 인한 민원, 조사, 소송은 지금도 가능합니다. 저자 Glenda Sims는 이 연장 기간을 활용해 사용자 포털, 예약, 청구, 등록 양식 등 영향력이 큰 접점에 우선 집중하고, 조달 및 개발 프로세스에 접근성을 내재화하며, 문서화된 개선 로드맵을 수립할 것을 권장합니다.
NN/g의 Anna Kaley 강사가 Writing Compelling Digital Copy 강좌에서 자주 받는 실무자 질문을 다섯 가지 주제로 정리했습니다. 평이한 언어에 대해서는 사용자가 페이지 텍스트의 20~28%만 읽는다는 아이트래킹 연구를 인용하며, 6~8학년 수준의 가독성이 전문가 독자에게도 유효하다고 설명합니다. 톤 오브 보이스에 관해서는 일관된 브랜드 보이스와 상황에 따라 변하는 톤을 구분하고, AI 도구는 톤을 대략적으로만 파악할 뿐 민감한 순간에 특정 사용자에게 어떻게 전달될지는 예측할 수 없다고 경고합니다. 링크와 버튼 레이블에 대해서는 'Learn More' 같은 모호한 텍스트가 스크린 리더에서 동일한 레이블을 반복 안내해 접근성 실패로 이어진다고 지적합니다. AI와 SEO에 대해서는 AI가 더 많은 검색을 가로채면서 전통적인 트래픽 지표가 신뢰성을 잃고 있다며, 과업 완수율과 참여도 지표로 전환을 권장합니다. 또한 AEO(answer-engine optimization)와 GEO(generative-engine optimization)를 기존 평이한 언어 및 구조 원칙의 확장으로 소개합니다.
VPAT(Voluntary Product Accessibility Template)는 기술 벤더가 접근성 준수 상태를 공개하기 위해 작성하는 ITI 표준 양식이며, 작성된 문서는 공식적으로 ACR(Accessibility Conformance Report)이라고 합니다. 최신 VPAT 2.5는 WCAG, Section 508, EU(EN 301 549), INT 네 가지 에디션으로 제공되며, INT 에디션은 미국과 EU 양쪽의 조달 요건을 모두 충족합니다. 벤더 VPAT을 비판적으로 평가하는 방법으로, 템플릿 버전(2.5 이상), 평가 일자(12~18개월 이내), 감사 수행자(자체 평가 vs. Level Access나 Deque 같은 독립 기관), 그리고 준수 수준 체크박스보다 비고란에 집중할 것을 권장합니다. PDF 중심 워크플로우의 경우, WCAG만으로는 커버되지 않는 PDF/UA(ISO 14289) 표준을 별도로 확인해야 하며, axe, Lighthouse, WAVE 같은 자동화 도구는 문제의 약 57%를 감지하지만 NVDA, JAWS, VoiceOver를 이용한 수동 스크린 리더 테스트가 여전히 필수임을 설명합니다.
Polypane 29: 새 Network Panel, Snippet Store, Chromium 148
Polypane 29는 멀티 페인 구조를 고려해 처음부터 설계된 네트워크 패널을 탑재했습니다. domContentLoaded 및 load 타이밍, Web Vitals, 오리진별 연결 분석, 그리고 페인별 헤더 차이를 하이라이트하는 정렬 가능한 워터폴 요청 테이블을 제공합니다. 새로운 snippet store에서 커뮤니티 CSS 및 JS 스니펫을 탐색하고 원클릭으로 설치할 수 있으며, 라이브 CSS 미리 보기 기능이 부활해 편집 내용이 모든 페인에 즉시 반영됩니다. outline 패널에는 커스텀 셀렉터 개요 기능이 추가되어 [aria-live]나 button, [role="button"] 같은 CSS 셀렉터로 접근성 감사를 위한 색상 코드 오버레이를 확인할 수 있습니다. Polypane Peek는 이제 자식 노드 정렬을 포함한 grid 및 flex 레이아웃을 시각화하며, Elements 패널의 A11y 탭에서 aria-describedby 값과 labelledby 요소 참조 링크를 확인할 수 있습니다. 또한 macOS 패스키 키체인 통합과 Chromium 148 기반 업데이트도 포함되었습니다.
새로운 VSCode 확장 프로그램이 CSS @property 등록을 검증하고, 입력하는 즉시 호환되지 않는 var() 사용을 감지합니다. 예를 들어 --surface-primary가 color 타입으로 등록된 상황에서 개발자(또는 코딩 에이전트)가 실수로 gap: var(--surface-primary)를 작성하면, 브라우저는 초기값으로 조용히 폴백합니다. 이 확장 프로그램은 해당 불일치를 즉시 네이티브 진단 밑줄로 표시합니다. workspace 수준의 registryFiles 설정을 통해 한 번 정의된 토큰이 모든 파일에서 검증됩니다. v1의 한계로는 일반 CSS 파일만 지원(SCSS, Less, Vue, Svelte, JSX 미지원), 자동 수정 없음, 웹 기반 VSCode 호스트 미지원 등이 있습니다. 로드맵에는 Zed 확장, Stylelint 어댑터, Biome 통합이 예정되어 있습니다.
Brad Frost와 Ian Frost가 ShopTalk Show에 출연해 AI가 디자인 시스템 워크플로우를 어떻게 변화시키고 있는지, 그리고 aianddesign.systems에서 출시 예정인 강좌에 대해 이야기합니다. Brad는 각 프로젝트를 특정 디자인 시스템인 Eddie Design System에 고정시키는 spec 마크다운 파일 기반의 컨텍스트 중심 모델을 소개합니다. 핵심 컴포넌트, 디자인 토큰, 레시피, Nuxt 및 11ty용 보일러플레이트가 포함되어 있습니다. AI가 시스템을 실제로 활용하지 않고 근사치만 내는 '디자인 시스템 코스플레이' 문제와, Storybook stories 및 TJ Pitre의 Figma console MCP를 통해 충실도를 높이는 방법도 다룹니다. 또한 디자인 시스템 결정 사항을 단순한 컨텍스트 창이 아닌 CLAUDE.md나 프로세스 저장소에 보관해야 세션 간 일관성 있는 결과를 얻을 수 있다고 설명합니다.
Brad Frost와 Ian Frost가 ShopTalk Show에 출연해 AI가 디자인 시스템 워크플로우를 어떻게 변화시키고 있는지, 그리고 aianddesign.systems에서 출시 예정인 강좌에 대해 이야기합니다. Brad는 각 프로젝트를 특정 디자인 시스템인 Eddie Design System에 고정시키는 spec 마크다운 파일 기반의 컨텍스트 중심 모델을 소개합니다. 핵심 컴포넌트, 디자인 토큰, 레시피, Nuxt 및 11ty용 보일러플레이트가 포함되어 있습니다. AI가 시스템을 실제로 활용하지 않고 근사치만 내는 '디자인 시스템 코스플레이' 문제와, Storybook stories 및 TJ Pitre의 Figma console MCP를 통해 충실도를 높이는 방법도 다룹니다. 또한 디자인 시스템 결정 사항을 단순한 컨텍스트 창이 아닌 CLAUDE.md나 프로세스 저장소에 보관해야 세션 간 일관성 있는 결과를 얻을 수 있다고 설명합니다.
디자인 토큰은 코드이며 CSS나 JavaScript와 동일한 수준의 린팅이 필요합니다. 이 글은 토큰 린팅 규칙을 세 가지 등급으로 분류합니다. 커밋을 차단하는 critical 규칙(깨진 참조, 순환 의존성, 타입-값 불일치, 불완전한 토큰 구조), 경고를 표시하는 quality 규칙(네이밍 컨벤션, 중복 값 감지, 컴포넌트 토큰 수준의 WCAG 명암비 검사, 다크 모드 완성도, 참조 깊이 제한), 그리고 장기적 건강을 위한 nice-to-have 규칙(시멘틱 네이밍, 미사용 토큰 감지, 스케일 일관성)입니다. 또한 달러 접두사 필드를 사용하는 W3C DTCG 스펙 형식과 일반 툴체인 형식의 차이를 설명하며, 린팅 개념은 두 형식에 동일하게 적용된다고 밝힙니다. 핵심 4가지 규칙만으로도 실제 문제의 80%를 잡을 수 있다는 실용적인 온보딩 경로도 제시합니다.
2026년 5월 7일부로 미국 보건복지부(HHS)는 Section 504 디지털 접근성 준수 기한을 1년 연장했습니다. 직원 15명 이상의 조직은 2027년 5월 11일까지, 더 작은 조직은 2028년 5월 10일까지 WCAG 2.1 Level A/AA를 준수해야 합니다. 중요한 점은, 연장된 것은 기한뿐이며 범위나 요구 사항은 변하지 않았다는 것입니다. Section 504에 따른 장애인 차별 금지 의무는 오늘도 유효하며, 접근성이 부족한 디지털 경험으로 인한 민원, 조사, 소송은 지금도 가능합니다. 저자 Glenda Sims는 이 연장 기간을 활용해 사용자 포털, 예약, 청구, 등록 양식 등 영향력이 큰 접점에 우선 집중하고, 조달 및 개발 프로세스에 접근성을 내재화하며, 문서화된 개선 로드맵을 수립할 것을 권장합니다.
NN/g의 Anna Kaley 강사가 Writing Compelling Digital Copy 강좌에서 자주 받는 실무자 질문을 다섯 가지 주제로 정리했습니다. 평이한 언어에 대해서는 사용자가 페이지 텍스트의 20~28%만 읽는다는 아이트래킹 연구를 인용하며, 6~8학년 수준의 가독성이 전문가 독자에게도 유효하다고 설명합니다. 톤 오브 보이스에 관해서는 일관된 브랜드 보이스와 상황에 따라 변하는 톤을 구분하고, AI 도구는 톤을 대략적으로만 파악할 뿐 민감한 순간에 특정 사용자에게 어떻게 전달될지는 예측할 수 없다고 경고합니다. 링크와 버튼 레이블에 대해서는 'Learn More' 같은 모호한 텍스트가 스크린 리더에서 동일한 레이블을 반복 안내해 접근성 실패로 이어진다고 지적합니다. AI와 SEO에 대해서는 AI가 더 많은 검색을 가로채면서 전통적인 트래픽 지표가 신뢰성을 잃고 있다며, 과업 완수율과 참여도 지표로 전환을 권장합니다. 또한 AEO(answer-engine optimization)와 GEO(generative-engine optimization)를 기존 평이한 언어 및 구조 원칙의 확장으로 소개합니다.
VPAT(Voluntary Product Accessibility Template)는 기술 벤더가 접근성 준수 상태를 공개하기 위해 작성하는 ITI 표준 양식이며, 작성된 문서는 공식적으로 ACR(Accessibility Conformance Report)이라고 합니다. 최신 VPAT 2.5는 WCAG, Section 508, EU(EN 301 549), INT 네 가지 에디션으로 제공되며, INT 에디션은 미국과 EU 양쪽의 조달 요건을 모두 충족합니다. 벤더 VPAT을 비판적으로 평가하는 방법으로, 템플릿 버전(2.5 이상), 평가 일자(12~18개월 이내), 감사 수행자(자체 평가 vs. Level Access나 Deque 같은 독립 기관), 그리고 준수 수준 체크박스보다 비고란에 집중할 것을 권장합니다. PDF 중심 워크플로우의 경우, WCAG만으로는 커버되지 않는 PDF/UA(ISO 14289) 표준을 별도로 확인해야 하며, axe, Lighthouse, WAVE 같은 자동화 도구는 문제의 약 57%를 감지하지만 NVDA, JAWS, VoiceOver를 이용한 수동 스크린 리더 테스트가 여전히 필수임을 설명합니다.
Polypane 29: 새 Network Panel, Snippet Store, Chromium 148
Polypane 29는 멀티 페인 구조를 고려해 처음부터 설계된 네트워크 패널을 탑재했습니다. domContentLoaded 및 load 타이밍, Web Vitals, 오리진별 연결 분석, 그리고 페인별 헤더 차이를 하이라이트하는 정렬 가능한 워터폴 요청 테이블을 제공합니다. 새로운 snippet store에서 커뮤니티 CSS 및 JS 스니펫을 탐색하고 원클릭으로 설치할 수 있으며, 라이브 CSS 미리 보기 기능이 부활해 편집 내용이 모든 페인에 즉시 반영됩니다. outline 패널에는 커스텀 셀렉터 개요 기능이 추가되어 [aria-live]나 button, [role="button"] 같은 CSS 셀렉터로 접근성 감사를 위한 색상 코드 오버레이를 확인할 수 있습니다. Polypane Peek는 이제 자식 노드 정렬을 포함한 grid 및 flex 레이아웃을 시각화하며, Elements 패널의 A11y 탭에서 aria-describedby 값과 labelledby 요소 참조 링크를 확인할 수 있습니다. 또한 macOS 패스키 키체인 통합과 Chromium 148 기반 업데이트도 포함되었습니다.
새로운 VSCode 확장 프로그램이 CSS @property 등록을 검증하고, 입력하는 즉시 호환되지 않는 var() 사용을 감지합니다. 예를 들어 --surface-primary가 color 타입으로 등록된 상황에서 개발자(또는 코딩 에이전트)가 실수로 gap: var(--surface-primary)를 작성하면, 브라우저는 초기값으로 조용히 폴백합니다. 이 확장 프로그램은 해당 불일치를 즉시 네이티브 진단 밑줄로 표시합니다. workspace 수준의 registryFiles 설정을 통해 한 번 정의된 토큰이 모든 파일에서 검증됩니다. v1의 한계로는 일반 CSS 파일만 지원(SCSS, Less, Vue, Svelte, JSX 미지원), 자동 수정 없음, 웹 기반 VSCode 호스트 미지원 등이 있습니다. 로드맵에는 Zed 확장, Stylelint 어댑터, Biome 통합이 예정되어 있습니다.
이번 주는 ShopTalk Show에 Brad Frost와 Ian Frost가 출연해 AI가 디자인 시스템 워크플로우를 어떻게 바꾸고 있는지를 논의하며 시작되었습니다. Brad는 AI 세션을 Eddie Design System과 연결된 spec 마크다운 파일 — 핵심 컴포넌트, 디자인 토큰, 레시피, Nuxt/Eleventy 보일러플레이트 포함 — 에 고정하는 것이 AI의 근사치 생성 문제를 해결하는 실용적인 방법임을 설명했습니다. Storybook stories와 TJ Pitre가 만든 Figma console MCP가 충실도를 높이는 도구로 언급되었으며, 디자인 시스템 결정 사항은 일시적인 컨텍스트 창 대신 CLAUDE.md나 프로세스 저장소에 보관해야 세션 간 일관성 있는 결과를 얻을 수 있다고 강조했습니다.
디자인 토큰 워크플로우의 공백을 채우는 두 편의 툴링 글도 주목받았습니다. 하나는 토큰 린팅 규칙을 세 등급으로 체계화했습니다. 커밋을 차단하는 critical 규칙(깨진 참조, 순환 의존성, 타입-값 불일치), 경고를 표시하는 quality 규칙(컴포넌트 토큰 수준의 WCAG 명암비, 다크 모드 완성도, 네이밍 컨벤션), 장기적 건강을 위한 nice-to-have 규칙이 그것입니다. W3C DTCG의 달러 접두사 토큰 형식과 일반 툴체인 형식의 차이도 설명합니다. 별개로, CSS @property 등록을 검증하고 호환되지 않는 var() 사용 — 예를 들어 --surface-primary가 color 타입으로 등록된 상황에서 gap: var(--surface-primary) 작성 — 을 즉시 감지하는 새 VSCode 확장 프로그램이 발표되었으며, workspace 수준 registryFiles 설정을 지원합니다.
접근성 관련 컴플라이언스 뉴스도 중요하게 다루어졌습니다. 미국 HHS가 Section 504 디지털 접근성 준수 기한을 1년 연장하여, 직원 15명 이상의 조직은 2027년 5월 11일까지 WCAG 2.1 Level A/AA를 준수해야 합니다. VPAT 2.5 평가 모범 사례를 다룬 글에서는 INT 에디션이 미국과 EU 양쪽의 조달 요건을 충족하며, 감사는 12~18개월 이내여야 하고, axe와 Lighthouse 같은 자동화 도구는 문제의 약 57%만 감지하므로 NVDA, JAWS, VoiceOver를 이용한 수동 스크린 리더 테스트가 여전히 필수임을 강조합니다.
핵심 요점
AI 세션을 실제 디자인 시스템(컴포넌트, 토큰, 레시피)과 연결된 spec 마크다운에 고정하는 것이 AI의 근사치 생성 문제를 막는 실용적인 방법입니다. 프롬프트 개선만으로는 부족합니다.
디자인 토큰 린팅은 깨진 참조, 순환 의존성, 타입-값 불일치, 불완전한 토큰 구조의 critical 규칙 4가지부터 시작하세요. 이것만으로 실제 문제의 80%를 잡을 수 있습니다.
HHS Section 504 기한이 2027년 5월 11일(직원 15명 이상 조직)로 연장되었지만 범위와 요건은 그대로입니다. 접근성 미준수 디지털 서비스는 지금도 민원과 소송의 대상이 됩니다.
