반응형 표준 화면 해상도

티스토리 메뉴 펼치기 댓글수0

Programming language/HTML & CSS

반응형 표준 화면 해상도

개발 hello-world
댓글수0
  • 반응형 웹 디자인시 고려사항


  • 포토샵으로 작업시
  • ( 배율이 자동변환 안되기에 디바이스 사이즈의 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 와 같은 경우로 순서가 뒤섞이는 것을 말함 )





  • 맨위로

    https://uxicode.tistory.com/entry/%EB%B0%98%EC%9D%91%ED%98%95-%ED%91%9C%EC%A4%80-%ED%99%94%EB%A9%B4-%ED%95%B4%EC%83%81%EB%8F%84

    신고하기