Blog 본문

지식공유/웹표준기술

안녕하세요 다룸 입니다. 오늘은 "반응형웹 이슈"에 대해 공유드리려고 합니다.

PC

  • IE8 이하의 IE에서는 미디어 쿼리 지원이 불가능함
  • 추가적인 자바스크립트 작업 및 기타 우회 방법이 필요
해결방법
  • PC 환경의 IE에서 반응형을 지원 할 것인지 결정
    • 반응형을 지원 할 것이라면 - IE 전용 자바스크립트 사용
    • 반응형을 지원 할 필요가 없다면 - IE 환경에서는 일반적은 PC기준의 화면만 보여줌

Mobile

반응형웹 대응 해상도
  • Mobile 가로(Landscape) 모드
    • 가로(Landscape) 해상도가 639px 이하면 미적용
    • 가로(Landscape) 해상도가 640px 이상 적용 - 패블릿폰
  • 반응형을 지원 할 필요가 없다면
    • IE 환경에서는 일반적은 PC기준의 화면만 보여줌
반응형웹 대응 기기현황
반응형웹 대응 기기현황
단말기 해상도 브라우저 해상도 DevicePixelRatio
HTC EVO 4G 540*960 360*640 1.5
아트릭스폰 540*960 360*640 1.5
갤럭시탭 7 600*1024 400*683 1.5
갤럭시노트2 LTE 720*1280 360*640 2
옵티머스LTE 720*1280 360*640 2
옵티머스LTE2 720*1280 360*640 2
베가레이서2 720*1280 360*640 2
갤럭시넥서스 720*1280 360*640 2
갤럭시S3 3G 720*1280 360*640 2
갤럭시S3 LTE 720*1280 360*640 2
갤럭시S3 720*1280 360*640 2
옵티머스G LTE 768*1280 384*640 2
베가LTE EX 800*1280 400*640 2
갤럭시노트 800*1280 400*640 2
베가LTE 800*1280 400*640 2
옵티머스G PRO 1080*1920 360*640 3
갤럭시S4 1080*1920 360*640 3
베가넘버6 1080*1920 360*600 3
갤럭시노트3 1080*1920 360*640 3
LG 옵티머스 G2 1080*1920 360*640 3
LG 옵티머스 G3 1440 X 2560 360*640 4
갤럭시S5 1080 X 1920 360*640 3
갤럭시S6 1440 X 2560 360*640 4
갤럭시S7 1440 X 2560 360*640 4
아이폰6 750 X 1334 375 X 667 2
아이폰6 플러스 1080 X 1920 414 X 736 3
아이패드 1536*2048 768*1024 2

반응형웹(가로모드) 미대응 기기현황
단말기 해상도 브라우저 해상도 DevicePixelRatio
아이폰3GS 320*480 320*480 1
옵티머스원 320*480 320*480 1
갤럭시Ace 320*480 320*480 1
갤럭시S호핀 480*800 320*533 1.5
옵티머스3D큐브 480*800 320*533 1.5
갤럭시U 480*800 320*533 1.5
옵티머스2X 480*800 320*533 1.5
옵티머스블랙 480*800 320*533 1.5
베가레이서 480*800 320*533 1.5
베가X 480*800 320*533 1.5
베가S 480*800 320*533 1.5
옵티머스3D 480*800 320*533 1.5
옵티머스빅 480*800 320*533 1.5
프라다3.0 480*800 320*533 1.5
갤럭시M스타일 480*800 320*533 1.5
옵티머스LTE tag 480*800 320*533 1.5
갤럭시S2 480*800 320*533 1.5
갤럭시K 480*800 320*533 1.5
미라크폰 480*800 320*533 1.5
베가넘버5 480*800 320*533 1.5
갤럭시S 480*800 320*533 1.5
갤럭시S2 HD LTE 480*800 320*533 1.5
갤럭시S2 LTE 480*800 320*533 1.5
넥서스S 480*800 320*533 1.5
아이폰4 640*960 320*480 2
아이폰4S 640*960 320*480 2
아이팟 640*960 320*480 2
아이폰5 640*1136 320*568 2
옵티머스뷰 768*1024 439*585 1.75
옵티머스뷰2 768*1024 439*585 1.75
orientation 속성 Android 이슈 (Android 모든버전 해당)
@media all and (orientation:portrait){ … } /* 세로 모드. 뷰포트의 높이가 너비에 비해 상대적으로 크면 실행 */
@media all and (orientation:landscape){ … } /* 가로 모드. 뷰포트의 너비가 높이에 비해 상대적으로 크면 실행 */
  • 정상화면
    세로모드 (orientation:portrait)
    세로모드 (orientation:portrait) 에서 가운데 별은 빨강색.

    세로모드
    가로모드 (orientation:landscape)
    가로모드 (orientation:landscape) 에서 가운데 별은 파랑색

    가로모드
  • 이슈화면 (패드가 올라온다면?!)
    이슈화면
    • 키패드가 올라온 아래화면은 세로모드 (orientation:portrait) 인데, 가운데 별은 파랑색으로 표시됨.
    • Android의 가로,세로비의 계산은 native 해상도나 브라우저 해상도가 아닌 키패드를 제외한 브라우저에서 실제보이는 영역(viewport)를 기준으로 한다.
    • 즉, (아래화면) 초록색 테두리만 본다면 가로 (720px) 가 세로 (685px) 보다 넓으므로 가로모드로 인식해버리는 이슈이다.
    이슈화면

지금까지 반응형웹 이슈에 대해 살펴봤습니다.
다음 시간에는 "CSS @media queries (미디어 쿼리)를 이용한 반응형웹 적용"에 대해
공유드리도록 하겠습니다.
감사합니다.



by. UI개발팀 lemona


저작자 표시 비영리 변경 금지
신고

'지식공유 > 웹표준기술' 카테고리의 다른 글

반응형 웹 3/4  (0) 2016.08.26
반응형 웹 2/4  (0) 2016.08.12
반응형 웹 1/4  (0) 2016.07.29
Posted by darum

받은 트랙백이 없고 댓글이 없습니다.

전체 댓글

Blog 본문

지식공유/웹표준기술

안녕하세요 다룸 입니다. 오늘은 "반응형웹 레이아웃"에 대해 공유드리려고 합니다.
스마트폰과 태블릿이 생활화되면서 하나의 소스로 다양한 디바이스를 한번에 지원하는 원 소스 멀티 유즈(OSMU:One Source Multi Use)에 대한 필요성이 빠르게 자리잡고 있습니다.
이에 맞추어 반응형웹 디자인 역시 빠르게 진화하고 있습니다만, 다양한 디바이스에서 모두 잘 작동하는 확립된 패턴 또한 소수입니다.
오늘은 이를 최초로 정리한 루크 로블르스키(Luke Wroblewski)의 5가지 패턴에 대해 살펴보려고 합니다.

루크 로블르스키(Luke Wroblewski)의 5가지 패턴

  • 유동형(Mostly fluid)
  • 열 드롭(Column drop)
  • 레이아웃 시프터(Layout shifter)
  • 미세 조정(Tiny tweaks)
  • 캔버스 오프(Off canvas)

유동형 (Mostly Fluid)

유동형 패턴은 가변형 그리드로 구성하여 단순히 컨텐츠의 폭을 맞추는 방법입니다.
큰 화면에서 중간 크기의 화면까지는 여백 정도만 조정되고, 이어 작은 화면이 되면 그리드가 움직이면서 컨텐츠를 수직으로 재배치 합니다.
이 패턴의 중요한 장점은 작은 화면과 큰화면 사이에 단 하나의 중단점(breakpoints)만 있으면 된다는 것입니다.

유동형 레이아웃 이미지

열 끌어놓기 (Column Drop)

화면폭이 좁아져서 더이상 컨텐츠의 정상적인 표시가 힘들 경우,
컨텐츠 영역의 확보를 위해 컬럼을 하단으로 떨궈서 열을 수직으로 쌓습니다.
이 패턴은 화면크기에 관계없이 사용하는 페이지를 작성 하는데 도움이 됩니다.

열 끌어놓기 레이아웃 이미지

배치 이동 (Layout Shifter)

이 패턴은 스크린이 크기마다 다른 형태의 레이아웃을 사용합니다.
단순히 컬럼을 다른 컬럼 아래로 이동 및 재배치하는 방식 아닌, 기기나 화면 사이즈에 따라 콘텐츠를 이동시켜 레이아웃을 변형합니다.
때문에 앞서 소개한 패턴에 비해 단조로움을 벗어날 수 있으나, 서버의 작업이 상대적으로 많이 필요하고 유지관리가 복잡할 수 있습니다.

배치 이동 레이아웃 이미지

미세 조정 (Tiny Tweaks)

미세 조정은 글꼴이나 이미지의 크기 조정 또는 콘텐츠 미세 이동 등과 같은 작은 변화만 이루어집니다.
보통 하나의 컬럼을 사용하며 브라우저의 폭이 변하더라도 레이아웃의 변화가 크지 않아서 블로그에서 많이 사용됩니다.

미세 조정 레이아웃 이미지

오프 캔버스 (off-Canvas)

오프 캔버스는 메뉴나 서브 컬럼을 화면 좌/우측에 숨겨두고 필요할때 노출하는 패턴입니다.
콘텐츠를 수직으로 쌓지 않고 사용 빈도가 낮은 콘텐츠(예: 탐색 또는 앱 메뉴)를 화면 밖에 배치하고, 화면 크기가 충분히 커지면 표시하고, 작은 화면에서는 클릭했을 때만 보여줍니다.

오프 캔버스 레이아웃 이미지
반응형웹 디자인 예제
  • 모바일에서는 세로모드(640 PSD), 가로모드(1280 PSD)로 작업합니다.
    • 가로모드(1280 PSD)에서 이미지가 고정적 이미지인지 유동적(flexible) 이미지인지 알수있게 작업합니다.
  • 태블릿(iPad)에서는 세로모드(1536 PSD),가로모드(2048 PSD)로 작업합니다.
  • PC, 모바일에서 선형 구조로 작업합니다.
반응형웹 디자인 예제 이미지
  • PC 썸네일은 모바일(640 PSD)기준 원본사이즈(리사이즈)로 사용합니다.
반응형웹 디자인 예제 마크업 이미지
반응형웹 디자인시 고려사항
  • 오브젝트의 크기는 라인 포함 4의 배수 제작 권장하며(버튼, 아이콘 등), 폰트는 2의 배수로 사용합니다.
  • 용량 최소화를 위해 기본 폰트 사용 및 기본 요소(탭, 버튼 등) CSS3 처리 권장합니다.
  • 개발 이슈가 생기는 디자인
    • 모바일에서의 선형 구조를 해치는 경우
    • 서로 다른 UX를 제공하는 경우



지금까지 반응형웹의 대표적인 5가지 레이아웃과 

반응형웹 디자인시 고려해야할 사항에 대해 살펴봤습니다.
다음 시간에는 "반응형웹 이슈"에 대해 공유드리도록 하겠습니다.
감사합니다.



by. UI개발팀 bliss


저작자 표시 비영리 변경 금지
신고

'지식공유 > 웹표준기술' 카테고리의 다른 글

반응형 웹 3/4  (0) 2016.08.26
반응형 웹 2/4  (0) 2016.08.12
반응형 웹 1/4  (0) 2016.07.29
Posted by darum

받은 트랙백이 없고 댓글이 없습니다.

전체 댓글

Blog 본문

지식공유/웹표준기술

안녕하세요 다룸 입니다. 반응형 웹에 대한 아래 4가지 주제로 공유드리려고 합니다.
  1. 반응형 웹 이란?
  2. 반응형웹 레이아웃
  3. 반응형웹 이슈.
  4. CSS @media queries (미디어 쿼리)를 이용한 반응형웹 적용
오늘 첫번째 "반응형 웹이란?" 주제로 정리하여 공유드립니다.

반응형 웹이란?

반응형 웹 디자인이란 가변 그리드, 가변 이미지, 미디어 쿼리를 이용해 하나의 소스 (One Code) 로 제작된 콘텐츠가 다양한 크기의 모바일 기기에 맞춰 해상도와 화면이 동적으로 변하는 기술을 말합니다.
이를 통해 사용자는 어떤 크기의 디스플레이에서 사이트를 방문하든 보다 높은 차원의 사용성 경험을 제공 받을 수 있습니다.
-출처 : Ethan Marcotte, Responsive Web Design.

반응형웹 특징

  1. 하나의 콘텐츠에 오직 하나의 HTML 소스만 있다.
  2. 특정 장치에 최적화된 여러벌의 HTML이 있으면 반응형이라고 부르지 않습니다.
  3. 특정 장치에 최적화된 페이지로 연결되는 별도의 URL이 있으면 반응형이라고 부르지 않습니다.

반응형웹 목적

  • 반응형 웹의 기본, 사용자에게 남는 공간 없이 한눈에 많은 정보를 노출하며 더 자세한 컨텐츠를 제공해 줄 수 있습니다.
  • 향후 출시 될 어떠한 Screen Device에 유연한 대응이 가능하고 효율적입니다.
  • 적용대상
    • 태블릿 PC
    • 고해상도 Mobile 단말기 (해상도 세로 size 640 이상) 의 Landscape mode

반응형웹 기획시 고려사항

  • pc화면에 최적화된 PC카페탑(http://top.cafe.daum.net/), Mobile에 최적화된 카페탑(http://m.cafe.daum.net/) 처럼 많은 컨텐츠를 좀더 효율적으로 보여주기 위해선 반응형 웹이 꼭 답은 아닙니다.
    • 처음에 문제 없도록 구성을 했더라도 운영하면서 추가되는 콘텐츠나 기능변화로 인해 반응형 웹이 장점이라고 말하는 모든 해상도에 대응은 물 건너 가는 수도 있습니다.
  • 반응형 웹 구성시 복잡한 정보구조의 형태를 어떠한 서비스도 가능하지만, 서비스 목적성과 일관성, 연속성을 가지고 있어야 합니다.
  • 이미지 사이즈 규정: 확대/축소, 행/열 조정
  • Touch(클릭)에 대한 고려 : 어떤 화면 사이즈에도 터치를 고려해야 합니다.

반응형 웹 적용방법

반응형 웹 적용방법(1) : CSS @media queries (미디어 쿼리)
미디어 타입(media type)은 단말기의 종류에 따라 각각 다른 스타일시트를 적용하게 하는 기능이며 CSS 2.1 부터 추가되었습니다
하지만 실제로 많이 사용되지 않았는데, 미디어 타입 만으로는 해당 기기의 특성을 정확히 파악하여 알맞은 스타일을 적용시키기 어려웠던 문제점이 있었기 때문입니다.
CSS 3에는 미디어 타입을 개선하여, 더 구체적인 조건에서 필요한 스타일을 정확하게 적용할 수 있도록 확장하였는데, 이를 미디어 쿼리(media query)라고 하며, CSS 3에 Media Query 라는 명세가 있고 최신 브라우저들(IE9 이상, Chrome, Safari, Firefox, Opera)과 아이폰용 모바일 사파리 브라우저도 이를 지원하고 있지만, 아직 국내 점유율이 상당한 IE8을 포함하여, 그 이하 버전은 지원이 안되고 있습니다.
미디어쿼리 사용예
  • 외부 CSS 파일을 조건에 다라 불러오는 방법
    < link rel="stylesheet" media="screen and (min-width: 640px)" href="example1.css">
    < link rel="stylesheet" media="screen and (min-width: 1024px)" href="example2.css">
    
    <!-- 화면 너비가 640px 이상이면 example1.css 를 로드, 1024px 이상이면 example2.css 도 같이 로드함 -->
  • style 태그를 이용하는 방법
    < style type="text/css" media="screen and (min-width: 640px)">
    body { background-color: #000 }
    < /style >
     
    < style type="text/css" media="screen and (min-width: 1024px)">
    body { background-color: #fff }
    < /style >
     
    <!-- 화면 너비가 640px 이상이면 배경색이 검정, 1024px 이상이면 배경색이 흰색으로 캐스캐이딩 됨 -->
  • css파일내에서 사용하는 방법
    @charset "utf-8";
     
    /* 1. 공통 (Reset, Common) */
     
    /* 2. 모바일 (뷰포트너비 640px 미만) */
    .sample {background-color:black}
     
    /* 3. 패블릿 가로모드/태블릿 (뷰포트 너비 640px 이상) */
    @media all and (min-width:640px) {
        .sample {background-color:red}
    }
     
    /* 4. PC (해상도 1024px 이상) */
    @media all and (min-width:1024px) {
        .sample {background-color:green}
    }
    적용사이트 :
반응형 웹 적용방법(2) : UA체크를 통한 CSS 분기
  • 브라우저의 UA(userAgent)값에 따라 CSS파일을 분기 처리하여 내려줍니다.
    • userAgent 문자열은 홈페이지를 만들때, 접속하는 사용자의 웹 브라우저 종류, 버전, 또는 모바일 장비에서 접속 했는지 등을 알고자 할 때 분석되는 문자열입니다.
  • PC브라우져 창크기를 변화해도 화면이 반응하지 않으며 해당기기에 최적화된 화면만 확인 할 수 있다
    • IE 6~8 을 위한 JS라이브러리가 별도로 필요하지 않음
  • UA분기를 이용한 모바일과 테블릿 환경에서 미디어쿼리를 다시 사용할 수 있어서 테블릿의 가로와 세로를 다르게 구현하거나 패블릿에서 테블릿의 화면을 보이게 처리할 수 도 있다
반응형 웹 적용방법(3) : 기타 반응형 웹 기법
  • 유동형 그리드 (fluid grids)
    • 반응형 웹 이전부터 사용되어 온, 그리드 시스템과 달리 EM 등이 제안하는 유동형 그리드는 고정된 PX가 아닌 em이나 %를 사용합니다.
    • Tiny Tweaks 방식으로 예시) 검색결과 화면
  • 유동형 이미지 (fluid/flexible images)
    • 유동형 그리드와 마찬가지로, 고정된 PX가 아닌 em과 %를 이용하여 접근하는 방법으로, 특히 이 경우 max-width를 사용하고, 이를 처리하지 못하는 ie6~ie7의 경우 jabascript를 사용합니다.
  • javascript를 통한 반응형 레이아웃 (responsive layouts) 대응
    • 스크린 사이즈 단계별 스타일을 하나의 CSS내에 class로 분리 구성하고 javascript를 사용하여 브라우져의 뷰포트 사이즈를 체크하여 최상위 요소에 해당 class명을 변경하여 CSS를 캐스케이딩합니다.



지금까지 "반응형 웹이란?"에 대해 살펴봤습니다.
이후 반응형웹 레이아웃에 대해 공유드리도록 하겠습니다.
기대 많이 해주세요~ 감사합니다.



by. UI개발팀 jude


저작자 표시 비영리 변경 금지
신고

'지식공유 > 웹표준기술' 카테고리의 다른 글

반응형 웹 3/4  (0) 2016.08.26
반응형 웹 2/4  (0) 2016.08.12
반응형 웹 1/4  (0) 2016.07.29
Posted by darum

받은 트랙백이 없고 댓글이 없습니다.

전체 댓글