brain_dogfood/docs/v2_mobile_roadmap.md

📱 v2.0 모바일 최적화 로드맵 (Roadmap)

본 문서는 뇌사료 프로젝트 v2.0에서 다룰 모바일 해상도 지원 및 UX 최적화 범위에 대한 정밀 분석 내역을 담고 있습니다.

1. 레이아웃 및 응답성 (Responsive Layout)

1.1 오프캔버스 사이드바 (Off-canvas Sidebar)

• 현황: 사이드바가 가로 공간을 상시 점유하여 모바일에서 가독성 저해.
• v2.0 목표: 768px 이하에서 사이드바를 기본적으로 숨기고, 상단 햄버거 메뉴 버튼 클릭 시 왼쪽에서 슬라이드되는 드로어(Drawer) 방식으로 전환.
• 기술적 구현: transform: translateX(-100%) 및 z-index를 활용한 오버레이 처리.

1.2 가변형 메모 그리드 (Fluid Masonry Grid)

• 현황: 열 개수가 고정되거나 모바일에서 너무 좁게 보임.
• v2.0 목표: 모바일 해상도에서 메모 카드를 1열(100%)로 강제하여 텍스트 가독성 극대화. 패딩 값을 3rem에서 1rem으로 축소.

---

2. 입력 및 작성 경험 (Composer UX)

2.1 인터페이스 수직 스태킹 (Vertical Stacking)

• 현황: 제목, 그룹, 태그 입력창이 가로로 배치되어 모바일에서 잘림.
• v2.0 목표: flex-direction: column을 적용하여 제목 -> 메타 정보(그룹/태그) -> 에디터 순서로 자연스럽게 흐르도록 재배치.

2.2 모바일 에디터 최적화

• v2.0 목표: Toast UI 에디터의 불필요한 툴바를 숨기고, 모바일 자판이 올라와도 입력 영역이 충분히 확보되도록 높이 자동 조절 기능 추가.

---

3. 터치 및 제스처 (Touch & Gestures)

3.1 터치 타겟(Touch Target) 확장

• 목표: 모든 버튼 및 상호작용 요소의 크기를 최소 44x44px 이상으로 확보하여 오클릭 방지.
• 세부 사항: 삭제, 수정, 암호화 토글 버튼의 여백 조정.

3.2 제스처 지원

• 목표: 화면 왼쪽 가장자리를 스와이프하여 사이드바를 여는 제스처 로직 검토.

---

4. 기술적 체크리스트 (Technical Checklist)

• @media (max-width: 768px) 기준점 확립.
• 터치 이벤트(touchstart, touchend) 처리 최적화.
• safe-area-inset-bottom 등 최신 모바일 기기의 노치 및 하단 바 대응.
• 모바일 데이터 환경을 고려한 이미지 지연 로딩(Lazy Loading) 적용.
• 모달 창의 width: 100%; height: 100%; 전체 화면 모드 지원.

---

Generated for Brain Dogfood v2.0 Development