docs: 모바일 UI/UX 개선 및 Gemini 타임아웃 해결 내용 추가
- 모바일 UI 최적화 (푸터 제거, 헤더 축소, 터치 영역 개선) - 스킬/아이템 슬라이드 패널 구현 - Gemini 타임아웃 15초→60초 증가 - 브라우저 제스처 충돌 방지 설계
This commit is contained in:
parent
ec9b06bf72
commit
21618f6a53
@ -203,5 +203,99 @@ const ROBING_API_URL = import.meta.env.VITE_ROBING_API_URL || 'https://ro-being.
|
|||||||
- 서비스 추상화의 장점
|
- 서비스 추상화의 장점
|
||||||
- 백업 AI 서비스 준비의 중요성
|
- 백업 AI 서비스 준비의 중요성
|
||||||
|
|
||||||
|
## 오후 2시 30분
|
||||||
|
|
||||||
|
### 모바일 UI/UX 대폭 개선
|
||||||
|
|
||||||
|
**문제점들**:
|
||||||
|
1. 모바일에서 푸터와 헤더가 화면 공간 차지
|
||||||
|
2. 헤더의 텍스트와 버튼이 너무 커서 줄바꿈 발생
|
||||||
|
3. 전체 화면 터치로 헤더가 나타나 채팅 중 방해
|
||||||
|
4. 채팅창 여백이 너무 큼
|
||||||
|
|
||||||
|
**해결 과정**:
|
||||||
|
|
||||||
|
1. **푸터 완전 제거**:
|
||||||
|
- 모바일에서는 푸터 표시하지 않음
|
||||||
|
- 불필요한 하단 패딩(pb-10) 제거
|
||||||
|
|
||||||
|
2. **헤더 터치 영역 제한**:
|
||||||
|
- 전체 화면 터치 → 상단 10% 영역만
|
||||||
|
- 채팅 중 실수로 헤더 나타나지 않음
|
||||||
|
|
||||||
|
3. **모바일 헤더 디자인 최적화**:
|
||||||
|
```css
|
||||||
|
/* 텍스트 크기 축소 */
|
||||||
|
text-lg → text-sm, text-sm → text-xs
|
||||||
|
/* 버튼/아이콘 크기 축소 */
|
||||||
|
p-2 → p-1.5, w-5 h-5 → w-4 h-4
|
||||||
|
/* 뱃지 크기 최적화 */
|
||||||
|
px-2 py-1 → px-1.5 py-0.5
|
||||||
|
```
|
||||||
|
|
||||||
|
4. **UI 힌트 개선**:
|
||||||
|
- 중앙의 큰 "화면을 터치하여..." → 우측 상단 작은 "메뉴" 버튼
|
||||||
|
- 5초 후 자동으로 사라짐
|
||||||
|
- 한 번 터치하면 다시 표시 안 됨
|
||||||
|
|
||||||
|
5. **채팅창 여백 축소**:
|
||||||
|
- p-4(16px) → p-2(8px)
|
||||||
|
- 모바일 화면 활용도 극대화
|
||||||
|
|
||||||
|
## 오후 3시 00분
|
||||||
|
|
||||||
|
### 모바일 스킬/아이템 패널 구현
|
||||||
|
|
||||||
|
**요구사항**:
|
||||||
|
- 모바일에서 스킬과 아이템 확인 필요
|
||||||
|
- 브라우저 스와이프 제스처와 충돌 방지
|
||||||
|
|
||||||
|
**구현 내용**:
|
||||||
|
1. **오른쪽 탭 버튼**:
|
||||||
|
- 화면 오른쪽 중앙에 세로형 "스킬" 탭
|
||||||
|
- Sparkles 아이콘과 함께 표시
|
||||||
|
- `writing-vertical` CSS로 세로 텍스트
|
||||||
|
|
||||||
|
2. **슬라이드 패널**:
|
||||||
|
- 클릭 시 오른쪽에서 80% 너비로 슬라이드인
|
||||||
|
- 배경 오버레이로 나머지 영역 어둡게
|
||||||
|
- X 버튼 또는 배경 클릭으로 닫기
|
||||||
|
|
||||||
|
3. **브라우저 제스처 안전**:
|
||||||
|
- 스와이프 대신 클릭 방식 채택
|
||||||
|
- 모바일 브라우저 기본 동작과 충돌 없음
|
||||||
|
|
||||||
|
## 오후 3시 15분
|
||||||
|
|
||||||
|
### Gemini 타임아웃 문제 해결
|
||||||
|
|
||||||
|
**문제**:
|
||||||
|
- 15초 타임아웃으로 복잡한 질문 처리 실패
|
||||||
|
- "Gemini CLI timeout after 15 seconds" 오류
|
||||||
|
|
||||||
|
**해결**:
|
||||||
|
```python
|
||||||
|
# app/services/gemini_service.py
|
||||||
|
self.cli_timeout = 15 # 변경 전
|
||||||
|
self.cli_timeout = 60 # 변경 후
|
||||||
|
```
|
||||||
|
|
||||||
|
**개선 효과**:
|
||||||
|
- 복잡한 코드 분석 가능
|
||||||
|
- 이미지 처리 시간 확보
|
||||||
|
- 긴 대화 컨텍스트 처리
|
||||||
|
|
||||||
|
## 최종 결과
|
||||||
|
|
||||||
|
### 모바일 UX 개선 요약
|
||||||
|
1. **공간 효율성**: 푸터 제거, 여백 축소로 채팅 공간 확대
|
||||||
|
2. **조작 편의성**: 상단 10% 터치로 헤더, 오른쪽 탭으로 스킬
|
||||||
|
3. **시각적 개선**: 컴팩트한 UI 요소로 한 화면에 더 많은 정보
|
||||||
|
4. **안정성**: 브라우저 제스처와 충돌 없는 인터랙션
|
||||||
|
|
||||||
|
### 성능 개선
|
||||||
|
- Gemini 응답 시간 제한 4배 증가 (15초 → 60초)
|
||||||
|
- 복잡한 요청도 안정적 처리
|
||||||
|
|
||||||
---
|
---
|
||||||
**작성 완료**: 2025-07-30 13:22
|
**작성 완료**: 2025-07-30 15:18
|
||||||
Loading…
x
Reference in New Issue
Block a user