반응형 웹 디자인 소개: 의사 요소, 미디어 쿼리 등

오늘날 귀하의 웹사이트는 대형 모니터가 있는 데스크탑, 중형 노트북, 태블릿, 스마트폰 등 다양한 장치에서 방문합니다.

프론트 엔드 엔지니어로서 최적의 사용자 경험을 달성하려면 사이트에서 이러한 다양한 장치(즉, 다양한 화면 해상도 및 크기)에 따라 레이아웃을 조정해야 합니다. 사용자 디바이스의 형태에 반응 하는 과정을 (당신이 짐작했겠지만) 반응형 웹 디자인 (RWD)이라고 합니다.

반응형 웹 디자인 예제를 연구하고 RWD에 초점을 맞추는 데 시간을 할애할 가치가 있는 이유는 무엇입니까? 예를 들어, 일부 웹 디자이너는 대신 모든 브라우저에서 안정적인 사용자 경험을 보장하는 것을 평생 과제로 삼고 종종 Internet Explorer의 작은 문제를 해결하는 데 며칠을 보냅니다.

이것은 어리석은 접근입니다.

Mashable은 2013년을 반응형 웹 디자인의 해로 불렀습니다. 왜요? 트래픽의 30% 이상이 모바일 장치에서 발생합니다. 그들은 이 수치가 연말까지 50%에 도달할 것으로 예상합니다. 웹 전반에 걸쳐 2013년에 웹 트래픽의 17.4%가 스마트폰에서 발생했습니다. 동시에 Internet Explorer 사용은 전체 브라우저 트래픽의 12%를 차지하여 작년 이맘때보다 약 4% 감소했습니다. W3Schools). 전 세계 스마트폰 인구가 아닌 특정 브라우저에 대해 최적화하고 있다면 나무를 위한 숲을 놓치고 있는 것입니다. 그리고 어떤 경우에는 이것이 성공과 실패의 차이를 의미할 수 있습니다. 반응형 디자인은 전환율, SEO, 이탈률 등에 영향을 미칩니다.

반응형 웹 디자인 접근 방식

RWD에 대해 일반적으로 간과되는 것은 웹 페이지의 모양을 조정하는 것만이 아니라는 것입니다. 대신 여러 장치에서 사용할 수 있도록 사이트를 논리적으로 조정하는 데 중점을 두어야 합니다. 예를 들어, 마우스 사용은 터치스크린과 같은 사용자 경험을 제공하지 않습니다. 동의하지 않습니까? 반응형 모바일 및 데스크톱 레이아웃은 이러한 차이점을 반영해야 합니다.

동시에 볼 수 있는 수십 가지 화면 크기 각각에 대해 사이트를 완전히 다시 작성하고 싶지는 않습니다. 이러한 접근 방식은 단순히 실행 불가능합니다. 대신, 솔루션은 동일한 HTML 코드를 사용하여 사용자의 화면 크기에 맞게 조정하는 유연한 반응형 디자인 요소를 구현하는 것입니다.

기술적인 관점에서 솔루션은 CSS 미디어 쿼리, 유사 요소, 유연한 세트 그리드 레이아웃 및 기타 도구를 사용하여 주어진 해상도에 동적으로 조정하는 반응형 디자인 튜토리얼에 있습니다.

반응형 디자인의 미디어 쿼리

미디어 유형은 HTML4 및 CSS2.1에서 처음 등장하여 화면과 인쇄에 대해 별도의 CSS를 배치할 수 있게 되었습니다. 이러한 방식으로 페이지의 출력물과 비교하여 페이지의 컴퓨터 디스플레이에 대해 별도의 스타일을 설정할 수 있었습니다.

 <link rel="stylesheet" type="text/css" href="screen.css" media="screen"> <link rel="stylesheet" type="text/css" href="print.css" media="print">

또는

 @media screen { * { background: silver } }

