1톤트럭 고물상 모바일웹앱 정보설계 -＞ 로우파이스케치 -＞ 와이어프레임 만들어줘?

1톤 트럭 고물상 모바일웹앱의 정보설계 → 로우파이스케치 → 와이어프레임을 전체적으로 만들어드리겠습니다.<hr data-ke-style="style1">🏗️ 1. 정보설계 (Information Architecture)전체 구조도text우리동네 고물상 모바일웹앱 ├── 👤 고객용 플로우 │ ├── 🏠 메인 홈 │ ├── 📍 수거 요청 플로우 │ │ ├── 1. 위치 선택 │ │ ├── 2. 품목 선택 │ │ └── 3. 요청 확인 │ ├── 📋 요청 관리 │ │ ├── 대기중 요청 │ │ ├── 진행중 요청 │ │ └── 완료된 요청 │ ├── 💰 시세 정보 │ └── 👤 마이페이지 │ ├── 프로필 │ ├── 결제 수단 │ └── 설정 │ └── 🚛 사장님용 플로우 ├── 🔐 로그인 ├── 📊 대시보드 ├── 📋 요청 관리 │ ├── 새 요청 │ ├── 수락한 요청 │ └── 완료된 요청 ├── 💰 매출 관리 │ ├── 수익 현황 │ ├── 정산 내역 │ └── 통계 분석 ├── 👥 고객 관리 └── ⚙️ 설정네비게이션 구조pythonnavigation_structure = { "고객_하단탭": [ {"icon": "🏠", "label": "홈", "route": "/"}, {"icon": "📋", "label": "내요청", "route": "/requests"}, {"icon": "💰", "label": "시세", "route": "/pricing"}, {"icon": "👤", "label": "마이페이지", "route": "/profile"} ], "사장님_하단탭": [ {"icon": "📊", "label": "대시보드", "route": "/admin"}, {"icon": "📋", "label": "요청", "route": "/admin/requests"}, {"icon": "💰", "label": "매출", "route": "/admin/earnings"}, {"icon": "👥", "label": "고객", "route": "/admin/customers"}, {"icon": "⚙️", "label": "설정", "route": "/admin/settings"} ] }<hr data-ke-style="style1">✏️ 2. 로우파이 스케치고객용 주요 화면 스케치메인 홈text┌─────────────────────────────┐ │ [검색] 우리동네고물상 [알림]│ ├─────────────────────────────┤ │ │ │ 안녕하세요! │ │ 🎯 서울 강남구 역삼동 │ │ │ │ [큰 버튼: 수거요청하기] │ │ │ │ 인기 품목 │ │ [📦] [⚙️] [🔌] [🛋️] │ │ 폐지 고철 가전 가구 │ │ │ │ 최근 수거내역 │ │ ▢ 폐지 3박스 · 15,000원 │ │ ▢ 고철 5kg · 25,000원 │ │ │ └─────────────────────────────┘ [홈][요청][시세][마이페이지]수거 요청 - 위치선택text┌─────────────────────────────┐ │ ← 수거요청 (1/3) ●○○│ ├─────────────────────────────┤ │ │ │ 📍 수거 위치 선택 │ │ │ │ [🎯 현재위치사용] │ │ 서울 강남구 역삼동 123-4 │ │ │ │ [🏠 주소직접입력] │ │ │ │ 최근 사용 주소 │ │ ▢ 역삼동 456-7 아파트 │ │ ▢ 삼성동 789-1 빌라 │ │ │ │ [다음] │ │ │ └─────────────────────────────┘수거 요청 - 품목선택text┌─────────────────────────────┐ │ ← 품목선택 (2/3) ○●○│ ├─────────────────────────────┤ │ │ │ 📦 수거 품목 선택 │ │ │ │ [●] 📰 폐지 │ │ [○] ⚙️ 고철 │ │ [○] 🔌 가전 │ │ [○] 🛋️ 가구 │ │ [○] 📦 기타 │ │ │ │ 선택한 품목 │ │ ▢ 폐지: [3] 박스 │ │ │ │ [📸 사진으로 등록] │ │ │ │ [다음] │ │ │ └─────────────────────────────┘<hr data-ke-style="style1">🎨 3. 와이어프레임 (실제 HTML/CSS 구현)html<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>우리동네 고물상</title> <style> /* === 디자인 시스템 === */ :root { --primary: #4CAF50; --primary-dark: #388E3C; --primary-light: #C8E6C9; --secondary: #2196F3; --background: #F8F9FA; --surface: #FFFFFF; --text-primary: #212121; --text-secondary: #757575; --border: #E0E0E0; --shadow: 0 2px 8px rgba(0,0,0,0.1); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Apple SD Gothic Neo', sans-serif; } body { background: var(--background); color: var(--text-primary); max-width: 390px; margin: 0 auto; min-height: 100vh; } /* 공통 컴포넌트 */ .container { padding: 0 20px; padding-bottom: 80px; } .header { background: var(--surface); padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; } .bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; background: var(--surface); display: flex; justify-content: space-around; padding: 12px 0; border-top: 1px solid var(--border); } .nav-item { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; color: var(--text-secondary); } .nav-item.active { color: var(--primary); } .btn-primary { background: var(--primary); color: white; border: none; padding: 16px 24px; border-radius: 12px; font-size: 16px; font-weight: 600; width: 100%; cursor: pointer; } .btn-secondary { background: var(--surface); color: var(--text-primary); border: 1px solid var(--border); padding: 16px 24px; border-radius: 12px; font-size: 16px; width: 100%; cursor: pointer; } .card { background: var(--surface); border-radius: 12px; padding: 20px; margin-bottom: 16px; box-shadow: var(--shadow); } .progress-bar { display: flex; justify-content: center; gap: 8px; margin: 20px 0; } .progress-step { width: 8px; height: 8px; border-radius: 50%; background: var(--border); } .progress-step.active { background: var(--primary); width: 24px; border-radius: 4px; } /* 고객용 메인 페이지 */ .welcome-section { text-align: center; margin: 24px 0; } .location-badge { background: var(--primary-light); color: var(--primary-dark); padding: 8px 16px; border-radius: 20px; display: inline-block; margin-top: 8px; font-size: 14px; } .category-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 24px 0; } .category-item { text-align: center; padding: 16px 8px; background: var(--surface); border-radius: 12px; cursor: pointer; } .category-icon { font-size: 24px; margin-bottom: 8px; } /* 수거 요청 페이지 */ .option-card { background: var(--surface); border: 2px solid var(--border); border-radius: 12px; padding: 20px; margin-bottom: 12px; cursor: pointer; } .option-card.selected { border-color: var(--primary); background: var(--primary-light); } .item-selector { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 20px 0; } .item-option { aspect-ratio: 1; background: var(--surface); border: 2px solid var(--border); border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; } .item-option.selected { border-color: var(--primary); background: var(--primary-light); } </style> </head> <body>  <div id="customerHome" class="screen"> <div class="header"> <h1>우리동네 고물상</h1> <div style="display: flex; gap: 16px;"> <span>🔔</span> <span>≡</span> </div> </div> <div class="container"> <div class="welcome-section"> <h2>안녕하세요!</h2> <div class="location-badge"> 🎯 서울 강남구 역삼동 </div> </div> <button class="btn-primary" xxonclick="showScreen('requestLocation')"> 🚀 빠른 수거 요청하기 </button> <div style="margin: 32px 0;"> <h3 style="margin-bottom: 16px;">📦 인기 품목</h3> <div class="category-grid"> <div class="category-item"> <div class="category-icon">📰</div> <div>폐지</div> </div> <div class="category-item"> <div class="category-icon">⚙️</div> <div>고철</div> </div> <div class="category-item"> <div class="category-icon">🔌</div> <div>가전</div> </div> <div class="category-item"> <div class="category-icon">🛋️</div> <div>가구</div> </div> </div> </div> <div class="card"> <h3 style="margin-bottom: 16px;">📋 최근 수거 내역</h3> <div style="display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--border);"> <div> <div>폐지 3박스</div> <div style="font-size: 12px; color: var(--text-secondary);">12월 25일</div> </div> <div style="font-weight: bold; color: var(--primary);">15,000원</div> </div> <div style="display: flex; justify-content: space-between; padding: 12px 0;"> <div> <div>고철 5kg</div> <div style="font-size: 12px; color: var(--text-secondary);">12월 20일</div> </div> <div style="font-weight: bold; color: var(--primary);">25,000원</div> </div> </div> </div> <div class="bottom-nav"> <div class="nav-item active"> <span>🏠</span> <span>홈</span> </div> <div class="nav-item"> <span>📋</span> <span>내요청</span> </div> <div class="nav-item"> <span>💰</span> <span>시세</span> </div> <div class="nav-item"> <span>👤</span> <span>마이페이지</span> </div> </div> </div>  <div id="requestLocation" class="screen" style="display: none;"> <div class="header"> <span xxonclick="showScreen('customerHome')">←</span> <h3>수거 요청</h3> <span>(1/3)</span> </div> <div class="container"> <div class="progress-bar"> <div class="progress-step active"></div> <div class="progress-step"></div> <div class="progress-step"></div> </div> <h2 style="margin-bottom: 24px;">📍 수거 희망 위치를 알려주세요</h2> <div class="option-card selected"> <div style="font-weight: bold; margin-bottom: 8px;">🎯 현재 위치 사용</div> <div style="font-size: 14px; color: var(--text-secondary);">서울 강남구 역삼동 123-4</div> </div> <div class="option-card"> <div style="font-weight: bold; margin-bottom: 8px;">🏠 주소 직접 입력</div> <div style="font-size: 14px; color: var(--text-secondary);">도로명, 지번, 건물명</div> </div> <div style="margin: 24px 0;"> <h4 style="margin-bottom: 12px;">🕒 최근 사용 주소</h4> <div class="option-card"> <div style="font-weight: bold;">역삼동 456-7 아파트</div> </div> <div class="option-card"> <div style="font-weight: bold;">삼성동 789-1 빌라</div> </div> </div> <button class="btn-primary" xxonclick="showScreen('requestItems')"> 다음 → </button> </div> </div>  <div id="requestItems" class="screen" style="display: none;"> <div class="header"> <span xxonclick="showScreen('requestLocation')">←</span> <h3>품목 선택</h3> <span>(2/3)</span> </div> <div class="container"> <div class="progress-bar"> <div class="progress-step"></div> <div class="progress-step active"></div> <div class="progress-step"></div> </div> <h2 style="margin-bottom: 24px;">📦 수거할 품목을 선택해주세요</h2> <div class="item-selector"> <div class="item-option selected"> <div style="font-size: 24px; margin-bottom: 8px;">📰</div> <div>폐지</div> </div> <div class="item-option"> <div style="font-size: 24px; margin-bottom: 8px;">⚙️</div> <div>고철</div> </div> <div class="item-option"> <div style="font-size: 24px; margin-bottom: 8px;">🔌</div> <div>가전</div> </div> <div class="item-option"> <div style="font-size: 24px; margin-bottom: 8px;">🛋️</div> <div>가구</div> </div> <div class="item-option"> <div style="font-size: 24px; margin-bottom: 8px;">📦</div> <div>기타</div> </div> </div> <div class="card" style="margin: 20px 0;"> <h4 style="margin-bottom: 12px;">📊 선택한 품목</h4> <div style="display: flex; justify-content: space-between; align-items: center;"> <div>📰 폐지</div> <div style="display: flex; align-items: center; gap: 8px;"> <button style="padding: 4px 8px; border: 1px solid var(--border); border-radius: 4px;">-</button> <span>3 박스</span> <button style="padding: 4px 8px; border: 1px solid var(--border); border-radius: 4px;">+</button> </div> </div> </div> <button class="btn-secondary" style="margin-bottom: 12px;"> 📸 사진으로 간편 등록 </button> <button class="btn-primary" xxonclick="showScreen('requestConfirm‎')"> 다음 → </button> </div> </div>  <div id="requestConfirm‎" class="screen" style="display: none;"> <div class="header"> <span xxonclick="showScreen('requestItems')">←</span> <h3>요청 확인</h3> <span>(3/3)</span> </div> <div class="container"> <div class="progress-bar"> <div class="progress-step"></div> <div class="progress-step"></div> <div class="progress-step active"></div> </div> <h2 style="margin-bottom: 24px;">✅ 요청 내용 확인</h2> <div class="card"> <div style="display: flex; justify-content: space-between; margin-bottom: 12px;"> <div style="color: var(--text-secondary);">📍 위치</div> <div>역삼동 123-4</div> </div> <div style="display: flex; justify-content: space-between; margin-bottom: 12px;"> <div style="color: var(--text-secondary);">📦 품목</div> <div>폐지 3박스</div> </div> <div style="display: flex; justify-content: space-between; margin-bottom: 12px;"> <div style="color: var(--text-secondary);">💰 예상 금액</div> <div style="color: var(--primary); font-weight: bold;">15,000~20,000원</div> </div> <div style="display: flex; justify-content: space-between;"> <div style="color: var(--text-secondary);">⏱️ 소요 시간</div> <div>30분 내 방문</div> </div> </div> <div style="margin: 24px 0;"> <h4 style="margin-bottom: 12px;">💬 사장님께 전할 메시지 (선택)</h4> <textarea placeholder="2층에 거동 불편 어르신" style="width: 100%; padding: 16px; border: 1px solid var(--border); border-radius: 8px; resize: none; height: 80px;" ></textarea> </div> <button class="btn-primary" xxonclick="completeRequest()"> 🚀 수거 요청하기 </button> <div style="text-align: center; margin-top: 16px; color: var(--text-secondary); font-size: 14px;"> 요청 후 주변 사장님들이 견적을 보내드려요! </div> </div> </div> <script> // 화면 전환 함수 function showScreen(screenId) { // 모든 화면 숨기기 document.querySelectorAll('.screen').forEach(screen => { screen.style.display = 'none'; }); // 대상 화면 표시 document.getElementById(screenId).style.display = 'block'; } // 요청 완료 함수 function completeRequest() { alert('수거 요청이 완료되었습니다! 사장님들의 견적을 기다려주세요.'); showScreen('customerHome'); } // 초기 화면 설정 showScreen('customerHome'); </script> </body> </html><hr data-ke-style="style1">🎯 와이어프레임 핵심 특징디자인 시스템pythondesign_system = { "색상": { "Primary": "#4CAF50 (녹색)", "Background": "#F8F9FA (밝은 회색)", "Surface": "#FFFFFF (흰색)", "Text": "#212121 (진한 회색)" }, "타이포그래피": { "제목": "20px, Bold", "본문": "16px, Regular", "설명": "14px, Regular", "캡션": "12px, Regular" }, "레이아웃": { "마진": "20px 양측", "카드_Radius": "12px", "버튼_Height": "56px", "아이콘_Size": "24px" } }사용자 플로우text고객 플로우: 메인 → 위치선택 → 품목선택 → 확인 → 완료 사장님 플로우: 로그인 → 대시보드 → 요청관리 → 견적제안 → 완료처리반응형 고려사항pythonresponsive_elements = [ "모바일 퍼스트 디자인 (390px 기준)", "터치 영역 최소 44px", "가로모드 대응", "다양한 해상도 대응" ]이렇게 정보설계 → 로우파이스케치 → 와이어프레임까지 완성되었습니다. 이제 실제 개발을 시작하실 수 있습니다! 🚀