7onicDESIGN SYSTEM

Breakpoints

모바일 퍼스트로 설계된 브레이크포인트 시스템. 화면 크기에 따른 반응형 레이아웃을 구현합니다.

Breakpoint Scale

5단계 브레이크포인트로 거의 모든 디바이스에 대응

default0px
모바일 (세로)4열
sm:640px
소형 태블릿, 대형 스마트폰 (가로)4열
md:768px
태블릿 (세로)8열
lg:1024px
태블릿 (가로), 소형 노트북12열
xl:1280px
데스크톱, 노트북12열
2xl:1536px
대형 데스크톱 모니터12열

Grid System

브레이크포인트별 권장 그리드 컬럼 수

default

4col

md: 768px

8col

lg: 1024px

12col

자주 쓰는 레이아웃 패턴

사이드바 + 메인
lg+
2
10
3
9
사이드바 (2 or 3)
메인 (10 or 9)
3등분 카드
md+
md:grid-cols-3
default:grid-cols-1
4등분 그리드
lg+
lg:grid-cols-4
md:grid-cols-2
반응형 변화 예시
default1열
md:2열
lg:3열

Device Reference

각 디바이스의 화면 너비와 대응하는 브레이크포인트

모바일

default

iPhone SE375px
iPhone 14390px
iPhone 14 Plus428px

태블릿

md: 768px〜

iPad Mini744px
iPad810px
iPad Pro 11"834px

데스크톱

lg: 1024px〜

MacBook Air1280px
MacBook Pro 14"1512px
iMac 24"1920px

화면 너비 비교

브레이크포인트 경계를 점선으로 표시

iPhone SE
375pxxs
iPhone 14
390pxxs
iPhone 14 Plus
428pxxs
iPad Mini
744pxsm
iPad
810pxsm
iPad Pro 11"
834pxsm
MacBook Air
1280pxsm
MacBook Pro 14"
1512pxsm
iMac 24"
1920pxsm

Design Principles

모바일 퍼스트

가장 작은 화면 크기부터 설계를 시작하고 더 큰 화면으로 점진적으로 확장합니다.

콘텐츠 우선

디바이스가 아닌 콘텐츠를 기준으로 브레이크포인트를 선택합니다.

2fr
3fr
2fr

유동적인 그리드

고정 너비 대신 상대 단위를 사용해 부드럽게 적응합니다.

테스트 중시

실제 디바이스에서 테스트하여 브레이크포인트 경계를 확인합니다.

Interactive Preview

슬라이더로 화면 너비를 변경해 브레이크포인트 전환을 체험

1024px
lg
그리드:4col
내비:inline
레이아웃:row