처음부터 월드 와이드 웹은 구애받지 않고 설계되었습니다. 어떤 하드웨어를 사용하든 상관없습니다. 기기에서 실행 중인 운영 체제는 중요하지 않습니다. 인터넷에 연결할 수만 있다면 월드 와이드 웹에 액세스할 수 있습니다.
웹이 처음 보급된 시기에는 대부분의 사람들이 데스크톱 컴퓨터를 사용했습니다. 요즘은 데스크톱, 노트북, 태블릿, 폴더블 휴대전화, 냉장고, 자동차에서 웹을 사용할 수 있습니다. 사람들은 어떤 기기를 사용하든 웹사이트가 멋져 보일 것이라고 기대하는 것이 당연합니다. 반응형 디자인을 사용하면 가능합니다.
반응형 디자인이 웹사이트 디자인의 첫 번째 접근 방식은 아닙니다. 반응형 디자인 이전에는 몇 년 동안 웹 디자이너와 개발자들은 다양한 기법을 시도했습니다.
고정 너비 디자인
웹이 처음 인기를 얻은 1990년대 초, 대부분의 모니터는 화면 크기가 가로 640픽셀, 세로 480픽셀입니다. 이것들은 볼록 음극선 튜브였고 기존의 평평한 액정 디스플레이와는 다릅니다.
<ph type="x-smartling-placeholder">
초기 웹 디자인의 초기 단계에, 너비가 640픽셀인 웹페이지를 디자인하는 것은 당연한 선택이었습니다. 그러나 휴대폰과 카메라와 같은 다른 테크는 축소가 되었지만, 화면은 점점 커졌습니다 (결과적으로는 더 평평해짐). 얼마 전까지만 해도 대부분의 화면의 크기는 800x600픽셀이었습니다. 이에 따라 웹 디자인도 변경되었습니다. 디자이너와 개발자들은 800픽셀이 안전한 기본값이라고 생각하기 시작했습니다.
<ph type="x-smartling-placeholder">
그런 다음 화면이 다시 커졌습니다. 1024x768이 기본값이 되었습니다. 웹 디자이너와 하드웨어 제조업체 간의 싸움을 벌이는 것 같았습니다.
<ph type="x-smartling-placeholder">
640픽셀, 800픽셀 또는 1024픽셀이든 디자인할 특정 너비를 선택하는 것을 고정 너비 디자인이라고 했습니다.
레이아웃에 고정 너비를 지정하면 그러면 레이아웃이 지정된 너비에서만 제대로 표시됩니다. 사이트 방문자의 화면이 선택한 너비보다 넓을 경우 화면에 여유 공간이 생깁니다. 페이지의 콘텐츠를 중앙에 배치하여 해당 공간을 보다 균등하게 배분할 수 있습니다. (한쪽에 빈 공간이 있는 대신) 사용 가능한 공간을 최대한 활용하지 못할 것입니다.
<ph type="x-smartling-placeholder">
마찬가지로 방문자가 선택한 너비보다 좁은 화면을 사용하는 경우 콘텐츠가 가로로 맞지 않게 됩니다. 브라우저에서는 스크롤바와 동일한 가로 방향인 크롤링 바를 생성하고 사용자는 페이지 전체를 왼쪽과 오른쪽으로 움직여 모든 콘텐츠를 볼 수 있습니다.
<ph type="x-smartling-placeholder">
유동 레이아웃
대부분의 디자이너는 고정 너비 레이아웃을 사용했지만 일부 디자이너는 레이아웃을 유연하게 만들었습니다. 레이아웃에 고정 너비를 사용하는 대신 열 너비에 비율을 사용하여 유연한 레이아웃을 만들 수 있습니다. 이러한 디자인은 하나의 특정 크기에서만 올바르게 보이는 고정 너비 레이아웃보다 더 많은 상황에서 작동합니다.
이를 액체 레이아웃이라고 합니다. 하지만 액체 레이아웃은 다양한 너비에서 멋지게 보이지만, 극심한 경우에는 악화되기 시작합니다. 넓은 화면에서는 레이아웃이 늘어난 것처럼 보입니다. 좁은 화면에서는 레이아웃이 찌그러져 보입니다. 두 시나리오 모두 이상적인 것은 아닙니다.
<ph type="x-smartling-placeholder">
레이아웃에 min-width 및 max-width를 사용하여 이러한 문제를 완화할 수 있습니다.
그러나 최소 너비보다 작거나 최대 너비를 초과하는 크기에서는 고정 너비 레이아웃에서와 동일한 문제가 발생합니다.
넓은 화면에서는 사용하지 않는 공간이 낭비됩니다.
좁은 화면에서는 사용자가 모든 항목을 보려면 페이지 전체를 왼쪽과 오른쪽으로 이동해야 합니다.
액체라는 단어는 이러한 종류의 레이아웃을 설명하는 데 사용되는 용어 중 하나일 뿐입니다. 이러한 종류의 디자인을 유동 레이아웃 또는 유연한 레이아웃이라고도 합니다. 용어도 기법만큼이나 유동적이었습니다.
작은 화면
21세기 인터넷의 규모는 계속해서 커졌습니다. 모니터도 마찬가지입니다. 하지만 그 어떤 데스크톱 기기보다 작은 크기의 새로운 화면이 출시되었습니다. 모든 기능을 갖춘 웹브라우저가 탑재된 휴대전화가 등장하면서 디자이너들은 딜레마에 직면했습니다. 디자인이 데스크톱 컴퓨터와 휴대전화에서 잘 보이게 하려면 어떻게 해야 할까요? 따라서 최소 너비 240픽셀, 너비 수천 픽셀에 이르는 화면에 맞게 콘텐츠 스타일을 지정할 방법이 필요했습니다.
별도의 사이트
한 가지 방법은 모바일 방문자를 위한 별도의 하위 도메인을 만드는 것입니다. 하지만 두 개의 별도 코드베이스와 디자인을 유지해야 합니다. 휴대기기에서 방문자를 리디렉션하려면 사용자 에이전트 스니핑 신뢰할 수 없고 쉽게 스푸핑될 수 있습니다. Chrome은 개인 정보 보호를 위해 사용자 에이전트 문자열을 지원 중단할 예정입니다. 또한 모바일과 모바일이 아닌 것을 구분할 수도 없습니다. 태블릿 기기를 어느 사이트로 보내나요?
적응형 레이아웃
서로 다른 하위 도메인에 별도의 사이트를 두는 대신 두세 개의 고정 너비 레이아웃이 있는 단일 사이트를 가질 수 있습니다.
미디어 쿼리가 CSS에 처음 도입되었을 때, 레이아웃을 더 유연하게 만들 수 있는 문이 열렸습니다. 하지만 여전히 많은 개발자가 고정 너비 레이아웃을 만드는 데 가장 편안했습니다. 한 가지 기법은 지정된 너비에서 몇 개의 고정 너비 레이아웃 간에 전환하는 것입니다. 이를 적응형 디자인이라고 합니다.
적응형 디자인을 통해 디자이너는 몇 가지 다양한 크기에서 보기 좋은 레이아웃을 제공할 수 있었습니다. 두 크기 사이즈에서 볼 때는 디자인이 제대로 보이지 않았습니다. 공간 초과 문제는 고정 너비 레이아웃만큼 나쁘지 않았지만 여전히 지속되었습니다.
CSS 미디어 쿼리를 사용하면 사용자에게 브라우저 너비에 가장 가까운 레이아웃을 제공할 수 있습니다. 그러나 기기 크기가 다양하므로 대부분의 사용자에게는 레이아웃이 완벽하지 않아 보일 수 있습니다.
반응형 웹 디자인
적응형 레이아웃이 미디어 쿼리와 고정 너비 레이아웃의 매시업인 경우 반응형 웹 디자인은 미디어 쿼리와 유동 레이아웃의 매시업입니다.
이 용어는 에단 마르코트가 창안한 2010년 A List Apart의 기사를 읽어보세요.
에단은 반응형 디자인의 세 가지 기준을 정의했습니다.
- 유동 그리드
- 유동체
- 미디어 쿼리
반응형 사이트의 레이아웃과 이미지는 모든 기기에서 보기 좋게 표시됩니다. 하지만 한 가지 문제가 있었습니다.
viewport의 meta 요소
휴대전화의 브라우저는 더 넓은 화면을 위해 고정 너비 레이아웃으로 디자인된 웹사이트를 처리해야 했습니다. 기본적으로 모바일 브라우저는 사용자가 디자인할 때 너비를 980픽셀로 가정했습니다 (틀리지 않았음). 따라서 액체 레이아웃을 사용했더라도 브라우저는 너비 980픽셀을 적용한 다음 렌더링된 웹페이지를 화면의 실제 너비에 맞게 축소합니다.
반응형 디자인을 사용하는 경우 브라우저에서 크기를 조정하지 않도록 지시해야 합니다.
웹페이지의 head에서 meta 요소를 사용하면 됩니다.
<meta name="viewport" content="width=device-width, initial-scale=1">
쉼표로 구분된 두 개의 값이 있습니다.
첫 번째는 width=device-width입니다.
브라우저가 웹사이트 너비와 기기의 너비와 같다고 가정하도록 지시합니다.
(웹사이트 너비를 980픽셀로 가정하는 대신)
두 번째 값은 initial-scale=1입니다.
이렇게 하면 확장의 정도 또는 정도를 브라우저에 알려줍니다.
반응형 디자인을 사용하면 브라우저에서 크기를 전혀 조정하지 않으려고 합니다.
meta 요소를 갖추면 웹페이지를 반응형으로 사용할 수 있습니다.
현대적인 반응형 디자인
오늘날 우리는 웹사이트를 표시 영역 크기보다 훨씬 뛰어나게 반응하는 웹사이트를 만들 수 있습니다.
개발자는 미디어 기능을 통해 사용자 환경설정에 액세스하고 맞춤설정된 환경을 지원할 수 있습니다.
컨테이너 쿼리를 사용하면 구성요소가 자체 반응형 정보를 소유할 수 있습니다.
picture 요소를 사용하면 디자이너가 화면 비율에 따라 아트 방향을 결정할 수 있습니다.
이해도 확인
반응형 웹 디자인에 관한 지식 테스트
2021년에는 웹페이지를 고정 너비로 디자인하는 것이 안전한가요?
유동 레이아웃은 일반적으로 어떤 화면 크기에서 어려움을 겪나요?
반응형 디자인의 원래 3가지 기준은 무엇인가요?
반응형 디자인은 무궁무진한 가능성의 세계입니다. 이 과정의 나머지 부분에서는 이러한 기술에 대해 알아보고, 이 기술을 사용하여 모두를 위한 반응형 웹사이트를 만듭니다.