CSS3에서는 페이지 너비에 따라 스타일을 정의할 수 있습니다. 페이지 너비는 사용자 장치의 크기와 상관 관계가 있으므로 이 기능을 사용하면 장치마다 다른 레이아웃을 정의할 수 있습니다. 참고: 미디어 쿼리는 모든 주요 브라우저에서 지원됩니다.

이 정의는 기본 속성인 max-width , device-width , orientation 및 color 설정을 통해 가능합니다. 다른 정의도 가능합니다. 하지만 이 경우 가장 주의해야 할 사항은 최소 해상도(너비)와 방향 설정(가로 또는 세로)입니다.

아래 반응형 CSS 예제는 페이지 너비를 기준으로 특정 CSS 파일을 시작하는 절차를 보여줍니다. 예를 들어 480px가 현재 기기 화면의 최대 해상도라면 main_1.css에 정의된 스타일이 적용됩니다.

 <link rel="stylesheet" media="screen and (max-device-width: 480px)" href="main_1.css" />

특정 제약 조건이 충족되는 경우에만 활용되도록 동일한 CSS 스타일시트 내에서 서로 다른 스타일을 정의할 수도 있습니다. 예를 들어, 반응형 CSS의 이 부분은 현재 기기의 너비가 480px 이상인 경우에만 사용됩니다.

 @media screen and (min-width: 480px) { div { float: left; background: red; } ....... }

"스마트 줌"

모바일 브라우저는 소위 "스마트 줌"을 사용하여 사용자에게 '우수한' 읽기 경험을 제공합니다. 기본적으로 스마트 줌은 페이지 크기를 비례적으로 줄이는 데 사용됩니다. 이는 (1) 사용자가 시작한 확대/축소(예: iPhone 화면을 두 번 탭하여 현재 웹 사이트를 확대) 및 (2) 처음에 확대된 버전의 웹 페이지를 표시할 수 있습니다. 짐.

반응형 미디어 쿼리를 사용하여 스마트 확대/축소가 목표로 삼을 수 있는 문제를 해결할 수 있다는 점을 감안할 때 확대/축소를 비활성화하고 페이지 콘텐츠가 항상 브라우저를 채우도록 하는 것이 바람직하거나 필요한 경우가 많습니다.

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

initial-scale 을 1로 설정하여 초기 페이지 확대/축소 수준(즉, 페이지 로드 시 확대/축소의 양)을 제어합니다. 반응형 웹 페이지를 디자인했다면 유동적이고 동적인 레이아웃이 초기 확대 없이 스마트폰 화면을 지능적인 방식으로 채워야 합니다.

또한 user-scalable=false 확대/축소를 완전히 비활성화할 수 있습니다.

페이지 너비

데스크탑용, 태블릿(또는 랩탑)용, 스마트폰용의 세 가지 반응형 페이지 레이아웃을 제공하려고 한다고 가정해 보겠습니다. 어떤 페이지 크기를 컷오프로 타겟팅해야 합니까(예: 480px)?

불행히도 타겟팅할 페이지 너비에 대해 정의된 표준은 없지만 다음 예시 응답 값이 자주 사용됩니다.

• 320픽셀
• 480픽셀
• 600픽셀
• 768픽셀
• 900픽셀
• 1024픽셀
• 1200픽셀

그러나 다양한 너비 정의가 있습니다. 예를 들어 320 이상에는 480, 600, 768, 992 및 1382px의 5가지 기본 CSS3 미디어 쿼리 증분이 있습니다. 이 반응형 웹 개발 튜토리얼의 주어진 예제와 함께 적어도 10가지 다른 접근 방식을 열거할 수 있습니다.

이러한 합리적인 증분 세트를 사용하면 대부분의 장치를 대상으로 지정할 수 있습니다. 실제로는 일반적으로 앞서 언급한 페이지 너비의 예를 모두 별도로 처리할 필요가 없습니다. 7가지 다른 해상도는 아마도 너무 많습니다. 내 경험상 320px, 768px 및 1200px가 가장 일반적으로 사용됩니다. 이 세 가지 값은 각각 스마트폰, 태블릿/노트북 및 데스크톱을 타겟팅하는 데 충분해야 합니다.

