바이브 코딩 UI 용어 24선 가이드: AI에게 레이아웃·컴포넌트·모션을 정확히 요청하는 법
AI 코딩 도구에게 모호한 표현 대신 정확한 UI 패턴 명칭과 동작 계약을 전달하여 원하는 웹 화면을 한 번에 구현하는 24가지 핵심 용어와 실전 프롬프트 템플릿을 정리합니다.
- AI에게 모호하게 요청하면 불필요한 라이브러리와 복잡한 코드가 생성되므로, 표준 UI 명칭과 동작 계약(동작 트리거·종료 조건·반응형)을 명시해야 합니다.
- 페이지 골격을 잡는 레이아웃 7종, 사용자 인터랙션을 담당하는 컴포넌트 9종, 시각적 깊이를 더하는 효과 8종의 핵심 개념과 복사 가능한 프롬프트 템플릿을 제공합니다.
- 스티키 헤더 먹통 현상, 글래스모피즘 가독성 저하, 모바일 스크롤 스냅 갇힘 등 바이브 코딩 실전에서 자주 발생하는 4대 트랩과 해결책을 다룹니다.
인공지능 코딩 도구에 “오른쪽에서 메뉴가 스르륵 나오게 해줘”라고 지시하면 어떻게 될까요?
대부분의 AI는 화면을 덮는 모달인지, 본문을 밀어내는 사이드바인지 헷갈려 합니다. 그 결과 불필요한 자바스크립트 라이브러리를 끌어오거나 복잡한 코드를 만듭니다.
하지만 표준 UI 패턴 명칭을 사용하면 결과가 달라집니다. “설정 버튼을 누르면 오른쪽 드로어(Drawer)를 열어줘”라고 말해보세요. 여기에 바깥 영역 클릭과 Escape 키로 닫히는 조건을 덧붙입니다. AI는 웹 접근성(W3C WAI-ARIA) 규격에 맞춘 코드를 단번에 작성합니다.
이 글은 바이브 코딩(자연어 프롬프트 개발)에 필요한 24가지 핵심 UI 용어를 다룹니다. 단순 해설을 넘어 실무 프롬프트 템플릿과 브라우저 트러블슈팅 팁을 함께 살펴봅니다.
- 대상 독자: Cursor나 Claude Code로 원하는 UI를 한 번에 만들고 싶은 개발자
- 다루는 범위: 레이아웃 7개, 컴포넌트 9개, 인터랙션 효과 8개 등 총 24개 핵심 UI 패턴
- 읽는 시간: 약 12분
목차
- AI가 내 프롬프트를 오해하는 이유와 해결책
- 실패를 없애는 4단계 동작 계약 공식
- 페이지의 뼈대를 잡는 레이아웃 패턴 7선
- 사용자 조작을 완성하는 핵심 컴포넌트 9선
- 완성도를 높이는 인터랙션과 모션 효과 8선
- 24개 UI 용어 한눈에 비교하는 실무 의사결정 표
- 바이브 코딩에서 자주 마주치는 4대 트랩과 해결법
- 직접 만들어 보니: 랜딩페이지와 대시보드 올인원 프롬프트
- 마무리와 다음 추천 글
AI가 내 프롬프트를 오해하는 이유와 해결책
결론부터 말씀드리면, AI 모델은 일상 묘사보다 표준 디자인 시스템 명칭을 잘 이해합니다.
거대언어모델은 수많은 오픈소스 라이브러리와 W3C 웹 표준 문서를 학습했습니다. Tailwind UI, Radix UI, Shadcn UI의 컴포넌트 이름이 바로 모델의 색인입니다. “예쁜 팝업” 같은 일상 표현은 모델에게 모호한 상상을 유발합니다.
반면 Modal Dialog, Sticky Header, Bento Grid 같은 표준 용어는 다릅니다.
모델이 이미 학습한 검증된 코드 템플릿을 직접 가리킵니다.
표준 용어를 쓰면 버그 없는 코드를 얻을 확률이 크게 높아집니다.
표준 UI 명칭을 쓰면 웹 접근성 속성(ARIA)이 자동으로 포함됩니다. 또한 불필요한 div 태그 중첩과 억지 인라인 스타일이 줄어듭니다.
실패를 없애는 4단계 동작 계약 공식
용어 하나만 지시하면 AI는 화면 크기나 닫기 조건 같은 세부 사항을 추측합니다.
성공적인 바이브 코딩을 위해서는 4가지 요소를 하나의 계약처럼 묶어야 합니다. 이 방식을 ’동작 계약(Behavior Contract)’이라고 부릅니다.
표준 UI 용어로 구현할 대상 정의
어떤 행동으로 열리고 닫히는지 명시
모바일과 PC별 배치 및 여백 지정
키보드 조작과 모션 감소 대응 확인
예를 들어 단순히 “드로어 만들어줘” 대신 아래처럼 요청합니다.
요청 예시: “설정 아이콘 클릭 시 화면 오른쪽에서 열리는 드로어를 만들어줘. 모바일에서는 너비 90%, PC에서는 400px 고정 너비로 설정해줘. Escape 키나 어두운 배경(Overlay)을 누르면 닫히게 해줘. 열렸을 때는 본문 스크롤을 막아줘.”
이렇게 지시하면 AI가 첫 시도에서 안정적인 코드를 작성합니다.
페이지의 뼈대를 잡는 레이아웃 패턴 7선
레이아웃은 부품을 배치하기 전에 전체 정보 위계와 화면 흐름을 결정합니다. 화면 너비 변화에 맞춰 콘텐츠가 자연스럽게 재배치되도록 뼈대를 잡습니다.
1. 히어로 섹션 (Hero Section)
방문자가 웹사이트에 접속했을 때 가장 먼저 마주하는 최상단 대형 영역입니다. 한 줄 가치 제안, 부연 설명, 제품 대표 이미지, CTA 버튼으로 구성됩니다. CTA(Call to Action)는 사용자의 행동을 유도하는 핵심 버튼입니다.
AI 프롬프트: “첫 화면에 한 줄 가치 제안과 두 줄 설명, 데모 비디오를 넣어줘. 그리고 ‘무료 시작하기’ CTA 버튼이 있는 히어로 섹션을 만들어줘. CTA 버튼을 누르면 회원가입 화면으로 스크롤되게 해줘.”
2. 반응형 레이아웃 (Responsive Layout)
화면 너비(PC, 태블릿, 모바일)에 따라 그리드 열 수를 동적으로 바꿉니다. 가로 스크롤(Horizontal Overflow)이 생기지 않도록 유연한 그리드를 씁니다.
AI 프롬프트: “카드 영역을 데스크톱 3열, 태블릿 2열, 모바일 1열로 배치해줘. 어떤 기기 해상도에서도 가로 스크롤이 생기지 않게 최대 너비를 제한해줘.”
3. 카드 레이아웃 (Card Layout)
반복되는 상품, 글, 기능 설명을 독립된 직사각형 단위로 묶는 배치입니다. 카드 전체 클릭과 내부 버튼 클릭이 서로 충돌하지 않게 막아야 합니다.
AI 프롬프트: “기능 소개를 카드 레이아웃으로 만들어줘. 각 카드는 썸네일, 제목, 요약문, 링크를 포함해줘. 키보드 Tab 키로 순서대로 이동할 수 있게 해줘.”
4. 벤토 그리드 (Bento Grid)
도시락 찬합처럼 크기가 서로 다른 사각형 블록들을 맞춘 최신 레이아웃입니다. 중요한 대표 기능 카드는 2칸 너비로 강조하고 보조 기능은 1칸으로 배치합니다.
AI 프롬프트: “기능 4개를 벤토 그리드로 구성해줘. 가장 중요한 첫 카드는 2칸 너비로 크게 강조해줘. 모바일에서는 원래 의미 순서대로 세로 1열로 정렬해줘.”
5. 사이드바 레이아웃 (Sidebar Layout)
화면 좌측에 고정 메뉴 바를 두고, 우측에 메인 작업 공간을 두는 구조입니다. 모바일에서는 사이드바를 숨기고 메뉴 버튼을 눌렀을 때 나타나게 만듭니다.
AI 프롬프트: “대시보드를 위한 좌측 사이드바 레이아웃을 만들어줘. PC에서는 260px 너비로 고정하고, 모바일에서는 메뉴 버튼으로 여는 드로어로 바꿔줘.”
6. 스티키 헤더 (Sticky Header)
페이지를 스크롤해도 화면 상단에 달라붙어 유지되는 내비게이션 바입니다.
CSS position: sticky; top: 0 속성을 씁니다.
AI 프롬프트: “상단 내비게이션을 스티키 헤더로 만들어줘. 스크롤이 시작되면 배경에 은은한 블러 효과를 넣어줘. 링크 클릭 이동 시 제목이 헤더에 가려지지 않게 여백을 줘.”
7. 스플릿 레이아웃 (Split Layout)
화면을 좌우 50:50 비율로 나눠 한쪽에는 글, 다른 쪽에는 이미지를 둡니다. 모바일에서는 글이 먼저 오고 이미지가 뒤에 오도록 순서를 지정합니다.
AI 프롬프트: “로그인 화면을 좌우 스플릿 레이아웃으로 만들어줘. 왼쪽에는 브랜드 그래픽을, 오른쪽에는 폼을 배치해줘. 모바일에서는 세로 1열로 쌓이게 해줘.”
사용자 조작을 완성하는 핵심 컴포넌트 9선
컴포넌트는 사용자의 클릭, 터치, 키보드 입력에 맞춰 상태를 바꾸는 부품입니다. 부품마다 알맞은 쓰임새와 접근성 규칙이 다릅니다.
8. 탭 (Tabs)
한 화면 공간 안에서 여러 주제의 패널을 번갈아 보여주는 컴포넌트입니다. 현재 선택된 탭을 밑줄이나 배경색으로 시각화합니다.
AI 프롬프트: “‘요금제’, ‘기능’, ‘FAQ’ 탭 컴포넌트를 만들어줘. 탭 버튼 클릭이나 키보드 좌우 화살표 탐색 시 해당 내용 패널만 표시해줘.”
9. 아코디언 (Accordion)
항목 제목을 누르면 아래로 본문이 접히거나 펼쳐지는 목록 UI입니다. 자주 묻는 질문(FAQ)에 알맞습니다. 한 번에 하나만 열릴지 정합니다.
AI 프롬프트: “FAQ 질문 5개를 아코디언으로 만들어줘. 질문을 누르면 답변이 아래로 펼쳐지게 해줘. 다른 질문을 누르면 기존 답변은 닫히게 해줘.”
10. 모달 다이얼로그 (Modal Dialog)
현재 작업을 멈추고 사용자의 즉각적인 확인을 요구하는 대화 상자입니다. 배경을 어둡게 막고, 창 안에서만 키보드 포커스가 돌도록 만듭니다.
AI 프롬프트: “삭제 확인 모달 다이얼로그를 작성해줘. 모달이 열리면 취소 버튼으로 포커스를 옮겨줘. Escape 키로 닫히며 확인을 누를 때만 삭제해줘.”
11. 드로어 (Drawer)
화면 가장자리에서 미끄러져 나오는 서랍 형태의 보조 패널입니다. 모바일 장바구니나 상세 검색 필터 창으로 쓰기 좋습니다.
AI 프롬프트: “상품 필터용 우측 슬라이드 드로어를 만들어줘. 화면 밖에서 부드럽게 나타나게 해줘. 닫기 버튼과 바깥 배경 클릭으로 닫히게 구현해줘.”
12. 드롭다운 (Dropdown)
버튼을 누르면 그 아래로 선택 가능한 목록이 펼쳐지는 메뉴입니다. 메뉴 바깥 영역을 클릭했을 때 바로 닫히도록 감지 처리를 해야 합니다.
AI 프롬프트: “프로필 아이콘 클릭 시 아래로 열리는 드롭다운을 만들어줘. ‘설정’, ‘로그아웃’ 항목을 넣고 바깥 영역을 누르면 즉시 닫히게 해줘.”
13. 툴팁 (Tooltip)
아이콘에 마우스를 올리거나 포커스를 맞출 때 뜨는 작은 설명 상자입니다. 필수 정보를 툴팁에만 숨기면 모바일 사용자가 읽기 어렵습니다.
AI 프롬프트: “도움말 아이콘에 마우스를 올리거나 키보드 포커스 시 상단에 툴팁을 띄워줘. 모바일에서는 한 번 터치하면 켜지고 다시 누르면 꺼지게 해줘.”
14. 토스트 및 스낵바 (Toast / Snackbar)
화면 모서리에 잠시 나타나 작업 결과를 알려주는 짧은 알림 창입니다. 보통 3초에서 5초 뒤 저절로 사라지며 현재 작업을 방해하지 않습니다.
AI 프롬프트: “저장 성공 시 화면 하단에 ‘저장되었습니다’ 토스트를 띄워줘. 3초 뒤 아래로 부드럽게 사라지게 하고 오른쪽에 닫기 버튼을 넣어줘.”
15. 캐러셀 (Carousel)
한정된 가로 폭에서 여러 장의 배너나 후기를 넘겨보는 슬라이드입니다. 좌우 버튼과 모바일 터치 스와이프를 모두 지원하도록 만듭니다.
AI 프롬프트: “고객 후기 5개를 넘겨보는 캐러셀을 만들어줘. 모바일에서는 스와이프로 넘기고, 마우스를 올리면 자동 넘김이 멈추게 해줘.”
16. 스켈레톤 로딩 (Skeleton Loading)
데이터를 서버에서 가져오는 동안 회색 윤곽선이 깜빡이는 뼈대 UI입니다. 단순 회전 스피너보다 대기 시간을 덜 지루하게 느끼게 만듭니다.
AI 프롬프트: “카드 목록을 불러오는 동안 보여줄 스켈레톤 UI를 만들어줘. 썸네일과 제목 형태의 회색 윤곽선에 은은한 펄스 애니메이션을 넣어줘.”
완성도를 높이는 인터랙션과 모션 효과 8선
움직임과 시각 질감은 정적인 웹페이지에 생기를 불어넣습니다. 다만 지나친 움직임은 어지러움을 유발하므로 절제해야 합니다.
운영체제에서 ’움직임 줄이기(prefers-reduced-motion)’를 켠 사용자에게는 큰 움직임을 즉시 멈추거나 페이드로 바꿔야 합니다.
17. 호버 이펙트 (Hover Effect)
마우스 커서를 올렸을 때 색상이나 그림자가 살짝 변하는 효과입니다. 카드 요소는 위로 살짝 떠오르는 애니메이션을 적용하면 좋습니다.
AI 프롬프트: “카드에 마우스를 올리면 위로 4px 떠오르며 그림자가 짙어지게 해줘. 터치 화면 기기에서는 오류가 없도록 호버 지원 기기에서만 켜줘.”
18. 스크롤 리빌 (Scroll Reveal)
스크롤을 내릴 때 숨어 있던 요소가 화면에 나타나는 효과입니다.
브라우저의 IntersectionObserver 도구를 활용합니다.
AI 프롬프트: “섹션이 화면에 보일 때 아래에서 위로 올라오며 나타나게 해줘. 모션 감소 설정 브라우저에서는 효과 없이 처음부터 보여줘.”
19. 스태거 애니메이션 (Stagger Animation)
여러 카드가 동시에 뜨지 않고 약간의 시차를 두고 순서대로 뜨는 기법입니다. 시선 흐름을 자연스럽게 유도합니다.
AI 프롬프트: “카드 4개가 화면에 들어올 때 0.08초 간격으로 순서대로 나타나게 해줘. 전체 등장이 0.5초 안에 끝나도록 조절해줘.”
20. 부드러운 전환 (Smooth Transition)
상태가 바뀔 때 색이나 크기가 튀지 않고 부드럽게 이어지는 속성입니다.
CSS transition 속성으로 감속 곡선을 줍니다.
AI 프롬프트: “버튼의 배경색과 테두리 변화에 0.2초 전환 효과를 넣어줘. 주변 레이아웃을 밀어내지 않도록 transform 속성을 위주로 써줘.”
21. 글래스모피즘 (Glassmorphism)
반투명 배경과 뒤쪽 흐림 처리를 섞어 유리를 덧댄 듯한 느낌을 줍니다.
CSS의 backdrop-filter: blur(12px) 속성을 씁니다.
AI 프롬프트: “카드 배경에 글래스모피즘 효과를 넣어줘. 반투명 배경과 블러를 적용하고, 내부 글자가 배경에 묻히지 않게 테두리를 둘러줘.”
22. 패럴랙스 스크롤링 (Parallax Scrolling)
스크롤할 때 배경과 앞쪽 본문이 다른 속도로 움직여 입체감을 줍니다. 배경 장식에만 약하게 써야 피로감이 없습니다.
AI 프롬프트: “히어로 배경의 장식 원형 오브젝트에만 약한 패럴랙스를 적용해줘. 모바일 기기에서는 배터리와 성능을 위해 효과를 꺼줘.”
23. 스크롤 스냅 (Scroll Snap)
스크롤을 멈췄을 때 카드가 지정 위치에 자석처럼 딱 붙는 기능입니다.
CSS의 scroll-snap-type 속성을 씁니다.
AI 프롬프트: “가로 슬라이드에 CSS scroll snap을 적용해줘. 스와이프를 놓으면 카드가 좌측 여백에 딱 맞게 정렬되고 세로 스크롤을 막지 마.”
24. 마이크로 인터랙션 (Microinteraction)
버튼 클릭 시 살짝 튀는 바운스나 완료 체크마크 같은 작은 반응입니다. 동작이 정상 처리되었음을 사용자에게 알립니다.
AI 프롬프트: “저장 버튼을 누르면 로딩 스피너로 바뀌고, 완료되면 체크 아이콘과 함께 ’저장됨’으로 1.5초간 바뀌는 반응을 넣어줘.”
24개 UI 용어 한눈에 비교하는 실무 의사결정 표
어떤 상황에 어떤 패턴을 골라야 할지 표로 정리했습니다.
| 구분 | UI 패턴 명칭 | 적합한 적용 상황 | AI에게 지시할 핵심 키워드 |
|---|---|---|---|
| 레이아웃 (7종) |
히어로 섹션 | 웹사이트 첫 방문자 시선 집중 | H1 헤드라인, 서브텍스트, 1순위 CTA 버튼 |
| 반응형 레이아웃 | PC·태블릿·스마트폰 동시 대응 | 3열에서 1열로 전환, 가로 스크롤 방지 | |
| 카드 레이아웃 | 상품·글·기능의 독립적 나열 | 그리드 카드, 개별 링크, 클릭 충돌 방지 | |
| 벤토 그리드 | 핵심 기능과 보조 기능의 차등 강조 | 2x2 대형 카드와 1x1 보조 카드 비대칭 배열 | |
| 사이드바 레이아웃 | 대시보드 및 복합 메뉴 시스템 | 고정 좌측 메뉴, 모바일 드로어 자동 전환 | |
| 스티키 헤더 | 스크롤 중에도 상단 메뉴 유지 | position sticky, 배경 블러, scroll-padding | |
| 스플릿 레이아웃 | 글과 이미지·폼의 1:1 대조 | 좌우 50:50 분할, 모바일 세로 1열 스택 | |
| 컴포넌트 (9종) |
탭 | 동일 영역 내 3~5개 주제 전환 | 활성 밑줄 바, 키보드 좌우 화살표 전환 |
| 아코디언 | FAQ 등 질문과 답변 접기/펴기 | 세로 펼침, 화살표 회전, 단일 열림 옵션 | |
| 모달 다이얼로그 | 삭제·결제 등 즉각 확인 필요 | 오버레이 백드롭, 포커스 트랩, Escape 닫기 | |
| 드로어 | 모바일 장바구니·상세 필터 패널 | 우측 슬라이드 인, 바깥 클릭 감지 닫기 | |
| 드롭다운 | 버튼 하단 보조 메뉴·옵션 선택 | 하단 팝오버 목록, 바깥 영역 클릭 시 닫기 | |
| 툴팁 | 아이콘·축약어의 1초 보조 해설 | 호버 및 포커스 노출, 터치 토글 지원 | |
| 토스트 | 비동기 작업 결과 간결한 알림 | 화면 하단 팝업, 3초 자동 페이드아웃 | |
| 캐러셀 | 한정 공간 내 다중 배너·후기 탐색 | 좌우 버튼, 모바일 스와이프, Hover 일시정지 | |
| 스켈레톤 로딩 | 데이터 요청 중 화면 흔들림 방지 | 회색 펄스 윤곽 박스, 에러 시 재시도 분기 | |
| 인터랙션 (8종) |
호버 이펙트 | 마우스 올렸을 때 클릭 가능성 표시 | 위로 4px 이동, 그림자 깊이, hover 기기 분기 |
| 스크롤 리빌 | 화면 진입 시 섹션 등장 효과 | IntersectionObserver, 모션 감소 대응 | |
| 스태거 애니메이션 | 목록 카드의 시차 순차 노출 | 0.08초 간격 순차 딜레이, 0.5초 내 완료 | |
| 부드러운 전환 | 색상·크기 상태 변화 부드럽게 연결 | transition 0.2초 감속 곡선, transform 우선 | |
| 글래스모피즘 | 반투명 유리 질감의 세련된 표면 | backdrop-blur, 반투명 배경, 대비율 확보 | |
| 패럴랙스 스크롤 | 배경과 전경의 이동 속도 차이 | 배경 장식 전용 감속 이동, 모바일 비활성화 | |
| 스크롤 스냅 | 슬라이드가 지정 위치에 자석 정렬 | scroll-snap-type mandatory, 패딩 정렬 | |
| 마이크로 인터랙션 | 버튼 클릭 피드백 및 상태 전환 | 클릭 바운스, 로딩 스피너, 완료 체크마크 |
바이브 코딩에서 자주 마주치는 4대 트랩과 해결법
실제로 AI 도구와 코드를 짜면 의도와 다르게 화면이 굳는 문제가 생깁니다. 가장 흔한 4가지 문제와 해결 프롬프트를 모았습니다.
트랩 1: 스티키 헤더가 먹통인 경우
상단 바에 position: sticky; top: 0을 줘도 스크롤과 함께 밀려 올라갑니다.
부모 요소 어딘가에 overflow: hidden이 걸려 스크롤 기준이 깨진 탓입니다.
해결 프롬프트: “상단 헤더의 position: sticky가 동작하지 않아. 상위 부모 요소에 overflow: hidden이나 overflow: clip이 걸려 있는지 확인하고 풀어줘. 헤더가 전체 창 기준으로 고정되도록 z-index와 top: 0 설정을 손봐줘.”
트랩 2: 글래스모피즘 뒤가 흐려지지 않는 경우
backdrop-filter: blur(12px)를 넣었는데 뒤쪽이 선명하게 비치는 현상입니다.
배경색이 완전 불투명이거나 사파리 브라우저용 접두사가 빠진 경우입니다.
해결 프롬프트: “카드의 배경색을 완전 불투명 대신 rgba(255, 255, 255, 0.75) 반투명으로 바꿔줘. 그리고 사파리 호환성을 위해 -webkit-backdrop-filter: blur(12px) 속성을 함께 넣어줘.”
트랩 3: 모바일에서 스크롤 스냅 탓에 화면이 갇히는 현상
가로 슬라이드에 스냅을 걸었을 때, 모바일에서 대각선 스크롤 시 화면이 멈칫거립니다. 터치 행동 범위를 정해주어야 합니다.
해결 프롬프트: “가로 캐러셀에 overscroll-behavior-x: contain을 줘서 가로 넘김 끝에서 페이지가 흔들리지 않게 해줘. 세로 스크롤을 방해하지 않도록 touch-action: pan-y를 추가해줘.”
트랩 4: 모달이 떴는데 배경 본문이 뒤에서 스크롤되는 현상
모달이 열렸는데도 마우스 휠이나 터치로 뒷배경이 스크롤되는 문제입니다. 모달이 열릴 때 배경 스크롤을 잠가야 합니다.
해결 프롬프트: “모달이 열릴 때 document.body.style.overflow = ’hidden’을 적용해 뒷배경 스크롤을 잠가줘. 모달이 닫히면 원래 상태로 되돌리는 클린업 코드를 넣어줘.”
직접 만들어 보니: 랜딩페이지와 대시보드 올인원 프롬프트
24개 용어를 하나씩 요청하기 번거롭다면 조합형 프롬프트를 씁니다. 실제 프로젝트에서 효과를 본 2가지 템플릿입니다.
템플릿 A: 소개용 랜딩페이지 프롬프트
[서비스명] 소개를 위한 랜딩페이지를 제작해줘.
1. 레이아웃:
- 상단은 스크롤 시 반투명 블러가 적용되는 스티키 헤더로 만들어줘.
- 첫 화면은 한 줄 가치 제안과 제품 데모, '무료 시작하기' CTA가 담긴 히어로 섹션을 둬.
- 핵심 기능은 4개 카드의 벤토 그리드로 배치하고 대표 기능은 2칸 너비로 강조해줘.
- 하단 FAQ는 한 번에 하나씩만 열리는 아코디언 컴포넌트로 구성해줘.
2. 컴포넌트 및 효과:
- 고객 후기 영역은 모바일 터치 스와이프를 지원하는 캐러셀로 만들어줘.
- 기능 카드는 화면에 보일 때 0.08초 시차로 순서대로 뜨는 스태거 효과를 줘.
- 카드 호버 시 위로 4px 떠오르는 부드러운 전환 효과를 넣어줘.
- 모바일 해상도에서 가로 스크롤이 생기지 않게 검증해줘.템플릿 B: 데이터 관리 대시보드 프롬프트
[관리 시스템] 데이터 조회 대시보드 화면을 제작해줘.
1. 레이아웃:
- 좌측 260px 고정 사이드바와 우측 메인 영역으로 구성해줘.
- 모바일에서는 사이드바가 숨겨지고 메뉴 버튼을 누르면 좌측 드로어로 열리게 해줘.
- 메인 상단에는 주요 지표 4개를 카드 레이아웃으로 배치해줘.
2. 컴포넌트 및 피드백:
- 데이터 테이블 상단에 탭 컴포넌트를 두고 패널을 전환해줘.
- 로딩 중에는 실제 테이블 형태를 본뜬 스켈레톤 로딩 UI를 보여줘.
- 삭제 버튼 클릭 시 확인 모달을 띄우고 Escape 키로 닫히게 해줘.
- 저장 완료 시 우측 상단에 3초간 노출되는 토스트 메시지를 표시해줘.
- 테이블 도움말 아이콘에는 마우스와 키보드 모두 작동하는 툴팁을 달아줘.이 프롬프트들을 실제로 Cursor나 Claude Code에 넣어보았습니다. 여러 번 되묻는 과정 없이 한 번에 안정적인 컴포넌트 트리를 얻을 수 있었습니다.
마무리와 다음 추천 글
바이브 코딩의 본질은 코드를 몰라도 된다는 환상이 아닙니다. 내가 원하는 화면을 명확한 언어로 표현하고 조율하는 능력입니다.
오늘 다룬 24가지 UI 용어와 4단계 동작 계약 공식을 기억해 두세요. 모호한 표현 대신 명확한 명칭을 쓸 때, AI는 든든한 파트너가 됩니다.
웹 개발 아키텍처와 프런트엔드 도구에 관심이 있다면 다음 연관 글도 확인해 보세요:
- Astro와 Next.js 웹 프레임워크 선택 가이드: 블로그와 웹 앱에 적합한 최적의 프레임워크 비교
- Cloudflare Workers와 GitHub를 활용한 웹 서비스 아키텍처 분석: 글로벌 엣지 네트워크 배포 파이프라인
- ChatGPT 제품 사진 5대 시각 프롬프트 가이드: 제품 사진 한 장으로 마케팅 시안을 만드는 프롬프트 기법
💡 본문 핵심 UI 용어 사전 모아보기 (클릭하여 펼치기)
- 히어로 섹션(Hero Section): 웹페이지 최상단에서 브랜드 가치와 행동 유도 버튼(CTA)을 강조하는 대형 첫 화면 영역
- 벤토 그리드(Bento Grid): 찬합처럼 크기가 다른 사각형 블록들을 조화롭게 배열한 최신 그리드 레이아웃
- 스티키 헤더(Sticky Header): 스크롤해도 화면 상단에 달라붙어 유지되는 내비게이션 바
- 드로어(Drawer): 화면 가장자리에서 미끄러져 나오는 서랍형 보조 패널
- 모달 다이얼로그(Modal Dialog): 중요한 확인을 마칠 때까지 뒷배경을 잠그는 집중 대화창
- 스켈레톤 로딩(Skeleton Loading): 데이터 로딩 중에 회색 윤곽선 뼈대를 보여주어 체감 대기 시간을 줄이는 UI
- 글래스모피즘(Glassmorphism): 반투명한 유리와 후면 블러 효과를 결합한 입체 디자인 스타일
- 스태거 애니메이션(Stagger Animation): 여러 요소가 약간의 시차를 두고 순서대로 나타나는 도미노식 애니메이션
- 마이크로 인터랙션(Microinteraction): 버튼 클릭이나 저장 완료 등에 반응하는 섬세한 시각 피드백
- 동작 계약(Behavior Contract): UI 요청 시 트리거, 닫기 조건, 반응형 배치, 접근성 조건을 함께 묶는 작성법