AI에게 화면을 설명할 때는 UI 용어 24가지에 원하는 동작과 적용 조건을 붙이면 됩니다 | DAKER 커뮤니티

AI에게 웹 화면을 만들어 달라고 할 때는 용어 하나, 원하는 동작 하나, 적용 조건 하나를 한 문장에 붙이면 요청이 정확해집니다. 유튜브 채널 코드깎는노인이 10월 25일 공개한 영상 「바이브코더가 반드시 알아야 할 필수 용어 24가지」는 바이브 코딩에서 자주 쓰는 UI 용어 24개를 실제로 움직이는 화면으로 보여 주고, 용어마다 AI에게 그대로 쓸 수 있는 요청 문장을 붙인 영상입니다. 영상 길이는 약 11분 50초입니다. 이 글은 영상에서 확인한 내용만 정리했고, 오늘 바로 해 볼 행동은 하나입니다. 지금 만들고 있는 화면 중 요청 문장이 가장 긴 곳을 골라 「용어 + 동작 + 조건」 형식으로 다시 쓰는 것입니다.

영상은 어떤 문제에서 출발합니까

영상은 원하는 화면은 머릿속에 분명히 있는데 무엇이라고 불러야 할지 몰라 설명이 길어지는 순간에서 시작합니다. 오른쪽에서 쓱 나오는 메뉴, 스크롤하면 하나씩 나타나는 요소, 크기가 들쭉날쭉한 카드 배치가 예로 나옵니다. 영상은 이런 화면 대부분에 이름이 있다고 말합니다.

영상은 일상적인 말로 설명해도 AI가 만들어 주기는 한다고 인정합니다. 「버튼 누르면 오른쪽에서 메뉴 같은 게 나왔으면 좋겠어」라고 해도 AI는 꽤 그럴듯하게 만든다는 설명입니다. 다만 같은 부탁을 「설정 버튼을 누르면 오른쪽 드로어가 슬라이드로 열리게 해 줘」라고 하면 무엇을 어디에서 어떻게 열지가 한 번에 전달된다고 영상은 비교합니다. 이름을 알면 원하는 디자인을 찾기도 쉽고, 수정할 때도 수월하며, 원하는 모양을 찾느라 AI와 말을 주고받는 횟수가 확 줄어든다는 것이 영상의 주장입니다.

요청 공식은 무엇입니까

영상 설명란은 요청하는 방법을 이렇게 안내합니다. 「요청할 때는 'UI 용어 + 원하는 동작 + 적용 조건'으로 말해 보세요.」 영상 본문은 같은 공식을 예로 풀어 줍니다. 드로어라는 용어에 「오른쪽에서 열린다」는 동작을 붙이고, 「설정 버튼을 누르면 열리고 ESC로 닫힌다」는 조건을 붙이는 방식입니다.

영상은 전문 용어를 많이 쓰는 것이 중요한 것이 아니라 정확한 용어에 원하는 동작과 조건을 붙이는 것이 중요하다고 강조합니다. 영상 속에서 24개 용어를 한 문장에 몰아 쓰다 보니 판교 사투리 같아졌다고 제작자가 농담하는 장면도 있습니다. 용어를 전부 외울 필요는 없고, 영상 마지막에 24개 용어를 한 장에 모은 치트시트가 있으니 필요할 때 찾아보면 된다고 안내합니다.

1부 레이아웃 7가지

영상은 페이지의 큰 뼈대를 만드는 용어부터 소개합니다. 1분 23초부터 시작하는 구간입니다.