유사 요소

이전 예의 반응형 미디어 쿼리를 기반으로 사용자 장치의 크기에 따라 프로그래밍 방식으로 특정 정보를 표시하거나 숨기고 싶을 수도 있습니다. 운 좋게도 아래 튜토리얼에 설명된 대로 순수 CSS로도 이 작업을 수행할 수 있습니다.

처음에는 공간이 거의 항상 부족한 스마트폰 레이아웃의 화면 요소 수를 줄이는 데 있어 일부 요소( display: none; )를 숨기는 것이 훌륭한 솔루션이 될 수 있습니다.

그러나 그 외에도 :before 및 :after 와 같은 CSS 의사 요소(선택자)를 사용하여 창의력을 발휘할 수도 있습니다. 참고: 다시 한 번 의사 요소는 모든 주요 브라우저에서 지원됩니다.

의사 요소는 HTML 요소의 특정 부분에 특정 스타일을 적용하거나 요소의 특정 하위 집합을 선택하는 데 사용됩니다. 예를 들어 :first-line 의사 요소를 사용하면 특정 선택자의 첫 번째 줄에만 스타일을 정의할 수 있습니다(예 p:first-line 은 모든 p 의 첫 번째 줄에 적용됨). 유사하게, a:visited 의사 요소를 사용하면 사용자가 이전에 방문한 링크 a 모든 s에 스타일을 정의할 수 있습니다. 분명히, 이것들은 유용할 수 있습니다.

다음은 로그인 버튼에 대해 데스크탑, 태블릿 및 스마트폰에 대해 하나씩 세 가지 레이아웃을 만드는 간단한 반응형 디자인 예제입니다. 스마트폰에는 고독한 아이콘이 있는 반면 태블릿에는 "사용자 이름"과 함께 동일한 아이콘이 있습니다. 마지막으로 데스크탑의 경우 짧은 지침 메시지("사용자 이름 삽입")도 추가합니다.

 .username:after { content:"Insert your user name"; } @media screen and (max-width: 1024px) { .username:before { content:"User name"; } } @media screen and (max-width: 480px) { .username:before { content:""; } }

:before 및 :after 의사 요소만 사용하여 다음을 달성합니다.

유사 요소의 마법에 대한 자세한 내용은 Chris Coyier가 CSS-Tricks에 대한 좋은 글을 작성했습니다.

그럼 어디서부터 시작해야 할까요?

이 튜토리얼에서는 반응형 웹 디자인을 위한 몇 가지 빌딩 블록(즉, 미디어 쿼리 및 의사 요소)을 설정하고 각각의 몇 가지 예를 제시했습니다. 여기에서 어디로 갈까요?

첫 번째 단계는 웹페이지의 모든 요소를 ​​다양한 화면 크기로 구성하는 것입니다.

위에 제시된 레이아웃의 데스크탑 버전을 살펴보십시오. 이 경우 왼쪽의 콘텐츠(녹색 사각형)는 일종의 메인 메뉴 역할을 할 수 있습니다. 그러나 해상도가 낮은 장치(예: 태블릿 또는 스마트폰)를 사용 중인 경우 이 기본 메뉴를 전체 너비로 표시하는 것이 합리적일 수 있습니다. 미디어 쿼리를 사용하여 이 동작을 다음과 같이 구현할 수 있습니다.

 @media screen and (max-width: 1200px) { .menu { width: 100%; } } @media screen and (min-width: 1200px) { .menu { width: 30%; } }

불행히도 프런트 엔드가 복잡해짐에 따라 이 기본 접근 방식으로는 충분하지 않은 경우가 많습니다. 사이트의 콘텐츠 구성이 모바일 버전과 데스크톱 버전 간에 크게 다르기 때문에 사용자 경험은 결국 반응형 CSS뿐만 아니라 HTML 및 JavaScript의 사용에 따라 달라집니다.

