AI 투명성을 위한 실용적 인터페이스 패턴 (2부)
스피너 같은 전통적 로딩 패턴은 에이전트형 AI 경험에서 제 역할을 못 한다. 시스템의 처리 과정·상태·의사결정을 드러내는 인터페이스 패턴으로 투명성을 높이고 사용자 신뢰를 쌓는 구체적 방법을 다룬다.
AI가 '생각 중'일 때 무엇을 하는지 보여주는 것이 곧 신뢰 설계다. 디자이너는 진행률이 아닌 '추론 가시화'를, 개발자는 중간 상태를 스트리밍할 수 있는 구조를 함께 설계해야 한다.
디자인 시스템을 AI에 대비시키는 법
AI가 생성하는 프로토타입의 드리프트를 줄이고, 실수를 최소화하며, 맥락을 유지해 결과물 품질을 높이는 실용 가이드. 토큰·문서·패턴을 어떻게 구조화해야 AI가 제대로 읽는지를 정리한다.
AI 코딩·디자인 툴이 디자인 시스템을 정확히 해석하도록 토큰과 명명, 문서를 정비하는 것이 곧 산출물 품질을 좌우한다. 디자이너이자 개발자에게 지금 당장의 실무 과제라 가장 시의성·실용성이 높은 리드 기사.
자율성 다이얼: AI에 대한 인간 통제를 설계하는 패턴 툴킷
AI가 스스로 얼마나 많은 일을 처리하게 할지 단계적으로 설정하는 실용적 방법과, 인간이 감독·개입할 수 있는 6가지 통제 패턴을 제시한다. AI 기능을 '있다/없다'가 아니라 자율성의 정도(dial)로 다루는 설계 프레임워크다.
다들 갑자기 코딩할 수 있다고 들떴지만, 핵심을 완전히 놓쳤다
코딩 에이전트가 소프트웨어 제작 비용을 급격히 낮추자, 늘 진짜 병목이었던 '무엇을 만들 것인가'가 적나라하게 드러났다. PM은 에이전트를 배포(delivery)가 아닌 발견(discovery)에 써야 하며, 망가진 제품 조직에서는 최고의 인재가 떠난다고 경고하는 도발적 에세이다.
AI 시대 디자인의 핵심 역량: 비평(Critique)
유용하고 쓰기 쉬운 AI 시스템을 만들려면, 사용자 니즈에 대한 이해와 디자인 판단을 잘 정의된 '평가 기준'으로 명문화해야 한다. 디자이너의 비평 능력이 AI 산출물의 좋고 나쁨을 가르는 핵심 스킬이 된다고 본다.
컨텍스트 아키텍처
정보 아키텍처(IA) 원칙을 AI 시스템에 적용해, 에이전트가 정보를 올바르게 해석하고 사용자 의도에 더 잘 맞는 응답을 내도록 돕는 설계 개념. AI 시대를 위한 IA의 재정의를 시도한다.
Sketching the Impossible: A 3D Portfolio Built Without a Single 3D Model
How a complete lack of Blender skills accidentally led to an award-winning 3D universe. Here’s what happens when you ignore the "correct" way to code and build an infinite corridor out of flat geometry.
Building Horeca: Advanced Motion Design in Webflow Without the Performance Trade-Offs
An inside look at how we built Horeca’s motion system in Webflow, from scroll-triggered animations and sticky layouts to performance tuning, mobile optimization, and production-ready architecture.
The Four Design Jobs AI Created (So Far)
"AI design" is one label but has forked into four different types of work.
Algorithmic Theming Engines: Building Self-Correcting Color Systems With `contrast-color()`
Seventy percent of websites still fail basic WCAG contrast checks in 2025. After years of design system tooling, accessibility linters, and JavaScript libraries, nothing moved the needle. We didn’t need better libraries. We needed better CSS. `contrast-color()` is that better CSS.
Advanced Tree Counting: Mathematical Layouts With `sibling-index()` And `sibling-count()`
Meet `sibling-index()` and `sibling-count()`. Staggered cascade effect in one line of CSS without `:nth-child()` rules or JS workarounds. Works for 5 items or 5,000.
바이브 코더 vs 소프트웨어 엔지니어
바이브 코딩은 탐색·발견 단계에 유용하지만, 생성된 코드를 리뷰하고 소유하고 운영하며 안전하게 변경해야 하는 순간부터 진짜 소프트웨어 엔지니어링이 시작된다고 짚는다. 도구가 정체성이 되는 함정을 과거 'Java 개발자' 논쟁에 빗댄다.