웹페이지 모바일 최적화시키기

시험도 끝나고 마침 할 일도 없었는데 하나의 미션이 내려왔다. 우리 연구실 홈페이지가 모바일 환경에서 잘려서 보이는데, 이를 해결하라는 것.

 

난 웹코딩을 해보적이 없다. 주변에 웹페이지를 만들었던 친구가 있어서 물어봤지만 전혀 도움이 되지는 않았다.

 

그래서 여기저기를 찾아보니, 'viewport'를 이용해서 보통 모바일 해상도에 최적화를 한다고 한다.

 

위 사진은 네이버 모바일 페이지의 소스코드를 따온건데, 보통 해상도 최적화를 위해서는 html head 파일에 위와 같이 viewport 설정을 width는 device의 width에 맞추고, scalable 불가능하게 맞춰준다고 한다.

 

나는 간단하게 이걸로 문제가 해결될줄 알았다.

 

그래서 우리 홈페이지의 소스코드를 보고 저 viewport 부분을 네이버와 똑같이 맞춰주었다.

 

그 결과, 변화는 없었다....;;;

자세히 보니, 이미지는 사이즈 조절이 들어가는데, text 부분들이 문제였다.

 

이를 위해 선배와 이야기를 해보고, 텍스트를 조절해주는 방법을 찾아봤는데, font size의 단위로 "vw"라는게 있었다. viewport width라는 뜻으로, 해상도 폭에 맞춰서 동적으로 크기를 조절해주는 단위였다.

일단 이 단위를 쓰니 동작은 잘 하는 것 같았다. 하지만, 모바일 환경에서는 여전히 글자가 잘려서 보이는 문제가 있었다.

 

결국 우리는 문제는 해결하지 못하고, 웹 개발 툴인 XE에서 모바일 환경을 구축하는걸 따로 지원을 해서 모바일 환경의 페이지를 따로 수작업으로 구축하고 있다....

 

폰트 사이즈 vw는 꽤 재밌는 것 같아서 정리해서 올려본다.