[Web] 반응형 웹 사이트를 만드는 다양한 방법

요즘은 PC나 노트북보다 더 작은 스마트폰에서 웹 사이트에 접속하는 경우가 많습니다. 그런데 PC와 스마트폰의 화면 크기가 다르기 때문에 데스크톱 PC용으로 만들어진 웹 사이트를 스마트폰에서 접속하면 매우 작은 글씨로 표시됩니다. 데스크톱에서 보여주던 내용을 스마트폰 화면 안에 다 보여줘야 하기 때문이죠. 이러한 문제점 때문에 과거에는 모바일용으로 사이트를 별도로 제작하였습니다. 하지만 브라우저의 환경이 점차 다양해지는데 매번 PC와 모바일 사이트를 별도로 매번 유지보수하기는 쉽지 않습니다. 그래서 반응형 웹의 중요성이 대두되었습니다. 

 

반응형 웹이란?

반응형 웹(Responsive web)은 다양한 기기와 화면 크기에 자동으로 적응하는 웹 디자인 방식을 의미합니다. 반응형 웹은 사용자가 웹사이트를 모바일 기기, 태블릿, 노트북, 데스크톱 등 다양한 디바이스에서 접속할 때, 콘텐츠와 레이아웃이 유연하게 조정되어 최적의 환경에서 웹사이트를 이용할 수 있도록 합니다. 

위의 이미지를 보시면 좌측의 PC화면과 우측의 MOBILE 화면이 다르다는 것을 아실 수 있습니다. 자세히 보시면 상단바와 본문의 배치 등 레이아웃이 바뀌어있다는 것을 아실 수 있으실 텐데요. 이렇게 반응형 웹 디자인은 화면 요소들의 화면 크기에 맞게 콘텐츠들을 재 배치하여 디바이스의 크기에 맞게 사이트를 보기 좋게 구현해 줍니다.

 

 반응형 웹 페이지는 어떻게 만들 수 있을까? 

가변 그리드

전통적인 방법의 고정 그리드는 특정한 픽셀 값을 사용하여 웹사이트의 레이아웃을 정의합니다. 그래서 고정 그리드는 화면 크기가 변경되면 그리드의 크기가 변하지 않고 콘텐츠가 넘치거나 잘리는 문제가 발생할 수 있습니다. 반면, 가변 그리드는 백분율 값을 사용하여 컨테이너와 열의 크기를 조정합니다. 예를 들어, 가변 그리드에서 컨테이너의 너비를 100%로 설정하면 화면의 크기에 맞게 컨테이너의 너비가 조정됩니다. 열도 백분율로 설정하여 화면 크기에 맞춰 유동적으로 변화합니다. 

 

이렇게 가변 그리드는 반응형 웹의 레이아웃을 구성하는 핵심기법으로 가변 그리드는 사이트트의 모든 요소들을 상대적 크기로 지정하여 브라우저의 크기에 따라 탄력적으로 보여주는 방법입니다. 가변 그리드는 화면의 크기에 따라 컨테이너와 열의 크기를 백분율로 지정하여 자동으로 조정됩니다. 

 

 

위와 같이 가변 그리드를 사용하면 화면을 몇 개의 칼럼으로 묶어 배치할 수 있습니다. 이렇게 그리드 시스템을 사용하면 화면을 단순하게 만들면서도 규칙적으로 배열하기 때문에 레이아웃을 일관성 있게 유지할 수 있다는 장점이 있어 대부분의 사이트에서 이용됩니다. 대표적인 가변 그리드 시스템에는 Bootstrap이 있습니다. 

[HTML/CSS] 반응형 웹 사이트 레이아웃 만들기 - 가변 그리드(Grid System)

 

 여러 가지 가변 요소들 

위에서 소개한 가변 그리드를 사용하면 사이트에 접속하는 브라우저의 너비에 따라 웹 요소들의 너비가 유동적으로 변화합니다. 이때 웹 안의 다른 요소들도 함께 바뀌어야 자연스럽게 화면이 표현될 수 있습니다.

 

가변 글꼴

가변 글꼴(Variable fonts)은 글꼴의 굵기, 폭, 기울임 등 여러 속성을 실시간으로 조정할 수 있는 형태의 글꼴입니다. 이는 기존의 고정된 굵기 및 스타일로 제공되는 폰트와는 달리, 가변 글꼴은 여러 변형을 가지고 있어 다양한 디자인 요구에 유연하게 대응할 수 있습니다. 아래의 표에 정의되어 있는 단위로 구현을 하며 가장 많이 사용하는 단위는 em과 rem입니다.

 

