반응형 웹 기술 이해 :: 디자인일반[SSISO Community]

SK planet Syrup Store 개발그룹에서 웹 프론트엔드 개발을 담당하고 있는 정찬명입니다.
오늘은 반응형 웹 기술의 기본적인 원리와 실제 구현 시 빈번하게 마주치는 문제에 대한 해결 방법을 설명하려고 합니다. 포함한 사례들은 정답이 있는 문제가 아니기 때문에 여러 대안 가운데 하나의 사례 정도로 이해해 주세요.

다양한 해상도에 대응하기 위하여 하루에 수도 없이 쏟아져 나오는 새로운 단말기 해상도를 일일이 기억할 필요는 없습니다. 반응형 웹은 사용자의 특정 해상도를 가정하지 않는 것으로부터 출발합니다. 반응형 웹은 모든 해상도를 커버할 수 있고, 의도에 따라 특정 해상도 범위에 제한적으로 적용할 수도 있으며, 적절한 중단점(breakpoint)을 제공하기도 합니다.

이 포스팅을 읽고 계시는 여러분들은 이 글을 통해서 반응형 웹을 어떻게 시작해야 하는지, 그리고 어떤 문제를 염두해 두어야 하는지 기본적인 개념들을 이해할 수 있게 될 것입니다.

Part.1 가변폭 설정하기

가변폭 웹 사이트 구조(전체 폭이 가변폭으로 설정 됨) 반응형 웹의 첫 번째 단계는 웹 문서의 너비를 가변폭으로 설정하는 것입니다. 웹 문서의 폭을 가변폭으로 설정하면 모든 해상도에 대응할 수 있습니다. 웹 문서 너비를 가변폭으로 설정하는 방법은 두 가지입니다.

링크한 두 예제의 결과는 동일합니다. 뷰 포트의 너비에 알맞게 내용이 흐른다는 사실을 확인할 수 있습니다. 하지만 우리가 마주하는 대부분의 웹 문서는 이렇게 단순하지 않지요. 계속해서 읽으신다면 조금 더 현실적인 예제들을 만날 수 있습니다.

Part.2 최솟값/최댓값 설정하기

다양한 크기의 해상도를 가진 단말. — 이미지 출처: Responsive Web Design – What’s it all about?

항상 웹 문서의 최소 너비와 최대 너비 값을 설정하세요. 예를 들어…

모든 단말(모바일, 태블릿, 데스크톱)의 해상도를 커버해야 한다면 320~1280 정도의 최솟값과 최댓값을 설정합니다.
태블릿과 데스크톱 대응 서비스를 만든다면 768~1280 정도를 설정하고요.
모바일과 태블릿 대응 서비스를 만든다면 320~1024 정도를 설정합니다.

최솟값을 설정하지 않으면 웹 문서의 폭은 이론적으로 0px이 될 수도 있습니다. 최댓값을 설정하지 않으면 웹 문서의 폭은 수천 픽셀(또는 무한대)이 될 수도 있습니다. 이렇게 최솟값과 최댓값을 제한하는 이유는 우리의 예측이 언제든지 빗나갈 수 있다는 것(브라우저의 창 너비를 0px에 가깝게 줄이거나 듀얼 모니터를 사용하는 경우)을 가정하기 때문입니다.

지금까지 보여드린 예제는 허무하리만큼 단순합니다. 조금 더 현실적인 예제를 만나 보시죠.

Part.3 컬럼 나누기

컬럼이 나누어진 웹 페이지 Part.1~Part.2 에서 우리는 컬럼이 하나뿐인 단순한 예제를 살펴 보았습니다. 모바일 전용 웹 서비스에서는 그나마 저 정도 지식만으로도 쓸만 하지요. 그러나 태블릿과 데스크톱 웹에서 컬럼 없는 디자인은 상상하기 어렵습니다. 대부분의 웹 문서가 2개 이상의 컬럼을 사용하고 있지요. Part.1~Part.2에서 배운 지식을 토대로 컬럼이 2개 존재하는 반응형 웹 문서를 한 번 만들어 보았습니다. 이 예제는 화면을 둘로 쪼갠 다음 각 컬럼에 20%, 80%에 해당하는 가변폭 너비를 설정해 주었습니다. 그러나 이런 구현은 다음과 같은 두 가지 문제가 있습니다.

