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

반응형 웹이란?

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

2007년, 처음으로 모바일 기기가 세상에 선을 보이자 사람들은 열광했습니다. 이제야 기본적인 검색뿐만 아니라 예약, 주문까지 언제, 어디서든 할 수 있게 되었다고 소리치면서 말이죠. 하지만 모바일 기기의 인터넷 사용에는 문제가 있었습니다. 바로 모바일에서 인터넷을 사용하면 모든 웹사이트들이 모바일 화면 크기로 축소되어 보인다는 점입니다. 그래서 등장한 것이 '모바일 웹'입니다.

 

 

 

모바일 웹과 반응형 웹

모바일 기기에 최적화된 웹사이트를 제공하기 위해 모바일 웹이 등장하면서 사람들은 쾌적한 웹 사용 환경을 접할 수는 있었지만 곧바로 다른 문제에 봉착하게 되었습니다.

모바일 기기뿐만 아니라 태블릿 기기, 패블릿(스마트 폰과 태블릿의 합성어) 기기 등 모바일 기기보다 화면이 큰 기기가 등장함에 따라 모바일 기기처럼 작은 화면에서만 최적화된 웹사이트를 제공하는 모바일 웹이 화면이 큰 기기에서는 작게 보이게 되어 또 다시 문제가 된 것입니다. 그뿐만 아니라 PC 버전의 웹사이트와 모바일 버전의 웹사이트, 이 두 가지 웹사이트를 만들게 되면 비용과 시간, 인력을 두 배로 투자해야 하는 현실적인 문제도 해결해야 합니다.

이런 문제를 감지한 전 세계의 개발자들은 다양한 방법을 모색하기 시작했고 2010년 5월 반응형 웹이라는 기술이 등장했습니다.

 

 

 

반응형 웹이란?

반응형 웹이란 PC, TV, 내비게이션, 스마트 기기 등 기기마다 또는 환경마다 최적화된 웹사이드를 제공해주는 것을 말합니다. 예를 들어 화면이 작은 기기에서 반응형 웹으로 제작된 웹사이트를 접속했을 때는 웹사이트의 구조를 작은 화면에 최적화된 구조로 변경하여 보여주고, 큰 화면을 가진 기기에서는 웹사이트의 구조를 큰 화면에 최적화된 구조로 변경하여 보여줍니다. 이처럼 기기의 화면이나 환경에 맞게 자유자재로 변하는 것이 반응형 웹입니다.

 

※ 다양한 반응형 웹사이트를 만날 수 있는 곳 반응형 웹 소식을 가장 빨리 받아볼 수 있고, 잘 만들어진 반응형 웹사이트를 만날 수 있는 대표적인 사이트로 미디어 쿼리가 있습니다. 이 사이트 역시 반응형 웹으로 만들어졌습니다.

 

 

 

 

 

 

 

 

 

 

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

왜 웹 개발자들은 반응형 웹을 꼭 배워야 할까요? 나아가 웹 기획자와 웹 디자이너도 반영형 웹을 배워야 하는 이유는 무엇일까요?

반응형 웹이 등장하면서 웹사이트를 사용하는 사람들에게 모든 기기에서 최적화된 웹사이트를 제공할 수 있게 되었고, PC 버전의 웹사이트와 모바일 버전의 웹사이트 두 가지 모두를 만들지 않아도 됨에 따라 비용과 시간, 인력을 반으로 줄일 수 있게 되었습니다. 그러면 왜 반응형 웹으로 만들어야 하는지 구체적으로 알아보겠습니다.

 

 

 

유지보수가 간편하다!

반응형 웹은 유지보수가 간편합니다. 모바일 버전과 데스크톱 버전 같은 두 개의 웹사이트를 만들게 되면 웹사이트에 새로운 내용을 추가하거나 수정할 때 모바일 버전과 데스크톱 버전을 개별적으로 수정해야 하므로 손이 많이 가고 복잡했지요. 하지만 반응형 웹은 모바일 버전, 태블릿 버전, 데스크톱 버전 등 모든 디자인을 하나의 HTML 파일과 CSS 파일에서 작업하기 때문에 유지보수가 쉽습니다.

 

 

 

모바일 점유율의 증가!

