'모바일'에 해당되는 글 20건

  1. 2011.06.08 max-width: 100%; 에 대한 고찰
  2. 2011.06.08 디바이스별 미디어쿼리 정리
  3. 2011.06.08 모바일 웹, 아이폰 사파리에서 화면회전시 폰트 확대방지
  4. 2011.06.07 자바스크립트를 활용한 모바일 웹 구현
  5. 2011.05.27 모바일 코딩
  6. 2011.04.19 “태블릿과 스마트폰 시대”에 절대 피해야 할 웹 UI 7가지
  7. 2010.12.16 모바일 코딩시 참고사항
  8. 2010.12.16 아이폰용 모바일 웹페이지 디자인 팁 2
  9. 2010.12.16 아이폰 웹 코딩시 유의점
  10. 2010.04.28 모바일 작업시 참고 1

max-width: 100%; 에 대한 고찰

모바일 2011. 6. 8. 16:27

http://www.alistapart.com/d/responsive-web-design/ex/ex-site-flexible.html#

역시....스마트폰을 사야할까...테스트폰으로는 한계가 있는거 같다.
가로모드 이용시 이미지 사이즈에 대한걸 사용해 봤다면 금방 눈치챘을거 같은데...

모바일 작업시에 이미지의 품질문제를 놓고 고민하다가 나온 사이즈에 대한 고민.

웹작업을 할때처럼 가로로 늘어났을경우 남는공간은 그냥 남기면 되지란 안일한 생각;
절대 아니거든.ㅡㅡ;ㅋ

갤탭이나 아이패드같은경우 화면이 많이 커지는데...320사이즈에 맞춰버리면 남는 공간이 무척 어색해져버린다.

사야겠구나...스마트폰..............ㅠㅠ.



:

디바이스별 미디어쿼리 정리

모바일 2011. 6. 8. 15:44
출처: http://firejune.com/1633


데스크탑
브라우저, iPhone, iPad 모바일 브라우저 등에 스타일시트를 구분하기 위한 미디어 쿼리(Media Queries)를 Andy Clarke씨가 정리했습니다. 속성으로 구분하는 방법과 파일로 구분하는 두가지 방법을 모두 포함합니다.

속성으로 구분하기


스마트폰 (가로/세로):
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}

스마트폰 (가로):
@media only screen and (min-width : 321px) {
/* Styles */
}

스마트폰 (세로):
@media only screen and (max-width : 320px) {
/* Styles */
}

iPad (가로/세로):
@media only screen and
(min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}

iPad (가로):
@media only screen and
(min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}

iPad (세로):
@media only screen and
(min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}

데스크탑 브라우저 (가로):
@media only screen and (min-width : 1224px) {
/* Styles */
}

큰 모니터:
@media only screen and (min-width : 1824px) {
/* Styles */
}

iPhone4와 같은 높은 해상도:
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}


파일로 구분하기


스마트폰 (가로/세로):
<link rel="stylesheet" href="smartphone.css"
  media="only screen and (min-device-width : 320px) and (max-device-width : 480px)">

스마트폰 (가로):
<link rel="stylesheet" href="smartphone-landscape.css"
  media="only screen and (min-width : 321px)">

스마트폰 (세로):
<link rel="stylesheet" href="smartphone-portrait.css" 
  media="only screen and (max-width : 320px)">

iPad (가로/세로):
<link rel="stylesheet" href="ipad.css"
  media="only screen and (min-device-width : 768px) and (max-device-width : 1024px)">

iPad (가로):
<link rel="stylesheet" href="ipad-landscape.css"
  media="only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)">

iPad (세로):
<link rel="stylesheet" href="ipad-portrait.css"
  media="only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)">

데스크탑 브라우저 (가로):
<link rel="stylesheet" href="widescreen.css"
  media="only screen and (min-width : 1224px)">

큰 모니터:
<link rel="stylesheet" href="widescreen.css"
  media="only screen and (min-width : 1824px)">

iPhone4와 같은 높은 해상도:
<link rel="stylesheet" href="iphone4.css"
  media="only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5)">
 
:

모바일 웹, 아이폰 사파리에서 화면회전시 폰트 확대방지

모바일 2011. 6. 8. 14:16
요즘 아이폰의 보급으로 많은 사람들이 iPhone을 사용하고 있습니다. 그래서 iPhone의 Safari에 최적화된 웹페이지를 많이 제작하고 있는데요. 아이폰 사파리는 모바일 브라우저로 여러가지를 고려하여 개발해야 하는데요. 앞에서 포스팅한 전화번호 링크와 화면 확대되는 부분이외에 화면 확대는 막았어도 텍스트가 자동으로 확대가 되는 것을 볼 수 있습니다. 세로로 딱 맞게 작업했을 경우 가로로 보게 되면 폰트가 확대되어 있는 것을 볼 수 있는데요. 이렇게 되면 어느 환경에서나 잘 보이게 개발하기 힘들겠죠? 그래서 폰트가 확대되는 것을 막아야 합니다.

그림에서 볼 수 있듯이 세로로 잘 맞게 작업한 경우 가로로 봤을 때 두번째의 그림같이 확대가 되게 됩니다. 그래서 원래 생각했던 디자인과 다르게 나오게 될 수 있는데요.



이러한 경우에는 스타일 시트를 약간 수정하는 것으로 문제를 해결할 수 있습니다.

<style type="text/css">
* {-webkit-text-size-adjust:none;}
</style>

이렇게 해주면 아래의 그림과 같이 가로로 보았을 때도 세로로 보았을 때와 동일한 폰트 크기로 볼 수가 있습니다. 아이폰이 아직도 세력을 넓혀가고 있는 가운데, 모바일 개발에 없어서는 안되는 중요한 정보 같습니다. 저도 잘 기억하고 있어야겠네요.





원본: http://htglss.tistory.com/73
:

자바스크립트를 활용한 모바일 웹 구현

모바일 2011. 6. 7. 09:38

원문: http://www.imaso.co.kr/?doc=bbs/gnuboard.php&bo_table=article&wr_id=37462

안광운 www.kuahn.com, z@kuahn.com, twitter(@ZKUAHN) |현재 멜론에서 개발 업무를 하고 있는 프리랜서이다. HTML, CSS, 자바스크립트 등 프론트-엔드에 관심이 많은 자바 개발자이며 OKJsp Mobile Web, OKJsp iPhone App 개발에 참여하는 등 새로운 것을 즐긴다.

유준모 www.yooor.com, yanagij@gmail.com|한글과컴퓨터에서 HTML/CSS/자바스크립트 UI 개발과 GUI 업무를 맡고 있다. 코드로 표현하는 디자인에 흥미가 있으며, 현재 모바일 웹앱 개발에 관심을 쏟고 있다.



먼저 기존에 알고 있던 웹 기술인 HMTL, CSS, 자바스크립트를 이용해 모바일 웹페이지를 작성하는 방법을 설명하고자 한다. 각종 머리 아픈 프로그래밍에 익숙한 개발자들은 이 글에서 다룰 CSS3 등의 디자인 관련 이슈들이 조금은 생소할 수도 있으나, 어쩌면 쉽고 재미있는 ‘쉬어가는 페이지(?)’ 역할을 할 수도 있을 것으로 생각된다.


