Ionic 핵심 개념

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로 만들어졌습니다. 이것이 웹 표준을 준수하면서 앱을 엄청 빠르게 디자인할 수 있게 했습니다. 몇 가지 뛰어난 기본값으로서 개발자에게 색상 선택지를 제공하면서도, 그걸 새로 구현하여 브랜드나 회사의 디자인을 만들거나 원하는 색상 팔레트로 만들어내는 것 또한 권장합니다. 앱의 배경 색상 부터 텍스트 색상까지 모두 사용자 지정이 가능합니다. 테마에 대한 자세한 정보는 테마 문서를 참고하세요.

Ionic Framework이 무엇입니까?

Ionic Framework는 (HTML, CSS, 자바스크립트와 같은) 웹 기술을 이용한 고성능, 고품질 모바일 및 데스크톱 앱을 구축하기 위한 오픈 소스 UI 툴킷입니다.

Ionic Framework는 프론트엔드 사용자 경험이나 앱의 UI 상호 작용 (컨트롤, 상호작용, 제스쳐, 애니메이션)에 중점을 둡니다. 배우기 쉽고, Angular와 같은 다른 라이브러리와 쉽게 잘 통합되거나, 간단한 스크립트를 사용하고 프론트 프레임워크 없이 단독형으로 사용될 수도 있습니다.

현재 Ionic Frameworksms Angular와 React와 공식적으로 연계되며, Vue는 개발중입니다. Ionic Framework를 본격적으로 시작하기 전에 더 배워보고 싶은 분들을 위해, 기본을 살펴보는 비디오를 만들었습니다.

목표

크로스 플랫폼

단 한 개의 코드 베이스로 네이티브 iOS, Android, 데스크톱, 프로그래시브 웹 앱과 같은 멀티 플랫폼에 걸쳐서 작동하는 앱을 만들고 배포해보세요. 한 번의 작성으로 여러 곳에서 실행해보세요.

웹 표준 기반

Ionic Framework는 사용자 컨트롤과 쉐도우 DOM 등 현대 웹 API를 사용하는 HTML, CSS와 JavaScript 같은, 가장 믿을 수 있고 표준화된 웹 기술로 만들어졌습니다. 이 탓에, Ionic 컴포넌트는 안정적인 API를 갖고 있으며, 불안정한 단일 플랫폼 공급자가 아닙니다.

아름다운 디자인

깔끔하고 단순하며 기능적입니다. Ionic Framework는 모든 플랫폼을 막론하고 결과물을 아름답게 표시하고 작동하도록 디자인되었습ㅈ니다. 미리 디자인된 컴포넌트, 타이포그래피, 대화형 패러다임, 멋진 (확장 가능한) 기본 테마와 함께 시작해보세요.

단순함

Ionic Framework는 즐겁게 Ionic 앱을 만들고, 배우기 쉬우며, 웹 개발 기술을 가진 누구든지 접근할 수 있도록 복잡하지 않게 만들어졌습니다.

라이센스

Ionic Framework는 허용 가능한 MIT 라이센스 하에서 배포되는 무료 오픈 소스 프로젝트입니다. 이는 개인과 상용 프로젝트에 무료로 쓰일 수 있다는 것입니다. MIT는 jQuery, Ruby on Rails와 같은 유명한 프로젝트에도 똑같이 쓰인 라이센스입니다.

이 문서 내용(ionic-docs 저장소에 있는)은 Apache 2 라이센스로 보호됩니다.

Ionic CLI

공식적인 Ionic CLI 또는 명령줄 인터페이스는 빠르게 Ionic 앱을 구축하고 Ionic 개발자에게 유용한 수많은 명령을 제공합니다. Ionic의 설치와 업데이트 뿐만 아니라, CLI에는 내장 개발 서버, 빌드 및 디버깅 도구 등을 포함합니다. Ionic Appflow 사용자라면, CLI는 클라우드 빌드와 배포까지 수행하고, 여러분의 계정을 관리하는데도 쓰일 수 있습니다.

Framework 호환성

