반응형 웹 디자인 기본사항

사이트가 표시되는 기기의 요구사항과 기능에 반응하는 사이트를 만드는 방법

웹 서핑을 위한 휴대기기의 사용이 엄청난 속도로 계속 증가하고 있으며, 이러한 기기는 디스플레이 크기의 제약을 받으며 콘텐츠가 화면에 배치되는 방식에 다른 접근 방식을 필요로 하는 경우가 많습니다.

Ethan Marcotte in A List Apart에서 원래 정의한 반응형 웹 디자인은 사용자와 기기의 요구사항에 부응합니다. 레이아웃은 기기의 크기와 기능에 따라 변경됩니다. 예를 들어 휴대전화에서는 콘텐츠가 단일 열 보기로 표시되지만 태블릿에서는 두 개의 열에 동일한 콘텐츠가 표시될 수 있습니다.

이 동영상에서 디자인은 사용 가능한 화면 공간에 따라 좁은 표시 영역에서 넓은 표시 영역으로 이동합니다.

휴대전화, '패블릿', 태블릿, 데스크톱, 게임 콘솔, TV, 웨어러블 등 다양한 화면 크기가 존재합니다. 화면 크기는 항상 변하기 때문에 현재나 미래에도 모든 화면 크기에 맞게 사이트를 조정하는 것이 중요합니다. 또한 기기에는 사용자가 기기와 상호작용하는 다양한 기능이 있습니다. 예를 들어 일부 방문자는 터치스크린을 사용할 것입니다. 현대적인 반응형 디자인에서는 이러한 모든 요소를 고려하여 모든 사용자의 경험을 최적화합니다.

표시 영역 설정

다양한 기기에 최적화된 페이지는 문서의 헤드에 메타 표시 영역 태그를 포함해야 합니다. 메타 표시 영역 태그는 페이지의 크기 및 배율을 제어하는 방법을 브라우저에 알려줍니다.

최상의 환경을 제공하기 위해 모바일 브라우저는 데스크톱 화면 너비 (기기에 따라 다르지만 일반적으로 약 980px)로 페이지를 렌더링한 다음 글꼴 크기를 늘리고 콘텐츠를 화면에 맞게 조정하여 콘텐츠를 더 보기 좋게 만듭니다. 즉, 글꼴 크기가 사용자에게 일관되지 않게 표시될 수 있으며, 사용자는 콘텐츠를 보고 상호작용하기 위해 두 번 탭하거나 두 손가락을 벌려 확대해야 할 수 있습니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    …
    <meta name="viewport" content="width=device-width, initial-scale=1">
    …
  </head>
  …

메타 표시 영역 값 width=device-width를 사용하면 기기 독립형 픽셀 단위의 화면 너비와 일치하도록 페이지에 지시합니다. 단일 픽셀을 나타내는 기기 (또는 밀도) 독립 픽셀로, 고밀도 화면에서는 다수의 실제 픽셀로 구성될 수 있습니다. 이렇게 하면 렌더링되는 화면이 작은 휴대전화이든 대형 데스크톱 모니터이든 다양한 화면 크기에 맞게 페이지의 콘텐츠를 재배열할 수 있습니다.

텍스트가 매우 축소되어 읽기 어려운 페이지의 스크린샷.
표시 영역 메타 태그가 없는 기기에서 페이지가 로드되는 방식의 예 Glitch에서 이 예를 참고하세요.
읽을 수 있는 크기의 텍스트가 있는 동일한 페이지의 스크린샷
표시 영역 메타 태그가 있는 기기에서 페이지가 로드되는 방식의 예 Glitch에서 이 예를 참고하세요.

일부 브라우저에서는 가로 모드로 회전할 때 페이지 너비를 일정하게 유지하며, 화면을 채우도록 재배치하는 대신 확대/축소합니다. initial-scale=1 값을 추가하면 브라우저가 기기 방향과 관계없이 CSS 픽셀과 기기 독립형 픽셀 간에 1:1 관계를 설정하고 페이지에서 전체 가로 너비를 활용할 수 있습니다.