세계적으로 인터넷 보급률은 90%, 스마트 기기의 보급률은 70%를 넘습니다. 특히 대한민국은 스마트 기기 인터넷 보급률 및 사용률이 90%가 넘는 인터넷 강국입니다. 만약 스마트 기기 사용자가 지하철에서 뉴스를 보기 위해 언론사 사이트를 본다고 가정해 보겠습니다. 그런데 언론사의 홈페이지가 PC 웹사이트로 만들어져 글씨의 크기들이 작게 보인다면 어떻게 될까요? 사용자는 단 1초의 망설임 없이 다른 언론사를 찾아보거나 웹사이트를 다아버릴 것입니다. 이처럼 모바일로 인터넷을 사용하는 것은 당연한 일이 되었습니다. 그러므로 웹사이트를 만들 때는 PC용 웹 이외에 모바일용 웹을 별도로 만들거나, 반응형 웹으로 만드는 것이 기본입니다.

 

 

 

마케팅에 유리하다!

마케팅이란 market(시장)의 매매를 활발하게 만드는 모든 과정을 말합니다. 제품의 컨셉, 가격 정책이나 유통 정책, 홍보 등을 통해 많이 팔리게 만드는 활동입니다. 그러나 보통 사람들이 마케팅이라고 부를 때는 회사의 제품이나 서비스를 많은 사람들에게 알리기 위한 활동을 말합니다. 요즘은 마케팅 활동의 최적의 장소로 웹이 꼽히고 있습니다. 웹은 언제, 어디서든 스마트 기기로 쉽게 접근할 수 있기 때문에 다양한 마케팅 활동을 펼칠 수 있는 곳이죠.

그런데 마케팅이 진행되는 웹사이트를 데스크톱 버전으로만 만들면 작은 화면의 스마트 기기에서는 화면이 작게 보이게 되어 전달하고자 하는 내용이 제대로 전달되지 않습니다.

이때 반응형 웹이라는 기술을 이용하여 웹사이트를 개발하면 환경이나 기기에 따라 최적화된 구조로 웹사이트를 변경하여 보여줄 수 있기 때문에 전달하고자 하는 내용을 확실하게 전달할 수 있습니다. 그리고 모바일 버전과 데스크톱 버전 등 여러 가지 웹사이트를 만들지 않아도 되기 때문에 기업 비용 측면에서도 상당한 효과를 볼 수 있습니다.

이렇듯 언제 어디서든 접근이 용이해야 하는 웹 마케팅에서 가장 효과적인 방법인 반응형 웹이라는 기술을 이용하여 웹사이트를 개발하는 것입니다.

 

 

 

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

자신의 웹사이트를 사람들에게 최대한 많이 알리고 싶다면 어떻게 해야 할까요? 해답은 바로 검색 엔진 최적화 작업을 하는 것입니다.

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

그렇다면 반응형 웹과 검색 엔진 최적화 작업은 어떤 관계가 있을까요? 만약 모바일 버전과 데스크톱 버전 같은 두 가지 웹사이트가 있다면 주소도 다음처럼 두 가지로 나눠지게 됩니다.

모바일 웹사이트 주소의 예	데스크톱 웹사이트 주소의 예
m.xxx.com	xxx.com

이렇게 주소가 두 가지로 나눠지면 동일한 내용의 웹사이트라도 검색 엔진이 판단할 때는 둘 중에 어떠한 주소의 정보가 정확한 정보인지 확인하기 힘들어 검색 결과에서 제외시킵니다. 따라서, 검색 결과를 상위권에 배치하는 것이 상대적으로 불리해집니다. 특히 홍보나 마케팅을 목적으로 만들어진 웹사이트라면 검색 결과에 노출되지 않으면 치명적인 결과를 초래할 수도 있습니다. 그리고 주소도 두 가지라 광고 비용 또한 당연히 두 배로 늘어나겠죠.

이러한 문제들을 해결하기 위해 반응형 웹을 이용하여 웹사이트를 만드는 것입니다. 반응형 웹사이트는 하나의 주소와 하나의 파일(HTML)로만 이루어져 있어 검색 결과에 좀 더 잘 노출될 수 있고 광고 효과도 톡톡히 볼 수 있습니다.

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

 

 

 

미래 지향적 기술이다!

휘어지는 화면을 탑재한 스마트 기기나 TV, 냉장고, 차량용 내비게이션, 프린터, 화장실 등에 탑재된 웹 브라우저 그리고 환경에 따라 축소 또는 확대되는 건축물과 공상과학 영화에서나 볼 수 있었던 공중에 떠 있는 화면 등 과거에는 상상만 했던 일들이 이제는 모두 현실화되어 정말로 미래 세계에 한층 가까워졌다는 생각을 하게 됩니다.

