{"title":"GenUI 디자인 — AI가 UI를 만들 때 디자이너가 설계해야 하는 것","url":"https://hugo-blog-static-site.haxlys.workers.dev/posts/designing-for-genui-ai-builds-ui/","section":"posts","date":"2026-07-08T23:50:06+09:00","lastmod":"2026-07-08T23:50:06+09:00","description":"gskinner의 GenUI 글을 바탕으로, AI가 런타임에 UI를 조립하는 시대에 디자이너의 일이 화면 설계에서 규칙, 컴포넌트, 가드레일 설계로 어떻게 이동하는지 정리했다.","summary":"gskinner의 2026년 6월 16일 글 **\u0026ldquo;Designing for GenUI: What Changes When AI Builds the UI?\u0026rdquo;**는 AI가 화면을 런타임에 조립하는 시대에 제품 디자인이 어떻게 달라지는지 다룹니다. 핵심은 단순합니다. 디자이너가 더 이상 모든 화면을 직접 완성하는 사람이 아니라, AI가 화면을 만들 때 따라야 할 재료와 규칙을 설계하는 사람이 된다는 것입니다.\n원문: Designing for GenUI: What Changes When AI Builds the UI?\nTL;DR 핵심 정리 화면에서 규칙으로 이동한다: GenUI에서는 모든 화면을 미리 설계하는 대신, AI가 어떤 상황에서 어떤 컴포넌트를 써야 하는지 정의한다. Hatcha가 사례다: gskinner는 Google 발표를 위해 Flutter 기반 이벤트 플래닝 앱 Hatcha를 만들며, 초대장과 대시보드가 맥락에 맞게 조립되는 경험을 실험했다. 디자인 시스템은 재고가 된다: 컴포넌트는 예쁜 부품이 아니라, AI가 목적에 맞게 꺼내 쓰는 선택 가능한 도구 목록이다. 고정 UI와 GenUI를 나눠야 한다: 내비게이션, 규제 절차, 감사 가능한 흐름은 고정 UI가 낫고, 개인화와 가변성이 큰 영역은 GenUI가 빛난다. 디자이너의 사용자 이해가 더 중요해진다: 컴포넌트 조건, 프롬프트, 가드레일은 결국 사용자를 얼마나 잘 이해했는지의 표현이다. GenUI가 바꾸는 기본 전제 전통적인 UI는 미리 구성됩니다. 디자이너가 화면을 그리고, 사용자는 그 화면 사이를 이동합니다. 플로우차트, 와이어프레임, 프로토타입은 모두 \u0026ldquo;어떤 화면이 어떤 순서로 나오는가\u0026quot;를 정하는 데 초점이 있습니다.\n","content":"gskinner의 2026년 6월 16일 글 **\u0026ldquo;Designing for GenUI: What Changes When AI Builds the UI?\u0026rdquo;**는 AI가 화면을 런타임에 조립하는 시대에 제품 디자인이 어떻게 달라지는지 다룹니다. 핵심은 단순합니다. 디자이너가 더 이상 모든 화면을 직접 완성하는 사람이 아니라, AI가 화면을 만들 때 따라야 할 재료와 규칙을 설계하는 사람이 된다는 것입니다.\n원문: Designing for GenUI: What Changes When AI Builds the UI?\nTL;DR 핵심 정리 화면에서 규칙으로 이동한다: GenUI에서는 모든 화면을 미리 설계하는 대신, AI가 어떤 상황에서 어떤 컴포넌트를 써야 하는지 정의한다. Hatcha가 사례다: gskinner는 Google 발표를 위해 Flutter 기반 이벤트 플래닝 앱 Hatcha를 만들며, 초대장과 대시보드가 맥락에 맞게 조립되는 경험을 실험했다. 디자인 시스템은 재고가 된다: 컴포넌트는 예쁜 부품이 아니라, AI가 목적에 맞게 꺼내 쓰는 선택 가능한 도구 목록이다. 고정 UI와 GenUI를 나눠야 한다: 내비게이션, 규제 절차, 감사 가능한 흐름은 고정 UI가 낫고, 개인화와 가변성이 큰 영역은 GenUI가 빛난다. 디자이너의 사용자 이해가 더 중요해진다: 컴포넌트 조건, 프롬프트, 가드레일은 결국 사용자를 얼마나 잘 이해했는지의 표현이다. GenUI가 바꾸는 기본 전제 전통적인 UI는 미리 구성됩니다. 디자이너가 화면을 그리고, 사용자는 그 화면 사이를 이동합니다. 플로우차트, 와이어프레임, 프로토타입은 모두 \u0026ldquo;어떤 화면이 어떤 순서로 나오는가\u0026quot;를 정하는 데 초점이 있습니다.\nGenUI는 이 전제를 바꿉니다. AI가 사용자의 목표와 맥락을 보고 그때그때 UI를 조립합니다. 그래서 디자이너의 질문도 바뀝니다.\n이 화면은 어떻게 보여야 하는가? 이 컴포넌트는 어떤 상황에서 등장해야 하는가? 이 데이터는 입력, 확인, 비교, 실행 중 어느 목적에 쓰이는가? AI가 선택하면 안 되는 조합은 무엇인가? 즉 결과 화면보다 선택 규칙이 더 중요해집니다. 디자이너는 최종 산출물을 하나하나 그리는 대신, AI가 사용할 수 있는 범위와 우선순위를 정합니다.\n왜 이벤트 플래닝인가 gskinner가 만든 Hatcha는 이벤트를 준비하는 앱입니다. 주최자는 AI와 대화하며 이벤트 정보를 제공하고, GenUI는 그 맥락에 맞춰 초대장, 대시보드, 게스트 응답 모듈을 구성합니다.\n이벤트는 GenUI 사례로 적합합니다. 저녁 식사, 회사 워크숍, 대형 콘서트, 생일 파티는 모두 \u0026ldquo;이벤트\u0026quot;지만 필요한 정보와 분위기가 다릅니다. 어떤 이벤트는 식단 제한이 중요하고, 어떤 이벤트는 좌석, 일정, 준비물, 동선이 중요합니다.\n이처럼 경우의 수가 많은 문제를 고정 화면만으로 처리하면 화면이 늘어나거나, 반대로 너무 일반적인 폼이 됩니다. GenUI는 이런 곳에서 강점을 갖습니다. 사용자의 답변과 참가자의 반응에 따라 필요한 UI만 다시 구성할 수 있기 때문입니다.\n디자인 시스템은 AI의 재고다 글에서 가장 중요한 관점은 디자인 시스템의 역할 변화입니다. GenUI가 화면을 조립한다면, 디자인 시스템은 단순한 스타일 규칙이 아닙니다. AI가 꺼내 쓸 수 있는 결정의 재고가 됩니다.\n예를 들어 같은 식단 정보도 상황에 따라 다르게 보여야 합니다.\n게스트가 응답할 때는 다중 선택 UI가 적합하다. 주최자가 전체 현황을 볼 때는 차트가 적합하다. 장보기 직전에는 준비 목록의 한 줄 항목이 적합하다. 데이터는 같지만 목적이 다릅니다. 그래서 필요한 컴포넌트도 달라집니다. 디자이너는 \u0026ldquo;식단 정보 화면\u0026rdquo; 하나를 설계하는 대신, 이 데이터가 어떤 목적에서 어떤 형태로 표현되어야 하는지 정의합니다.\n이때 컴포넌트는 범용적이어야 하지만 무제한적이면 안 됩니다. AI가 아무 때나 차트나 카드나 입력폼을 꺼내 쓰면 경험은 산만해집니다. 좋은 GenUI 디자인 시스템은 컴포넌트의 모양뿐 아니라 등장 조건과 사용 금지 조건을 함께 담아야 합니다.\n모든 것을 GenUI로 만들 필요는 없다 gskinner가 강조하는 실무적 질문은 \u0026ldquo;무엇을 GenUI로 만들지\u0026quot;입니다. GenUI는 유연하지만 공짜가 아닙니다. 매번 조립하려면 토큰 비용이 들고, 렌더링이 느려질 수 있으며, 결과가 항상 예측 가능하지도 않습니다.\n그래서 고정 UI가 더 나은 영역이 있습니다.\n주요 내비게이션 결제, 인증, 권한처럼 예측 가능성이 중요한 흐름 규제나 감사가 필요한 절차 사용자가 매번 같은 위치에서 같은 행동을 기대하는 기본 기능 반대로 GenUI가 어울리는 영역은 사용자의 목표와 맥락이 매번 달라지는 곳입니다. 이벤트별 준비 모듈, 게스트 응답에 따른 대시보드, 대화형 계획 수립처럼 개인화와 가변성이 가치인 영역입니다.\n실무적으로는 \u0026ldquo;AI로 화면을 만들 수 있는가\u0026quot;보다 **\u0026ldquo;이 화면이 매번 달라질 때 사용자에게 실제 이득이 있는가\u0026rdquo;**를 먼저 물어야 합니다.\n새 산출물: 화면보다 기준 GenUI 프로젝트에서 디자이너의 산출물도 달라집니다. 과거에는 화면 시안, 플로우, 상태별 UI가 중심이었다면, 이제는 다음이 더 중요해집니다.\n컴포넌트 목록 각 컴포넌트의 사용 조건 컴포넌트 간 계층과 우선순위 AI 루프별 프롬프트와 제약 고정 영역과 가변 영역의 경계 실패했을 때의 fallback 경험 이 산출물은 개발과 더 가까이 붙어야 합니다. 규칙이 실제 런타임에서 어떻게 작동하는지 테스트하고, 기대와 다르면 다시 정의해야 합니다. GenUI 디자인은 한 번 넘기는 문서가 아니라, 정의하고 시험하고 고치는 반복 작업에 가깝습니다.\n디자이너의 일은 줄어드는가 겉으로 보면 AI가 UI를 만들기 때문에 디자이너의 일이 줄어드는 것처럼 보일 수 있습니다. 하지만 글의 결론은 반대에 가깝습니다. 디자이너가 직접 그리는 화면 수는 줄 수 있어도, 판단의 중요성은 커집니다.\nAI는 사용자를 이해하지 않습니다. AI는 주어진 재고와 규칙 안에서 조립합니다. 따라서 어떤 컴포넌트를 제공할지, 어떤 상황에서 어떤 선택을 허용할지, 무엇을 고정할지, 무엇을 열어둘지는 여전히 사람의 결정입니다.\n좋은 GenUI는 \u0026ldquo;AI가 알아서 예쁘게 만든 화면\u0026quot;이 아닙니다. 좋은 GenUI는 디자이너가 사용자의 목적을 잘 이해하고, 그 이해를 컴포넌트와 규칙으로 번역한 시스템입니다.\n결론 및 시사점 한 줄 결론: GenUI 시대의 디자이너는 화면을 덜 그리는 사람이 아니라, AI가 화면을 만들 때 따를 기준을 더 정교하게 설계하는 사람이다.\n이 글의 중요한 교훈은 AI가 UI 디자인을 대체한다는 이야기가 아닙니다. 오히려 AI가 UI를 조립하기 시작하면, 디자인 시스템과 제품 판단이 더 중요해진다는 이야기입니다.\n정해진 화면을 빠르게 찍어내는 능력보다, 어떤 부분은 고정하고 어떤 부분은 가변으로 둘지 판단하는 능력이 중요해집니다. GenUI는 모든 제품에 넣어야 할 유행어가 아니라, 사용자의 맥락이 너무 다양해서 하나의 화면 흐름으로 납작하게 만들기 어려운 문제에 쓰는 도구입니다.\n","wordCount":783,"tags":["AI","GenUI","Product Design","Flutter","Design System","gskinner"],"categories":["AI","Design"],"frameworks":["Design Systems","Human-AI Interaction","Runtime Composition"],"mental_models":["Inventory","Guardrails","Feedback Loop"],"philosophy_type":"product-design","schema_type":"TechArticle","actionable":true,"priority":"medium","key_points":["GenUI에서는 디자이너가 모든 화면과 흐름을 미리 그리는 대신, AI가 사용할 컴포넌트 목록과 선택 조건, 레이아웃 규칙을 설계한다","gskinner는 Google I/O와 Google Cloud Next 발표를 위해 Flutter 기반 이벤트 플래닝 앱 Hatcha를 만들며 GenUI의 실제 설계 문제를 다뤘다","이벤트 계획처럼 입력 맥락이 매번 달라지는 영역에서는 고정 화면보다 런타임 UI 조립이 강점을 갖는다","디자인 시스템은 더 이상 스타일 가이드만이 아니라 AI가 꺼내 쓰는 결정의 재고가 된다","GenUI는 모든 화면에 쓰기보다 개인화, 가변성, 대화형 맥락이 큰 곳에 제한적으로 쓰는 편이 적합하다"],"related":["posts/modern-engineering-values","posts/agent-harness-engineering","posts/zero-alignment-maggie-appleton"]}