width 또는 initial-scale가 포함된 <meta name="viewport"> 태그가 없음 Lighthouse 감사를 사용하면 HTML 문서에서 표시 영역 메타 태그를 올바르게 사용하고 있는지 확인하는 프로세스를 자동화할 수 있습니다.

액세스 가능한 표시 영역 확인

initial-scale 설정 외에도 표시 영역에 다음 속성을 설정할 수도 있습니다.

  • minimum-scale
  • maximum-scale
  • user-scalable

이를 설정하면 사용자가 표시 영역을 확대/축소할 수 없게 되어 접근성 문제가 발생할 수 있습니다. 따라서 이러한 속성은 사용하지 않는 것이 좋습니다.

표시 영역에 맞게 콘텐츠 크기 조정

데스크톱과 휴대기기에서 사용자는 웹사이트를 가로가 아닌 세로로 스크롤하는 데 익숙하므로, 전체 페이지를 보기 위해 가로로 스크롤하거나 축소해야 하면 사용자 환경이 저하됩니다.

메타 표시 영역 태그를 사용하여 모바일 사이트를 개발할 때 지정된 표시 영역에 맞지 않는 페이지 콘텐츠가 실수로 만들어지기 쉽습니다. 예를 들어 표시 영역보다 넓은 너비로 표시되는 이미지의 경우 표시 영역이 가로로 스크롤될 수 있습니다. 사용자가 가로로 스크롤하지 않아도 되도록 이 콘텐츠를 표시 영역의 너비에 맞게 조정해야 합니다.

콘텐츠 크기가 표시 영역에 맞게 조정되지 않음 Lighthouse 감사는 오버플로 콘텐츠 감지 프로세스를 자동화하는 데 도움이 될 수 있습니다.

이미지

이미지의 크기는 고정되어 있으며 표시 영역보다 큰 경우 스크롤바가 발생합니다. 이 문제를 처리하는 일반적인 방법은 모든 이미지에 100%max-width를 제공하는 것입니다. 이렇게 하면 표시 영역 크기가 이미지보다 작아야 하는 경우 공간에 맞게 이미지가 축소됩니다. 그러나 width가 아닌 max-width100%이므로 이미지가 원래 크기보다 크게 늘어나지 않습니다. 스크롤바를 유발하는 이미지에 문제가 발생하지 않도록 일반적으로 다음을 스타일시트에 추가하는 것이 안전합니다.

img {
  max-width: 100%;
  display: block;
}

img 요소에 이미지의 크기를 추가합니다.

max-width: 100%를 사용하는 경우 이미지의 자연스러운 크기를 재정의하지만 <img> 태그에서는 widthheight 속성을 계속 사용해야 합니다. 최신 브라우저는 이미지가 로드되기 전에 이 정보를 사용하여 이미지 공간을 예약하므로 콘텐츠가 로드될 때 레이아웃 변경을 방지하는 데 도움이 됩니다.

레이아웃

CSS 픽셀의 화면 크기와 너비는 기기마다 크게 다르므로(예: 스마트폰과 태블릿 간, 심지어 다른 스마트폰 간) 잘 렌더링되기 위해서는 콘텐츠가 특정 표시 영역 너비에 종속되어서는 안 됩니다.

이전에는 백분율로 레이아웃을 만드는 데 사용되는 설정 요소가 필요했습니다. 아래 예에서는 픽셀을 사용하여 크기가 조정된 플로팅 요소가 있는 2열 레이아웃을 볼 수 있습니다. 표시 영역이 열의 총 너비보다 작아지면 콘텐츠를 보려면 가로로 스크롤해야 합니다.

대부분의 두 번째 열이 표시 영역 밖에 있는 2열 레이아웃의 스크린샷
픽셀을 사용하는 플로팅 레이아웃입니다. Glitch에서 이 예를 참고하세요.

너비에 백분율을 사용하면 열이 항상 컨테이너의 특정 비율로 유지됩니다. 즉, 스크롤바를 만드는 대신 열이 더 좁아집니다.

Flexbox, 그리드 레이아웃, Multicol과 같은 최신 CSS 레이아웃 기법을 사용하면 이러한 유연한 그리드를 훨씬 쉽게 만들 수 있습니다.

플렉스박스

