영상 보다가 "어, 나랑 비슷한데?" — 내가 쓰는 바이브 코딩 UI 용어 75개 정리

영상 하나 보다가

코드깎는노인 채널의 「바이브코더가 반드시 알아야 할 필수 용어 24가지」를 봤다. AI한테 원하는 화면을 설명하려는데 그걸 뭐라고 부르는지 몰라서 설명만 길어진다는 이야기로 시작해서, 레이아웃·UI 컴포넌트·효과 세 묶음으로 24개를 실제 움직이는 화면과 함께 보여준다.

보다 보니 "어, 이거 내가 하는 거랑 비슷한데?" 싶었다. 나도 AI에게 화면을 맡길 때 "예쁘게 해줘" 대신 Hero Section, Bento Grid, Toast 같은 이름으로 말한다. 그렇게 쓰던 것들을 이번에 내 방식대로 정리해서 Tools에 올렸다.

영상: 바이브코더가 반드시 알아야 할 필수 용어 24가지 — 코드깎는노인

"예쁘게 해줘"로는 안 된다

"예쁘게 만들어줘", "메뉴 만들어줘", "움직이게 해줘". 이렇게 말하면 AI는 무난한 평균값을 내놓는다. 머릿속에 그림이 있어도 이름을 모르면 설명이 길어지고, 길어진 설명은 또 다르게 해석된다.

이름을 알면 한 줄로 끝난다. "메뉴 만들어줘" 대신 Sticky Header + 모바일은 Hamburger, "움직이게 해줘" 대신 Scroll Reveal + Stagger Animation. 결국 AI한테 필요한 건 긴 설명이 아니라 정확한 단어다.

그래서 정리한 것: 바이브 코딩 UI 필수 용어 75

바이브 코딩 UI 필수 용어 75 — mifplus.com/tools/vibe-ui

작업할 때 옆에 띄워 두고 쓰는 용도로 만들었다. 설치 없이 브라우저에서 바로 열린다. 75개를 7개 분류로 나눴다.

영상과 겹치는 것, 내가 더 넣은 것

세어 보니 영상의 24개는 전부 내 목록에도 있었다. 많이 쓰는 걸 모으다 보니 당연히 겹친다. 어차피 다들 쓰는 단어라 겹치는 게 맞다고 생각한다.

차이는 그 바깥이다. 실제로 화면을 만들다 보면 이름이 필요한 곳이 레이아웃과 효과만은 아니었다.

• 내비게이션 — Breadcrumb, Bottom Tab Bar, Stepper, Scroll Spy처럼 화면 사이를 오가는 장치는 따로 묶었다.
• 입력·폼 — 가장 많이 늘어난 분류(14개). 날짜·시간 입력만 해도 Date Picker, Time Picker, DateTime Picker, DateTime Wheel, Time Slot Picker가 다 다르게 나온다. 하나로 뭉뚱그려 말하면 원하는 게 안 나온다.
• 피드백·상태 — AI는 대부분 '정상일 때' 화면만 만든다. 데이터가 없을 때(Empty State), 실패했을 때(Error State), 누를 수 없을 때(Disabled State)를 이름으로 짚어줘야 빠지지 않는다.
• 스타일 — Glassmorphism 하나로 끝내지 않고 Neumorphism, Neo-Brutalism, Elevation, Border Radius, Whitespace까지 넣었다. "고급스럽게" 같은 말 대신 쓸 단어들이다.

내가 쓰는 방식: 보고, 복사하고, 담는다

설명만 늘어놓으면 결국 또 안 쓰게 된다. 그래서 쓰는 흐름 자체를 도구에 넣었다.

