본문 바로가기

카테고리 없음

PC 에서 테블릿 모바일 화면 확인 방법 ( 반응형 웹 확인 )


■ 반응형 웹의 활용 


 블로그나 웹사이트를 운영하다 보면 해당 웹사이트를 모바일로 보았을때 어떻게 나오는지 궁금할 때가 많습니다. 요즈음에는 인터넷을 하는 기기들이 다양해 짐에 따라서 PC , 모바일, 테블릿등의 화면 크기에 따라서 배치를 다르게 해서 보여주는 모듈인 '반응형 웹'을 많이들 사용하고 있습니다.

 화면 크기에 따라서 이미지 크기, 폰트의 크기, 화면 레이아웃등의 변화를 주어 한 페이지의 내용을 각각의 기기에 최적화된 구조로 재구성해서 사용자에게 보여주는 원리 입니다.

 티스토리나 워드프레스를 운영하도 보면 이런 반응형 웹 skin 을 다운 받아 많이 사용할 수 있습니다. 훌륭한 능력자들이 분들이 반응형 스킨을 개발하여 무료로 올려놓으신 것들이 많고, 워드프레스 같은 경우는 유로로 판매하는 경우가 많습니다. 최근 티스토리에서는 '티스토리 반응형 웹 스킨 공모전' 을 열어서 좋은 스킨 개발자들을 격력하는 이벤트도 했었습니다. 



■ 금상 작품 : (참고 링크 : 티스토리 반응형 웹 스킨 공모전 결과


 


Dynamite-페럴랙스/반응형 by Estoque님 , 티리움 TIRIUM by Vanns Kang님

.

■ 인터넷 기기에 따른 광고 배치 확인 

 티스토리나 워드프레스 같은 블로그를 운영하거나, 뉴스 형태의 웹사이트를 운영하다 보면 수익면에서 도움을 얻고자 광고를 넣는 경우가 많습니다. 이때 기기에 따른 다른 형태의 광고가 노출되도록 설정하는 경우가 많습니다. ( 참고글 링크 : 티스토리 블로그 광고 배치 최적화 : 본문 광고, 광고 크기 변경 방법 소개! ) PC 에서 광고 스크립트를 설정하고나 애드센스의 반응형 광고(반응형 웹처럼 기기에 따라 다른 광고 크기 노출)을 설정하고 확인해야 하는 때가 많습니다. 내 광고가 기기에 따라 어떻게 다르게 보여지는지를 확인하기 위해서 아래와 같은 방법을 활용해 보십시요.

■ Mobile Browser emulator 소개 

 인터넷 브라우저를 크롬을 사용하신다면 크롬 웹스토어에서 확장프로그램 설치로 이 문제를 해결할 수 있습니다. 'Mobile Browser emulator' 를 설치해 보십시요. ( 설치 링크)  



 설치가 완료되면 크롬 오른쪽 상단 '확작프로그램' 목록에 붉은 색 '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) 




■ 맺으며
 웹사이트 관리자 입장에서는 인터넷을 할수 있는 기기가 다양해 짐에 따라서 콘텐츠를 작성하고 반영할때, 사용자들의 다양한 기기에서 어떻게 보여질지를 늘 고민해야 합니다. 이런 작업 확인용으로 이런 확장프로그램은 매우 유용할 것입니다. 광고 기획자들도 자신의 광고 내용과 배치를 선 확인하기 위해서 꼭 필요한 유틸리티입니다. 



반응형