반응형 웹 사이트란?

다양한 Device가 등장하며 그에 최적화된 CSS 디자인을 보여지도록 되어있는 사이트 의미

https://vimeo.com/85914334

 

실제 웹 사이트에서는 화면을 작게 해도 아래처럼 변형되지 않게 되어있다.

그래서 데스크톱 PC용 브라우저를 기본으로 만들어진 곳을 

모바일로 접속하면 글자 등이 작아 확대해서 볼 수 밖에 없다.

 

그래서 포털 사이트나 쇼핑몰의 경우에는 모바일 기기의 특성을 활용해

모바일 사이트를 별도로 제작하였다.

다양한 화면 크기의 모바일 기기들이 계속 쏟아져 나오는데

그 때마다 그 크기에 맞춘 사이트를 별도로 제작하는 것

투자 비용과 시간 및 인력이 만만치 않다.

 

그렇기에 반응형 웹 사이트를 제작하여  

https://colly.com/ 처럼 화면 크기에 '반응'해 

화면 요소들을 자동으로 바꾸는 방식이 존재한다.

반응형 웹의 장단점

1. 웹 표준을 지원하는 어떤 스마트 기기에서든 접속가능.

2. [가로 모드]에도  너비 값에 맞춰 렌더링할 수 있다.

3. 추가적인 서버없이 HTML, CSS로 구현하기에 사이트 유지보수에 용이.

    ※ 도구: Viewport Meta Tag / Media Query / Grid System

        하지만 Media Query와 Flex Box는 최신 웹 표준인 CSS3의 일부이기 때문에 

        최신 모던 브라우저에서만 지원된다.

 

위에서 제시한 도구를 같이 활용해야 효율적.

모바일 기기에 적합한 사이트를 제작했더라도 

정작 스마트폰 화면 페이지의 글자들이 매우 작게 표시된다. 

이는 웹키트(webkit) 기반 모바일 브라우저 기본 뷰포트 너비가 980px 이기 때문입니다. 

 

즉, PC화면과 모바일 화면의 픽셀 표현 방법이 다르기 때문에

스마트폰용으로 제작한 웹 페이지 내용들이 의도와 달리 작게 보이는 것이다.

그렇기에 다음과 같이 viewport를 지정할 필요가 있다.

<meta name=“viewport” content=“width=device-width, initial-scale=1"

[해석] 뷰포트의 너비를 스마트폰 화면 너비에 맞추고 초기 화면 배율 1 지정

 

https://m.naver.com/ 설정

content = "width=device-width" → 가로 폭을 기계에 맞춘다.

user-scalable = no → 모바일로 했을 때 zoom이 되지 않도록

initial-scale = 1.0  → 초기 사이즈 1 비율

maximum-scale=1.0 → 확대해도 1 비율 유지

 

이러한 반응형 웹 사이트를 개발할 때는 

- Chrome 개발자 도구의 [디바이스 모드]를 활용하면 좋다.

- 일반적으로는 작은 화면인 모바일 부터 화면을 고려하는 개발 방법론이 많이 제시된다. (『Mobile First』)

- Bootstrap, SemanticUI, MaterializeCSS 등 이미 잘 구축된 라이브러리도 존재.