반응형 디자인이란?

디자이너가 휴대전화와 태블릿에서 웹사이트가 어떻게 보이는지 걱정할 필요가 없었던 것은 그리 오래되지 않았습니다. 전화는 아직 웹 보기에 실제로 실용적이지 않았으며, iPad 이전에는 태블릿이 필수품이라기보다는 참신함에 가까웠습니다.

분명히 모든 것이 바뀌었고 대부분의 기술 전문가들은 향후 몇 년 안에 모바일 브라우징이 데스크톱 브라우징을 추월하여 웹을 보는 지배적인 방법으로 예상합니다.

비디오 게임 콘솔과 인터넷 TV를 포함하여 끊임없이 진화하는 화면 크기와 장치로 인해 웹 디자인의 기존 방식은 더 이상 작업에 적합하지 않습니다. 그리고 기업이 모바일 사용자를 위해 온라인 경험을 최적화할 필요성을 깨닫고 적응하지 못하는 디자이너는 뒤처지게 될 것입니다.

편집자 주: 다음은 경험 많은 웹 디자이너를 대상으로 하지 않는 반응형 디자인에 대한 초보자를 위한 소개입니다.

반응형 디자인의 주요 구성 요소

반응형 웹 디자인이 등장하는 곳은 콘텐츠 및/또는 표시되는 화면의 크기에 자동으로 적응하는 레이아웃입니다. 가장 기본적으로 반응형 디자인의 세 가지 기본 요소는 유연한 그리드, 유연한 이미지 및 미디어 쿼리이며, 후자는 CSS3의 일부로 도입되었습니다. 잠시 후에 더 자세히 알아보십시오.

유연한 그리드

유연한 그리드는 기본적으로 디자인 요소가 픽셀이 아닌 백분율로 설정되는 테마 및 템플릿입니다. 백분율을 측정 단위로 사용하면 화면이 크든 작든 50%로 디자인된 요소가 항상 화면의 절반을 차지한다는 의미입니다.

유연한 이미지

가장 기본적이고 유연한 이미지는 다음과 같은 간단한 규칙을 작성하여 생성하는 것이 더 쉬울 수 없습니다.

 img { max-width: 100%; }

본질적으로 이는 요소가 컨테이너보다 큰 경우 규칙이 해당 컨테이너의 너비와 일치하도록 강제한다는 것을 의미합니다. 그리고 최신 브라우저는 이미지의 크기를 비례적으로 조정하기 때문에 이미지 종횡비도 유지됩니다. 또한 100% 규칙은 포함된 비디오와 같은 거의 모든 다른 요소에도 사용할 수 있습니다.

미디어 쿼리

CSS 2.1에 미디어 유형이 도입된 이후로 스타일 시트는 모바일 및 기타 장치를 훨씬 더 포함하게 되었습니다. 미디어 유형은 기본적으로 핸드헬드, 스크린 및 TV를 포함한 유형의 웹 장치의 특정 클래스를 대상으로 하는 스타일 지정을 허용합니다. 그러나 장치 간 표준화가 거의 없고 장치 제조업체의 지원이 거의 없기 때문에 미디어 유형은 잠재력을 발휘하지 못했습니다.

미디어 쿼리는 그 잠재력과 그 다음 일부에 부응합니다. 그러나 미디어 유형이 수행하는 방식으로 장치 유형에 관심을 두는 대신 미디어 쿼리는 대신 장치의 기능을 확인합니다.

간단한 미디어 쿼리는 다음과 같습니다.

쿼리의 두 가지 구성 요소는 화면으로 설정된 미디어 유형과 실제 쿼리 (max-device-width: 480px) 로, 기본적으로 장치의 너비가 480px 이하인지 묻습니다. 이 경우 장치는 generic.css를 로드합니다. 그렇지 않으면 올바른 해상도가 식별되고 적절한 스타일 시트가 로드될 때까지 다른 링크와 마찬가지로 링크가 무시됩니다.

단순한 해결 그 이상

그러나 해상도는 미디어 쿼리를 사용하여 제어할 수 있는 유일한 디자인 요소가 결코 아닙니다. 브라우저 창의 너비와 높이, 가로 및 세로 방향, 심지어 레이아웃도 설정할 수 있는 다른 매개변수 중 일부입니다.

예를 들어 미디어 쿼리가 장치가 스마트폰임을 감지하면 컴퓨터 화면에 텍스트 영역이 있는 세 개의 열과 두 개의 세로 사이드바를 표시하는 디자인이 로드될 수 있는 디자인이 스마트폰 화면에 전체 너비 텍스트 영역으로 로드될 수 있습니다. 아래에 수평 요소로 두 개의 사이드바가 있습니다.

유연한 사고방식

물론 유연한 디자인의 핵심 요구 사항은 유연한 디자인 마인드를 가진 디자이너입니다. 불행히도 대부분의 웹 페이지는 여전히 모바일 장치에서 그다지 친숙하지 않습니다. 주로 대부분의 디자이너는 여전히 일반적으로 스마트폰과 태블릿을 고려하여 데스크탑만을 위해 디자인하기 때문입니다. 여러 플랫폼을 염두에 두고 디자인에 접근하는 디자이너는 거의 없습니다.

미디어 쿼리를 스타일 시트에 통합하는 데에는 학습 곡선이 있지만 일부 웹 디자이너를 멈추게 하는 것은 픽셀로 디자인하는 것에서 백분율로 디자인하는 것으로의 전환입니다. 그러나 실제로는 백분율로 디자인하는 것과 큰 차이가 없으며 더 쉽습니다.

예를 들어 두 개의 동일한 요소에 100%와 100픽셀의 너비를 할당하는 것의 차이를 고려하십시오. 하나는 데스크탑, 랩탑 또는 iPhone의 화면이든 요소가 화면을 채울 것임을 확신할 수 있습니다. 그러나 너비가 100픽셀인 요소는 480픽셀 iPhone 화면에서는 크지만 1600×900 해상도의 데스크탑 화면에서는 비교적 작습니다.

반응형 디자인은 비즈니스를 의미합니다

기업의 경우 반응형 디자인을 구현하는 주된 이유는 분명합니다. 잠재 고객이 탐색하고 원하는 것을 찾기가 더 쉬울수록 전환율이 높아집니다. 그러나 많은 디자이너에게 비즈니스 웹 사이트의 반응형 디자인은 일반적으로 더 작은 화면에 맞게 콘텐츠 크기를 줄이는 것을 의미했습니다. 원하는 정보를 찾기 위해 스크롤하고 확대 및 축소해 본 사람이라면 웹사이트의 축소판 버전이 답이 아니라는 것을 알고 있습니다.

기업과 디자이너가 모바일 장치용 디자인 문제를 처리한 또 다른 방법은 장치에 따라 자동 리디렉션을 사용하여 다른 장치에 대해 별도의 사이트를 만드는 것이었습니다. 이를 통해 최상의 인터페이스를 제공할 수 있을 뿐만 아니라 JavaScript 및 대용량 이미지로 인한 느린 로딩을 방지할 수 있습니다.

그러나 이 접근 방식에는 몇 가지 단점이 있습니다. 확실히 그 중 하나는 여러 사이트를 만들고 유지 관리하고 해당 사이트에서 콘텐츠를 조정하는 비용입니다. 그리고 물론, 새로운 장치가 나올 때 구축해야 할 또 다른 새로운 사이트가 있습니다. 다행히 반응형 디자인이 올바르게 수행되면 모바일 장치용 디자인의 거의 모든 문제를 해결할 수 있습니다.