설문조사 NCS평가 회원가입 로그인

학생마당

HOME 학생마당

유용한정보보기

유용한정보 상세보기

유용한정보 상세보기
[대구국비지원] 반응형 웹이란?
작성자 행정실장 조회수 865
등록일 2018.02.09 추천수

0

■ 반응형 웹이란?

1. 반응형 웹이 세상에 나온 이유
- 2007년, 처음으로 모바일 기기가 세상에 선을 보이자 사람들은 열광
- 기본적인 검색뿐만 아니라 예약, 주문까지 언제, 어디서든 할 수 있음
- 하지만 모바일 기기의 인터넷 사용에는 문제가 있었음.
- 모바일에서 인터넷을 사용하면 모든 웹사이트들이 모바일 화면 크기로 축소되어 보인다는 점
- 이러한 문제로 모바일웹이 등장하게 됨.

2. 모바일 웹과 반응형 웹
- 모바일 기기에 최적화된 웹사이트를 제공하기 위해 모바일 웹이 등장하면서 사람들은 쾌적한 웹 사용 환경을 접할 수 있었음
- 모바일 기기뿐만 아니라 태블릿 기기, 패블릿(스마트 폰과 태블릿의 합성어) 기기 등 모바일 기기보다 화면이 큰 기기가 등장함에 따라 모바일 기기처럼 작은 화면에서만 최적화된 웹사이트를 제공하는 모바일 웹이 화면이 큰 기기에서는 작게 보이게 되는 문제점
- PC 버전의 웹사이트와 모바일 버전의 웹사이트, 이 두 가지 웹사이트를 만들게 되면 비용과 시간, 인력을 두배로 투자해야하는 문제
- 이런 문제를 감지한 전 세계의 개발자들은 다양한 방법을 모색하기 시작했고 2010년 5월 반응형 웹이라는 기술이 등장함.