현재 그리고 미래에서 반응형 웹으로 웹사이트를 개발하게 되면 어떠한 장점들이 있을까요? 예를 들어 환경에 따라 자유롭게 축소 또는 확대되는 건축물이 있고, 그 안에 휘어지는 화면을 탑재한 기기들이 있을 수 있습니다. 이때 누군가가 건축물 안에서 스마트 TV를 이용하여 웹 브라우저를 실행시켜 일반적인 웹사이트를 접속한다고 가정해 봅시다. 아마도 문제 없이 웹사이트를 둘러보다가 건축물이 축소됨에 따라 원래 휘어지는 화면이 탑재된 기기들도 화면이 휘어지거나 축소될 것입니다. 그러면 다음 그림처럼 웹사이트의 일부가 잘려진 모습으로 보이겠죠. 이와 같은 경우 반응형 웹으로 개발된 웹사이트라면 웹사이트의 구조를 환경에 따라 최적화된 구조로 바꾼 웹사이트를 보여줄 것입니다.

지금처럼 다양한 기기가 출시되고 앞으로 어떤 화면의 기기가 나올지 모르는 상황에서 반응형 웹은 웹 기술 중 가장 미래 지향적이고, 미래를 준비하는 바람직한 대안이라고 할 수 있습니다.

 

※ 반응형 웹, 유행이라고 무조건 쫓아야 할까? 반응형 웹이 항상 정답일 수는 없습니다. 상황에 따라 모바일 웹처럼 별도의 웹사이트를 만드는 것이 더 효율적일 수도 있습니다. 기존의 웹사이트 또는 새로운 웹사이트를 무리하게 반응형 웹으로 개편하기 보다는 다음 두 가지 고려 사항을 충분히 고민해본 후 반응형 웹으로 개발하는 것이 좋습니다. 기획력과 디자인은 필수! 반응형 웹으로 제작할 때는 기기 혹은 환경마다 자연스럽게 변화할 수 있는 웹사이트 구조로 설계할 필요가 있습니다. 즉, 사용자 경험을 고려한 설계가 필수죠. 반응형 웹은 기술만 좋다고 해서 쉽게 완성할 수 있는 건 아닙니다. 기획력과 디자인을 완벽하게 갖춘 후 설계해야 합니다. 비용, 무시할 수 없는 요소! 반응형 웹으로 제작할 경우 모바일 웹을 따로 제작하는 것보다 훨씨느 많은 비용이 필요할 수도 있으며, 유지보수도 만만치 않습니다. 모바일 웹이든 반응형 웹니든 개발비부터 유지보수비까지 꼼꼼히 따져보고 결정해야 합니다.

 

 

 

 

 

 

 

 

 

 

반응형 웹 학습과 제작을 위한 준비 작업

웹 브라우저 준비하기

이 책에서는 최신 기술을 가장 잘 지원하고 모든 운영체제를 지원하는 브라우저인 크롬을 기준으로 작업을 합니다. 만약 크롬 브라우저가 설치되어 있지 않다면 www.google.co.kr/chrome에서  서 내려받아 설치하세요.

(보통 윈도우에서는 익스플로러를, 매킨토시에서는 사파리를 사용하는데, 익스플로러의 경우 일부 버전에서는 최신 기술을 잘 지원하지 못하기 때문에 권장하지 않습니다.)

 

 

 

코드 편집기 준비하기

코드 편집기는 코드를 편집하기 위한 코드 전용 편집 프로그램입니다. 윈도우에서는 에디트플러스(Editplus), 서브라임 텍스트(Sublime Text), 노트패드(Notepad), 비주얼 스튜디오(Visual Studio), 이클립스(Eclipse)와 같은 코드 편집기를 사용할 수 있고, 매킨토시에서는 코다(Coda), 서브라임 텍스트, 비비에디트(BBEdit), 텍스트랭글러(TextWrangler) 같은 코드 편집기를 사용할 수 있습니다.  (서브라임 텍스트는 윈도우, 매킨토시 모두에서 사용할 수 있는 편집기입니다.)

기본적으로 편집기마다 제공하는 기능과 코드의 색상도 다르고, 편집기에 기능을 추가할 수 있는 플러그인의 지원 범위도 편집기마다 다르기 때문에 사용자의 입맛에 맞는 편집기를 골라서 사용하는 것이 가장 좋은 방법입니다.

이 책은 마이크로소프트에서 개발한 비주얼 스튜디오 코드를 사용합니다. 비주얼 스튜디오 코드는 http://code.visualstudio.com에서 서 내려받아 무료로 사용할 수 있습니다.

 