모든 컬럼의 너비가 문서의 최소/최대 너비에 의존하고 있다.
모바일과 같이 좁은 화면에서는 컬럼 나누기가 적당하지 않다.

컬럼의 너비가 문서의 최솟값/최댓값 너비에 의존하고 있기 때문에 작은 폭의 컬럼은 작은 화면에서 너무 작게 표시됩니다. 예를 들어 화면 좌측의 네비게이션 영역은 보통 문자열의 길이가 달라지지 않기 때문에 고정폭으로 표시하는 것이 더 적절합니다. 네비게이션 영역을 가변폭으로 처리하게 되면 좁은 화면에서 모든 문자열을 표시하지 못하고 줄바꿈 될 것입니다. 이 문제를 해결하려면 Part.4 하이브리드 레이아웃을 참고 하세요.

모바일 단말의 스크린 사이즈는 최소 320px까지 좁아집니다. 이런 작은 화면에서 컬럼을 나누는 경우는 드물죠. 컬럼 나누기 처리된 웹 문서를 모바일에서 적절하게 보여주기를 원한다면 Part.5 미디어 쿼리 설정을 참고 하세요.

Part.4 하이브리드 레이아웃

Part.3를 통해서 모든 컬럼의 너비를 가변폭으로 설정하는 것이 일반적으로 적절하지 않다는 사실을 배웠습니다.

2컬럼 하이브리드 레이아웃 3컬럼 하이브리드 레이아웃 반응형 웹에서 실제로 유용하게 쓰이는 컬럼 폭 설정 기법은 고정폭 컬럼과 가변폭 컬럼을 혼용해서 구현하는 하이브리드 레이아웃입니다.

문서의 전체 너비와 본문 콘텐츠는 가변폭으로 설정했지만, 네비게이션 또는 사이드바 영역에는 독립적으로 고정폭을 적용함으로써 화면 폭과 무관하게 충분한 너비를 확보할 수 있게 됩니다.

하이브리드 2 컬럼 레이아웃 = 고정폭 + 가변폭
하이브리드 3 컬럼 레이아웃 = 고정폭 + 가변폭 + 고정폭

하이브리드 레이아웃 기법으로는 데스크톱이나 테블릿 정도의 단말을 커버할 수 있을 것입니다. 그러나 컬럼 레이아웃을 사용하지 않는 모바일 화면에 대응할 수 없습니다. 모바일 단말에서 컬럼 레이아웃을 어떻게 처리해야 하는지 알고 싶다면Part.5 미디어 쿼리 설정 항목을 추가로 참고하세요.

Part.5 미디어 쿼리 설정

미디어 쿼리를 이용하여 화면 크기(모바일, 테블릿, 데스크톱) 별로 레이아웃을 다르게 설정한 예

CSS3 미디어 쿼리는 화면 크기에 따라서 각기 다른 CSS를 적용할 수 있는 중단점(혹은 분기점)을 제공합니다. 미디어 쿼리를 사용한 간단한 예제를 한 번 보시죠. 데스크톱 브라우저의 창 크기를 조절해서 뷰 포트의 크기가 달라질 때 마다 서로 다른 내용과 스타일이 화면에 표시 된다는 사실을 확인하세요.

/* All – 모든 해상도에서 해석하는 코드(미디어 쿼리 적용 안 함) */
…

/* Mobile – 767px 이하 해상도에서 해석하는 코드 */
@media (max-width:767px){ … }

/* Tablet & Desktop – 768px 이상 해상도에서 해석하는 코드 */
@media (min-width:768px){ … }

/* Tablet – 768px~1024px 해상도에서 해석하는 코드 */
@media (min-width:768px) and (max-width:1024px){ … }

/* Desktop – 1025px 이상 해상도에서 해석하는 코드 */
@media (min-width:1025px){ … }

Part.1 ~ Part.5 까지 언급한 내용을 모두 적용한 예제를 확인해 보세요. Part.1 전체 폭이 가변폭으로 설정되어 있고, Part.2 최솟값과 최댓값이 설정되어 있고, Part.3 컬럼이 존재하며, Part.4 고정폭과 가변폭이 혼합되어 있고, Part.5 미디어 쿼리를 사용해서 적절한 중단점을 제공했습니다.