이 레이아웃 방법은 다양한 크기의 항목 집합이 있고 이러한 항목을 행이나 행에 편안하게 맞추고자 할 때 이상적이며, 작은 항목은 더 적은 공간을 차지하고 큰 항목은 더 많은 공간을 차지합니다.

.items {
  display: flex;
  justify-content: space-between;
}

반응형 디자인에서는 Flexbox를 사용하여 항목을 단일 행으로 표시하거나 사용 가능한 공간이 줄어듦에 따라 여러 행에 래핑되도록 할 수 있습니다.

Flexbox에 대해 자세히 알아보기

CSS 그리드 레이아웃

CSS 그리드 레이아웃을 사용하면 유연한 그리드를 간단하게 생성할 수 있습니다. 백분율로 열을 만드는 대신 이전의 플로팅 예를 고려하면 그리드 레이아웃과 컨테이너에서 사용 가능한 공간의 일부를 나타내는 fr 단위를 사용할 수 있습니다.

.container {
  display: grid;
  grid-template-columns: 1fr 3fr;
}

그리드를 사용하여 필요한 만큼 항목이 포함된 일반 그리드 레이아웃을 만들 수도 있습니다. 화면 크기가 줄어들면 사용 가능한 트랙 수가 줄어듭니다. 아래 데모에는 각 행에 들어갈 수 있는 만큼의 카드가 있으며 최소 크기는 200px입니다.

CSS 그리드 레이아웃에 관한 자료 읽기

다중 열 레이아웃

일부 레이아웃 유형의 경우 column-width 속성을 사용하여 반응형 열을 만들 수 있는 다중 열 레이아웃 (멀티컬)을 사용할 수 있습니다. 아래 데모에서는 다른 200px 열을 위한 공간이 있으면 열이 추가된 것을 볼 수 있습니다.

멀티컬에 대해 자세히 알아보기

응답성을 위해 CSS 미디어 쿼리 사용

특정 화면 크기를 지원하기 위해 위에 나온 기법에서 허용하는 것보다 더 광범위하게 레이아웃을 변경해야 하는 경우도 있습니다. 이때 미디어 쿼리가 유용합니다.

미디어 쿼리는 CSS 스타일에 적용할 수 있는 간단한 필터입니다. 콘텐츠를 렌더링하는 기기의 유형이나 기기의 기능(예: 너비, 높이, 방향, 마우스 오버 기능, 기기가 터치스크린으로 사용되고 있는지 여부)에 따라 스타일을 쉽게 변경할 수 있습니다.

다양한 인쇄 스타일을 제공하려면 다음과 같이 인쇄 스타일이 있는 스타일시트를 포함할 수 있도록 출력 유형을 타겟팅해야 합니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    …
    <link rel="stylesheet" href="print.css" media="print">
    …
  </head>
  …

또는 미디어 쿼리를 사용하여 기본 스타일시트 내에 인쇄 스타일을 포함할 수 있습니다.

@media print {
  /* print styles go here */
}

반응형 웹 디자인의 경우 일반적으로 작은 화면에 다른 레이아웃을 제공하기 위해 또는 방문자가 터치스크린을 사용 중임을 감지할 때 기기의 기능을 쿼리합니다.

표시 영역 크기를 기반으로 한 미디어 쿼리

미디어 쿼리를 사용하면 특정 스타일이 작은 화면과 큰 화면 및 그 사이의 모든 곳에 적용되는 반응형 환경을 만들 수 있습니다. 따라서 여기에서 감지하는 기능은 화면 크기이며 다음 사항을 테스트할 수 있습니다.

  • width(min-width, max-width)
  • height(min-height, max-height)
  • orientation
  • aspect-ratio

이러한 모든 기능은 탁월한 브라우저 지원을 제공합니다. 브라우저 지원 정보를 비롯한 자세한 내용은 MDN의 너비, 높이, 방향, 가로세로 비율을 참고하세요.

기기 기능에 기반한 미디어 쿼리

