상태 기계와 경계를 프롬프트에 넣기
지난 레슨에서 「무엇을」을 목표와 장면으로 옮겼다면, 이번엔 「대충 넘기지 마」를 보완해요. 규칙은 단순해요: AI는 당신이 말한 상태만 진지하게 쓰고, 안 말한 건 전부 맑은 날로 상상해요. 그러니 상태를 빠짐없이 적고, 엣지 케이스를 못 박고, 오류 방지를 분명히 쓰세요. 이 셋이 합쳐지면 인터랙션 스펙이에요.
「주문 목록 페이지를 만들어」라고 하면 AI가 그리는 화면은 늘 같아요: 네트워크 괜찮고, 데이터는 한 화면에 딱 맞고, 사용자는 잘못 누르지 않아요. 게으른 게 아니라, 당신이 준 설명에 맑은 날만 있어서예요. 2레슨에서 상태 3종 세트(로딩·빈·오류), 3레슨에서 오류 방지와 되돌릴 수 있음을 다뤘어요. 그 두 레슨은 알아보게 했고, 이번 레슨은 알아본 요구를 프롬프트에 흑백으로 박힌 조항으로 만들게 해요.
교차 레슨 · 상태 3종 세트와 오류 메시지 3요소로딩·빈·오류가 각각 어떻게 생겨야 합격인지, 오류 메시지를 사람 말로 쓰는 법—2레슨에서 이미 해봤어요. 여기선 그 결론을 그대로 가져와요.아래 프롬프트는 전형적인 맑은 날 버전이에요. 오른쪽 상태판 다섯 칸은 아직 물음표뿐이죠. 아래 상태 칩을 눌러 하나씩 프롬프트에 넣고, 스펙이 한 줄씩 길어지는 걸 보세요.
스펙의 「빈 상태에 안내를」한 줄은 얼마짜리일까요? 아래는 같은 주문 페이지를 신규 사용자가 보는 두 버전이에요. 왼쪽 프롬프트는 빈 상태를 안 말했고, 오른쪽은 한 줄을 더 썼어요. 신규를 붙잡을 쪽을 눌러 보세요.
상태를 다 적은 뒤에도 더 깊숙이 숨은 엣지 케이스가 있어요. 공통점은 데모에선 절대 안 나오고, 출시 첫 주에 전부 나타난다는 거예요. 하나를 뽑아 AI 기본값이 어떻게 대충 넘기는지, 프롬프트에 어떤 문장을 보완할지 보세요.
상태와 엣지 케이스를 얼마나 촘촘히 쓸지는 인터페이스 자세에 달렸어요. 《About Face 4》 9장은 제품을 몇 가지 자세로 나누는데, 가장 흔한 둘을 옮겨 드릴게요. 프롬프트에 자세를 먼저 밝히면 AI가 상태 밀도를 훨씬 잘 맞춰요.
자세를 잘못 고른 전형적 사고: 쓰고 떠나는 휴가 페이지에 주권급 필터와 통계 차트를 붙이거나, 하루 종일 보는 모니터링 콘솔에 대자보식 단일 화면 플로우를 넣는 거예요. 밀도는 자세를 따르고, 자세는 사용 빈도를 따르세요.
미학 편의 블록 빌더는 시각 스펙을 조립하고, 이 기기는 인터랙션 스펙을 조립해요. 다섯 조항 그룹을 자유롭게 켜고 끄면 오른쪽 미리보기가 실시간으로 바뀌고, 「언급 안 함」을 고른 그룹은 AI가 어디서 자유 연출할지 표시돼요. 조립해 복사해서 UI 생성 프롬프트 끝에 붙이세요.
AI는 당신이 말한 상태만 씁니다: 로딩·빈·오류·약한 망·성공, 다섯을 이름 불러 적으세요. 안 부른 건 흰 화면과 alert의 온상이에요.
엣지 케이스를 못 박으세요: 목록이 비었을 때, 네트워크가 실패했을 때, 중복 제출했을 때, 권한이 부족할 때—모든 「때」 뒤에 분명한 요구 한 문장.
자세를 먼저, 밀도는 그다음: 주권 자세 화면은 상태가 촘촘해도 되고, 임시 자세는 적고 눈에 띄게—스크립트를 바꿔 쓰지 마세요.
스펙을 조립해 첨부로: 목표·장면(지난 레슨)이 앞, 인터랙션 스펙(이번 레슨)이 뒤—둘이 합쳐지면 AI에게 줄 완전한 요구예요.
콘텐츠 출처: 샤오산 아카데미 「인터랙션 엔지니어링」 특집 오리지널. 오류·상태 원칙은 《About Face 4: 인터랙션 디자인의 정수》 15장, 인터페이스 자세는 9장에서 정리(Alan Cooper 외).