하지만 아직 콘텐츠를 포함하기에 완벽한 것은 아닙니다. 데스크톱 브라우저의 창 크기를 조절하여 본문 영역에 포함된 이미지와 미디어 콘텐츠가 가변폭에 대응하지 못 하고 있다는 사실을 확인하세요. 이 문제를 해결하려면 Part.6 가변폭 미디어 콘텐츠 항목을 참고하세요.

Part.6 가변폭 미디어 콘텐츠

본문의 가변폭 너비에 대응하는 반응형 이미지 본문 영역을 가변폭으로 처리했다면 포함하는 콘텐츠 역시 가변폭에 대응해야 합니다.

일반적인 문자열은 가변폭을 가진 부모 요소의 너비에 따라서 자동으로 줄바꿈 처리가 되지만 이미지와 비디오 같은 미디어 콘텐츠 요소는 기본적으로 고정폭을 지니고 있기 때문에 가변폭을 가진 본문 너비에 대응할 수 있도록 너비를 다시 설정해 주어야 합니다. 예를 들면 다음과 같은 원칙을 적용할 수 있습니다.

본문 너비보다 작은 너비의 이미지는 아무런 처리를 하지 않는다.
본문 너비보다 큰 너비의 이미지는 본문 너비를 초과하지 않도록 너비를 100%로 재설정 한다.
비디오는 본문 너비와 동일하도록 무조건 100%로 다시 설정한다.
이미지 또는 비디오의 너비가 재설정 될 때 높이 또한 동일한 비율로 다시 설정한다.

이런 원칙을 적용하면 가변폭에 완벽하게 대응하는 본문 콘텐츠를 만들 수 있습니다. 데스크톱 브라우저의 창 크기를 조절하여 본문 콘텐츠(이미지, 비디오)가 가변폭에 대응하는 것을 확인하세요. 적용한 소스코드는 다음과 같습니다.

img, video{ max-width:100%; height:auto; }
video{ min-width:100%; }

이미지나 비디오 문제를 해결했다면 테이블 콘텐츠는 어떻게 처리해야 하는지 또한 궁금해질 것입니다.

Part.7 고정폭 테이블

반응형 웹에서 골치아픈 문제 중의 하나가 바로 테이블 입니다. 스크린 사이즈가 넓은 단말에서는 그럭 저럭 봐 줄만 하지만 모바일 환경에서 표를 표현하는 것에 대해 사람들은 몇 가지 대안을 내놨습니다. 대안 1, 대안 2.

첫 번째 대안은 CSS만을 활용한 것인데 표 하나를 만들 때마다 로컬 CSS 코드를 추가해야 하기 때문에 매우 성가신 대안입니다. 두 번째 대안은 자바스크립트를 추가하여 반복 작업을 줄이기는 했지만 인터페이스가 사용자를 고민하게 만든다는 측면에서 제 주의를 끌지는 못 했습니다.

만약 여러분도 최소한의 코드로 사용자를 고민에 빠뜨리지 않고 반응형 테이블을 표현하기를 원한다면 정말 구현하기 쉬운 반응형 테이블 예제를 확인해 주시기 바랍니다. 데스크톱 브라우저의 창 크기를 조절하여 좁은 화면에서 테이블이 어떻게 표현되는지 살펴 보세요.

.table{ overflow:auto; }

<div class="table">
<table>…</table>
</div>

테이블이 본문 폭을 넘칠 때 가로로 스크롤 할 수 있도록 처리한 것 뿐입니다. 구현할 때에도 복잡하지 않을 뿐더러 사용자를 고민에 빠뜨리지도 않을 것입니다. 물론 제 의견에 동의하지 않으신다면 대안 1 또는 대안 2를 활용하는 것도 나쁜 선택은 아닙니다.

미디어 쿼리와 CSS 속성을 절묘하게 버무린 대안 3 도 매력적인 방법이네요.

대안 3의 테이블 구조: th 셀을 좌측에 고정하고 td 셀들은 가로 스크롤을 이용하여 탐색 — 이미지 출처: A New Take on Responsive Tables.

