반응형을 어떻게 잡는 게 효과적일까 (반응형 기준점)

프로젝트 도중 반응형 기준점을 잡는 과정에서 명료하게 작업하지 못해 뒤늦게 반응형 기준점을 공부해 적어두려 한다.

 

반응형 기획 시 화면별 주의요건

- IA 정보구조가 나와있어야 한다.

- 모바일/PC 중 어느것이 우선인지 정해야 한다.

- 가변단계 정의 (아래 표 참고)

- 가변단계에 따른 화면 레이아웃 정의

- 가변 단계에 따른 UI 변동사항 정의 (이미지, 폰트, 아이콘, 링크, 그리드, 가독성, 터치행위(손,펜))

 

기준점은 화면에 맞춰 즉각 변화하기보다 중간값을 잡아서 약간의 변수도 커버할 수 있도록 하려한다.

 

width 기준 (min 작업 / max 여백)

	min	max
M	300	459
T	460	939
L	940	1399
D	1400

 

	Title	Device	Responsive	width	height	pys.width	pys.height
M	Phone	General 2	mobile	0	480
M	Phone	Chrome	mobile S	320
M	Phone	Figma	iPhone SE	320	568	640	1136
M	Phone	General 1	mobile	320
M	Phone	Figma	Android Small	360	640
M	Phone	Figma	Android Large	360	800
M	Phone	Chrome	mobile M	375	-
M	Phone	Figma	iPhone 13 mini	375	812	1080	2340
M	Phone	Figma	iPhone 8	375	667	750	1134
M	Phone	Figma	iPhone 11 Pro	375	812	1125	2436
M	Phone	Figma	iPhone X	375	812	1125	2436
M	Phone	Figma	iPhone 13 Pro	390	844	1170	2532
M	Phone	Figma	iPhone 13	390	844	1170	2532
M	Phone	Figma	iPhone 14	390	844	1170	2532
M	Phone	Figma	iPhone 15 Pro	393	852	1179	2556
M	Phone	Figma	iPhone 15	393	852	1179	2556
M	Phone	Figma	iPhone 14 Pro	393	852	1179	2556
M	Phone	Figma	Google Pixel 2	411	731
M	Phone	Figma	Google Pixel 2 XL	411	823
M	Phone	Figma	iPhone 8 Plus	414	736	1242	2208
M	Phone	Figma	iPhone 11	414	896	828	1792
M	Phone	Figma	iPhone 11 Pro Max	414	896	1242	2688
M	Phone	Chrome	mobile L	425
M	Phone	Figma	iPhone 14 Plus	428	926	1284	2778
M	Phone	Figma	iPhone 13 Pro Max	428	926	1284	2778
M	Phone	Figma	iPhone 15 Pro Max	430	932	1290	2796
M	Phone	Figma	iPhone 15 Plus	430	932	1290	2796
M	Phone	Figma	iPhone 14 Pro Max	430	932	1290	2796
T	Tablet	General 2	mobile ~ Tablet	481	767
T	Tablet	Figma	iPad mini 8.3	744	1133
T	Tablet	Chrome	Tablet	768
T	Tablet	Figma	iPad mini	768	1024	1536	2048
T	Tablet	Figma	iPad 9.7'	768	1024
T	Tablet	General 1	Tablet	768
T	Tablet	General 2	Tablet(가로)	768	979
T	Tablet	Figma	iPad Pro 11'	834	1194	1668	2388
PC	Laptop	General 2	Laptop	980	1199
PC	Laptop	Chrome	Laptop	1024
PC	Tablet	Figma	iPad Pro 12.9'	1024	1336	2048	2732
PC	Laptop	General 1	Laptop	1024
PC	Laptop	Figma	MacBook	1152	700
PC	Desktop	General 2	Desktop	1200
PC	Laptop	Figma	MacBook Air	1280	832
PC	Desktop	Figma	iMac	1280	720
PC	Laptop	Figma	Surface Pro 4	1368	912
PC	Laptop	Chrome	Laptop L	1440
PC	Laptop	Figma	Surface Pro 8	1440	960
PC	Laptop	Figma	MacBook Pro	1440	900
PC	Laptop	Figma	MacBook Pro 14'	1512	982
PC	Desktop	General 1	Desktop	1600
PC	Laptop	Figma	MacBook Pro 16'	1728	1117
PC	Desktop	Chrome	4K	2550



 

 

 

작업 시	w	h
안드로이드	360	740
iOS	375	812
4k	3840	2160
태블릿	720	1480
웹(24inch)	1920	1080
웹(QHD)	2560	1440
웹(FHD)	1536	864
보급형 노트북	1366	768
HD 모니터	1280	720

 

 

 

참고 링크

디바이스정보 1

디자이스 정보 2

반응형 웹 기획

갤럭시 폴드의 웹