다양한 장치에 대한 반응형 레이아웃을 결정할 때 몇 가지 핵심 요소가 중요합니다. 콘텐츠를 담을 수 있는 충분한 공간이 있는 데스크톱 버전과 달리 스마트폰 개발은 더 까다롭습니다. 그 어느 때보다 특정 콘텐츠를 그룹화하고 개별 부분의 중요성을 계층적으로 정의해야 합니다.

콘텐츠의 다양한 활용도 중요합니다. 예를 들어, 사용자에게 마우스가 있는 경우 더 많은 정보를 얻기 위해 특정 요소 위에 커서를 설정할 수 있으므로 웹 개발자로서 이러한 방식으로 수집할 일부 정보를 남길 수 있습니다. 그러나 이것은 사용자가 스마트폰을 사용하는 경우.

또한, 스마트폰에서 일반 손가락보다 작은 크기로 렌더링되는 버튼을 사이트에 남겨두면 사이트 사용 및 느낌에 불확실성이 생깁니다. 위의 이미지에서 표준 웹 보기(왼쪽)는 더 작은 장치에서 볼 때 일부 요소를 완전히 사용할 수 없도록 렌더링합니다.

이러한 행동은 또한 사용자가 오류를 범할 가능성을 높여 사용자 경험을 저하시킵니다. 실제로 이는 페이지 조회수 감소, 판매 감소 및 전반적인 참여 감소로 나타날 수 있습니다.

기타 반응형 디자인 요소

미디어 쿼리를 사용할 때 대상이 되는 요소뿐만 아니라 모든 페이지 요소의 동작을 염두에 두어야 합니다. 특히 유동 격자를 사용할 때 이 경우(고정 치수와 반대) 페이지는 주어진 시간에 완전히 채워집니다. 순간, 콘텐츠 크기를 비례적으로 늘리거나 줄입니다. 너비는 백분율로 설정되기 때문에 그래픽 요소(예: 이미지)는 이러한 유동적인 레이아웃에서 왜곡되고 엉망이 될 수 있습니다. 이미지의 경우 한 가지 솔루션은 다음과 같습니다.

 img { max-width: 100% }

다른 요소도 비슷한 방식으로 처리해야 합니다. 예를 들어, RWD의 아이콘에 대한 훌륭한 솔루션은 IconFonts를 사용하는 것입니다.

유체 그리드 시스템에 대한 몇 마디

전체 디자인 적응 과정에 대해 논의할 때 우리는 종종 최적의 시청 경험(사용자의 관점에서)을 봅니다. 이러한 논의에는 최대한의 용이한 사용, 요소 중요도(보이는 페이지 영역 기반), 용이한 읽기 및 직관적인 탐색이 포함되어야 합니다. 이러한 범주 중 가장 중요한 구성 요소 중 하나는 콘텐츠 너비 조정 입니다. 예를 들어, 소위 유체 그리드 시스템은 전체 페이지의 백분율로 상대적 너비를 기반으로 하는 요소, 즉 요소를 설정했습니다. 이런 식으로 반응형 웹 디자인 시스템의 모든 요소는 페이지 크기에 따라 자동으로 조정됩니다.

이러한 유체 그리드 시스템은 우리가 여기서 논의한 것과 밀접하게 관련되어 있지만, 자세히 논의하려면 추가 튜토리얼이 필요한 완전히 별개의 엔티티입니다. 따라서 Bootstrap, Unsemantic 및 Brackets와 같은 동작을 지원하는 몇 가지 주요 프레임워크에 대해서만 언급하겠습니다.

결론

최근까지 웹 사이트 최적화는 다양한 웹 브라우저를 기반으로 기능을 사용자 정의하기 위해 독점적으로 예약된 용어였습니다. 오늘날 우리가 직면한 다양한 브라우저 표준과의 불가피한 투쟁과 함께, 이 용어는 이제 반응형 웹 디자인을 통해 장치 및 화면 크기에 적응하는 것으로 가정합니다. 최신 웹에서 잘라내려면 사이트 에서 누가 그것을 보고 있는지 뿐만 아니라 어떻게 보고 있는지 알아야 합니다.