바이브 코딩 UI 용어 24개: 원하는 화면을 AI에게 설명하는 법

AI에게 웹사이트를 만들어 달라고 했는데, 머릿속 화면과 다른 결과가 나온 적 있나요? “오른쪽에서 열리는 설정창”이나 “스크롤할 때 하나씩 나타나는 카드”를 설명하다 보면 수정 요청이 길어집니다.

이럴 때 바이브 코딩 UI 용어를 알면 도움이 됩니다. UI는 사용자가 보고 조작하는 화면을 뜻합니다. 화면의 이름을 알면 AI에게 요청할 때도, 참고할 디자인을 검색할 때도 표현이 구체적이 됩니다.

코드깎는노인의 영상은 이런 상황에 쓸 수 있는 용어 24개를 소개합니다. 핵심은 용어 암기가 아닙니다. 이름에 원하는 동작과 적용 조건을 붙이는 것입니다. 영상 내용을 세 묶음으로 정리하고, 마지막에 바로 응용할 수 있는 요청문을 덧붙였습니다.

1. 화면의 배치를 정하는 레이아웃 용어 7개

먼저 화면에서 무엇을 어디에 둘지 정해 보세요. 큰 배치가 정해져야 버튼이나 효과도 설명하기 쉬워집니다.

카드 레이아웃과 벤토 그리드는 함께 생각하면 쉽습니다. 정보를 카드로 나누되, 중요한 카드의 크기를 더 키우고 싶다면 벤토 그리드를 요청하면 됩니다.

“반응형으로 만들어 줘”에서 멈추지 마세요. 모바일에서 몇 열로 보일지, 이미지와 글 중 무엇이 먼저 나올지까지 정하면 요청이 더 분명해집니다. 영상의 레이아웃 설명 보기

2. 클릭 이후의 동작을 정하는 UI 컴포넌트 9개

컴포넌트는 화면을 구성하는 개별 부품입니다. 내용을 전환하거나, 설정을 열거나, 처리 결과를 알릴 때 사용합니다.

여기서 선택 기준은 사용자가 무엇을 해야 하는가입니다. 삭제 전에 확인을 받아야 한다면 확인 모달을, 설정을 살펴봐야 한다면 드로어를, 저장 결과만 알려주면 된다면 토스트를 생각해 볼 수 있습니다.

이름만으로 모든 동작이 정해지지는 않습니다. 드로어를 요청할 때도 열리는 방향, 여는 버튼, 닫는 방법을 함께 적어 주세요. 영상의 컴포넌트 설명 보기

3. 변화와 반응을 표현하는 UI 용어 8개

배치와 기능을 정했다면, 상태가 바뀔 때 어떻게 보여줄지 정할 차례입니다. 효과마다 적용되는 시점이 다릅니다.

스크롤 리빌과 스태거 애니메이션은 함께 요청할 수도 있습니다. 전자는 콘텐츠가 화면에 들어오는 시점을, 후자는 여러 카드가 등장하는 시간차를 설명합니다.

효과를 넣을 때는 읽기 편한지도 확인하세요. 영상에서도 글래스모피즘의 텍스트 대비와 패럴렉스의 움직임 강도를 짚습니다. 모션 감소 설정은 사용자가 기기에서 움직임을 줄여 달라고 지정한 설정입니다. 영상의 효과 설명 보기

4. 바이브 코딩 UI 용어를 실제 요청문으로 바꾸기

영상에서 제시하는 요청 방식은 간단합니다.

UI 용어 + 원하는 동작 + 적용 조건

예를 들어 “설정창을 멋지게 만들어 줘”에는 열리는 위치나 닫는 방법이 없습니다. 아래처럼 쓰면 구현할 동작이 구체적으로 드러납니다.

설정은 오른쪽 드로어로 만들어 줘.
상단의 설정 버튼을 누르면 열리고,
Esc 키를 누르거나 바깥 영역을 클릭하면 닫히게 해 줘.

여러 용어를 묶어 요청할 때도 같은 방식을 쓸 수 있습니다. 다음은 영상 내용을 응용해 새로 작성한 가상의 업무 도구 소개 페이지용 요청문입니다.

팀의 업무 도구를 소개하는 웹페이지를 만들어 줘.
1. 첫 화면은 히어로 섹션으로 구성해 줘.
   제목, 짧은 설명, 제품 이미지, ‘사용 방법 보기’ CTA를 넣어 줘.
2. 핵심 기능은 벤토 그리드로 보여 줘.
   가장 중요한 기능의 카드를 크게 배치하고,
   모바일에서는 모든 카드를 한 열로 쌓아 줘.
3. 상단 메뉴는 스티키 헤더로 만들어 줘.
   설정 버튼을 누르면 오른쪽 드로어를 열어 줘.
   Esc 키와 바깥 영역 클릭으로 닫을 수 있게 해 줘.
4. FAQ는 아코디언으로 구성해 줘.
   질문을 누르면 답변을 펼치고, 다시 누르면 접어 줘.
5. 기능 카드가 화면에 들어올 때 스크롤 리빌을 적용해 줘.
   카드는 0.1초 간격의 스태거 애니메이션으로 보여 줘.
   모션 감소 설정을 켠 경우에는 등장 효과를 생략해 줘.

완성된 화면을 수정할 때도 용어를 그대로 활용해 보세요. “이 부분이 이상해”보다 “모바일에서 벤토 그리드를 한 열로 바꿔 줘”라고 하면 수정할 대상과 조건이 분명해집니다. 영상의 요청문 설명 보기

지금 필요한 용어 하나부터 써보세요

24개를 한꺼번에 외울 필요는 없습니다. 먼저 만들고 싶은 화면에서 이름을 몰랐던 요소 하나를 골라 보세요. 그 이름에 언제 나타나고, 어떻게 움직이며, 어떤 조건에서 달라지는지를 붙이면 됩니다.

다음 요청에는 “예쁘게 만들어 줘”라는 말 뒤에 원하는 배치와 동작을 한 문장 더 적어 보세요. 이름을 아는 것의 가치는 그 한 문장을 구체적으로 쓸 수 있다는 데 있습니다.

출처: 코드깎는노인, 「바이브코더가 반드시 알아야 할 필수 용어 24가지」. 사용자가 제공한 자막을 바탕으로 재구성했습니다. 요청문 예시는 영상의 설명을 응용해 새로 작성했습니다.