디자인 시스템 및 UI 가이드 (DESIGN.md)

이 문서는 Antigravity를 활용하여 프로그램을 개발할 때 지켜야 할 웹(Web) 과 앱(App) 환경별 핵심 디자인 시스템 원칙과 UI 규칙을 안내합니다.

1. 🌐 웹 프론트엔드/백엔드 디자인 가이드

웹 환경은 데스크톱의 넓은 화면부터 모바일의 좁은 화면까지 다양한 해상도에 유연하게 대처해야 하며, 마우스 호버 등 다채로운 인터랙션이 특징입니다.

1.1 웹 레이아웃 및 그리드 시스템

반응형 그리드: 데스크톱은 12컬럼, 태블릿은 8컬럼, 모바일은 4컬럼 그리드를 기본으로 사용합니다.
최대 너비(Max-width): 대형 모니터에서의 가독성을 위해 컨텐츠 영역의 최대 너비를 보통 1200px ~ 1440px로 제한하고 중앙 정렬합니다.
여백(Spacing): 8px 배수 시스템을 사용하여 마진과 패딩의 통일감을 유지합니다.

1.2 웹 특화 인터랙션

마우스 호버(Hover): 버튼이나 카드 UI에 마우스를 올렸을 때 부드러운 스케일 업(transform: scale(1.02)) 또는 그림자 효과 트랜지션(0.2s ease-in-out)을 필수적으로 부여합니다.
글래스모피즘(Glassmorphism): 네비게이션 바(GNB)나 사이드바 스크롤 시 배경이 살짝 비치는 반투명 블러 효과(backdrop-filter: blur(12px))를 적용하여 깊이감을 줍니다.
포커스 링(Focus Ring): 키보드 탭 이동 시 현재 포커스된 요소를 명확히 알 수 있도록 명도 대비가 뚜렷한 아웃라인을 제공해야 합니다. (웹 접근성)

2. 📱 모바일 애플리케이션 디자인 가이드

모바일 앱 환경은 터치 인터페이스, 작은 화면 크기, 기기 고유의 물리적 제약(노치 등)을 최우선으로 고려해야 합니다.

2.1 모바일 터치 및 인체공학

터치 타겟 사이즈: 손가락으로 누르기 쉽도록 모든 클릭 가능한 버튼과 아이콘의 최소 크기는 **44px x 44px (iOS 기준) 또는 48dp x 48dp (Android 기준)**를 준수합니다.
주요 액션 영역(Thumb Zone): 사용자가 한 손으로 폰을 쥘 때 닿기 쉬운 화면 하단에 핵심 네비게이션(Bottom Tabs)과 주요 액션 버튼(FAB)을 배치합니다.

2.2 디바이스 물리적 제약 대응

Safe Area (안전 영역): 화면 상단의 노치(Notch) 및 다이내믹 아일랜드 영역, 하단의 홈 인디케이터(Home Indicator) 영역을 침범하지 않도록 레이아웃 상하단 패딩을 강제해야 합니다.
다크 모드 강제 대응: 최신 OS의 기본 설정이 다크 모드인 경우가 많으므로, 앱 개발 시 화이트 테마뿐만 아니라 다크 테마 컬러 에셋을 초기부터 구성하여 눈부심과 UI 깨짐을 방지합니다.

2.3 제스처 인터랙션 (Gestures)

Swipe Back: 좌측 가장자리에서 스와이프 시 이전 화면으로 돌아가는 제스처(iOS 기본 동작)를 방해하지 않도록, 가로 스크롤 영역은 중앙에만 제한적으로 배치합니다.
Pull to Refresh: 리스트 뷰 상단에서 당겨서 새로고침하는 UX를 기본 데이터 갱신 방식으로 적용합니다.

3. 공통 디자인 시스템 (컬러 및 타이포그래피)

웹과 앱에 동일하게 적용되는 브랜드 정체성 요소입니다.

핵심 색상 팔레트

Background (다크 모드 기준): #1E1E20 (눈이 편안한 다크 그레이)
Text (Primary): #E5E7EB (부드러운 오프화이트)
Brand Accent: #6366F1 (인디고 블루 - 신뢰감과 현대적 느낌)
상태 색상: Success (#10B981), Warning (#F59E0B), Error (#EF4444)

타이포그래피

기본 폰트: 플랫폼 기본 산세리프체(웹: Inter / iOS: San Francisco / Android: Roboto)를 사용하되, 한글은 Pretendard 적용을 권장합니다.
위계(Hierarchy): 제목(H1~H6)과 본문(Body) 간의 폰트 크기 및 두께 차이를 명확히 두어 텍스트만으로도 구조를 파악할 수 있도록 합니다.