
의도적으로 작게: Lean Design System 팀의 강점 — 2026년 20주 디자인 시스템
이번 주 NNG 연구는 대부분의 디자인 시스템 팀이 회사 규모에 관계없이 의도적으로 2~5명으로 유지되며, 이는 구조적 강점이지 인력 부족이 아님을 재확인했습니다. 소규모 팀은 핸드오프 없이 컨텍스트를 공유하고 갈등을 더 빠르게 해결하며, 디자이너가 component API를 다루고… 개발자가 바로 활용할 수 있도록 정리했습니다.


Design Token을 어디에서 Lint할 것인가
JSON schema를 활용한 에디터에서의 소스 단계, pre-commit hook 단계, CI 파이프라인 단계, 그리고 npm 패키지 배포 전 pre-publish gate 단계입니다. 이 글은 각 단계를 디자인 툴 우선, 코드 우선, CSS custom properties를 사용하는 제품 코드 등 토큰 소유 모델에 매핑하고, 각 레이어에서 실행 가능한 검사를 설명합니다. 순환 참조 감지나 토큰 간 참조 해결 같은 구조적 검사는 모든 토큰 파일이 동시에 있어야 하므로 pre-commit 또는 CI 단계에서만 가능합니다. 처음 시작하는 팀은 Stage 3(CI)부터 구현하고, 토큰 패키지를 배포하는 팀은 경고가 하드 에러가 되는 strict 모드로 Stage 4를 반드시 실행해야 합니다.
범용 접근성 에이전트 구축 — GitHub가 배운 것

AI 투명성을 위한 실전 Interface Pattern(2부)

SVAR Event Calendar: React, Svelte, Vue용 Framework-native Component
CSS 변수를 통한 테마 커스터마이징, 완전한 현지화, REST API 통합을 위한 RestDataProvider가 포함됩니다. PRO 버전은 Year, Agenda, Resources, Timeline 뷰와 반복 이벤트를 추가합니다. 이 컴포넌트는 react-big-calendar 같은 경량 옵션과 Bryntum 같은 무거운 엔터프라이즈 도구 사이를 공략하며, TypeScript를 전반적으로 지원합니다.
접근 가능한 문서 작성 입문

