소개
PalaSoftware 애플리케이션인 iPad의 MathBoard는 섬세하면서도 자연스러운 애니메이션과 사실적인 고유의 모양과 느낌을 더한 매우 세련된 애플리케이션입니다. iPad 애플리케이션의 최고 충실도 포트를 HTML5에 구현하는 것이 목표였습니다.
N2N-Apps는 HTML5 기술을 사용하여 차세대 웹 및 모바일 애플리케이션 개발에 주력하는 소프트웨어 개발 회사입니다. 이 회사는 2010년에 Jeremy Chone으로부터 자금을 지원받았습니다. Jeremy Chone은 Netscape, Oracle, Adobe에서 11년간의 엔지니어링 및 관리 경험을 쌓은 후 고품질 웹 및 모바일 애플리케이션을 빌드하기 위해 비즈니스와 전문 지식을 기업과 공유하기로 결정했습니다. N2N-Apps는 전송의 품질과 속도에 중점을 둡니다.
Chrome 웹 스토어용 MathBoard 다운로드 Chrome 웹 스토어용 MathBoard 다운로드 (무료 버전)
요구사항
HTML5 포팅 프로젝트의 주요 요구사항은 다음과 같습니다.
- 기존 iPad 애플리케이션의 디자인과 사용자 인터페이스의 충실도 높은 포트입니다.
- 대상 폼 팩터 (예: 키보드/마우스 또는 터치스크린이 있는 PC/Mac)에 맞게 조정합니다.
- 해당하는 기능을 100% 구현합니다.
- 주로 HTML5 브라우저를 타겟팅합니다.
- 애플리케이션을 '서버리스'로 설정하여 애플리케이션이 전적으로 클라이언트에서 실행되고 정적 서버 또는 Chrome 패키지 애플리케이션에서 호스팅될 수 있도록 합니다.
- 모든 기능이 포함된 1.0 버전을 만들어 보세요(단, 문제 해결사는 한 달도 안 되어서).
아키텍처
이러한 요구사항을 고려하여 다음과 같은 아키텍처를 사용하기로 결정했습니다.
- HTML5: HTML4 지원 요구사항이 없으므로 HTML5를 기본으로 사용하기로 결정했습니다.
- jQuery: HTML5에는 jQuery를 훌륭하게 만드는 여러 고급 선택기가 있지만, 우리는 DOM 및 관련 이벤트를 조작할 수 있는 매우 강력하고 성숙한 방법을 제공하기 때문에 jQuery를 계속 사용하기로 했습니다. 또한 jQuery는 좀 더 DOM 중심적이라는 이점이 있어, 애플리케이션의 디자인과 구현이 HTML에 더 가깝게 구현되었습니다.
- SnowUI: jQuery는 DOM을 사용하기 위한 훌륭한 API와 권장사항을 제공하지만 HTML5 MathBoard 애플리케이션의 경우 다양한 뷰를 모두 조정하는 MVC 또는 MVP 스타일 프레임워크가 필요했습니다. SnowUI는 jQuery를 기반으로 하는 간단하면서도 강력한 MVC 프레임워크입니다. 또한 DOM 중심 MVC 메커니즘과 맞춤 구성요소를 빌드할 수 있는 유연한 방법을 제공하는 한편 애플리케이션 개발자가 위젯/컨트롤 라이브러리나 맞춤 코드를 최적으로 여길 수 있는 기회를 잃지 않습니다.
iPad-PC 고려사항
PC용 HTML5로 애플리케이션을 포팅할 때는 애플리케이션의 디자인 및 사용자 상호작용과 관련하여 몇 가지 사항을 수정해야 했습니다.
화면 방향
iPad MathBoard는 독점적으로 세로 방향입니다. 이는 일반적으로 가로로 사용되므로 PC 디스플레이에는 적합하지 않습니다. 이에 따라 UI 디자인을 재구성하고 설정 패널을 슬라이딩 뷰에서 오른쪽으로 이동했습니다 (CSS3 전환으로 애니메이션 처리).
입력: 키보드/마우스 vs. 터치
iPad와 웹 버전의 또 다른 주요 차이점은 입력 인터페이스입니다. iPad에는 터치 인터페이스만 있으며 PC에서는 마우스와 키보드를 모두 고려해야 합니다.
iPad의 MathBoard 입력 컨트롤은 매우 정교합니다. 우리는 웹 인터페이스에서도 똑같이 높은 충실도의 표현을 원했습니다. 해결 방법은 단축키 지원을 추가하고 CSS 배치를 사용하여 UI 컨트롤을 복제하는 것이었습니다. HTML5로의 포트는 완벽했습니다.
iPad 인터페이스에서와 마찬가지로 사용자가 왼쪽 및 오른쪽 화살표를 클릭하여 컨트롤 값을 변경할 수 있습니다. 세로선을 드래그하여 값을 빠르게 변경할 수도 있습니다. 마우스나 키보드를 누를 때 사용자가 값 변경을 가속화할 수 있도록 click 및 keydown의 반복 동작이 구현되었습니다.
한 입력 필드에서 다른 입력 필드로 이동할 수 있도록 TAB 지원이 추가되었으며 ← 및 → 화살표는 값을 순환합니다.
iPad 버전의 PC 인터페이스에는 적합하지 않은 한 가지 기능은 그리기 보드였습니다. 이 기능을 구현하는 것이 좋았을 수도 있지만 마우스로 숫자를 그리는 것은 그리 실용적이지 않습니다. 대신 도면을 구현하는 것보다 키보드 인터페이스를 다듬는 데 더 많은 시간을 할애하기로 했습니다.
HTML5 기능
MathBoard 웹 버전에서는 다음과 같은 여러 HTML5 기능을 사용합니다.
로컬 스토리지
MathBoard를 사용하면 사용자가 퀴즈를 저장했다가 나중에 다시 볼 수 있습니다. HTML5 MathBoard는 SnowUI DAO 인터페이스를 사용하는 HTML5 localStorage로 이 기능을 구현합니다.
데이터가 충분히 단순하고 고급 색인 생성이 필요하지 않았으므로 localStorage를 선택하는 것은 자연스러운 선택이었습니다. 모든 퀴즈는 텍스트로 JSON.stringify하는 JSON 형식 하나로 저장됩니다.
SnowUI DAO는 UI가 실제 저장 방식에 관해 걱정할 필요 없이 데이터를 가져올 수 있는 간단한 CRUD 인터페이스 래퍼입니다. DAO 구현은 저장소 세부사항을 처리합니다.
MathBoard에서는 저장공간 요구사항이 매우 단순했습니다. 사용자 설정과 퀴즈 데이터만 저장해야 했습니다. 둘 다 localStorage에 JSON 문자열로 저장됩니다.
예를 들어 설정 값의 DAO는 다음과 같습니다.
snow.dm.registerDao('settingValue', (function() {
var _settingValues = null;
function SettingValueDao() {};
// ------ DAO CRUD Interface ------ //
// get
SettingValueDao.prototype.get = function(objectType, id) {
return $.extend({},getSettingValues()[id]);
};
// find, remove
// save
SettingValueDao.prototype.save = function(objectType, data) {
var storeValue = getSettingValues('settingValue')[data.id];
if (!storeValue) {
storeValue = {};
getSettingValues()[data.id] = storeValue;
}
$.extend(storeValue, data);
saveSettingValues();
};
// ------ /DAO CRUD Interface ------ //
function getSettingValues() {
if (_settingValues == null) {
var settingValuesString = localStorage.getItem('settingValues');
if (settingValuesString) {
_settingValues = JSON.parse(settingValuesString);
} else{
_settingValues = {};
}
}
return _settingValues;
}
function saveSettingValues(){
var settingValues = getSettingValues();
if (settingValues != null) {
localStorage.removeItem('settingValues');
localStorage.setItem('settingValues', JSON.stringify(settingValues));
}
}
return new SettingValueDao();
})());
이 DAO가 settingValue에 등록되면 UI는 저장 로직에 관해 걱정할 필요 없이 다음 호출을 실행할 수 있습니다.
var addition = snow.dm.get('settingValue', 'operator_addition');
addition.value = true; // to check the addition checkbox
snow.dm.save('settingValue', addition);
CSS3 글꼴
MathBoard는 맞춤 글꼴을 사용합니다. CSS3 글꼴 지원 덕분에 'Chalkduster' 트루 서체 글꼴을 애플리케이션에 포함하는 것은 쉽지 않았습니다.
@font-face {
font-family: Chalkduster;
src: url(Chalkduster.ttf);
}
이 글꼴은 애플리케이션의 거의 모든 텍스트에 기본값이므로 본문의 기본값으로 설정했습니다.
body {
background: #333333;
font-family: Chalkduster;
color: #ffffff;
}
CSS3 그라데이션, 그림자, 둥근 모서리
모든 그라데이션, 그림자, 투명도 및 둥근 모서리는 CSS3로 표현됩니다. 이는 사용자 인터페이스를 실행하는 기존의 .png 방법에 비해 크게 절약할 수 있는 수준입니다.
또한 고급 CSS3 속성을 사용하여 스크롤바의 디자인과 분위기를 더욱 섬세하게 맞춤설정했습니다. WebKit 브라우저에서 스크롤바의 스타일을 지정하는 방법은 http://webkit.org/blog/363/styling-scrollbars/를 참고하세요.
CSS3 전환
HTML5 MathBoard의 경우 iPad의 모든 애니메이션을 복제했으며 오른쪽 슬라이딩 패널에 사용할 새 애니메이션을 추가했습니다. CSS3 전환 덕분에 애니메이션 추가가 간단했고 최고의 성능을 발휘할 수 있었습니다.
애플리케이션에는 세 가지 주요 애니메이션이 있었습니다.
1.) 오른쪽 슬라이딩 창
첫 번째 애니메이션은 오른쪽 창 (#rightPane)에 있습니다. 이 창은 사용자가 새 퀴즈를 시작할 때 닫히고 사용자가 퀴즈를 종료할 때 슬라이드가 열립니다.
이 효과를 만들기 위해 다음 CSS 전환을 사용하고 JavaScript를 통해 트리거했습니다. rightPane의 기본 스타일은 다음과 같이 열립니다.
#rightPane {
/* look and feel, and layout property */
position: absolute;
width: 370px;
height: 598px;
top: 28px;
left: 720px; /* open */
-webkit-transition: all .6s ease-in-out;
}
사용자가 퀴즈를 시작하면 JavaScript 로직이 패널을 이동합니다.
var $rightPane = $('#rightPane');
var left = $rightPane.position().left - 400;
setTimeout(function() {
$rightPane.css('left', left + 'px');
}, 0);
이 구현에 관한 몇 가지 참고사항은 다음과 같습니다.
- 애플리케이션 크기가 고정되어 있다면 CSS 클래스 '.close'를 사용하고 열기를 하드코딩한 것과 같은 방식으로 닫기 위치를 하드코딩할 수 있었습니다.
- 또한 창의 'left' 속성에 애니메이션을 적용하는 것보다 더 효과적일 수 있는 CSS 'translate'를 사용할 수도 있습니다. 3D 변환에 하드웨어 가속이 사용되는 휴대기기 (예: iOS)에서는 특히 그렇습니다.
- 이 경우에는 수정 전에 원래 위치가 설정되었으므로
setTimeout가 반드시 필요하지는 않습니다. 하지만 브라우저에서 rightPane을 슬라이드하기 직전에 퀴즈를 표시하여 애니메이션을 더 원활하게 만들 수 있습니다.
2.) 설정 대화상자 애니메이션
사용자가 오른쪽의 설정을 클릭하면 설정 대화상자가 화면 하단에 표시되고 아래로 스크롤하여 적절한 섹션으로 이동합니다.
이를 위해 오른쪽 창으로 유사한 전환을 수행했습니다. 시간이 필요했던 유일한 것은 대화상자가 처음 나타날 때의 떨림을 해결하는 것이었습니다.
브라우저에 대화상자 UI를 캐시하도록 지시하기 위해 우리는 결국 한 번 표시하고 이 UI로 스크롤했습니다. 처음에는 display: none로 시도했습니다.
브라우저가 대화상자를 표시할 필요가 없다고 가정했기 때문에 이 접근 방식은 잘못되었습니다.
해결 방법은 초기화 시 z-index: -1로 설정을 표시하여 사용자에게는 보이지 않지만 브라우저에는 표시되도록 하는 것이었습니다.
3.) 퀴즈 성공 또는 잘못된 메시지 애니메이션
세 번째 애니메이션은 사실 2장입니다. '성공' 또는 '잘못된' 메시지가 표시되면 먼저 특정 지점까지 확장하고 조금 기다렸다가 최종적으로 확장했다가 사라집니다. 이를 위해 두 개의 CSS3 애니메이션 스타일이 있으며 webkitTransitionEnd 이벤트에서 JavaScript를 통해 조정합니다.
.quiz-result > div.anim1 {
opacity: 0.8;
-webkit-transform: scale(6,6);
}
.quiz-result > div.anim2{
opacity: 0;
-webkit-transform: scale(9,9);
}
setTimeout(function() {
$msg.addClass("anim1");
$msg.bind("webkitTransitionEnd", function(){
if ($msg.hasClass("anim1")) {
setTimeout(function() {
$msg.removeClass("anim1");
$msg.addClass("anim2");
}, 300);
} else {
$msg.remove();
displayNextItem();
freezeInput = false;
}
});
}, 0);
오디오 태그
사용자가 퀴즈에 답하면 애플리케이션에서 성공 또는 실패 알림음을 울립니다.
간단한 방법은 오디오 태그를 사용하고 거기에서 play()를 호출하는 것이었습니다.
다음 오디오 비트는 애플리케이션의 기본 페이지에 추가됩니다.
<audio id="audioCorrect" src="correct.mp3" preload="auto" autobuffer></audio>
<audio id="audioWrong" src="wrong.mp3" preload="auto" autobuffer></audio>
결론
HTML5는 새로운 유형의 웹, 데스크톱 및 모바일 애플리케이션을 지원합니다. CSS3는 iPad용 MathBoard의 높은 정교함과 밀접하게 일치시키기 위해 애플리케이션의 디자인과 분위기를 맞춤설정하는 데 중요한 역할을 했고, HTML5 저장소는 데이터 지속성에 가장 적합했고, HTML5 오디오의 단순함으로 iPad 앱을 밀접하게 복제할 수 있었습니다.