모바일 웹페이지 제작 시작하기
참고로 이 글의 예제 코드들은 지면 관계상 일부 핵심적인 부분만 실었고 전체 소스 코드는 http://yooor.com/open/ms_may에서 확인할 수 있음을 밝힌다(스마트폰으로 접속 후 직접 테스트해 볼 수 있다).

뷰포트(viewport)모바일 전용 웹페이지는 일반 웹페이지와 달리 폰트 크기 등이 스마트폰 화면에 최적화된 화면으로 보이는데, 이는 뷰포트(viewport)의 설정을 통해 구현할 수 있다. 일반적으로 모바일 전용 웹페이지의 소스를 살펴보면, HTML의 head 부분에 <리스트 1>과 같은 코드가 삽입되어 있다.

<리스트 1> head에 삽입하는 viewport 메타태그

viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;">



  • in itial-scale : 기본적인 확대 배율을 결정한다. 0.5로 설정하면 원래 사이즈의 0.5배 크기로 보인다.
  • maximum-scale : 최대 확대 배율을 결정한다.
  • minimum-scale : 최소 확대 배율을 결정한다.
  • user-scalable : 화면의 확대/축소 가능 여부를 결정한다. 0이 불가능, 1이 가능이다. 다만 initial-scale 값과 maximum-scale 값이 같다면, 최대 확대 배율이 100%이므로 1로 설정해도 확대가 동작하지 않는다. 예를 들어 initial-scale=1.0, maximum-scale=2.0으로 설정했다면 최대 2배까지 확대할 수 있다.

위의 뷰포트 메타태그를 삽입하고 모바일 브라우저로 확인해 보면 보기 좋게 모바일 전용 화면으로 표시되는 것을 확인할 수 있다.



모바일 웹페이지 레이아웃에 관한 팁
● 팁 하나, 유연한 레이아웃

모바일 웹페이지의 레이아웃은 세로 모드(Portrait Mode)와 가로 모드(Landscape Mode)에 모두 대응해야 하며, 스마트폰뿐만 아니라 해상도가 넓은 태블릿 기기에서도 이상 없이 보이도록 하는 데 초점을 맞출 필요가 있다. 여러 해상도에 유연하게 대응하기 위해서는 고정 픽셀 값 대신 % 값을 사용하는 것이 좋다. <화면 1>과 <리스트 2>의 예제는 크기 값을 %로 주어 작게 보이던 이미지를 터치(클릭)하면 자바스크립트로 .enlargement 클래스를 활성화시켜 디바이스의 폭에 맞게 이미지가 커지도록 만든 것이다. CSS3의 Transition을 이용해 애니메이션 효과를 주었다. CSS3 Transition은 이 글의 후반부에서 더 자세히 볼 수 있다.



<화면 1> 화면 사이즈에 맞게 이미지 확대하기

<리스트 2> 화면 사이즈에 맞게 이미지 확대

..........................................................
<style>
img { float: left; width: 30%; -webkit-transition-property: width; -webkit-transition-duration: .3s; }
img.enlargement { width: 100%; }
</style>
..........................................................
<p><img src="images/gook.jpg">
 "모바일 웹페이지의 레이아웃은 세로보기(Portrait Mode)와 가로보기(Landscape Mode)에 모두 대응 … 에서도 이상 없이 보이도록 하는 데 … 디바이스의 폭에 맞게 커지도록 만든 것이다."</p>
..........................................................



● 팁 둘, 통째로 움직이는 문서 고정시키기 

iOS의 모바일 사파리를 비롯한 일부 모바일 브라우저들은 손가락으로 화면을 상하로 잡아당기면 문서가 통째로 움직이게 된다. 브라우저의 이러한 동작은 쓸어 넘기거나 무언가를 집어 이동시키는 동작이 필요한 페이지에서 조작을 어렵게 만든다.

이 현상은 디바이스 화면에 손가락을 댄 채로 이동하면 발생하는 “touchmove” 이벤트의 기본 동작을 막아주는 방법으로 없앨 수 있다.

<리스트 3> 문서 고정시키기

document.addEventListener("touchmove", function(e){ e.preventDefault(); });



<화면 2> 이렇게 되는 현실을 방지하는 방법에 대한 내용



● 팁 셋, 가로모드에서 텍스트 확대 방지하기

뷰포트의 설정이나 여러 상황에 따라 가로모드에서 텍스트가 확대되는 경우가 있다. 이와 같은 동작을 없애고 가로, 세로 모두 동일한 크기로 텍스트를 표시하고 싶다면 <리스트 4>의 CSS 코드를 추가하면 된다.

<리스트 4> 가로모드에서 텍스트 확대 방지하기

* { -webkit-text-size-adjust: none; }



아이폰4 모바일 사파리에서 고해상도 이미지 표현하기

아이폰4의 레티나 디스플레이는 육안으로 분간할 수 없는 작은 크기의 픽셀로 엄청난 고해상도 이미지와 텍스트 표현을 자랑한다. 하지만 일반적인 경우, 모바일 웹사이트에 삽입되어 있는 이미지는 아이폰4에서도 아이폰 3GS와 마찬가지로 흐릿하게 보인다. 이 문제는 해상도의 차이에 맞춰 이미지를 4배 크기로 만드는 방법으로 해결할 수 있다. 예를 들어 표시되어야 할 이미지의 크기가 200×100 사이즈라면, 400×200 사이즈로 제작한 후 width: 200px, height: 100px을 넣어주어 원래 의도했던 크기로 표시한다. 사진보다는 로고 등의 일러스트나 이미지텍스트에서 더 확연한 차이를 느낄 수 있을 것이다.

참고로, 이 방법을 통해 아이폰4의 고해상도 화면에 맞는 고해상도 이미지를 웹페이지에서 표현하는 것이 가능하지만, 이미지의 원본 사이즈 자체가 커지다 보니 용량의 제한을 받는 웹 이미지의 특성상 다소 부담스러울 수 있다. 따라서 모든 이미지를 이런 방식으로 제작하는 것보다는 대표적인 로고나 중요한 일부 이미지만 이런 방식으로 제작하는 것도 바람직하다.

<리스트 5> 고해상도 이미지 표현하기

<!-- 이미지 gook.png의 원래 크기는 width 400px, height 200px이다. -->
<img src="images/gook.png" style="width: 200px; height: 100px;">



CSS3와 자바스크립트로 만들어 보는 iOS 토글버튼

일반 데스크톱 컴퓨터용 브라우저에서는 지원하지 않는 경우가 너무 많아 섣불리 사용이 어려웠던 CSS3도 모바일로 오면 이야기가 달라진다(웹브라우저가 지원하지 않는다고 하기보다는 사용자들이 CSS3를 지원하는 최신 브라우저를 이용하는 경우가 적다고 하는 편이 맞을 것이다). 차세대 웹 기술을 이끌어 가는 모바일 브라우저들답게, 대부분의 모바일 브라우저들이 CSS3를 지원하기 때문에 모바일 웹페이지를 제작함에 있어 거리낌 없이 사용해도 좋다.

