소개

처음부터 월드 와이드 웹은 구속받지 않도록 설계되었습니다. 어떤 하드웨어를 사용하든 상관없습니다. 기기에서 실행 중인 운영체제는 중요하지 않습니다. 인터넷에 연결할 수만 있다면 월드 와이드 웹에 액세스할 수 있습니다.

인터넷 초창기에는 대부분의 사람들이 데스크톱 컴퓨터를 사용했습니다. 오늘날 웹은 데스크톱, 노트북, 태블릿, 폴더블 휴대전화, 냉장고, 자동차에서 사용할 수 있습니다. 사람들은 사용 중인 기기에 관계없이 웹사이트가 제대로 표시될 것이라고 기대합니다. 반응형 디자인 덕분에 가능합니다.

반응형 디자인은 웹사이트를 디자인하는 첫 번째 접근 방법은 아닙니다. 반응형 디자인이 도입되기 몇 년 전부터 웹 디자이너와 개발자는 다양한 기법을 사용해 봤습니다.

고정폭 디자인

웹이 처음 보급되던 1990년대 초 대부분의 모니터의 화면 크기는 가로 640픽셀, 세로 480픽셀이었습니다. 이 것은 현재의 평평한 액체 디스플레이와 달리 볼록 음극선 튜브였습니다.

초기 웹 디자인 초기에는 너비가 640픽셀인 웹페이지를 디자인하는 것이 안전했습니다. 하지만 휴대전화와 카메라와 같은 다른 기술이 소형화되는 동안 화면은 점점 더 커졌고 결국에는 더 평평해졌습니다. 머지않아 대부분의 화면 크기는 800x600픽셀이었습니다. 이에 따라 웹 디자인이 변경되었습니다. 디자이너와 개발자는 800픽셀이 안전한 기본값이라고 가정하기 시작했습니다.

그리고 화면이 다시 커졌습니다. 1024x768이 기본값으로 설정되었습니다. 웹 디자이너와 하드웨어 제조업체 사이의 무기 경쟁처럼 느껴졌습니다.

​​

640, 800 또는 1024픽셀이 무엇이든 디자인할 특정 너비를 선택하는 것을 고정 너비 디자인이라고 했습니다.

레이아웃에 고정 너비를 지정하면 이 특정 너비에서만 레이아웃이 표시됩니다. 사이트 방문자의 화면이 선택한 너비보다 넓으면 화면에서 공간을 낭비하게 됩니다. 한 쪽에 공백을 두지 않고 페이지의 콘텐츠를 중앙에 배치하여 공간을 더 균일하게 배포할 수 있지만 사용 가능한 공간을 최대한 활용하지는 못합니다.

마찬가지로 방문자가 선택한 너비보다 좁은 화면을 가지고 도착하면 콘텐츠가 가로로 맞지 않습니다. 브라우저는 크롤링바(스크롤바에 해당하는 가로 방향)를 생성하며 사용자는 모든 콘텐츠를 보려면 전체 페이지를 왼쪽과 오른쪽으로 이동해야 합니다.

유동 레이아웃

대다수의 디자이너는 고정 너비 레이아웃을 사용하지만 일부 디자이너는 레이아웃을 유연하게 만들기도 했습니다. 레이아웃에 고정 너비를 사용하는 대신 열 너비의 백분율을 사용하여 유연한 레이아웃을 만들 수 있습니다. 이러한 디자인은 하나의 특정 크기에서만 올바르게 표시되는 고정 너비 레이아웃보다 더 많은 상황에서 작동합니다.

이를 액체 레이아웃이라고 했습니다. 액체 레이아웃은 다양한 너비에서 제대로 표시되지만 극단에서 악화되기 시작합니다. 와이드 화면에서 레이아웃이 늘어난 것처럼 보입니다. 좁은 화면에서는 레이아웃이 눌린 것처럼 보입니다. 두 시나리오 모두 이상적이지는 않습니다.

레이아웃에 min-width와 max-width를 사용하여 이러한 문제를 완화할 수 있습니다. 그러나 최소 너비 아래 또는 최대 너비보다 큰 크기에서는 고정 너비 레이아웃과 동일한 문제가 발생합니다. 넓은 화면에서는 불필요한 공간이 낭비될 수 있습니다. 좁은 화면에서는 사용자가 모든 항목을 보려면 전체 페이지를 좌우로 이동해야 합니다.

liquid라는 단어는 이러한 종류의 레이아웃을 설명하는 데 사용되는 용어 중 하나일 뿐입니다. 이러한 종류의 디자인을 유동 레이아웃 또는 유연한 레이아웃이라고도 합니다. 용어는 기법만큼이나 유동적이었습니다.

작은 화면

21세기에 이르러 웹은 계속해서 더 커지고 있습니다. 모니터도 마찬가지였습니다. 하지만 새로운 화면이 등장하면서 어떤 데스크톱 기기보다도 작았습니다. 모든 기능을 갖춘 웹브라우저가 출시되면서 디자이너들은 딜레마에 직면했습니다. 데스크톱 컴퓨터와 휴대전화에서 잘 보이도록 디자인하려면 어떻게 해야 할까요? 최소 너비 240픽셀, 최대 수천 픽셀의 화면에 맞게 콘텐츠 스타일을 지정할 방법이 필요했습니다.

