AI Experience Architect
한 줄 정의
AI Experience Architect는 화면(UI 픽셀)을 더 빨리 만드는 사람이 아니라, AI의 침투로 인터페이스가 상품화되는 환경에서 전체 비즈니스 흐름, 권한 정책, 검토 지점(Approval Gates), 에러/실패 경계면, 신뢰 모델까지 총체적으로 설계하고 비즈니스 문제를 스스로 정의하는 상류(Upstream) 디자인 전략가다.
핵심 요지
- 인터페이스의 상품화와 가치 이동: 에이전트가 픽셀 단위로 완성도 높은 UI를 30초 만에 생성해 내면서, 디자이너의 핵심 가치는 화면 제작 단계에서 시스템 설계 및 전략적 문제 해결의 상류층으로 완전히 이동한다 (출처: UX는 죽지 않았다. 그저 화면에 대한 이야기를 멈췄을 뿐이다).
- 의사결정자와의 거리(Proximity) 좁히기: 단순 시안 납품(deliverable)에서 벗어나, 문제가 정의되는 날것의 기획 회의(upstream)에 개입하여 ‘비즈니스 전제 조건’을 스스로 규정하고 비즈니스 파트너로서 신뢰를 회복하는 주역이다 (출처: Design’s craft crisis. senior designers built it).
- 프레임 세팅 (Frame-setting) 역량: 정돈된 기획서(Input)를 가공해 화면(Output)으로 변환하는 수동적인 프레임 워킹(Frame-working)에서 벗어나, 비즈니스 모호함 속에서 문제와 타깃, 지표를 직접 규정하는 프레임 세팅 역량이 필수적이다 (출처: Why senior UX designers are struggling in 2026).
- 예측 가능성 (Predictability) 확보: 기획서나 리서치 데이터 등 주변 서포트 인프라(보호막)가 부재한 불확실한 극한 상황(예: 슬랙 한 줄의 간략한 지시)에서도 주도적으로 문제를 헤쳐나갈 수 있는 예측 가능한 해결력이 2026년 시니어 채용 시장(56%)의 주요 기준이다 (출처: Why senior UX designers are struggling in 2026).
- UX 리서처의 감축과 인사이트 내재화: 리서치 조직이 다른 직군 대비 약 3배 높은 비율로 감축되는 시장 환경에서, 디자이너는 인사이트를 직접 발굴하거나 데이터 공백 상황을 주도적으로 통제해야 한다 (출처: Why senior UX designers are struggling in 2026).
- 조직적 위임과 아키텍처: 조직이 어떤 범위의 의사결정을 에이전트에 자율 위임하고, 어떤 경계에서 사람의 검토와 승인을 통제할지 사회적/구조적 계약을 설계하는 역할이다.
상세
AI 시대 경험 아키텍트의 7대 핵심 역량 (Upstream Skills)
- 시스템 사고 (Systems Thinking)와 비즈니스 레버 주도: 고립된 단일 화면을 개별 최적화하는 데 그치지 않고, 비즈니스 지표(신규 유입 activation, 잔존율 retention 등)를 책임지고 개선하기 위해 디자인 실험을 설계하고 전체 거시 생태계를 조율한다 (출처: The Next 5 Years. How To Stay Relevant Between 2026–2030 As A Designer).
- 피드백 번역 (Feedback Translation): “UI가 답답하다”, “화면이 너무 복잡하다” 같은 정제되지 않은 이해관계자/사용자의 불만을 해석하여, 그것이 단순 레이아웃의 결함인지 아니면 AI 추천 결과에 대한 신뢰 상실(Trust Deficit)인지 그 이면의 핵심 우려를 정교하게 짚어낸다 (출처: UX는 죽지 않았다. 그저 화면에 대한 이야기를 멈췄을 뿐이다).
- 데이터 부재 시의 판단 (Judgment without Data): AI 모델은 과거 데이터 스케일링에만 의존한다. 전례가 없고 리스크가 큰 신규 도메인 설계 시, 학습 데이터가 존재하지 않는 불확실한 공백 속에서 무엇을 가설로 삼고 검증할지 판단한다.
- 패턴 인식과 필터링: 수많은 사용자 기능 요청(Feature Request) 중에서 6개월 뒤 무용지물이 될 요구사항과 진짜 본질적인 제어 워크플로우에 대한 니즈를 구분하여 개발 방향을 설정한다.
- 신뢰와 한계 설계 (Trust & Edge Interface): AI의 부정확성이나 실패를 수용하고, 시스템이 한계에 직면했을 때 에이전트 협업 설계(agent handoff)를 적용한다. 시스템이 한계를 시인하고 사용자에게 사람 개입(Escalation)이나 실행 되돌리기(Undo/Cancel) 등 안전하고 투명한 복구 경계를 제공하도록 인터페이스와 fallback을 설계한다 (출처: UX는 죽지 않았다. 그저 화면에 대한 이야기를 멈췄을 뿐이다).
- 전략적 절제 (Strategic Restraint): 기계적인 속도로 생성과 배포, A/B 테스트의 반복적인 사이클에 매몰되지 않고, “이 기능은 배포를 멈추고 리서치가 더 필요하다”고 제어할 줄 아는 궤도 속도 조절자 역할을 한다.
- 시스템으로서의 취향 (Taste as a System): 훈련 데이터의 평균으로 회귀하여 개성 없고 밋밋하게 수렴하는 AI Slop 아웃풋을 거부하고, Before/After 대조 캔버스를 구축하여 최종안의 시각적/기능적 우수성의 상세한 근거를 입증한다. 외부 안목 리뷰(taste review) 세션을 통해 제품 전체의 디자인 품질 기준을 격상한다 (출처: The Next 5 Years. How To Stay Relevant Between 2026–2030 As A Designer).
경험 아키텍트의 인간적 우위 (The Human Edge)
- Narrative Docs: 복잡한 시각적 화면(screens)을 보여주기 전에 문제 상황, 대안 분석, 최종 설계 방향을 스토리텔링 방식으로 풀어낸 상세 문서를 작성하여 공유함으로써 기획 초기 단계에 질문을 던지고 개발 실수를 차단한다.
- Micro-Alliances: 디자인 부서 외부(PM, 개발자, CS, 영업 등)와 긴밀한 파트너십을 구축하여, 병목 문제와 사업 기회를 기록해 나가는 공유 문서(running doc)를 주도적으로 운영한다.
업스트림 디자인 워크플로우 7단계 (Upstream Design Workflow)
AI가 화면을 조립(assembly)하는 속도가 Jira 티켓을 끊는 속도보다 빨라지는 환경에서, 디자이너는 아래의 7단계 상류(upstream) 프로세스를 통해 작업을 조율한다.
- Frame setting (프레임 세팅): 비즈니스의 극초기 모호함 속에서 진짜 해결할 가치가 있는 문제를 명명하고 지표(activation, retention 등)를 정의하여 문제 백로그(problem backlog)를 구축한다.
- Narrative & Documenting (서술형 문서 작성): 복잡한 시각 화면(screens)을 만들기 전, 문제 정의, 대안 분석, 최종 설계 방향을 스토리텔링 방식으로 풀어낸 상세 서술 문서(Narrative Docs)를 작성해 PM/개발팀과 공유한다.
- Token & Vocabulary Design (토큰 및 어휘 설계): Primitives(원시 값)에서 Semantic tokens(의도 기술), Component tokens로 이어지는 3단계 토큰 구조를 구축하고 네이밍 컨벤션을 코드의 props 구조와 일치시킨다.
- State & Slot Modeling (상태 및 슬롯 모델링): 호버(hover), 에러(error), 로딩(loading), 스켈레톤(skeleton) 등 컴포넌트의 모든 상태를 variant로 설계하고, 컴포넌트 해체(detaching)를 막기 위해 named slot을 명시한다.
- Auto Layout & Semantics Constraint (레이아웃 및 시맨틱 제약): Figma Auto Layout을 완벽히 설정하여 Flexbox/CSS Grid로 1:1 변환 가능한 코딩 가독성을 확보하고, 레이어명을 의미적으로 지정(Frame 247 배제)한다.
- Code Connect Mapping (코드 커넥트 연동): 피그마 컴포넌트와 개발 코드베이스의 컴포넌트 카운터파트 간 1:1 매핑을 연결(Code Connect)하여 에이전트가 임의 컴포넌트를 날조하지 않고 기존 컴포넌트를 재사용하도록 강제한다.
- Circadian Orchestration & Gates (서캐디안 오케스트레이션 및 게이트 검수): 24시간 당직 에이전트의 야간 draft PR 발의를 검수하고, 승인/반려(what you killed) 이력을 의사결정 로그(Decision Log)로 축적하여 피드백 루프를 가동한다.
피그마 토큰 구조 매핑 (Figma Token Mapping Structure)
에이전트가 디자인의 시각적 외형(appearance)에 현혹되지 않고 설계자의 의도(intent)를 정확히 읽게 하기 위해 피그마 변수(Variables)를 3단계 레이어로 설계한다.
- Primitives (원시 토큰): hex값, 간격 스케일, 기본 폰트 사이즈 등 기초 물리 값 (
blue/500 = #3B8BD4,space/4 = 16px). 디자이너의 직접적인 컴포넌트 사용을 제한하도록 Figma properties panel에서 숨김 처리(_prefix 등)하며, 상위 세맨틱 토큰이 참조할 수 있게 둔다. - Semantic Tokens (의도 토큰) [필수]: 모양이 아닌 ‘사용 목적과 의미’를 정의한다 (
color/interactive/default,color/interactive/hover,color/interactive/disabled). 색상 테마가 바뀌어도 의도 토큰이 컴포넌트와 연결되어 있으므로 에이전트 생성물이 무너지지 않는다. - Component Tokens (컴포넌트 토큰): 개별 컴포넌트 단위의 변수 매핑 (
button/background/default→color/interactive/default). 멀티 브랜드나 복잡한 대규모 디자인 시스템에서 부분적인 커스터마이징을 제어할 때 사용한다. - 참고: 피그마의 슬래시 네이밍 (
color/interactive/default)은 코드의 dot notation (color.interactive.default)과 빌드 파이프라인에서 자동 매핑되도록 디자이너-개발자 간 합의가 선행되어야 한다.
검토 게이트 체크리스트 (Approval Gate Checklist)
디자인 드리프트(Design Drift)와 AI Slop의 무분별한 유입을 사전에 차단하기 위해 디자이너가 승인 게이트에서 검수해야 할 체크리스트이다.
- Figma Token Validation: Primitives의 직접 노출 여부를 검증하고, 모든 컴포넌트 색상이 Semantic Token으로 올바르게 매핑되어 있는가?
- PascalCase Component Name: 피그마와 코드베이스의 이름이
ProductCard와 같이 PascalCase로 정확히 일치하여 Code Connect 매핑이 유효한가? - Component Properties Align: 피그마 variants 이름(variant, size, state 등)이 코드 props와 대소문자까지 동일하게 설정되었는가?
- Zero Detaching (Slots Check): 컴포넌트가 임의로 깨지지(detached) 않았으며, named slot 분홍색 테두리 내에 정상적으로 drop 되었는가?
- Auto Layout Coverage: 모든 컴포넌트 프레임이 Hug, Fill, Fixed 등의 의도적인 크기 제어와 variables spacing을 통해 Flexbox CSS로 무리 없이 매핑되는가?
- WCAG 2.2 AAA Contrast: 대비율 7:1 이상 보장, 터치 타겟 44x44px 이상 확보, 폰트 14px 하한선이 지켜졌는가?
앤트로픽의 30줄 CSS 미학 선언문 (Anthropic’s 30-Line CSS Aesthetics Rule)
Anthropic의 엔지니어 Prithvi Rajasekaran과 Alexander Bricken이 작성한 SKILL.md 문서(GitHub anthropics/skills 저장소 내 frontend-design 폴더)에 수록된 30줄의 실제 지시문은 AI 생성 UI의 시각적 서명인 ‘AI Slop’을 차단하고 독창적인 프런트엔드 미학을 강제하는 선언적 취향 기준이다.
- AI Slop 방지를 위한 영구 금지 규칙 (Forbidden List):
- 폰트 수렴 금지: Inter, Roboto, Arial, 시스템 기본 폰트, 그리고 흔히 쓰이는 Space Grotesk를 포함한 평범한 서체 수렴을 절대(NEVER) 금지한다.
- 흔한 색상 조합 금지: 흰색 배경에 보라색 그라데이션 같은 판에 박힌 SaaS 랜딩 페이지 미학을 절대 배제한다.
- 11가지 극단적인 시각적 미학 제안:
- 모델에게 애매한 평균값(modern, clean 등)을 찾지 말고, Brutally minimal, Maximalist chaos, Retro-futuristic, Organic/natural, Luxury/refined, Playful/toy-like, Editorial/magazine, Brutalist/raw, Art deco/geometric, Soft/pastel, Industrial/utilitarian의 11가지 아트스쿨 미학적 갈래 중 입장을 명확히 정리하여 한 방향으로 깊이 있게 조립하도록 강제한다.
- 수렴 방지와 디테일 허용:
- 생성물 간의 유사성을 거부하고 어두운 테마와 밝은 테마, 질감(gradient meshes, noise textures, layered transparencies 등)을 과감히 활용하도록 격려한다.
- “보이지 않는 취향”을 30줄의 짧은 plain-text 마크다운 문서로 AI 런타임에 심음으로써, 277,000번 이상 개발자 도구에 설치되어 전통적인 거대 디자인 시스템보다 실질적으로 더 많은 프런트엔드 산출량의 가이드라인으로 동작하고 있다.
판단 질문
이 역할이 실제로 필요한지 보려면 아래 질문을 던지면 된다.
- AI가 만든 결과물을 누가 승인하고 어디서 되돌리는가.
- 민감 데이터, 법무, 보안, audit trail이 걸린 흐름을 누가 설계하는가.
- agent가 한 번 더 시도해도 되는 일과 반드시 사람에게 escalation해야 하는 일을 누가 정하는가.
- 디자인 시스템, workflow, 권한 정책이 서로 충돌할 때 최종 우선순위를 누가 정하는가.
- 화면 디자인이 아닌데도 우리가 지속적으로 받고 있는 시스템 신뢰 저하 피드백은 무엇인가.
조직에서 보이는 신호
- 디자이너가 Figma 컴포넌트 픽셀 배치보다 prompt, approval flow, handoff 문서, review gate, edge-case handle을 더 오래 다듬는다.
- PM, 법무, 보안, 운영팀과 함께 “AI가 어디까지 결정해도 되는가”를 자주 협의한다.
- DESIGN.md나 flow spec만으로는 부족해서 escalation rule, fallback, audit trail까지 별도 문서화한다.
예시
- 고객지원 서비스: AI가 자동으로 답변 초안을 작성하여 신속하게 대기열을 처리하되, 환불/개인정보 등의 민감한 요청은 사람 승인(escalation)을 거치도록 에이전트의 제어 경계 및 폴백 UI를 설계한다.
- B2B SaaS 관리자 Action: 임의의 결제 스케줄 수정 등 파괴적인 관리자 작업을 에이전트가 단독 실행하지 못하고 제안(Suggest)만 하도록 규칙을 정의하고, 이를 에이전트 CLI 또는 UI 상에 승인 게이트웨이로 연동한다.