바이브코딩 UI/UX 요청 가이드

[기능명]을 Sheet로 만들지 Page로 만들지 먼저 판단해줘.

사용자 목표: [사용자가 끝내야 할 일]
콘텐츠 길이와 단계: [짧은 편집/긴 탐색/다단계]
직접 URL 진입·공유 필요: [있음/없음]
완료·취소 후 돌아갈 위치: [현재 화면/이전 목록/새 목적 화면]

현재 맥락 위에서 잠깐 처리하고 돌아오면 modal Sheet를, 독립적인 탐색·공유·긴 작업이면 새 Page를 선택해줘. 선택 근거와 반대 패턴을 쓰지 않는 이유를 3줄 이내로 설명한 뒤 모바일·데스크톱 구조를 제안해줘.

[기능명]의 [확인할 행동]을 centered modal dialog로 설계하고 구현해줘.

- 목적: 사용자가 [결과]를 이해하고 [계속/취소]를 결정
- Content: 명확한 제목, 되돌릴 수 있는지 설명, 필요한 경우 대상 이름 표시
- Layout: content-fit, max-width 440px, scrim, primary/secondary action
- Dismiss: [Escape 허용/명시 버튼만], 중요한 destructive 결정은 outside press로 닫지 않음
- States: default, submitting, server error, success 후 닫힘
- A11y: semantic dialog, aria-modal, accessible title/description, open 시 안전한 초기 focus, focus trap, close 후 trigger로 focus restore
- Responsive: 모바일에서는 좌우 16px 여백을 유지하고 버튼 라벨이 잘리지 않게 재배치
- Motion: 짧은 fade+scale, prefers-reduced-motion에서는 transform 제거

완료 조건을 체크리스트로 제시하고 실제 서비스 문구를 사용해줘.

계정 삭제 확인 UI를 centered modal dialog로 만들어줘.

제목은 “계정을 삭제할까요?”, 설명은 “예약 내역과 저장한 여행 정보가 모두 삭제되며 되돌릴 수 없습니다.”로 작성해줘. 취소를 안전한 초기 focus로 두고, 오른쪽에 빨간색 destructive button “계정 삭제”를 배치해줘. 중복 제출을 막는 submitting 상태와 서버 실패 시 dialog 안 inline error를 포함해줘.

scrim과 focus trap을 적용하고 배경은 inert 처리해줘. Escape는 취소로 동작하지만 scrim click으로는 닫지 않게 해줘. 닫힌 뒤 원래 삭제 버튼으로 focus를 복원하고 모바일 360px에서는 버튼을 세로로 쌓아줘.

[기능명]을 modal bottom sheet로 설계하고 구현해줘.

- User goal: [짧은 선택/편집을 완료하고 현재 화면으로 복귀]
- Anatomy: scrim, drag handle, title, content area, sticky footer의 [취소/저장]
- Size: content-fit을 기본으로 하고 콘텐츠가 길면 max-height와 내부 scroll 적용
- Dismiss: [scrim tap/Escape/swipe/닫기 버튼], 변경 내용이 있으면 unsaved changes 확인
- Keyboard: 입력 시 virtual keyboard가 active field와 CTA를 가리지 않게 처리
- States: pristine, dirty, saving, validation error, server error, success
- A11y: semantic dialog, accessible title, initial focus, focus trap/restore, background scroll lock
- Responsive: 모바일은 bottom sheet, 넓은 화면에서는 [center dialog/side sheet]로 adaptive 전환
- Motion: bottom enter/exit, reduced motion 대응

실제 문구와 데이터로 화면을 채우고 완료 조건을 체크리스트로 제시해줘.

마이 화면의 “프로필 편집”을 modal bottom sheet로 만들어줘.

상단에 drag handle, “프로필 편집” 제목과 닫기 버튼을 두고 이름·소개·여행 관심사 필드를 배치해줘. 하단에는 Cancel과 primary Save를 sticky footer로 제공해줘. 이름은 필수이며 30자 제한과 inline validation을 표시해줘.

초기에는 content-fit, 키보드가 열리면 active field가 보이도록 내부만 scroll해줘. 변경 전에는 swipe/scrim/Escape로 닫을 수 있지만 dirty 상태에서는 “변경사항을 버릴까요?” 확인을 거치게 해줘. saving 중 중복 제출을 막고 성공 후 sheet를 닫은 뒤 마이 화면의 프로필 내용을 즉시 갱신해줘. 데스크톱에서는 max-width 560px center dialog로 adaptive 전환해줘.