• 히어로 섹션(Hero Section): 사이트에 들어가자마자 보이는 메인 소개 영역으로, 제품이나 서비스가 무엇인지 첫눈에 알리는 공간입니다. 여기 있는 CTA 버튼은 「무료로 시작하기」처럼 방문자가 눌러 주길 바라는 핵심 버튼입니다. 영상의 요청 예시는 「첫 화면에 짧고 강한 제목과 설명, CTA 버튼, 제품 이미지를 넣은 히어로 섹션을 만들어 줘」입니다.
• 반응형 레이아웃(Responsive Layout): 화면 폭에 맞춰 배치가 달라지는 구조입니다. PC에서만 예쁘고 모바일에서는 깨지는 문제를 막아 준다고 영상은 설명합니다. 열 수까지 정해 주면 좋다며 「데스크톱은 3열, 태블릿은 2열, 모바일은 1열로 카드가 재배치되게 해 줘」를 예로 듭니다.
• 카드 레이아웃(Card Layout): 흩어져 있던 정보를 독립된 박스로 나누는 방식입니다. 상품 목록, 블로그 글, 서비스 기능 소개처럼 반복되는 정보를 보여 줄 때 흔히 씁니다. 예시 요청은 「서비스 기능을 카드 레이아웃으로 정리하고 각 카드에는 아이콘과 제목, 짧은 설명을 넣어 줘」입니다.
• 벤토 그리드(Bento Grid): 모든 카드가 같은 크기일 필요는 없다는 생각에서 나온 배치로, 중요한 항목은 크게 보조 항목은 작게 보여 줍니다. 영상은 도시락을 뜻하는 일본어 단어 벤토에서 따온 이름이라고 설명합니다. 예시 요청은 「핵심 기능은 큰 카드로, 나머지는 작은 카드로 구성한 벤토 그리드 섹션을 만들어 줘. 모바일에서는 한 열로 정렬해 줘」입니다.
• 사이드바 레이아웃(Sidebar Layout): 왼쪽에 메뉴가 있고 오른쪽이 작업 공간인 구조로, 대시보드나 관리자 페이지에서 많이 보입니다. 메뉴를 눌러도 바뀌는 것은 오른쪽 내용뿐입니다. 예시 요청은 「왼쪽에 고정된 사이드바 내비게이션, 오른쪽에 메인 콘텐츠가 있는 대시보드 레이아웃을 만들어 줘」입니다.
• 스티키 헤더(Sticky Header): 페이지를 아래로 내려도 헤더가 화면 위에 붙어 있는 형태입니다. 스티키는 끈끈하게 달라붙는다는 뜻이며, 스크롤을 한참 내린 상태에서도 메뉴나 주요 버튼에 바로 접근할 수 있습니다. 예시 요청은 「상단 내비게이션을 스티키 헤더로 만들고 스크롤 중에도 보이게 해 줘」입니다.
• 스플릿 레이아웃(Split Layout): 이미지와 글을 좌우로 나누는 레이아웃으로, 제품 소개나 기능 설명에서 아주 자주 쓰입니다. 화면이 좁아지면 위아래로 쌓이게 만드는 것이 보통입니다. 예시 요청은 「데스크톱에서는 이미지와 설명을 좌우 50대 50 스플릿 레이아웃으로 배치하고 모바일에서는 세로로 쌓아 줘」입니다.

2부 UI 컴포넌트 9가지

3분 58초부터는 버튼을 누르거나 데이터를 볼 때 등장하는 실제 UI 부품을 다룹니다. 영상은 이런 부품을 흔히 컴포넌트라고 부른다고 설명합니다.

• 탭(Tabs): 여러 종류의 내용을 한 공간에서 바꿔 가며 보여 줄 때 씁니다. 페이지를 새로 열지 않고 해당 구역 안의 내용만 바꿀 수 있습니다. 예시 요청은 「개요, 기능, 요금 정보를 탭 컴포넌트로 구성하고 선택된 탭을 강조해 줘」입니다.
• 아코디언(Accordion): 궁금한 항목만 펼쳐 보는 UI로, 악기 아코디언처럼 접혔다 펴집니다. FAQ처럼 내용이 길어지는 페이지에서 자주 보입니다. 영상은 탭이 옆으로 바꿔 보는 방식이라면 아코디언은 아래로 펼쳐 보는 방식이라고 구분합니다. 예시 요청은 「FAQ를 아코디언으로 만들어 줘. 질문을 누르면 답변이 펼쳐지고 다시 누르면 접히게 해 줘」입니다.
• 모달 또는 다이얼로그(Modal / Dialog): 현재 화면 위에 별도 창을 띄워 중요한 확인이나 입력을 받는 방식입니다. 저장이나 삭제 창에서 많이 쓰이며, 뒤 화면이 어두워지면서 이 창부터 처리하게 만드는 것이 특징입니다. 뒤를 어둡게 덮는 반투명한 막은 오버레이 또는 백드롭이라고 부릅니다. 예시 요청은 「삭제 버튼을 누르면 확인 모달을 띄우고 취소 버튼이나 ESC로 닫히게 해 줘」입니다.
• 드로어(Drawer): 화면 옆에서 서랍처럼 나오는 패널로, 영상 첫머리에 나온 바로 그 장면입니다. 설정, 필터, 상세 정보처럼 지금 페이지를 벗어나지 않고 보조 작업을 할 때 좋습니다. 영상은 모달이 화면 한가운데서 집중을 요구한다면 드로어는 옆으로 열려서 하던 일을 덜 끊어 주는 편이라고 비교합니다. 예시 요청은 「설정 버튼을 누르면 오른쪽에서 드로어가 열리게 하고 바깥 영역 클릭과 ESC로 닫히게 해 줘」입니다.
• 드롭다운(Dropdown): 버튼 하나 아래로 선택 목록이 펼쳐지는 UI로, 옵션을 고르거나 정렬 방식을 바꾸는 메뉴에서 쉽게 찾을 수 있습니다. 예시 요청은 「정렬 버튼을 누르면 최신순, 인기순, 이름순을 고르는 드롭다운 메뉴가 나오게 해 줘」입니다.
• 툴팁(Tooltip): 아이콘이나 버튼의 의미를 짧게 알려 주는 작은 안내 창입니다. 화면을 복잡하게 만들지 않고 필요한 사람에게만 정보를 보충할 수 있습니다. 예시 요청은 「설정 항목 옆에 도움말 아이콘을 넣고 마우스를 올리거나 키보드로 포커스하면 툴팁이 보이게 해 줘」입니다.
• 토스트 또는 스낵바(Toast / Snackbar): 저장 버튼을 누르면 화면 아래에 알림이 잠깐 떴다가 사라지는 UI입니다. 계속 화면을 가리는 팝업보다 가볍게 결과를 알릴 수 있습니다. 예시 요청은 「저장이 성공하면 화면 하단에 저장되었습니다 토스트 알림을 3초간 보여 줘」입니다.
• 캐러셀(Carousel): 여러 카드를 옆으로 넘겨 가며 보여 주는 방식으로, 회전목마라는 뜻입니다. 공간이 한정되어 있을 때 고객 후기나 이미지 갤러리에서 자주 씁니다. 예시 요청은 「고객 후기를 캐러셀로 만들어 줘. 좌우 버튼과 모바일 스와이프로 넘길 수 있게 해 줘」입니다.
• 스켈레톤 로딩(Skeleton Loading): 데이터를 불러오는 동안 빈 화면 대신 회색 윤곽을 먼저 보여 주는 방식입니다. 뼈대만 먼저 보여 주기 때문에 지금 불러오는 중이라는 것을 자연스럽게 알 수 있습니다. 예시 요청은 「데이터를 불러오는 동안 실제 카드 구조와 비슷한 스켈레톤 로딩 UI를 보여 줘」입니다.

