반응형 웹이란?
모바일 사용량이 데스크탑 사용량과 대등한 시대에 꼭 필요한 웹 페이지로, 디스플레이 종류에 따라 (데스크탑 / 모바일 / 태블릿 PC등) 화면의 크기가 자동으로 최적화되어 조절되는 웹 페이지 형태입니다.
스마트 기기의 종류가 다양해지면서 각 기기마다 해상도가 다를 수 밖에 없는데요. 그렇기 때문에 사용자들이 다양한 모바일 기기로 접속하더라도 사용자에게 최대한 같은 화면을 보여줄 수 있는 반응형 웹 기술이 필요합니다.
간혹 PC에서는 잘 보이다가 모바일이나 태블릿으로 접속하였을 때, 화면이 깨지거나 보이지 않는 경우가 있습니다. 이런 경우 반응형 웹 기술이 적용된 웹사이트에 접속하면 알아서 적절한 사이즈와 크기로 맞춰주기 때문에 홈페이지 관리자들에게 편리함을 제공합니다.
그리고 하나의 소스로 관리되기 때문에 유지보수에 있어 시간과 비용을 줄이는 효과를 볼 수 있습니다. 또한 하나의 주소를 사용하기 때문에, 검색엔진에 최적화 할 수 있으며, 광고 등을 통합적으로 운영할 수 있습니다.
하지만 방대한 정보를 보여주어야 하는 쇼핑몰 홈페이지의 경우, 반응형 웹으로 제작하는데 주의를 기울여야 합니다. 우선 사용자들에게 데스크탑 모니터에서 보여지던 정보량을 모바일 화면에서 보여주기 위해 스크롤 범위가 늘어나는 단점이 생기게 됩니다. 또한 텍스트가 겹칠 수 있으며, 데스크탑보다 로딩이 느려지는 불편함을 줄 수 있으니 참고 하시길 바랍니다.
무료 반응형 웹템플릿 참고 사이트
1. Brushed | Responsive One Page Template
( 데모 – http://www.themes.alessioatzeni.com/html/brushed/index.html )
부트스트랩 프레임워크를 기반으로 제작된 반응형 템플릿입니다. 아이폰, 아이패드, 아이팟 터치와 맥북프로에 최적화 되어있습니다.
2. Runkeeper a mobile app Responsive web Template
Runkeeper는 제품을 홍보할 때 유용한 웹 디자인 템플릿으로 모든 종류의 모바일에 호환성이 높은 소스입니다.
3. Pinball Responsive Grid Style Blog Flat web template
그리드 스타일의 블로그형 디자인템플릿입니다. 이미지의 사이즈에 따라 게시물의 크기가 틀려지는 불규칙한 레이아웃 구조의 독특한 소스 입니다.
4. Modern Bootstrap HTML Template
기업용으로 적합한 부트스트랩 프레임워크를 기반으로 한 템플릿입니다. 박스 위젯, 슬라이더, 포트폴리오 요소 등이 포함되어 있습니다.
5. Yebo – Flat HTML CSS Corporate Template
원 페이지 반응형 템플릿입니다. 긴 포트폴리오 갤러리, 이미지 슬라이더 기능이 있습니다.
6. Bak One singlepage Flat Corporate Responsive website template
원 페이지 반응형 템플릿입니다. 긴 포트폴리오 갤러리, 이미지 슬라이더 기능이 있습니다.
간단하고 깔끔한 플랫디자인 템플릿으로, 포트폴리오나 정보전달에 초점을 둔 랜딩페이지에 적합합니다.
8. La Casa – Real Estate HTML template
깔끔한 디자인의 부동산홈페이지에 응용할 수 있는 템플릿입니다.
9. E-Shopper – Best Free Ecommerce HTML Template
온라인 쇼핑몰 등을 구성할 수 있는 디자인입니다. 슬라이더 기능을 포함하고 있습니다.
10. Pluton – Single Page Bootstrap Template
원 페이지 레이아웃의 반응형 웹으로 이루어져 있는 템플릿으로 디자인스튜디오, 사진작가, 디자이너 분들에게 적합한 테마입니다.
Assistant manager │ Innovation & Management
즐기려면 먼저 관심을 갖자.
댓글 0개