본문 바로가기

Ionic

Ionic 핵심 개념 - 1. 기본 요소들

해당 글은 Ionic 공식 문서를 제가 이해하기 위해 번역한 글입니다.

( ionicframework.com/docs/core-concepts/fundamentals )

UI Components

아이오닉 프레임워크는 어플리케이션 제작을 위해 재사용가능한 element인 UI component 라이브러리다. Ionic Component들은 HTML, CSS, JAVASCRIPT를 이용하여 만들어졌다. component들은 미리 선언된거지만(pre-built), component들을 우리가 원하는대로 충분히 커스터마이징이 가능하다. 그래서 각각의 앱의 look and feel 대로 만들 수 있다.

 

Adaptive Styling

Adaptive Styling은 Ionic framework가 기본으로 제공하는 기능이다. 이는 개발자들이 플랫폼과 상관없이 하나의 코드로 관리할 수 있게 해준다. 모든 ionic component들은 앱이 실행되는 플랫폼에 맞게 모양을 조정해줍니다. 예를 들어, apple 장치(iphone, ipd)에서는 iOS 디자인 언어를 사용하고, 안드로이드에서는 material design을 사용합니다.

 

Navigation

전통적인 웹은 linear history 를 사용한다. ( 유저가 페이지로 이동하고 뒤로가기 버튼을 누르면 뒤로 가는 ) 

반면, mobile app은 non-linear한 네비게이션을 사용한다. 예를 들면, 탭 인터페이스는 각 탭에 대한 별도의 탐색 스택을 가질수 있으므로 사용자가 탭을 탐색하고 전환 할 때 위치를 잃지 않는다. 

 

Ionic 앱은 모바일 탐색 접근 방식을 채택하여 중첩될 수 있는 병렬 탐색 기록을 지원하는 동시에 웹 개발자에게 익순한 브라우저 스타일 탐색 개념을 유지해준다. 

Native Access

iOS와 안드로이드 둘 다 Ionic app을 랜더링 해주는 webview를 제공하고, native sdk 전체에 접근할 수 있다.

Theming

Ionic framework는 CSS를 사용하여 만들어져 있어 CSS 속성(변수)가 제공하는 유연함을 활용할 수 있다. 이 덕분에 웹 표준을 따르면서 보기 좋은 app을 디자인하기가 매우 쉬워졌다.