Part.8 모바일 뷰 포트 설정

스마트폰 기기는 테블릿이나 데스크톱과 달리 독자적인 뷰 포트 처리 방식을 가지고 있습니다.

테블릿과 데스크톱의 뷰 포트는 웹 문서의 너비와 무관하게 화면에 보이는 영역이 뷰 포트가 되고, 데스크톱은 웹 브라우저의 창 크기를 조절함으로써 사용자가 뷰 포트의 크기를 직접 제어할 수도 있게 됩니다.

한편 스마트폰의 경우 단말의 스크린 사이즈와 무관하게 웹 문서의 너비와 높이가 뷰 포트가 되고 스마트폰 스크린에 웹 문서(뷰 포트)를 모두 출력하기 위해 스크린 사이즈보다 큰 문서는 자동으로 줌 아웃 처리를 합니다. 다시 말하면 뷰 포트를 스크린 크기에 맞게 강제로 축소하는 것입니다. 결과적으로 데스크톱에 대응하도록 만들어진 문서를 스마트폰으로 열어 보면 통상 3~4배 이상 줌 아웃 되어 글씨를 알아 볼 수 없는 형태로 작게 표시합니다.

이 문제를 해결하려면 HTML 문서 <head> 영역에 모바일 뷰 포트를 재설정하는 <meta> 코드 한 줄을 추가하면 간단하게 해결 됩니다.

<meta name="viewport" content="width=device-width">

이 코드는 스마트폰 웹 브라우저에서만 해석이 되고, 스마트폰의 뷰 포트 영역은 더 이상 문서가 아니라 스크린 영역이 됩니다. 이 코드는 다음과 같이 작용합니다.

뷰 포트를 문서가 아닌 스크린 영역으로 재 설정.
웹 문서를 강제로 스크린 사이즈에 맞게 줌 아웃 하지 않음.

모바일 뷰 포트가 설정되지 않은 화면: 줌 아웃 된다 — 모바일 뷰 포트 적용 전후 스마트폰 화면 표시 예. 이미지 출처: Configuring the viewport.

모바일 뷰 포트가 설정된 화면: 줌 아웃 되지 않는다 — 모바일 뷰 포트 적용 전후 스마트폰 화면 표시 예. 이미지 출처: Configuring the viewport.

뷰 포트를 재 설정함으로써 스마트폰에서 웹 문서를 원본 크기로 표시하게 되면 스크린 사이즈보다 더 큰 너비를 가지고 있는 문서는 가로 스크롤을 유발하게 되는데요. 이 문제는 웹 문서와 콘텐츠의 너비를 가변폭으로 설정하고 미디어 쿼리를 이용해서 좁은 스크린 상태의 레이아웃을 다시 배치하면 됩니다.

뷰 포트에 관한 더 많은 옵션들: Supported Meta Tags.

Part.9 글꼴 크기를 반응형으로 제어

반응형으로 처리되는 글꼴 크기 Part.8 모바일 뷰 포트 설정을 통해서 화면 표시 배율을 적절하게 만들면 스마트폰에서 글꼴이 너무 작아지는 문제는 발생하지 않기 때문에 글꼴 크기까지 반응형으로 직접 제어해야 하는 상황은 일반적인 상황은 아닙니다. 읽기에 적절한 크기로 표시하기 때문에 통상 글꼴 크기까지 직접 나서서 제어할 필요는 없다는 의미입니다.

그러나 디자이너 의도에 따라 화면 폭에 알맞에 적절한 글자 수를 배치하고 동적인 화면 크기에 따라 동등한 배율로 글꼴 크기를 표현해야 할 때 개발자는 의도에 따라 제어할 수 있어야 합니다. 이해를 돕기 위해 아래 두 예제를 직접 확인해 보세요. 웹 브라우저의 창 크기를 조절하여 화면 크기와 글꼴 크기가 비례하여 조절이 되는지 확인하세요.

반응형 글꼴 크기의 비밀은 rem(root em) 이라 부르는 단위에 있습니다. HTML 에서 root는 곧 <html> 요소를 의미하는데요. 글꼴 크기에 rem 이라는 단위를 적용하면 <html> 요소의 글꼴 크기로부터 자신(<body>, <div>, <span> 등등…)의 글꼴 크기를 상대적으로 계산합니다. 상대적이라는 의미는 <html> 요소의 글꼴 크기가 바뀔 때 자신의 글꼴 크기도 함께 변경이 된다는 의미 입니다.

