반응형 웹과 미디어 쿼리 1 - 반응형 웹 알아보기

이제 책으로 반응형 웹과 미디어 쿼리에 대해서 공부해보려고 한다. 이 단원만 학습하고 새벽 2시 조금 넘어서부터 진행되었던 5시간 동안의 새벽 공부를 마칠 생각이다.

 

반응형 웹 디자인은 PC 브라우저든 모바일 브라우저든 사용자의 접속 환경에 맞추어 사이트의 레이아웃을 자연스럽게 바꾸어 보여 주는 것을 말한다. 화면 크기가 다양한 모바일이 계속 쏟아져 나오는데 그때마다 사이트를 따로따로 제작하는 것은 매우 비효율적이다.

이런 점을 고려해서 화면 크기에 '반응'하는 화면 요소를 자동으로 바꾸어 사이트를구현하는 것이 바로 반응형 웹 디자인이다.

---

 

 

 

반응형 웹 디자인이란?

포털 사이트나 쇼핑몰 사이트의 경우 모바일 기기의 특성을 충분히 활용할 수 있도록 모바일 사이트를 별도로 제작한다. 이때 반응형 웹  디자인은 웹 요소를 화면 크기에 맞게 재배치하고 각 요소의 표시 방법만 바꾸어 사이트를 구현해준다.

 

 

국립현대미술관 홈페이지를 살펴보자. PC 화면으로 보았을 때는 이렇게 표시된다.

 

 

 

 

 

 

화면의 크기를 중간쯤 줄이면 이렇게 표시된다.

 

 

 

 

 

크기를 더 줄이면 제목 표시도 없어지고 로고만 보인다. 그리고 오른쪽에 메뉴를 선택할 수 있는 바가 나타난다.

---

 

 

 

 

 

모바일 기기를 위한 뷰포트

반응형 웹 디자인에서 기본적으로 알아 두어야 할 것은 뷰포트(viewport)이다. PC에 맞게 지작한 웹 사이트를 모바일 기기에서 접속해서 보면 모든 내용이 작게 표시된다. 그 이유는 PC 화면과 모바일 화면에서 표시되는 픽셀의 차이 때문이다. 뷰포트를 지정하면 접속한 기기의 화면에 맞추어 확대하거나 축소해서 표시할 수 있다. 이때 '뷰포트'란 스마트폰 화면에서 실제 내용이 표시되는 영역이다.

 

이러한 이유 때문에 스마트폰으로 제작한 웹 페이지의 내용은 의도와 달리 작은 글씨와 그림으로 표시된다. 그러므로 모바일 기기에 적합한 사이트를 제작하려면 뷰포트 개념을 꼭 알아야 한다.

 

 

 

뷰포트 지정하기

---

 

 

 

뷰포트 단위

뷰포트 개념이 등장하기 전까지는 CSS에서 크기를 지정할 때 주로 px, %의 단위를 사용했지만 이제는 다음과 같이 뷰포트를 기준으로 하는 단위를 사용할 수 있다.

 

예를 들어 뷰포트의 너비가 1000px, 높이가 800px일 경우 1vw는 10px, 1vh는 8px가 된다. 1vmin은 너비값과 높이값 중 작은 값인 800px의 1%인 8px이 된다. 그렇다면 vmax는 10px이 되는 것이다.

만일 화면을 돌리면 어떻게 될까? 방향이 바뀌므로 1vx는 8px, 1vx는 10px이 된다.

 

다음 예제는 글자 크기를 5vw로 지정해서 뷰포트 크기가 달라질 때마다 제목의 글자 크기가 상대적으로 달라지도록 한 것이다.

 

뷰포트 단위를 사용해 글자 크기 조절하기

 

 

화면 크기에 따라 글씨의 크기도 달라지고 있다.

---

 

 

 

 

DO IT 실습 - 크롬 브라우저의 디바이스 모드 활용하기

반응형 웹 사이트를 만들 때 여러 기기에서 제대로 보이는지 테스트해야 하는데, 모든 기기를 다 갖추고 직접 확인하는 게 쉽지 않다. 이럴 때는 크롬 개발자 도구의 디바이스 모드를 활용하면 도움이 된다. 크롬 개발자 도구의 디바이스 모드는 반응형 웹 사이트를 제작하는 동안이나 제작이 끝난 사이트를 살펴보는데도 활용할 수 있다.

 

1단계 - 디바이스 모드 시작하기

크롬 브라우저에서  개발자모드 사이트에 접속한 후 개발자 도구 창을 연다. 그리고 왼쪽에 있는 디바이스 모드 아이콘을 선택한다.

 

네이버 개발자 모드 사이트

NAVER Developers

 

 

 

 

 

 

 

 

스마트폰 모드로 볼 수 있는 기능으로 전환되었다.

---

 

 

 

2단계 - 화면 크기에 따라 확인하기

Responsive 항목에서 현재 화며면의 가로, 세로 값을 확인할 수 있다. 크기에 따라 화면의 크기가 달라진다.

 

---

 

 

 

 

3단계 - 작은 화면 크기로 바꾸기

Responsive 항목 바로 아래에 있는 회색 막대 부분으로 반응형 웹 디자인을 확인할 수 있다. 여기에 마우스 포인터를 올리면 어떤 기기 기준으로 볼 수 있는지 나타난다.

 

 

이렇게 크기 조절이 가능하다.

 

 

 

그리고 가운데 상단에 마우스를 가져다 대면 이렇게 어떤 기기 기준인지 표시된다. 평소에는 아무것도 표시되지 않는다.

 

---

 

 

 

학습을 마치고

강의 영상을 하나 시청한 후 첫번째 단원 학습을 진행해보았다. 쪽수는 많지 않았지만 실습을 하면서 공부를 하니 나름 배울 게 많았다. 이제 아침 루틴을 수행하고 운동갈 준비를 해야겠다.

새벽 시간이 정말 금방 지나간다. 오늘도 졸리면 일찍 자고 새벽에 일찍 일어나서 공부할 생각이다. 저녁에는 집중력이 흐려지는데 새벽에는 정신도 맑고 아무리 많은 시간을 공부해도 전혀 지치지 않는다.

 

이번 시간을 통해 신기한 것들을 실습해볼 수 있었다. 네이버에 이런 개발자 사이트가 있다는 것도 처음 알았고 앞으로 자주 활용해볼 것이다.