■ 반응형 웹의 활용
블로그나 웹사이트를 운영하다 보면 해당 웹사이트를 모바일로 보았을때 어떻게 나오는지 궁금할 때가 많습니다. 요즈음에는 인터넷을 하는 기기들이 다양해 짐에 따라서 PC , 모바일, 테블릿등의 화면 크기에 따라서 배치를 다르게 해서 보여주는 모듈인 '반응형 웹'을 많이들 사용하고 있습니다.
화면 크기에 따라서 이미지 크기, 폰트의 크기, 화면 레이아웃등의 변화를 주어 한 페이지의 내용을 각각의 기기에 최적화된 구조로 재구성해서 사용자에게 보여주는 원리 입니다.
티스토리나 워드프레스를 운영하도 보면 이런 반응형 웹 skin 을 다운 받아 많이 사용할 수 있습니다. 훌륭한 능력자들이 분들이 반응형 스킨을 개발하여 무료로 올려놓으신 것들이 많고, 워드프레스 같은 경우는 유로로 판매하는 경우가 많습니다. 최근 티스토리에서는 '티스토리 반응형 웹 스킨 공모전' 을 열어서 좋은 스킨 개발자들을 격력하는 이벤트도 했었습니다.
■ 금상 작품 : (참고 링크 : 티스토리 반응형 웹 스킨 공모전 결과)
Dynamite-페럴랙스/반응형 by Estoque님 , 티리움 TIRIUM by Vanns Kang님
.
설치가 완료되면 크롬 오른쪽 상단 '확작프로그램' 목록에 붉은 색 'm' 자가 보이실 것입니다. 해당 아이콘을 클릭하면 emulator 가 보여 질 수 있는 대상 리스크가 나옵니다. 일반 모바일 화면 크기인 Mobile (Portrait/Landscape), Tablet (Portrait/Landscape) , Feature Phone , Mobile + , Mobile ++ 등의 옵션이 있습니다. 여기서 Mobile + ,Mobile ++ 의 화면 크기는 삼성 갤럭시 노트 나 아이폰 6+,6s+ 같은 대화면 기기들의 화면들을 보여주기 위한 내용입니다.
모바일 화면을 보여주는 비슷한 기능을 가진 다른 '확장 프로그램' 보다 이 '확장 프로그램' 을 선택한 이유는 바로 'use mobile user agent' 옵션이 있다는 점입니다. 반응형 웹이나 자바스크립트들이 'use mobile user agent' 에 따라서 PC 인지 모바일인지를 인지하는 경우가 많기 때문입니다.
.
■ Mobile Browser emulator 적용 사례
실제로 블로그나 웹사이트를 선택 화면 옵션에 따라서 어떻게 다르게 보여주는지를 보도록 하겠습니다.
1. PC 화면 : ( http://chanyong.tistory.com/130 )
2. Mobile - Portrait (화면크기:320 X 480)
( Mobile 을 인식해서 상단 광고 2개가 광고 1개 노출로 변경되었습니다. )
3. Mobile - Landscape (화면크기:480 X 320)
4. Tablet - Portrait (화면크기:768 X 1024)
5. Tablet - Landscape (화면크기:1024 X 768)
6. Feature Phone (화면크기:240 X 320)
7. Mobile + (화면크기:360 X 640)