[기능명]을 [navigation drawer/side sheet]로 설계하고 구현해줘.

- 역할: [전역 탐색/현재 목록 필터/상세 속성 편집]
- Placement: [left/right], width [320px/400px], content 영역과의 관계 [overlay/push]
- Anatomy: header, scrollable body, 선택 상태, footer action
- Dismiss: close button, Escape, [outside press 허용 여부]
- States: default, selected, disabled, loading, empty, validation/error
- Responsive: mobile에서는 modal drawer 또는 full-screen sheet, desktop에서는 temporary/permanent 패턴 중 근거를 제시
- A11y: nav 또는 dialog 의미에 맞는 semantic, visible focus, 논리적 Tab 순서, 열고 닫을 때 focus restore
- Scroll: body와 panel의 scroll 책임을 분리하고 이중 스크롤을 피함

사용할 패턴과 반대 패턴을 쓰지 않는 이유를 먼저 설명해줘.

주변 장소 목록의 필터를 오른쪽 temporary side sheet로 만들어줘.

필터는 카테고리, 영업 중, 거리 반경, 평점으로 구성하고 상단에 “필터” 제목과 전체 초기화를 배치해줘. 하단 sticky footer에는 현재 결과 수를 포함한 primary CTA “24개 장소 보기”를 제공해줘. 적용 전 임시 선택값과 적용된 필터값을 분리하고 Cancel 시 이전 값으로 복원해줘.

모바일에서는 화면 하단에서 올라오는 full-height modal sheet로 전환하고, 데스크톱에서는 400px side sheet가 목록 위에 overlay되게 해줘. focus trap, Escape, scroll lock, close 후 필터 버튼으로 focus restore를 포함하고 로딩·0건·네트워크 실패 상태도 설계해줘.

[기능명]을 [트리거]에 anchored된 popover/menu로 설계하고 구현해줘.

- Content: [메뉴 항목 3~7개], 아이콘은 의미가 있을 때만 사용
- Position: trigger 기준 [bottom-end], viewport 충돌 시 flip/shift
- Interaction: click 또는 keyboard로 열고, outside press/Escape/항목 선택 시 닫기
- Keyboard: Arrow key 이동, Home/End, Enter/Space 선택, 열 때 첫 항목 또는 선택 항목에 focus
- Focus: 닫힌 뒤 trigger로 restore, visible focus 제공
- States: default, hover, focus, selected, disabled, destructive, loading
- Responsive: 모바일에서 공간이 부족하면 bottom sheet 또는 action sheet로 adaptive 전환
- Layering: portal/top layer와 z-index 책임을 명확히 하고 scroll/resize 시 위치 갱신

Tooltip과 Dialog로 만들지 않는 이유도 짧게 설명해줘.

장소 카드의 “더보기” 아이콘 버튼 옆에 anchored menu를 만들어줘.

메뉴 항목은 “공유”, “목록에 저장”, “문제 신고”이며 구분선 아래 “기록에서 삭제”를 destructive item으로 배치해줘. desktop에서는 trigger의 bottom-end에 220px popover로 열고 viewport 밖으로 나가면 자동 flip해줘. 모바일 480px 이하에서는 같은 액션을 modal action sheet로 전환해줘.

버튼에는 accessible name “장소 옵션 열기”를 제공하고 aria-expanded 상태를 연결해줘. ArrowUp/Down, Home/End, Enter/Space, Escape를 지원하며 닫힌 후 trigger로 focus를 돌려줘. disabled·hover·focus·destructive 상태와 outside press 동작을 포함해줘.

[이벤트]의 결과 피드백을 Toast, Snackbar, Banner 중 적절한 패턴으로 설계하고 구현해줘.

- Toast: 액션이 필요 없는 짧은 성공·정보 메시지
- Snackbar: Undo/Retry처럼 짧은 후속 액션이 있는 결과 메시지
- Banner: 사용자가 해결하기 전까지 유지해야 하는 페이지 수준 안내

메시지는 결과와 다음 행동이 분명한 실제 문구로 작성해줘. success·warning·error를 색상만으로 구분하지 말고 아이콘·텍스트를 함께 사용해줘. 동일 메시지 중복, 여러 메시지 queue, 자동 닫힘 중 hover/focus, 화면 확대와 모바일 safe area를 처리해줘.

동적 메시지는 적절한 live region으로 알리고, 사용자가 읽거나 액션하기 전에 사라지지 않게 해줘. 선택 근거와 duration·placement·dismiss·action 규칙을 표로 제시해줘.