3부 효과와 인터랙션 8가지

7분 2초부터는 화면을 한 단계 더 매끄럽고 생동감 있게 만드는 효과를 다룹니다.

• 호버 효과(Hover Effect): 마우스를 올렸을 때 색이나 크기가 달라지는 효과입니다. 사용자가 여기는 누를 수 있다는 것을 알아보는 데 도움이 됩니다. 예시 요청은 「카드에 호버 이펙트를 넣고 마우스를 올리면 그림자가 조금 진해지면서 카드가 살짝 위로 올라가게 해 줘」입니다.
• 스크롤 리빌(Scroll Reveal): 스크롤하다가 콘텐츠가 보이는 순간 자연스럽게 등장시키는 효과로, 영상 첫머리의 스크롤하면 하나씩 나타나는 화면이 바로 이것입니다. 랜딩 페이지의 기능 소개에서 흔히 볼 수 있습니다. 예시 요청은 「각 기능 섹션이 화면에 들어오면 아래에서 살짝 올라오면서 나타나는 스크롤 리빌을 적용해 줘」입니다.
• 스태거 애니메이션(Stagger Animation): 여러 요소가 한꺼번에 움직이지 않고 시간차를 두고 나타나는 연출입니다. 똑같은 카드인데도 순서가 생기니 리듬감이 느껴진다고 영상은 설명합니다. 예시 요청은 「카드 목록이 처음 나타날 때 각 카드가 0.1초 간격으로 차례로 등장하는 스태거 애니메이션을 넣어 줘」입니다.
• 스무스 트랜지션(Smooth Transition): 상태가 바뀔 때 뚝 끊기지 않고 자연스럽게 이어지도록 하는 전환입니다. 작은 차이지만 화면의 완성도를 확 높여 준다고 영상은 말합니다. 예시 요청은 「버튼과 카드의 호버, 선택 상태가 200ms, 그러니까 0.2초 정도의 부드러운 트랜지션으로 바뀌게 해 줘」입니다.
• 글래스모피즘(Glassmorphism): 뒤쪽이 흐릿하게 비치는 유리 질감의 UI 스타일입니다. 영상은 글자가 잘 안 읽힐 수 있으므로 대비를 충분히 확보해야 한다고 주의를 줍니다. 예시 요청은 「카드에 반투명 배경과 백드롭 블러를 적용한 글래스모피즘 스타일을 쓰고 텍스트 대비는 유지해 줘」입니다.
• 패럴랙스 스크롤링(Parallax Scrolling): 앞과 뒤의 요소가 서로 다른 속도로 움직이면서 깊이감이 생기는 효과입니다. 인상적인 랜딩 페이지에서 쓸 수 있지만 너무 세면 어지러울 수 있으므로 약하게 쓰는 것이 좋다고 영상은 말합니다. 예시 요청은 「히어로 섹션의 배경 장식에 약한 패럴랙스 스크롤링을 넣고 모바일과 모션 감소 설정에서는 효과를 줄여 줘」입니다. 여기서 모션 감소 설정은 움직임을 줄여 달라고 기기에 켜 둔 사용자 설정을 뜻합니다.
• 스크롤 스냅(Scroll Snap): 스크롤을 놓으면 정해진 섹션에 맞춰 화면이 딱 정렬되는 방식입니다. 중간에 어정쩡하게 멈추지 않아 전체 화면으로 이어지는 제품 소개나 슬라이드형 페이지에서 유용합니다. 예시 요청은 「전체 화면으로 구성한 소개 섹션에 스크롤 스냅을 적용해서 스크롤할 때 각 섹션에 자연스럽게 정렬되게 해 줘」입니다.
• 마이크로 인터랙션(Micro-interaction): 좋아요를 누르면 하트가 톡 튀고 저장하면 체크로 바뀌는 것 같은 작은 반응입니다. 클릭, 저장, 선택 같은 작은 행동에 바로 돌아오는 시각 피드백이며, 거창한 애니메이션보다 이런 작은 반응이 사용성을 높일 때도 많다고 영상은 말합니다. 예시 요청은 「저장 버튼을 누르면 로딩 상태를 거쳐 체크 아이콘으로 바뀌는 짧은 마이크로 인터랙션을 만들어 줘」입니다.

