모바일 웹 애플리케이션 개발: 언제, 왜, 어떻게

지구에는 68억 명의 사람들이 있으며 그 중 51억 명이 휴대전화를 소유하고 있습니다. 그리고 오늘날 이러한 기기 중 스마트폰이 차지하는 비중이 계속 증가하고 있습니다. 최근 Pew Research Center 연구에 따르면 스마트폰으로 인터넷에 액세스하는 사용자의 수가 지난 5년 동안 두 배 이상 증가했으며 모바일 앱을 다운로드하고 사용하는 사용자의 수도 증가했습니다. 휴대전화로 인터넷이나 이메일을 사용하는 사람들 중 3분의 1 이상이 주로 휴대기기를 통해 온라인에 접속합니다.

실제로, 모바일 컴퓨팅은 점점 더 보편화되고 있습니다... 그리고 정말 대단합니다.

물론 그렇지 않을 때를 제외하고.

모바일 장치 사용자로서 제대로 디자인되지 않은 모바일 웹 앱이나 기본 앱만큼 답답하고 어려운 것은 거의 없습니다.

그리고 모바일 앱 개발자로서 가능한 한 다양한 모바일 클라이언트를 지원하기 위해 애쓰는 것만큼 짜증나는 일은 거의 없습니다. 모바일 웹, 기본 또는 하이브리드 앱을 개발하기로 선택했는지 여부에 관계없이 여러 모바일 브라우저, 더 이국적인 장치를 지원하고 다양한 플랫폼을 파악하는 것은 참으로 고통스러운 경험이 될 수 있습니다.

물론 오늘날 모든 개발자가 모바일 클라이언트 지원에 대해 걱정할 필요는 없습니다. 그러나 점점 더 편재하는 모바일 장치 및 응용 프로그램의 특성은 오늘날 모바일 클라이언트를 지원할 필요가 없는 사람들이 멀지 않은 미래에 모바일 클라이언트를 지원할 필요가 더 많아질 것임을 강력하게 시사합니다. 따라서 모바일 앱 개발에 대해 아직 생각하고 있지 않다면 아마도 그렇게 해야 할 것입니다.

모바일 웹 앱 vs. 네이티브 앱 vs. 하이브리드 앱

대부분의 기술 선택이 그러하듯이, 개발할 모바일 앱의 유형과 관련하여 모든 경우에 적용되는 정답은 없습니다. 고려해야 할 수많은 웹 앱 모범 사례가 있지만 모두 기술적인 것은 아닙니다. 타겟 고객은 누구입니까? 모바일 웹이나 기본 앱을 더 선호합니까? 네이티브 앱과 하이브리드 앱의 차이점은 무엇인가요? 어떤 개발 리소스가 있으며 어떤 모바일 기술이 가장 친숙합니까? 제품에 대해 구상하고 있는 라이선스 및 판매 모델은 무엇입니까?

일반적으로 말해서(항상 예외가 있긴 하지만) 모바일 웹 앱 경로는 기본 모바일 앱 경로보다 빠르고 저렴합니다. 특히 광범위한 장치를 지원하는 것이 목표인 경우에는 더욱 그렇습니다. 반대로, 앱에 필수적이지만 기본 앱을 통해서만 액세스할 수 있는 모바일 장치 고유의 기능(예: 움직임 센서 등)이 있을 수 있습니다. 당신을 위한 스타터).

그리고 기존 웹 앱과 기본 앱의 문제를 넘어서 요구 사항과 리소스 제약 조건에 따라 하이브리드 모바일 앱이 올바른 답이 될 수 있습니다. 네이티브 앱과 같은 하이브리드 앱은 브라우저 내부가 아닌 기기 자체에서 실행되지만 웹 기술(HTML5, CSS 및 JavaScript)로 작성되며 일반적으로 하이브리드 앱 프레임워크에 의해 뒷받침됩니다. 보다 구체적으로 말하면 하이브리드 앱은 기본 컨테이너 내에서 실행되며 장치의 브라우저 엔진(브라우저 제외)을 활용하여 HTML을 렌더링하고 JavaScript를 로컬에서 처리합니다. 웹-네이티브 추상화 계층을 사용하면 가속도계, 카메라 및 로컬 저장소와 같은 모바일 웹 애플리케이션에서 액세스할 수 없는 장치 기능에 액세스할 수 있습니다.