디자인 팀을 위한 Claude Code 워크플로
CLAUDE.md 파일, 그리고 하드코딩된 색상 값과 spacing 위반을 감사하는 커스텀 Claude 스킬이 있습니다. Alan은 또한 Figma 스크린샷을 Claude에 입력하고 주말 동안 이터레이션하여 팀의 디자인 시스템을 bootstrapping한 과정도 설명하며, 최종적으로 엔지니어링 팀의 동의를 얻어 sandbox를 실제 프로덕션 디자인 시스템에 연결했습니다.
의도적으로 작게: Lean Design System 팀의 강점
디자인 팀을 위한 Claude Code 워크플로
CLAUDE.md 파일, 그리고 하드코딩된 색상 값과 spacing 위반을 감사하는 커스텀 Claude 스킬이 있습니다. Alan은 또한 Figma 스크린샷을 Claude에 입력하고 주말 동안 이터레이션하여 팀의 디자인 시스템을 bootstrapping한 과정도 설명하며, 최종적으로 엔지니어링 팀의 동의를 얻어 sandbox를 실제 프로덕션 디자인 시스템에 연결했습니다.Design Token을 어디에서 Lint할 것인가
JSON schema를 활용한 에디터에서의 소스 단계, pre-commit hook 단계, CI 파이프라인 단계, 그리고 npm 패키지 배포 전 pre-publish gate 단계입니다. 이 글은 각 단계를 디자인 툴 우선, 코드 우선, CSS custom properties를 사용하는 제품 코드 등 토큰 소유 모델에 매핑하고, 각 레이어에서 실행 가능한 검사를 설명합니다. 순환 참조 감지나 토큰 간 참조 해결 같은 구조적 검사는 모든 토큰 파일이 동시에 있어야 하므로 pre-commit 또는 CI 단계에서만 가능합니다. 처음 시작하는 팀은 Stage 3(CI)부터 구현하고, 토큰 패키지를 배포하는 팀은 경고가 하드 에러가 되는 strict 모드로 Stage 4를 반드시 실행해야 합니다.범용 접근성 에이전트 구축 — GitHub가 배운 것
AI 투명성을 위한 실전 Interface Pattern(2부)
SVAR Event Calendar: React, Svelte, Vue용 Framework-native Component
CSS 변수를 통한 테마 커스터마이징, 완전한 현지화, REST API 통합을 위한 RestDataProvider가 포함됩니다. PRO 버전은 Year, Agenda, Resources, Timeline 뷰와 반복 이벤트를 추가합니다. 이 컴포넌트는 react-big-calendar 같은 경량 옵션과 Bryntum 같은 무거운 엔터프라이즈 도구 사이를 공략하며, TypeScript를 전반적으로 지원합니다.접근 가능한 문서 작성 입문
이번 주 NNG 연구는 대부분의 디자인 시스템 팀이 회사 규모에 관계없이 의도적으로 2~5명으로 유지되며, 이는 구조적 강점이지 인력 부족이 아님을 재확인했습니다. 소규모 팀은 핸드오프 없이 컨텍스트를 공유하고 갈등을 더 빠르게 해결하며, 디자이너가 component API를 다루고 엔지니어가 시각적 결정을 검토하는 식으로 역할 경계가 유연합니다. 강제된 우선순위 설정으로 시스템은 실제 제품 요구사항에 집중합니다. 핵심 구분은 design-ops 전략으로 소규모를 유지하는 팀과 단순히 인력이 부족한 팀 사이에 있으며, 후자는 번아웃과 유지보수 부채가 쌓입니다. 챔피언 프로그램을 통한 영향력 확대는 경영진 지원과 현실적인 역량 기대치가 뒷받침될 때만 가능합니다.
두 개의 아티클은 파이프라인의 양 끝에서 프로세스 품질을 다뤘습니다. 토큰 거버넌스 측면에서는 소스(Figma/Tokens Studio 또는 에디터의 JSON schema), pre-commit hook, CI 파이프라인, pre-publish gate의 4단계 linting 전략이 제시됐습니다. 순환 참조 감지와 같은 구조적 검사는 모든 토큰 파일이 동시에 필요하므로 pre-commit 또는 CI 단계에서만 가능합니다. AI 측면에서 GitHub의 실험적 접근성 에이전트는 GitHub Copilot CLI와 VS Code에 통합돼 3,535개 pull request를 검토해 68%의 해결률을 달성했으며, passive reviewer와 active implementer 두 sub-agent 아키텍처와 drag-and-drop 같이 LLM이 접근 가능하게 만들기 어려운 고위험 패턴에 대한 명시적 차단 목록을 사용합니다.
팀 운영 및 프로세스 외에도 Smashing Magazine의 에이전트 UI 투명성 시리즈 2편은 위험 수준에 따라 매핑된 네 가지 인터페이스 패턴(Living Breadcrumb, Dynamic Checklist, Thinking Toggle, Audit Trail)을 제안했습니다. SVAR Calendar는 MIT 라이선스로 React, Svelte, Vue를 위한 통합 API를 공유하는 멀티 프레임워크 이벤트 캘린더로 출시됐으며, Beyond Identity의 디자인 팀 사례 연구는 Claude Code를 프로덕션 컴포넌트 샌드박싱에서 이해관계자 검토까지 전 과정에 활용하고, CLAUDE.md로 MUI 전용 제약을 적용하며 커스텀 스킬로 하드코딩된 색상 및 spacing 위반을 감사하는 방법을 보여줬습니다.
- NNG 연구는 2~5명 규모의 디자인 시스템 팀이 우연이 아닌 설계에 의한 최적 구성임을 확인합니다. 챔피언 프로그램과 기여자 모델을 통한 영향력 확대는 경영진 지원과 명시적인 역량 합의가 뒷받침될 때만 효과적입니다.
- 토큰 linting은 소스 에디터, pre-commit, CI, pre-publish의 4단계로 계층화돼야 합니다. 순환 참조 감지와 토큰 간 참조 해결은 모든 토큰 파일이 동시에 필요하므로, 구조적 검사의 가장 이른 유효 게이트는 CI 단계입니다.
- GitHub의 접근성 에이전트는 drag-and-drop 및 data grid 같은 고위험 패턴에 LLM 코드 생성을 명시적으로 차단하고 수동 큐레이션된 접근성 이슈 코퍼스를 활용해 3,535개 PR을 68% 해결률로 검토했습니다.