퓨즈[Fusetools] 문서[Docs] 번역

  1. Home
  2. 퓨즈[Fusetools] 문서[Docs] 번역
  3. 튜토리얼

튜토리얼

소개

우리의 엔드-투-엔드(end-to-end) 튜토리얼에 오신걸 환영합니다!

퀵스타트에 이어서, 이 튜토리얼은 처음부터 퓨즈 앱을 만드는 단계로 안내합니다. 우리가 만들 앱은 기본적인 하이킹 추적 앱이며, “hikr”라고 불리는 것입니다. 이 앱을 이용하면 하이킹 내역을 보고 등급을 매기거나 코멘트를 추가하고 변경할 수 있습니다.

앱의 전체 소스코드는 여기에 있습니다!

hikr는 의도적으로 간단하게 만들 것입니다. 우리는 너무 세부적인 부분에 집착하지 않고 여러 조각으로 나눠진 퓨즈의 개념을 배울 수 있기를 원합니다. hikr는 이를 위해 특별히 설계되었으며, 퓨즈로 실제 앱을 제작하는 핵심 요소들을 배울 것입니다.

또한, 우리는 원본 튜토리얼에서 벗어나지 않는 다양한 “트랙(tracks)”을 추가할 예정이며, 백엔드 추가, 편집기 개선, 애니메이션 추가 등과 같은 것들을 다룰 것입니다. 이렇게 하면, 핵심 아이디어에 우선 초점을 맞출 수 있으며, 추후 심화 및 특정 사항들을 더 배울 수 있습니다. 그러니 계속 지켜봐 주세요!

핵심 개념

특히, hikr는 다음과 같은 개념들을 설명합니다:

  • 퓨즈 앱 구성을 위한 모범 사례
  • 옵저버블[Observables] 및 데이터바인딩[databinding]
  • 데이터를 변경하고 이러한 변경 사항을 백엔드와 통신
  • 재사용 가능한 구성 요소를 만드는 방법 및 시기
  • 라우팅 및 탐색 기능과 컴포넌트 결합

또한 앱을 만들어 보면 이러한 핵심 개념뿐만 아니라 다른 많은 기능에 대해 알게되고, 실질적인 경험을 얻게 됩니다.

챕터(Chapters) 리스트

이 튜토리얼은 다음의 장들로 나뉩니다:

  1. 하이킹 편집 화면 (Edit Hike view)
  2. 여러개의 하이킹(hikes) (Multiple hikes)
  3. 컴포넌트 나누기 (Splitting up components)
  4. 네비게이션과 라우팅 (Navigation and routing)
  5. 백엔드 흉내내기 (Mocking our Backend)
  6. 룩앤필 개선하기 (Tweaking the look/feel)
  7. 스플래시 스크린 (Splash screen)
  8. 끝으로 생각해볼 것들 (Final thoughts/what’s next)

각 챕터는 이어지므로 가급적 순서대로 진행하는 것이 좋습니다.

hikr 디자인

디자인은 매우 간단합니다. 이 앱은 배경 비디오와 모든 것을 갖춘 아름다운 스플래시 스크린으로부터 시작됩니다:

“Get Started” 버튼을 누르면 최근 하이킹 리스트를 보여주는 홈 페이지로 이동합니다:

마지막으로, 리스트 중 하나를 눌러서 다음과 같이 ‘하이킹(Hike) 편집 화면’으로 이동합니다:

이 페이지에서 특정 하이킹을 수정할 수 있으며, “Save” 버튼을 눌러서 변경하거나 “Cancel” 버튼으로 되돌릴 수 있습니다. 두 개의 버튼 모두 눌려질 경우 홈 페이지로 돌아갑니다.

앱의 전체 흐름은 다음과 같습니다:

전체 앱이 동작하는 모습은 다음과 같습니다:


동영상 URL: http://bit.ly/2kYIZsR

향후 계획

우리가 해야 할 일에 대한 기본적인 아이디어를 얻었으므로, 기본 뷰 모델과 함께 ‘하이킹(Hike) 편집 화면’을 시작합니다. 함께 가시죠!

앱의 전체 소스코드는 여기에 있습니다.

[[ 동영상 강좌 ]]

Articles

Was this article helpful to you? Yes No

How can we help?