포럼
스마트폰끼리도 기기에 따라 페이지가 깨는 현상, 그리고 url/m 형식이 필요합니다.
2013.03.12 16:14
xe로 스마트폰 페이지를 만들었고, 그게 예전 아이폰 초기 3gs폰에서는 이상 없이 잘 보였었습니다.
그런데 갤럭시 노트2로 휴대폰을 바꿨는데, 이것로 그 페이지를 보니까 많이 깨져보이더군요.
그런데 옵티머스 뷰2를 쓰는 사람에게 어때 보이냐고 물었더니 괜찮아 보인다고 합니다.
결국 갤럭시 노트2나 스마트패드 등으로 전부 다 이상이 없는 페이지를 만들어야 한다는 결론이 나오는데
기기가 저마다 크기와 종횡비가 달라서 쉽지만은 않은 것 같습니다.
그런데 xe core에서 제공하는 모바일 페이지는
url/m 같은 주소 형식이 아니라 PC버전과 동일한 주소 형식이라는 점에서 어려움이 있습니다.
왜냐하면 url/m 주소형식은 PC로도 보면서 요소별로 css의 왜곡 원인을 찾아서 수정할 수가 있는데 반해,
동일한 주소 형식은 외부페이지인 경우에는 PC로 볼 수가 있긴 있지만 어떤 이유에선지 글자들은 전부 깨져보이고 크롬 등으로 요소분석을 해보면 css 파일의 속성들이 제대로 반영이 안되어 보입니다.
따라서 css의 왜곡 원인을 pc로도 찾을 수 있게끔 url/m 형식으로도 모바일 외부페이지를 만들 수 있게 해 주시면 더 좋을 것 같습니다.
아니면 외부페이지로 된 모바일 페이지를 PC로 열었을 때 깨지지 않고 크롬 등의 요소검사에서도 css가 온전히 반영되게끔 하거나 등의 조치가 필요한 것 같습니다.
댓글 4
-
ToFinder
2013.03.12 16:30
-
디쎔버
2013.03.12 18:44
오~~~ 이건 정말 대단한데요?
Tofinder님이 말씀하신 크롬 확장프로그램을 바로 설치해서 지금 PC로 스마트폰 화면을 보고 있습니다.감격입니다.
-
Canto
2013.03.12 16:48
m 주소를 사용했던 이유는 모바일 웹 서비스를 처음 제공 했을 당시 모바일 서비스 와 데스크탑용 서비스의 구분을 위해서 였죠.. 데스크탑으로는 제공이 가능한 서비스지만 모바일에서는 제공이 불가능한 서비스가 있었기 때문에..
요새는 멀티디바이스환경에서 동일하게 서비스를 이용가능하게 하는 것이 추세로 보여지는데.. 굳이 구분할 필요가 있을까 싶습니다. 또 XE기반 홈페이지의 경우에는 기본적으로 모바일을 이용하여 대부분의 서비스들을 이용이 가능한데 구분할 필요성이 있나 싶고요..
한국에선 아직 미디어쿼리를 이용한 반응형 웹이 크게 보급되지는 않고 있지만 해외 웹포럼들이나 CSS&HTML5 포럼들에서 나오는 화제들을 보고 있으면 미디어쿼리를 이용한 멀티해상도&멀티디바이스 환경에서의 웹페이지 표현방식에 대한 이야기들이나 px기반에서 벗어나 em기반과 %계산을 이용하는 뷰포트지정방식이 대세를 이룰려고 하고 있습니다.
라고 댓글 쓰고 다시 한번 본문을 읽어보았는데 디쎔버 님께서 필요하신건 미디어쿼리와 em 과 %를 이용한 CSS설계로 보여지는군요...
-
디쎔버
2013.03.12 18:47
Canto님의 글이 너무 난해하여 잘 이해할 수는 없으나 어쨌든 위의 크롬 확장 프로그램으로 바로 해결이 되어버렸습니다. ㅎㅎㅎ
https://chrome.google.com/webstore/detail/user-agent-switcher-for-c/djflhoibgkdhkhhcedjiklpkjnoahfmg?hl=en-US&gl=US
크롬으로 모바일 화면을 쉽게 확인가능하게 해주는 어플?.. 같은것입니다.
그리고 모바일 화면은 ppi 기준으로 잡는다는데 자세히는 몰라서 ㅎㅎㅎ
아참 그리고 부트스트랩이 호흥이 좋은것이 앞으로 진행되어지는 레이아웃이나 모든것이 한 레이아웃으로모바일 컴퓨터 어떠한 디바이스인지 다 표현이 가능하도록 하는것이 목적이며 그에 따른
기술들이 많이 나오고 있더군요.
결론은 읽어보니 미디어쿼리를 활용하여서 다양한 화면을 보여주는 기술을 넣는것이지요.
뭐 이야기와 엇갈린 부분도 있지만. 앞으로 구지 m.도메인 도메인/m 이 필요 없을 듯 합니다.
아마도 ^^