[웹 개발] 반응형 웹이란?

최근 웹 공부를 시작하면서 간단하게 사이트를 만들고 있는데

모바일 기기로 보니 사진은 찌부되고 보기에 좋지 않았다.

그래서 다들 반응형 웹을 강조하는구나 싶었다.

 

이번 기회에 반응형 웹에 대해 공부해보고 만들고 있는 사이트에 적용해보려고 한다.

 

---

태블릿의 열풍, 스마트폰의 각기 다른 해상도, 다양한 모바일 기기의 등장으로 웹의 콘텐츠들이 각기 다르게 배치되어야 할 필요성이 증가되었다. 가끔 스마트폰으로 웹 서핑을 하다보면 보기 불편하게 배치되어 있는 경우를 볼 수 있다. (내 웹사이트 처럼) 이러한 문제점 때문에 여러 버전으로 웹을 제작해야 하는 불편함이 생겼다. 그러나 반응형 웹은 여러 버전 제작의 불편함을 해소한다.

 

반응형 웹은 UI를 의도대로 보여주면서 동시에 디스플레이되는 기기의 요구사항에 유연하게 반응할 수 있는 웹 디자인을 의미한다.

예를 들어 태블릿에서는 두 개의 열로 배치되지만 더 작은 스마트폰 화면에서는 하나의 열만 배치될 수 있는 것이다.

반응형 웹 디자인은  CSS3, HTML을 이용하여 콘텐츠의 크기를 조정하고 필요한 경우 숨기기도 한다.

그렇기 때문에 일반적인 웹 디자인보다 웹 디자인과 레이아웃에 대한 높은 이해가 필요하다고 한다.

반응협 웹은 UX(User eXperience)면에서도 긍정적인 효과를 가져올 수 있다.

---

 

모바일 퍼스트 (Mobile First)

모바일 우선주의로 번역되기도 하는 모바일 퍼스트는 반응형 웹과 관련이 있는 개념이다.

번역한 그대로 웹을 제작할 때 모바일 기기를 우선으로 생각하여 디자인하고 개발하는 방식이다.

LukeW에 의해 시작된? 개념이라고 한다.

아무래도 모바일 기기의 발달로 인해 데스크탑보다는 모바일 사용자가 증가하고 있으므로 모바일을 우선시하는 것 같다.

 

---

반응형 웹 기법

 

* CSS3 미디어 쿼리 (Media Query)

 

반응형 웹이 가능케 하도록 큰 역할을 한 것이 CSS3라고 한다.

미디어 쿼리는 CSS 모듈 중 하나인데 웹에 접속한 장치에 따라 특정한 CSS style을 display하는 기능이다.

@media [only |not] 미더유형 [and 조건]*[and 조건]

all	모든 유형	aural	음성 합성 장치 (ex. 보이스오버)
print	인쇄 장치	braille	점자 표시장치
screen	컴퓨터 스크린, 스마트폰	handheld	태블릿
tty	디스플레이 기능 제한장치	projection	프로젝터
embossed	점자 프린터

 

---

참고 : https://developers.google.com/web/fundamentals/design-and-ux/responsive?hl=ko

사진 출 처 : https://commons.wikimedia.org/wiki/File:Responsive_Web_Design_for_Desktop,_Notebook,_Tablet_and_Mobile_Phone.png