모바일 스킨을 만들어보자. (2) - 상단 타이틀에 관하여.

레이니아입니다.
이번에는 지난번에 이어서 모바일 스킨에 대해서 이야기를 해보고자 합니다. 지난 포스트에서 예고했던 게 혹시 생각나시나요?

:+:지난 글 보기:+:

• 모바일 스킨을 만들어보자. (1) - 기본적인 구성부터 완성까지

 네, 이번에는 상단바 타이틀에 대해서 조금 더 생각해보겠다고 했었는데요. 상단의 ‘타이틀’ 부분을 이미지로 설정해두신 분들께는 도움이 되지 않을까 조심스럽게 생각해 봅니다.

 저희가 지금까지 모바일 스킨을 만드는 이유는 무엇이었을까요? 그렇습니다. ‘모바일 웹 환경’에 어울리는 스킨을 만드는 것이 목표였지요. 그렇다면, 스킨을 만들면서 반드시 생각해볼 문제가 모바일 웹에 접속하는 디바이스들의 문제입니다.

 대표적인 예로 아이폰의 iOS에서는 플래시를 지원하지 않습니다. 이와 비슷한 효과를 내려면 HTML5를 사용해야합니다. 그러나 지금 저희와는 관련이 없는 이야기이므로 넘어가도록 할께요. 실제적으로 웹 개발자 혹은 디자이너가 아니라면 숙지하기 힘든 부분입니다. (저 역시 언급은 하지만 자세하게 파고들면 모자라는게 많습니다.)

 티스토리에서 제공하는 모바일 스킨은 대체로 웹 환경에서 무리없는 기술들을 사용하여 어떤 디바이스에서 본다고 하더라도 크게 차이가 나지 않는데요. 이 중에서 디바이스에 따라 차이가 나는 것이 있었으니 바로 상단의 ‘타이틀’입니다.

 타이틀은 사용자가 직접 올려야하는 부분이며, 디바이스마다 다르게 보일 소지가 있으므로 주의해야할 필요성이 있는데요. 어떻게 달리 보이냐구요? 그것은 ‘해상도’의 차이입니다.

 일반적으로 개개인의 디바이스들은 액정의 크기, 그리고 그 액정이 지원하는 해상도가 대부분 제각각입니다. 그래서 같은 모바일 페이지를 스크린샷을 찍어놓고 보면 그 크기에서 차이가 많이 나는 것을 알 수가 있습니다.

 제 주변에 다른 스마트 폰이 보이질 않아서 iPhone 3Gs와 iPhone 4를 바탕으로 제 블로그를 시험해보았습니다. iPhone 3gs와 iPhone4는 기본적으로 액정의 크기는 같습니다만(3.5인치) 해상도는 4가 레티나 디스플레이를 채용, 2배의 차이를 보입니다.(iPhone 3gs - 480*320, iPhone 4 - 960*640)

(左iPhone 4, 右iPhone 3Gs. 클릭해서 보시면 확연한 차이가 나는 것을 확인하실 수 있습니다.)

 스크린샷에서 이미 2배가 차이가 나지요. 그리고 글씨 하나하나의 가독성측면만 놓고 봐도 큰 차이가 남을 알 수 있습니다. 지금 보이는 타이틀은 사이즈가 480*120(px)의 타이틀 이미지였습니다. 이는 티스토리 타이틀 부분에서 안내하는 내용만 믿고 480px의 이미지를 사용했었는데요. 보시다시피 R과 같은 부분은 괜찮으나 eini부분으로 지나갈 수록 굵기가 일정치 못한 현상을 보실 수 있습니다.

 즉, 이는 해상도에 맞게 그림을 올리지 않았다는 표시이지요. 그래서 이참에 해상도를 맞추기로 결심하고 작업을 시작했습니다.

  가장 먼저 한 작업은 각 디바이스의 해상도를 확인하는 것이었습니다. 가장 높은 해상도에 맞추어 작업을 해두면, 그 아래 해상도 역시 문제 없이 돌아갈 테니까요. (큰 그림을 축소해서 보는것보다, 작은 그림을 확대해서 보는게 깨지는게 많다는 사실을 잊지마세요!)

 그래서 각각 디바이스의 해상도를 조사해 보았습니다.

1. 800*480
HTC : HD2, EVD 4G, Desire, 넥서스원,
삼성 : Omnia2, 갤럭시S,  갤럭시A, 갤럭시U, 갤럭시K, 넥서스S
LG : 옵티머스 Q, 옵티머스 2x, 옵티머스 마하,
소니 : Xperia X1

2. 800*490
펜텍(스카이) : 시리우스

3. 854*480
모토로라 : 모토로이, 모토글램, 모토쿼티
소니 : Xperia X10

4.640*480
HTC : Touch Diamond

5.320*240
HTC : Touch Dual

6.1024*768
애플 : iPad

7.640*360
노키아 : 5800 Express Music

