하이브리드 모바일 앱 프레임워크, ‘아이오닉’에 대한 모든 것.

아이오닉(Ionic)은 하이브리드 모바일 앱 개발을 위해 만들어진 HTML5 프레임워크입니다. 하이브리드 앱은 네이티브 앱에 비해서 보다 다양한 플랫폼을 지원하고, 서드파티(third party) 코드를 이용할 수 있으며, 출시 기간이 적게 걸린다는 장점을 갖고 있습니다.

간단히 말해, 아이오닉은 프론트엔드에서 앱이 구현되는 모습과 분위기, 그리고 UI 구성요소들을 다룰 수 있는 프론트엔드 UI 프레임워크로 사용할 수 있는데, 이는 네이티브 앱을 위한 부트스트랩(Bootstrap)과 상당히 비슷하다고 할 수 있습니다. 그렇지만 아이오닉을 사용하면, 매끄러운 애니메이션이나 인터랙티브 디자인과 같은 네이티브 앱에서 구현할 수 있는 다양한 구성요소들도 추가할 수 있습니다.

반응형 HTML5 프레임워크들과는 다르게, 안드로이드나 iOS의 개발환경에서만 찾을 수 있는 UI 구성요소와 레이아웃이라 하더라도 아이오닉에서는 사용할 수 있습니다. 그리고 아이오닉이 앱 개발을 위한 HTML5 프레임워크이기 때문에, 스마트폰에서 네이티브 앱으로 실행시키기 위해서는 폰갭(Phonegap)이나 코르도바(Cordova)와 같은 네이티브 래퍼(wrapper)가 필요합니다. 여기서 래퍼란, 작성된 코드를 다른 환경에서 실행될 수 있게 감싸주는(wrap) 일종의 인터페이스 계층을 말합니다.

아이오닉, 하이브리드 앱 개발에서 유리한 이유

아이오닉의 가장 좋은 점은 웹 개발자들이 모바일 앱 개발을 할 수 있게 해준다는 것입니다. 그렇기 때문에 이미 웹 기술에 대해서 알고 있고 웹 어플리케이션을 만들어 본 경험이 있는 개발자라면 아이오닉 앱의 구조를 쉽게 이해할 수 있습니다.

아이오닉을 활용해서 하이브리드 모바일 앱을 개발하는 것은, 마치 네이티브 앱의 껍데기(shell) 위에서 실행되는 웹 페이지를 만드는 것이라고 생각할 수도 있습니다. 즉, 자체적인 어플리케이션 경험을 생성하는 데 사용되는 HTML, CSS, 자바스크립트 등 모든 것을 이용할 수 있죠. 그렇다면 이제부터는, 아이오닉이 가장 효율적인 하이브리드 모바일 앱 프레임워크로 만들어주는 주요한 이유들에 대해서 함께 살펴보도록 하겠습니다.

a. 오픈소스이며 무료이다. 다른 수많은 오픈소스 프레임워크들과는 다르게, 아이오닉은 빠르고 안정적이며, 하이브리드 앱을 네이티브 앱처럼 보이게 만들어줍니다. 모바일 앱을 개발할 때는 비용에 대한 부담도 적지 않은데, 아이오닉은 무료이기 때문에 개발자들이 깃허브(Github)에서 소스코드를 자유롭게 내려 받을 수 있습니다.

b. 기본적인 UI 구성요소들이 놀라운 수준이다. 개발자들이 아이오닉을 사랑하는 이유들은 아주 많은데, 그 중의 하나는 바로 기본적인 UI 구성요소들입니다. 다양한 양식, 필터 목록보기, 네비게이션 메뉴 등을 비롯한 수많은 구성요소들을 기본 설정에서 사용할 수 있습니다.

개발자들은 이런 구성요소들을 일일이 코딩을 하지 않고도, 간단하게 마우스로 끌어와서 맞춤형으로 설정한 다음에, 앱에 추가하면 됩니다. 기본적인 UI 구성요소들도 이미 충분히 깔끔하기는 하지만, CSS 클래스를 포함시켜서 맞춤형으로 설정할 수도 있습니다. 코드를 재사용할 수 있기 때문에, (안드로이드나 iOS 등의) 다른 OS의 플랫폼에서도 사용할 수 있습니다. 따라서 앱 출시 시간을 줄여주게 됩니다.

c. 개발에 도움을 주는 거대한 커뮤니티가 있다. 테크놀로지 분야가 아무리 익숙하고 능숙하게 잘 사용한다 하더라도, 새로운 기술을 배운다는 것은 언제나 어려운 것이 사실입니다. 아이오닉은 코르도바(Cordova)와 앵귤러(Angular)를 기반에 두고 있는데, 이 두 가지는 모두 거대하면서도 활동적인 커뮤니티를 갖고 있습니다. 따라서 도움이 필요할 때는 언제든지 Q&A 웹사이트나 포럼에 질문을 올리면 답변을 얻을 수 있습니다. 그리고 아주 복잡한 사항에 대해서는 관련 서적이나 튜토리얼, 동영상 가이드 등을 참고해서 해결책을 찾을 수도 있습니다.

