ViewPort, Responsive Web

viewport

viewport는 웹 페이지가 사용자에게 보여지는 영역을 말합니다.
모바일 웹이나 반응형 웹에서 사용되는 meta tag의 viewport 선언은 필수입니다!

viewport가 중요한 이유는 데스크 탑의 경우 브라우저 화면의 창 사이즈이므로,
화면의 초과하는 컨텐츠가 있을 경우 브라우저 창 사이즈 자체를 키우거나, 스크롤을 사용하여 볼 수 있습니다.
하지만 모바일의 경우 pc보다 해상도가 낮기 때문에 작은 화면의 스마트폰 기기의 브라우저에 모두 표현 할 수가 없고, 가독성이 떨어지게 됩니다.

간단히 말하자면 pc에서는 상관없고, 스마트 폰의 브라우저에서 사이트 내용이 작아 보이게 되고, 컨텐츠 내용들이 잘 보이지 않게 되며, 확대 기능을 사용하여 봐야하는 의미없는 모바일 웹 사이트가 구현됩니다.

과거 모바일 웹이 처음 나왔던 시기에는 데스크탑 pc 기준으로 웹 사이트를 만들었기 때문에
스마트폰으로 웹 사이트를 접속하면 사이트 내용이 축소되어 보여졌습니다.
이유는 스마트폰의 브라우저는 모바일 환경에서 데스크탑 환경처럼 풀 브라우징을 지원하기 때문에 pc에서 보던 화면을 스마트 폰에서 풀브라우저로 띄우게 된다면 얼마자 축소 될지 아시겠죠?
그래서 고객사들중에 스마트폰으로 웹 사이트에 접속하였을 때, 어느정도라도 맞춰달라는 요구가 많아 viewport를 사용하여 기존에 있던 웹 사이트를 모바일에서 볼 수 있도록 개편하는 작업을 했었습니다.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimun-scale=1.0, user-scalable=no">

width=device-width : 페이지의 가로 사이즈를 기기의 스크린 넓이로 설정합니다.
initial-scale=1.0 : 처음 페이지 로딩 시, 확대/축소가 되지 않는 원래 크기를 사용하도록 합니다.
minimum-scale : 줄일 수 있는 최소 크기.
maximum-scale : 늘릴 수 있는 최대 크기.
user-scalable : yes, no 값을 가지며 사용자가 화면을 확대/축소 할 수 있다.

Responsive Web

모바일 웹 사이트를 제공하게 된 후, 반응형 웹 이라는 새로운 기술이 등장하게 되어 pc, 태블릿, 스마트폰에서도 하나의 웹 사이트가 최적하 되어 보여져야하는 프로젝트가 많았습니다.

첫 반응형 웹 사이트를 구축할 당시에는 아래코드처럼 width값에 따라 각각의 맞는 css파일을 호출하였습니다.

<link rel="stylesheet" media="(max-width:320px)" href="mobile.css" />
<link rel="stylesheet" media="(max-width:768px)" href="tablet.css" />

그 후로는 css 파일 내에서 미디어 쿼리를 사용하여 분기처리하여 진행했습니다.

//모바일
.wrap {background:#000;height:40px;border:2px solid red;}

@media (max-width:768px){
 //태블릿
.wrap {height:140px;}

}

@media (max-width:1024px){
 //데스크탑
.wrap {width:1024px;margin:0 auto;height:auto;}

}

프로젝트를 진행할 때, 저는 모바일부터 구현하며, mobile > tablet > pc 순으로 작업을 진행하며, 역순으로 작업해도 크게 의미는 없는 것 같습니다.
위 코드를 보면 똑같은 클래스명이지만 모바일에서 선언한 내용이 태블릿과 pc에 적용이 되기 때문에 css의 내용을 추가하거나, 초기화 시키며 진행한다.
제일 중요한 부분은 기획문서와, 디자인 파일을 모바일, 태블릿, pc를 다 확인하고 작업을 진행하여야 한다는 점인데요.
반응형 웹 사이트의 핵심은 Layout를 얼마나 잘 만들었는가에 따라 달라진다고 생각합니다.
모바일에서 마크업한 내용들을 pc에서 사용하지 않고, 반대의 경우도 마찬가지겠죠?
그렇게 때문에 또 한번 강조하는 디자인 시안 및 기획자료를 확인하고 layout를 설계해야 합니다. 뼈대가 튼튼해야 안무너지겠죠?
한 가지 예로 들자면 어떤 사이트들은 pc 화면에서의 대메뉴가 있고, 모바일도 대메뉴가 따로 있습니다.
이와 같이 작업한 사이트들이 상당히 많아서 놀랐지만, 이렇게 구현하게 된다면 불필요한 마크업뿐만 아니라 개발 코드로 두 배로 들어가야 하기 때문에 기획의도가 아니라면 미연에 방지를 해야 합니다.

그렇다면! 프로젝트 첫 시작점에서 기획자와 얼마나 협의를 잘하고 못하느냐에 따라서 불필요한 마크업이 생기는 걸 방지할 수 있는 것 같습니다.
제가 프로젝트를 진행할 당시에도 그들은 어떤 방식으로 구현하는지 자세히 모르기 때문에 그런 부분들에 대해서 자세히 이해시켜주며 진행해야 된다고 생각합니다.

기획 의도와 일치하는 방향에서 최선을 답을 제시하는 만큼 코드는 간결해집니다.