그러나 모바일 웹 앱이든 네이티브 앱이든 하이브리드 앱이든 어떤 선택을 하든 신중하게 가정을 적절하게 조사하고 확인합니다. 예를 들어 이 모바일 웹 앱 개발 자습서의 목적을 위해 전자 상거래용 기본 모바일 앱을 개발하여 제품을 판매하기로 결정했을 수 있습니다. 그러나 Hubspot에 따르면 스마트폰 사용자의 73%는 쇼핑을 할 때 기본 앱보다 모바일 웹을 더 많이 사용한다고 말합니다. 따라서 이 경우에는 잘못된 선택을 했을 수 있습니다.

그리고 물론, 시간과 예산의 실질적인 고려 사항이 있습니다. 내가 가장 좋아하는 말 중 하나가 "더 빠르고, 더 좋고, 더 싸고... 둘 중 하나를 선택하십시오" 입니다. 시장 출시 시간과 비용 제약은 웹 애플리케이션 개발에서 가장 중요하지만 프로세스에서 품질을 너무 많이 타협하지 않는 것이 중요합니다. 첫 경험이 좋지 않은 사용자의 자신감을 회복하는 것은 상당히 어렵습니다.

실제로 모바일 웹, 네이티브 및 하이브리드 앱은 모두 근본적으로 다른 짐승이며 각각 고유한 이점과 과제가 있습니다. 이 모바일 웹 개발 튜토리얼은 기능이 뛰어나고 직관적이며 사용하기 쉬운 모바일 웹 애플리케이션을 개발할 때 사용하는 방법론과 도구, 피해야 할 함정에 특히 중점을 둡니다.

모바일 웹 앱 개발에는 세부적인 계획이 필요합니다.

귀하(또는 귀하의 고객) 요구 사항을 식별하는 것은 모바일 또는 기타 앱 개발에서 가장 필수적인 모범 사례 중 하나입니다. 대상 기능을 주의 깊게 조사하여 모바일 웹 앱에서 달성 가능한지 확인하십시오. 웹 기반 인터페이스 및 지원 인프라를 설계하는 데 이미 시간과 리소스를 투자했는데도 하나 이상의 필수 클라이언트 기능이 지원되지 않는다는 사실을 깨닫는 것은 매우 실망스럽고 매우 비생산적입니다.

모바일 웹 앱 개발자 초보자가 흔히 겪는 또 다른 문제는 데스크톱 브라우저용 웹 기반 코드가 모바일 브라우저에서 "있는 그대로" 작동한다고 가정하는 것입니다. 아니다. 가장 확실히 차이점이 있으며, 만약 당신이 그것들을 인식하지 못한다면, 그것들은 확실히 당신을 물 수 있습니다. 예를 들어 HTML5 <video> 태그의 자동 재생 기능은 모바일 브라우저에서 작동하지 않습니다. 마찬가지로, CSS transition 및 opacity 속성은 오늘날 대부분의 모바일 브라우저에서 지원되지 않습니다(또는 적어도 일관되게 지원되지 않음). 또한 대부분의 모바일 장치에서 지원되지 않는 Adobe Flash가 필요한 SoundCloud 음악 스트리밍 API와 같은 모바일 플랫폼의 일부 웹 API 방법에 문제가 있습니다.

모바일 웹 애플리케이션 개발에서 특히 복잡한 요소는 모바일 장치의 수명이 데스크톱 디스플레이의 수명보다 훨씬 짧은 경향이 있다는 것입니다(미국에서 휴대폰의 평균 수명은 약 21개월입니다). 새로운 모바일 장치 및 기술의 지속적인 출시와 함께 이러한 짧은 장치 수명은 목표로 삼는 장치의 환경을 끊임없이 변화시킵니다. 브라우저에서 작업하면 여러 장치별 문제로부터 사용자를 보호하여 이 문제를 어느 정도 완화할 수 있지만 여전히 다양한 화면 해상도를 지원하는 브라우저 기반 보기를 설계해야 합니다(가로 및 세로 방향에 대해 적절하게 조정). ).

