모바일 웹앱을 만드는 좋은 방법: 팁과 기술

원제: Building Mobile Web Apps the Right Way: Tips and Techniques

(기사에서는 웹앱 개발이 필요한 이유와 개발 시 고려해야 할 이슈에 대해서 논하고 있지만 익히 들어온 내용이라 해당 내용은 하단의 요약에 정리한 것을 참고 하시기 바랍니다. 결론은 제가 생각하고 있는 웹앱 개발에 필요한 고려이슈 ‘fallback mechanism’에 대해서 얘기하려 합니다.)

Fallback Mechanism 라이브러리 구축

HTML5, CSS3, 그리고 “미디어 쿼리”등 최신 기술을 이용하면 끝내주는 웹앱을 개발할 수 있습니다. 자~ 이제 이 기술을 이용해서 웹앱만 만들면 끝날 것 같습니다. 그럴까요? 아닙니다. 다음 문제가 해결 되야 합니다.

Q: 모든 브라우저에서 똑같이 동작하는가?

아닙니다. 옛날 폰은 물론이고 안드로이드 폰, 아이폰 일지라도 OS 버전에 따라 지원하거나 안될 수 있습니다. 그럼 이 기술을 쓰지 말아야 할까요? 이것도 아닙니다. 그러기에 이 기술들은 너무 매력적이고 환상적입니다.

그래서 fallback mechanism이 필요합니다. 기사에서 툴바를 설명하며 다뤘던 것처럼 개발된 기술이 정상 동작할 수 있는 환경에서는 이를 이용하되 그렇지 못한 환경에서도 유사하게 동작할 수 있게 대안을 제시해야 합니다.

폰에 따라 다른 브라우저, 그리고 OS에 따라 다른 동작(렌더링 등)을 하는 환경에서 개발자 혼자 완벽한 fallback mechanism을 만드는 것은 어려울 것 입니다. 시간이 없어 몇 개의 타겟 단말로 테스트를 할 뿐만 아니라 귀찮다고 생각되 차치하고 넘어갈 가능성이 큽니다.

저희 kth 에서도 사내에서 진행됐던  ‘Eliot’ 행사를 통해 아주 멋진 라이브러리(?)를 만들어 중복 작업 및 개발 시간을 줄 일 수 있는 프로젝트를 진행하고 있다는걸 공유 했는데 이와 유사한 형태로 fallback mechanism 관련해서도 라이브러리를 구축할 필요가 있습니다.

이는 웹앱 개발에 필요한 시간을 단축하고 더욱 Detail에 집중한 완성도 높은 웹앱이 개발될 수 있을 것이라 생각합니다.

 

기사 요약

모바일 웹앱을 개발은 더 이상 선택이 아니고 필수가 되어가고 있습니다. 스마트폰이 없는 사용자가 없을 정도인 지금에 모바일을 플랫폼으로 접근하고 이에 대응되는 다양한 웹앱을 개발할 수 있습니다. 그럼 데스크탑과 다른 환경인 모바일 웹앱을 만들 때 고려가 필요한 점은 다음과 같습니다.

1. 이미지 개수, 사이즈를 줄여라
   1. 이미지를 사용하기 보다는 CSS3를 이용 (다운로드 이미지 개수 감소)
   2. 이미지의 사이즈를 줄여라 (transparent PNGs의 경우 파이어웍스, 이미지알파를 이용해서 그 사이즈를 줄여라)
2. 하드웨어 가속
   1. 사파리 5, 파이어폭스 4, 크롬 10, 오페라 11에서 하드웨어 가속 지원. (하드웨어 가속이란 그래픽 작업을 하는 GPU(Graphic Processing Unit)을 브라우저 렌더링 및 transition 작업에 이용해 성능을 향상하는 기능)
   2. 아직 모바일 버전의 브라우저는 지원하지 않음. (역주: 향후 모바일 버전이 지원될 경우 사용자 경험 증대에 지대한 역할을 할 것으로 생각됨)
3. CSS3 렌더링 성능
   1. CSS3는 환상적인 기능을 제공하지만 특정 기능은 페이지 로딩 성능을 떨어뜨릴 수 있음
   2. 예) shadow in 웹킷 기반 브라우저, opacity in 사파리
4. Offline storage를 이용한 사용자 경험 증대
   1. 모바일 사용자는 인터넷 연결이 불안. 서비스 제공 시에 많은 데이터 전송은 모바일 환경에 적합하지 않음
   2. 자주 변하지 않는 템플릿성 자원은 모바일 단말에 저장. 향후 서비스 시 cache 형태로 서비스에서 이용. 인터넷 연결 비용을 최소화

 

덧 – 본문 번역 전체를 아래에 추가하려고 했는데 원게시자인 Sixrevisions 측에서 번역글 게재를 불허해서 아쉽게도 올리지 못했습니다. 원글이 너무 좋아서 전체글 번역까지 했는데 아쉽게 되었네요. 저희 회사내에만 공유 되었습니다. ^^




---------------------------------------------------------------------------------

글쓴이 : kth 웹서비스 개발팀 서승호  : July 6, 2011
KTH 웹서비스 개발팀 서승호입니다. 웹 애플리케이션(server + client)에 대해 A to Z 마스터가 목표입니다. 최근에는 어떻게 하면 보기 좋은 코드를 만들고 편하게 만드는 방법을 공부하고 있습니다.

기사원문  -> http://dev.paran.com/2011/07/06/building-mobile-web-apps-the-right-way-tips-and-techniques/