첨부해드린 디자인 용어 팁 3가지만 알아도 AI 의 슬롭 디자인을 피할 수 있습니다

바이브 코딩으로 만든 사이트의 UI 가 전부 비슷한 이유는 모델의 성능 부족보다 지시의 정확도 차이에 달려 있습니다. 지시하는 사람이 원하는 것을 “텍스트” 로 표현하지 못하기에 AI 는 디자인을 못하는 것입니다.

숙련된 디자이너는 “자간을 좁혀줘”, “시선 흐름을 정리해줘”, “여백을 살려줘” 같은 감각적 표현에 정확한 용어를 더해 지시합니다.

숙련된 프론트엔드 개발자는 “stagger this list”, “direction-aware transition”, “layout animation with crossfade” 같은 표현으로 구성 방식을 직접 지정합니다.

이 한 줄의 차이가 AI에게는 완전히 다른 결과를 만드는 지시가 됩니다. 입문 바이브 코더가 이 격차를 줄이기 위해 지금 바로 참고할 수 있는 리소스 세 가지를 정리했습니다.

❶ 컴포넌트 이름을 아는 것 → https://lnkd.in/gUdsWWnq

Accordion, Modal, Toast, Popover, Segmented Control, Drawer, Skeleton 등 50개 이상의 UI 컴포넌트가 정의와 대체 명칭까지 정리되어 있습니다.

“아래쪽에 있는 닫기 버튼 달린 팝업 창”이 아니라 “dismissible Dialog with overlay”라고 쓰는 순간 결과가 달라집니다.

❷ 애니메이션 용어를 아는 것 → https://lnkd.in/gQHxWTKT

Emil Kowalski가 만든 Animation Vocabulary입니다. Entrances & Exits, Easing, Spring Animations, Scroll, Layout Animation 등 12개 카테고리로 분류된 모션 용어를 모아둔 사이트입니다.

예를 들어 “부드럽게 나타나게 해줘”는 모호하게 판단하지만 “staggered fade-in with spring easing”은 AI가 바로 이해하고 수행합니다.

❸ UI를 가리켜서 에이전트에게 전달하는 것 → https://lnkd.in/gifDuJ97

Agentation은 별도의 설치가 필요한 UI 피드백 도구입니다. 특정 내용을 말로 표현하기 어려우니 아예 화면에서 요소를 클릭하면서 CSS selector, 소스 파일 경로, React 컴포넌트 트리, computed style이 자동으로 추출해 Codex 나 Claude Code 가 바로 읽도록 하는 것입니다. “사이드바에 있는 파란 버튼”이라고 설명하는 대신 .sidebar > button.primary를 직접 건네는 방식입니다.

핵심은 도구가 아닙니다. 해당 도메인의 용어를 알고, 그 용어로 프롬프트를 작성하는 방법을 배우는 것입니다. AI의 성능이 아무리 좋아져도 지시하는 사람의 어휘가 부족하면 결과물의 수준은 따라오지 않습니다. 프롬프트 엔지니어링의 본질은 결국 도메인 어휘력이라고 생각합니다.