프로젝트 도중 반응형 기준점을 잡는 과정에서 명료하게 작업하지 못해 뒤늦게 반응형 기준점을 공부해 적어두려 한다.
반응형 기획 시 화면별 주의요건
- 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 |
참고 링크
'Product 💙 > 기획자의 지식' 카테고리의 다른 글
쿠키, 세션, 캐시, 토큰, 웹스토리지(로컬, 세션) 😵💫 (0) | 2024.08.07 |
---|---|
Jira 개념, 이걸 어떻게 써야하나 (0) | 2024.01.25 |
적당히 입털기 좋은 UX/UI 법칙 (0) | 2024.01.10 |
피그마로 원형차트 도넛차트 만드는 법 (1) | 2023.12.12 |
팝업 그리고 모달의 종류 (1) | 2023.12.11 |