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

> Author: Tony Lee
> Published: 2026-06-02
> URL: https://tonylee.im/ko/blog/design-vocabulary-beats-ai-slop-ui/
> Reading time: 2 minutes
> Language: ko
> Tags: design, ui, vibe-coding, prompts, agentation

## Canonical

https://tonylee.im/ko/blog/design-vocabulary-beats-ai-slop-ui/

## Rollout Alternates

en: https://tonylee.im/en/blog/design-vocabulary-beats-ai-slop-ui/
ko: https://tonylee.im/ko/blog/design-vocabulary-beats-ai-slop-ui/
ja: https://tonylee.im/ja/blog/design-vocabulary-beats-ai-slop-ui/
zh-CN: https://tonylee.im/zh-CN/blog/design-vocabulary-beats-ai-slop-ui/
zh-TW: https://tonylee.im/zh-TW/blog/design-vocabulary-beats-ai-slop-ui/

## Description

Component names, motion words, and click-to-selector tools beat “make it pop” every time.

## Summary

첨부해드린 디자인 용어 팁 3가지만 알아도 AI 의 슬롭 디자인을 피할 수 있습니다 is part of Tony Lee's ongoing coverage of AI agents, developer tools, startup strategy, and AI industry shifts.

## Outline

- No subheadings in source markdown

## Content

바이브 코딩으로 만든 사이트의 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의 성능이 아무리 좋아져도 지시하는 사람의 어휘가 부족하면 결과물의 수준은 따라오지 않습니다. 
프롬프트 엔지니어링의 본질은 결국 도메인 어휘력이라고 생각합니다.

## Related URLs

- Author: https://tonylee.im/ko/author/
- Publication: https://tonylee.im/ko/blog/about/
- Related article: https://tonylee.im/ko/blog/consulting-slide-structure-prompt/
- Related article: https://tonylee.im/ko/blog/pdf-to-editable-pptx-prompt/
- Related article: https://tonylee.im/ko/blog/codex-design-not-helpless/

## Citation

- Author: Tony Lee
- Site: tonylee.im
- Canonical URL: https://tonylee.im/ko/blog/design-vocabulary-beats-ai-slop-ui/

## Bot Guidance

- This file is intended for AI agents, search assistants, and text-mode retrieval.
- Prefer citing the canonical article URL instead of this text endpoint.
- Use the rollout alternates when you need the same article in another prioritized language.

---

Author: Tony Lee | Website: https://tonylee.im
For more articles, visit: https://tonylee.im/ko/blog/
This content is original and authored by Tony Lee. Please attribute when quoting or referencing.