[CSS] 반응형 웹 레이아웃 분류 (Responsive Web Classification)

React에서 반응형 레이아웃을 구현하기 앞서 레이아웃을 어떻게 나눌 수 있는지 매번 고민이 있었다.

디자이너가 보통 정해주는데로 작업을 진행하겠지만, 다양한 크기의 디바이스에 따른 화면 구현이 이제는 필수적이기 때문에 해당 개념 정리가 필요하다고 생각한다.

이번 기회에 레이아웃의 종류가 어떻게 이루어져있는지와 리액트에서 반응형 레이아웃 구현에 대해 정리해보겠다. (해당 포스트는 레이아웃의 종류만 다룬다.)

1. 반응형 웹이란? (Responsive Web Sites)

반응형 웹이란 디바이스 종류에 따라 웹페이지의 크기가 자동적으로 재조정 되는 것을 말한다. 어떠한 환경에서도 그에 맞게 사이즈가 변화되어 사용자가 보기 편하며, 오직 하나의 HTML 소스 만으로 특정 장치에 최적화된 환경을 사용자에게 제공한다.

반응형 웹에 있어서 '모바일 퍼스트' 개념을 몰라서는 안된다. 모바일 퍼스트는 웹 디자인을 할 때, PC보다 모바일 기기를 먼저 생각해서 디자인하고 프로그래밍하는 기법이다. 불필요한 요소를 최소화 시킨 모바일 웹은 사이트가 진짜로 제공해야 할 내용과 기능이 무엇인지 나타낸다. 이를 생각하며 반응형 웹의 최종형은 모든 기기에서 사용자가 원하는 컨텐츠를 보기좋게 제공하는 것이라고 볼 수 있다.

2. 반응형 웹 분류 (Responsiveness Web Classification)

Static or Fixed Layout / Liquid or Fluid Layout / Responsive Layout

크게 세가지로 구분할 수 있으며, 현재 대부분의 웹사이트는 Fluid나 Responsive(Adaptive) 디자인으로 선호된다.

1) Static / Fixed Layout

현재는 선호되지 않는 디자인으로 Fixed 디자인을 따르는 레이아웃은 뷰포트 크기를 따르지 않는다.

해당 레이아웃의 엘리먼트들은 정해진 픽셀만큼 너비가 정해지며 이는 기종이나 화면 크기에 상관없이 언제나 같다. 

 

- 절대적인 크기로 존재

- 기기에 따른 CSS 차이 x

- 모든 기기에 같은 HTML 컨텐츠 사용

- 하나의 URL로 통일 

 

2) Liquid / Fluid Layout

 

Fluid 웹 디자인은 페이지 내 엘리먼트들의 너비(width)를 화면 또는 브라우저 창의 너비에 비례하여 설정한다.

크기를 특정 픽셀이 아닌 퍼센테이지로 정하여 요소들의 비율이 화면 크기가 달라도 같게 유지된다.

현재 뷰포트의 너비에 따라 확장 또는 축소되어 스크린 크기가 다른 여러 환경에서도 웹 사이트의 사용성을 높이는데 유용하다.

 

 

· Liquid or Fluid Layout — do not respond directly to different devices or viewport characteristics, it relies fully on relative measures to make the content spread into available space. If the browser is very wide, some content might be stretched too far. On large screens, a single paragraph might run across the page on a single line. Conversely, a multi-column layout on a small screen could be too crowded for the content.

 

 

- 요구에 부응하는 상대적인 크기로 측정

- 기기에 따른 CSS

- 모든 기기에 같은 HTML 컨텐츠 사용

- 하나의 URL로 통일

 

 

3) Responsive Layout

 

- 각기 다른 화면, 브라우저, 해상도, 기기에 따른 반응

- 상대적인 크기와 컨텍스트에 따라 측정

- 클라이언트 화면, 브라우저, 해상도, 기기 별로 더 세분화 가능

ex) Responsive Web Design (RWD), 유동적이고 다양한 CSS 스타일이 있는 경우 / Adaptative Design, RWD이며 다양한 HTML으로 구성된 경우 / Seperate Mobile Stie, adaptative 적응형이며 모바일 사이트에 따른 별도의 페이지 URL이 있는 경우

 

 

 

References.

What is the difference between fixed, fluid, adaptive and responsive layouts and why should I care?

Fluid 웹 디자인, 반응형 웹 디자인과 무엇이 다를까?

CSS : 반응형 웹(Responsive Web)

Advanced Styling with Responsive Design (University of Michigan)