그렇다면 <html> 요소의 글꼴 크기는 어떻게 동적으로 결정이 될까요? 미디어 쿼리를 이용하면 화면 크기에 따라 동적으로 결정할 수 있습니다.

반응형 웹 글꼴은 결국 다음과 같은 절차로 실행합니다.

미디어 쿼리를 이용해서 화면 너비에 비례하도록 <html> 요소의 글꼴 크기를 절대 단위(px)로 지정한다.
<body>, <div>, <span> 등등… 반응형으로 글꼴 크기를 제어하고자 하는 요소를 선택하여 글꼴 크기를 상대(rem) 단위로 지정한다.
사용자 환경에 따라 뷰 포트의 너비가 달라지면 <html> 요소의 글꼴 절대 크기도 화면 크기에 비례하여 달라진다.
<html> 요소의 글꼴 크기가 달라지면 <body>, <div>, <span> 등등… rem 단위를 적용한 요소의 글꼴 크기도 <html> 요소의 글꼴 크기에 비례하여 함께 달라진다.

결국 사용자 단말의 화면 크기는 <html> 요소의 글꼴 크기를 결정하고, rem 단위를 사용한 요소들은 <html> 요소로부터 글꼴 크기를 결정하게 되어 화면 크기가 글꼴 크기에 영향을 미치는 원리입니다.

만약 <html> 요소로부터 글꼴 크기를 상속 받을 수 있는 rem 이라는 개념의 단위가 없다면 글꼴 크기는 절대 값으로 결정이 되거나, 또는 오직 부모 요소로부터 상속 받을 수 있기 때문에 미디어 쿼리가 있다 하더라도 훨씬 더 복잡한 로직으로 구현할 수 밖에 없게 됩니다.

이 글에서는 rem 이라는 단위에 대한 개념만 설명했는데요. 실제 구현을 위한 기술적인 내용을 자세히 알고 싶다면 글꼴 사이즈를 반응형으로 만들기 포스팅을 참고하세요.

Part.10 웹 폰트 사용

웹 폰트 사용 예 웹 폰트를 사용하고 싶다면 미디어 쿼리를 통해 스마트폰 단말 영역으로 추정할 수 있는 해상도를 분기하고 스마트폰 단말에는 적용하지 않는 것이 좋은데요. 그 이유는 다음과 같습니다.

한글 글꼴이 포함된 웹 폰트는 용량을 아무리 최적화 하더라도 일반적으로 웹 문서 용량의 30% 이상을 차지하게 된다.
웹 폰트는 느리게 로딩되기 때문에 글꼴이 로딩되기 전까지 화면을 출력하지 않거나 또는 글꼴이 로딩된 이후 화면을 다시 출력하는 문제가 있다.

따라서 웹 폰트를 사용하고 싶다면 테블릿 또는 데스크탑 화면으로 추정할 수 있는 화면 크기에 한해 제한적으로 적용하는 것이 좋습니다. 스마트폰 단말은 일반적으로 작은 화면에 최적화된 시스템 글꼴을 제공하기 때문에 모바일 환경에서 웹 폰트를 걷어내는 것이 더 좋은 UX라고 말할 수 있습니다.

작은 화면에서 웹 폰트를 걷어내도록 처리한 반응형 웹 예제. 웹 브라우저의 창 크기를 조절하여 큰 화면과 작은 화면에서 글꼴을 다르게 표시하는 것을 확인하세요.

한편 웹 폰트 사용을 권장할만한 상황도 있습니다. 웹 폰트는 글꼴 아웃라인 정보만 담아낼 수 있는 것은 아니기 때문에 다양한 형태의 그래픽 정보를 표현할 수 있고 백터 방식으로 출력하기 때문에 확대 축소를 해도 비트맵처럼 계단 현상이 발생하지 않습니다. 또한 웹 문서 안에서 글꼴처럼 다루기 때문에 하나의 심볼은 크기 뿐만 아니라 색상 또한 자유롭게 변경하여 재 사용이 가능합니다.