이 글에서는 애플 아이폰의 iOS 곳곳에 사용되는 토글버튼을 CSS3를 이용해 제작함으로써 GUI를 만드는 데 필요한 기본적인 CSS3의 속성들을 익혀보고자 한다. 물론 CSS3에는 GUI 디자인을 위한 스펙들이 상당히 많이 준비되어 있지만, 지면 관계상 토글버튼을 만드는 데 쓰인 것들 위주로 살펴볼 것이며, 스펙에 대한 자세한 설명은 생략하고 ‘이런 것들이 가능하다’는 것을 소개하고 간단히 테스트해 보는 데 중점을 뒀다. CSS3를 사용하면 그라데이션, 그림자 등의 기본적인 디자인 요소들을 이미지 없이 CSS만으로 표현할 수 있다(이 예제에는 이미지가 전혀 사용되지 않았다). 가로로 슬라이드되는 애니메이션은 CSS3의 Transition을 사용했다. 그럼 토글버튼에서 이용할 CSS3 속성들을 각각 미리 둘러보도록 하자. 터치 동작이 필요한 예제들은 touch 이벤트를 사용했으므로 일반 데스크톱 웹브라우저에서는 동작하지 않는다.



● 그라데이션



<화면 3> CSS 그라데이션

<리스트 6> CSS 그라데이션