단위	설명
em	요소를 감싸고 있는 부모 요소의 글자 크기를 기준으로 하는 단위
rem	HTML 요소(최상위 요소)의 글자 크기를 기준으로 하는 단위
vw	브라우저의 너비(가로)를 기준으로 하는 단위
vh	브라우저의 폭(세로)을 기준으로 하는 단위
vmin	브라우저의 너비와 폭 중에서 더 작은 값을 기준으로 하는 단위 (IE9 에서는 vmin 대신 vm 으로 지원함)
vmax	브라우저의 너비와 폭 중에서 더 큰 값을 기준으로 하는 단위 (IE11, Edge13, Edge14 에서는 지원하지 않음)

 

가변 이미지, 가변 동영상

화면 너비에 따라 크기가 자동으로 조정되는 가변 이미지, 가변 동영상 등을 사용하면 사용자 경험을 향상할 수 있습니다. CSS 최대 너비 속성 또는 백분율 값을 사용하여 이미지 크기를 제어하여 큰 화면에서 적절하게 확장되고 작은 화면에서 늘어나거나 잘리는 것을 방지할 수 있습니다.

 

미디어 쿼리 사용

미디어 쿼리를 사용하면 특정 화면 크기에 대한 스타일을 정의할 수 있습니다. 예를 들자면 특정 화면 너비를 기준으로 스타일을 조정하거나, 모바일 화면에서는 탐색 메뉴를 수정하여 드롭다운 형식이 되거나 화면 너비에 따라 요소를 숨기거나 표시할 수 있습니다.

@media screen and (max-width: 600px) {
  /* 스타일 규칙들 */
}

위의 예시에서는 screen 미디어 타입과 max-width 조건을 사용하여 화면 너비가 600px 이하인 경우에만 스타일을 적용합니다. 

[CSS] 미디어 쿼리(media query) 사용법 (반응형 웹)

 

반응형 프레임워크 및 라이브러리

가장 쉽게 반응형 웹을 만드는 방법은 Bootstrap, Foundation 또는 Bulma와 같은 반응형 프레임워크 및 라이브러리 사용하는 것입니다. 이러한 프레임워크는 개발 프로세스의 속도를 크게 높이고 웹 사이트 전체에서 일관된 반응형 디자인을 보장할 수 있는 사전 구축된 반응형 구성 요소, 그리드 및 스타일을 제공합니다.

 

모바일 우선 접근 방식

모바일 화면과 PC화면 중 어떤 것을 만드는 것이 더 힘들까요? 실제로 해보시면 모바일 환경에서 화면을 배치하는 것이 훨씬 어렵습니다. 작은 화면에 적절하게 콘텐츠를 배치해야 하기 때문입니다. 그래서 반응형 웹 사이트를 제작할 때는 모바일 우선 접근 방식을 취하는 것이 좋습니다. 모바일 우선 접근 방식을 채택한다는 것은 모바일 장치를 기본 대상으로 염두에 두고 웹사이트를 디자인하고 개발하는 것을 의미합니다. 가장 작은 화면 크기를 위한 디자인으로 시작한 다음 미디어 쿼리를 사용하여 더 큰 화면을 위한 디자인을 점진적으로 향상하면 조금 더 쉽게 반응형 웹을 제작할 수 있습니다. 이 접근 방식을 사용해야 완성되는 웹사이트가 모바일에 화면을 최적화시킬 수 있습니다.

 

터치 및 제스처 이벤트 고려

모바일 장치에서 사용자 경험을 향상하려면 터치 및 제스처 이벤트를 고려하는 것이 중요합니다. JavaScript 라이브러리 또는 Hammer.js 또는 TouchSwipe와 같은 프레임워크를 사용하여 터치, 스와이프, 핀치 투 줌과 같은 사용자 작업을 감지하고 적절한 응답을 제공할 수 있습니다.

 

브라우저 간 호환성 테스트

반응형 웹 사이트를 개발할 때 다양한 브라우저와 장치에서 호환성을 테스트하고 확인하는 것이 중요합니다. 특히 그리드와 반응형 웹을 구성하는 단위가 모든 브라우저에 호환되지 않을 수 있기 때문에 Chrome, Firefox, Safari 및 Internet Explorer와 같은 다양한 브라우저에서 웹사이트가 표시되고 작동하는 방식을 확인하고 스마트폰, 태블릿 및 데스크톱 컴퓨터와 같은 다양한 장치에서 테스트하는 것이 필요합니다.

 

CSS 기법들

화면의 크기에 따라 요소의 크기가 가변적으로 바뀔 수 있도록 하는 CSS 기법들을 사용하면 쉽게 반응형 사이트를 구성할 수 있습니다. 이 방법은 아래에 링크된 글들을 참고해 주세요.

 

[CSS] display : grid에 대하여(CSS Grid) - 그리드 레이아웃

[CSS] display : flex에 대하여(Flexible Box) - 플렉스 박스 레이아웃