Apple의 Retina 디스플레이(인간의 눈이 일반적인 보기 거리에서 개별 픽셀을 식별할 수 없을 만큼 충분히 높은 픽셀 밀도를 갖는 액정 디스플레이) 지원에 대해서도 고려해야 합니다. iPhone, iPod Touch, iPad, MacBook Pro, iPad Mini, iPad Air를 비롯한 여러 Apple 제품에서 Retina 디스플레이를 제공합니다. 특히 모바일 웹 앱의 경우 Retina 디스플레이가 저해상도 이미지(일반적으로 모바일 장치에 제공됨)를 흐릿하게 만들고 픽셀화가 발생할 수 있다는 점을 인식하는 것이 중요합니다. 이러한 경우 최고의 앱 개발 솔루션은 요청이 Retina 장치에서 오는 것임을 서버가 인식하고 클라이언트에 대체 고해상도 이미지를 제공하도록 하는 것입니다.

멋진 HTML5 기능을 사용하고 싶다면 찾고 있는 기능이 고객이 사용할 가능성이 높은 기기 전반에 걸쳐 지원되는지 미리 확인해야 합니다. 예를 들어 iOS 6 이상에서는 기본 앱을 통해서만 카메라에 액세스할 수 있으므로 내비게이터 getUserMedia 기능에 대한 지원이 없습니다. 특정 장치 및 브라우저에서 지원되는 항목을 확인하기 위한 두 가지 훌륭한 리소스는 caniuse.com 및 html5test.com입니다.

CSS3 미디어 쿼리는 또한 각 장치에 대한 맞춤형 콘텐츠를 제공하는 데 도움이 될 수 있습니다. 다음은 픽셀 밀도, 화면 해상도 및 방향과 같은 다양한 장치 특성을 캡처하기 위한 몇 가지 예제 코드입니다.

 /* For lower than 700px resolutions */ @media (max-width: 700px) { ... } /* Same as last but with the device orientation on land scape */ @media (max-width: 700px) and (orientation: landscape) { ... } /* Including width and orientation you can add a media type clause, in this case 'tv' */ @media tv and (min-width: 700px) and (orientation: landscape) { ... } /* for low resolution display with background-image */ .image { background-image: url(/path/to/my/image.png); background-size: 200px 300px; height: 300px; width: 200px; } /* for high resolution (Retina) display with background-image */ @media only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { -repeat; background-size: 200px 400px; /* rest of your styles... */ } }

성능을 위한 모바일 웹 애플리케이션 최적화

"어머, 이거 너무 느리다!" 모바일 웹 앱 개발자로서 이것은 아마도 사용자 중 한 명에게서 가장 마지막으로 듣고 싶은 말일 것입니다. 따라서 각 바이트 및 서버 전송을 줄이고 최적화하여 사용자의 대기 시간을 줄이는 방법에 대해 신중하게 생각해야 합니다. 전송이 항상 Wi-Fi 네트워크를 통해 이루어지리라고 기대하는 것은 비현실적이며 모바일 웹 사용자의 60%가 사이트가 3초 이내에 휴대전화에 로드될 것으로 예상한다고 말합니다(출처). 마찬가지로 Google은 로드 시간이 5초 추가될 때마다 트래픽이 20% 감소한다는 것을 발견했습니다(검색 엔진이 페이지 품질 점수 계산의 일부로 로드 시간을 고려한다는 점도 주목할 가치가 있습니다).

이 모바일 웹 앱 개발 자습서의 일부로 다음은 모바일 웹 애플리케이션의 성능을 최적화하고 대기 시간을 최소화하는 데 도움이 될 수 있는 몇 가지 팁입니다.

• 이미지 최적화. 이미지 로드 시간은 모바일 장치의 페이지 로드에 영향을 미치는 가장 큰 성능 문제 중 하나로 잘 알려져 있습니다. smushit.com과 같은 온라인 이미지 최적화 프로그램을 사용하면 이 문제를 해결하는 데 도움이 될 수 있습니다.
• 코드 압축. 코드의 양에 따라 JavaScript 및 CSS 파일을 압축하면 잠재적으로 성능에 상당한 영향을 미칠 수 있습니다.
• 데이터베이스 쿼리.
  • 일부 모바일 장치 브라우저는 데스크톱 브라우저만큼 많은 쿠키를 허용하지 않으므로 평소보다 더 많은 쿼리를 실행해야 할 수 있습니다. 따라서 서버 측 캐싱은 모바일 웹 앱 클라이언트를 지원할 때 특히 중요합니다.
  • 사이트와 서버의 보안을 손상시킬 수 있는 SQL 쿼리 삽입을 방지하기 위해 적절한 필터를 사용하는 것을 잊지 마십시오.
