VibeCoding 365 바이브 코딩 사전
브레드크럼
영어 표기
Breadcrumb
예시
AI에게 글 상세 페이지를 맡길 때 ‘홈 > 뉴스 > 현재 글’ 브레드크럼을 추가하고 각 상위 링크가 200으로 이동하는지, 현재 항목은 링크가 아닌 텍스트인지, 모바일에서도 줄바꿈과 키보드 포커스가 자연스러운지 검증하게 한다.
브레드크럼은 사용자가 현재 화면이 사이트나 앱의 어느 위치에 있는지 한눈에 알 수 있도록 상위 경로를 단계별 링크로 보여주는 UI 패턴입니다. VIBE 코딩에서 AI가 상세 페이지를 만들 때 목록·카테고리·현재 항목의 이동 경로를 빠뜨리면 사용자는 뒤로 가기나 메뉴 탐색에 의존하게 됩니다. 그래서 요청서에 라우트 구조, 링크 텍스트, 모바일 줄바꿈, 접근성 레이블, 현재 단계 비활성 처리까지 함께 적어 검증해야 합니다.
- 카테고리
- 프론트엔드·UI
- 난이도
- basic
- 태그
- UI · 탐색
- 슬러그
- breadcrumb
- 상태
- published
- 정렬 순서
- 6000
함께 읽기