반응형 웹 - 1. 뷰포트 (feat. React, styled-components)

최근 저의 관심사는 반응형 웹 익히기였습니다.
이는 8월 15일에 코드스쿼드에서 진행한 해커톤에서 시작되었는데,
반응형 웹으로 UI를 구성해볼까? 하는 생각은 했지만

반응형 웹에 필요한 미디어 쿼리 등을 React, styled-components와 함께 사용해본 적이 없었고
이를 팀원들과 진행하는 해커톤에서 하나하나 공부하며 적용하기엔 속도가 매우 더뎌질 것 같았습니다.

 

언젠간 반응형을 공부해야지, 하고 미뤄왔던 것이 부메랑으로 돌아오자 공부를 시작할 마음이 생겨 나름대로 공부해보았고, 이를 정리해서 남깁니다.

---

참고

• CSS Responsive - W3Schools
• 반응형 웹 디자인 기본 사항 - Google developers
• How to create responsive UI with styled-components - Medium

---

이 글은 참고에 남긴 CSS Responsive - W3Schools에 있는 Grid view 튜토리얼을
React 환경에서 styled-components를 활용하여 진행했습니다.
피드백은 언제나 환영입니다!

반응형 웹 Intro

반응형 웹 ?

반응형 웹은 다양한 크기를 가진 기기들에서 웹 페이지의 UI를 의도대로 잘 보이도록 하기 위한 기술입니다.
HTML과 CSS만을 사용해서 반응형 웹 설계가 가능합니다.

아래는 Google developers에서 가져온 반응형 웹에 대한 설명입니다.

반응형 웹 레이아웃은 기기의 크기와 기능에 따라 변합니다.
예를 들어, 휴대폰에서는 콘텐츠가 하나의 column으로 표시될 수 있지만
태블릿에서는 두 개의 column으로 표시될 수 있습니다.

 

모든 사용자에게 최고의 경험(UX)을 선사하기 위한 설계

다양한 기기에서 웹 UI를 의도한 대로 보여주고, 의도한 대로 동작하는 웹 페이지를 위한 설계를 한다는 의미입니다.
이를 위해 웹 페이지는 화면이 작은 장치에서 정보를 누락하지 않고, 그 내용을 모든 장치에 맞게 조정해야 합니다.
CSS와 HTML을 사용하여 콘텐츠의 크기를 조정, 숨기기, 축소, 확대하거나 이동할 때 반응성 웹 디자인이라고 합니다.

 

---

반응형 웹 설계 - 뷰포트

뷰포트(Viewport)란?

뷰포트는 웹 페이지에서 사용자가 볼 수 있는 영역입니다.
뷰포트는 기기의 화면 크기에 따라 달라지며, 컴퓨터 화면보다 휴대폰에서 더 작아질 것입니다.

태블릿과 스마트폰이 있기 전에는 보통 웹 페이지가 컴퓨터 화면만을 위해 설계되었으며, 웹 페이지에는 정적인 설계와 고정된 크기를 유지하고 있는 것이 일반적이었습니다.
많은 사람들이 태블릿과 스마트폰을 사용하여 인터넷을 사용하기 시작하자, 고정 사이즈의 웹 페이지는 너무 커서 모바일 뷰포트에 맞지 않는 문제가 보였습니다. 이를 해결하기 위해 모바일 기기의 브라우저는 스크린 크기에 맞게 전체 웹 페이지를 축소했습니다.

 

뷰포트 설정

HTML5에서 <meta> 태그를 통해 뷰포트를 제어할 수 있도록 하는 방법이 소개됐습니다.
다음 <meta> 뷰포트 요소를 모든 반응형 웹 페이지에 포함해야 합니다.

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

• <meta /> 뷰포트 요소는 페이지의 크기 및 배율을 제어하는 방법에 대한 지침을 브라우저에 제공합니다.
• width=device-width은 페이지의 너비를 설정하여 기기의 화면 너비를 따르도록 합니다.(기기에 따라 다름)
• initial-scale=1.0은 브라우저에 의해 페이지가 처음 로드될 때 초기 확대/축소 레벨을 설정합니다.

 

콘텐츠 크기 조정

사용자들은 보통 데스크톱과 모바일 기기에서 웹 사이트를 수평으로 스크롤하지 않습니다.
따라서 사용자가 전체 웹 페이지를 보기 위해 수평으로 스크롤하거나 축소해야 할 경우 사용자 경험(UX)이 좋지 않게 됩니다.

따라야 할 몇 가지 추가 규칙:

1. 이미지와 같은 미디어 콘텐츠가 뷰포트보다 넓은 폭으로 표시되는 경우, 이 콘텐츠를 뷰포트의 폭에 맞게 조정해야 합니다.
2. 스크린 크기와 CSS 픽셀의 너비는 기기마다 매우 다르기 때문에 콘텐츠는 특정 뷰포트 폭에 의존해서는 안 됩니다.
3. 페이지 요소에 대해 큰 절대 CSS 폭을 설정하면 요소가 더 작은 장치의 뷰포트에 비해 너무 넓어집니다. 대신 width: 100%와 같은 상대적 너비 값을 사용해야 합니다. 또한 절대적인 위치 지정 값을 너무 크게 사용하지 않도록 주의해야 합니다. 화면이 작은 기기에서 UI 요소를 뷰포트 밖으로 밀어낼 수 있기 때문입니다.

---

 

여기까지 반응형 웹, 뷰포트에 대한 개념을 간단하게 알아보았습니다.
다음 글에서는 실습 진행과 함께 Grid view에 대해 알아보겠습니다.

 

반응형 웹 - 2. 그리드 뷰 (feat. React, styled-components)

반응형 웹 - 3. 미디어 쿼리 (feat. React, styled-components)