UI 개발 계획 생성기

지금까지의 대화를 바탕으로, 이 모바일 앱의 전체 UI 개발 계획을 제공하겠습니다. 각 화면, 레이아웃, 모든 UI 구성 요소를 설명하겠습니다. 스타일링은 언급하지 않겠습니다. **화면 1: 온보딩 화면** - 레이아웃: 세로 스크롤 가능한 단일 페이지. - UI 구성 요소: 환영 메시지 텍스트, 앱 로고 이미지, "시작하기" 버튼, "로그인" 텍스트 링크. **화면 2: 로그인 화면** - 레이아웃: 중앙 정렬된 세로 스택. - UI 구성 요소: 이메일 입력 필드, 비밀번호 입력 필드, "로그인" 버튼, "비밀번호 찾기" 텍스트 링크, "회원가입" 텍스트 링크. **화면 3: 회원가입 화면** - 레이아웃: 세로 스크롤 가능한 폼. - UI 구성 요소: 이름 입력 필드, 이메일 입력 필드, 비밀번호 입력 필드, 비밀번호 확인 입력 필드, "가입하기" 버튼. **화면 4: 메인 대시보드** - 레이아웃: 하단 탭 바가 있는 세로 스크롤 뷰. - UI 구성 요소: 상단 헤더(프로필 아바타, 알림 아이콘), 통계 카드(예: 총 매출, 신규 주문), 최근 활동 목록, 하단 탭 바(홈, 검색, 추가, 알림, 프로필). **화면 5: 검색 화면** - 레이아웃: 상단 검색 바와 결과 목록. - UI 구성 요소: 검색 입력 필드, 필터 버튼, 결과 목록(각 항목에 이미지, 제목, 가격 표시). **화면 6: 상세 화면** - 레이아웃: 세로 스크롤 뷰. - UI 구성 요소: 큰 이미지 갤러리(가로 스와이프 가능), 제목 텍스트, 설명 텍스트, 가격 텍스트, 수량 선택기, "장바구니에 추가" 버튼, "즐겨찾기" 아이콘. **화면 7: 장바구니 화면** - 레이아웃: 세로 스크롤 가능한 목록. - UI 구성 요소: 각 항목에 체크박스, 이미지, 제목, 가격, 수량 조절 버튼, 삭제 버튼, 하단에 합계 금액, "결제하기" 버튼. **화면 8: 결제 화면** - 레이아웃: 세로 스크롤 가능한 폼. - UI 구성 요소: 배송 주소 입력 필드, 결제 방법 선택 라디오 버튼(카드, 페이팔 등), 카드 번호 입력 필드, 만료일 입력 필드, CVV 입력 필드, "결제 완료" 버튼. **화면 9: 알림 화면** - 레이아웃: 세로 스크롤 가능한 목록. - UI 구성 요소: 각 알림 항목에 아이콘, 제목, 시간, 읽음/안읽음 상태 표시. **화면 10: 프로필 화면** - 레이아웃: 세로 스크롤 뷰. - UI 구성 요소: 프로필 이미지, 이름 텍스트, 이메일 텍스트, 설정 목록(계정 정보, 주소, 결제 수단, 알림 설정, 로그아웃). **공통 UI 구성 요소:** - 모든 화면에 로딩 인디케이터(스피너 또는 프로그레스 바). - 오류 메시지 표시용 토스트 알림. - 빈 상태 표시용 이미지와 텍스트(예: 장바구니가 비어 있을 때). - 네트워크 연결 상태 표시용 배너. **내비게이션 구조:** - 하단 탭 바를 통한 주요 화면 간 전환. - 상세 화면, 결제 화면 등은 스택 기반 푸시 내비게이션. - 온보딩, 로그인, 회원가입은 모달 또는 전체 화면 전환. 이 계획은 앱의 모든 주요 기능을 포괄하며, 각 화면의 레이아웃과 UI 구성 요소를 명확히 정의합니다.