모바일 웹앱 제작 후기

※ 이 글은 웹킷 기반의 브라우저에서 정상적으로 보임.

프롤로그

흔한 초보 앱 개발자의 개발 과정

1. 도서관에 가서 안드로이드 제작 가이드를 펼침.
2. 자신감 파워 수직 상승!
3. 귀가 후 SDK깔고 파워 어플 제작 시도!
4. hello world! 출력 이후 막힘.
5. 멘붕.
6. SDK 디렉토리 삭제.

 

↓ 여기부터 본문

제작 도구 Tool

모바일 웹앱은 간단하게 구현이 가능. 네이티브 앱에 웹소캣을 삽입하고 HTML 페이지 연결하면 끝. 게다가 웹앱 제작 SDK를 국내 기업에서 만들어서 배포 중이므로. 자바를 전혀 몰라도 됨.

• KTH 앱스프레소
• SKT 코너스톤

국내 것만 해도 두 개나 있음. 엘지텔레콤은 뭐하노...

 

클릭 딜레이 Click delay

웹킷 기반 모바일 브라우저에서 어떤 요소를 터치하면, 그 요소가 활성화 될때까지 약간의 시간지연이 발생. 이유는 onclick 이벤트가 발생하면, 그게 누르기인지 쓸어넘기기인지 뭐 그런 걸 감지할 시간을 브라우저에서 일부러 지연시키기 때문.

이게 웹앱 제작 도중 가장 먼저 날 멘붕시킨 문제였음. 빠릿한 네이티브 앱에 비해 너무 굼뜸.

해결 방법

1. 누르기 이벤트 발생(누른 순간부터 300ms 지연 발생.)
2. 지연 발생 방지.
3. 움직임 없이 때기 발생.
4. 클릭으로 간주.

코드를 직접 작성 할 수도 있지만 대부분의 모바일용 라이브러리에서 .touch()나 .tap() 이벤트가 존재함. 단, 안드로이드 기본 브라우저에서는 여전히 느리고, 크롬이랑 사파리로 실행해야 빠름. 이유는 모름.

참고

1. Google Developers, Ryan Fioravanti, "Creating Fast Buttons for Mobile Web Applications January", (Last updated 5월 17, 2012.)
2. David Kaneda, jQT, (2009–2013)

 

애니메이션 Animation

동적인 앱을 만들기 위해 애니메이션이 필수. 구현 방법은 아래에.

1. JS로 시간 지연을 주면서 값을 서서히 변경.
2. CSS에서 transition이나 animation 값을 설정.
3. <canvas> API 사용.

나는 JS랑 CSS를 섞어서 사용했음. 아래에 안내 애니메이션 예제를 첨부함.

실행

$('#start_animation').click(function(){
	$('#start_animation').hide();
	$('#notice0').fadeIn().animate({top: '+=1em'},500,function(){
		$('#notice1').fadeIn().animate({top: '-=1em'},500,function(){
			$('#notice2').fadeIn(function(){
				$('#notice1').animate({opacity: '0'},250,function(){
					$('#notice2').animate({left: '-150px'},1000,function(){
						$('#notice2').css({left: 170 + $('#ex_animation').offset().left + 'px'}).hide().fadeIn();
						$('#notice1').css({opacity:'1'}).hide().fadeIn(function(){
							$('#notice3').fadeIn().animate({top: '+=1em'},1000,function(){
								$('#notice4').fadeIn();
							});
						});
					});
				});
			});
		});
	});
});

.animation() 메소드 콜백을 반복해서 초기 화면에 도움말을 표시했음. 의외로 아무 문제 없이 잘 되서 놀람.

 

쓸어넘기기 Swipe

네이티브 앱에서 쓸어넘기기가 멋있어서 구현해 보려고 했는데 이미 플러그인 만들어놓은 사람들이 넘쳐남. 원리는 위쪽에 쓴 모바일 터치 이벤트의 응용해서, 누른 채로 포인터가 일정 값 이상 이동하면 쓸어넘기기로 간주하는 것.

#1

#2

#3

쓸어넘기기는 플러그인이 완성 되어있어서 별 생각없이 복붙. 잘 됨. 노력 대비 효과 최고.

참고

1. Skinkers.com, Skinkers, "TouchSwipe"

아 앱 만드는 것보다 후기쓰는게 더 힘드네 ㅡㅡ 에라 모르겠다 1부 끝.

2부에서는 가상키보드 키 입력 조작한 거랑 textarea크기 자동변경, 로컬저장소 사용 등을 시간 나면 쓸 예정.