• 콘텐츠 전송 네트워크(CDN). 많은 비디오, 이미지, 오디오 파일 또는 기타 유형의 미디어를 제공할 계획이라면 CDN을 사용하는 것이 좋습니다. 보다 일반적인 상용 CDN에는 Amazon S3, Microsoft Windows Azure 및 MaxCDN이 있습니다. CDN을 사용하면 다음과 같은 이점이 있습니다.
  • 다운로드 성능이 향상되었습니다. CDN의 리소스를 활용하면 부하를 분산하고 대역폭을 절약하며 성능을 높일 수 있습니다. 더 나은 CDN은 더 높은 가용성, 더 낮은 네트워크 대기 시간 및 더 낮은 패킷 손실을 제공합니다. 또한 많은 CDN은 전 세계적으로 분산된 데이터 센터 선택을 제공하여 사용자 위치에 더 가까운 서버에서 다운로드가 발생하도록 합니다(결과적으로 더 적은 네트워크 홉 및 더 빠른 다운로드).
  • 더 많은 동시 다운로드. 브라우저는 일반적으로 단일 도메인에 대한 동시 연결 수를 제한하며 이후에는 이전 다운로드 중 하나가 완료될 때까지 추가 다운로드가 차단됩니다. 동일한 사이트에서 많은 대용량 파일을 다운로드할 때 이 제한이 작동하는 것을 종종 볼 수 있습니다. 각각의 추가 CDN(다른 도메인에 있음)은 추가 동시 다운로드를 허용합니다.
  • 향상된 분석. 많은 상업용 CDN은 자체 웹사이트 분석을 보완할 수 있는 사용 보고서를 제공하고 비디오 조회수 및 다운로드 수를 더 잘 정량화할 수 있습니다. 예를 들어 GTmetrix에는 사이트에 로드된 소스를 모니터링하고 최적화하기 위한 뛰어난 웹사이트 보고 도구가 있습니다.

모바일 웹 앱 개발 도구

"올바른 작업을 위한 올바른 도구" 는 다른 영역과 마찬가지로 소프트웨어 개발에도 적용되는 오래된 격언입니다. 이 튜토리얼은 모바일 웹 앱 개발을 위해 더 인기 있고 널리 사용되는 도구를 제공하고 소개하지만, 다음에 따라 모바일 웹 애플리케이션을 개발하는 데 "올바른" 도구가 있을 수 있다는 점을 염두에 두십시오. 귀하의 요구 사항 및 사용 가능한 리소스.

올바른 JavaScript 모바일 웹 앱 프레임워크 선택하기

모바일 웹 앱 개발은 브라우저 간 호환성, 모바일 브라우저의 일관성 없는 HTML 및 CSS와 같은 많은 공통 문제를 발생시키는 경향이 있으므로 이러한 문제를 해결하고 이러한 문제를 해결하기 위해 특별히 설계된 프레임워크(HTML5 및 CSS3 기반)가 개발되었습니다. 다양한 스마트폰과 태블릿에서 가능한 한 완벽하게 작동합니다. 이러한 모바일 웹 앱 프레임워크의 대부분은 가벼우므로 사이트의 모양과 느낌을 손상시키지 않으면서 빠른 모바일 웹 브라우징을 용이하게 합니다.

모바일 환경 너머로 시야를 넓히면 언급할 가치가 있는 인기 있는 단일 JavaScript 프레임워크가 있다면 바로 jQuery입니다. 데스크탑 버전에 익숙하다면 모바일 웹 앱용 jQuery Mobile을 사용해 보는 것이 좋습니다. 의미론적 마크업을 제스처 친화적인 형식으로 변환하는 위젯 라이브러리가 있어 터치 스크린에서 쉽게 작업할 수 있습니다. 최신 버전은 UI를 실제로 향상시킬 수 있는 많은 그래픽 요소로 펀치를 포장하는 정말 가벼운 코드 기반으로 구성되어 있습니다.

