이번 주 디자인 시스템 논의는 두 방향으로 전개되었습니다. 디자인 워크플로우에서 AI의 역할 확대와, 접근성의 절대적인 요구사항이 그것입니다. Storybook 10.3은 React용 MCP 서버를 출시하여 AI 에이전트가 story, API 문서, 사용 예시 등 컴포넌트 메타데이터를… 개발자가 바로 활용할 수 있도록 정리했습니다.
font-size와 line-height에 바인딩된 number 변수를 활용하여 Figma에서 폰트 확대를 시뮬레이션하는 10단계 프로세스를 설명합니다. 120%, 140%, 160%, 180%, 200%의 확대 비율을 다루며, 모든 프레임에 auto layout을 일관되게 적용하고 모든 텍스트 요소에 텍스트 스타일을 정의해야 합니다. 디자이너는 화면을 복사하고 변수 컬렉션을 교체하여 고정 컨테이너나 auto layout 미적용으로 인한 레이아웃 문제를 발견할 수 있습니다. 라이트/다크 모드 변수 세트를 이미 사용하는 디자인 시스템은 동일한 전환 패턴을 적용할 수 있습니다.
data-testid 속성으로 요소를 찾는 방식은 접근성이 떨어지는 마크업이 테스트를 통과하도록 묵인하는 코드 냄새입니다. 버튼이 클릭 가능한 div로 교체되어도 data-testid를 사용하는 테스트는 계속 통과하지만, 해당 요소는 키보드 접근이 불가능하고 올바른 ARIA 역할도 없습니다. Testing Library나 Playwright의 내장 쿼리 API의 role 기반 셀렉터는 부작용으로 시맨틱 HTML을 강제합니다. getByRole이 요소를 찾지 못하면 스크린 리더와 키보드 사용자도 찾지 못한다는 의미입니다. 저자는 테스트 쿼리를 자연어 행동으로 구조화할 것을 권장하며, 시맨틱 HTML을 통한 암묵적 ARIA 역할 활용, 모든 폼 컨트롤에 visible 또는 visually-hidden 레이블 연결, Testing Playground 활용, 브라우저 DevTools의 Accessibility tree 활용 등 실용적인 팁을 제공합니다.
use_figma 스킬을 사용하여 실행 중인 React 앱을 global CSS에서 추출한 디자인 토큰으로 Figma에 변환하고, 일치하는 Figma 변수를 생성하며, 모든 프레임을 해당 변수에 바인딩된 auto layout으로 구성합니다. 튜토리얼은 토큰 수준의 양방향 동기화를 보여줍니다. Figma에서 배경색 변수를 변경하면 바인딩된 모든 프레임이 즉시 업데이트되고, 새 토큰(navbar-bg: white)을 추가하면 디자인 시스템에 등록됩니다. Figma 디자인을 코드베이스로 되돌리는 과정은 LLM의 비결정적 특성으로 인해 재프롬프팅이 필요했으며, 첫 번째 시도에서 배경색 변경을 놓치고 제거된 stroke를 검은색으로 변환하는 문제가 발생했습니다.use_figma 스킬을 사용하여 실행 중인 React 앱을 global CSS에서 추출한 디자인 토큰으로 Figma에 변환하고, 일치하는 Figma 변수를 생성하며, 모든 프레임을 해당 변수에 바인딩된 auto layout으로 구성합니다. 튜토리얼은 토큰 수준의 양방향 동기화를 보여줍니다. Figma에서 배경색 변수를 변경하면 바인딩된 모든 프레임이 즉시 업데이트되고, 새 토큰(navbar-bg: white)을 추가하면 디자인 시스템에 등록됩니다. Figma 디자인을 코드베이스로 되돌리는 과정은 LLM의 비결정적 특성으로 인해 재프롬프팅이 필요했으며, 첫 번째 시도에서 배경색 변경을 놓치고 제거된 stroke를 검은색으로 변환하는 문제가 발생했습니다.font-size와 line-height에 바인딩된 number 변수를 활용하여 Figma에서 폰트 확대를 시뮬레이션하는 10단계 프로세스를 설명합니다. 120%, 140%, 160%, 180%, 200%의 확대 비율을 다루며, 모든 프레임에 auto layout을 일관되게 적용하고 모든 텍스트 요소에 텍스트 스타일을 정의해야 합니다. 디자이너는 화면을 복사하고 변수 컬렉션을 교체하여 고정 컨테이너나 auto layout 미적용으로 인한 레이아웃 문제를 발견할 수 있습니다. 라이트/다크 모드 변수 세트를 이미 사용하는 디자인 시스템은 동일한 전환 패턴을 적용할 수 있습니다.data-testid 속성으로 요소를 찾는 방식은 접근성이 떨어지는 마크업이 테스트를 통과하도록 묵인하는 코드 냄새입니다. 버튼이 클릭 가능한 div로 교체되어도 data-testid를 사용하는 테스트는 계속 통과하지만, 해당 요소는 키보드 접근이 불가능하고 올바른 ARIA 역할도 없습니다. Testing Library나 Playwright의 내장 쿼리 API의 role 기반 셀렉터는 부작용으로 시맨틱 HTML을 강제합니다. getByRole이 요소를 찾지 못하면 스크린 리더와 키보드 사용자도 찾지 못한다는 의미입니다. 저자는 테스트 쿼리를 자연어 행동으로 구조화할 것을 권장하며, 시맨틱 HTML을 통한 암묵적 ARIA 역할 활용, 모든 폼 컨트롤에 visible 또는 visually-hidden 레이블 연결, Testing Playground 활용, 브라우저 DevTools의 Accessibility tree 활용 등 실용적인 팁을 제공합니다.이번 주 디자인 시스템 논의는 두 방향으로 전개되었습니다. 디자인 워크플로우에서 AI의 역할 확대와, 접근성의 절대적인 요구사항이 그것입니다. Storybook 10.3은 React용 MCP 서버를 출시하여 AI 에이전트가 story, API 문서, 사용 예시 등 컴포넌트 메타데이터를 구조적으로 인식하고 기존 디자인 시스템 컴포넌트를 재사용할 수 있도록 했습니다. Chromatic은 버전 관리와 인증을 포함한 MCP 서버의 원격 게시를 지원합니다. 별도로, Claude Code의 use_figma 스킬을 통해 시연된 Figma의 업데이트된 MCP 서버와 skills 통합은 양방향 디자인 토큰 워크플로우를 구축했습니다. CSS 전역값이 Figma 변수로 흘러들어가고 디자인 변경사항이 코드로 되돌아오는 구조이지만, LLM의 비결정적 특성으로 인해 역방향 패스에서 재프롬프팅이 필요했습니다.
접근성도 이번 주 중요한 주제였습니다. Deque는 ADA Title II 상황을 명확히 했습니다. 연방 검토 활동에도 불구하고 공식 준수 기한 변경은 발표되지 않았으며, 주·지방 정부에 대한 기본 ADA 의무는 규정 수정과 무관하게 DOJ를 통해 집행 가능합니다. WCAG 2.1 AA 준수를 유지하고 접근성을 CI/CD 파이프라인에 내재화할 것을 권장합니다. Tetralogical의 저시력 사용자를 위한 디자인 가이드는 텍스트 컨테이너에 고정 높이 금지, 핵심 컨트롤의 좌상단 배치, 400% 줌에서 sticky 내비게이션을 햄버거 메뉴로 전환하는 등의 구체적인 규칙을 제시했습니다.
테스팅과 디자인 방법론도 주목받았습니다. data-testid 셀렉터가 접근성 문제의 신호라는 Dominik Dorfmeister의 주장과, AI가 인터페이스 필요성을 판단하는 genUI와 사용자가 결과물을 요청하는 vibe coding의 명확한 구분을 제시한 Nielsen Norman Group의 분석이 소개되었습니다.