3. 반응형 웹이란?
- 반응형 웹이란 PC, TV, 내비게이션, 스마트 기기 등 기기마다 또는 환경마다 최적화된 웹사이트를 제공해주 것을 말함.
- 화면이 작은 기기에서 반응형 웹으로 제작된 웹사이트를 접속했을 때는 웹사이트의 구조를 작은 화면에 최적화된 구조로 변경하여 보여주고, 큰 화면을 가진 기기에서는 웹사이트의 구조를 큰 화면에 최적화된 구조로 변경하여 보여줌.
- 기기의 화면이나 환경에 맞게 자유자재로 변하는 것이 반응형 임.
- 반응형 웹 소식을 가장 빨리 받아볼 수 있고, 잘 만들어진 반응형 웹사이트를 만날 수 있는 대표적인 사이트로 미디어쿼리(http://mediaqueri.es)가 있음. 이 사이트 역시 반응형 웹으로 만들어짐.

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

- 반응형 웹이 등장하면서 웹사이트를 사용하는 사람들에게 모든 기기에서 최적화된 웹사이트를 제공할 수 있게 되었고, PC 버전의 웹사이트와 모바일 버전의 웹사이트 두 가지 모두를 만들지 않아도됨.
- 반응형 웹은 유지보수가 간편함. 모바일 버전과 데스크톱 버전 같은 두 개의 웹사이트를 만들게 되면 웹사이트에 새로운 내용을 추가하거나 수정할 때 모바일 버전과 데스트톱 버전을 개별적으로 수정해야 함므로 손이 많이 가고 복잡함.
- 반응형 웹은 모바일 버전, 태블릿 버전, 데스크톱 버전 등 모든 디자인을 하나의 HTML 파일과 CSS에서 작업하기 때문에 유지보수가 쉬움
- 세계적으로 인터넷 보급률은 90%, 스마트 기기 보급률은 70%를 넘음.
- 대한민국은 스마트 기기 인터넷 보급률 및 사용률이 90%가 넘는 인터넷 강국임.
- 스마트 기기 사용자가 지하철에서 뉴스를 보기 위해 언론사 사이트를 본다고 가정할 때, 언론사의 홈페이지가 PC 웹사이트로 만들어져 글씨의 크기들이 작게 보인다면 웹사이트를 닫아버리게 됨.
- 웹사이트를 만들 때는 PC용 웹 이외에 모바일용 웹을 별도로 만들거나, 반응형 웹으로 만들어야 함.
- 마케팅이란 market(시장)의 매매를 활발하게 만드는 모든 과정을 말함.
- 제품의 컨셉, 가격 정책이나 유통 정책, 홈보 등을 통해 많이 팔리게 만드는 활동임.
- 보통 사람들이 마케팅이라고 부를 때는 회사의 제품이나 서비스를 많은 사람들에게 알리기 위한 활동을 말함.
- 마케팅 활동의 최적의 장소로 웹이 꼽히고 있습니다. 웹은 언제, 어디서든 스마트 기기로 쉽게 접근할 수 있기 때문에 다양한 마케팅 활동르 펼칠 수 있는 곳임.
- 마케팅이 진행되는 웹사이트를 데스크톱 버전으로만 만들면 작은 화면의 스마트 기기에서는 화면이 작게 보이게 되어 전달하고자 하는 내용이 제대로 전달되지 않음.
- 반응형 웹이라는 기술을 이용하여 웹사이트를 개발하면 환경이나 기기에 따라 최적화된 구조로 웹사이트를 변경하여 보여줄 수 있기 때문에 전달하고자 하는 내용을 확실


하게 전달할 수 있음.
- 모바일 버전과 데스크톱 버전 등 여러 가지 웹사이트를 만들지 않아도 되기 때문에 기업 비용 측면에서도 상당한 효과를 볼 수 있음.
- 어디서든 접근이 용이해야 하는 웹 마케팅에서 가장 효과적인 방법인 반응형 웹이라는 기술을 이용하여 웹사이트를 개발하는 것임.
- 자신의 웹사이트를 사람들에게 최대한 많이 알리고 싶다면 검색엔진 최적화 작업을 하는 것임.
- 검색 엔진 최적화란 SEO(Search Engine Optimize)라고도 하며, 포털 사이트 또는 검색 사이트에서 사용자가 특정 키워드로 검색을 했을 때 나오는 웹사이트 검색 결과에서 상위권에 나타나도록 관리하는 작업을 말함.
- 반응형 웹과 검색 엔진 최적화 작업의 관계로 모바일 버전과 데스크톱 버전 같은 두 가지 웹사이트가 있다면 주소도 m.xxx.com(모바일 웹사이트 주소)과 xxx.com(데스크톱 웹사이트 주소)로 나눠지게 됨.
- 주소가 두 가지로 나눠지면 동일한 내용의 웹사이트라도 검색 엔진이 판단할 때는 둘 중에 어떠한 주소의 정보가 정확한 정보인지 확인하기 힘들어 검색 결과에서 제외시킴.
- 검색 결과를 상위권에 배치하는 것이 상대적으로 불리해짐.
- 홍보나 마케팅을 목적으로 만들어진 웹사이트라면 검색 결과에 노출되지 않으면 치명적인 결과를 초래할 수 도 있음. 주소도 두 가지라 광고 비용 또한 두배로 늘어남.
- 이러한 문제들을 해결하기 위해 반응형 웹을 이용하여 웹사이트를 만드는 것입니다. 반응형 웹사이트는 하나의 주소와 하나의 파일(HTML)로만 이루어져 있어 검색 결과에 좀 더 잘 노출될 수 있고 광고 효과도 톡톡히 볼 수 있음.
- 검색 사이트의 검색 엔진 최적화 방법을 소개하는 문서들을 살펴보면 반응형 웹사이트 홈페이지를 만드는 것을 권장하고 있고 검색 엔진 최적화 방법 중 하나임.
- 휘어지는 화면을 탑재한 스마트 기기나 TV, 냉장고, 차량용 내비게이션, 프린터, 화장실 등에 탑재된 웹 브라우저 그리고 환경에 따라 축소 또는 확대되는 건축물과 공상과학 영화에서나 볼 수 있엇던 공중에 떠 있는 화면 등 과거에는 상상만 했던 일들이 이제는 모두 현실화되어 정말로 미래 세계에 한층 가까워짐.
- 미래에서 반응형 웹으로 웹사이트를 개발하게 되면, 환경에 따라 자유롭게 축소 또는 확대되는 건축물이 있고, 그 안에 휘어지는 화면을 탑재한 기기들이 있을 수 있음.

■ 사례로 알아보는 반응형 웹
- 반응형 웹은 전 세계적으로 주목을 받고 있는 주요 웹 기술 중 하나임.
- 세계 각지에서 반응형 웹으로 개편한 웹사이트들이 앞 다투어 선보이고 있고, 워드프레스 같은 CMS 도구를 이용해 제작한 웹사이트를 판매하는 사이트에서도 대부분의 상품들이 반응형 웹으로 제작된 것을 쉽게 볼 수 있음.
- 해외의 경우에는 이미 공공기관, 블로그, 개인 또는 기업 홈페이지 등 다양한 웹 사이트를 반응형 웹으로 개발하여 사용자들에게 제공하고 있음.

페이스북으로 글 보내기 트위터로 글 보내기

유용한정보 목록

유용한정보 목록
번호 제목 작성자 추천 조회 등록일
107 2018년 정보처리 기능사 필기/실기 상시시험 일정 핫 행정실장 0 1,465 2018.03.20
106 「2018 대구 구인·구직 만남의 날」행사 개최(일시: 2018.3.22(목) 오후2시) 핫 행정실장 0 1,075 2018.03.20
105 [대구국비지원] 반응형 웹이란? 행정실장 0 865 2018.02.09
104 아이디어 발상과 분석(조사방법론) 핫 행정실장 0 1,910 2018.02.06
103 사람인 상세 검색 방법 핫 박대홍 0 2,141 2018.01.29
102 반응형 웹 제작을 위한 핵심 기술! 행정실장 0 856 2018.01.26
101 저작권 등록절차 핫 행정실장 0 1,183 2018.01.19
100 2018년 기능사(컴퓨터그래픽스운용기능사) 및 GTQ시험 일정입니다. 핫 정보현 0 1,019 2018.01.18
99 중앙직업전문학교 3D프린트 작업 알아보기 핫 행정실장 0 2,488 2018.01.17
98 포트폴리오 만들기 핫 행정실장 0 1,070 2018.01.16
97 색채의 감정효과 핫 정보현 0 1,267 2017.12.21
96 3D 프린터로 하루만에 집 만들기 핫 행정실장 0 1,264 2017.10.30
95 절대경로와 상대경로 핫 정보현 0 1,780 2017.09.21
94 취업성공 패키지 수당 증대 핫 이준규 0 1,335 2017.07.27
93 대구국비지원무료교육 C언어, 포기하지 마세요 핫 행정실장 0 2,019 2017.07.18
비밀번호를 입력하세요.
비밀번호
비밀번호를 입력하세요.
비밀번호
게시판을 선택하세요.
게시판선택
신고사유를 선택하세요.
  • 입학신청
  • 전체과정일정표
  • 교육상담
  • 우수기관