Do it! 반응형 웹만들기 스터디 1회

 

해당 글은 스터디를 하면서 작성한 Do it! 반응형 웹 만들기 책 내용을 정리한 내용입니다.

 

[첫째마당] 반응형 웹을 위한 기본 기술들

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

2. px를 %로 바꾸기 - 가변 그리드

3. 미디어 쿼리와 뷰포트

4. 새로운 웹 기술, 플렉서블 박스

 

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

사용자의 환경 또는 특정한 행동에 따라 '반응하는 웹'이라고 할 수 있습니다..

 

01-1 반응형 웹이란?

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

처음 모바일이 나온 이후 한가지 문제가 있었습니다. 바로 모바일에서 인터넷을 사용하면 모든 웹사이트들이 모바일 화면 크기로 축소되어 보인다는 점입니다. 그래서 등장한 것이 '모바일 웹'입니다.

모바일 웹과 반응형 웹

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

뿐만 아니라 PC 버전과 모바일 버전의 웹사이트, 이 두 가지 웹사이트를 만들게 되면 비용과 시간, 인력을 두 배로 투자해야 하는 현실적인 문제도 해결해야했습니다. 이에 따라 2010년 5월 반응형 웹이라는 기술이 등장했습니다.

반응형 웹이란?

반응형 웹이란 PC, 모바일 기기 등 기기마다 또는 환경마다 최적화된 웹사이트를 제공해주는 것을 말합니다.

기기의 화면이나 환경에 맞게 자유자재로 변하는 것이 반응형 웹입니다.

다양한 반응형 웹사이트를 만날 수 있는 곳