사용 가능한 기기의 범위를 감안할 때 모든 대형 기기가 일반 데스크톱 또는 노트북 컴퓨터이거나 사람들이 소형 기기에서만 터치스크린을 사용한다고 가정할 수 없습니다. 미디어 쿼리 사양에 새로 추가된 기능으로 기기와 상호작용하는 데 사용되는 포인터 유형 및 사용자가 요소 위로 마우스를 가져가도 되는지 여부와 같은 기능을 테스트할 수 있습니다.

  • hover
  • pointer
  • any-hover
  • any-pointer

일반 데스크톱 컴퓨터, 스마트폰, 태블릿 등 다양한 기기에서 이 데모를 시청해 보세요.

이러한 최신 기능은 모든 최신 브라우저에서 원활하게 지원됩니다. MDN 페이지에서 hover, 마우스 오버, 포인터, 모든 포인터에 대해 자세히 알아보세요.

any-hoverany-pointer 사용

any-hoverany-pointer 기능은 사용자가 기기와 상호작용하는 기본적인 방법이 아니더라도 사용자가 마우스 오버하거나 이러한 유형의 포인터를 사용할 수 있는지 테스트합니다. 이러한 기능을 사용할 때는 주의해야 합니다. 사용자가 터치스크린을 사용할 때 마우스로 전환하도록 강요하는 것은 그리 친근하지 않습니다. 그러나 사용자가 보유한 기기의 종류를 파악하는 것이 중요한 경우 any-hoverany-pointer가 유용할 수 있습니다. 예를 들어 터치스크린과 트랙패드가 있는 노트북은 마우스 오버 기능 외에 대략적 또는 미세한 포인터와 일치해야 합니다.

중단점을 선택하는 방법

기기 클래스를 기반으로 중단점을 정의하지 않습니다. 오늘날 사용 중인 특정 기기, 제품, 브랜드 이름, 운영체제를 기반으로 중단점을 정의하면 유지보수가 매우 끔찍할 수 있습니다. 대신 콘텐츠 자체에서 레이아웃이 컨테이너에 맞게 조정되는 방식을 결정해야 합니다.

소규모로 시작한 다음 늘려가면서 주요 중단점을 선택하세요.

먼저 작은 화면에 맞게 콘텐츠를 디자인한 다음 중단점이 필요할 때까지 화면을 확장합니다. 이렇게 하면 콘텐츠에 따라 중단점을 최적화하고 가능한 최소 개수의 중단점을 유지할 수 있습니다.

앞에서 살펴보았던 일기예보의 예를 살펴보겠습니다. 먼저 작은 화면에 예측이 제대로 표시되도록 해야 합니다.

모바일 너비의 날씨 앱 스크린샷
좁은 너비의 앱

그런 다음 요소 사이에 공백이 너무 많아서 예보가 보기에 좋지 않을 때까지 브라우저의 크기를 조정합니다. 이 결정은 다소 주관적이며, 600px보다 큰 것은 확실히 너무 넓습니다.

항목 사이에 넓은 간격이 있는 날씨 앱의 스크린샷
앱 디자인을 수정해야 한다고 생각하는 시점입니다.

600px에 중단점을 삽입하려면 구성요소의 CSS 끝에 두 개의 미디어 쿼리를 만듭니다. 하나는 브라우저가 600px 이하일 때 사용할 것이고 다른 하나는 600px보다 넓을 때 사용할 쿼리입니다.

@media (max-width: 600px) {

}

@media (min-width: 601px) {

}

마지막으로, CSS를 리팩터링합니다. 600pxmax-width에 관한 미디어 쿼리 내에서 작은 화면 전용 CSS를 추가합니다. 601pxmin-width에 관한 미디어 쿼리 내에 큰 화면을 위한 CSS를 추가합니다.

필요한 경우 하위 중단점 선택

레이아웃이 대폭 변경될 때 주요 중단점을 선택하는 것 외에도 사소한 변경사항에 맞게 조정하는 것도 유용합니다. 예를 들어 주요 중단점 간에 요소의 여백이나 패딩을 조정하거나 글꼴 크기를 늘려 레이아웃에서 더 자연스럽게 보이도록 하는 것이 도움이 될 수 있습니다.