실전: 막연한 요청과 용어를 쓴 요청은 어떻게 다릅니까

영상 9분 48초부터는 지금까지 본 용어를 한꺼번에 써 보는 실전 구간입니다. 먼저 흔한 요청으로 「세련된 웹사이트 만들어 줘. 카드도 예쁘게 하고 스크롤 효과도 넣고 설정 화면도 좀 멋지게 나오게 해 줘」를 보여 줍니다. 영상은 이렇게 말해도 AI가 그럴듯하게 만들 수는 있지만, 어떤 레이아웃을 원하고 어떤 버튼을 누르면 무슨 일이 일어나야 하는지, 애니메이션은 언제 어떻게 보여야 하는지까지 설명하면 결과의 방향이 훨씬 분명해진다고 말합니다.

같은 요청을 오늘 배운 용어로 다시 말하면 이렇게 됩니다. 첫 화면은 히어로 섹션, 핵심 기능은 벤토 그리드, 상단은 스티키 헤더, 설정은 오른쪽 드로어로 하고, 카드에는 가벼운 호버와 스크롤 리빌, 그리고 0.1초 간격의 스태거 애니메이션을 넣어 달라는 문장입니다. 영상은 이렇게 쓰면 문장 하나하나가 화면의 어느 부분인지 사람도 AI도 똑같이 알 수 있다고 정리합니다.

24개 용어 한눈에 보기

영상 설명란이 정리한 분류를 그대로 옮기면 다음과 같습니다.

• 레이아웃 7개: Hero Section, Responsive Layout, Card Layout, Bento Grid, Sidebar Layout, Sticky Header, Split Layout
• UI 컴포넌트 9개: Tabs, Accordion, Modal / Dialog, Drawer, Dropdown, Tooltip, Toast / Snackbar, Carousel, Skeleton Loading
• 효과·인터랙션 8개: Hover Effect, Scroll Reveal, Stagger Animation, Smooth Transition, Glassmorphism, Parallax Scrolling, Scroll Snap, Micro-interaction

오늘 해 볼 행동 한 가지

웹 화면이 들어가는 프로젝트를 AI와 함께 만드는 참가자라면, 지금 보내려던 요청 문장 하나를 골라 영상의 공식에 맞춰 다시 써 보십시오. 예를 들어 「메뉴 같은 게 옆에서 나오게 해 줘」는 「설정 버튼을 누르면 오른쪽에서 드로어가 열리고, 바깥 영역 클릭이나 ESC로 닫히게 해 줘」로 바뀝니다. 용어와 동작과 조건이 모두 들어 있는지만 확인하면 됩니다. 영상은 이 방식이 AI와 주고받는 횟수를 줄여 준다고 말하지만, 실제로 얼마나 줄어드는지는 영상이 수치로 제시하지 않았으므로 직접 비교해 보시기 바랍니다.

출처

• 영상: 코드깎는노인, 「바이브코더가 반드시 알아야 할 필수 용어 24가지」, 2026년 10월 25일 공개, 약 11분 50초 — https://www.youtube.com/watch?v=mlhKEy-2bgI
• 채널: 코드깎는노인 — https://www.youtube.com/@CodingArtisan
• 확인 방법: 영상 설명란과 한국어 자막을 직접 확인해 정리했습니다. 용어 설명과 요청 문장 예시는 영상에서 나온 내용이며, 별도 수치나 외부 인용은 더하지 않았습니다.