Ionic 앱 개발이 생판 처음이신 분들을 위해, 프로젝트 뒤의 핵심 철학, 개념, 도구에 대한 고차원의 이해를 하면 도움이 될 수 있습니다. 복잡한 주제에 들어가기 전에, Ionic 프레임워크가 무엇인지, 어떻게 작동하는지와 같은 기초를 다루겠습니다.

UI 컴포넌트

Ionic 프레임워크는 애플리케이션을 만드는 조각으로 제공되는 재사용 가능한 요소인 UI 컴포넌트 라이브러리입니다. Ionic 컴포넌트는 HTML, CSS, JavaScript를 사용하여 웹 표준으로 만들어졌습니다. 컴포넌트는 미리 만들어진 것이지만, 고도의 커스터마이징이 가능하여 앱은 쉽게 고유의 컴포넌트를 만들 수 있고, 고유한 외관과 느낌을 갖게 합니다. 더 자세히 말하자면, Ionic 컴포넌트는 전체앱에 걸쳐서 외관을 바꿀 수 있는 테마 적용이 쉽습니다. 외관에 대한 커스터마이징 정보는 테마 파트를 참고하세요.

플랫폼 지속성

플랫폼 지속성은 다중 플랫폼에서 앱 개발자가 같은 코드 베이스를  사용할 수 있게 하는 Ionic 프레임워크의 내장 기능입니다. 모든 Ionic 컴포넌트는 앱이 실행되는 플랫폼에 맞는 외관으로 표시됩니다. 예를 들어, iPhone과 iPad와 같은 Apple 장치에서는 Apple의 고유 iOS 디자인 언어를 사용합니다. 비슷하게, Android 장치에서는 Material 디자인이라고 불리는 구글 디자인을 사용합니다.

이러한 플랫폼 사이의 미묘한 디자인 변화를 통해 사용자는 친숙한 앱 환경을 제공받게 됩니다. Apple의 앱 스토어에서 받은 Ionic 앱에서는 iOS 테마로, Android의 플레이 스토어에서 받은 Ionic 앱은 Material 디자인 앱을 사용할 것입니다. 웹 브라우저에서 Progressive Web App (PWA)으로 표시되는 앱에서  Ionic은 기본적으로 Material 디자인 테마를 사용할 것입니다. 더 나아가, 어떤 플랫폼에서 특정 시나리오 하에 무엇을 쓸지는 모두 설정 가능합니다. 플랫폼 지속성에 대한 자세한 정보는 테마에서 찾아보세요.

탐색

지금까지의 웹 앱은 사용자가 페이지 앞으로 진행하고, 뒤로 가기 버튼을 눌러 뒤로 탐색하는 선형 히스토리를 사용해왔습니다. Wikipedia에서 돌아다니는 것을 예로 들면, 사용자는 브라우저의 선형 히스토리 스택 상에서 앞이나 뒤로 이동하게 됩니다.

이와 대조적으로, 모바일 앱은 특화된 병렬, “비선형” 탐색을 주로 사용합니다. 예를 들어, 탭 인터페이스는 각 탭에 대해 구분된 탐색이 가능하게 하여, 사용자가 현위치를 유지하면서 탭 사이를 탐색하고 전화할 수 있게 합니다.

Ionic 앱은 웹 개발자들이 친숙한 브라우저 스타일의 탐색 개념도 지원하는 한편, 병렬 탐색 히스토리를 지원하는 것도 포함하여 이러한 모바일 앱 탐색 접근을 받아들였습니다.

Angular와 @ionic/angular로 개발된 앱에 대해서는 모든 Ionic 4 Angular 앱에 처음부터 따라오는 Angular 라우터룰 사용하기를 권합니다. 이전 버전의 Ionic은 고유의 커스텀 라우터를 탑재하였지만, 최고의 도구와 개발자 경험을 제공하기 위해서 이제 프레임워크의 권장 라우터를 사용하게 되었습니다.

네이티브 접근

웹 기술을 사용하여 빌드된 앱(Ionic 앱과 같은!)의 놀라운 기능은 데스크톱 컴퓨터, 폰, 태블릿, 자동차, 냉장고 등 모든 플랫폼에서 가상으로 구동될 수 있다는 것입니다.  Ionic 앱의 같은 코드 베이스는 웹 표준과 이들 플랫폼에서 공유된 공통 API에 기반하기 때문에 많은 플랫폼에서 작동 가능합니다.

가장 흔한 사용 케이스 중 하는 Ionic으로 앱 스토어와 플레이 스토어 양쪽에서 받을 수 있는 앱을 만드는 것입니다. iOS와 Android 소프트웨어 개발 키트 (SDK)는 어떤 Ionic 앱이든 렌더할 수 있는 “웹 뷰”를 제공하는 한편, 완전한 네이티브 SDK 접근도 가능하게 해줍니다.

Capacitor나 Cordova 같은 프로젝트는 Ionic 앱이 네이티브 SDK에 대한 접근을 제공하는데 널리 쓰입니다. 다시 말해, 장치의 가속도계, 카메라, GPS 등에 대한 네이티브 기능 접근을 가지면서도, 공통 웹 개발 도구를 사용하여 빠르게 앱을 빌드할 수 있다는 것입니다.

테마

코어 Ionic 프레임워크는 CSS 프로퍼티 (변수)를 제공하여 유연함(flexibility)을 가진 CSS로 만들어졌습니다. 이것이 웹 표준을 준수하면서 앱을 엄청 빠르게 디자인할 수 있게 했습니다. 몇 가지 뛰어난 기본값으로서 개발자에게 색상 선택지를 제공하면서도, 그걸 새로 구현하여 브랜드나 회사의 디자인을 만들거나 원하는 색상 팔레트로 만들어내는 것 또한 권장합니다. 앱의 배경 색상 부터 텍스트 색상까지 모두 사용자 지정이 가능합니다. 테마에 대한 자세한 정보는 테마 문서를 참고하세요.