먼저 작은 화면 레이아웃을 최적화해 보겠습니다. 여기서는 표시 영역 너비가 360px보다 클 때 글꼴을 증폭해 보겠습니다. 둘째, 공간이 충분한 경우에는 위에 놓지 않고 같은 줄에 표시되도록 최고 기온과 최저 기온을 구분할 수 있습니다. 날씨 아이콘도 좀 더 크게 만들어 보겠습니다.

@media (min-width: 360px) {
  body {
    font-size: 1.0em;
  }
}

@media (min-width: 500px) {
  .seven-day-fc .temp-low,
  .seven-day-fc .temp-high {
    display: inline-block;
    width: 45%;
  }

  .seven-day-fc .seven-day-temp {
    margin-left: 5%;
  }

  .seven-day-fc .icon {
    width: 64px;
    height: 64px;
  }
}

마찬가지로 대형 화면의 경우 전체 화면 너비를 사용하지 않도록 예측 패널의 최대 너비로 제한하는 것이 가장 좋습니다.

@media (min-width: 700px) {
  .weather-forecast {
    width: 700px;
  }
}

읽기에 맞게 텍스트 최적화

전통적인 가독성 이론에 따르면 이상적인 열은 한 줄에 70~80자(영문 기준 약 8~10단어)를 포함해야 합니다. 따라서 텍스트 블록의 너비가 약 10단어를 넘어설 때마다 중단점을 추가하는 것이 좋습니다.

휴대기기에 표시된 텍스트 페이지의 스크린샷
휴대기기에서 읽은 텍스트입니다.
데스크톱 브라우저의 텍스트 페이지 스크린샷
데스크톱 브라우저에서 읽은 텍스트이며 줄 길이를 제한하는 중단점이 추가되었습니다.

위의 블로그 게시물 예시를 더 자세히 살펴보겠습니다. 작은 화면에서는 1em의 Roboto 글꼴이 한 줄당 10단어를 완벽하게 제공하지만 큰 화면에는 중단점이 필요합니다. 이 경우 브라우저 너비가 575px보다 크다면 이상적인 콘텐츠 너비는 550px입니다.

@media (min-width: 575px) {
  article {
    width: 550px;
    margin-left: auto;
    margin-right: auto;
  }
}

단순히 콘텐츠를 숨기지 마세요.

화면 크기에 따라 숨기거나 표시할 콘텐츠를 선택할 때는 주의해야 합니다. 화면에 맞지 않는다는 이유만으로 콘텐츠를 숨기지는 마세요. 사용자가 원하는 것을 화면 크기가 확실한 지표가 아닙니다. 예를 들어 봄철 알레르기 증상이 있는 사람이 외출 가능 여부를 판단해야 하는 경우 날씨 예보에서 꽃가루 수를 제거하는 것은 심각한 문제가 될 수 있습니다.

Chrome DevTools에서 미디어 쿼리 중단점 보기

미디어 쿼리 중단점을 설정한 후 이 중단점과 함께 사이트가 어떻게 표시되는지 확인할 수 있습니다. 브라우저 창 크기를 조절하여 중단점을 트리거할 수도 있지만 Chrome DevTools에는 다른 중단점에서 페이지가 어떻게 표시되는지 쉽게 확인할 수 있는 기능이 내장되어 있습니다.

날씨 앱이 열려 있고 822픽셀의 너비가 선택된 DevTools의 스크린샷.
표시 영역이 더 넓을 때 보이는 날씨 앱을 보여주는 DevTools
날씨 앱이 열려 있고 너비 436픽셀이 선택된 DevTools의 스크린샷.
좁은 표시 영역 크기를 확인하는 날씨 앱을 보여주는 DevTools

중단점이 서로 다른 페이지를 보려면 다음 단계를 따르세요.

DevTools를 열고 Device Mode를 사용 설정합니다. 이 기능은 기본적으로 반응형 모드에서 열립니다.

미디어 쿼리를 보려면 Device Mode 메뉴를 열고 Show media query를 선택하여 페이지 위에 중단점을 색상 막대로 표시합니다.

막대 중 하나를 클릭하면 미디어 쿼리가 활성화되어 있는 동안 페이지가 표시됩니다. 미디어 쿼리의 정의로 이동하려면 막대를 마우스 오른쪽 버튼으로 클릭합니다.