
AI가 화면을 만들어주는 일은 이제 크게 낯설지 않습니다. 하지만 화면을 빠르게 만드는 것과, 사용자가 막히는 지점을 빠르게 찾는 것은 다른 이야기입니다.
2026년 9월 11일 Nielsen Norman Group(NN/g)에 올라온 Megan Chan의 글 ‘Test Complex Interactions Earlier with AI Prototyping’은 이 차이를 짚습니다. AI 프로토타이핑의 가치를 ‘생성 속도’가 아니라 복잡한 인터랙션을 개발 전에 사용자에게 검증할 수 있다는 점에서 바라보는 글입니다.
이번 글에서는 원문의 사례를 바탕으로, UX/UI 디자이너가 주목할 변화와 실무에 적용할 포인트를 정리해보겠습니다.
한 줄 요약
AI 프로토타입의 목적은 완성된 것처럼 보이는 화면이 아니라, 아직 틀릴 수 있는 설계를 더 일찍 발견하는 것입니다.
1. ‘눌러지는 화면’과 ‘작동하는 경험’은 다릅니다
몇 개의 화면을 연결한 프로토타입은 레이아웃이나 기본 동선을 확인하는 데 충분히 유용합니다. 문제는 필터, 대시보드, 대화형 AI처럼 사용자의 입력에 따라 상태가 달라지는 인터페이스입니다.
예를 들어 필터를 하나 더 선택했을 때 결과가 어떻게 바뀌는지, 검색 결과가 없을 때 어디로 돌아가야 하는지, 사용자가 예상하지 못한 질문을 입력했을 때 AI가 어떻게 반응하는지는 정해진 화면 몇 장만으로 살펴보기 어렵습니다.
이때 필요한 것은 더 많은 목업이 아니라 사용자의 선택에 실제로 반응하는 프로토타입입니다. NN/g는 AI 도구가 이런 복잡한 동작을 구현하는 부담을 낮춰, 사용성 테스트를 앞당길 수 있다고 설명합니다. 단, 단순한 연구 질문까지 모두 고충실도 프로토타입으로 해결할 필요는 없습니다.
2. Ramp 사례: 놓치기 쉬운 문제는 ‘변경 과정’에 있었습니다
원문에 소개된 Ramp의 시니어 프로덕트 디자이너 Pavan Garidipuri는 Cursor로 비용 정책 편집기의 프로토타입을 만들었습니다. 관리자가 AI 채팅을 통해 지출 규칙을 수정하는 경험이라, 입력에 따라 달라지는 반응을 정적인 화면으로 재현하기 어려웠기 때문입니다.
참가자는 민감한 정보를 제거한 자신의 데이터가 담긴 작동형 프로토타입을 사용했습니다. 이 과정에서 수정 내용을 추적하고 보여주는 방식이 혼란스럽다는 문제가 드러났습니다. 대화가 가능하다는 사실보다, 무엇이 어떻게 바뀌었는지 이해할 수 있는지가 중요했던 것입니다.
같은 회사의 Andrew Lucas는 자유로운 입력과 비결정적 응답을 지원하는 대화형 비용 보고 프로토타입을 제작했습니다. 정해진 성공 경로를 따라가게 하는 대신 참가자가 원하는 내용을 입력하도록 해, 예상 밖의 요청에 시스템이 어떻게 대응하는지 확인할 수 있었습니다.
디자이너의 관점: AI 기능을 검토할 때는 ‘답변이 나오는가’에서 한 단계 더 나아가야 합니다. 변경 전후를 비교할 수 있는지, 반영 범위를 이해하는지, 실수했을 때 되돌릴 수 있는지를 함께 설계해볼 필요가 있습니다. 이 항목들은 사례에서 확장한 실무 제안입니다.
3. Purdue 사례: 필터 디자인은 배치만으로 평가하기 어렵습니다
Purdue University 연구진은 도로 교통 엔지니어가 복잡한 데이터를 분석하도록 돕는 필터 인터페이스를 다뤘습니다. 데이터는 교통 이벤트마다 27개 속성을 포함했고, 일부 속성에는 하위 항목도 있었습니다.
초기에는 Figma로 만든 정적인 와이어프레임을 사용했습니다. 이후 v0와 Bolt, 합성 데이터를 활용해 실제로 조작할 수 있는 프로토타입을 만들었습니다. 원문에 따르면 작동형 프로토타입에서는 참가자가 팀이 개선할 수 있는 구체적인 문제를 지적했습니다.
다만 이 사례를 ‘AI가 더 좋은 리서치를 만든다는 증거’로 해석하면 안 됩니다. 하나의 프로젝트를 순차적으로 진행한 사례이지, 조건을 통제한 비교 실험은 아니기 때문입니다. 단계가 진행되는 동안 연구진의 문제 이해도 함께 깊어졌습니다.
이 사례의 의미는 더 분명합니다. 그동안 구현 비용 때문에 미뤘던 복잡한 동작도, 이제는 개발에 들어가기 전에 테스트할 수 있는 범위에 들어왔다는 것입니다.
4. 도구를 열기 전에 정해야 할 세 가지
NN/g가 제안한 절차를 실무 관점에서 압축하면, 먼저 정해야 할 것은 도구가 아니라 다음 세 가지입니다.
- 검증 질문: 사용자가 어떤 판단이나 행동을 할 수 있는지 확인할 것인가?
- 동작 범위: 그 질문에 답하려면 어떤 입력, 상태 변화, 예외 처리가 실제로 작동해야 하는가?
- 판단 기준: 어떤 관찰 결과가 나오면 설계를 수정할 것인가?
가령 필터 화면이라면 “대시보드를 만들어줘”보다 “선택한 조건을 인지하고, 결과가 없을 때 특정 조건만 해제할 수 있는지 검증하고 싶다”가 더 좋은 출발점입니다.
아래는 원문을 그대로 옮긴 것이 아니라, 이 관점을 적용해 작성한 프롬프트 예시입니다.
목표: 사용자가 적용된 필터를 이해하고 검색 결과가 없는 상태에서 복구할 수 있는지 검증한다.
구현 범위: 다중 필터 선택, 적용 조건 표시, 결과 개수 갱신, 개별 해제, 전체 초기화.
필수 상태: 기본 목록, 복수 조건 적용, 결과 없음, 로딩, 오류.
데이터: 개인 정보가 없는 합성 데이터만 사용한다.
시각 규칙: 기존 서비스의 색상, 타이포그래피, 간격 규칙을 따른다.
제외 범위: 실제 결제, 실서비스 데이터 저장, 운영 시스템 연결.
AI에 넘길 데이터 역시 설계의 일부입니다. 실제 데이터를 쓴다면 조직의 데이터 정책과 도구 제공사의 처리 방침을 확인하고 개인 식별 정보를 제거해야 합니다. 불필요한 위험을 피하려면 검증 목적에 맞는 합성 데이터부터 준비하는 편이 좋습니다.
5. 브랜드는 ‘정상 상태’ 밖에서도 드러납니다
여기서 브랜딩 관점으로 한 걸음 더 확장해볼 수 있습니다. 다음 내용은 원문의 연구 결과가 아니라, 사례를 읽고 도출한 디자인 관점입니다.
서비스의 인상은 로고와 첫 화면에서만 만들어지지 않습니다. 로딩 중 무엇을 설명하는지, 결과가 없을 때 어떤 선택지를 주는지, 오류가 났을 때 책임을 어떻게 표현하는지에서도 브랜드의 태도가 드러납니다.
‘명료하고 믿을 수 있는 서비스’를 지향한다면, 변경 사항을 숨기지 않고 보여주는 UI와 복구 가능한 흐름이 그 약속을 뒷받침해야 합니다. 브랜드 가이드를 색상과 서체뿐 아니라 상태별 문구와 동작 규칙까지 확장해보는 것이 유용한 이유입니다.
6. 매끈해 보인다고 출시 준비가 끝난 것은 아닙니다
NN/g는 완성도 높은 외형 때문에 프로토타입을 곧바로 출시 가능한 제품으로 오해하는 ‘충실도의 함정(fidelity trap)’을 경고합니다. 작동하는 것처럼 보여도 잘못된 패턴, 혼란스러운 위계, 부정확한 가정이 남아 있을 수 있습니다.
따라서 AI 결과물을 검토하고, 본 테스트 전 파일럿 테스트를 통해 의도한 동작이 맞는지 확인해야 합니다. 실제 출시 전에는 보안, 접근성, 성능, 데이터 처리처럼 프로토타입만으로 보장할 수 없는 영역도 별도로 점검해야 합니다.
핵심은 AI에 디자인 판단을 넘기는 것이 아닙니다. 디자이너가 내린 판단을 더 빨리 작동시켜보고, 사용자에게서 배운 내용으로 다시 판단하는 것입니다.
마무리: 더 많이 만드는 대신, 더 일찍 배워야 합니다
AI 프로토타이핑을 생산성 도구로만 보면 ‘얼마나 빨리 화면을 만들었는가’가 성과가 됩니다. UX 도구로 보면 질문이 달라집니다. ‘개발 전에 어떤 오해와 실패를 발견했는가’가 더 중요해집니다.
다음 프로젝트에서는 전체 서비스를 한 번에 만들기보다, 사용자가 가장 헷갈릴 것 같은 인터랙션 하나를 골라보면 어떨까요. 그 동작만 제대로 작동하게 만들고, 실제 사용자가 어디에서 멈추는지 관찰하는 것입니다.
AI 시대에도 좋은 디자인을 가르는 것은 화면을 만드는 속도보다, 무엇을 검증할지 정하는 판단력에 가깝습니다.
참고한 글
Megan Chan, Nielsen Norman Group, Test Complex Interactions Earlier with AI Prototyping (2026.09.11). 확인일: 2026.09.18.
이 글은 위 자료의 사례를 요약하고 실무 관점을 덧붙인 큐레이션 글입니다. 프롬프트 예시와 브랜딩 관련 해석은 본문을 위해 별도로 구성했습니다. 썸네일은 AI로 제작한 콘셉트 이미지이며 실제 제품 화면이 아닙니다.
'Design Posts' 카테고리의 다른 글
| 마우스를 내려놓으면 보이는 UX: 디자이너를 위한 키보드 접근성 (0) | 2026.09.18 |
|---|---|
| [Web'Curation]감각적인 비주얼 포트폴리오 웹사이트 추천: Yuri Roga (0) | 2026.08.11 |
| Figma Config 2026 핵심 발표 총정리 | Code, Motion, AI Agent 완벽 정리 (0) | 2026.06.25 |
| Altalogy — 디자인과 기술이 만나는 디지털 제품 스튜디오 (0) | 2026.03.16 |
| 2026년 3월 선정 최신 웹 랜딩 페이지 참고 사이트 (0) | 2026.03.13 |