많은 사이트가 있지만, 대표적으로 미디어 쿼리(http://mediaqueri.es)가 있습니다. 이사이트 역시 반응형 웹으로 만들어졌습니다.

 

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

반응형 웹이 등장하면서 웹사이트를 사용하는 사람들에게 모든 기기에서 최적화된 웹사이트를 제공할 수 있게 되었고, 비용과 시간, 인력을 반으로 줄일 수 있게 되었습니다.

유지보수가 간편하다!

반응형 웹은 모바일 버전, 태블릿 버전, 데스크톱 버전 등 모든 디자인을 하나의 HTML 파일과 CSS 파일에서 작업하기 때문에 유지보수가 쉽습니다.

모바일 점유율의 증가!

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

마케팅에 유리하다!

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

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

만약 모바일 버전과 데스크톱 버전 같은 두 가지 웹사이트가 있다면 주소도 두 가지로 나눠지게 됩니다.

주소가 두 가지로 나눠지면 동일한 내용의 웹사이트라도 검색 엔진이 판단할 때는 둘 중에 어떠한 주소의 정보가 정확한 정보인지 확인하기 힘들어 검색 결과에서 제외시킵니다.

이러한 문제들을 해결하기 위해 반응형 웹을 이용하여 웹사이트를 만드는 것입니다. 반응형 웹사이트는 하나의 주소와 하나의 파일(HTML)로만 이루어져 있으며, 검색 사이트의 검색 엔전 최적화 하는 방법을 소개하는 문서들을 살펴보면 반응형 웹사이트 홈페이지를 만드는 것을 권장하고 있고 검색 엔진 최적화 방법 중 하나라고 소개하고 있습니다.

반응형 웹, 유행이라고 무조건 쫓아야 할까?

반응형 웹이 항상 정답일 수는 없습니다. 상황에 따라 모바일 웹처럼 별도의 웹사이트를 만드는 것이 더 효율적일 수도 있습니다.

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

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

 

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

세계가 주목하는 반응형 웹!

해외의 반응형 웹 사례

넥타이 회사 - 스키니 타이

메인 영역에 넥타이를 걸어놓는 디자인으로 구성하고 화면이 작아졌을 때는 슬라이더 형식으로 변경되어 사용자들이 넥타이를 손쉽게 선택할 수 있도록 해 신선함까지 더하고 있습니다.

신문, 잡지 사이트 - 보스턴 글로브

보스턴 글로브는 흰색 바탕에 글자 위주의 디자인과 각각의 영역을 회색의 선으로만 구분하여 간단한 디자인으로 구성해 반응형 웹으로 제작했습니다.

 

국내의 반응형 웹사례

화장품 업체 - 닥터 자르트

화면이 작아졌을 때 기존의 메뉴 영역을 감추고, 대신 토글 버튼을 누르면 내에서 창이 새로 뜨는 방식인 모달 형식으로 색다른 사용자 경험을 제공하고 있습니다.

한국은행 화폐박물관

화면이 작아졌을 때는 메뉴 영역을 감춘 후 토글 버튼이 나타납니다. 그러면 토큰 버튼을 눌러 메뉴를 볼 수도 있고 신선한 사용자 경험을 맛볼 수도 있지요.

또한 큰 화면에서는 슬라이더 영역으로 이미지들이 채워지는 형태로 되어있지만 작은화면에서는 하나의 이미지로 처리하여 사용자에게 정보를 확실히 전달해주고 있습니다.

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

웹 브라우저 준비하기

최신 기술들을 가장 잘 지원하고 모든 운영체제를 지원하는 브라우저인 크롬을 기준으로 작업을 합니다.

코드 편집기 준비하기

여기서는 비주얼 스튜디오라는 편집기를 사용합니다.

기본 편집기

기본 편집기는 윈도우나 매킨토시 같은 운영체제 설치 시 기본적으로 설치되는 편집 프로그램입니다. 대표적으로 윈도우에는 메모장이, 매킨토시에는 텍스트 편집기가 있습니다.

기본 편집기는 HTML 태그나 CSS를 흔히 '하드코딩'이라는 방식으로 자유롭게 작성할 수 있습니다. 하지만 코드를 전부 외우고 있어야 하며, 오타를 잡아주는 기능이 없기 때문에 코드를 잘 모르는 사용자에게는 조금 어려울 수 있습니다.

예제 파일 준비하기

예제 파일은 http://easypub.com 자료실에서 내려받을 수 있습니다.

호스팅 서버 준비하기

호스팅 서버는 인터넷 속 저장 공간으로, 이 저장 공간을 사용하려면 호스팅 서비스 업체에 돈을 지불하고 일정 용량 빌려야 합니다.

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

웹 서버와 호스팅 서버 그리고 클라우드 호스팅

1. 직접 운영하는 서버

개인이 컴퓨터로 직접 저장공간을 만들어 서버를 운영할 수 있습니다. 이 서버는 개개인이 서버를 관리하고 수정할 수 있다는 장점이 있지만 그만큼 서버에 관한 지식이 없는 사람은 관리하기가 까다롭습니다. 또 인터넷 속도 면에서도 불리해 호스팅 서버나 임대형 웹 서버를 이용하는 게 훨씬 경제적이고 실용적입니다.

2. 호스팅 서버

호스팅 서버는 업체에서 웹 서버를 준비해 놓고 웹 서버의 일부 공간을 월 사용료를 받고 빌려주는 서비스입니다. 이미 기본적으로 모든 설정을 끝낸 상태이므로 월 사용료만 내면 바로 서비스를 이용할 수 있습니다. 단점은 개개인이 서버를 관리하거나 수정하기가 어렵고 서비스에 따라 다르긴 하지만 한정된 공간만 제공되므로 여러가지 제약이 따릅니다.

3. 클라우드 호스팅

클라우드 호스팅이랑 웹 서버와 호스팅 서버의 결합 서비스로 웹 서버처럼 서버의 관리를 자유롭게 할 수 있고 월마다 사용한 공간만큼의 비용만 내면 됩니다. 클라우드 호스팅의 가장 큰 장점은 서버의 확장과 축소가 간편하다는 점입니다.

FTP 프로그램 준비하기

호스팅 서버나 웹 서버에 파일을 자유자재로 옮기기 위해서는 FTP라는 프로그램을 이용해야 합니다. 이 책에서는 파일질라(FileZilla)라는 FTP 프로그램을 사용합니다. 파일질라는 http://www.filezilla-project.org 에서 [Download FileZilla client] 버튼을 눌러 설치할 수 있습니다.

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

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

우선 가변 그리드(Fluid Grid)라는 개념을 이해하고 있어야 합니다. 가변 그리드는 웹사이트를 제작할 때 화면의 크기에 관계없이 자유롭게 늘어나거나 줄어들 수 있도록 픽셀(px) 대신 퍼센트(%)로 제작하는 기술입니다.

지금까지는 웹사이트를 만들 때 픽셀(px) 크기로 계산을 했다면 반응형 웹을 만들 때는 모든 요소를 퍼센트(%)로 계산합니다. 가변 폭에 따라 내용들도 가변적이게 늘어나거나 줄어듭니다.

[코딩] 고정크기의 박스를 가변 크기의 박스로 변환하기

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

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

미디어 쿼리와 뷰포트

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

미디어 쿼리(Media Queries)란 기기의 미디어에게 질문하고 감지하여 웹사이트를 변경하는 기술입니다.

'미디어 쿼리'에서 쿼리란 무엇일까요?

우리가 컴퓨터나 기기를 사용하면서 매번 질문을 하는 작업을 컴퓨터 용어로는 '질의' 또는 '쿼리(Query)', '쿼리 작업'이라고 부릅니다.

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

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

뷰포트는 모니터나 기기의 화면을 통해 보이는 영역을 뜻하기도 합니다.

스마트 기기는 기본 설정값이 자동으로 보이는 영역으로 설정되기 때문에 미디어 쿼리를 사용해도 스마트 기기에서 화면의 크기를 정확하게 감지하지 못합니다.

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

[코딩] 뷰포트 비교하기

뷰포트가 적용되지 않은 파일 확인하기

확인해 보면 데스크톱에서는 문제가 없어 보이지만 스마트 기기에서는 그림이 더 작게 보입니다.

스마트 기기에서 그림이 작게 보이는 문제를 해결하기 위해 <head>. </head> 태그 사이에 뷰포트를 제어하기 위한 <meta> 태그를 작성합니다.

 

<head>

<meta charset="UTF-8">

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

<title>Document</title>

</head>

 

<meta> 태그를 이용해서 화면의 크기나 배율을 조절해 줘야 미디어 쿼리가 정상적으로 작동할 수 있습니다.

 

[코딩] 미디어 쿼리 사용하기

<style>, </style> 태그 사이에 미디어 쿼리 CSS 코드를 입력합니다. 웹 브라우저의 크기별로 다른 색을 지정하는 것입니다.

 

<head>

...

<style>

@media all and (min-width:320px){

body{ background:#e65d5d; }

}

@media all and (min-width:768px){

body{ background:#2dcc70; }

}

@media all and (min-width:960px){

body{ background:#6fc0d1; }

}

 

 

떠오르고 있는 기술 - 플렉서블 박스

플렉서블 박스(Flexible Box)란 단어에서 알 수 있듯이 가변적인 박스를 만드는 기술인 동시에 웹사이트 구조 설계를 위한 새로운 기술입니다.

 

 

도전 Quiz!

[ ] 웹이란 PC, TV, 내비게이션, 스마트 기기 등 기기마다 또는 환경마다 최적화된 웹사이트를 제공하는 것을 말합니다.

[ ] 서버는 인터넷 속 저장 공간입니다. 우리는 이 저장 공간을 소유하고 있는 회사에 돈을 지불하고 일정 용량을 빌려 쓰는 것입니다.

호스팅 서버나 웹 서버에 파일을 자유자재로 옮기기 위해서는 파일질라 등의 [ ] 프로그램을 이용해야 합니다.

[ ] 는 웹사이트를 제작할 때 가변적으로 늘어나거나 줄어드는 구조를 제작하는 기술로, 가로 크기를 퍼센트로 제작해 비율이 바뀌는 개념입니다.

[ ] 란 컴퓨터에게 '너는 어떤 종류의 미디어니?' 또는 '미디어의 화면 크기는 어느 정도 되니?' 라고 질문하고 감지하여 웹사이트를 변경하는 기술입니다.

[ ] 는 화면의 보이는 영역을 제어하는 기술로, 미디어 쿼리로 수없이 많은 화면의 크기를 감지해야 할 때 꼭 필요합니다.

[ ] 란 단어는 가변적인 박스를 만드는 기술인 동시에 웹사이트의 구조 설계를 위한 새로운 기술입니다.

 

 

정답: 1. 반응형 2. 호스팅 3. FTP 4. 가변 그리드 5. 미디어 쿼리 6. 뷰포트 7. 플렉서블 박스