viewport에 대하여

보통 "반응형", "모바일 사이트" 하면 나오는

 

키워드 두가지가 있다

 

Viewport와 Media 쿼리

 

 

 

둘 중 누구도 없어서는 안되면 필수적인 요소다.

 

media 쿼리는 웹 프론트를 만져본 사람이라면 기본적인 사용법은 익히들 알고있다.

 

물론 이것도 공부하려면 할것들이 제법 많지만

 

필요할때 구글링하면서 쓰면 될만한 내용이라

 

미리부터 공부할 필요는 없을것 같다

 

 

 

그런데 Viewport가 오늘 신선한 충격으로 다가왔다.

 

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

그냥 헤더에 이거 한 줄 넣는것.

 

이 이상으로 이것이 무슨 의미를 갖는지 정확히 어떤 역할을 하는지 관심갖지 못했었다.

 

그냥 넣으면 대부분 만사 오케이니까

 

더이상 건드릴 이유도 공부할 이유도 없었다. (몇가지 옵션 정도는 쓰고있지만..)

 

 

 

그런데 재밌는 부분이 있다.

 

내 데스크탑 기준의 css를 태블릿에서도 비율에 맞게 유지하려면 어떻게 하면좋을까?

 

media query로 일일히 퍼센트에 맞게 조정해준다?

 

물론 이거도 노력하면 비슷한 효과를 볼수있다.

 

지금 내가 말하려고 하는것은 물리적/논리적 해상도의 차이에 대해서다.

 

(지금부터, 아래의 내용은 다소 비 전문적이거나 부정확할 수 있습니다.)

 

 

 

 

물리적은 실제 디바이스의 너비이고

 

논리적은 제품사양에 명시된 스펙에 나온 해상도라고 생각하면 될것같다...

 

 

 

자, 먼저 Viewport를 제외하고 생각하면 media 쿼리는 물리적 해상도를 기준으로 

 

컴포넌트/태그 들의 크기를 일정하게 조정해 주는 역할을 한다고 보면 될것같다

 

 

그런데, Viewport를 잘 이용하면 특정 값을 기준으로 논리적 해상도를 기준으로 css를 적용할수있다. (내가 오늘 이해한 바로는)

 

간단히는 이렇게 볼수있다.

 

<meta name='viewport' content='width=1190' />

이렇게 설정해둔다면

 

디바이스의 크기에 상관없이 

 

css의 width: 100%를 1190px로 보게한다.

 

이미 작성해둔 css들은 걱정하지 않아도, 이를 기준으로해서 알맞게 조정한 크기를 보여주게된다.

 

viewport는 정말 어마무시한 친구다.

 

위의 설정을 누가 이용하는지 아는가?

 

바로, 우리가 매일 보고 사용하고 있는 "네이버"다

 

 

 

네이버를 데스크탑에서 열고 개발자 도구를 보면 viewport가 위와 같이 설정되어있다.

 

그런데, 화면의 크기를 모바일 사이즈정도로 작게하고

 

화면을 다시 로드하면 m.naver.com으로 리디렉션하며 

 

해당 페이지에서 개발자 도구를 보면 viewport는

 

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

과 같은 우리가 흔히 아는 내용으로 작성되어있다.

 

정말 놀라운 viewport의 세계다.

 

 

 

 

현재 내가 운영중인 서비스에서는 네이버처럼 m.을 분리하여 운영할 여력은 없어서

 

javascript를 이용해 디바이스 크기에 따라 로드 시점에 viewport를 다르게 주도록 설정해보았다.