반응형 표준 화면 해상도

반응형 웹 디자인시 고려사항

포토샵으로 작업시

( 배율이 자동변환 안되기에 디바이스 사이즈의 2배로 작업 )

-모바일에서는 가로 720작업( 구형폰까지 지원시 640 작업 ).

- 대체적으로 태블릿은 모바일과 같은 레이아웃으로 작업되나 필요시 가로 768 로 작업.

- 데스크탑 가로 1024 or 1280 

아래와 같이 레티나 디스플레이 개념으로 인해 디바이스에서 보여주는 해상도와 실제 사이즈와 보여지는 차이가 생긴다.

따라서 포토샵에서는 2배정도 되는 사이즈로 디자인이 되어야 한다.

스케치+제플린 콤보 작업시

( 스케치에서 배율별 export가 가능하기에 정사이즈 작업. )

- 모바일에서는 가로사이즈 - 360 or 375 작업. ( 구형폰까지 지원시 320 )

- 대체적으로 태블릿은 모바일과 같은 레이아웃으로 작업되나 필요시 태블릿 가로사이즈 - 768 로 작업.

- 데스크탑 가로 사이즈 - 1024 or 1280

"1024 or 1280 데스크탑

 해상도 작업 기준은 무엇? "

- 위 사진에선 글로벌 통계치로 1366x768 사이즈와 1920x1080 사이즈가 제일 많이 사용되고 있으나 처음부터 큰사이즈로 작업시 랩탑 및 1024 정도의 작은 화면들을 대응하기 힘들다.  따라서 최소사이즈 지정. 

"즉 낮은 해상도 기준으로 작업해서 보기 좋은 비율을 

만든 이후 좌우로 늘리는 방식 추천."

사이즈 수치값으로 1024 혹은 1280 로 작업한다고 앞서서 이야기 했는데 그 결정하는 기준은 사이즈가 작은 랩탑까지도 지원해야 한다 했을 때 1024를 선택

- 추가로 만약 iOS, Android 앱으로만 작업시엔 아래와 같은 사이즈로 기준을 잡고 작업 하는 것이 좋다.

  iOS 6기준 : 375 x 667

  Android Nexus 5 : 360x 640

 - 디바이스별로 화면 사이즈 체크해 보기(http://troy.labs.daum.net/)

2. 포토샵 작업시 오브젝트의 크기는 라인 포함 4의 배수 제작 권장하며(버튼, 아이콘 등), 폰트는 2의 배수로 사용.

3. 용량 최소화를 위해 기본 폰트 사용 및 기본 요소(탭, 버튼 등) CSS3 처리 권장.

- 만약 Glyphicon 타입으로 작업되는 아이콘이 많다면 아이콘 폰트로 처리하는 것이 좋다.

- 아이콘 폰트 만들기 바로가기 링크

그래픽아이콘 참고시 아래 URL 참조 

대표적인 Glyphicon 타입 제공

부트스트랩 - http://bootstrapk.com/components/

구글 머티리얼 - https://material.io/tools/icons/?style=baseline

4. 개발 이슈가 생기는 디자인

- 모바일에서의 선형 구조를 해치는 경우 

  a. 모바일버전에서 없는 컨텐츠가 데스크탑버전에서는 컨텐츠가 생성되는 경우

  b. 모바일에서는 상단에 노출되는 컨텐츠가 데스크탑버전에서 맨 하단으로 노출되는 경우

  ( 화면 리사이즈시 컨텐츠 상단부터 하단까지 선형으로 1-2-3-4 순에서 3-1-4-2 와 같은 경우로 순서가 뒤섞이는 것을 말함 )