과거 버전의 Ionic은 Angular와 깊이 묶여 있었지만,  V4 프레임워크는 Angular와 같은 최신 JavaScript 프레임워크와 결합된 단독 웹 컴포넌트 라이브러리로 작동하도록 재구축되었습니다. Ionic은 비록 완전한 웹 컴포넌트 지원을 위해 shim이 필요하지만, 성공적으로 React와 Vue 같은 대부분의 프론트엔드 프레임워크에 쓰일 수 있습니다.

JavaScript

Ionic 4의 주요 목표 중 하나는 컴포넌트를 제공하기 위한 단일 프레임워크에 대한 강한 의존을 제거하는 것이었습니다. 즉, 코어 컴포넌트가 웹 페이지에서 스크립트 태그만으로 단독 작동이 가능하다는 것입니다. 프레임워크와 작동하는 것이 대규모 팀과 대규모 앱에서 최적일 수 있지만, WordPress와 같은 단일 페이지 내용에서도 단독 라이브러리로 Ionic을 사용할 수 있다는 것입니다.

Angular

Angular는 Ionic을 쓸만하게 만든 존재였습니다. 코어 컴포넌트가 단독 웹 컴포넌트 라이브러리로 작동하도록 쓰였지만, @ionic/angular 패키지는 Angular 생태계와의 통합을 용이하게 만듭니다. @ionic/angular는 Ionic 2/3에서 넘어온 Angular 개발자들이 기대하는 기능을 제공하며, Angular 라우터와 같은 코어 Angular 라이브러리와 통합합니다.

React

Ionic은 널리 쓰이고 있는 React 라이브러리에 대한 공식 지원을 제공합니다. Ionic React는 React 개발자들이 iOS, Android, 데스크톱을 타겟으로 하는 앱을 만들 수 있는 기존의 웹 기술을 사용할 수 있게 합니다. @ionic/react와 함께, 여러분은 네이티브 React 컴포넌트를 쓰는 기분으로 모든 코어 ionic 컴포넌트를 사용할 수 있습니다.

미래 지원

다른 프레임워크에 대한 지원도 곧 릴리즈될 것으로 기대됩니다. 현재 Vue에 대한 공식 바인딩이 개발되고 있지만, 일부 컴포넌트는 해당 프레임워크에서 즉시 작동 가능합니다.

Ionic Framework V4+

Ionic 프레임워크 V4는 성능, 호환성과 전체적인 확장성에 중점을 둔, 기저 기술과 프로젝트 가능성의 중요한 진보입니다. V4가 Angular와 @ionic/angular 패키지로 여전히 깊이 결합되긴 하지만, 이제는 프레임워크에 구애받지 않는데, 다시 말해 어떤 다른 JavaScript 프레임워크든지 (Vue, React, Preact 등), 또는 프레임워크가 없든지 작동한다는 것입니다.

웹 표준으로 이동하면서, V4는 Ionic 코어가 프레임워크 의존적인 모델에서 벗어나 현대 브라우저에서 지원되는 표준 컴포넌트 모델에 의존할 수 있게 됩니다. 더 빠른 로드 시간, 더 나은 성능, 적은 코드양을 보여줍니다.

Ionic Appflow

Ionic 앱의 생애주기 관리를 지원하기 위해, Ionic Appflow라고 하는, 개발앱을 위한, 오픈 소스 프레임워크와 별도의 상용 앱 플랫폼을 제공합니다.

Ionic Appflow는 개발자와 팀이 중앙화된 대시보드에서 네이티브 앱을 컴파일하고 라이브 코드 업데이트를 배포하는데 도움을 줍니다. 워크플로우 자동화, 단일 로그인(SSO)과 연결된 서비스와 통합에 대한 접근 같은 고급 기능을 위해 유료 업그레이드 옵션을 사용할 수 있습니다.

Appflow에는 Ionic 계정이 필요하며, 일부 기능을 가지고 놀고 싶은 사람들을 위해 무료 “스타터” 플랜도 있습니다.

생태계

Ionic Framework는 코어팀에 의해 풀타임으로 활발하게 개발되고 유지되고 있으며, 성장과 도입을 촉진하는 전세계 개발자와 기여자 커뮤니티에 의해 생태계가 조성되고 있습니다. 개발자와 크고 작은 회사는 Ionic을 사용하여 어디서나 실행되는 놀라운 앱을 빌드하고 제공합니다.

커뮤니티 가입