또 다른 대안인 센차 터치(Sencha Touch)도 빠르게 시장 점유율을 확보하고 있다. 전반적으로 우수한 성능을 제공하며 기본 인터페이스처럼 보이고 느껴지는 모바일 웹 사용자 인터페이스를 생성하는 데 도움이 됩니다. 모든 기능을 갖춘 위젯 라이브러리는 Sencha의 ExtJS JavaScript 라이브러리를 기반으로 합니다.

다음은 jQuery Mobile과 Sencha Touch를 비교할 때 고려해야 할 몇 가지 주요 차이점입니다.

• 보고 느끼다. 일반적으로 Sencha Touch 앱의 모양과 느낌은 jQuery 모바일 앱보다 더 선명하고 우수하지만 이러한 반응은 매우 주관적인 경향이 있음을 기억하는 것이 중요합니다.
• 확장성. jQuery Mobile은 많은 제3자 확장을 제공하고 본질적으로 고도로 확장 가능하도록 설계되었지만 Sencha Touch는 현재 훨씬 더 "닫힌" 프레임워크입니다.
• 장치 지원. jQuery Mobile은 현재 Sencha Touch보다 더 큰 기기 단면을 대상으로 합니다.
• HTML "대" 자바스크립트. jQuery는 대부분 HTML 중심(예: JavaScript에서 기존 HTML 확장 및 조작)인 반면 Sencha Touch 코딩은 완전히 JavaScript 기반입니다. (이는 기술을 선택할 때 고려해야 하는 중요한 개발 팀의 기술 집합의 예입니다.)
• 외부 종속성. jQuery 모바일은 DOM 조작을 위해 jQuery와 jQuery UI가 필요하지만 Sencha Touch에는 외부 종속성이 없습니다.
• 학습 곡선. 대부분의 개발자는 jQuery를 사용한 램프업 시간이 Sencha Touch의 램프업 시간보다 짧다고 생각합니다. 아마도 표준 jQuery 라이브러리에 이미 친숙한 웹 개발자의 상당수가 이를 뒷받침할 것입니다.

반응형 프레임워크 및 모바일 웹 애플리케이션

최근 몇 년 동안 반응형 프레임워크의 수가 증가하기 시작했으며 현재 가장 인기 있는 두 가지는 Bootstrap과 Foundation입니다. 간단히 말해서 반응형 프레임워크는 웹 기반 반응형 UI 디자인 및 구현을 단순화하고 간소화하여 가장 일반적인 레이아웃과 UI 패러다임을 재사용 가능한 성능 최적화 프레임워크로 캡슐화합니다. 대부분 CSS와 JavaScript를 기반으로 하는 이러한 프레임워크 중 상당수는 오픈 소스이며 무료로 다운로드할 수 있으며 쉽게 사용자 지정할 수 있습니다. 매우 독특한 요구 사항 집합이 없는 한 이러한 프레임워크 중 하나를 사용하면 모바일 웹 애플리케이션을 설계하고 구현하는 데 드는 노력이 줄어들 것입니다.

Bootstrap과 Foundation의 두 가지 주요 옵션을 살펴보면 고려해야 할 몇 가지 주요 차이점은 다음과 같습니다.

• 타겟 플랫폼. Bootstrap은 모바일, 태블릿 및 데스크탑 장치를 지원하지만 주로 데스크탑 사용을 지향합니다. 반면에 Foundation은 기본적으로 모든 화면 크기와 유형에 맞게 설계되었습니다.
• 브라우저 호환성. Bootstrap은 IE7 이상과 호환되지만 Foundation은 IE9 이상과만 호환됩니다.
• 레이아웃 및 구성 요소의 다양성. Bootstrap에는 Foundation에서 제공하는 것보다 훨씬 더 많은 UI 요소 컬렉션이 있습니다.
• 자동 크기 조정. Foundation을 사용하면 현재 브라우저 높이와 너비에 따라 그리드가 줄어들고 늘어나는 반면 Bootstrap은 표준 화면 크기 세트를 기반으로 미리 정의된 그리드 크기 세트만 지원합니다.

