From 5ac5cce0fef02490079080fdb59ce3b8e02ab8d9 Mon Sep 17 00:00:00 2001 From: gahusb Date: Thu, 23 Apr 2026 14:10:28 +0900 Subject: [PATCH] =?UTF-8?q?docs:=20=EB=B0=98=EC=9D=91=ED=98=95=20=EC=9B=B9?= =?UTF-8?q?=20UI/UX=20=EC=A0=84=EB=A9=B4=20=EA=B0=9C=EC=84=A0=20=EC=84=A4?= =?UTF-8?q?=EA=B3=84=20=EB=AC=B8=EC=84=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 13개 페이지 모바일 대응 + 공통 모바일 인프라 설계. 바텀 네비, 풀다운 리프레시, 스와이프, FAB, 바텀시트 포함. Co-Authored-By: Claude Opus 4.6 --- .../specs/2026-04-23-responsive-web-design.md | 293 ++++++++++++++++++ 1 file changed, 293 insertions(+) create mode 100644 docs/superpowers/specs/2026-04-23-responsive-web-design.md diff --git a/docs/superpowers/specs/2026-04-23-responsive-web-design.md b/docs/superpowers/specs/2026-04-23-responsive-web-design.md new file mode 100644 index 0000000..489c330 --- /dev/null +++ b/docs/superpowers/specs/2026-04-23-responsive-web-design.md @@ -0,0 +1,293 @@ +# 반응형 웹 UI/UX 전면 개선 설계 + +> 모바일에서 UI 짤림 현상 해결 + 풀 모바일 경험 적용 +> 작성일: 2026-04-23 + +--- + +## 1. 목표 + +- 모든 페이지(13개)에서 모바일 UI 짤림 현상 해결 +- 현재 다크 네온 사이버펑크 디자인 톤 유지 +- 모바일 전용 UX 패턴 추가 (바텀 네비게이션, 스와이프, 풀다운 리프레시, FAB, 바텀시트) +- 기능적 손실 없이 반응형 적용 + +--- + +## 2. 접근 방식 + +**글로벌 모바일 시스템 구축 → 주요 페이지 적용 → 전체 페이지 확장** + +1. 공통 모바일 인프라(컴포넌트, breakpoint, 앱 셸) 구축 +2. 주요 4개 페이지 (홈, 로또, 주식, 여행) 우선 적용 +3. 나머지 9개 페이지 확장 적용 + +--- + +## 3. 글로벌 모바일 인프라 + +### 3-1. Breakpoint 시스템 통일 + +현재 53개 미디어 쿼리에서 다양한 값이 혼재. 4단계로 통일: + +| 이름 | 값 | 용도 | +|------|-----|------| +| sm | 480px | 소형 폰 | +| md | 768px | 태블릿/대형 폰 (주요 분기점) | +| lg | 1024px | 소형 데스크톱 | +| xl | 1280px | 대형 데스크톱 | + +기존 미디어 쿼리의 비표준 값(640px, 900px, 960px, 1100px 등)은 기능 손실 없이 가장 가까운 표준 breakpoint로 정리한다. 단, 특정 페이지에서 세밀한 조정이 반드시 필요한 경우 예외를 허용한다. + +### 3-2. 바텀 네비게이션 바 (`BottomNav`) + +- 768px 이하에서 사이드바 대신 표시 +- 주요 5개 메뉴 아이콘 + "더보기" 메뉴 (나머지 페이지) +- 현재 페이지 활성 표시 — 네온 시안 글로우 유지 +- 사이드바는 모바일에서 완전히 숨김 (기존 햄버거→슬라이드 방식 제거) +- 높이: 56~64px +- `env(safe-area-inset-bottom)` 대응 (노치/홈 인디케이터 기기) +- 더보기 메뉴: 탭 시 위로 펼쳐지는 오버레이 패널 + +**기본 5개 메뉴 구성:** + +| 순서 | 아이콘 | 라벨 | 경로 | +|------|--------|------|------| +| 1 | 홈 | 홈 | `/` | +| 2 | 클로버 | 로또 | `/lotto` | +| 3 | 차트 | 주식 | `/stock` | +| 4 | 카메라 | 여행 | `/travel` | +| 5 | 더보기 | 메뉴 | 오버레이 | + +### 3-3. 공통 모바일 컴포넌트 + +| 컴포넌트 | 파일 | 역할 | +|---------|------|------| +| `BottomNav` | `src/components/BottomNav.jsx` | 하단 고정 네비게이션 | +| `PullToRefresh` | `src/components/PullToRefresh.jsx` | 터치 풀다운 새로고침 래퍼 | +| `SwipeableView` | `src/components/SwipeableView.jsx` | 좌우 스와이프 탭/뷰 전환 | +| `FAB` | `src/components/FAB.jsx` | 플로팅 액션 버튼 (바텀 네비 위 배치) | +| `MobileSheet` | `src/components/MobileSheet.jsx` | 바텀시트 모달 (드래그 핸들, 스냅 포인트) | + +**공통 훅:** + +| 훅 | 파일 | 역할 | +|----|------|------| +| `useIsMobile` | `src/hooks/useIsMobile.js` | 768px 이하 감지 (matchMedia) | +| `useSwipe` | `src/hooks/useSwipe.js` | 터치 스와이프 방향·거리 감지 | + +### 3-4. 앱 셸 레이아웃 변경 + +``` +데스크톱: [사이드바 240px] [콘텐츠] +모바일: [탑바 56px] + [콘텐츠 (padding-bottom: 바텀네비 높이)] + [바텀 네비 56-64px] +``` + +- 콘텐츠 영역에 `padding-bottom` 추가 (바텀 네비 겹침 방지) +- 탑바: 현재 구조 유지, 페이지 타이틀 + 액션 버튼 영역 +- `body` overflow: 모바일에서 auto (현재와 동일) + +--- + +## 4. 주요 페이지별 모바일 설계 + +### 4-1. 홈 (Home) — `/` + +| 영역 | 데스크톱 | 모바일 (≤768px) | +|------|---------|-----------------| +| 히어로 | 2컬럼 그리드 | 1컬럼 스택, 타이틀 축소 | +| 네비 카드 그리드 | auto-fill minmax(180px) | 2컬럼 고정, 카드 높이 축소 | +| TODO 보드 | 3컬럼 칸반 | 스와이프 탭 (Todo/진행중/완료) | +| 블로그 포스트 | 카드 그리드 | 1컬럼 리스트 | +| 프로필 섹션 | 사이드 카드 | 하단 접이식 패널 | + +- 풀다운 리프레시: 블로그 포스트 갱신 +- FAB: 없음 (네비게이션 허브) + +### 4-2. 로또 (Lotto) — `/lotto` + +| 영역 | 데스크톱 | 모바일 | +|------|---------|--------| +| 3탭 구조 | 상단 탭바 | 스와이프 탭 전환 | +| 브리핑 탭 | 카드 레이아웃 | 1컬럼, 볼 크기 36→32px | +| 분석 탭 | 그리드 카드 | 1컬럼 스택 | +| 구매 이력 테이블 | 6컬럼 그리드 | 가로 스크롤 테이블 + 행 터치 바텀시트 | +| 번호 추천 카드 | 다중 그리드 | 1컬럼, 볼 간격 조정 | +| 전략 차트 | 넓은 차트 | 가로스크롤 또는 축소 | + +- FAB: "추천받기" (빠른 번호 추천) +- 풀다운 리프레시: 브리핑/분석 데이터 갱신 + +### 4-3. 주식 (Stock / StockTrade) — `/stock`, `/stock/trade` + +**Stock (뉴스/지표)** + +| 영역 | 데스크톱 | 모바일 | +|------|---------|--------| +| 헤더 | 2컬럼 | 1컬럼 스택 | +| 뉴스 그리드 | auto-fit minmax(260px) | 1컬럼 카드 리스트 | +| 필터 | 가로 나열 | 가로 스크롤 칩 바 | +| 지표 카드 | 그리드 | 가로 스크롤 카드 캐러셀 | + +**StockTrade (매매)** + +| 영역 | 데스크톱 | 모바일 | +|------|---------|--------| +| 포트폴리오 테이블 | 넓은 테이블 | 카드형 리스트 (종목별 카드) | +| 매도 이력 | 테이블 | 가로 스크롤 + 행 터치 바텀시트 | +| 자산 차트 | 넓은 recharts | 풀 너비, 축 라벨 축소 | +| 예수금 섹션 | 인라인 | 접이식 카드 | + +- FAB: "종목 추가" (Stock), "매도 기록" (StockTrade) +- 풀다운 리프레시: 뉴스/포트폴리오 갱신 + +### 4-4. 여행 (Travel) — `/travel` + +| 영역 | 데스크톱 | 모바일 | +|------|---------|--------| +| 지역 선택 | Leaflet 지도 | 높이 50vh→35vh, 핀치 줌 | +| 사진 그리드 | 다중 컬럼 | 2컬럼 → 1컬럼 (≤480px) | +| 사진 상세 | 모달 | 풀스크린 뷰어 + 스와이프 넘기기 | +| 지역 필터 | 드롭다운 | 바텀시트 지역 선택 | + +- 풀다운 리프레시: 사진 목록 갱신 +- FAB: 없음 + +--- + +## 5. 나머지 페이지 모바일 설계 + +### 5-1. 블로그 (Blog) — `/blog` + +| 영역 | 모바일 변경 | +|------|------------| +| 글 목록 | 1컬럼 리스트형 | +| 글 상세 | 풀 너비, 폰트 크기 조정 | +| 태그 필터 | 가로 스크롤 칩 바 | +| 작성/수정 폼 | 풀 너비, 툴바 축소 | + +- FAB: "글 쓰기" +- 풀다운 리프레시: 글 목록 갱신 + +### 5-2. 블로그 마케팅 (BlogMarketing) — `/blog-marketing` + +| 영역 | 모바일 변경 | +|------|------------| +| 대시보드 지표 | 2컬럼 → 1컬럼 (≤480px) | +| 파이프라인 테이블 | 카드형 리스트 (상태 배지) | +| 키워드 분석 | 접이식 아코디언 | +| 수익 내역 | 가로 스크롤 테이블 | + +- FAB: "키워드 분석" +- 풀다운 리프레시: 대시보드 갱신 + +### 5-3. 부동산 청약 (Subscription) — `/realestate` + +| 영역 | 모바일 변경 | +|------|------------| +| 공고 목록 | 1컬럼 카드 리스트 | +| 필터 | 바텀시트 필터 패널 | +| 공고 상세 | 바텀시트 상세보기 | +| 매칭 결과 | 1컬럼, 점수 강조 | +| 대시보드 | 2컬럼 그리드 | + +- FAB: "공고 등록" +- 풀다운 리프레시: 공고/매칭 갱신 + +### 5-4. 관심 매물 (RealEstate) — `/realestate/property` + +| 영역 | 모바일 변경 | +|------|------------| +| 매물 목록 | 카드형 리스트 | +| 지도 뷰 | 높이 35vh, 핀치 줌 | + +### 5-5. 뮤직 스튜디오 (MusicStudio) — `/lab/music` + +| 영역 | 모바일 변경 | +|------|------------| +| 헤더 | 1컬럼, 타이틀 클램프 축소 | +| 생성 폼 | 풀 너비 스택 | +| 라이브러리 | 1컬럼 리스트 (앨범아트 + 제목) | +| 플레이어 | 미니 플레이어 바텀 고정 (바텀 네비 위) | +| 가사 에디터 | 풀 너비 | +| 레이더 위젯 | 중앙 정렬 | + +- FAB: "음악 생성" +- 풀다운 리프레시: 라이브러리 갱신 + +### 5-6. TODO — `/todo` + +| 영역 | 모바일 변경 | +|------|------------| +| 칸반 보드 | 스와이프 탭 (Todo/진행중/완료) | +| 할일 카드 | 스와이프로 상태 변경 | +| 입력 폼 | FAB → 바텀시트 입력 폼 | + +- FAB: "할일 추가" + +### 5-7. 에이전트 오피스 (AgentOffice) — `/lab/agent-office` + +| 영역 | 모바일 변경 | +|------|------------| +| 캔버스 오피스 | 풀스크린 캔버스, 핀치 줌/패닝 | +| 에이전트 패널 | 바텀시트 에이전트 상세 | +| 작업 로그 | 바텀시트 로그 뷰 | +| 명령 입력 | 하단 입력 바 (채팅 UX) | +| WebSocket 상태 | 탑바에 연결 상태 아이콘 | + +### 5-8. 이펙트 랩 — `/lab`, `/lab/day-calc`, `/lab/sword-stream` + +| 페이지 | 모바일 변경 | +|--------|------------| +| EffectLab 허브 | 카드 그리드 → 1컬럼 리스트 | +| DayCalc | 풀 너비 스택, 네이티브 날짜 피커 | +| SwordStream | 풀스크린 캔버스, 터치 인터랙션 유지, 오버레이 축소 | + +--- + +## 6. 터치 타겟 가이드라인 + +- 모든 터치 타겟: 최소 44×44px (Apple HIG 기준) +- 버튼 간 간격: 최소 8px +- FAB 크기: 56×56px +- 바텀 네비 아이템: 최소 48×48px 터치 영역 + +--- + +## 7. 성능 고려사항 + +- 모바일에서 글로우/그라디언트 효과: box-shadow 개수 줄이기 (3중→1중) +- `background-attachment: fixed` → 모바일에서 `scroll` (현재 적용됨, 유지) +- 이미지: `loading="lazy"` 속성 확인 +- 스와이프/터치 이벤트: passive listener 사용 +- 바텀시트 애니메이션: `transform` + `will-change` 사용 (layout thrashing 방지) + +--- + +## 8. 구현 순서 + +### Phase 1: 글로벌 인프라 +1. Breakpoint 시스템 통일 (index.css) +2. `useIsMobile`, `useSwipe` 훅 생성 +3. `BottomNav` 컴포넌트 구현 +4. `PullToRefresh`, `SwipeableView`, `FAB`, `MobileSheet` 컴포넌트 구현 +5. 앱 셸 레이아웃 수정 (App.jsx, App.css) + +### Phase 2: 주요 페이지 적용 +6. 홈 페이지 반응형 개선 +7. 로또 페이지 반응형 개선 +8. 주식 페이지 (Stock + StockTrade) 반응형 개선 +9. 여행 페이지 반응형 개선 + +### Phase 3: 나머지 페이지 확장 +10. 블로그 + 블로그 마케팅 +11. 부동산 (Subscription + RealEstate) +12. 뮤직 스튜디오 +13. TODO +14. 에이전트 오피스 +15. 이펙트 랩 (EffectLab + DayCalc + SwordStream) + +### Phase 4: 검증 +16. 전체 페이지 모바일 UI 검증 및 수정