01. 반응형 웹 기본 개념 이해하기

해당 서적의 스터디 및 정리 내용입니다.

 

01. 반응형 웹 기본 개념 이해하기

01-1. 반응형 웹이란?

반응형 웹이 세상에 나온 이유

모바일에서 인터넷을 사용하면 모든 웹사이트들이 모바일 화면 크기로 축소되어 보인다. 그래서 등장한 것이 ‘모바일 웹’ 이다.

모바일 웹과 반응형 웹

모바일 기기뿐만 아니라 태블릿 기기 등 모바일 기기보다 화면이 큰 기기가 등장함에 따라 작은 화면에서만 최적화된 웹사이트를 제공하는 모바일 웹이 화면이 큰 기기에서는 작게 보이게 되어 다시 문제가 되었다.

PC 버전의 웹사이트와 모바일 버전의 웹사이트, 이 두 가지 웹사이트를 만들게 되면 비용과 시간, 인력을 두 배로 투자해야하는 현실적인 문제도 해결해야 한다.

2010년 5월 반응형 웹이라는 기술이 등장했다.

반응형 웹이란?

PC, TV, 내비게이션, 스마트 기기 등 기기마다 또는 환경마다 최적화된 웹사이트를 제공해주는 것을 말한다.

Media Queries (https://mediaqueri.es/)

 에서 반응형 웹 소식을 받아보거나 반응형 웹사이트들을 볼 수 있다.

01-2 왜 반응형 웹으로 만들어야 하나?

PC 버전의 웹사이트와 모바일 버전의 웹사이트 두 가지 모두를 만들지 않아도 됨에 따라 비용과 시간, 인력을 반으로 줄일 수 있게 되었다.

유지보수가 간편하다.

모든 버전의 디자인을 하나의 HTML파일과 CSS 파일에서 작업하기 대문에 유지보수가 쉽다.

모바일 점유율의 증가.

모바일로 인터넷을 사용하는 것은 당연한 일이 되었다. 그러므로 웹사이트를 만들 때는 PC용 웹 이외에 모바일용 웹을 별도로 만들거나, 반응형 웹으로 만드는 것이 기본이다.

마케팅에 유리하다.

웹은 언제, 어디서든 스마트 기기로 쉽게 접근할 수 있기 때문에 다양한 마케팅 활동을 펼칠 수 있는 곳이다.

검색 엔진 최적화가 가능하다.

검색 엔진 최적화란 SEO(Search Engine Optimize) 라고도 하며, 포털 사이트 또는 검색 사이트에서 사용자가 특정 키워드로 검색을 했을 때 나오는 웹사이트 검색 결과에서 상위권에 나타나도록 관리하는 작업을 말한다.

모바일 버전과 테스크톱 버전의 두가지 홈페이지가 있다면, 검색 결과나 유입도 두갈래로 나눠지게 된다.

반응형 웹을 이용하면 하나의 주소와 하나의 파일로 이루어져 있어 검색 결과에 좀 더 잘 노출될 수 있다.

검색 사이트의 검색 엔진 최적화 방법을 소개하는 문서들을 살펴보면 반응형 웹사이트 홈페이지 만드는 것을 권장하고 있고 검색 엔진 최적화 방법 중 하나라고 소개하고 있다.

미래 지향적 기술이다.

지금처럼 다양한 기기가 출시되고 앞으로 어떤 화면의 기기가 나올지 모르는 상황에서 반응형 웹은 바람직한 대안이라고 볼 수 있다.

— 반응형 웹, 무조건 해야할까?

상황에 따라 모바일 웹처럼 별도의 웹사이트를 만드는 것이 더 효율적일 수도 있다.

무리하게 개발하거나 개편하기 보다 두 가지 고려 사항을 고민해보자

기획력과 디자인은 필수.

반응형 웹으로 제작할 때는 기기 혹은 환경마다 자연스럽게 변화할 수 있는 웹사이트 구조로 설계할 필요가 있다. 즉, 사용자 경험을 고려한 설계가 필수다.

비용, 무시할 수 없는 요소.

반응형 웹으로 제작할 경우 모바일 웹을 따로 제작하는 것보다 훨씬 많은 비용이 필요할 수도 있으며, 유지보수도 만만치 않다.

01-3. 사례로 알아보는 반응형 웹

워드프레스 같은 CMS 도구를 이용해 제작한 웹사이트를 판매하는 사이트에서도 대부분이 반응형 웹으로 제작되는 것을 볼 수 있다.

많은 회사들이 기존의 웹페이지를 반응형 웹페이지로 바꾸거나 제작하여, 많은 도움이 된 사례가 충분히 많다.

01-4. 반응형 웹 학습과 제작을 위한 준비 작업

웹 브라우저 준비하기

최신 기술들을 가장 잘 지원하는 크롬 브라우저를 설치하자.

Chrome 웹브라우저

코드 편집기 준비하기

윈도우에서는 에디트플러스(Editplus), 서브라임 텍스트(Sublime Text), 노트패드(Notepad), 비쥬얼 스튜디오(Visual Studio), 이클립스(Eclipse) 와 같은 코드 편집기를, 매킨토시에서는 코다(Coda), 서브라임 텍스트, 비비에디트(BBEdit), 텍스트 랭글러(TextWrangler) 같은 코드편집기를 사용할 수 있다.

나는 비주얼 스튜디오 코드를 사용하기로 한다.

Visual Studio Code - Code Editing. Redefined

예제 파일 준비하기

이지스 퍼블리싱 출판사의 책으로

이지스 퍼블리싱 홈페이지의 자료실에서 내려받는다

호스팅 서버 준비하기

처음에는 무료 호스팅 서버를 이용하는게 좋다.

무료 호스팅 서버는 닷홈에서 할 수 있다.

닷홈 호스팅

호스팅 서버에 가입하기 번거롭다면 내 컴퓨터에 서버 환경을 만들어서 테스트해볼수도 있다. 서버 환경을 자동으로 설치해주는 프로그램 중 하나인 오토셋(AutoSet) 을 사용해볼 수 있다.

나는 깃허브 io 를 이용해서 만들어보기로 한다.

 

 

• 서버의 종류
  웹 서버와 호스팅 서버 그리고 클라우드 호스팅이 있다.
  1. 직접 운영하는 서버
     - 관리가 자유롭고 수정할 수 있지만 서버에 관한 지식이 없는 사람은 관리하기 어렵고 인터넷 속도 면에서 불리하다.
  2. 호스팅 서버
     - 사용료만 내면 바로 이용할 수 있지만, 서버를 관리하거나 수정하기 어렵고 한정된 공간만 제공되거나 여러가지 제약이 따를 수 있다.
  3. 클라우드 호스팅
     - 서버의 확장과 축소가 간편하다.

FTP 프로그램 준비하기

호스팅 서버처럼 공간이 있으면 호스팅 공간에 파일을 저장하고 내려받는 프로그램이 필요하다. 파일질라라는 FTP 프로그램을 사용할 수 있다.

나는 깃허브 io 를 사용하려고 하므로, 깃을 통해서 파일 전송을 관리한다.

01-5. 반응형 웹 제작을 위한 핵심 기술 맛보기

픽셀은 한계가 있다. - 가변 그리드

가변 그리드(Fluid Grid) 는 화면의 크기에 관계없이 자유롭게 늘어나거나 줄어들 수 있도록 픽셀(px) 대신 퍼센트(%) 로 제작하는 기술이다.

가변 그리드 레이아웃은 Fluid Layout, Flexible Layout, Flexible Grid 등으로 부르지만 의미는 같다.

웹 디자인에서의 그리드는 웹 페이지의 가로 크기 또는 세로 크기, 여백, 단 수 등 웹사이트의 구조 설계를 위한 의미로 사용되고 있다.

지금까지 웹사이트를 만들 때 픽셀(px) 크기로 계산을 했다면 반응형 웹을 만들 때는 모든 요소를 퍼센트(%) 로 계산한다.

실습 01_1. 고정 크기의 박스를 가변 크기의 박스로 변환하기

가로가 가변적인 박스(%) 를 만들어보자.

https://perust.github.io/responsive-web-design2017/01/01_1.html

px을 %로 바꾸어도 반응형 웹이 완성되지는 않는데, 이는 비율로 제작하면 가변적으로 작동하기는 하지만 기기나 환경에 따라 구조를 바꾸지는 못하기 때문이다.

그래서 화면을 제어할 뷰포트와 화면의 크기나 환경을 감지하여 구조를 바꿔줄 ‘미디어 쿼리’가 필요하다.

미디어 쿼리와 뷰포트

화면의 크기와 환경 감지 및 웹사이트를 변경하는 기술 - 미디어 쿼리

미디어 쿼리(Media Queries)란 컴퓨터나 기기에게 ‘어떤 종류의 미디어인지’, ‘미디어의 화면 크기는 어느정도 되는지’ 미디어에게 질문하고 감지하여 웹사이트를 변경하는 기술이다.

컴퓨터나 기기의 환경 또는 종류를 감지해야 그 기기에 맞게 웹사이트의 구조를 바꿀 수 있기 때문에 반응형 웹을 제작할 때 반드시 필요하다.

• ‘미디어 쿼리’에서 쿼리란?
  • 컴퓨터나 기기를 사용하면서 매번 질문을 하는 작업을 컴퓨터 용어로 ‘질의’ 또는 ‘쿼리(query)’, ‘쿼리 작업’ 이라고 부른다.

화면을 제어하는 기술 - 뷰포트

뷰포트(Viewport) 는 화면에 보이는 영역을 제어하는 기술로, 미디어 쿼리로 수많은 기기의 화면 크기를 감지해야할 때 필요하다.

데스크톱은 지정한 해상도에 따라 보이는 영역이 결정되지만 스마트 기기는 기본 설정값이 자동으로 보이는 영역으로 설정되기 때문에 미디어 쿼리를 사용해도 화면의 크기를 정확하게 감지하지 못한다.

스마트 기기의 보이는 영역을 실제 화면 크기로 변경하여 미디어 쿼리가 기기의 화면 크기를 정확하게 감지할 수 있도록 하기 위해 뷰포트라는 기술을 이용한다.

실습 01_2. 뷰포트 비교하기

https://perust.github.io/responsive-web-design2017/01/01_2.html

이미지를 올리고 데스크톱에서 확인하면 문제가 없지만, 스마트 기기에서는 그림이 더 작게 보인다.

html 문서에 뷰포트를 제어하기위한 <meta> 태그를 작성하면 스마트 기기에서도 이미지가 정상적으로 크게 표현된다.

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

실습 01_3. 미디어 쿼리 사용하기

웹 브라우저의 크기가 320px 이상일 때 배경색을 빨간색 계열로 변경한다.

웹 브라우저의 크기가 768px 이상일 때 배경색을 초록색 계열로 변경한다.

웹 브라우저의 크기가 960px 이상일 때 배경색을 파란색 계열로 변경한다.

https://perust.github.io/responsive-web-design2017/01/01_3.html

플렉서블 박스

플렉서블 박스(Flexible Box) 란 가변적인 박스를 만드는 기술인 동시에 웹사이트 구조 설계를 위한 기술이다.