즐겨찾기 저장·해제 결과 피드백을 설계해줘.

저장 성공은 “즐겨찾기에 저장했어요” Toast로 4초간 표시하고 액션은 넣지 마. 해제는 되돌릴 수 있으므로 “즐겨찾기에서 삭제했어요” Snackbar와 “실행 취소” 버튼을 제공해줘. 네트워크 실패는 자동으로 사라지는 Toast 대신 목록 상단 inline Banner “변경사항을 저장하지 못했어요”와 “다시 시도” 액션을 사용해줘.

모바일에서는 bottom navigation과 safe area 위에, 데스크톱에서는 우측 하단에 배치해줘. 중복 메시지는 합치고 focus 또는 hover 중에는 자동 닫힘을 멈춰줘. 스크린 리더가 메시지를 한 번만 알리도록 live region 우선순위를 구분해줘.

[기능명]의 UI/UX를 설계하고 실제 동작까지 구현해줘.

Context · User: [사용자/기기/사용 상황]
Goal · Success: [사용자 목표/완료 상태]
Flow · IA: [진입 → 핵심 행동 → 완료·취소 후 이동]
Pattern · Modality: [패턴], [modal/non-modal], [선택 근거]
Content · Data: [실제 제목·설명·필드·목록·데이터 우선순위]
Actions · States: [primary/secondary/destructive], default·loading·empty·error·success·disabled
Responsive: [mobile/tablet/desktop의 container·grid·순서·sticky·숨김 규칙]
Visual Tokens: [palette/type scale/spacing/radius/elevation/density/icon style]
A11y · Motion: semantic HTML, keyboard, focus, accessible name, contrast, target, reduced motion
Constraints · Acceptance: [기술/브랜드 제약], [하지 않을 것], 검수 가능한 완료 조건

진행 순서:
1) 사용자 흐름과 패턴 선택 근거
2) 화면 anatomy와 content hierarchy
3) desktop/mobile 상태별 설계
4) 구현
5) 접근성·반응형·edge case 자체 검수

실제 서비스용 한국어 문구와 현실적인 데이터를 사용하고, 핵심 결정은 주석 또는 짧은 설명으로 남겨줘.

한국 여행지 탐색 서비스의 “장소 필터” UI/UX를 설계하고 실제 동작까지 구현해줘.

사용자는 모바일에서 현재 위치 주변 장소를 빠르게 좁히려는 여행자다. 목록 상단 필터 버튼으로 진입하고 카테고리·거리·영업 중·평점을 고른 뒤 결과 목록으로 돌아오는 것이 목표다.

모바일에서는 full-height modal bottom sheet, 768px 이상에서는 오른쪽 400px temporary side sheet를 사용해줘. 상단은 제목과 초기화, 본문은 scrollable filter groups, 하단은 “24개 장소 보기” sticky CTA다. 적용 전 임시 값과 적용된 값을 분리하고 Cancel 시 원래 값으로 복구해줘.

default·selected·disabled·loading·0건·API error 상태를 포함해줘. 360px에서 가로 스크롤이 없어야 하고 virtual keyboard와 safe area가 CTA를 가리지 않아야 한다. semantic dialog, focus trap/restore, Escape, visible focus, accessible labels, reduced motion을 지원해줘.

밝은 neutral surface, blue primary, 8px spacing base, radius 16px, compact하지 않은 comfortable density를 사용해줘. 필터 적용·초기화·실패·모바일/데스크톱 전환을 검수 가능한 acceptance checklist로 마무리해줘.

현재 [파일/컴포넌트]의 UI/UX 구현을 먼저 진단한 뒤 필요한 부분만 수정해줘.

다음 항목을 검사해줘:
- HTML 구조와 component anatomy, 잘못 중첩되거나 중복된 요소
- desktop/mobile에서 overflow, reflow, safe area, keyboard 가림
- default·hover·focus·selected·disabled·loading·empty·error·success 상태
- modal/drawer/popover의 scroll lock, outside press, Escape, focus trap/restore, layering
- semantic HTML, label과 accessible name, focus order/visible, live region, reduced motion
- 색 대비, hit target, 긴 텍스트, 다국어, 이미지 없음과 느린 네트워크
- 불필요한 JS/CSS, layout shift, 과도한 이미지·animation 비용

먼저 심각도 P0/P1/P2로 문제와 사용자 영향을 표로 정리하고, 수정 범위를 설명한 뒤 구현해줘. 기존 디자인 토큰과 사용자 데이터를 보존하고, 수정 후 각 항목의 검증 결과를 알려줘.