figma2025년 2월 5일

더블 클릭: 에이 (새 탭에서 열림)

에이전트 AI(Agentic AI)는 단순한 상호작용의 대상이 아닌 자율적으로 과업을 수행하는 도구로서, 사용자의 인지적 부하를 줄이고 웹의 상호운용성을 극대화하는 방향으로 진화하고 있습니다. 앞으로의 웹은 시각적 화려함보다는 기계가 읽기 쉬운 API 중심의 구조로 재편될 것이며, 이 과정에서 인간의 창의성을 보존하기 위한 새로운 설계 방식이 요구됩니다. 결국 미래 UX 디자인의 핵심은 무조건적인 편리함이 아니라, 사용자가 제어권을 유지할 수 있도록 적절한 '의도적 마찰'을 배치하는 기술에 달려 있습니다. **인터페이스에서 실행으로의 가치 전환** - AI는 더 이상 사용자가 말을 걸어야 하는 챗봇이 아니라, 보이지 않는 곳에서 작업을 완료하는 '구동 방식' 그 자체가 되어야 합니다. - 사용자는 자동차 보닛을 열어 엔진을 들여다보는 대신 목적지로 바로 이동하기를 원하듯, 에이전트 AI는 인터페이스의 복잡성을 숨기고 결과에 집중하게 합니다. - 이는 사용자가 메뉴를 클릭하고 정보를 찾는 데 소모하던 인지적 에너지를 창의적인 활동과 연결에 재투자할 수 있게 돕습니다. **웹 상호운용성과 협업하는 에이전트들** - 에이전트 AI는 사람처럼 여러 플랫폼과 웹사이트를 넘나들며 작업할 수 있어, 플랫폼 간의 장벽을 허무는 새로운 웹 상호운용성 시대를 엽니다. - 수많은 탭을 오가며 작업해야 했던 '토글 세금(Toggle Tax)'이 사라지고, 여러 전문 에이전트가 하나의 팀처럼 협력하여 복잡한 문제를 해결하는 구조로 변화합니다. - 이러한 변화는 사용자가 개별 사이트의 사용법을 익힐 필요 없이 하나의 요청으로 여러 서비스를 통합 이용할 수 있게 합니다. **기계 판독 가능성 중심의 웹 설계** - 웹사이트 최적화의 기준이 인간 사용자의 시각적 만족에서 AI 에이전트의 데이터 처리 효율성으로 이동할 것입니다. - 화려한 애니메이션이나 복잡한 레이아웃보다는 클린 API, 구조화된 기계 판독 가능(Machine-readable) 콘텐츠, 단순화된 내비게이션이 더 중요해집니다. - 이에 따라 웹사이트를 AI 에이전트에 최적화하고 유지관리하는 새로운 형태의 산업이 등장할 것으로 예측됩니다. **통제권 유지를 위한 '의도적인 마찰'의 재도입** - 모든 과정이 자동화되고 효율화될 경우, 인간의 창의성과 경험의 깊이가 훼손될 위험이 있습니다. - 전통적인 UX 디자인은 마찰을 없애는 데 집중했지만, AI 시대의 좋은 디자인은 사용자가 중요한 지점에서 검토하고 승인할 수 있도록 '의도적인 마찰'을 설계하는 것입니다. - 이를 통해 사용자는 AI가 작업을 대신 수행하더라도 자신이 여전히 최종 결정권을 쥐고 있다는 통제감을 유지하게 됩니다. 미래의 디자이너와 개발자는 단순히 '사용하기 쉬운' 사이트를 만드는 것을 넘어, AI 에이전트가 데이터를 원활하게 수집할 수 있는 기술적 토대를 마련하는 동시에 인간이 주도권을 잃지 않도록 돕는 정교한 개입 지점을 설계하는 데 역량을 집중해야 합니다.

apisuxagentic-aiui-ux+4

figma2020년 6월 17일

개발자와 더 가까워지는 방법 | (새 탭에서 열림)

