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

한 줄 요약

AI 로 웹사이트를 만들 때 「오른쪽에서 쓱 나오는 거」 대신 「드로어」처럼 정확한 UI 용어를 쓰면 AI 와 주고받는 횟수가 확 준다는 영상. 레이아웃 7개·컴포넌트 9개·효과 8개의 이름과 AI 요청 문장을 실제 화면으로 보여 주고, 「UI 용어 + 원하는 동작 + 적용 조건」 공식으로 마무리한다.

영상 메타

URL: https://www.youtube.com/watch?v=mlhKEy-2bgI
채널: 코드깎는노인
길이: 11분 50초
업로드: 2026-10-25
조회수: 853 / 좋아요 140
시청일: 2026-10-25 KST (⚡ Claude가 자막 추출 후 요약)

픽업

일상어로 「버튼 누르면 오른쪽에서 메뉴 같은 게 나왔으면 좋겠어」라고 해도 AI 는 꽤 그럴듯하게 만든다. 그런데 「설정 버튼을 누르면 오른쪽 드로어가 슬라이드로 열리게 해 줘」라고 하면 무엇을 어디에서 어떻게 열지가 한 번에 전달되고, 원하는 모양을 찾느라 AI 와 몇 번씩 말을 주고받는 일이 확 줄어든다.
페이지 뼈대(레이아웃) 용어 7개: 첫 화면 소개 영역 = 히어로 섹션(그 안의 핵심 버튼 = CTA), 폭에 따라 배치가 바뀌는 = 반응형 레이아웃(데스크톱 3열·태블릿 2열·모바일 1열처럼 열 수까지 정해 주면 좋다), 정보를 독립된 박스로 나눈 = 카드 레이아웃, 중요한 건 크게 보조는 작게 = 벤토 그리드, 왼쪽 메뉴·오른쪽 작업 공간 = 사이드바 레이아웃, 스크롤해도 위에 붙어 있는 = 스티키 헤더, 이미지와 글을 좌우로 나눈 = 스플릿 레이아웃(좁아지면 위아래로 쌓기).
부품(컴포넌트) 용어 9개: 탭은 옆으로 바꿔 보고 아코디언은 아래로 펼쳐 본다. 모달(다이얼로그)은 화면 한가운데서 집중을 요구하고 뒤를 어둡게 덮는 반투명 막은 오버레이·백드롭이라 부른다. 드로어는 옆으로 열려서 하던 일을 덜 끊는다. 그 밖에 드롭다운, 툴팁, 토스트(스낵바), 캐러셀, 스켈레톤 로딩.
효과 용어 8개: 호버 이펙트(여기는 누를 수 있구나 알려 준다), 스크롤 리빌(보이는 순간 등장), 스태거 애니메이션(0.1초 간격 시간차), 스무스 트랜지션(0.2초 정도), 글래스모피즘(글자가 안 읽힐 수 있으니 대비 확보), 패럴렉스 스크롤링(세면 어지러우니 약하게, 모션 감소 설정에서는 줄이기), 스크롤 스냅, 마이크로 인터랙션(거창한 애니메이션보다 작은 반응이 사용성을 높일 때가 많다).
요청 문장에는 닫히는 조건과 시간까지 붙인다. 모달은 「취소 버튼이나 ESC 로 닫히게」, 드로어는 「바깥 영역 클릭과 ESC 로 닫히게」, 툴팁은 「마우스를 올리거나 키보드로 포커스하면」, 토스트는 「3초간 보여 줘」처럼.
공식은 「UI 용어 + 원하는 동작 + 적용 조건」이다. 중요한 건 전문 용어를 많이 쓰는 게 아니라 정확한 용어에 원하는 동작과 조건을 붙이는 것이며, 그래야 문장 하나하나가 화면의 어느 부분이 되는지 나도 AI 도 똑같이 안다.
용어를 전부 외울 필요는 없다. 「아, 내가 원한 게 이거였구나」 하고 연결해 보고, 영상 끝의 치트시트를 「이거 뭐라고 불러야 하지」 싶을 때 찾아보면 된다.

용어

바이브 코딩 [워크플로우 · 문화]: 코드를 직접 쓰지 않고 AI 에게 말로 요청해 웹사이트·앱을 만드는 방식. 영상은 이때 쓸 UI 용어 24개를 다룬다.
히어로 섹션 [기타]: 웹사이트에 들어가자마자 보이는 메인 소개 영역. 그 안의 「무료로 시작하기」 같은 핵심 버튼이 CTA 버튼이다.
벤토 그리드 [기타]: 중요한 항목은 큰 카드, 보조 항목은 작은 카드로 섞어 배치하는 격자. 일본어 도시락(벤토)에서 온 이름.
드로어 [기타]: 화면 옆에서 서랍처럼 열리는 패널. 한가운데 뜨는 모달과 달리 하던 일을 덜 끊는다.
토스트 [기타]: 저장 뒤 화면 아래에 잠깐 떴다가 사라지는 알림. 스낵바라고도 부른다.
스켈레톤 로딩 [기타]: 데이터를 불러오는 동안 빈 화면 대신 실제 구조와 비슷한 회색 윤곽을 먼저 보여 주는 방식.
스크롤 리빌 [기타]: 스크롤해서 콘텐츠가 화면에 들어오는 순간 아래에서 살짝 올라오며 나타나는 효과.
스태거 애니메이션 [기타]: 여러 요소가 한꺼번에가 아니라 0.1초 간격 같은 시간차로 차례로 나타나는 연출.
글래스모피즘 [기타]: 뒤가 흐릿하게 비치는 유리 질감 스타일(반투명 배경 + 백드롭 블러). 텍스트 대비를 유지해야 한다.
마이크로 인터랙션 [기타]: 좋아요를 누르면 하트가 튀는 것처럼 클릭·저장·선택 같은 작은 행동에 바로 돌아오는 짧은 시각 피드백.