별도 사이트

한 가지 방법은 모바일 방문자를 위한 별도의 하위 도메인을 만드는 것입니다. 그러나 두 개의 별도의 코드베이스와 디자인을 유지해야 합니다. 또한 휴대기기에서 방문자를 리디렉션하려면 신뢰할 수 없고 쉽게 스푸핑될 수 있는 사용자 에이전트 스니핑을 수행해야 합니다. Chrome에서 개인 정보 보호를 위해 사용자 에이전트 문자열을 지원 중단할 예정입니다. 또한 모바일과 모바일이 아닌 데이터 간의 명확한 경계도 없습니다. 어떤 사이트에 태블릿 기기를 보내나요?

적응형 레이아웃

여러 하위 도메인에 별도의 사이트를 두는 대신 2~3개의 고정 너비 레이아웃이 포함된 단일 사이트를 보유할 수 있습니다.

미디어 쿼리가 CSS에 처음 도입되었을 때 레이아웃을 더 유연하게 만들 수 있는 문이 열렸습니다. 그러나 많은 개발자가 여전히 고정 너비 레이아웃을 만드는 데 가장 편안했습니다. 한 가지 기법은 지정된 너비에서 소수의 고정 너비 레이아웃 간에 전환하는 것이었습니다. 이를 적응형 디자인이라고 합니다.

적응형 디자인을 통해 디자이너는 몇 가지 크기에서도 훌륭하게 보이는 레이아웃을 제공할 수 있었지만, 이러한 크기 사이에서 볼 때는 디자인이 제대로 보이지 않았습니다. 과도한 공간 문제는 여전히 지속되었지만, 고정 너비 레이아웃만큼 나쁘지는 않았습니다.

CSS 미디어 쿼리를 사용하면 사용자의 브라우저 너비에 가장 가까운 레이아웃을 제공할 수 있습니다. 하지만 기기 크기가 다양하기 때문에 대부분의 사람들에게 레이아웃은 완벽하지 않은 것처럼 보일 수 있습니다.

반응형 웹 디자인

적응형 레이아웃이 미디어 쿼리와 고정폭 레이아웃의 매시업인 경우 반응형 웹 디자인은 미디어 쿼리와 유동 레이아웃의 매시업입니다.

이 용어는 2010년 A List Apart의 논문에서 에단 마코트가 만들었습니다.

에단은 반응형 디자인의 세 가지 기준을 정의했습니다.

1. 유동 그리드
2. 액체 매체
3. 미디어 쿼리

반응형 사이트의 레이아웃과 이미지는 모든 기기에서 보기 좋게 표시됩니다. 하지만 한 가지 문제가 있었습니다.

viewport의 meta 요소

휴대전화의 브라우저는 더 넓은 화면에 맞는 고정폭 레이아웃으로 디자인된 웹사이트를 처리해야 했습니다. 기본적으로 모바일 브라우저는 980픽셀을 사람들이 디자인하는 너비라고 가정했으며 틀린 것도 아닙니다. 따라서 유동 레이아웃을 사용하더라도 브라우저에서는 980픽셀의 너비를 적용한 다음 렌더링된 웹페이지를 화면의 실제 너비에 맞춰 축소합니다.

반응형 디자인을 사용하는 경우 브라우저가 이러한 크기를 조정하지 않도록 지시해야 합니다. 웹페이지의 head에 있는 meta 요소를 사용하면 됩니다.

<meta name="viewport" content="width=device-width, initial-scale=1">

쉼표로 구분된 두 개의 값이 있습니다. 첫 번째는 width=device-width입니다. 이는 웹사이트 너비가 980픽셀이라고 가정하는 대신 웹사이트의 너비가 기기의 너비와 동일하다고 가정하도록 브라우저에 지시합니다. 두 번째 값은 initial-scale=1입니다. 이는 브라우저에 크기 조정의 정도를 알려줍니다. 반응형 디자인에서는 브라우저가 크기 조정을 전혀 수행하지 않도록 할 수 있습니다.

meta 요소를 배치하면 웹페이지가 반응형으로 작동할 준비가 된 것입니다.

현대적인 반응형 디자인

현재 Google은 표시 영역 크기를 훨씬 뛰어넘는 방식으로 반응하는 웹사이트를 만들 수 있습니다. 개발자는 미디어 기능을 통해 사용자 환경설정에 액세스하고 맞춤설정된 환경을 구현할 수 있습니다. 컨테이너 쿼리를 사용하면 구성요소가 자체 반응형 정보를 소유할 수 있습니다. picture 요소는 디자이너가 화면 비율에 따라 아트 디렉션 결정을 내릴 수 있게 해줍니다.

이해도 테스트

반응형 웹 디자인에 관한 지식 테스트

반응형 디자인은 흥미진진하고 성장하고 있는 가능성의 세계입니다. 이 과정의 나머지 부분에서는 이러한 기술과 이 기술을 사용하여 모두를 위한 멋진 반응형 웹사이트를 만드는 방법을 배우게 됩니다.