엔지니어를 제품 디자인 과정에 일찍 참여시키면 기술적 제약과 예외 상황을 빠르게 파악해 더 나은 해결책을 만들 수 있다. 디자이너는 완성된 시안을 전달하기보다 초기 아이디어 단계부터 엔지니어와 함께 가설을 검토하고 대안을 탐색해야 한다. 이를 위해 빠른 목업, 공동 브레인스토밍, 핵심 질문 정의가 효과적인 협업 방식으로 제시된다. ## 기술 지식이 아이디어를 구체화한다 - 디자인 초기의 아이디어 구상 단계에서 엔지니어와 긴밀히 협업하면 구현상의 제약을 빠르게 이해할 수 있다. - 엔지니어는 기술적 지식을 바탕으로 다음을 파악하는 데 도움을 준다. - 예상하지 못한 예외 상황 - API나 시스템 구조에서 발생할 수 있는 제약 - 구현 난이도와 선택지별 트레이드오프 - 초기부터 제약 조건을 알면 나중에 구현이 불가능한 시안을 수정하는 대신, 현실적이면서도 더 사려 깊은 해결책을 설계할 수 있다. - 완성된 결과물을 평가받는 방식이 아니라, 문제를 함께 정의하고 아이디어를 발전시키는 파트너로 엔지니어를 참여시켜야 한다. ## 지속적으로 협업할 엔지니어를 정한다 - Coda의 Packs Tables 기능을 개발할 때 전체 엔지니어링 팀과 별개로, 디자이너와 전 과정에서 협력할 엔지니어 파트너를 두었다. - Packs Tables는 Spotify, Google Calendar, Gmail 등 외부 앱의 데이터를 Coda 문서로 가져오는 기능이다. - 여러 앱의 API를 지원해야 하므로 특정 앱에만 맞는 해결책이 아니라 다양한 서비스에서 작동하는 구조를 고민해야 했다. - 한 명의 엔지니어와 지속적으로 협업하면 아이디어를 즉시 검토하고, 기술적 질문과 디자인 방향을 함께 조정할 수 있다. ## 빠르고 불완전한 ‘스트로맨 목업’을 만든다 - 스트로맨 목업은 완성된 디자인이 아니라 토론과 질문을 유도하기 위한 시각적 초안이다. - 다음 원칙을 따른다. - 빠르게 만든다. 초기 아이디어에는 오해나 잘못된 가정이 포함될 수 있으므로 많은 시간을 투자하지 않는다. - 해결책보다 질문을 더 많이 담는다. - 하나의 방향으로 좁히기보다 다양한 가능성을 보여준다. - 먼저 “모든 것이 쉽게 작동한다면 어떻게 보이고 동작할까?”를 가정해 초안을 만든다. - 엔지니어와 검토할 때 다음 질문을 적극적으로 던진다. - 가장 큰 오해나 잘못된 가정은 무엇인가? - 아직 고려하지 못한 요소는 무엇인가? - 흥미로운 방향은 무엇인가? - 구현하기 어려운 방향은 무엇이며, 그 어려움의 대가는 무엇인가? - 어려운 방향을 무조건 배제하는 것이 아니라, 난이도와 트레이드오프를 이해하는 것이 목적이다. ## 함께 아이디어를 시각화한다 - 초기 단계에는 자신의 목업만 검토하지 말고 엔지니어와 함께 새로운 아이디어를 브레인스토밍해야 한다. - 디자이너의 시각화 능력은 자신의 아이디어뿐 아니라 팀원의 질문과 가설을 구체화하는 데도 활용할 수 있다. - Coda에서는 컴포넌트가 준비된 와이어프레임 키트를 사용했으며, 새로운 요소가 아니라면 하이파이 형태로도 빠르게 탐색했다. - 원격 환경에서는 다음과 같은 방식으로도 협업할 수 있다. - 펜과 종이를 카메라로 공유하기 - iPad 화면 공유하기 - 온라인 화이트보드 사용하기 - Packs Tables 개발 과정에서는 화이트보드에 UI를 그리며 질문과 잠재적 문제를 구체화했다. - 이 단계의 목표는 최종 UI를 확정하는 것이 아니라, 아이디어와 문제에 대해 서로 같은 이해를 갖는 것이다. ## 핵심 질문을 먼저 정의한다 - 핵심 질문은 이후 발생하는 세부적인 의사결정의 기준이 되는 원칙이다. - 질문을 먼저 정리하면 다음과 같은 효과가 있다. - 문제를 올바른 순서로 해결할 수 있다. - 초기부터 특정 해결책을 두고 논쟁하는 일을 줄일 수 있다. - 설계 결정을 더 빠르게 내릴 수 있다. - 예를 들어 행사에 맞춤 냅킨을 사용할지 결정하려면 먼저 예산, 시간, 인력, 행사 분위기 같은 상위 조건을 정해야 한다. - Packs Tables에서는 브레인스토밍 중 핵심 질문을 만들고 이를 Coda 문서에 기록했다. - 이후 해당 기능에 참여하는 모든 엔지니어와 질문 및 가능한 선택지를 함께 검토해 공통된 판단 기준을 마련했다. 엔지니어를 마지막 검수 단계에만 참여시키지 말고, 초기 가설과 아이디어를 함께 탐색하는 파트너로 초대하는 것이 좋다. 빠른 목업을 만들고, 화이트보드로 대안을 시각화하며, 핵심 질문을 문서화하면 기술적 제약을 창의성을 제한하는 요소가 아니라 더 나은 디자인을 만드는 정보로 활용할 수 있다.

apisproduct-designcollaborationwireframing+2