Xenosium 모바일용 스킨 완성!

2011/07/07 11:49

제노시움의 모바일용 스킨이 드디어 완성되었습니다!

아이폰 사고 나서부터 계속 해야지, 해야지 하고있다가 방학이 되어 드디어 작업에 착수, 약 3-4일간 고치고 고치고 고쳐서 이제 드디어 공식적으로 ‘완성’되었다고 발표할 수준까지 도달한것같습니다.

php/javascript의 지식이 거의 없다싶은 저로서는 모바일을 어떻게 구별해서 리다이렉트시키지..하는게 주 고민이었는데, 정말 다행히도 CSS3 Media Queries라는게 있어서 완전히 HTML과 CSS만으로 모바일용 스킨을 구현해 낼 수 있었습니다!

평소 자주 들어가는 Web Designer Wall의 포스팅을 많이 참조했고, 또한 중간중간 떠오르는 문제들과 의문점들에 대해 엄청나게 많은 곳의 자료들을 참조했습니다. 하도 많아서 일일히 밝히진 못하겠지만 StackOverflow! 고마워요^^

간단히 원리 설명

– 이쪽 분야에 관심이 없으신 분에게는 약간 재미없을만한 내용이 이어집니다(…) 보시려면 펼쳐주세요.

간략히 작동원리를 설명하자면 html의 헤더 부분의 스타일시트 링크 지정 부분에서 media=””속성을 이용하여 접속 브라우저/기기의 최대 폭을 기준으로 어떤 스타일시트를 보여줄 지를 결정하는 겁니다.

<!-- Stylesheets -->
<link rel="stylesheet" media="screen" type="text/css" href="./style.css"  /> <!--base -->
<link rel="stylesheet" title="mobile-ver" media="handheld, screen and (max-device-width: 800px)" type="text/css" href="./style_mobile.css"  />
<link rel="stylesheet" title="mobile-ver" media="only screen and (max-width: 480px)" type="text/css" href="./style_mobile.css"  />

<!-- iphone/android ldpi/hdpi -->
<link rel="stylesheet" title="mobile-ver" media="only screen and (-webkit-device-pixel-ratio: 0.75)" type="text/css" href="./style_mobile.css" />
<link rel="stylesheet" title="mobile-ver" media="only screen and (-webkit-min-device-pixel-ratio:1.5)" type="text/css" href="./style_hdpi.css"/>
<link rel="stylesheet" title="mobile-ver" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="./style_hdpi.css"/>

<meta name="HandheldFriendly" content="True" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />

우선 공통적인 style.css을 출력한 후 max-device-width가 800px인 기기에 한해 style_mobile.css를 로딩합니다. 그리고 또한 일반적인 컴퓨터에서도 브라우저 폭이 480px 이하이면 좁은 폭에 최적화된 모바일용 스타일시트를 로딩하도록 지정해줍니다.

밑부분은 기기의 해상도에 따른 처리 부분인데, (다행히도) 아이폰과 안드로이드 모두 webkit기반 브라우저를 사용함으로 -webkit-device-pixel-ratio라는 속성을 이용해 아이폰 4와 hdpi(고해상도)안드로이드 기기를 분별할 수 있습니다. 픽셀비율이 0.75인 기기는 그냥 기본인 style_mobile.css를 출력하고 (저해상도 안드로이드 기기는 거의 본 적이 없습니다만), 비율이 1.5-2가 되는 고해상도 디스플레이를 채용한 기기의 경우 (아이폰4, 갤럭시 등) style_hdpi.css를 로딩합니다.

style_hdpi.css에는 style.css와 style_mobile.css안에 이미지 속성 (background-image)을 가진 모든 class와 id를 override합니다. 실 해상도가 두 배 되는 이미지를 가져다가 출력한 후 CSS로 사이즈를 두 배 줄이는 거지요. 고해상도 디스플레이는 웹 페이지를 출력할때 픽셀을 실제 화면의 픽셀 수가 아니라 기존 화면 픽셀을 기준으로 하기 때문에 (가령, 아이폰4의 가로 해상도는 960px이지만 웹페이지상에서는 50%인 480px로 인식) 이런 것이 가능합니다.

이미지 네이밍은 iOS와 비슷하게 고해상도(해상도2배)용은 @2x라는 이름을 붙여줬습니다. 기존에 만들어놨던 그래픽이 대부분 다 벡터 기반이라서 이미지 사이즈만 200%하면 되어서 이미지를 업컨버팅하는건 그리 어렵지 않았습니다.

이렇게 이미지를 만들고 나면 style_hdpi.css에서 해당되는 부분을 찾아서…


.submitbtn { 
	background-image: url('images/submitbtn@2x.png'); 
	background-size: 80px 90px; 
}

이런식으로 image소스만 바꿔치기해주고 background-size를 기존의 이미지 사이즈로 지정해주면 끝!

아 그리고 한가지 중요한 것은 meta viewport속성을 지정해주는 것인데, width=device-width를 지정해주지 않으면 안드로이드에서 기기 폭을 제대로 리포트하지 않아 모바일용 페이지가 나오지 않는듯 합니다. 그 뒤의 scale관련 값들은 초기 줌 값, 최대 줌인할수 있는 비율 등을 의미하지요. 모두 1.0으로 해놓으면 모바일용 페이지에서는 사용자가 줌 할 수 없게 고정하는 기능을 합니다.

* * *

모바일 스킨은 아이폰4와 안드로이드 (갤럭시K)에서 테스트되었습니다. 가로, 세로 방향 모두 기기 화면 폭 100%로 컨텐츠가 확장되어 좁은 화면에서 컨텐츠 보기가 쉽도록 만들었습니다.

혹여 제대로 보이지 않는다거나 싶으시면 사용하는 기기명과 스크린샷 링크를 댓글로 남겨주시거나 @zvuc으로 멘션 보내주시면 확인해보겠습니다.

특히나 아이폰 3GS 사용자 분 확인 부탁드려요!