반응형 웹(responsive web)
1. 반응형 웹이란?
반응형 웹이란 사이트가 보여지는 장치의 요구사항(화면 크기 등)에 대응하도록 만든 사이트를 말한다.
사람들이 사이트를 접속할 수 있는 장치가 pc밖에 없던 시절에는 pc에서 볼수 있는 사이트만 개발하면 됬지만 이제는 pc 뿐만 아니라 휴대폰, 테블릿 심지어 웨어러블에 이르기까지 다양한 화면의 크기가 존재하고, 각 장치들마다도 모델별, 사양별로 크기가 다르기 때문에 사이트가 모든 화면의 크기에 적응할 수 있도록 하는 것이 중요하다. 반응형 웹은 이러한 모든 사항을 고려하여 모든 사람의 경험을 최적화하는 기술이다.
2. 뷰포트 설정
반응형 웹을 사용하기 위해서는 html 문서의 head에 viewport와 관련된 meta 태그를 넣어야한다. 이 meta 태그는 페이지의 크기와 배율을 제어하는 방법에 대한 정보를 브라우저에 제공한다. width=device-width를 사용하면 장치가 가진 픽셀로 화면 너비를 일치시킬 것을 페이지에 지시한다. initial-scale=1은 브라우저가 장치의 방향과 상관 없이 css 픽셀과 장치가 가진 픽셀이 1:1 비율의 관계를 유지하도록 지시한다.
만약 이 meta 태그를 넣지 않고 pc에서 보던 사이트를 휴대폰으로 보게되면 pc에서 보던 크기와 똑같이 보이기 때문에 사용자가 사이트를 사용하기 위해서는 두번 탭을 하거나 핀치해서 확대한 후에 사이트를 봐야할 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
</body>
</html>
3. 뷰포트에 맞게 콘텐츠 크기 조정
콘텐츠의 크기가 뷰포트 크기보다 커서 사용자가 가로로 스크롤 하는 것은 사용자 경험에 좋지 않다. 그렇기 때문에 콘텐츠는 항상 뷰포트를 넘어가지 않도록 뷰포트 너비에 맞게 조정해야한다.
이미지
이미지는 처음부터 크기가 고정되어 있기 때문에 뷰포트보다 크기가 크면 스크롤바가 생기게 된다. 이러한 문제를 해결하기 위해 img 태그에 max-width: 100%와 display: block을 준다. 이렇게하면 뷰포트 크기가 이미지보다 작은 경우에는 이미지가 공간에 맞게 축소되고 width: 100%가 아니기 때문에 이미지의 원래 크기보다 더 커지지도 않는다.
또한 img 태그에 이미지의 크기를 나타내는 width와 height 속성을 사용해야하는데 그 이유는 브라우저가 이 정보를 바탕으로 이미지가 로드되기 전에 공간을 확보하기 때문에 페이지의 콘텐츠가 로드될 때 레이아웃이 변경되는 것을 방지할 수 있기 때문이다.
img {
max-width: 100%;
display: block;
}
레이아웃
css 작성시 px와 같은 고정적인 단위로 레이아웃을 작성하게되면 레이아웃의 크기가 고정되고, 레이아웃보다 뷰포트가 작아지게 되면 레이아웃이 뷰포트 밖으로 넘쳐 가로 스크롤바가 생기게된다. 이러한 문제가 생기지 않도록 px 대신 백분율을 사용해야하며, 백분율 사용시 콘텐츠가 뷰포트 밖으로 나가는 대신 뷰포트 안에서 레이아웃의 열이 좁아지게 되어 스크롤이 생기는 문제를 해결할 수 있다. flex와 grid layout 및 multicol과 같은 css 기술을 사용하면 이러한 유연한 레이아웃을 쉽게 만들 수 있다.
4. css 미디어 쿼리 사용하기
레이아웃을 잘 작성하는 것과 더불어 특정 뷰포트 크기에 따라 페이지의 레이아웃과 콘텐츠를 더욱 동적으로 변경해야 할 때는 css의 미디어 쿼리를 사용할 수 있다. 미디어 쿼리는 사이트를 렌더링하는 장치의 유형이나 특징(너비, 높이 방향 등)에 따라 스타일을 변경하는 기술이다.
stylesheet를 import하는 방법
html 문서의 head에 link 태그를 통해 import하는 방법(media 속성을 통해 print와 관련된 stylesheet임을 알 수 있다)
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="print.css" media="print">
</head>
<body>
</body>
</html>
css 파일 안에 @media 키워드를 통해 import하는 방법
@media print {
...style
}
viewport의 크기에 따른 미디어 쿼리
장치의 크기를 감지해 크기에 따라 style을 다르게 설정할 수 있다.
속성: width(min-width, max-width) / height(min-height, max-height) / orientation / aspect-ratio
/* 장치의 화면 크기가 600px 이하일 때 적용될 style */
@media screen and (max-width: 600px) {
...style
}
/* 장치의 화면 크기가 601px 이상이고 1000px 이하일 때 적용될 style */
@media screen and (min-width: 601px) and (max-width: 1000px) {
...style
}
장치 기능에 따른 미디어 쿼리
장치의 기능에 따라 style을 다르게 설정할 수 있다.
속성: hover / pointer / any-hover / any-pointer
5. 중단점을 선택하는 방법
특정 장치를 기준으로 중단점을 정의해서는 안된다. 그 대신 콘텐츠에 따라 레이아웃이 컨테이너에 맞게 조정되는 방식이 좋다.
주요 중단점을 선택하고 작게 시작해서 점차 확대해 나가기
먼저 작은 화면 크기에 맞게 콘텐츠를 디자인하고 화면을 확장해 나가면서 중단점이 필요한 부분을 찾는다. 중단점은 수는 가능한 최소화하는 것이 좋다. 중단점은 딱 정해진 것은 없기 때문에 콘텐츠의 배치가 육안상 이상해 보이는 부분을 중단점으로 잡는다.
필요한 경우 부수적인 중단점 선택하기
주요 중단점 외에도 부수적으로 변경해야하는 일이 생기게된다. 이럴때도 각 콘텐츠의 필요에 맞게 중단점을 선택해서 스타일을 작성하면 된다.
읽기 좋게 텍스트 최적화하기
이상적인 것은 한 줄에 70~80자(영어의 경우 약 8~10단어)가 들어가는 것이 좋다. 따라서 텍스트 블록의 너비가 약 10단어를 초과할 때마다 중단점을 추가하는 것이 좋다.
콘텐츠를 숨기지 말 것
화면 크기에 따라 콘텐츠를 숨기거나 표시할 때는 주의해야한다. 단순히 화면에 맞출 수 없다는 이유로 콘텐츠를 숨겨서는 안된다.
6. 개발자 도구를 통해 미디어 쿼리 중단점 확인하기
브라우저의 개발자 도구를 통해 중단점에 따라 사이트가 어떻게 표시되는지 확인할 수 있다.