Skip to content

[REFACTOR] 반응형 디자인 개선 #191

@siiion

Description

@siiion

5.1 브레이크포인트 통일

  • Tailwind 설정 개선

    // tailwind.config.ts
    theme: {
      screens: {
        'sm': '640px',   // 모바일 가로
        'md': '768px',   // 태블릿
        'lg': '1024px',  // 작은 노트북
        'xl': '1280px',  // 데스크톱
        '2xl': '1536px', // 큰 데스크톱
      }
    }
  • 반응형 유틸리티 클래스 통일

    • 컨테이너 최대 너비 일관성
    • 패딩/마진 스케일 통일

5.2 모바일 최적화

  • 터치 인터랙션

    • 버튼 최소 터치 영역 (44x44px)
    • 스와이프 제스처 지원 검토
  • 모바일 네비게이션

    • 햄버거 메뉴 개선
    • 하단 네비게이션 바 검토
  • 폰트 크기 조정

    • global.css의 텍스트 클래스 검토
    • 가독성 테스트 (다양한 디바이스)

5.3 레이아웃 개선

  • 그리드 시스템

    • 일관된 그리드 사용
    • Flexbox/Grid 혼용 기준 정리
  • 컨테이너 너비

    • 페이지별 최대 너비 통일
    • 사이드바 레이아웃 반응형 개선
  • 이미지 반응형

    • 모든 이미지에 반응형 클래스 적용
    • 아스펙트 비율 유지

5.4 테스트

  • 디바이스 테스트

    • 주요 디바이스별 테스트 체크리스트 작성
    • 실제 디바이스에서 테스트
  • 브라우저 호환성

    • 주요 브라우저 테스트
    • 폴리필 필요 여부 확인

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions