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


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

웹폰트 (Web Font)  (172) 2016.10.31
flexbox  (3) 2016.09.30
반응형 웹 4/4  (0) 2016.09.09
반응형 웹 3/4  (0) 2016.08.26
반응형 웹 1/4  (0) 2016.07.29
Posted by darum

전체 댓글