반응형에 대해(2)

반응형 웹 디자인 패턴

구글 역시 반응형 웹에 대한 정리를 잘 해놓았다. 정확히 말하면 많이 쓰는 패턴에 대한 정리이다. 반응형 웹 디자인에 대한 표준은 아직 없기때문에 현재는 자주 쓰는 패턴정도라고 말하고 있는것 같다.

반응형 웹 페이지에 사용되는 대부분의 레이아웃은 5가지 패턴 중 하나로 분류된다.

• 유동형
• 열 끌어놓기
• 레아이웃 시프터
• 미세조정
• 오프캔버스

패턴 예시

flexbox를 시용했으며, 각 샘플은 기본 컨테이너 div내에 3개의 콘텐츠 div가 포함된다. 가장 작은 뷰부터 작성되고, 필요한 경우 중단점을 추가했다. 최신브라우저에서는 flexbox 레아이웃 모드가 잘 지원된다.

유동형(Mostly Fluid)

이 패턴은 주로 융동형 그리드로 구성된다. 더 넓은 화면에서는 여백만 조정하므로, 대형 화면이나 중형 화면에서 이 패턴은 일반적으로 동일한 크기를 유지한다. 더 작은 화면에서는 컨텐츠들이 수직으로 쌓이며 기본 콘텐츠가 재배치 된다.

이 패턴의 주요 장점은 대개 소형 화면과 대형 화면에서 하나의 중단점만 필요하다는 것이다.

패턴 적용 사이트

• A List Apart
• Media Queries

.container {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
}

.c1, .c2, .c3, .c4, .c5 {
  width: 100%;
}

@media (min-width: 600px) {
  .c2, .c3, .c4, .c5 {
    width: 50%;
  }
}

@media (min-width: 800px) {
  .c1 {
    width: 60%;
  }
  .c2 {
    width: 40%;
  }
  /* Using 33.33%, doesn't always work right due to rounding */
  .c3, .c4 {
    width: 33%;
  }
  .c5 {
    width: 34%;
  }
}

@media (min-width: 800px) {
  .container {
    width: 800px;
    margin-left: auto;
    margin-right: auto;
  }
}

열 끌어놓기(Column Drop)

전체 너비가 가득 찬 다중 열 레이아웃의 경우, 열 글어놓기는 창 너비가 콘텐츠에 비해 너무 좁아지면 열을 수직으로 쌓는다. 결국 모든 열이 수직으로 쌓인다. 이 레이아웃의 중단점 선택은 콘텐츠에 따라 다르다.

패턴 적용 사이트

• Modernizr

.container {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
}

.c1, .c2, .c3 {
  width: 100%;
}

@media (min-width: 600px) {
  .c1 {
    width: 60%;
    -webkit-order: 2;
    order: 2;
  }

  .c2 {
    width: 40%;
    -webkit-order: 1;
    order: 1;
  }

  .c3 {
    width: 100%;
    -webkit-order: 3;
    order: 3;
  }
}


@media (min-width: 800px) {
  .c2 {
    width: 20%;
  }

  .c3 {
    width: 20%;
  }
}

레이아웃 시프터(Layout shifter)

가장 반응성이 뛰어난 패턴. 여러 화면 너비에 복수의 중단점이 있다. 이 레이아웃의 핵심은 다른 열 아래로 이동 및 재배치하는 방식이 아니라 콘테츠의 자리 이동 방식에 있다. 각 주요 중단점 간의 현저한 차이로 인해 유지 관리가 훨씬 복잡하고 전체 콘텐츠 레이아웃뿐만 아니라 요소 내의 변경도 포함된다.

화면이 커짐에 따라 한 div는 왼쪽, 두 div는 오른쪽에 쌓이게 된다.

.container {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
}

.c1, .c2, .c3, .c4 {
  width: 100%;
}

@media (min-width: 600px) {
  .c1 {
    width: 25%;
  }

  .c4 {
    width: 75%;
  }

}

@media (min-width: 800px) {
  .container {
    width: 800px;
    margin-left: auto;
    margin-right: auto;
  }
}

미세조정(Tiny tweaks)

미세조정은 글꼴 미세 조정, 이밎 크기 미세 변경 등 콘텐츠 미세 이동 등과 같이 레이아웃을 약간 변경한다. 이 패턴은 1페이지 선형 웹사이트, 텍스트가 많은 문서 등 단일 열 레이아웃에서 잘 작동한다.

패턴 적용 사이트

• Ginger Whale

.c1 {
  padding: 10px;
  width: 100%;
}

@media (min-width: 500px) {
  .c1 {
    padding: 20px;
    font-size: 1.5em;
  }
}

@media (min-width: 800px) {
  .c1 {
    padding: 40px;
    font-size: 2em;
  }
}

오프캔버스(Off canvas)

콘텐츠를 수직으로 쌓지 않고, 사용 빈도가 낮은 콘텐츠(탐색 또는 앱메뉴)를 화면 밖에 배치하고, 화면 크기가 충분히 커지면 표시하고, 작은 화며네서는 클릭했을 때만 보여준다.

컨텐츠를 수직으로 쌓지 않고, transform: translate(-250px, 0) 선언을 사용하여 두 개의 콘텐츠 div를 화면에서 숨긴다. 자바스크립트를 사용하여 공개 클래스를 요소에 추가하여 보이게 만들어 div를 표시한다.

body {
  overflow-x: hidden;
}

.container {
  display: block;
}

.c1, .c3 {
  position: absolute;
  width: 250px;
  height: 100%;

  /*
    This is a trick to improve performance on newer versions of Chrome
    #perfmatters
  */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; 

  -webkit-transition: -webkit-transform 0.4s ease-out;
  transition: transform 0.4s ease-out;

  z-index: 1;
}

.c1 {
  /*
  Using translate3d as a trick to improve performance on older versions of Chrome
  See: http://aerotwist.com/blog/on-translate3d-and-layer-creation-hacks/
  #perfmatters
  */
  -webkit-transform: translate(-250px,0);
  transform: translate(-250px,0);
}

.c2 {
  width: 100%;
  position: absolute;
}

.c3 {
  left: 100%;
}

.c1.open {
  -webkit-transform: translate(0,0);
  transform: translate(0,0);
}

.c3.open {
  -webkit-transform: translate(-250px,0);
  transform: translate(-250px,0);
}

@media (min-width: 500px) {
  /* If the screen is wider then 500px, use Flexbox */
  .container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row nowrap;
    flex-flow: row nowrap;
  }
  .c1 {
    position: relative;
    -webkit-transition: none 0s ease-out;
    transition: none 0s ease-out;
    -webkit-transform: translate(0,0);
    transform: translate(0,0);
  }
  .c2 {
    position: static;
  }
}

@media (min-width: 800px) {
  body {
    overflow-x: auto;
  }
  .c3 {
    position: relative;
    left: auto;
    -webkit-transition: none 0s ease-out;
    transition: none 0s ease-out;
    -webkit-transform: translate(0,0);
    transform: translate(0,0);
  }
}

정리

웹페이지를 돌아다니도바면 5가지 패턴은 자주 보인다. 패턴을 외운다기보다는, 이러한 패턴들이 사용된다라고 생각하면 되고, 나한테 필요한 패턴을 골라서 사용하거나, 굳이 패턴을 따르지 않아도 된다. 내 컨텐츠에 잘 맞는 반응형 사이트면 되는 것이다.

출처

반응형 웹 디자인 패턴