UI component architecture, design tokens, and semantic theming Compiled for immediate developer deployment.
calendar_todaysummarizeWeek 10-2026
article
접근 가능한 포커스 표시기 가이드
TAG: 접근성
Elle Smith의 가이드는 focus indicator가 없을 때 키보드 사용자가 보이지 않는 커서로 내비게이션하는 것과 같다고 설명하며 구체적인 디자인 규칙을 제시합니다. contrast는 페이지 배경과 unfocused 상태 모두에 대해 최소 3:1을 충족해야 합니다. 크기는 최소 2px 이상이어야 하며, inset 디자인은 element 내부를 ring이 덮기 때문에 더 두꺼운 선이 필요합니다. 일반적인 CSS 실수에 대한 구체적인 해결책도 제공합니다. 마우스 클릭 시 ring이 표시되지 않도록 :focus-visible을 사용하고, sticky header 겹침 방지를 위해 scroll-margin-top을 활용하며, Windows High Contrast Mode를 위해 transparent outline을 추가하는 방법을 다룹니다. Pope Tech 사이트 사례를 통해 navigation link, CTA button, card 컴포넌트에 각각 다른 indicator 디자인을 적용하는 방법을 보여줍니다.
"Design Tokens Workflow" 시리즈의 15편은 거의 체계적으로 관리되지 않는 레이어인 microcopy — button label, form hint, error message, empty state — 를 다룹니다. W3C DTCG 스펙에는 string이나 content token 타입이 없기 때문에, 저자의 해결책은 그룹 레벨에서 $type: number를 설정하고 $extensions를 사용해 실제 microcopy 토큰을 표시하는 방식입니다. 이를 통해 파일의 유효성을 유지하면서 의도를 명확히 전달합니다. Style Dictionary는 extension을 기준으로 필터링하여 단일 소스에서 JavaScript object와 JSON 모두를 생성합니다. 토큰 파일은 copy-button.tokens.json, copy-form.tokens.json, copy-error.tokens.json처럼 컨텍스트별로 구성됩니다. 다국어 지원도 테마와 같은 레이어링 패턴을 사용하여, 언어별 토큰 파일이 값을 override하고 build-i18n.js 스크립트가 로케일별 출력 번들을 생성합니다.
Edy Silva는 2026년 2월 17일 발표된 Figma-Anthropic Code to Canvas 통합을 분해하여 완성된 데모를 훨씬 뛰어넘는 분석을 제공합니다. 설정은 2분이면 충분합니다 — claude mcp add 명령 하나로 Figma의 remote MCP 서버를 등록하고 OAuth 인증을 완료하면 됩니다. "Send this to Figma"를 입력하면 Claude가 generate_figma_design을 호출하고, 특수 URL hash를 통해 capture 스크립트를 주입한 뒤 1분 이내에 공유 가능한 Figma 링크가 나타날 때까지 polling합니다. 실제 테스트에서는 두 가지 반복적인 엣지 케이스가 드러났습니다. scroll 기반 애니메이션(IntersectionObserver)은 캡처에 표시되지 않아 임시 hook 패치가 필요하고, fixed sidebar는 viewport 높이로 렌더링되지만 scrollable main 컨텐츠는 그것을 초과하여 결과 frame에서 sidebar가 잘립니다. CSS gradient 텍스트도 flat color로 변환됩니다. Silva는 Figma 링크를 붙여넣고 Claude에게 구현을 요청하는 Figma-to-code 방향이 일상적인 개발 작업에 더 실용적이라고 평가합니다.
skip link 대상이 제대로 작동하는 데 tabindex=-1이 필요하지 않을 수 있다
TAG: 접근성
Manuel Matuzović는 main과 같은 skip link 타겟에 tabindex="-1"을 추가하는 오랜 관행에 의문을 제기합니다. Enter 키를 눌렀을 때 focus가 link에 머무는 근본적인 문제는 Sequential Focus Navigation Starting Point(SFNSP)라는 기능을 통해 브라우저가 해결했습니다. Firefox는 2013년에, Chrome은 2016년에 이를 수정했습니다. Matuzović는 macOS 26.3과 Windows 11에서 Firefox 157, Chrome 145, Safari, Edge를 대상으로 크로스 브라우저 테스트를 실시했으며, 스크린 리더 VoiceOver, JAWS 2026, NVDA 2025.3.3, Narrator, Android 16의 TalkBack도 포함했습니다. 모든 환경에서 tabindex 없이 올바른 동작이 확인되었습니다. 추가적으로 Dan Burzo는 main에 tabindex="-1"을 추가하면 iOS의 뒤로가기 버튼이 작동하지 않을 수 있다고 경고합니다. :target CSS pseudo-class를 사용하면 focus 없이도 대상 element를 스타일링할 수 있습니다.
TetraLogical의 Demelza Feltham은 WCAG 준수가 필요하지만 충분하지 않다고 주장합니다. Inclusive Design Principles는 contrast나 keyboard 접근성을 어떻게 구현할지가 아니라, 복잡한 다단계 form이 애초에 필요한지를 묻습니다. 이 글은 장애를 영구적, 일시적, 상황적이라는 세 가지 축으로 설명하며, 많은 디자인 결정이 여러 장애 유형에 긍정적으로 중첩된다고 지적합니다. 명확하고 예측 가능한 journey는 시각장애인과 인지 장애가 있는 사용자 모두에게 도움이 되고, 의미 있는 feedback은 저시력자와 독서 장애가 있는 사용자 모두에게 유익합니다. 청각장애와 저시력을 모두 가진 런던의 사진작가 Steve의 사례 연구는 복합 장애가 복합적인 디자인 결정을 요구한다는 것을 보여줍니다. 글의 마지막에서는 accessible design system이 포용적 기본값을 사후에 수정하는 대신 처음부터 고정하는 메커니즘임을 강조합니다.
Amy Kapernick의 NDC London 2026 강연은 접근성을 특정 전문가만의 영역이 아닌, 회사 리더십, HR, 제품, 디자인, 개발, QA, DevOps에 걸친 조직 전체의 책임으로 프레이밍합니다. 장애를 영구적, 일시적, 상황적으로 분류한 후 2025 WebAIM Million 감사 결과를 인용합니다. 테스트된 홈페이지의 94.8%가 접근성 지침을 충족하지 못했으며 평균 51개의 오류가 있었지만, 그 중 96%는 낮은 contrast, 누락된 alt text, 비어 있는 button/link, 레이블 없는 form input, 누락된 document language라는 5가지 쉬운 수정 범주에 해당합니다. Kapernick은 accessibility overlay를 해롭고 효과 없는 해결책이라고 비판하고, 스크린 리더 사용자를 불리하게 만드는 MFA 시간 제한에 대해 경고하며, 자동화된 파이프라인 테스트와 보조 기술에 의존하는 사용자의 실제 테스트를 결합할 것을 권장합니다. 2025년 6월부터 시행된 European Accessibility Act는 WCAG 2.2 Level AA를 기반으로 하며, EU 고객을 대상으로 하는 모든 제품에 적용됩니다.
Elle Smith의 가이드는 focus indicator가 없을 때 키보드 사용자가 보이지 않는 커서로 내비게이션하는 것과 같다고 설명하며 구체적인 디자인 규칙을 제시합니다. contrast는 페이지 배경과 unfocused 상태 모두에 대해 최소 3:1을 충족해야 합니다. 크기는 최소 2px 이상이어야 하며, inset 디자인은 element 내부를 ring이 덮기 때문에 더 두꺼운 선이 필요합니다. 일반적인 CSS 실수에 대한 구체적인 해결책도 제공합니다. 마우스 클릭 시 ring이 표시되지 않도록 :focus-visible을 사용하고, sticky header 겹침 방지를 위해 scroll-margin-top을 활용하며, Windows High Contrast Mode를 위해 transparent outline을 추가하는 방법을 다룹니다. Pope Tech 사이트 사례를 통해 navigation link, CTA button, card 컴포넌트에 각각 다른 indicator 디자인을 적용하는 방법을 보여줍니다.
Amy Kapernick의 NDC London 2026 강연은 접근성을 특정 전문가만의 영역이 아닌, 회사 리더십, HR, 제품, 디자인, 개발, QA, DevOps에 걸친 조직 전체의 책임으로 프레이밍합니다. 장애를 영구적, 일시적, 상황적으로 분류한 후 2025 WebAIM Million 감사 결과를 인용합니다. 테스트된 홈페이지의 94.8%가 접근성 지침을 충족하지 못했으며 평균 51개의 오류가 있었지만, 그 중 96%는 낮은 contrast, 누락된 alt text, 비어 있는 button/link, 레이블 없는 form input, 누락된 document language라는 5가지 쉬운 수정 범주에 해당합니다. Kapernick은 accessibility overlay를 해롭고 효과 없는 해결책이라고 비판하고, 스크린 리더 사용자를 불리하게 만드는 MFA 시간 제한에 대해 경고하며, 자동화된 파이프라인 테스트와 보조 기술에 의존하는 사용자의 실제 테스트를 결합할 것을 권장합니다. 2025년 6월부터 시행된 European Accessibility Act는 WCAG 2.2 Level AA를 기반으로 하며, EU 고객을 대상으로 하는 모든 제품에 적용됩니다.
"Design Tokens Workflow" 시리즈의 15편은 거의 체계적으로 관리되지 않는 레이어인 microcopy — button label, form hint, error message, empty state — 를 다룹니다. W3C DTCG 스펙에는 string이나 content token 타입이 없기 때문에, 저자의 해결책은 그룹 레벨에서 $type: number를 설정하고 $extensions를 사용해 실제 microcopy 토큰을 표시하는 방식입니다. 이를 통해 파일의 유효성을 유지하면서 의도를 명확히 전달합니다. Style Dictionary는 extension을 기준으로 필터링하여 단일 소스에서 JavaScript object와 JSON 모두를 생성합니다. 토큰 파일은 copy-button.tokens.json, copy-form.tokens.json, copy-error.tokens.json처럼 컨텍스트별로 구성됩니다. 다국어 지원도 테마와 같은 레이어링 패턴을 사용하여, 언어별 토큰 파일이 값을 override하고 build-i18n.js 스크립트가 로케일별 출력 번들을 생성합니다.
Edy Silva는 2026년 2월 17일 발표된 Figma-Anthropic Code to Canvas 통합을 분해하여 완성된 데모를 훨씬 뛰어넘는 분석을 제공합니다. 설정은 2분이면 충분합니다 — claude mcp add 명령 하나로 Figma의 remote MCP 서버를 등록하고 OAuth 인증을 완료하면 됩니다. "Send this to Figma"를 입력하면 Claude가 generate_figma_design을 호출하고, 특수 URL hash를 통해 capture 스크립트를 주입한 뒤 1분 이내에 공유 가능한 Figma 링크가 나타날 때까지 polling합니다. 실제 테스트에서는 두 가지 반복적인 엣지 케이스가 드러났습니다. scroll 기반 애니메이션(IntersectionObserver)은 캡처에 표시되지 않아 임시 hook 패치가 필요하고, fixed sidebar는 viewport 높이로 렌더링되지만 scrollable main 컨텐츠는 그것을 초과하여 결과 frame에서 sidebar가 잘립니다. CSS gradient 텍스트도 flat color로 변환됩니다. Silva는 Figma 링크를 붙여넣고 Claude에게 구현을 요청하는 Figma-to-code 방향이 일상적인 개발 작업에 더 실용적이라고 평가합니다.
skip link 대상이 제대로 작동하는 데 tabindex=-1이 필요하지 않을 수 있다
Manuel Matuzović는 main과 같은 skip link 타겟에 tabindex="-1"을 추가하는 오랜 관행에 의문을 제기합니다. Enter 키를 눌렀을 때 focus가 link에 머무는 근본적인 문제는 Sequential Focus Navigation Starting Point(SFNSP)라는 기능을 통해 브라우저가 해결했습니다. Firefox는 2013년에, Chrome은 2016년에 이를 수정했습니다. Matuzović는 macOS 26.3과 Windows 11에서 Firefox 157, Chrome 145, Safari, Edge를 대상으로 크로스 브라우저 테스트를 실시했으며, 스크린 리더 VoiceOver, JAWS 2026, NVDA 2025.3.3, Narrator, Android 16의 TalkBack도 포함했습니다. 모든 환경에서 tabindex 없이 올바른 동작이 확인되었습니다. 추가적으로 Dan Burzo는 main에 tabindex="-1"을 추가하면 iOS의 뒤로가기 버튼이 작동하지 않을 수 있다고 경고합니다. :target CSS pseudo-class를 사용하면 focus 없이도 대상 element를 스타일링할 수 있습니다.
TetraLogical의 Demelza Feltham은 WCAG 준수가 필요하지만 충분하지 않다고 주장합니다. Inclusive Design Principles는 contrast나 keyboard 접근성을 어떻게 구현할지가 아니라, 복잡한 다단계 form이 애초에 필요한지를 묻습니다. 이 글은 장애를 영구적, 일시적, 상황적이라는 세 가지 축으로 설명하며, 많은 디자인 결정이 여러 장애 유형에 긍정적으로 중첩된다고 지적합니다. 명확하고 예측 가능한 journey는 시각장애인과 인지 장애가 있는 사용자 모두에게 도움이 되고, 의미 있는 feedback은 저시력자와 독서 장애가 있는 사용자 모두에게 유익합니다. 청각장애와 저시력을 모두 가진 런던의 사진작가 Steve의 사례 연구는 복합 장애가 복합적인 디자인 결정을 요구한다는 것을 보여줍니다. 글의 마지막에서는 accessible design system이 포용적 기본값을 사후에 수정하는 대신 처음부터 고정하는 메커니즘임을 강조합니다.
이번 주 디자인 시스템 분야의 중심 주제는 접근성이었습니다. 피처 기사인 Elle Smith의 accessible focus indicator 가이드는 WCAG에 근거한 구체적인 규칙을 제시합니다. 배경과 unfocused 상태 모두에서 최소 3:1 contrast, 최소 2px 두께(inset은 더 두꺼워야 함), 그리고 실무에서 자주 빠뜨리는 세 가지 CSS 수정 사항(:focus-visible, scroll-margin-top, Windows High Contrast Mode를 위한 transparent outline 폴백)을 다룹니다.
두 편의 폭넓은 접근성 글은 이러한 세부 사항이 시스템 수준에서 왜 중요한지를 강조합니다. TetraLogical은 WCAG 준수가 바닥이지 천장이 아니라고 주장하며, 디자인 시스템이 팀 전체에 포용적 기본값을 정착시키는 올바른 메커니즘이라고 말합니다. Amy Kapernick의 NDC London 강연은 테스트된 홈페이지의 94.8%가 실패하며 96%의 오류가 쉽게 수정 가능한 다섯 범주에 해당한다는 수치로 방치의 비용을 정량화합니다. 2025년 6월부터 시행된 European Accessibility Act(WCAG 2.2 AA)는 EU 고객 대상 제품에 법적 긴박감을 더합니다.
Manuel Matuzovic는 skip link 타겟에 tabindex="-1"을 추가하는 오랜 관행에 의문을 제기하며, 모든 최신 브라우저와 스크린 리더 테스트 결과 2013/2016년 이후 불필요할 뿐 아니라 iOS 뒤로가기를 망가뜨릴 수 있음을 보여줍니다. design tokens 시리즈는 Style Dictionary를 활용한 microcopy 워크플로를 소개하고, Figma Code to Canvas 통합에 대한 심층 분석은 데모에서 드러나지 않은 실제 엣지 케이스를 짚어줍니다.
Key Takeaways
Accessible focus indicator는 최소 3:1 contrast와 2px 두께가 필요합니다. :focus-visible, scroll-margin-top, transparent outline이 가장 흔히 빠뜨리는 세 가지 구현 빈틈을 해결합니다.
European Accessibility Act(WCAG 2.2 AA)는 이제 EU 대상 제품의 법적 요건입니다. 홈페이지 오류의 96%가 쉽게 수정 가능한 다섯 범주에 속하므로, 집중 노력으로 준수 달성이 가능합니다.
skip link 타겟의 tabindex="-1"은 최신 브라우저에서 더 이상 필요하지 않으며 iOS 뒤로가기를 망가뜨릴 수 있습니다. 매우 오래된 환경을 지원하지 않는 한 제거하십시오.