전세계 200여 개 나라에 수백만의 Ionic 개발자가 있습니다. 가입하는 방법은 다음과 같습니다.

  • 포럼: 질문하고 아이디어를 나누기 좋은 곳입니다.
  • 슬랙: 개발자들이 만나서 실시간으로 대화를 나누는 활기찬 곳입니다.
  • 트위터: 업데이트를 올리고 Ionic 커뮤니티의 내용을 공유하는 곳입니다.
  • GitHub: 버그를 보고하고, 새 기능을 요청하고, 이슈를 만드는 곳입니다. 풀 리퀘스트도 환영합니다!
  • 글 작성하기: 기술 블록그를 쓰고 Ionic 커뮤니티에서 여러분의 이야기를 나누세요.

아직까지 수수료에 벌벌떠는 일본의 은행

사실 알려질대로 다 알려져서 그렇지, 일본의 은행 시스템이 매우 낙후되어 있다는 것은 한국인에게도 잘 알려진 사실입니다. 유학 비용을 송금하거나 받아보면서 느낀 사람도 있으시겠지만, 그걸 가장 느끼는 건 은행의 기본 삼대 업무가 의외로 한국의 상식을 안 좋은 쪽으로 뛰어넘는다는 사실입니다.

접근성

은행 접근성이 떨어진다는 사실은 한일 양국의 공통 사항입니다. 지점이 축소되고 거의 유명무실화되는 건 16시면 문을 닫는 은행의 영업 시간 탓일 겁니다. 실은 일본은 15시에 닫는 곳이 더 많은데다 인당 창구 소요 시간이 너무나 길기 때문에 더욱 크게 느껴집니다.

그래서 점심 시간에 얼른 회사 근처 은행을 다녀오는 게 밥을 포기하지 않고도 가능한 한국의 상식으로는, 여기선 점심 시간이 오버될 각오를 하더라도 아마 가지 못하는 사람들이 많다는 점에서 차원이 다릅니다. 1시간 반을 자리를 비우게 될테니까요. 앱이나 인터넷 은행에 대해서도 할 말이 많은데, 이에 관해서는 다른 글에서 소개하기로 하겠습니다.

ATM도 멀게 느껴진다

일본의 전국에 분포한 대형 은행은, 미쓰비시(UFJ), 미즈호, 미쓰이스이토모, 리소나 같은 곳이 있지만, 한국에서 건너온 이방인이 월급 통장 등으로 만드는데 성공했다고 들은 곳은 미쓰비시 말고 들은 곳이 없습니다. 다른 곳은 6개월 체류 후 오라고 하니 월급을 받을 수 없어 헛걸음만 하기 십상입니다. 그러니 굳이 살펴볼 필요도 없겠죠.

사실 제가 쓰는 곳은 이런 대형 은행에 속하지 않은 조금 특이한 신형 은행(새로운 형태의 은행이라고 분류하네요)인데, 영업점이 극소화된 은행(신세이은행, SBJ은행)과 완전 인터넷 은행(라쿠텐은행) 정도입니다.

영업점이 극소화되어 있으니 ATM 접근성이 좋을 리가 없는 게 당연합니다. 하지만 이곳이 오히려 ATM이 가깝습니다. 아예 주요 편의점의 ATM과 계약을 맺어서 이쪽을 이용하라고 합니다.

하지만 그렇다고 한들, 수수료를 물라고 하면 선뜻 이용하기 꺼려집니다. 특히 일본의 ATM 이용 수수료는 상당히 높기에, 이를 잘 모르고 뜯길까 낯선 곳에서 통장 입출금을 하기 무서워하는 사람들도 많습니다.

제가 쓰는 은행과 미쓰비시UFJ만 한 번 비교해봤습니다.

UFJ은행

당행 무료, 타행 220엔(3만엔 미만) 330엔(3만엔 이상)

  • 슈퍼 보통예금(메인뱅크 플러스)에 실버 스테이지인 경우 월 2회 편의점, 타 은행 등 제휴 ATM 무료
  • 슈퍼 보통예금에 플래티넘 스테이지인 경우 월 3회 무료

실버 스테이지가 되기 위해 잔고가 30만엔이 필요하고, 플래티넘은 500만엔이 필요하네요. 원화로 동그라미 하나 더 붙이면 만만치 않은 돈입니다. 사실상 당행 외 무료 ATM은 없는 셈 쳐야 할 것 같습니다.