d. 코르도바 플러그인을 갖추고 있다. 아이오닉이 기본적으로 웹 테크놀로지를 활용해서 놀라운 앱을 만들 수 있는 플랫폼을 제공하기는 하지만, 개발자들은 네이티브 코드나 코르도바 플러그인을 연동해서 더욱 뛰어난 기능을 만들어낼 수도 있습니다. 이러한 플러그인을 함께 활용해서 개발자들은 카메라, 위치정보, 로그 기록 등의 하드웨어와 소프트웨어의 기능에 접근할 수 있습니다. 이는 앱의 성능을 향상시킬 뿐만 아니라, 코드를 좀 더 간결하게 만들어주기도 합니다.

e. 아이오닉으로 만든 앱을 디버깅하기 쉽다. 아이오닉을 이용하면 모바일 앱 테스트가 상당히 쉽습니다. 개발자들은 시뮬레이터로 테스트를 할 수도 있고, 또는 모바일 브라우저에서 테스트를 할 수도 있습니다. 그리고 아이오닉으로 만든 앱은 실제 플랫폼에서의 테스트를 통해서 앱의 특징과 기능들을 실시간으로 검사할 수 있습니다.

아이오닉을 사용한 실제 사례 살펴보기

1. 퍼시피카(Pacifica) : 인지행동치료(Cognitive Behavioral Therapy)

안드로이드와 iOS 환경 모두에서 이용할 수 있는 퍼시피카 앱에는 사용자들의 인지행동(cognitive behavior)을 기반으로 스트레스와 불안감, 우울증 등을 관리하는데 도움이 되는 도구들이 포함되어 있습니다. 이 앱에는 사용자의 기분이나 건강 상태를 추적하고, 긍정적인 그래픽을 보여주며, 사람들의 생각을 분석해 주는 등 사용자들이 조금씩 천천히 정신적인 스트레스에서 벗어날 수 있게 해주는 많은 도구들이 들어 있습니다. 또한, 민간단체와 공공 커뮤니티를 통해서 사용자들끼리 친목을 다질 수 있는 기능도 있습니다.

2. TD 트레이딩(TD Trading) : 주식거래

아이폰에서 이용할 수 있는 TD 트레이딩 앱은 아이오닉 프레임워크를 활용해서 다시 디자인을 한 것입니다. 이 앱을 이용하면 주식과 펀드 등에 투자를 할 수 있습니다. 사용자들은 자신의 포트폴리오를 추적하고, 주문 현황을 볼 수 있으며, 모니터링하고자 하는 주식의 리스트를 생성할 수도 있습니다.

3. 스워킷(Sworkit) : 운동 및 피트니스 플랜

스워킷에서는 160개가 넘는 동영상을 통해서 요가, 스트레칭, 심폐운동 등에 대한 시범을 보여주고 있습니다. 그리고 이런 동작들은 아무런 도구 없이도 할 수 있습니다. 스워킷은 플레이스토어와 앱스토어에서 건강 및 피트니스 분야의 앱으로 여러 차례 소개되기도 했습니다. 그리고 지금까지 2500만회 넘게 다운로드 되었습니다.

4. 마켓워치(MarketWatch) : 주식시장 및 비즈니스 뉴스

안드로이드와 iOS 환경에서 이용할 수 있는 마켓워치는 아이오닉을 활용해서 만든 앱으로, 주식시장, 금융, 비즈니스에 관련된 최신 뉴스를 전달해 줍니다. 사용자들은 언제든 이 앱에 접속해서 주식 시세와 기업 뉴스를 비롯해서, 개인 금융에 대한 조언까지도 손끝에서 얻을 수 있습니다.

5. 셰프스텝스(ChefSteps) : 요리 튜토리얼 및 조리도구

셰프스텝스는 요리를 사랑하는 사람들이 레시피를 검색하고, 동영상을 찾아보고, 조리도구를 구할 수 있는 플랫폼입니다. 안드로이드와 iOS에서 이용할 수 있으며, 사용자들은 언제든지 동영상 튜토리얼을 찾아보고, 레시피를 읽을 수 있으며, 요리를 도와줄 조리도구도 구입할 수 있습니다. 이 모든 것이 HTML5와 CSS, 자바스크립트를 통해서 구현되었습니다.

6. 네이션와이드(Nationwide) : 보험 및 금융 서비스

네이션와이드는 세계 최대의 보험 및 금융 서비스 기업들 가운데 하나입니다. 아이오닉을 이용해서 만든 이들의 모바일 앱을 통해서 사용자들은 보험료를 지불하고, 보험 중개인과 연락을 취하며, 자동차 보험 견적서를 받아보고, 보험료를 청구하는 등의 업무를 할 수 있습니다.

7. 저스트워치(JustWatch) : 스트리밍 검색엔진

저스트워치는 다양한 온라인 스트리밍 채널을 통해서 서비스 되는 TV 프로그램과 영화를 검색할 수 있는 검색엔진입니다. 안드로이드와 iOS에서 이용할 수 있으며, 역시 아이오닉을 이용해서 만들어진 앱입니다. 현재 저스트워치에서는 훌루(Hulu), 넷플릭스(Netflix), 엑스박스(XBOX), 아이튠즈(iTunes), 무비(Mubi) 등의 온라인 플랫폼 서비스를 검색할 수 있습니다.

> 이 글은 ‘10 Popular Hybrid Apps that are Built Using Ionic Framework’과
‘Hybrid Mobile App Framework: Why Ionic is the Most Favorable Choice’을 각색하여 작성되었습니다.