반응형 웹이란?

Google Developers

반응형 웹 레이아웃은 기기의 크기와 기능에 따라 변합니다.

예를 들어, 휴대폰에서는 콘텐츠가 하나의 column으로 표시될 수 있지만 태블릿에서는 두 개의 column으로 표시될 수 있습니다.

• 반응형 웹은 다양한 크기를 가진 기기들에서 웹 페이지의 UI를 의도대로 잘 보이도록 하기 위한 기술로
• HTML과 CSS만을 사용해서 반응형 웹 설계가 가능하며,
• 다양한 기기를 사용하는 모든 사용자에게 UX를 선사하기 위한 설계 방식이다.
  • 다양한 기기에서 웹 UI를 의도한 대로 보여주고,
  • 의도한 대로 동작하는 웹 페이지를 설계하기 위함이다.

반응형 웹을 설계하기 위한 핵심기술

1. 가변 그리드(Fluid Grid)

• 유동형 그리드라고 부르기도 한다.
• 설계자가 그래픽 요소를 합리적이고 흡수하기 쉬운 방식으로 구성할 수 있는 뼈대이자 프레임워크의 역할을 한다.
• 전체 UI에 통일성을 부여하고 일관된 디자인을 유지하여 화면의 전체적인 균형을 맞출 수 있어 더욱 견고한 디자인을 제공할 수 있다.
• 이는 사용자에게 전문적이고 신뢰성과 안정감을 제공할 수 있다.
• px과 같이 고정된 단위가 아니라 상황에 맞게 변할 수 있는 단위인 em이나 %를 사용하여 브라우저 크기에 따라 유동적으로 변할 수 있게 한다.

2. 유연한 이미지(Flexible Images)

• 모든 화면에서 볼 수 있도록 화면 폭보다 큰 이미지를 다운받고 이미지의 넓이값을 100%, 높이값을 자동(auto)로 설정하는 방법이다.
• 단순히 이미지를 화면 폭에 맞게 가로 및 세로의 길이를 줄였다 늘였다 할 수 있다.
• 다만 웹을 기준으로 할 경우 모바일에서는 해상도가 높은 이미지를 크기만 줄여 메모리를 낭비하는 상황이 발생할 수 있다.
• 이미지 외에 비디오 등을 포함시켜 유동형 미디어(Flexible Media)라고 하기도 한다.

3. 미디어 쿼리(Media Query)

• 디바이스 관련 다양한 정보를 이용하여 최적화된 화면을 제공한다.
• 웹 문서 내 미디어 스타일 설정에 사용하는 미디어 쿼리를 이용하면 단말 화면의 폭이나 높이에 따라 레이아웃이 자동으로 구현된다.
• 대표적인 기술로 종속 스타일 시트 3 버전(CSS3:Cascading Style Sheets Version 3)이 있다.
• @media 태그를 CSS 내부 혹은 링크로 연결하여 사용한다.

4. 뷰포트(View Port)

• 웹페이지가 사용자에게 보여지는 영역을 의미하며, 최적의 환경을 제공하기 위해 화면 너비에 맞춰 웹페이지를 랜더링한다.

5. 웹표준

• 국제 웹표준화 기구인 W3C에서 지정한 HTML, CSS3로 소스코드를 작성한다.

반응형 웹의 장점과 단점

장점

1. 디바이스 기기의 호환한다.
2. 도메인 구분없는 동일한 URL을 사용할 수 있다.
3. 간편한 유지보수와 모니터링할 수 있다.

단점

1. 많은 컨텐츠를 보여주기에는 한계가 있다.
2. 로딩속도가 느려질 수 있다.
3. 레이아웃 변경이 어렵다.

정리

시간이 지나면서 사람들이 다양한 기기, 다양한 접속 방법을 통해 웹 페이지나 서비스를 이용하게 된다.

기획자나 개발자라면 다양한 시각에서 생각을 하고, 어떤 용도로 활용될 서비스인가? or 서비스의 특성이 무엇인가?를 파악한 후 상황에 알맞는 반응형 설계방식을 선택하여 구축해야 된다고 생각이 들었다.

용어설명

그리드 : 디자인에서 내용을 구성하는데 사용되는 일련의 직선 또는 곡선이 교차하는 구조를 의미

참고링크

반응형 웹 디자인 기초

반응형 웹, 개념 이해하기

해시넷 - 반응형웹