신세이은행

  • 당행 ATM이 없음
  • 세븐ATM (세븐일레븐, 이토요카도 등), EnetATM(일부 패밀리마트, 데일리 등),
    로손ATM, 이온ATM, PatSat(한신), VIEW ALTTE(JR동일본역), 유초(일본 우체국): 110엔, 골드 회원 무료
  • 타행은행, 미쓰이스이토모, 상공조합중앙금고: 110엔, 골드 회원 무료, 입금은 불가

신세이은행은 일률적으로 110엔이 드는 것으로 보여 빠져나갈 구석이 안 보입니다. 하지만, 골드 회원의 조건이 몇 가지 있는데… (단, 신규 3개월은 골드 대우 해줍니다)

  • 당행 총 맡긴 금액이 200만엔 이상
  • 당행투자상품 30만엔 이상
  • 금전신탁 100만엔 이상
  • 자동적립형외화정기예금, 투신적립 이체
  • 테오 (국제분산투자상품) 이체
  • 신세이은행FX 10만 기본통화 이상 약정
  • 선불카드 GAICA 충전 1만엔 이상 또는 파워플렉스 계좌에 외화 80기본통화 충전

뭔가 많습니다만 가장 마지막이 중요합니다. GAICA 카드를 계좌 만들면서 바로 발급받을 수 있는데, 여기에 자동 충전만 걸면 되는 것입니다. 이후에 충전금을 자유롭게 계좌로 되돌릴 수도 있더군요. 그래서 골드 회원 혜택을 잘 받고 있습니다.

라쿠텐은행

  • 세븐/이온/PatSat: 3만엔 이상 입금 무료, 그 외 220엔, 개설 3개월간 무료, 해피프로그램 차등 무료 횟수 제공 (최고 7회)
  • Enet/로손/MUFG/미즈호/유초/VIEW ALTTE(입금불가): 3만엔 이상 입금 무료, 그 외 275엔, 개설 3개월간 무료, 해피프로그램 차등 무료 횟수 제공 (최고 7회)

타의로 만든 은행계좌이긴 하지만, 라쿠텐 생태계는 매력적입니다. 직불카드로 포인트도 쏠쏠하게 쌓이고 장점이 적지 않습니다. 하지만 ATM 수수료는 자비가 부족합니다. 은행으로서 주로 쓰기엔 아쉬운 부분이 있는데, 횟수가 모든 곳에서 공유되기에 더욱 적게 느껴지는 점입니다.

해피프로그램은 고객의 매월 25일 시점 잔고 또는 월간 거래액으로 산정되는 등급입니다.

  • Super VIP: 잔고 300만엔 이상, 거래 30건 이상, ATM 무료 7회/ 타행송금 3회 / 라쿠텐포인트 적립률 3배
  • VIP: 100만엔 이상, 20건 이상, ATM 무료 5회/ 타행송금 3회 / 라쿠텐포인트 적립률 3배
  • 프리미엄: 50만엔 이상, 10건 이상, ATM 무료 2회/ 타행송금 2회 / 라쿠텐포인트 적립률 2배
  • 어드벤스드: 10만엔 이상, 5건 이상, ATM 무료 1회/ 타행송금 1회
  • 베이직: 엔트리

SBJ은행

  • 세븐/이온/Enet: 월 10회 무료
  • 유초/미즈호: 월 3회 무료

신한은행의 자회사인 SBJ은행은 원래 세븐ATM이 무제한 무료였으나, 2019년 11월 1일 부로 개악되었습니다.

마치며

한국의 카카오뱅크가 떠오릅니다. 거의 모든 시중은행과 연계해서 수수료 없는 송금은 물론 ATM 입출금까지 이뤄냈습니다. 또 편의점 ATM 입금 환경도 수수료 무료를 선언한 은행이 늘어나면서 좋아지는 중입니다.

일본에서 그 부분은 세븐ATM이 독보적이긴 하지만, 여전히 주변에 보이는 은행은 내야하는 수수료가 만만치 않습니다.

결국 얼마나 따져보고 챙기냐에 따라 예기치도 않은 지출 금액을 절약할 수 있을 것 같습니다.