모바일 웹 앱 디버깅 및 테스트

모바일 웹 앱을 디버깅하는 것은 까다롭고 다소 실망스러울 수 있습니다. 특히 대상 클라이언트 플랫폼의 (일반적으로 불완전한) 에뮬레이션을 위해 여러 장치에서 테스트하거나 SDK를 설치해야 하는 경우에는 더욱 그렇습니다.

이러한 맥락에서 모바일 웹 개발(네이티브 앱 개발과 비교)의 한 가지 분명한 이점은 표준 브라우저 기반 개발자 도구를 활용하여 애플리케이션을 디버깅할 수 있다는 것입니다. 원격 디버깅에 대한 개인적인 선호도에 따라 이 앱 개발 자습서에서 권장하는 것은 DevTools가 포함된 Chrome입니다. 다른 표준 옵션에는 Firebug가 포함된 Firefox 또는 Opera의 Dragonfly 도구가 있습니다.

DevTools가 있는 Chrome을 선호하는 몇 가지 이유는 다음과 같습니다.

• Chrome DevTools의 모바일 에뮬레이터. 이것은 아마도 모바일 웹 앱의 디버깅을 위해 Chrome을 선택하는 충분한 이유일 것입니다. 주요 기능에는 터치 이벤트 에뮬레이션, 사용자 에이전트 스푸핑, 네트워크 대역폭 조절, 지리적 위치 재정의, 장치 방향 재정의 및 CSS 미디어 유형 에뮬레이션이 있습니다.
• 대화형 편집기. JavaScript 또는 CSS를 즉석에서 편집하는 기능.
• 우수한 JavaScript 디버거. DOM 중단점을 허용하고 JavaScript 코드 실행 시간을 프로파일링하는 기능을 제공합니다.
• 내장 JSON 및 XML 뷰어. 플러그인이 서버 응답을 검사할 필요가 없습니다.
• USB를 통해 직접 Android 디버그 브리지(ADB) 프로토콜을 지원합니다. 원격 디버깅 세션을 쉽게 인스턴스화할 수 있습니다. (다음은 Chrome에서 원격 디버깅을 시작하는 방법에 대한 Google의 좋은 자습서입니다.)
• 자원의 동적 검사. IndexedDB 또는 Web SQL 데이터베이스, 로컬 및 세션 저장소, 쿠키, 애플리케이션 캐시 리소스를 비롯한 앱의 로컬 데이터 소스를 검사할 수 있습니다. 또한 이미지, 글꼴 및 스타일 시트를 포함한 애플리케이션의 시각적 리소스를 빠르게 검사할 수 있습니다.

웹 앱의 레이아웃 및 크로스 브라우징 호환성을 테스트하기 위해 BrowserStack과 같은 몇 가지 유용한 온라인 도구를 사용할 수도 있습니다. 애플리케이션의 URL을 입력하고 브라우저, 버전 및 운영 체제를 선택하기만 하면 해당 환경에서 사이트의 에뮬레이트 보기(및 로드 속도)를 얻을 수 있습니다. 이 목적을 위한 또 다른 유용한 도구는 CrossBrowserTesting입니다.

마무리

현재 시장에 나와 있고 사용 중인 모바일 장치의 수, 다양성 및 정교함이 계속해서 급속하게 확장됨에 따라 효과적이고 사용자 친화적인 고성능 모바일 응용 프로그램에 대한 요구가 상당히 증가할 것입니다. 따라서 이러한 애플리케이션을 지능적이고 효율적으로 개발할 수 있는 능력은 계속해서 가장 중요합니다.

모바일 장치용 웹, 기본 및 하이브리드 모바일 앱 옵션 중에서 선택할 때 많은 요소를 고려해야 합니다. 각각 고유한 장점이 있지만 모바일 웹 앱은 종종 가장 효율적인 개발(따라서 출시 시간) 옵션을 나타냅니다. 그 길을 선택했다면 이 모바일 웹 앱 개발 튜토리얼이 목적지에 더 직접적이고 성공적으로 도달하는 데 도움이 되기를 바랍니다.