8.480*320
LG : 안드로원
애플 : iPhone 3Gs, iPod 3G(세대)

9.960*640
애플 : iPhone 4

10.1024*600
삼성 : 갤럭시 탭

 대충 생각나는 기종 정도만 찾아보았으니 빠진 부분이 매우 많습니다. 기기명으로 검색해보시면 잘 나오는 부분이지만, 혹시나 못찾으시는 분들은 기종명을 알려주시면 추가하도록 하겠습니다.

 그러면, 가장 큰 해상도를 가지고 있는것은 iPad가 되는군요. iPad의 해상도는 일반적인 모니터의 해상도와 엇비슷하네요. 그렇다면 이제 이미지 파일을 iPad의 해상도에 맞추면 될까요?

 iPad의 해상도에 맞춰도 물론 괜찮습니다. 그러나, 실제로 iPad를 통하여 티스토리에 접속을 해봤을 때, iPad는 풀브라우징이 적용되더군요. 즉, 컴퓨터의 화면과 동일하게 표시되는 것을 확인할 수 있었습니다. (이 부분에서, 수중에 iPad가 없어서 근처 애플 리셀러 매장에 들려서 확인한고로 스크린 샷이 없는 점은 죄송하게 생각합니다 ㅜ_ㅜ)

 iPad로도 풀브라우징보다 모바일 웹 화면이 더 편하시다는 분들도 있습니다만, 제 개인적으로 탭류의 디바이스 까지 해상도를 맞춰주기 힘들 뿐더러, 다른 이유 때문에, 탭류의 디바이스는 해상도 고려에서 제외했습니다.(다른 이유는 아래에서 다시 설명드리겠습니다.)

 결국 탭류를 제외하면 해상도는 iPhone 4에 맞춰주어야겠군요. 작업을 시작하기로 했습니다.

  그 전에, iPhone 4를 세워서 놓고 보면 가로가 좁고 세로가 길기 때문에 해상도를 640px에 맞춰서 이미지를 제작하시는 분이 계실지도 모르겠습니다. 그러나, 디바이스들은 가로모드가 지원이 됩니다.

(가로모드로 봤을 때의 모습입니다.)

 그러나, 신기하게도 좌측에 가있어야 할 블로그 네임이 가운데로 몰리는 현상을 볼 수 있었습니다. 이것은 무엇일까요? 조금 생각을 해 본 결과, 이것이 티스토리에서 안내한 480px 이상의 이미지와 관련이 있는 것이 아닐까 하는 생각이 들었습니다. 즉, 어떠한 이미지를 올리더라도 480px에 맞게 압축되어 올라간다는 것이지요. 가로모드를 올려도 480px의 비율만 보여진다는 이야기인 것 같습니다.

 저는 늘어나리란 예상을 하고 있었는데 빗나갔군요. 그러면 640px로 만들어도 괜찮습니다만.. 480px로 압축되는 비율을 계산하셔야 하는 문제가 발생합니다. 비례식을 통해 비율을 계산하셔도 괜찮지만, 저는 귀찮은 고로 그냥 딱 2배인 960px에 맞춰 작업을 시작했습니다.

이미지와 글씨의 원본을 포토샵으로 저장해 놓은 파일이 있어서 비교적 손쉽게 두배를 뻥튀기(!)해서 완성했습니다. 그리고 처음 업로드했다가 처절한 실패를 했지요. 왜냐구요?

세로도 같이 2배를 해줘야 한다는 사실을 잊고 있었습니다...OTL

(지못미..)

 즉, 지난 포스트에서 보신 부분 중 타이틀의 높이를 설정해 놓으셨다면, 이미지 파일은 높이의 2배가 되어야 이미지가 정상적으로 보인다는 것입니다. 제 경우에는 높이를 120px로 해놓고 있었기 때문에 실제 작업할 파일의 크게는 960*240px이 되어야 한다는 이야기죠.

 한번의 실수를 거치고 다시 작업을 했습니다.

  모든 작업이 끝나고 업로드를 완료했습니다. 그러면 한번 비교해 볼까요?

(Before & After)

  한눈에 봐도 이미지가 개선된 것을 느끼겠지요? iPhone 4로도 실험을 해보고 싶은데 지금 제 수중에 없네요. 빨리 파일을 구해서 같이 업로드 하도록 하겠습니다. (사진 업데이트 했습니다:D)

---

 여기까지해서 모바일웹 스킨과 관련된 포스트를 마무리 짓겠습니다. 앞으로 새로운 기능이 늘어나겠지만, 지금은 이정도만 정리해놔도 충분히 멋진 스킨을 만드실 수 있으리라 싶습니다. 지금까지 레이니아였습니다.:) 좋은 한 주 되세요!

:+:관련 글 보기:+:

• 모바일 스킨을 만들어보자. (1) - 기본적인 구성부터 완성까지.
  
• 모바일 스킨을 만들어보자. (2) - 상단 타이틀에 관하여.