※ 기본 편집기 앞에서 소개한 편집기 외에도 운영체제를 설치하면 기본적으로 제공되는 기본 편집기가 있습니다. 기본 편집기는 윈도우나 매킨토시 같은 운영체제 설치 시 기본적으로 설치되는 편집 프로그램입니다. 대표적으로 윈도우에는 메모장이, 매킨토시에는 텍스트 편집기가 있습니다. 기본 편집기는 HTML 태그나 CSS를 흔히 '하드코딩'이라는 방식으로 자유롭게 작성할 수 있습니다. 하지만 코드를 전부 외우고 있어야 하며, 오타를 잡아주는 기능이 없기 때문에 코드를 잘 모르는 사용자에게는 조금 어려울 수 있습니다.

 

 

 

예제 파일 준비하기

이 책에서는 실습하는 내용들을 미리 보거나 독자들이 직접 만든 예제와 비교해 볼 수 있도록 별도의 완성된 예제 파일을 제공하고 있습니다. 예제 파일은 http://easyspub.co.kr의 의 자료실에서 내려받을 수 있습니다.

 

 

 

호스팅 서버 준비하기

호스팅 서버는 인터넷 속 저장 공간으로, 이 저장 공간을 사용하려면 호스팅 서비스 업체에 돈을 지불하고 일정 용량을 빌려야 합니다. 마치 큰 빌딩의 사무실을 빌려 월세를 내는 것과 같습니다. 이 호스팅을 사용하려면 사양에 따라 매월 몇 천원부터 몇 만원 이상의 비용을 지불해야 합니다.

인터넷을 통해 이 호스팅 공간과 내 컴퓨터가 연결되며, 이 공간에 이미지나 동영상을 올려놓을 수 있습니다.

처음에는 무료 호스팅 서비스를 이용하는 게 좋습니다. 나중에 더 많은 파일을 저장하거나 큰 공간이 필요하게 되면 그때 가서 유료 서비스로 바꾸면 됩니다.

무료 호스팅 신청은 http://www.dothome.co.kr에서 서 할 수 있습니다.

 

※ 웹 서버와 호스팅 서버 그리고 클라우드 호스팅 서버의 종류는 다음과 같습니다. 1) 직접 운영하는 서버 개인이 컴퓨터를 구매하거나 빌려서 직접 저장 공간을 만들어 서버를 운영할 수 있습니다. 이 서버는 개개인이 서버를 관리하고 자유롭게 수정할 수 있다는 장점이 있지만 그만큼 서버에 관한 지식이 없는 사람은 관리하기가 까다롭다는 단점이 있습니다. 또 인터넷 속도 면에서도 불리해 호스팅 서버나 임대형 웹 서버를 이용하는 게 훨씬 경제적이고 실용적입니다. 2) 호스팅 서버 호스팅 서버는 특정 업체에서 웹 서버를 준비해 놓고 웹 서버의 일부 공간을 월 사용료를 받고 빌려주는 서비스입니다. 호스팅 서버는 특정 업체에서 이미 기본적으로 모든 설정을 끝낸 상태이므로 월 사용료만 내면 바로 서비스를 이용할 수 있습니다. 단점은 개개인이 서버를 관리하거나 수정하기가 어렵고 서비스에 따라 다르긴 하지만 한정된 공간만 제공되므로 여러 가지 제약이 따른다는 점입니다. 3) 클라우드 호스팅 요즘에는 웹 서버나 호스팅 서버 말고도 클라우드 호스팅이라는 서비스를 제공하는 곳도 많아졌습니다. 클라우드 호스팅이란 웹 서버와 호스팅 서버의 결합 서비스로, 웹 서버처럼 서버의 관리를 자유롭게 할 수 있고 월마다 사용한 공간만큼의 비용만 내면 됩니다. 클라우드 호스팅의 가장 큰 장접은 서버의 확장과 축소가 간편하다는 점입니다. 필요에 따라 일시적으로 저장 공간을 확장할 수도 있고 저장 공간이 필요 없게 되면 바로 축소하면 됩니다.

 

 

 

FTP 프로그램 준비하기

그런데 호스팅 서버처럼 저장 공간은 만들어놨는데, 이 저장 공간에 어떻게 파일을 저장하고 저장된 파일을 다시 내려받을 수 있을까요? 이사할 때 짐을 손쉽게 옮기기 위해 용달차를 이용하듯이 호스팅 서버나 웹 서버에 파일을 자유자재로 옮기기 위해서는 FTP라는 프로그램을 이용해야 합니다.

이 책에서는 파일질라(FileZilla)라는 FTP 프로그램을 사용합니다. 파일질라는 http://www.filezilla-project.org에서 서 [Download FileZilla client] 버튼을 눌러 설치할 수 있습니다.

 

작업할 준비가 다 되었다면 이제 반응형 웹을 제작하는 데 필요한 기술들을 하나씩 알아보겠습니다.

 

 

 

 

 

 

 

• 출처 : "반응형 웹 페이지 만들기"