1. 직접 만져본다 — 모든 카드는 그림이 아니라 실제로 동작하는 데모다. 호버·클릭·드래그·스크롤 중 어떻게 조작하는지 카드에 표시해 뒀다. 이름만 보고 헷갈릴 때 눌러보면 바로 구분된다.
2. 복사한다 — 카드마다 AI에게 그대로 붙여 넣을 요청 문장이 있다. 하나만 필요하면 [복사]로 끝.
3. 담아서 조립한다 — 여러 개가 필요하면 [+ 담기]로 모으고, 아래 칸에 무엇을 만들지 한 줄 쓰면 프롬프트가 조립된다.

예를 들어 Hero Section, Bento Grid, Sticky Header를 담고 "카페 주문 웹 메인 화면"이라고 쓰면 이렇게 나온다.

카페 주문 웹 메인 화면을 만들어줘. 아래 UI 요소를 사용해줘.
- Hero Section (첫 화면의 대표 영역): 큰 헤드라인, 한 줄 설명, CTA 버튼 2개
- Bento Grid (크기 다른 카드 격자): 큰 카드 1개 + 작은 카드들의 벤토 그리드
- Sticky Header (스크롤해도 남는 헤더): 스크롤해도 상단에 붙어있는 헤더

로딩·빈 화면·에러 상태도 함께 만들고, 모바일에서도 잘 보이게 해줘.

마지막 줄은 내가 매번 붙이던 말이다. 이걸 안 쓰면 로딩·빈 화면·에러 처리와 모바일 대응이 거의 항상 빠져서, 아예 기본으로 들어가게 했다.

찾을 때는 / 키로 검색하고(한글 초성 "ㅁㄷ"이나 영어 "scroll"로도 찾아진다), Ctrl/⌘ + K를 누르면 커맨드 팔레트가 어떤 건지 그 자리에서 직접 체험할 수 있다.

용어 다음 단계: 조립 공식과 수치

단어를 알아도 어떻게 엮을지 막힐 때가 있다. 그래서 아래쪽에 두 가지를 더 붙였다.

프롬프트 조립 공식 — 레이아웃 + 컴포넌트 + 상태 + 스타일 + 효과. 이 순서로 하나씩 고르면 프롬프트 한 덩어리가 된다.

Bento Grid 레이아웃으로 대시보드를 만들어줘. 카드는 Hover Effect로 살짝 떠오르고, 데이터가 없으면 Empty State, 불러오는 중엔 Skeleton Loading. 저장하면 Toast로 알려줘. 전체는 Dark Mode + Glassmorphism, 스크롤하면 카드가 Stagger Animation으로 순서대로 등장.

같은 섹션에 "이렇게 바꿔 말하기"도 넣었다.

실전 수치 & 표현 사전 — 용어만큼 자주 막히는 게 숫자다. "좀 넓게", "좀 작게" 대신 쓸 수 있도록 반응형 브레이크포인트(sm 640 / md 768 / lg 1024 / xl 1280 / 2xl 1536), 8pt 여백 스케일, 글자 크기 스케일, 색을 '역할'로 말하는 법, 애니메이션 속도·이징, 버튼의 6가지 상태, 모호한 말 → 정확한 말 사전, 요청 전 체크리스트까지 정리해 뒀다. 예를 들면 이런 식이다.

• "기본은 1열, md부터 2열, lg부터 3열로 바꿔줘"
• "간격은 8의 배수로, 섹션 사이 80px"

정리하며

영상이 자주 쓰는 24개를 보여주는 쪽이라면, 내가 만든 건 작업하면서 옆에 띄워 두고 꺼내 쓰는 쪽에 가깝다. 겹치는 게 많은 건, 결국 다들 비슷한 단어로 AI와 이야기하고 있다는 뜻일 거다.

바이브 코딩을 하면서 "이거 뭐라고 하지?" 싶을 때 한번 열어 보면 좋겠다. 설명은 여기까지 하고, 나머지는 직접 눌러 보는 게 빠르다.

• 바이브 코딩 UI 필수 용어 75: https://mifplus.com/tools/vibe-ui
• Tools 전체: https://mifplus.com/tools
• 참고 영상: 코드깎는노인 — 바이브코더가 반드시 알아야 할 필수 용어 24가지