1.모바일 브라우져를 PC상에서 다운받아 테스트를 할수 있는지 궁금합니다.
예를 들어 아이폰은 사파리를 사용하는데. PC에서 확인할 수 있는 모바일 사파리가 있나요?
아니면 작업확인은 일단은 웹에 있는 브라우져 사파리,익스플로러 6.0,7.0,8.0,파이어폭스 등으로 하고 그곳에서 잘 맞추고 나서 모바일로 들어아것 확인하는 이런방법인가요?
2.현재 아이폰과 다른 스마트폰등 다른 모바일 브라우져를 사용하는데 코딩 작업중에는
특정한 폰에 기준을 두고 작업을 하는건가요?
예를 들어 웹에서는 파이어폭스를 맞추고 다른 익스플로러나 구글,사파리등도 모두 활용할 수 있도록 css에 추가로 핵등을 넣어서 맞추는것처럼 모바일도 예를 들어 아이폰에 맞추고 다른 브라우져도 맞추는 식으로 하는건가요?
3.모바일 브라우져는 가로모드와 세로모드가 있는데 이에 따라 css속성을 써줘야 한다고 하는데 그게 무슨 말인지 잘 이해가 안되네요.
css속성을 써줌으로써 모바일을 세로나 가로로 바꿔도 자동으로 돌아가서 바뀌게 되나요?
4.네이버에 들어가 있는 소스를 보면
<meta name="viewport" content="initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no;" />
이런 meta는 모바일 작업중에는 꼭 들어가야 하는 요소인가요?
5.모바일 코딩 작업은 width나 height값을 100%로 잡고 시작하는건가요?
예를 들어 현재 웹사이트들은 해상도 1024에 맞춰서 작업을 하는편인데. 모바일은
100%로 잡고 하는것인지 아니면 일정한 width값이 있는지 궁금합니다.
6.마지막으로 현재 http://m.naver.com/ 가 있는데 전체적인것은 이곳을 따라서 해보는것도 괜찮을까요?
참, 스마트 폰이 없을경우는 확인하는게 불가능 한가요? 정녕 그렇다면 사야할텐데......
*****************************************************************************************************************
구름이
브라우져에서보는거랑 폰에서 보는건 확연한 차이가 있어여 꼭 아이폰/옴니아 등 테스트 해야됩니다
고고띵
결국 폰이 있어야 하군요...음...
그럼 실질적으로 코딩을 하기위해 퍼블리셔는 두가지의 핸드폰이 다 있어야 하는건가요?
꼬사
저희도 모바일 안드로이드 기반 모바일웹, 어플 개발중인데요.
폰......... 반드시 있어야합니다. 웹에서 확인하는거랑 모바일상에서 확인하는거랑 변수가 많아요
바리킴
모바일 시작 하시면 별건 아닌데 스트레스를 받게 될거에요.. ㅎㅎㅎ
일단 질문 중 4번의 메타는 각 폰에따라 수치가 조금씩 변동 됩니다..
기준점을 잡아두시는 것도 좋겠고..
참고로 메타를 설정하시면 아이폰의 기능인 핀치줌(손가락 두개 줌)은 되지 않습니다..
하지만 여러 포탈사이트는 이 기능을 사용하지 않으므로 크게 문제는 되지 않을 것 같네요..
고고띵
아. 그게 핀치줌이군요.... 좋은 말씀 감사합니다. 쉽지 않네요..
구름이
회사에다가 지원해달라고하세요 개인적으로 구할수는 없으니깐요 ㅋㅋ 여기에서는 아이폰/옴니아로 했는데 옴니아도 사파리로 보는거랑 익스버젼으로 보는건 달라요 네이버등 포탈에서는 익스버젼으로는 안맞추더라고요
옴니아에서는
<meta name="viewport" content="initial-scale=0.75; maximum-scale=0.75; minimum-scale=0.75; user-scalable=no;" />
로 적용합니다
나를찾는아이
http://trend21c.tistory.com/824
꼬사
1. 저희는 모바일 사파리 브라우저는 모르겠고... 우린 사파리와 익스 7,8버전에서 확인을 합니다. 우선 모바일웹은 웹표준으로 제대로 코딩하는게 최우선이니까요.
그런데 익스6버전까지는 확인할 필요가 없지 않을까요? 웹에서 제공하는 사이트도 아니고.. 사파리와 익스 7,8버전은 웹표준 쪽 확장성으로 좋은 브라우져들이니.....
3. 브라우저가 알아서 가로,세로 돌려주더군요. 코딩할 때..시각적으로 보이는 화면이 옆으로 늘어날 수도 있다란 점을 염두에 두고 디자인,코딩하세요. 단순하게 생각하심 됩니다.
4. viewport 안써주면 화면에서 이미지, 글씨들이 쬐~끄많게 보이더군요. 브라우저 크기에 따라 화면이 축소되요. 꼭 써줘야합니다.
5. div를 이용한 웹표준이라면 전체 레이아웃에서 가로세로 100% 따로 지정해줄 필요는 없더라구요. 알아서 늘어납니다. 디자인적인 요소면에서 필요한 부분 아니면....... 화면크기는 포샵에서 작업할 때 가로 최소 320px 염두에 두고 작업합니다. 그리고 min-widht 속성에 대해서도 알아두세요
6. 저도 네이버 모바일 참고 많이합니다.
꼬사
위의 글들이 제가 요즘 모바일웹 관련 플젝 진행하면서 알아간 것들인데.. 일부는 틀릴수도있을 것 같아요. 그래도 위의 기준으로 폰에서 테스트하면서 작업한 결과들인데... 여튼 좋은 참고가 되었음 합니다.
고고띵
아 꼬사님 그러면 현재 작업하실때는 컴에서 사파리와 익스 7,8에서 확인하시고 최종적으로 모바일에서 확인하시나요? 가로 최소 320px를 염두에 두라는 말씀이 무슨 뜻인지 정확히 이해가 안되네요...min-width는 찾아볼께요~
좋은 말씀감사합니다.
꼬사
네.. 때로 코딩하다보면 한줄한줄 코딩하고 바로 확인하고..^^;; 그러려면 브라우저가 편하죠. html 코딩이 끝나면 서버에 올려서 모바일폰에서 최종확인을 합니다.
그리고 폰, 기종마다 해상도가 다 달라요. 모토로이 같은 경우는 가로 480픽셀이지만 스마트폰의 스펙이 다른 핸펀도 염두에 뒀을 때 가로 해상도 사이즈 320px이 최소화면크기거든요.
그래서 디자인 사이즈 구상할 때 최소 320px사이즈에서 디자인을 해서 코딩을 입힙니다.
이군
오페라의 자체기능인 작은화면 보기 Alt+V+M 모드로도 테스트 가능합니다. 하지만 완벽한 테스트를 위해서라면 모바일 기기도 가지고 있으셔야 합니다! 추가로 삼성이 자체적으로 개발한 돌핀브라우저에 대한 사전정보를 입수하시라고 권해드리고 싶네요.
포털사이트의 롤모델삼아 따라하시는건 개인의 자유입니다. 모바일은 작은화면으로 사용자가 원하는 정보를 손쉽게 찾을 수 있도록 해야하기 때문에 UI/UX 에 대한 기본지식과 적극적으로 공부하는 자세를 가지시면 좋을 듯 합니다.
느낌
1. MobiOne이라는 iPhone emulator가 있습니다 http://www.genuitec.com/mobile/
가로모드, 세로모드를 지원하고 있습니다.
그래도 실제 폰에서 확인하는것이 가장 정확한 것 같습니다.
>>출처: 하코사 (http://cafe.naver.com/hacosa/14950)