background: -webkit-gradient(linear, left top, left bottom,
  from(#FF0000),
  color-stop(0.5, #00FF00),
  to(#0000FF)
);



linear는 선형 그라데이션임을 나타내며 left top과 left bottom은 방향을 나타낸다. from 색상 값인 #FF0000(빨강)에서부터 #00FF00(녹색)을 거쳐 to 색상 값인 #0000FF까지 그라데이션으로 표현된다. 중간의 color-stop은 0.5, 즉 50%가 되는 위치에 #00FF00 색상이 들어간다는 의미이며 여러 위치에 값을 넣을 수 있다. CSS를 이용함으로써 유동적인 크기를 가지는 엘리먼트에도 그라데이션 효과를 적용하는 것이 가능하다. 한 가지 팁을 이야기하면, 포토샵에서 디자인할 때 사용한 PSD 파일을 열어 해당 부분의 그라데이션 속성 윈도우에 표시되는 색상 값, 위치 정보 등을 그대로 이용하면 한결 수월하다.



● 텍스트 그림자


<화면 4> 텍스트 그림자

<리스트 7> 텍스트 그림자

/* Text Shadow 1 */
text-shadow: rgba(0, 0, 0, 0.7) 1px 2px 3px;

/* Text Shadow 2 */
padding: 10px; color: #39434f; text-align: center;
border-top: 1px solid #39434f; border-bottom: 1px solid #39434f;
text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
background: -webkit-gradient(linear, left top, left bottom,
from(#d9e0e9), color-stop(0.02, #d9e0e9), color-stop(0.02, #a5b3c6), color-stop(0.15, #a5b3c6),
color-stop(0.49, #889bb3), color-stop(0.5, #8195af), to(#6d84a2));



text-shadow 속성을 설정해 주는 것으로 텍스트 그림자 표현이 가능하다. text-shadow: rgba(0, 0, 0, 0.7) 1px 2px 3px;에서 rgba(0, 0, 0, 0.7)은 순서대로 색상 RGB 값 및 투명도(0.7은 70%)를 나타낸다. 색상 값 뒤의 세 가지 값은 순서대로 그림자의 Left 위치, Top 위치, 그림자의 부드러움 정도를 나타낸다. 앞의 그라데이션과 적절히 함께 사용하면 <화면 4>의 아래와 같은 타이틀 바도 손쉽게 만들 수 있다.



● 꼭지점이 둥근 사각형


<화면 5> 꼭지점이 둥근 사각형

<리스트 8> 꼭지점이 둥근 사각형

border-radius: 20px;



border-radius로 꼭지점 부분의 반지름을 설정해 주는 것으로 둥근 박스를 표현하는 것이 가능하다. 이제 더 이상 둥근 박스를 만들기 위해 커다란 배경이미지를 사용할 필요도 없으며, 추가적인 마크업을 넣을 필요도 없어졌다. text-shadow 예제에서 만들어 본 타이틀 바에 border-radius를 적용하면 <화면 5>와 같은 모양을 만들 수도 있다.



● 애니메이션



<화면 6> Transaction 애니메이션

<리스트 9> Transition 애니메이션

..........................................................
<style>
div { height: 50px; border: 1px solid #000;
  -webkit-transition-property: height, font-size, border-width;
  -webkit-transition-duration: 2s, 5s, 1s;
  -webkit-transition-timing-function: ease-in;
}
div.active { height: 200px; font-size: 3em; border-width: 20px; }
</style>
..........................................................
<div></div>
..........................................................



CSS3의 애니메이션은 Transition을 이용한 방법과 Animation을 이용한 방법이 있는데, 사용자의 이벤트에 반응하며 반복적으로 사용할 애니메이션은 Transition을 이용해 class로 조정하는 것이 편리하며, 키프레임 개념을 이용해 시간 흐름에 따라 애니메이션을 만들 경우는 Animation을 이용하는 것이 좋다. 이 예제는 터치하면 자바스크립트로 .active 클래스를 활성화시켜 Transition 효과를 보여준다.

transition-property의 값은 애니메이션을 걸어 줄 속성이며, 복수 지정이 가능하다. transition-duration은 애니메이션이 진행되는 시간을 나타내며 복수의 속성에 Transition을 적용한다면 진행시간 역시 복수로 지정할 수 있다. transition-timing-function은 애니메이션의 진행에 따른 속도 변화를 결정하는 것으로 ease-in, ease-out, ease-in-out, linear 등의 값을 사용할 수 있다.



● iOS 토글버튼 만들기


<화면 7> iOS 토글버튼 만들기

<리스트 10> iOS 토글버튼 만들기

..........................................................
<style>
.toggleBtn { margin: 10px; width: 94px; }
/*--------------------.toggleBtn > div--------------------*/
.toggleBtn > div { position: relative; overflow: hidden; width: 92px; height: 25px;
border-style: solid; border-width: 1px; border-radius: 4px; }
/* OFF 상태 */
.toggleBtn > div.off { border-color: #7d7d7d #9f9f9f #bebebe #9f9f9f;
background: -webkit-gradient(linear, left top, left bottom, from(#b6b6b6),
color-stop(0.09, #e5e5e5), color-stop(0.49, #efefef), color-stop(0.53, #f8f8f8), to(#fefefe)); }
/* ON 상태 */
.toggleBtn > div.on { border-color: #00368c #0054ba #4b87da #0054ba;
background: -webkit-gradient(linear, left top, left bottom, from(#205ab6), color-stop(0.09, #2a70e0),
color-stop(0.49, #3383f1), color-stop(0.53, #4890f5), to(#6facff)); }
/*--------------------.toggleBtn > div span--------------------*/
.toggleBtn > div span { position: absolute; top: -1px; display: block; width: 40px; height: 25px;
border-style: solid; border-width: 1px; border-radius: 4px;
background: -webkit-gradient(linear, left top, left bottom, from(#f0f0f0),
color-stop(0.02, #f0f0f0), color-stop(0.02, #cdcdcd), color-stop(0.47, #e4e4e4), to(#fafafa));
-webkit-transition-property: left;
-webkit-transition-duration: 0.2s;
-webkit-transition-timing-function: ease-out; }
/* OFF 상태 */
.toggleBtn > div.off span { left: -1px; border-color: #919191 #ababab #979797 #ababab;
-webkit-box-shadow: rgba(0, 0, 0, 0.25) 1px 0px 2px; }
/* ON 상태 */
.toggleBtn > div.on span { left: 51px; border-color: #919191 #ababab #979797 #2c5da2;
-webkit-box-shadow: rgba(0, 37, 97, 0.5) -1px 0px 3px; }
/*--------------------.toggleBtn > div span label--------------------*/
.toggleBtn > div span label { position: absolute; top: 3px; display: inline-block; width: 50px;
text-align: center; font-size: 16px; font-family: Helvetica; font-weight: bold; }
/* OFF 상태 */
.toggleBtn > div.off span label { left: 41px; color: #7f7f7f; text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0; }
/* ON 상태 */
.toggleBtn > div.on span label { left: -52px; color: #fff; text-shadow: rgba(0, 0, 0, 0.5) 0 -1px 0; }
</style>
..........................................................
<script>
..........................................................
function toggleHandler(e) {
  var ct = e.currentTarget;
  var currentDiv = ct.getElementsByTagName("div")[0];
  // className을 변경시켜 주는 것만으로 Transition에 의한 애니메이션이 실행된다.
  if(!ct.swc) {
    currentDiv.className = "on";
    ct.label = "ON";
  } else {
    currentDiv.className = "off";
    ct.label = "OFF";
  }
  getLabelElement(ct).firstChild.nodeValue = ct.label;
  ct.swc = !ct.swc;
}
..........................................................
</script>
..........................................................
<div class="toggleBtn">
  <div class="off"><span><label></label></span></div>
</div>
..........................................................



div에 class=“on”이 걸리면 켜지고 class=“off”가 걸리면 꺼지는 구조다. <리스트 10>의 예제에는 이미지가 전혀 사용되지 않았으며 border-radius를 사용해 둥근 모양의 사각버튼을 표현하고, css gradient를 이용해 iOS의 토글버튼과 비슷한 모양을 만들었다. 버튼에 표시되는 ON, OFF는 텍스트이며 text-shadow를 이용해 iOS 버튼의 텍스트와 비슷한 모양을 만들었다. 버튼이 가로방향으로 이동하는 애니메이션은 Transition에서 left 값을 바꿔주는 방법으로 재현했다. HTML 마크업에서 div에 걸려있는 class=“on”, class=“off” 값을 변경하면 초기 상태를 지정해 줄 수 있다. 역시 http://yooor.com/open/ms_may에서 스마트폰으로 테스트해 볼 수 있으며 전체 코드를 볼 수 있다.

이처럼 CSS3를 이용하면 이미지를 사용하지 않고도 미려하고 수정이 용이하며 유연한 GUI 요소들을 만들어 낼 수 있다. 최신 모바일 브라우저들은 경쟁하듯 앞 다퉈 CSS3를 적용하고 있으며 대다수의 사람들은 이미 CSS3를 멋지게 지원하는 스마트폰을 사용하고 있다. 망설이지 말고 우리의 모바일 웹사이트에 CSS3를 적용해 보자!



jQueryMobile로 시작하기

마소 지면을 통해 이미 jQueryMobile에 대한 소개는 충분히 이뤄졌다. 지금도 관련 연재가 진행되고 있으니 jQueryMobile로 개발할 때 쓸 만한 몇 가지를 살펴본다.

jQueryMobile로 다뤄 볼 예제는 개발자들의 오랜 친구이자 쉼터인 OKJsp의 jQuery Mobile 버전 모바일 웹이다(OKJsp 운영자가 OKJsp API 사용을 흔쾌히 허락했다). 전체 코드가 보고 싶다면 실제로 okjsp.pe.kr/jqm에서 운영 중이니 살펴볼 수 있다.

OKJsp는 게시판 위주의 개발자 커뮤니티다. OKJsp에서 모바일 웹의 역할은 게시판과 게시물, 게시 내용들을 보여주는 것이다. 우선 서버에 있는 내용들을 가지고 와서 UI를 그려 보았다.


<화면 8> OKJsp 게시판


<화면 9> 게시물



jQueryMobile <a> tag의 역할

JQueryMobile에서 <a> tag의 역할은 중요하다. <a> tag는 jQueryMobile이 매번 가로채고 판단한다.

- tag에  target 속성이 존재하는가?
- tag의 href 속성 값에 외부 링크 문자열(http 등)이 포함되어 있는가?
- tag에 [rel=’external’] 속성이 있는가?

우리는 jQueryMobile의 <a> tag가 어떻게 작동하는지를 알아 둘 필요가 있다. 일단 사용자가 링크를 클릭하면 jQueryMobile은 먼저 <a> tag의 href 속성을 가져오고 몇 가지 속성이 더 존재하는지 판단한다. target이 존재한다면 외부 링크로 판단하고 target의 속성대로 새 창을 띄운다. 외부 링크 문자열(http) 등이 존재하면 이것도 외부 링크로 판단하고 이동한다. 만약 target도 없고 관련 속성과 외부 링크 문자열이 존재하지 않는다면 비로소 내부 링크로 판단하고 Ajax를 통해 해당 페이지를 호출하고 추가한다.

OKJsp API로 개발할 때 약간의 문제가 있었다. 여러 가지 이유로 jQueryMobile이 내부 링크를 판단하는 기준이 하나 더 필요했고 실제 DB에서 가져오는 사용자 게시 내용 중에 <a> tag가 존재하고 현재 페이지에서 외부 링크로 이동하는 문제도 있었다. 간단히 게시 내용 중에 <a> tag를 찾아서 target 속성을 부여하면 해결되지만 좀 더 명확한 판단이 필요했다.

이런 문제가 발생할 일은 적으니 이러한 이슈가 있다는 정도만 알아두자.

따라서 target 속성에 추가적으로 JQM 속성 값을 추가했다. target=“JQM” 속성 값이 존재하면 jQueryMobile은 무조건 내부 링크로 판단하게 된다. 이 부분을 위해 우린 전혀 해가 되지 않게 작은 코드를 추가했다.

<리스트 11> 특수한 이슈 해결을 위해 명확한 JQM 링크 사용하기

$( "a" ).live( "click", function(event) {
 var $this = $(this),
 href = $this.attr( "href" ) || "#",
 url = path.clean( href ),
 isRelExternal = $this.is( "[rel='external']" ),
 isEmbeddedPage = path.isEmbeddedPage( url ),
 isExternal = path.isExternal( url ) || isRelExternal && !isEmbeddedPage,
 target = $this.attr( "target" ),
 hasTarget,
 hasAjaxDisabled = $this.is( "[data-ajax='false']" );

 if( target ) {
  if( target == "JQM" ) {
   hasTarget = false;
  } else {
   hasTarget = true;
  }
 } else {
  hasTarget = true;
 }
…………………………………….



 

jQueryMobile에서 페이징
모바일 웹에서 페이징은 번호로 이동하는 일반적인 페이징보다 트위터와 같은 게시물 추가 삽입 방식이 모바일 웹에 더 적합하고 어울린다.

<리스트 12> 페이징 페이지

<li data-theme="c">
<a href="url.."> 제목.. <span class="ui-li-count">댓글개수.. </span></a>
</li>
<li data-theme="c">
<a href="url.."> 제목.. <span class="ui-li-count">댓글개수.. </span></a>
</li>
<li data-theme="c">
<a href="url.." id="btn_hasmore">Load More.</a>
</li>
………………………………………………………………… 생략

<리스트 12>와 같은 listView에 링크 또는 버튼을 추가한다. 추가한 버튼은 <화면 10>과 같다.


<화면 10> 페이징 버튼


<화면 11> 버튼 미삭제 시

  
이제 페이징 버튼에 클릭 이벤트 시 Ajax로 다음 페이지를 가져와 추가하는 코드를 만들어 보자.

<리스트 13> 페이징 함수

$("#btn_hasmore").live("click", function (event) {
    $.mobile.pageLoading(); // 페이지 로딩
   
    var href = $(this).attr('href'); // 호출 url
    var bbs = $(this).parents('[id*=listview_]'); // 추가할 리스트 id 값
       
    $.get(href, function(data) {
     $('.li_btn_hasmore').remove(); // 버튼 삭제
 $(bbs).append(data); // 게시물 데이터 추가
 $(bbs).listview('refresh'); // 게시물 새로 고침
 $.mobile.pageLoading(true); // 페이지 로딩 제거
    });
});



<리스트 13>을 살펴보자. 해당 선택자의 이벤트가 계속 살아있도록 live() 메소드를 사용한다. 이제 선택자에 클릭 이벤트가 발생하면 $.mobile.pageLoading(); 이벤트가 발생한다. 이 이벤트는 페이지가 로딩 중이라는 메시지를 띄워준다. 그리고 해당 링크의 href 속성 값을 가지고 와서 변수에 담는다. href의 속성 값이 우리가 호출할 다음 페이지의 주소가 되는 것이다.

여기서 주의할 점은 jQueryMobile은 호출한 많은 페이지를 계속 담아두고 있다는 것이다. 그래서 각각 고유의 id 값이 부여되어야 하기 때문에 여러 개의 게시판을 쓴다면 우린 어떤 id 값이 부여된 <ul> listview에 페이지를 추가할지 알아야 한다. 그래서 우리는 버튼을 감싸고 있는 부모 요소 중에 우리가 원하는 list view의 id 값을 찾아와야 한다. <리스트 13>에서 그 역할을 하는 것이 다섯 번째 라인이다. 버튼의 부모 요소 중 해당 id 값을 포함하고 있는 가장 근접한 <ul> listview에 접근했다.

호출할 주소 값과 추가할 id 값을 제대로 확인했다면 $.get() 메소드를 통해 해당 페이지를 가져온다. 일단 가져오기 전에 해당 버튼을 삭제하자. 삭제하지 않으면 <화면 11>과 같이 게시물 중간에 버튼이 존재하는 우스운 모습이 된다. 버튼을 제거했으면 가져온 게시물들을 append() 메소드로 추가하고 listview (‘refresh’) 해준 후에 모든 페이지가 완료되었으니 $.mobile. pageLoading(true);를 통해 페이지 로딩 메시지를 제거하면 페이징이 처리된다.


결국은 자바스크립트

자바스크립트 라이브러리를 이용한 개발은 쉽고 재미있지만 기초가 부족하면 어느 순간 한계에 부딪친다. jQuery가 아무리 쉽다고 해도 잘하기 위해선 결국 자바스크립트인 셈이고, 오히려 개발자들이 좌절하는 대부분의 이유는 자바스크립트가 아니라 CSS이다. 서버사이드 개발자라 해도 대다수 자바스크립트를 피할 수 없다. 평소에 기초적인 HTML과 CSS에 관심을 갖는 것이 자바스크립트를 잘 다룰 수 있는 좋은 방법이다.


:

모바일 코딩

모바일 2011. 5. 27. 09:25

 출처: http://blog.naver.com/parfum33/130096540705


1. 모바일 웹을 처음 해봅니다. 브라우저는 어떻게 어떤식으로 맞추어야 하나요?

아이폰: 사파리
옴니아: IE5/오페라 모바일/오페라 미니
안드로이드: 안드로이드 브라우저/오페라 모바일/오페라 미니
폴라리스등이 있고요. 웹뷰어들은 IE니까 특별히 신경쓸 필요 없습니다.
※ 여기서 잠깐 폴라리스란?
    국산 모바일 웹 브라우저로 국산 피처폰에 많이 탑재되어 있는 폴라리스 버전 6.0 브라우저는 MS IE 전용 속성과
    IE 6~7핵 사용 가능하며 이름만 폴라리스이고 실제로는 IE6나 마찬가지인 브라우저라 알려져 있다.

IE5는 보통 쓸수가 없어서 배제하는 경우가 많고요. 윈모6.5의 IE6은 데탑의 6과 거의 비슷합니다. 모바일용 파이어폭스는 펜닉이라는 이름의 브라우저인데 아직 정식이 안나와서 사용자가 거의 없습니다.

사파리나 오페라나 펜닉이나 웹표준을 잘 적용해서 만들면 크게 문제가 없습니다. 다만 서체가 브라우저별로 다 다르고 서체의 크기도 제약사항이 많기때문에 서체 크기에 의존적이지 않게 디자인하고 제작하는 것이 중요합니다

여기서 알수 있는 것이 모바일 웹 같은경우 화면의 작음 때문에 위에서부터 내려오는 마크업구조를 가지기 때문에
웹접근성과 웹표준성이 중시 되어야만 한다. 탭키를 눌렀는데 맨 아래로 간다면 얼마나 리딩능력이 떨어짐과 동시에
불편한사람들에게는 크나큰 장애가 될 수 있다.



2. 그럼 모바일 브라우저의 종류에는 어떤 것들이 있나요?


모바일 웹 브라우저
•인프라웨어 Polaris
•Opera mobile – (9.2 이하 presto 기반, 9.5 이상 Presto Core 2 기반 )
•MS IE mobile - Windows mobile
•Google Chrome – Android (webkit기반)
•Apple Safari – MAC os (webkit기반)
•Access Netfront - Multi Platform
•Nokia oss – S60 (webkit기반)
•Mozilla Fennec – linux , Windows Mobile (gecko기반)




3. 그렇다면 모바일 브라우저를 pc에서는 확인 할 수 없나요?


LG 아르고폰(LG텔레콤)- Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; 800*600;POLARIS 6.0;em1.0;lgtelecom;EB10-200090218-707682823;LG-LH2300;0);

iPod Touch- Mozilla/5.0 (iPod; U; CPU like Mac OS X; ko-kr) AppleWebKit/420.1 (KHTML, like Gecko) Version/3.0 Mobile/4A93 Safari/419.3

옴니아 Opera Mobile- SAMSUNG-SCH-M490/(null)HK4 (compatible; MSIE 6.0; Windows CE; PPC) Opera 9.5

옴니아 IE Mobile- SAMSUNG-SCH-M490/(null)HK4 (compatible; MSIE 6.0; Windows CE; IEMobile 7.11)

폴라리스 같은 경우는 pc환경에서 확인 할 수 있도록 파일이 있다.

그 밖에 사파리와 FF는 ADD-ON 기능을 통해 지원 하고 있으며 그내용은
http://html.nhndesign.com/?mid=blog&category=90&document_srl=2154
여기서 확인 할 수 있습니다.

아이폰 전용 사이트 홈페이지
http://testiphone.com/


4. 모바일 가로 모드는 어떻게 변경 되는 건가요?


모바일 가로 모드 같은경우 CSS 적용을 변경 하여 주는 것입니다. 물론 개발과 같이 연동 되어서 되는 것이고요
http://www.engageinteractive.co.uk/blog/2008/06/19/tutorial-building-a-website-for-the-iphone/
영문이라 별다른 해석은 하지 않겟습니다.



5. NAVER에 소스를 보면 메타테그가 조금 틀립니다. 문서의 형식을 지정 해주어야 하는 부분이 외 그런가요?


모바일 웹에서 가장 중요 하다 할 수 있는 이 질문은 각각의 기기에 따라 해상도가 틀린 모바일 같은경우 viewport가 다른데 모바일 기기마다 틀린 해상도를 잘보이게끔 해주는 기능을 말합니다.
그리고 이문제또한 meta태그를 이용하여 변경이 가능 합니다.




6. 모바일웹이 스마트폰이라 틀린건가요?


모바일 웹 2.0은 모바일 인터넷 기술의 새로운 흐름을 지칭하는 말로, 팀 오델리가 처음 사용한 웹 2.0이라는 용어를 모바일에 접목 시킨것입니다. 웹2.0의 의미인 유동성과 위키피디아를 참조 하시면 알겠지만 그 의미가 100%같지는 않지만 중요한 의미에서 버전업과 "플렛폼으로써의 웹"이라는 핵심 특징을 같이 가지고 있다.
참조 : http://html.nhndesign.com/?mid=blog&category=90&document_srl=1530

개인적으로 모바일 웹은 WAP[Wireless Application Protocol]이라 불리던 브라우징 방식을 웹브라우징 방식을 PC를 통해 그대로 보여줄 수 있다는 매력과 장점이 있다.

 

※ WAP(wireless application protocol, 무선 어플리케이션 프로토콜)

모바일 단말기에서 웹사이트를 볼 수 있는 방법을 표준화하기 위한 무 선 통신 프로토콜들의 규격으로 WAP포럼 에서 제정되었으며,WP방식은 전세계적으로 가장 많이 사용되고 있으며 공개된 표준 규격이다.
단말기의 종류에 관계없이 다양한 무선환경에서 동작이 가능하나,WML로 전환하기 위해 게이트웨이가 반드시 필요하기 때문에 통신 사업자는 초기 설치 비용이 부담이 될 수 있다. 업체는 실제로 서비스될 사이트를 WML로 구현해야 한다.

:

“태블릿과 스마트폰 시대”에 절대 피해야 할 웹 UI 7가지

모바일 2011. 4. 19. 14:55


“태블릿과 스마트폰 시대”에 절대 피해야 할 웹 UI 7가지
출처 : by IDG Korea | 2011. 04. 11  | http://www.bloter.net/archives/56552

 
클라이언트들은 터무니없는 말을 하곤 한다. 예전에 누군가가 말했다. “고객이 바보 같이 작은 스마트폰 화면으로 우리 사이트에 방문할 일은 없을 것이다.” 필자는 깜짝 놀랐다. “정말?” 그리고는 되물었다. “만약 식사를 하면서 회의중이고, 고객이 자신의 상사에게 제품의 사양을 보여주고 싶다면?” 아니면 “만약 고객이 당신의 전화번호를 찾으려 한다면?”
클라이언트들은 종종 스마트폰, 태블릿, 그 외의 모바일 기기들이 웹에 접속하는 방식을 얼마나 빠르게 변화시키고 있는지를 무시한다. 더욱 슬프게도, 극소수의 웹 개발자만이 자신의 클라이언트에게 이런 현실을 알려준다.

그래픽 디자이너들은 아직도 자신들의 작업 결과물이 종종 더 자그마한 화면에서 보여진다는 사실을 간과한 채, 애플 시네마 디스플레이 모니터를 캔버스 삼아 자신들의 사이트를 그려 나간다. 그리고 코더(coder)들은 자신들이 HTML과 CSS의 복잡한 내용과 한계를 이해하고 있어야 함에도 불구하고, 만들어진 디자인을 맹목적으로 구현한다.

그 결과로, 너무 많은 웹사이트들이 여전히 진부한 UI 상의 실수들을 범하고 있으며, 태블릿과 스마트폰 사용자들이 사이트를 사용하지 못하도록 만들고 만다. 여기 몇 가지 예를 제시한다.

 

웹 UI 실수 1 : 롤오버(rollover) 사용

언젠가부터, 웹 개발자들은 사용자가 화면의 특정 부분에 마우스를 올려놓았을 때 내용을 보여주거나 컨트롤을 강조하는 것을 매우 좋아한다. 이것이 스마트폰과 태블릿에 일으키는 문제는 명확하다. 마우스 커서가 없으면, 컨트롤 위에 마우스를 올려놓을 방법이 없다.

그렇다고 모든 롤오버 효과를 없애야 한다는 것은 아니다. 하지만 터치스크린 사용자를 위하여, 모든 마우스 오버 이벤트에 대해 그와 같은 기능을 하는 클릭 이벤트가 있어야 할 것이다. 마우스만을 위해 디자인된 메뉴 때문에, 스마트폰 사용자들이 매번 페이지를 다시 로딩하는 일은 없어져야 한다.

 

웹 UI 실수 2 : 커스텀 위젯과 컨트롤 사용

디자이너들은 버튼과 다른 위젯들에 고유의 모양과 느낌을 주는 것을 좋아한다. 하지만 UI 표준은 플랫폼에 따라 서로 다르며, 컨트롤을 모든 기기에서 동일하게 알아보고 사용할 수 있도록 하지 않으면 웹사이트의 사용 편의성이 나빠진다.

커스텀 스크롤 바는 가장 나쁜 사례 중 하나이다. 때때로 디자이너들은 기본 컨트롤을 없애고, 자바스크립트를 이용한 매끈하고, 얇고, 더 매력적인 위젯으로 대체하려 한다. 태블릿 사용자들이 직면하는 문제는 두 가지이다. 자그마한 위젯들은 손가락으로 건드리기가 힘들 뿐 아니라, 태블릿 사용자들은 스크롤바를 이용하지 않는다(화면을 손가락으로 끌어서 스크롤을 한다). 따라서 커스텀 컨트롤을 강요하는 것은, 사용자 인터페이스를 혼란스럽게 할 뿐이다.

마찬가지로, 마우스를 제외한 다른 입력장치가 당연히 있을 것이라고 여기면 안된다. 예를 들면, 팝업 대화창은 항상 눈으로 확인할 수 있는 닫기 버튼이 있어야 한다. 스마트폰이나 태블릿은 키보드 입력기를 가지고 있을 수 있지만, Esc 키를 입력할 수 있는 경우는 별로 없다.

웹 UI 실수 3 : 너무 많은 스크롤 영역 보유 

작은 터치스크린을 통해 웹사이트를 보다 보면, 종종 전체 페이지를 보기 위해 스크롤을 해야 할 때가 있다. 하지만 앞서 언급했듯이, 태블릿 사용자는 손가락으로 화면을 끌어서 스크롤한다. 디자이너가 웹페이지를 여러 면으로 나누어 각각에 스크롤바를 배치하면, UI가 금방 지뢰밭이 되어버린다.

화면에서 사용자 손가락의 위치에 따라, 처음 끌기를 하면 특정 부분의 내용이 스크롤되다가 다시 한 번 더 끌기를 하면 다른 부분이 스크롤될 수도 있다. 가능하면 레이아웃을 단순하게 만드는 것이 좋으며, 그러지 못하더라도 최소한 사용자가 전체 페이지를 스크롤할 지 아니면 특정 부분을 스크롤할 지를 결정할 수 있도록 충분한 크기의 여백을 두어야 한다.

 

웹 UI 실수 4 : 경직된 텍스트 레이아웃

많은 그래픽 디자이너들이 정확한 픽셀 치수와 타이포 그래피 원칙을 통해 자신들의 웹사이트 레이아웃을 설명했다. 이런 방식이 웹 디자인을 위한 좋은 길이 아니기도 하지만(웹 상에서 사용자들은 브라우저 창이나 글자의 크기를 마음대로 조절할 수 있다), 스마트폰에서 볼 수 있는 사이트를 만들 때에는 특히 잘못된 방법이다.

예를 들면 안드로이드 브라우저는 기본적으로, 페이지의 CSS 스펙과는 상관없이, 텍스트의 단 폭을 기기의 화면 폭에 맞도록 축소시킨다. 이를 미리 고려하지 못하고 모든 디자인 요소들이 데스크톱 브라우저에서와 같이 배열될 것이라고 생각한다면, 이는 결국 스마트폰 사용자에게 커다란 빈 여백과 함께 컨트롤을 볼 수 없게 만들어 사용자 인터페이스를 어렵게 한다.

 

웹 UI 실수 5 : 특정 화면 형태에 대해 가정하기

한 웹 디자이너는 기술에 뒤처지지 않으려 하며, 사이트를 현대적인 와이드스크린 LCD에 최적화시켜서 필자를 흡족하게 만들었다. 하지만 오래된 모니터를 사용하는 사람들을 소홀히 하더라도, 모바일 사용자를 무시하면 기술의 최전선에 설 수 없다.

대부분의 스마트폰은 사용자가 기기를 들고 있는 방향에 따라, 자동적으로 수직(portrait)과 수평(landscape) 모드를 전환할 수 있다. 어떤 사용자들은 이런 자동 방향 전환(auto-pivot) 기능을 싫어하고 해제해 놓는다. 이런 경우에는 사용자가 디자인과 같은 모드를 사용하길 비는 것 외에는 방법이 없다. 페이지 형태에 대해서 미리 가정하는 것은 인쇄물 시장에서는 아무 문제가 없었지만, 사이즈를 미리 알 수가 없는 웹에서는 형편없는 선택이다.

 

웹 UI 실수 6 : 너무 많은 이미지를 미리 읽기

불쌍한 스마트폰 사용자에게 안타까움을 표한다. 인터넷 속도가 유선만큼 빠르지 않을 뿐 아니라, 통신업체들은 데이터 사용량에 상한선을 정하고 추가 사용에 대해 요금을 부과하고 있다. 게다가 스마트폰은 메모리가 한정되어 있다.

자바스크립트를 이용해 슬라이드쇼 이미지들을 미리 읽는 것이 데스크톱 브라우저에서는 괜찮을지도 모르지만, 스마트폰 이용자들에게는 조금 거슬릴 수 있다. 특히 사용자의 마우스가 특정한 컨트롤 위에 놓여졌을 때(태블릿 사용자들은 이를 사용할 방법이 없다) 그 이미지들이 나오도록 되어 있다면, 더욱 그렇다.

 

웹 UI 실수 7 : 플래시 사용

이런 말을 하고 싶진 않지만, 어도비 플래시는 여전히 모바일 기기에 발붙일 곳이 없다. 널리 알려진 대로, 애플의 iOS 기기들은 플래시 콘텐츠를 전혀 지원하지 않으며, 안드로이드 스마트폰조차도 좋지 않은 성능만을 제공한다.

더 슬프게도, 플래시 애플리케이션은 일반적인 HTML 사이트보다 훨씬 자주 UI 문제를 일으킨다. 어도비 팬에게는 유감이지만, HTML5의 출현과 함께, 웹에서 플래시를 볼 날은 얼마 남지 않았다.

물론, 이런 UI 문제를 회피할 다른 방법들이 존재한다. 모바일 기기를 위한 특별한 커스텀 버전의 사이트를 독립적으로 만들 수도 있다. 아니면 커스텀앱을 제작할 수도 있다. 하지만 이런 방법들은 나름대로의 문제를 가지고 있다. 기기에 묶여 있고, 미래가 보장되어 있지 않다. 여러 기기, 여러 플랫폼에서 같이 사용할 수 있는, 다시 말해 크로스 플랫폼, 크로스 디바이스 온라인 애플리케이션을 만들 수 있는 HTML의 잠재력을 얕보면 안된다. 최소한 지금 하는 디자인이 어떻게 보일지는 알고 있어야 할 것이다.




[출처] “태블릿과 스마트폰 시대”에 절대 피해야 할 웹 UI 7가지 (웹디들의커뮤니티카페 :: Dom FAM ::) |작성자 뜅구르

 

 

 

:

모바일 코딩시 참고사항

모바일 2010. 12. 16. 14:24

데스크탑과 마찬가지로 모바일폰도 플랫폼 별로 서체가 다 틀립니다. 애플고딕, 굴림, 삼성고딕 등 종류가 다양하고 가로/세로일때 서체가 커지기도 하고 같은 옴니아라고 해도 설치하는 브라우저별로 다 다르고 지원되는 서체 크기도 3단계~5단계로 다르고 등의 이유 때문에 폰트를 고려해서 디자인 하는 것 보다, 폰트의 모양과 크기가 바뀌어도 잘 나오게 유동적인 디자인으로 만드는게 중요합니다.

서체는 별로 신경쓰지 마시고 serif인지 sans-serif인지만 명확히 해 주세요.

font-family: serif;
font-family: sans-serif;

사이즈는 0.7em ~ 0.8em을 주로 썼습니다.
:

아이폰용 모바일 웹페이지 디자인 팁

모바일 2010. 12. 16. 10:55

아이폰용 모바일 웹페이지 디자인 팁


모바일 디바이스의 웹브라우저에는 모바일 디바이스에 최적화 할 수 있는 여러 기능들이 추가로 존재합니다. 대부분의 디바이스 및 웹브라우저에서 공통적으로 지원하는 기능들도 있고, 특정 디바이스 및 웹브라우저에서만 지원하는 기능들도 있습니다.

본 포스팅에서는 아이폰 및 아이패드의 iOS와 모바일 사파리를 기준으로 알아보겠습니다.

Viewport

모바일 웹브라우저의 기본 화면 크기 및 확대/축소 배율등을 정하는 모바일 웹사이트 및 웹앱을 만들시 제일 중요한 Meta 태그입니다. 기본적으로 아이폰의 사파리 웹브라우저는 넓이가 980 px인 해상도로 보여주기 때문에 아이폰에서 아이폰3G(S)에 맞춰 디자인 한 웹페이지(320 x 480 px)를 본다고 가정한 경우 뷰포트를 설정하지 않는다면 가로 좌우 여백이 330 px의 여백이 남는 아주 작은 화면을 보게 됩니다.

다음처럼 뷰포트를 사용하면 1:1 비율로 아이폰의 해상도에 맞게 최적화 할 수 있습니다.

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

width : 넓이 – device-width | N px (200~10000 px, default 980 px)
height : 높이 – device-height | N px (223~10000 px)
initial-scale : 초기 확대/축소 배율
minimum-scale : 최소 축소 배율 – N (0~10, default 0.25)
maximum-scale : 최대 확대 배율 – N (0~10, default 1.6)
user-scalable : 확대/축소 가능 여부 – yes | no (default yes)

각각의 설정 값과 기본 값은 위와 같으며, 사용자에 따라 최적화된 환경을 제공할 수 있도록 각각의 속성을 설정하는것이 중요합니다.

홈 화면 아이콘

아이폰의 경우 웹 페이지를 앱처럼처럼 홈 화면에 바로가기를 추가할 수 있습니다. 단순히 아이콘만 설정 가능한 것이 아니라 아이폰의 홈 화면 아이콘들의 공통점인 라운드 박스 효과는 기본적으로 적용되고, 반사광 효과의 적용 유무를 추가로 선택이 가능합니다.

1
2
// 반사광 효과를 주는 경우
<link rel="apple-touch-icon" href="home-icon-name.png">
1
2
// 반사광 효과가 없는 경우
<link rel="apple-touch-icon-precomposed" href="home-icon-name.png">

apple-touch-icon.png / apple-touch-icon-precomposed.png 의 파일명으로 도메인의 최상위 경로에 올려두면 위의 link 태그를 적용하지 않아도 홈 화면에 추가시 아이콘이 적용됩니다.

전체화면 모드

웹 페이지를 홈 화면으로 추가하면 특정 Meta 태그를 통해 웹 브라우저의 상단의 주소 표시줄과 하단의 버튼 Bar를 없앨 수 있습니다. 단 홈 화면에 추가한 후 홈 화면의 아이콘을 통해 접속 했을 경우에만 적용이 됩니다.

1
<meta name="apple-mobile-web-app-capable" content="yes">

자바스크립트의 window.navigator.standalone의 결과값(true/false)으로 전체화면 모드 유무를 알 수 있습니다.

추가로 자바 스크립트로 웹 페이지에 접속시 자동으로 스크롤을 상단의 주소 표시줄만큼 내려 상단의 주소표시줄이 사라진 것 처럼 만들수 있습니다.

1
2
3
4
5
<script type="text/javascript">
    window.addEventListener("load",function(){
        setTimeout(scrollTo,0,0,1);
        },false);
</script>

상태바 색상 설정

아이폰 상단의 상태 Bar의 경우 3가지 테마를 Meta 태그로 설정할 수 있습니다. 특별한 기능이 있는건 아니지만 디자인을 좀 더 통일성 있게 만들수 있다는 점에서 원하는 색상으로 적용하시면 됩니다.

1
2
// 기본 밝은 계열
<meta name="apple-mobile-web-app-status-bar-style" content="default">
1
2
// 검정색
<meta name="apple-mobile-web-app-status-bar-style" content="black">
1
2
// 반투명 검정색
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

Splash Screen

스플래시 스크린이란 웹 페이지를 홈 화면에 추가한 후 실행할때 잠깐동안 로고나 이미지를 보여주고 사라지는 화면입니다. 스플래시 스크린을 추가하는 방법은 간단합니다.

1
<link rel="apple-touch-startup-image" href="startup.png">

해당 이미지의 사이즈가 320 x 460 px 로 맞춰야 하며, 3. 전체화면 모드에서 설명한 apple-mobile-web-app-capable Meta 태그를 적용해야 스플래시 스크린도 적용됩니다.

폰트 사이즈 고정하기

모바일 디바이스의 경우 화면을 가로/세로로 전환할 수 있습니다. 웹킷 기반의 웹 브라우저는 뷰포트의 크기에 따라 폰트 사이즈가 변경되는데 보통 그러한 기능이 화면을 깨트리는 경우가 발생하여 CSS를 이용해 폰트 사이즈를 고정시키기도 합니다.

폰트 사이즈를 고정시키려면 고정시킬 곳에 다음 CSS를 추가하면 됩니다.

1
-webkit-text-size-adjust:none;

-webkit-text-size-adjust – auto | none | N% (default auto)

이상 추가적인 팁들도 있지만 그러한 것들은 차후에 다뤄보도록 하고, 먼저 기본적이고 쉬우면서도 중요하다고 생각되는 팁들을 위주로 정리했습니다.


출처: http://qwerty.kr/wp/2010/11/%EC%95%84%EC%9D%B4%ED%8F%B0%EC%9A%A9-%EB%AA%A8%EB%B0%94%EC%9D%BC-%EC%9B%B9%ED%8E%98%EC%9D%B4%EC%A7%80-%EB%94%94%EC%9E%90%EC%9D%B8-%ED%8C%81/

:

아이폰 웹 코딩시 유의점

모바일 2010. 12. 16. 10:16

아이폰 웹페이지 이것만 알아도 유용하다.
<head></head>사이에 아래의 한줄을 집어넣어보자.

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />  

위의 한줄을 집어넣음으로써 아이폰의 해상도에 적절하게 화면이 표시될 것이다.
간단한 내용이지만 한부분씩 살펴보겠다.

width=device-width; 
이부분은 영문 그대로 웹페이지의 너비를 기기의 너비대로 보여주라는 얘기다.
아이폰은 320 x 480의 해상도를 갖고 있으므로 320px에 맞춰주는 역할을 한다.

initial-scale=1.0;
초기화면 로딩시 몇배로 보이게 할 것인가를 지정해주는 부분이다.
당연한 얘기지만 1.0으로 지정하면 1배로 보이게 된다.

maximum-scale=1.0;  1배 까지 확대가능. 즉, 확대 불가를 의미한다.
아이폰은 멀티터치를 이용해서 화면을 맘대로 키우거나 줄일 수 있다. 
그러나 때로는 웹사이트가 멀티터치로 화면크기 조절이 안되는걸 볼 수 있는데 
이는 바로 이 옵션이 1로 적용되었기 때문이다.

maximum-scale=10.0; 이렇게 지정하면 10배까지 확대가 가능해진다.

user-scalable=0; 이부분은 멀티터치를 확용한 확대를 허용할 것인가의 여부를
결정하는 부분이다. 위에서 maximum-scale의 숫자를 키우면 해당 숫자 배수까지
화면이 커질 수 있다고 설명했지만 user-scalable가 0으로 되어있으면 작동하지 않는다.

반대로 user-scalable가 1이 적용되어 확대조절을 허용하더라도 
maximum-scale이 1.0으로 되어있으면 화면 확대가 안된다.

 

아래에 예제 하나를 제시한다.

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=10.0; user-scalable=1;" /> 

 위의 예제의 설정은 웹페이지를

1) 아이폰 화면에 맞추며,
2) 처음 크기는 1배로,
3) 그러나 10배까지 키울 수 있다.


아이폰을 위한 웹페이지의 가장 기초적인 부분이지만, 응용해서 좋은 웹사이트를 제작하시길 바랍니다.


출처: http://misojium.com/435

:

모바일 작업시 참고 1

모바일 2010. 4. 28. 10:45

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)

: