맨위로가기

아이오닉 (모바일 앱 프레임워크)

"오늘의AI위키"는 AI 기술로 일관성 있고 체계적인 최신 지식을 제공하는 혁신 플랫폼입니다.
"오늘의AI위키"의 AI를 통해 더욱 풍부하고 폭넓은 지식 경험을 누리세요.

1. 개요

아이오닉은 2013년 Drifty Co.에 의해 개발된 모바일 앱 프레임워크이다. 안드로이드, iOS, Windows, 데스크톱 및 최신 브라우저를 대상으로 하는 앱을 구축할 수 있으며, 아파치 코르도바 또는 Capacitor 플러그인을 통해 카메라, GPS 등 호스트 운영 체제 기능에 접근한다. 앵귤러, 리액트, 뷰.js, 웹 컴포넌트 등 다양한 프레임워크를 지원하며, 모바일 구성 요소, 타이포그래피, 대화형 패러다임, 확장 가능한 테마를 제공한다. 또한 코드 배포, 자동화된 빌드 등의 서비스를 제공하며, 명령줄 인터페이스(CLI)를 통해 플러그인 추가, 푸시 알림, 앱 아이콘 생성 등의 기능을 수행할 수 있다.

더 읽어볼만한 페이지

  • 소프트웨어 프레임워크 - 애플리케이션 프레임워크
    애플리케이션 프레임워크는 GUI 애플리케이션 개발을 간편하게 하고 코드 재사용성을 높이는 소프트웨어 프레임워크로, MacApp을 시작으로 크로스 플랫폼, 웹 애플리케이션 등 다양한 종류가 있으며 대한민국에서도 스프링 프레임워크를 중심으로 활발히 사용되고 있다.
  • 소프트웨어 프레임워크 - 플러터
    플러터는 구글에서 개발한 UI 프레임워크로, 다트 언어와 위젯 기반 아키텍처를 사용하여 여러 플랫폼에서 네이티브에 가까운 성능을 내는 애플리케이션을 개발할 수 있으며, 디자인투코드 기술을 통해 개발 효율성을 높이고, 'Flock' 포크를 통해 생태계 다양성을 추구한다.
  • HTML5 - 구글 스위피
    구글 스위피는 구글에서 개발한 웹 서비스로, SWF 파일을 JSON으로 직렬화한 후 자바스크립트를 통해 SVG로 변환하여 애니메이션을 구현하는 기술이었으나 2016년 7월 1일 서비스가 종료되었다.
  • HTML5 - 웹 스토리지
    웹 스토리지는 웹 브라우저에서 클라이언트 측에 데이터를 저장하는 API로, 쿠키와 유사하지만 더 큰 저장 용량을 제공하며 로컬 스토리지와 세션 스토리지로 구분된다.
  • 리치 인터넷 애플리케이션 프레임워크 - 자바FX
    JavaFX는 자바 기반의 UI 구축 플랫폼으로, 다양한 플랫폼을 지원하며 풍부한 UI 기능들을 제공하고, Java 8부터 JDK에 포함되었다가 JDK 11부터 분리되어 관리된다.
  • 리치 인터넷 애플리케이션 프레임워크 - 마이크로소프트 실버라이트
    마이크로소프트 실버라이트는 2007년에 출시되어 어도비 플래시에 대항하고자 개발된 마이크로소프트의 RIA 기술이며, 닷넷 프레임워크 기반으로 XAML을 사용해 사용자 인터페이스를 정의했으나 2021년에 지원이 종료되었다.
아이오닉 (모바일 앱 프레임워크) - [IT 관련 정보]에 관한 문서
기본 정보
Ionic 로고
Ionic 로고
개발자드리프티
발표일2013년
최신 안정화 버전 출시일}}
프로그래밍 언어자바스크립트
종류소프트웨어 프레임워크
라이선스MIT 허가서
웹사이트아이오닉 공식 웹사이트
개요
설명오픈 소스 프레임워크, 하이브리드 모바일 앱 개발에 사용

2. 역사

아이오닉은 2013년 Drifty Co.에 의해 개발되었다. 2013년 11월 프레임워크의 알파 버전을 출시한 후, 2014년 3월에 1.0 베타 버전, 2015년 5월에 1.0 최종 버전이 출시되었고, 2016년에는 여러 차례 2.0 버전이 출시되었다.[5] 2019년 1월부터 아이오닉 4는 개발자들이 앵귤러 외에 리액트, 뷰.js, 웹 컴포넌트와 같은 다른 프레임워크를 선택할 수 있도록 지원한다.[6] 아이오닉 4는 스텐실JS를 사용하여 구축되었다.

2. 1. 개발

아이오닉은 2013년 Drifty Co.에 의해 개발되었다. 2013년 11월 프레임워크의 알파 버전을 출시한 후, 2014년 3월에 1.0 베타 버전, 2015년 5월에 1.0 최종 버전이 출시되었고, 2016년에는 여러 차례 2.0 버전이 출시되었다.[5] 2019년 1월부터 아이오닉 4는 개발자들이 앵귤러(Angular) 외에 리액트(React), 뷰.js(Vue.js), 웹 컴포넌트(web components)와 같은 다른 프레임워크를 선택할 수 있도록 지원한다.[6] 아이오닉 4는 스텐실JS(StencilJS)를 사용하여 구축되었다.

2. 2. 프레임워크 확장

아이오닉 4는 개발자들이 앵귤러 외에 리액트, 뷰.js, 웹 컴포넌트와 같은 다른 프레임워크를 선택할 수 있도록 지원한다.[6] 아이오닉 4는 스텐실JS를 사용하여 구축되었다.

3. 주요 서비스 및 기능

아이오닉은 코르도바와 더 최근에는 Capacitor 플러그인을 사용하여 카메라, GPS, 플래시 등과 같은 호스트 운영 체제 기능에 접근한다.[7][8][9] 사용자는 앱을 빌드할 수 있으며, 안드로이드, iOS, Windows, 데스크톱(일렉트론 사용) 또는 최신 브라우저에 맞게 앱을 사용자 정의할 수 있다.[10] 아이오닉은 빌드 도구인 코르도바 또는 Capacitor를 간소화된 'ionic' 명령줄 도구로 래핑하여 앱을 빌드하고 배포할 수 있도록 한다.[11]

아이오닉은 모바일 구성 요소, 타이포그래피, 대화형 패러다임 및 확장 가능한 기본 테마를 포함한다.[12]

웹 컴포넌트를 사용하여 아이오닉은 사용자 정의 컴포넌트와 상호 작용하는 메서드를 제공한다. 가상 스크롤과 같은 구성 요소는 사용자가 성능 저하 없이 수천 개의 항목 목록을 스크롤할 수 있도록 한다. 또 다른 구성 요소인 탭은 네이티브 스타일 탐색 및 기록 상태 관리를 지원하는 탭 인터페이스를 생성한다.

SDK 외에도 아이오닉은 개발자가 코드 배포, 자동화된 빌드와 같은 기능을 활성화하는 데 사용할 수 있는 서비스도 제공한다. 아이오닉은 또한 2020년에 중단된 IDE인 Ionic Studio도 제공한다.[13]

아이오닉은 또한 프로젝트를 생성하는 명령줄 인터페이스 (CLI)를 제공한다. CLI를 통해 개발자는 코르도바 플러그인 및 추가 프론트 엔드 패키지를 추가하고, 푸시 알림을 활성화하고, 앱 아이콘 및 스플래시 화면을 생성하고, 네이티브 바이너리를 빌드할 수 있다.[14]

3. 1. 핵심 기능

아이오닉은 코르도바와 더 최근에는 Capacitor 플러그인을 사용하여 카메라, GPS, 플래시 등과 같은 호스트 운영 체제 기능에 접근한다.[7][8][9] 사용자는 앱을 빌드할 수 있으며, 안드로이드, iOS, Windows, 데스크톱(일렉트론 사용) 또는 최신 브라우저에 맞게 앱을 사용자 정의할 수 있다.[10]

아이오닉은 모바일 구성 요소, 타이포그래피, 대화형 패러다임 및 확장 가능한 기본 테마를 포함한다.[12] 웹 컴포넌트를 사용하여 사용자 정의 컴포넌트와 상호 작용하는 메서드를 제공한다. 가상 스크롤과 같은 구성 요소를 통해 사용자는 성능 저하 없이 수천 개의 항목 목록을 스크롤할 수 있다.

SDK 외에도 아이오닉은 개발자가 코드 배포, 자동화된 빌드와 같은 기능을 활성화하는 데 사용할 수 있는 서비스도 제공한다. 아이오닉은 또한 프로젝트를 생성하는 명령줄 인터페이스 (CLI)를 제공한다. CLI를 통해 개발자는 코르도바 플러그인 및 추가 프론트 엔드 패키지를 추가하고, 푸시 알림을 활성화하고, 앱 아이콘 및 스플래시 화면을 생성하고, 네이티브 바이너리를 빌드할 수 있다.[14]

3. 2. 구성 요소

아이오닉은 모바일 구성 요소, 타이포그래피, 대화형 패러다임, 확장 가능한 기본 테마를 포함한다.[12] 웹 컴포넌트를 사용하여 사용자 정의 컴포넌트와 상호 작용하는 메서드를 제공한다. 가상 스크롤과 같은 구성 요소를 통해 사용자는 성능 저하 없이 수천 개의 항목 목록을 스크롤할 수 있다. 또 다른 구성 요소인 탭은 네이티브 스타일 탐색 및 기록 상태 관리를 지원하는 탭 인터페이스를 생성한다.

3. 3. 추가 서비스

아이오닉은 코드 배포, 자동화된 빌드와 같은 기능을 활성화하는 데 사용할 수 있는 서비스를 제공한다.[13] 2020년에 중단된 통합 개발 환경(IDE)인 Ionic Studio도 제공한다.[13]

아이오닉은 또한 프로젝트를 생성하는 명령줄 인터페이스 (CLI)를 제공한다. CLI를 통해 개발자는 코르도바 플러그인 및 추가 프론트 엔드 패키지를 추가하고, 푸시 알림을 활성화하고, 앱 아이콘 및 스플래시 화면을 생성하고, 네이티브 바이너리를 빌드할 수 있다.[14]

4. 지원 플랫폼

아이오닉은 안드로이드 4.4 이상을 지원한다.[15] iOS의 경우, 아이오닉은 iOS 10 이상을 지원한다. 아이오닉 2는 Windows 10 앱 빌드를 위한 유니버설 Windows 플랫폼을 지원한다.[16] ''Angular.js'' 기반의 아이오닉 프레임워크는 블랙베리 10 앱을 지원한다.[17]

4. 1. Android

아이오닉은 안드로이드 4.4 이상을 지원한다.[15]

4. 2. iOS

아이오닉은 iOS 10 이상을 지원한다.

4. 3. Windows

아이오닉 2는 Windows 10 앱 빌드를 위한 유니버설 Windows 플랫폼을 지원한다.[16]

4. 4. 기타

''Angular.js'' 기반의 아이오닉 프레임워크는 블랙베리 10 앱을 지원한다.[17]

5. 성능

아이오닉 앱은 네이티브 코드와 웹 코드의 혼합으로 실행되며, 필요에 따라 네이티브 기능에 완벽하게 접근할 수 있도록 지원한다. 앱 UI의 대부분은 표준 웹 기술로 구축된다. 아이오닉은 브라우저에서 사용 가능한 네이티브 하드웨어 가속 기능(예: CSS 애니메이션)을 활용하고 렌더링을 최적화한다(비용이 많이 드는 DOM 조작 방지). 아이오닉은 GPU를 활용하고 사용 가능한 프로세서 시간을 최대화하기 위해 애니메이션에 CSS 전환 및 변환을 활용한다.

5. 1. 작동 방식

아이오닉 앱은 네이티브 코드와 웹 코드의 혼합으로 실행되며, 필요에 따라 네이티브 기능에 완벽하게 접근할 수 있도록 지원한다. 앱 UI의 대부분은 표준 웹 기술로 구축된다. 아이오닉은 브라우저에서 사용 가능한 네이티브 하드웨어 가속 기능(예: CSS 애니메이션)을 활용하고 렌더링을 최적화한다(비용이 많이 드는 DOM 조작 방지). 아이오닉은 GPU를 활용하고 사용 가능한 프로세서 시간을 최대화하기 위해 애니메이션에 CSS 전환 및 변환을 활용한다.

5. 2. 최적화

아이오닉 앱은 네이티브 코드와 웹 코드의 혼합으로 실행되며, 필요에 따라 네이티브 기능에 접근할 수 있도록 지원한다. 앱 UI의 대부분은 표준 웹 기술로 구축된다. 아이오닉은 브라우저에서 사용 가능한 네이티브 하드웨어 가속 기능(예: CSS 애니메이션)을 활용하고 렌더링을 최적화한다(DOM 조작 최소화). 아이오닉은 GPU를 활용하고 사용 가능한 프로세서 시간을 최대화하기 위해 애니메이션에 CSS 전환 및 변환을 활용한다.

6. 설치

아이오닉은 Node.js 기반의 npm 모듈로 설치할 수 있다.[18]

참조

[1] 웹사이트 Drifty, Makers Of The Ionic Mobile Framework, Raise $1 Million https://techcrunch.c[...] 2015-03-14
[2] 웹사이트 Ionic Documentation Overview - License http://ionicframewor[...]
[3] 웹사이트 Introducing Ionic 4: Ionic for Everyone https://blog.ionicfr[...] 2019-01-23
[4] 뉴스 Ionic Framework https://ionicframewo[...] 2017-07-16
[5] 웹사이트 Best Ionic App Development Company {{!}} Hire Ionic Developers https://www.crystali[...] 2023-07-05
[6] 웹사이트 Comparing v4.0.0-rc.3/v4.0.0 · ionic-team/ionic-framework https://github.com/i[...]
[7] 웹사이트 Cordova Plugins https://docs.usecrea[...] 2018-06-02
[8] 웹사이트 Attractive Features Of Ionic App Development Framework https://www.mytechlo[...] 2018-06-02
[9] 뉴스 Ionic Framework https://web.archive.[...] 2018-06-02
[10] 뉴스 Ionic Framework https://ionicframewo[...] 2018-06-02
[11] 웹사이트 Mastering the Ionic Framework: Learn to Build & Deploy Native Speed HTML5 Based Apps - Thinkster https://thinkster.io[...] 2018-06-02
[12] 웹사이트 Theming Basics - Ionic Documentation https://ionicframewo[...] 2019-11-26
[13] 웹사이트 Ionic Studio is DeaD https://www.reddit.c[...] 2023-05-10
[14] 웹사이트 Installing Ionic - Ionic Documentation https://ionicframewo[...] 2019-11-26
[15] 웹사이트 Browser Support - Ionic Documentation https://ionicframewo[...] 2019-12-19
[16] 웹사이트 Announcing Windows Support in Ionic 2 http://blog.ionic.io[...] 2016-04-22
[17] 웹사이트 Top JavaScript Frameworks for Enterprise Mobility http://devblog.black[...] 2015-09-21
[18] 웹사이트 Free Mobile App Development: Getting Started with Ionic Apps https://ionicframewo[...]
[19] 웹인용 Drifty, Makers Of The Ionic Mobile Framework, Raise $1 Million https://techcrunch.c[...] 2014-03-10
[20] 웹인용 Ionic Documentation Overview - License http://ionicframewor[...]
[21] URL https://blog.ionicfr[...]
[22] 뉴스 Ionic Framework https://ionicframewo[...] 2017-07-16



본 사이트는 AI가 위키백과와 뉴스 기사,정부 간행물,학술 논문등을 바탕으로 정보를 가공하여 제공하는 백과사전형 서비스입니다.
모든 문서는 AI에 의해 자동 생성되며, CC BY-SA 4.0 라이선스에 따라 이용할 수 있습니다.
하지만, 위키백과나 뉴스 기사 자체에 오류, 부정확한 정보, 또는 가짜 뉴스가 포함될 수 있으며, AI는 이러한 내용을 완벽하게 걸러내지 못할 수 있습니다.
따라서 제공되는 정보에 일부 오류나 편향이 있을 수 있으므로, 중요한 정보는 반드시 다른 출처를 통해 교차 검증하시기 바랍니다.

문의하기 : help@durumis.com