해상도 및 브라우저 사용지표: //gs.statcounter.com/ //brunch.co.kr/@plusx/6 ==================================================== PC ==================================================== 1920 X 1080px (유저수 42%) - 실제 사이즈 : 1904 X 975px 1366 X 768px (유저수 9%) - 실제 사이즈 : 1350 X 683px ==================================================== 모바일 ==================================================== ★ 안드로이드 360 X 640px (유저수 17.29%) - 포토샵 작업 : 720 X 1280px (@2x) 안드로이드(360*640)를 먼저 작업하는 경우에는 안드로이드 기준으로 먼저 제작하고, iOS(375*664)의 늘어난 여백(375-360=15)만큼 우측과 하단으로 늘려서 대응 720 x 1280 (웹) 720x1280px(@2x) (앱) 1080x1920px(@3x) (앱) ★ ISO 375 X 667px (유저수 7%) - 포토샵 작업 : 아이폰6, 아이폰8 기준 750 X 1334px (@2x) 아이폰7 - 1125 X 2001(@3x) (앱) 아이폰 XS MAX - 1242 X 2688 (@3x) (앱) - 포토샵작업 : 아이폰X 기준 1125 X 2436px (@3x) ▶ 모바일 양쪽마진 (1x 기준) - 8의 배수 사용 - 16 / 20 / 24 ★ 모바일 psd 사이즈 기준 앱디자인 가이드 //devstory.ibksplatform.com/2017/09/blog-post_25.html ★ 태블릿 가로 사이즈 기준 - 1024X768 화면사이즈 기준 (갤럭시 탭S3) - 포토샵 작업 : 갤럭시 탭S3 기준 2048px X 1536px(@2x) ==================================================== 반응형 웹 대응 ==================================================== ▶ 720, 1024, 1334, 1600 네 가지 분기 처리(Breakpoint)를 기본 360 / 640 / 720 / 1024 / 1334 / 1600 / 1920 - PC @media all and (max-width:1500px) {} @media all and (max-width:1280px) {} @media all and (max-width:1180px) {} - 태블릿, 모바일 @media all and (max-width:981px) {} @media all and (max-width:768px) {} @media all and (max-width:640px) {} 반응형 웹 화면사이즈 대응 그리드 //spec.fm/specifics/8-pt-grid ================================== 무료 psd //kr.365psd.com/ |
작업사이즈 해상도
PC 웹 -> 1920×2560
1024 -> 본문사이즈 960
1280 -> 본문사이즈 1140
본문사이즈 : 960 / 1100 / 1140 / 1280
참고 : //inmoon99.tistory.com/34
모바일 안드로이드
- hdpi : 480×800
- xhdpi : 720×1280(2x 시안작업)
- xxhdpi : 1080×1920
모바일 아이폰
- 아이폰4 : 640×960
- 아이폰5 : 640×1136
- 아이폰6, 아이폰8 : 750×1344 (2x 앱 시안작업)
- 아이폰6+, 아이폰8+ : 1242×2208
- iPhone Xr : 828 x 1792
- iPhone Xs : 1125 x 2436 (3x 앱 시안작업)
- iPhone Xs Max : 1242 x 2688
해상도사이트 : //iosres.com
모바일앱 기본 단위
안드로이드 : DP(density independent pixels)
IOS : PT (point)
참고 : //brunch.co.kr/@eeasily/17
//material.io/resources/devices/
dpi,dp 변환식
px = dp × (dpi/160)
dp = px * (160/dpi)
160 dpi 화면기준 1 픽셀 = 1 dp
- 1 dp 값 = 배율
LDPI (120dpi) | MDPI (160dpi) | HDPI (240dpi) | XHDPI (320dpi) | XXHDPI (480dpi) | XXXHDPI (640dpi) |
0.75px | 1px | 1.5px | 2px | 3px | 4px |
폰트사이즈 계산방법 (%)
브라우저 기본값 1em = 16px(body 지정된 사리즈)
- em계산법 : 12(사용하고 싶은 px) / 16(기준크기 px) = 0.75em
- %변환 : 12(사용하고 싶은 px) / 16(기준크기 px) × 100 = 75%
Points | Pixels | Ems | Percent |
6pt | 8px | 0.5em | 50% |
7pt | 9px | 0.55em | 55% |
7.5pt | 10px | 0.625em | 62.5% |
8pt | 11px | 0.7em | 70% |
9pt | 12px | 0.75em | 75% |
10pt | 13px | 0.8em | 80% |
10.5pt | 14px | 0.875em | 87.5% |
11pt | 15px | 0.95em | 95% |
12pt | 16px | 1em | 100% |
13pt | 17px | 1.05em | 105% |
13.5pt | 18px | 1.125em | 112.5% |
14pt | 19px | 1.2em | 120% |
14.5pt | 20px | 1.25em | 125% |
15pt | 21px | 1.3em | 130% |
16pt | 22px | 1.4em | 140% |
17pt | 23px | 1.45em | 145% |
18pt | 24px | 1.5em | 150% |
20pt | 26px | 1.6em | 160% |
22pt | 29px | 1.8em | 180% |
24pt | 32px | 2em | 200% |
26pt | 35px | 2.2em | 220% |
27pt | 36px | 2.25em | 225% |
28pt | 37px | 2.3em | 230% |
29pt | 38px | 2.35em | 235% |
30pt | 40px | 2.45em | 245% |
32pt | 42px | 2.55em | 255% |
34pt | 45px | 2.75em | 275% |
36pt | 48px | 3em | 300% |
사이즈 계산사이트 : //pxtoem.com/
이미지사이즈 계산법 (%)
내가 원하는 크기 또는 여백(20px) × 디바이스크기 또는 디자인크기(640px)
20px / 640px × 100 = 3.125%
박스사이즈 계산법 (%)
박스 가로너비 960px, 가변크기로 만들 박스 가로너비 300px
(300px / 960px) × 100 = 32.25%
상단높이 계산법 (%)
높이 ÷ 폭 × 100
padding-top: 66.666%; /* 500px÷750px×100=66.666...% */