Figma와 Storybook에서는 3줄 요약·깔끔한 카드로 완벽했던 레이아웃이, 실제 서비스에서 GPT-4o가 40단어용 카드에 250단어를 뱉거나 단일 문자열용 컴포넌트에 마크다운 불릿을 넣으면서 flexbox 레이아웃이 무너진다는 실무 문제 제기다. 통화 녹취에서 요약·리스크·다음 단계를 생성하는 딜 인텔리전스 대시보드를 만들며 겪은 사례로, 가변 길이 AI 출력에 어떻게 디자인 QA를 붙일지 실무자들이 방법을 논의한다.
결정론적 데이터를 다루던 시절 디자이너는 '대표 콘텐츠' 하나로 카드와 리스트를 그렸고, 그 목업이 곧 완성 기준이었다. 하지만 AI가 콘텐츠를 생성하는 화면에서는 같은 컴포넌트가 받는 값의 길이와 형식이 매번 달라진다.
사례의 팀은 통화 녹취에서 경영진 요약·리스크 요인·다음 단계를 뽑아내는 대시보드를 만들었는데, 디자인 단계에서는 3줄 요약과 깔끔한 그리드 카드로 완벽해 보였다. 문제는 프로덕션이었다. 40단어에 맞춘 카드에 250단어짜리 문단이 들어오고, 단일 문자열을 가정한 컴포넌트에 마크다운 불릿이 섞여 나오면서 레이아웃이 붕괴했다.
이 문제는 프롬프트로 출력 길이를 강제하는 것만으로는 끝나지 않는다. 디자이너 쪽에서도 컴포넌트를 '가변 길이 상태'로 재설계해야 한다 — 최소·최대 글자 수, 말줄임과 '더 보기', 스크롤 허용 여부, 마크다운 렌더링 규칙을 컴포넌트 스펙에 미리 넣고, 실제 AI 출력 샘플로 QA를 돌리는 것이 새로운 기본기가 된다.