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*