개요

본 문서는 웹스케어를 사용하여 모바일 개발 시 주의사항에 대한 가이드입니다. 유념하실 것은 웹스케어는 데스크탑용 브라우저를 위한 AJAX프레임워크로, 모바일 용으로 최적화 되어 있지는 않다는 점을 인지하시기 바랍니다.

주의사항

여러가지 해상도 대응은 viewport나 css3의 @media를 사용

• 모바일 기기의 해상도가 다양하므로 @media속성을 이용해 최적화된 css를 구성하여 각 기기에 맞는 화면을 꾸밀 수 있다.

.dynamicScreen { 
 font-family: Arial, Helvetica, sans-serif; 
 height: 250px; 
 color: black; 
} 
 
@media all and (max-width: 320px) { 
/* 아이폰/아이팟터치/안드로이드의 초기 스크린 해상도 설정 */ 
 .dynamicScreen {background-color: orange;width:320px; } 
} 
 
@media all and (max-width: 768px) { 
 /* 아이패드의 초기 해상도 설정 */ 
 .dynamicScreen {background-color: blue;} 
} 
 
@media all and (min-width: 769px) { 
 /* 아이패드보다 큰 스크린 사이즈와 해상도를 갖는 모든 기기에서의 해상도 설정*/ 
 .dynamicScreen {background-color: green;} 
}

• meta태그의 viewport를 이용해서 기기의 최대가로크기를 정하거나 줌레벨, 사용자 확대축소 방지

• 여부등을 설정 가능하다. meta태그는 websquare.html(jsp)에 넣어야 한다.

<meta name=”viewport” content=”width=device-width”/> 
<meta name=”viewport” content=”initial-sacle=1,user-scalable=no”/>

마우스나 키보드 사용을 전제하지 말 것

• 각종 모바일 기기에 따라 키보드나 마우스 같은 장치 유무가 다르기 때문에 마우스나 키보드 사용을 전제해서는 안 된다.

스크롤 사용시 주의 사항

• 모바일에서 body를 제외하고, overflow:hidden으로 사용하는 것을 권장 함.

  스크롤이 필요한 경우 scrollView 컴포넌트를 사용하여 스크롤을 사용할 수 있다

이벤트 사용시 주의

• 스마트 폰 들이 기본적으로 터치 기반이므로 double click 등의 이벤트를 사용하지 말아야 한다.

• 마우스 이벤트의 경우 기기마다 다른 동작을 하므로 주의 하여야 한다.

파일 첨부 제한

• iPhone의 경우 보안을 위해 허용된 디렉터리의 파일만 첨부 가능.

플러그인 기술 사용금지

• 기기에 따라 flash나 silverlight등의 플러그인 사용이 제한되므로 플러그인 사용을 하지 말아야 한다.

모바일 화면 구성 시 iframe 사용 금지

• 기기에 따라 iframe으로 화면을 구성 하게 되면, focus, blur 관련 동작이 일반 브라우저와 다르게 동작하여 input간 focus가 정상적으로 동작 하는 않는 문제를 발생 시킬 수 있다.

팝업 사용시 주의 사항

• 모바일의 경우 팝업을 띄우게 되면, 새 창(window.open)이 띄며 화면전환이 이루어 지므로 권장 하지 않는다.

• layer 형태의 팝업 및 link를 사용 하는 것을 권장 함.

사용금지 컴포넌트

• iframe

• xsl

• ckEditor

• chart (iPhone에서만 동작.)

• upload

• muliupload

• flash

• applet

• active

• multiselect

• slideHide

• tabContainer

• windowContainer

테스트 된 모바일 OS 및 브라우저

• iphone os3.1/4.0(safari)

• android – galaxyS(2.1-update1, 2.2, 2.3 ), nexusOne(2.2) => 기본내장브라우저

모바일 개발시 사용가능 컴포넌트

아래의 기준으로 (1) 권장, (2) 사용 가능, (3) 비권장, (4) 사용 금지 컴포넌트로 분류할 수 있습니다.

권장

모바일 웹 개발에 권장되는 컴포넌트는 아래와 같습니다.

• CheckBox

• DatePicker

• FlipToggle

• Group

• InputBox

• Image

• Output

• PageControl

• Secret

• Radio

• ScrollView

• Slider

• Spinner

• Trigger

• TextArea

• TextBox

• WFrame

사용 가능

비권장

사용 금지

모바일 접근성

FlipToggle

accessibility

accessibility 속성 설정을 통해 iOS의 VoiceOver 및 Android의 TalkBack 기능을 지원할 수 있습니다.

accessibility="true"로 설정할 경우, 버튼을 HTML의 <a> 태그로 감싸고, aria-valuenow 및 aria-valuetext 같은 HTML 속성을 추가합니다.

accessibility 속성 설정을 통해 iOS의 VoiceOver 및 Android의 TalkBack 기능을 지원할 수 있습니다.

ScrollView

accessibility 속성 설정을 통해 iOS의 VoiceOver 및 Android의 TalkBack 기능을 지원할 수 있습니다.

Switch

accessibility

accessibility 속성 설정을 통해 iOS의 VoiceOver 및 Android의 TalkBack 기능을 지원할 수 있습니다.