AI 시스템디자인 시스템을 AI-ready로 만드는 방법
AI 생성 프로토타입은 문서화되지 않은 설계 결정과 하드코딩된 값으로 인해 자주 실패합니다. Atlassian의 Hardik Pandya는 세 가지 레이어 접근법을 제시합니다. 간격 규칙, 색상 선택, 컴포넌트 사용 지침을 정의하는 구조화된 Markdown spec 파일, AI를 임의 값 대신 명명된 변수 집합으로 제한하는 token 레이어, 하드코딩된 이탈 값을 스캔하는 audit 스크립트가 그것입니다. 무료 Figma 플러그인인 FigmaLint는 token 감사, 분리된 인스턴스 탐지, 누락된 interactive 상태 및 접근성 문제 확인을 지원합니다. 디자인 시스템이 업데이트될 때마다 sync 루틴이 갱신이 필요한 spec 파일을 표시하여 AI가 최신 spec을 참조하도록 합니다. Atlassian, IBM Carbon, CMS, Nordhealth의 실제 사례가 AI-ready 디자인 시스템의 모습을 보여줍니다.
Read Articlearrow_forward Article · AI 디자인READ TIME: 8m
AI가 만들어낸 네 가지 디자인 직무(현재까지)
"AI 디자인"이라는 표현은 대화 상대에 따라 완전히 다른 의미를 가집니다. NNG의 Sarah Gibbons는 네 가지 뚜렷한 방향이 출현했음을 설명합니다. Claude Code 같은 도구로 워크플로를 가속하는 AI를 활용한 디자인, Claude나 Cursor 같은 AI-native 제품 또는 Notion AI 같은 기존 제품의 AI 기능 인터페이스를 구축하는 AI 제품 디자인, 자율 에이전트가 콘텐츠를 파싱하고 행동할 수 있도록 구조화하는 AI 에이전트를 위한 디자인, 그리고 ML 엔지니어와 협력해 모델 동작과 평가 기준, 거절 원칙을 수립하는 AI 자체를 설계하는 것입니다. 각 방향은 서로 다른 역량과 성공 지표를 요구합니다. 현재 대부분의 디자이너는 처음 두 영역에 집중하며, 에이전트 인프라나 모델 동작 영역 경험자는 극히 드뭅니다.
READ_FULL_LOGarrow_forwardArticle · 법규 준수READ TIME: 6m
NFB, 기한 연장 문제로 DOJ·HHS 제소: ADA Title II·Section 504 규정 준수 프로그램에 미치는 영향
2026년 5월 21일, 전국시각장애인연맹(NFB)은 DOJ와 HHS가 ADA Title II 및 Section 504 디지털 접근성 기한을 1년 연장한 임시 최종 규칙에 이의를 제기하는 연방 소송을 메릴랜드 연방지방법원에 제기했습니다. NFB는 두 기관이 행정절차법이 요구하는 공개 예고와 의견 수렴을 거치지 않고 법원이 엄격히 해석하는 '긴급 예외' 조항을 남용했다고 주장합니다. DOJ는 Title II 기한 마감 4일 전에, HHS는 대형 기관의 Section 504 준수 당일에 기한을 연장했습니다. NFB가 승소하면 원래 기한이 복원될 수 있어, 준수 작업을 중단한 조직은 남은 시간이 매우 촉박해질 수 있습니다. Deque는 소송 결과와 무관하게 WCAG 2.1 A/AA 개선 작업을 지속하고 진행 상황을 문서화할 것을 권고합니다.
READ_FULL_LOGarrow_forwardArticle · 접근성READ TIME: 5m
HTML의 Context-aware Heading
새로운 실험적 HTML 속성인 headingoffset은 태그 이름을 변경하지 않고도 모든 자손 요소의 제목 레벨을 오프셋할 수 있게 해줍니다. section 요소에 headingoffset="1"을 설정하면 모든 h1 자식 요소가 접근성 트리에서 h2로 렌더링되고, 중첩된 headingoffset 컨테이너는 오프셋을 누적해 h3 이하를 생성합니다. 동반 속성인 headingreset은 특정 컨테이너가 이 알고리즘에서 제외될 수 있게 합니다. :heading(3) CSS 의사 클래스(현재 Firefox Nightly 전용)는 태그와 무관하게 계산된 레벨로 스타일링을 가능하게 합니다. 이 기능은 개발자가 에디터나 CMS 작성자의 컴포넌트 사용 맥락을 제어할 수 없는 컴포넌트 기반 아키텍처와 web component에서 특히 유용합니다. 현재 Firefox Nightly의 플래그 뒤에서만 사용 가능합니다.
READ_FULL_LOGarrow_forwardArticle · UX 리서치READ TIME: 6m
UX를 위한 행동경제학
행동경제학은 심리학과 경제학을 결합해 사용자가 행동을 의도하면서도 실행하지 못하는 이유를 이해하도록 돕습니다. 이 글은 Irrational Labs의 3B Framework(Behavior, Barriers, Benefits)를 헬스장 회원 가입 이탈이라는 구체적 문제에 적용합니다. 행동 맵은 홈페이지 방문부터 최종 제출 버튼 클릭까지 사용자가 실제로 거쳐야 하는 모든 단계를 기록합니다. 각 단계에서 "나 같은 사람을 위한 헬스장인가?"라는 낮은 자기 관련성, 요금제 비교 시 가치 불명확성, 해지 조건에 대한 약정 불안 같은 심리적 장벽을 식별합니다. 소셜 프루프, 새 출발 언어, 즉각적 혜택 강조 같은 혜택도 매핑됩니다. COM-B, Fogg Behavior Model, EAST 등 보완적 모델도 참고 자료로 제시됩니다.
READ_FULL_LOGarrow_forwardArticle · SDKREAD TIME: 13m
Nutrient Web SDK가 Headless로 전환 — 디자인 시스템과 AI 에이전트를 위해
Nutrient Web SDK는 이제 두 가지 다른 의미의 headless로 제공됩니다. 디자인 시스템 팀을 위해, 완전한 slot 시스템이 뷰어의 모든 컴포넌트를 주소 지정 가능하게 만듭니다. 툴바, 주석, 서명, 콘텐츠 편집기, 문서 비교, 측정, 검색, 모든 모달과 패널을 숨기거나, 부분 커스터마이징하거나, 직접 만든 컴포넌트로 완전히 교체할 수 있습니다. Slot 이름과 파라미터 형태는 버전 관리되는 공개 계약이며, 업그레이드 시 조용히 깨지는 CSS 클래스 오버라이드와 다릅니다. ui: { preset: "minimal" } 옵션은 모든 chrome을 제거해 순수 캔버스만 남깁니다. AI 에이전트를 위해, 잉크, 텍스트 마크업, 페이지 편집(삽입·삭제·회전·재정렬), 서명 캡처, 탐색을 포함한 모든 뷰어 기능이 비공개 메서드 없이 public API로 접근 가능합니다. AX(agent experience)라는 새 내부 벤치마크가 TypeScript 컴파일, 정적 API 분석, 실제 브라우저 실행을 통해 매 릴리스마다 이를 검증합니다.
READ_FULL_LOGarrow_forwardArticle · 접근성READ TIME: 10m
디지털 접근성 기술 개요
이 포괄적인 참고 자료는 보조 기술을 두 가지 큰 범주로 분류합니다. 장치에서 사용자에게 정보를 전달하는 출력 방법과 사용자가 장치로 데이터를 보내는 입력 방법입니다. 출력 기술로는 시각적 텍스트 너머의 의미론적 정보를 전달하는 스크린 리더, 40-80셀 스트립의 refreshable 점자 디스플레이, 공간 배치와 지도를 위한 tactile 그래픽 디스플레이, 화면 확대기가 포함됩니다. 입력 기술에는 개인에 맞게 보정된 sip-and-puff 장치, 자이로스코픽 헤드 마우스, 완전 마비 상태에서도 종종 마지막 입력 수단이 되는 eye gaze 추적, 마이크로스위치 기반 스위치 컨트롤 장치, 단일 손 사용에 적합한 코딩 키보드, 떨림이 있는 사용자를 위한 확장형 키보드, 발 페달, 자석을 이용한 tongue drive 시스템, 깊이 센서 기반 제스처 인식 등이 포함됩니다.
READ_FULL_LOGarrow_forwardsummarizeDigest_Summary
이번 주 디자인 시스템 카테고리는 AI 워크플로를 위한 시스템 준비에 집중되었습니다. Atlassian의 Hardik Pandya는 세 가지 레이어의 AI 준비 프레임워크를 제시했습니다. 간격, 색상, 컴포넌트 가이드라인을 담은 구조화된 Markdown spec 파일, AI 출력을 임의 값 대신 명명된 변수로 제한하는 token 레이어, 하드코딩된 이탈 값을 스캔하는 audit 스크립트입니다. 무료 FigmaLint 플러그인은 token 감사, 분리된 인스턴스 탐지, 누락된 interactive 상태 및 접근성 문제를 자동으로 확인합니다. 디자인 시스템 변경 시 갱신이 필요한 spec 파일을 표시하는 sync 루틴으로 AI 에이전트가 최신 spec을 참조할 수 있도록 합니다. Atlassian, IBM Carbon, CMS, Nordhealth의 실제 사례가 AI-ready 시스템의 구체적인 모습을 보여줍니다.
NNG의 Sarah Gibbons는 AI가 만들어낸 네 가지 디자인 역할을 정리했습니다. AI를 활용한 디자인(Claude Code 같은 도구 사용), AI 제품 디자인(Claude, Cursor, Notion AI 등의 인터페이스 구축), AI 에이전트를 위한 디자인(에이전트가 파싱하고 행동할 수 있도록 콘텐츠 구조화), AI 자체 설계(ML 엔지니어와 함께 모델 동작과 거절 원칙 수립)입니다. 대부분의 실무자는 현재 처음 두 역할에만 집중하고 있으며 에이전트 인프라와 모델 동작 설계 역량의 격차가 벌어지고 있습니다. 또한 실험적 HTML headingoffset 속성(현재 Firefox Nightly 전용)은 태그 이름 변경 없이 자손 요소의 heading 레벨을 오프셋할 수 있어 CMS 기반 컴포넌트 아키텍처의 구조적 문제를 해결합니다.
Nutrient Web SDK는 두 방향의 headless 지원을 출시했습니다. 모든 뷰어 컴포넌트(툴바, 주석, 서명, 모달)를 CSS 취약성 없이 주소 지정하고 교체 가능한 버전 관리 slot 시스템, 그리고 잉크, 텍스트 마크업, 페이지 편집, 서명 캡처를 AI 에이전트가 비공개 메서드 없이 조작할 수 있는 완전 공개 API 표면(새로운 AX 내부 벤치마크로 검증)입니다. Irrational Labs의 3B 모델(Behavior, Barriers, Benefits)을 적용한 행동경제학 프레임워크도 광범위한 사용성 수정의 구조적 대안으로 소개되었습니다.
Key Takeaways- 디자인 시스템의 AI 준비를 위해서는 세 가지 레이어가 필요합니다. Markdown spec 파일(의도와 규칙), 폐쇄적 token 어휘(임의 값 금지), 하드코딩 이탈을 잡아내는 audit 스크립트. FigmaLint가 Figma 측면을 담당합니다.
- NNG는 네 가지 AI 디자인 역할을 정의했습니다. 대부분의 팀은 처음 두 역할(AI 활용 디자인, AI 제품 디자인)에만 있으며, 에이전트 인프라와 모델 동작 역할이 빠르게 성장하는 역량 격차입니다.
- Nutrient의 새로운 AX 벤치마크는 LLM 생성 코드를 TypeScript 컴파일, 정적 API 분석, 실제 브라우저 실행으로 검증해 hallucination 비율을 측정합니다. SDK 팀이 매 릴리스마다 에이전트 사용성을 검증하는 구체적인 모델을 제시합니다.
