에이전틱 AI를 위한 디자인: 제어, 동의, 책임성을 위한 실용적 UX 패턴 —… — 2026년 7주 디자인 시스템
UI component architecture, design tokens, and semantic theming Compiled for immediate developer deployment.
calendar_todaysummarizeWeek 7-2026
article
에이전틱 AI를 위한 디자인: 제어, 동의, 책임성을 위한 실용적 UX 패턴 — Smashing Magazine
TAG: 에이전트 AI
Victor Yocco는 에이전트 AI 인터랙션의 전체 생애 주기에 걸쳐 여섯 가지 구체적인 UX 패턴을 제시합니다: Intent Preview, Autonomy Dial, Explainable Rationale, Confidence Signal, Action Audit & Undo, Escalation Pathway. 각 패턴에는 측정 지표가 명시되어 있으며, 예를 들어 Intent Preview의 수락률 목표는 85% 이상, Undo 복귀율은 5% 이하, Escalation 회복 성공률은 90% 이상입니다. 오류 복구 설계에는 "서비스 회복 역설"이 활용되며, 3단계 출시 로드맵(기초 안전성 → 조율된 자율성 → 능동적 위임)과 교차 기능팀으로 구성된 Agentic AI 윤리 위원회 설립을 권장합니다. 거버넌스 산출물로는 Agent Risk Register와 공식 Autonomy Policy 문서가 필요합니다.
이 튜토리얼은 Style Dictionary 빌드 파이프라인 앞에 Notion을 협업 친화적인 비개발자 인터페이스로 연결하는 방법을 설명합니다. Notion 데이터베이스는 Token Path(점 표기법, 예: color.brand.primary), Value, Type, Category, Description, 그리고 빌드에 포함될 토큰을 제어하는 Status 필드(Draft / Review / Approved / Deprecated)로 구성됩니다. fetch-tokens.js 스크립트는 Notion API에서 페이지네이션을 처리하고, 플랫한 결과를 Style Dictionary가 사용할 수 있는 중첩 JSON 트리로 변환하며, Notion 메타데이터를 $extensions 필드에 저장합니다. 별도의 push-tokens.js 스크립트로 양방향 동기화도 가능하며, Notion 데이터베이스가 항상 단일 진실 소스 역할을 합니다.
OpenStatus의 Maximilian Kaske는 Next.js 프로젝트를 세 개의 앱(dashboard, status-page, web)으로 분리한 후 발생한 공유 컴포넌트 문제를, 번들러나 webpack 별칭 없이 공개 shadcn 레지스트리로 해결한 과정을 설명합니다. @/ 별칭 방식(앱에서 import 시 오류), tsup 번들링(재빌드 지연), webpack 별칭 리매핑(@/ 충돌) 세 가지 접근법 모두 실패했습니다. 최종 해결책은 내부 import를 TypeScript 경로 별칭으로 @openstatus/ui/*에 매핑하고, 배포 시 transform-imports.mjs의 정규식으로 @/*로 변환하는 방식입니다. 이를 통해 packages/ui 내에서 npx shadcn add와 npx shadcn diff가 네이티브로 작동하며, 세 단계registry:build 스크립트로 누구나 npx shadcn@latest add로 설치할 수 있는 컴포넌트를 배포합니다.
Elle Smith은 접근성 분야에서 광범위하게 퍼진 오해를 짚어냅니다: ARIA menu, menubar, menuitem 역할은 구글 독스의 File/Edit/View 드롭다운처럼 OS 애플리케이션 메뉴를 재현하기 위한 것이지, 일반적인 사이트 내비게이션을 위한 것이 아닙니다. 이 역할을 <nav> 요소에 잘못 적용하면 스크린 리더가 화살표 키 탐색을 기대하게 되지만, 이를 구현하는 데 필요한 100줄 이상의 JavaScript 없이는 키보드 인터랙션이 제대로 동작하지 않습니다. WebAIM 데이터에 따르면 홈페이지의 약 7%가 ARIA menu 역할을 사용하고 있으며, 그 중 4분의 1 이상이 WAVE 스캔에서 접근성 오류를 발생시킵니다.
디지털 신뢰 구축: 정신 건강 앱을 위한 공감 중심 UX 프레임워크 — Smashing Magazine
TAG: UX
Kat Homan은 Teeni(십대 자녀 부모를 위한 앱)와 Bear Room(즉각적인 스트레스 해소 앱)의 실제 제품 작업을 바탕으로 세 가지 기둥으로 구성된 Empathy-Centred UX 프레임워크를 제시합니다. 온보딩 기둥은 데이터 수집 체크리스트를 검증하는 언어와 '도시의 밤' 내러티브 은유로 대체해 사용자가 자신의 어려움을 일반적인 것으로 받아들이도록 돕습니다. 감정적 인터페이스 기둥은 WCAG 2.2를 기준으로 삼은 뒤, 저자극 팔레트, 선택적 촉각 마이크로 인터랙션(버블랩 터뜨리기), 타이핑이 힘든 사용자를 위한 음성 우선 플로우를 추가합니다. 리텐션 기둥은 처벌적 스트릭을 3일마다 획득하는 "Key" 경제로 대체하고, AI 기반의 익명 편지 교환 기능을 제공합니다.
진행자 Jay는 Figma, Slack, Firefox, Webflow, Hex 등의 시니어 디자이너들을 인터뷰하며 실제 Figma 파일 구성 방식을 소개합니다. 공통적인 패턴으로는 상태를 색상으로 구분하는 커버 페이지 썸네일(초록=배포 완료, 노랑=진행 중), Slack 채널과 PRD를 연결하는 README 블록, 상단의 "Ready for Dev" 프레임과 하단의 자유로운 탐색 영역 간의 명확한 구분 등이 있습니다. Firefox 팀은 모든 디자이너가 시간대를 넘어 협업하는 단일 "mobile assembly file"을 사용하며, 표면별(온보딩, 툴바, 홈페이지) 섹션으로 공동 소유감을 높입니다. 여러 디자이너가 Figma 내부에 Gantt 차트 타임라인을 직접 삽입하고, 섹션을 색상으로 구분(보라색 vs 파란색 워크플로 경로)하며, 파일 경량화를 위해 임시 아카이브는 별도 파일로 이동합니다.
에이전틱 AI를 위한 디자인: 제어, 동의, 책임성을 위한 실용적 UX 패턴 — Smashing Magazine
Victor Yocco는 에이전트 AI 인터랙션의 전체 생애 주기에 걸쳐 여섯 가지 구체적인 UX 패턴을 제시합니다: Intent Preview, Autonomy Dial, Explainable Rationale, Confidence Signal, Action Audit & Undo, Escalation Pathway. 각 패턴에는 측정 지표가 명시되어 있으며, 예를 들어 Intent Preview의 수락률 목표는 85% 이상, Undo 복귀율은 5% 이하, Escalation 회복 성공률은 90% 이상입니다. 오류 복구 설계에는 "서비스 회복 역설"이 활용되며, 3단계 출시 로드맵(기초 안전성 → 조율된 자율성 → 능동적 위임)과 교차 기능팀으로 구성된 Agentic AI 윤리 위원회 설립을 권장합니다. 거버넌스 산출물로는 Agent Risk Register와 공식 Autonomy Policy 문서가 필요합니다.
진행자 Jay는 Figma, Slack, Firefox, Webflow, Hex 등의 시니어 디자이너들을 인터뷰하며 실제 Figma 파일 구성 방식을 소개합니다. 공통적인 패턴으로는 상태를 색상으로 구분하는 커버 페이지 썸네일(초록=배포 완료, 노랑=진행 중), Slack 채널과 PRD를 연결하는 README 블록, 상단의 "Ready for Dev" 프레임과 하단의 자유로운 탐색 영역 간의 명확한 구분 등이 있습니다. Firefox 팀은 모든 디자이너가 시간대를 넘어 협업하는 단일 "mobile assembly file"을 사용하며, 표면별(온보딩, 툴바, 홈페이지) 섹션으로 공동 소유감을 높입니다. 여러 디자이너가 Figma 내부에 Gantt 차트 타임라인을 직접 삽입하고, 섹션을 색상으로 구분(보라색 vs 파란색 워크플로 경로)하며, 파일 경량화를 위해 임시 아카이브는 별도 파일로 이동합니다.
이 튜토리얼은 Style Dictionary 빌드 파이프라인 앞에 Notion을 협업 친화적인 비개발자 인터페이스로 연결하는 방법을 설명합니다. Notion 데이터베이스는 Token Path(점 표기법, 예: color.brand.primary), Value, Type, Category, Description, 그리고 빌드에 포함될 토큰을 제어하는 Status 필드(Draft / Review / Approved / Deprecated)로 구성됩니다. fetch-tokens.js 스크립트는 Notion API에서 페이지네이션을 처리하고, 플랫한 결과를 Style Dictionary가 사용할 수 있는 중첩 JSON 트리로 변환하며, Notion 메타데이터를 $extensions 필드에 저장합니다. 별도의 push-tokens.js 스크립트로 양방향 동기화도 가능하며, Notion 데이터베이스가 항상 단일 진실 소스 역할을 합니다.
OpenStatus의 Maximilian Kaske는 Next.js 프로젝트를 세 개의 앱(dashboard, status-page, web)으로 분리한 후 발생한 공유 컴포넌트 문제를, 번들러나 webpack 별칭 없이 공개 shadcn 레지스트리로 해결한 과정을 설명합니다. @/ 별칭 방식(앱에서 import 시 오류), tsup 번들링(재빌드 지연), webpack 별칭 리매핑(@/ 충돌) 세 가지 접근법 모두 실패했습니다. 최종 해결책은 내부 import를 TypeScript 경로 별칭으로 @openstatus/ui/*에 매핑하고, 배포 시 transform-imports.mjs의 정규식으로 @/*로 변환하는 방식입니다. 이를 통해 packages/ui 내에서 npx shadcn add와 npx shadcn diff가 네이티브로 작동하며, 세 단계registry:build 스크립트로 누구나 npx shadcn@latest add로 설치할 수 있는 컴포넌트를 배포합니다.
Elle Smith은 접근성 분야에서 광범위하게 퍼진 오해를 짚어냅니다: ARIA menu, menubar, menuitem 역할은 구글 독스의 File/Edit/View 드롭다운처럼 OS 애플리케이션 메뉴를 재현하기 위한 것이지, 일반적인 사이트 내비게이션을 위한 것이 아닙니다. 이 역할을 <nav> 요소에 잘못 적용하면 스크린 리더가 화살표 키 탐색을 기대하게 되지만, 이를 구현하는 데 필요한 100줄 이상의 JavaScript 없이는 키보드 인터랙션이 제대로 동작하지 않습니다. WebAIM 데이터에 따르면 홈페이지의 약 7%가 ARIA menu 역할을 사용하고 있으며, 그 중 4분의 1 이상이 WAVE 스캔에서 접근성 오류를 발생시킵니다.
디지털 신뢰 구축: 정신 건강 앱을 위한 공감 중심 UX 프레임워크 — Smashing Magazine
Kat Homan은 Teeni(십대 자녀 부모를 위한 앱)와 Bear Room(즉각적인 스트레스 해소 앱)의 실제 제품 작업을 바탕으로 세 가지 기둥으로 구성된 Empathy-Centred UX 프레임워크를 제시합니다. 온보딩 기둥은 데이터 수집 체크리스트를 검증하는 언어와 '도시의 밤' 내러티브 은유로 대체해 사용자가 자신의 어려움을 일반적인 것으로 받아들이도록 돕습니다. 감정적 인터페이스 기둥은 WCAG 2.2를 기준으로 삼은 뒤, 저자극 팔레트, 선택적 촉각 마이크로 인터랙션(버블랩 터뜨리기), 타이핑이 힘든 사용자를 위한 음성 우선 플로우를 추가합니다. 리텐션 기둥은 처벌적 스트릭을 3일마다 획득하는 "Key" 경제로 대체하고, AI 기반의 익명 편지 교환 기능을 제공합니다.
이번 주 디자인 시스템 카테고리는 AI와 UX의 교차점 논의가 중심입니다. Smashing Magazine의 대표 기사는 신뢰할 수 있는 에이전트 AI 인터페이스 설계를 위한 여섯 가지 구체적인 UX 패턴 — Intent Preview, Autonomy Dial, Explainable Rationale, Confidence Signal, Action Audit & Undo, Escalation Pathway — 을 성공 지표 목표치와 단계별 출시 로드맵과 함께 제시합니다. AI 에이전트를 기능이 아닌 사용자가 감독하고 되돌릴 수 있는 행위자로 다루는 가장 엄밀한 프레임워크입니다.
접근성 분야에서는 이번 주 날카로운 교정이 이루어집니다. 사이트 내비게이션에 ARIA menu 및 menuitem 역할을 적용하는 관행이 실제로 해롭다는 사실이 밝혀졌으며, 이를 사용하는 사이트의 4분의 1 이상에서 키보드 인터랙션 오류가 발생합니다. 정신건강 앱 UX도 주목받으며, 온보딩 언어, 저자극 팔레트, 처벌적 스트릭 대체 등 세 가지 기둥의 공감 프레임워크가 소개됩니다.
툴링 측면에서는 Notion을 비개발자 친화적 인터페이스로 Style Dictionary 토큰 파이프라인에 연결하는 워크플로우 튜토리얼이 소개됩니다. OpenStatus는 번들러 없이 모노레포에서 shadcn 컴포넌트를 배포하는 임포트 변환 기법을 공유합니다. Figma, Slack, Firefox의 시니어 디자이너들이 Figma 파일을 어떻게 구성하는지 다룬 영상으로 이번 주를 마무리합니다.
Key Takeaways
Smashing Magazine의 여섯 가지 에이전트 UX 패턴, 특히 복귀율 5% 이하를 목표로 하는 Action Audit & Undo는 신뢰할 수 있는 AI 기반 제품 기능 구축을 위한 가장 명확한 공개 체크리스트를 제공합니다.
일반 사이트 내비게이션에 ARIA menu 역할을 적용하는 것은 광범위한 실수로, 스크린 리더에 화살표 키 동작을 신호하지만 JavaScript가 이를 구현하지 않아 실제 사용자의 키보드 접근이 차단됩니다.
Status 필드로 빌드 파이프라인에 포함될 토큰을 제어하면, Notion을 Style Dictionary 앞에 배치하여 비개발자도 친숙하게 토큰을 관리할 수 있습니다.
