[Responsive] 브레이크포인트(beakpoint)

브레이크포인트(beakpoint)

• 화면 크기에 따라 레이아웃이나 스타일을 전환하는 기준점을 의미

---

브레이크포인트 설정 기준

1. 디자인 기반

• 실제 UI/디자인 시안을 기준으로 설계
• 디자인 시안이 모바일/태블릿/PC/대형 PC로 나눠져 있을 경우 각 시점의 크기를 브레이크포인트로 사용

2. 콘텐츠 기반

• 콘텐츠가 줄 바꿈 되거나 깨지는 지점을 기준으로 브레이크포인트 설정
• 좀 더 유연하고 사용자 중심의 접근 방식
• 장점: 디바이스 의존도↓ / 유연성↑
• 단점: 반복되는 테스트와 수정 필요

3. 디바이스 기준 + 콘텐츠 기준 혼합

• 가장 많이 쓰이는 실무 전략
• 우선 기기 기준으로 rough 한 breakpoints 설정하고,
• 특정 컴포넌트에서 깨지거나 이상해지는 부분만 콘텐츠 기준으로 미세 조정

---

기기별 브레이크포인트 

기기	해상도 기준 (width)	설명
소형 모바일	≤ 360px 또는 375px	아이폰 SE, 소형 안드로이드
일반 모바일	≤ 480px 또는 ≤ 576px	대부분의 스마트폰 (iPhone 13, Galaxy S 등)
대형 모바일/작은 태블릿	≥ 600px	큰 스마트폰 또는 작은 태블릿
태블릿	≥ 768px	iPad, Galaxy Tab 등
노트북	≥ 1024px	소형 노트북, 태블릿 가로모드
데스크탑	≥ 1280px	일반적인 데스크탑 환경
대형 데스크탑	≥ 1440px 이상	FHD 이상, 와이드 모니터 등

---

폴더블 대응 브레이크포인트

	접은 상태 (커버 화면)	펼친 상태 (메인 화면)
Galaxy Z Flip 3/4/5	약 260~300px 너비 (세로 긴 화면)	약 720px 너비
Galaxy Z Flip 6 (루머/신형)	최대 320px까지 확대 가능성 있음
Z Fold 시리즈	약 375px (일반 스마트폰 비슷)	약 840px ~ 960px 이상 (태블릿 수준)

폴더블 뷰포트 정리

모델	접은 상태 (커버 화면)	펼친 상태 (메인 화면)	비고
Z Flip 3	260 × 816	720 × 960	세로 커버 화면 작음
Z Flip 4	260 × 816	720 × 960	Flip3과 동일
Z Flip 5	282 × 748	720 × 962	커버 화면 살짝 넓어짐
Z Flip 6 (예상/루머)	300~320 × 748	720 × 962	더 넓어진 커버 화면 가능성 있음
Z Fold 3	375 × 812	840 × 1134	펼친 화면은 태블릿 수준
Z Fold 4	378 × 812	840 × 1134	커버 화면 약간 증가
Z Fold 5	385 × 812	904 × 1152	메인 화면 넓어짐
Z Fold 6 (예상/신형)	390 × 812	960 × 1152	최신 모델 기준으로 확장됨

플립/폴드 대응 브레이크포인트 제안

• 커버 화면은 좁은 세로형 레이아웃을 고려해야 하고
• 펼친 화면은 태블릿 또는 데스크탑 대응처럼 레이아웃 재구성하는 게 일반적

대상	브레이크 포인트
Z Flip 커버 화면	max-width: 280px 또는 max-width: 300px
Z Fold 커버 화면	max-width: 390px
Z Fold 펼친 화면	min-width: 840px 또는 min-width: 900px

기본으로 flip의 max-width:280px으로 설정 (보편적인 최소 대응 한계선)

• 너무 타이트하지 않게 대응 가능하고
• 폰트, 버튼, 패딩 등을 조정할 여유 확보 가능
• Z Flip 대응은 폰트 크기 / 네비게이션 최소화 / 여백 축소가 핵심
• 모든 Z Flip 시리즈의 커버 디스플레이를 커버할 수 있는 평균값
• max-width:260px → 더 정밀하게 하려면 이 값도 사용 가능 (Z Flip3 기준)

---