[Challenge] 🛠️ iOS 앱 설계 퓨전 레시피 5부 - 계획과 목업

Overview

프로젝트를 개발할 때, 전체적인 작업 흐름을 우선적으로 잡는 것이 중요하다. 스토리보드를 활용해 앱의 기능과 작업 흐름을 정의한다.

Prototype

처음 프로젝트를 개발할 때에는 걱정이 많이 쌓인다. 세부적인 구현 내용을 초기에 완벽히 계획하여 개발하려는 욕심도 생길 수 있다. 이 방식으로는 시간만 버리고 사용자 요구사항에 부합하지 못한 결과가 나올 수 있다고 생각한다.

초기 사용자 테스트를 통해 작업 흐름을 빠르게 검증하고 잘못 설계된 부분에 관하여 민첩하게 피드백받을 수 있는 개발 환경에서는 많은 이점이 있다. 예를 들어 프로젝트 초기에는 상대적으로 적은 코드와 디자인이 반영되었을 때라서 디자인 방향을 틀거나 수정하기에 더 수월할 수 있다고 생각한다.

Storyboard

개발 관점에서는 앱 화면에 정보를 표시할 위치를 알려주는 사용자 인터페이스 리소스 파일이다. 디자인-타임의 ViewController 그래프를 캡슐화하고 있으며 Xcode 인터페이스 빌더를 통해 스토리보드를 편집할 수 있다. 디자인적 관점에서는 캔버스에서 Wireframe을 통해 사용자 인터페이스의 모양과 흐름을 시각화할 수 있도록 도와준다.

빠르게 Wireframe을 구성하여 사용자 요구사항에 관한 피드백을 받을 수 있다. 프로토타입을 만들면서 코드를 적게 작성하고 시각적으로 구성할 수 있기에 직관적이라는 장점도 생각해 볼 수 있다.

하지만 단점도 있다. 스토리보드는 내부적으로 XML 파일로 저장된다. Git 사용시 병합 충돌이 발생하거나 Xcode 버전에 따라 오동작을 하는 경우가 있어서 관리하기 까다로운 측면이 있다.

필자의 생각으로는 프로젝트를 처음 시작할 때 빠르게 요구사항을 검증해볼 수 있다는 측면에서 스토리보드를 여전히 유용한 도구로 생각하지만 장기적으로는 스토리보드에 대한 의존도를 낮춰가는 것도 좋겠다는 생각을 해보았다.

OrderApp Requirement

Order앱은 음식점의 음식 메뉴를 확인하여 고객이 원하는 음식을 주문할 수 있어야 한다. 메뉴 아이템들은 카테고리별 분류할 수 있어야 한다. 각 아이템은 이름, 세부설명, 가격, 이미지를 갖는다. 리스트 기반 앱을 통해 다음의 기능을 구현한다. 이때 음식점 메뉴나 주문은 웹서버 API와 연동한다.

• 이용 가능한 메뉴 아이템을 보여줄 수 있다.
• 주문서 명단에 메뉴 아이템을 추가할 수 있다.
• 현재 담긴 주문을 보여줄 수 있다.
• 음식점에 주문을 넣을 수 있다.

이용 가능한 메뉴 아이템을 보여줄 수 있다.

음식점의 메뉴는 리스트이다. 테이블 뷰를 활용해 메뉴 아이템을 띄어준다. 각 셀은 API에서 받아온 음식 메뉴들로 부터 하나씩만 보여줄 수 있다.

메뉴 카테고리를 화면 단위로 구분하여 보여준다. 첫 화면에서 음식 메뉴의 카테고리 리스트를 확인하고 선택할 수 있다. 카테고리를 선택하면 해당되는 음식 아이템의 리스트가 보인다. 특정 음식 아이템을 선택하면 해당 아이템의 세부정보와 이미지를 볼 수 있다.

주문서 명단에 메뉴 아이템을 추가할 수 있다.

특정 아이템의 세부정보를 볼 수 있는 화면에 있을 때 사용자는 아이템을 주문서 명단에 추가할 수 있다. 화면 하단의 주문서 명단에 추가하기 버튼을 선택하여 추가되는 방식으로 구현한다.

현재 담긴 주문을 보여줄 수 있다.

앱은 두가지 타입의 정보를 보여준다. 하나는 음식점에서 주문 가능한 메뉴 정보 다른 하나는 사용자가 담은 주문서 명단 정보이다.

두 가지 타입의 정보는 탭바를 통해 구분한다. 첫 번째 탭에서는 음식점 메뉴에 대한 Navigation을 수행할 수 있고 두 번째 탭에서는 사용자가 담은 주문서 명단을 볼 수 있다. 주문서 명단은 리스트 형태이기 때문에 테이블 뷰를 통해 보여주며 각 셀에서 음식 메뉴에 대한 세부 정보를 표시한다.

주문서 명단 화면에서 편집 모드를 활성화하는 Bar Button Item을 통해 주문서 명단에 담긴 주문을 제거할 수 있다. 테이블 뷰의 셀을 스와이프 하여 제거할 수 있는 기능도 함께 사용할 수 있다.

음식점에 주문을 넣을 수 있다.

주문서 명단 화면에서 주문하기 Bar Button Item을 선택하여 음식점에 주문을 넣을 수 있다. 주문을 넣으면 서버로 부터 음식의 준비가 완료되기까지 소요되는 시간이 반환된다. 새로운 모달창을 띄운다. 주문을 넣은 시간을 기준으로 소요 시간을 계산하여 현재 진행률을 Progress Bar를 통해 실시간으로 보여준다. 사용자가 앱을 종료하더라도 음식의 준비 완료를 확인할 수 있도록 로컬 푸시 알림을 활용한다.

Implement

Tab & Navigation

탭 바를 통해 사람들이 뷰가 제공하는 다양한 유형의 정보나 기능을 이해하도록 도와줄 수 있으며 특정 탭의 탐색 맥락을 유지한 상태로 뷰의 섹션을 빠르게 전환할 수 있도록 도와줄 수 있다. (참조: HIG - Tab bars)

Order App에서는 음식점 메뉴를 보여주는 타입과 주문서 정보를 관리하는 총 두가지 타입의 화면이 존재해야 하기에 Tab Bar을 활용한다. 각 타입별 화면에서는 사용자가 화면의 이름을 확인하며 콘텐츠 계층을 탐색할 수 있도록 Navigation bar를 활용한다. (참조: HIG - Navigation Bars)

스토리보드에서 Tab Bar Controller 오브젝트를 캔버스에 추가한 후 연관된 Navigation Controller와 relationship segue를 설정하는 방식으로 연동할 수 있다. 좀 더 효율적인 방식은 캔버스에 각 화면 맥락에 해당하는 Navigation Controller를 먼저 올려둔 후 Tab Bar Controller를 통한 Xcode Embed-In 기능을 사용하는 것이다.

스토리보드의 TabBarController Scene에 TabBar View의 각 항목을 선택하여 이미지나 이름을 손쉽게 바꿀 수 있다. Navigation Controller의 Navigation Bar 와 하위 아이템을 선택하여 이름을 바꾸거나 새로운 버튼도 추가할 수 있다.

First Tab: Menus

음식의 카테고리나 메뉴 아이템 정보는 서버 API를 통해 리스트로 주어진다. 한개 이상의 행을 사용하여 데이터를 보여주기에 적합한 뷰는 리스트 혹은 테이블 뷰이다. 테이블 뷰를 통해 그룹이나 계층으로 구성된 데이터를 나타낼 수 있으며, 선택, 추가, 삭제 및 재정렬과 같은 사용자 상호 작용을 가능하게 할 수 있다. (참조: HIG - Lists and tables)

스토리보드에 Table View Controller를 추가하는 방식으로 테이블 뷰 화면을 구현할 수 있다. 필요한 화면은 카테고리 리스트 화면과 메뉴아이템 화면이 필요하기 때문에 캔버스에 2개의 Table View Controller 오브젝트를 추가해 준다.

첫 번째 탭바가 눌렸을 때 카테고리와 메뉴 아이템 리스트를 볼 수 있어야 하므로 첫번째 탭바에 연동된 네비게이션 컨트롤러와 첫번째 테이블 뷰 컨트롤러 사이의 relationship segue를 연결한다.

Note: Initial View Controller를 통해 앱 실행 시 초기 진입 화면을 설정할 수 있다.

카테고리를 선택하면 그에 속한 음식 메뉴 아이템을 보는 화면으로 넘어갈 수 있어야 한다. 첫 번째 테이블 뷰 컨트롤러의 셀에서 두 번째 테이블 뷰 컨트롤러로 넘어갈 수 있는 show segue를 만든다.

메뉴 아이템 리스트에서 특정 메뉴를 선택하면 세부 화면을 보여줘야 한다. 세부 정보를 보여주기 위한 화면을 위해 View Controller 오브젝트를 캔버스에 올려준다. 위와 마찬가지로 특정 메뉴 아이템 셀이 선택되면 상세정보 View Controller로 넘어가기 위한 show segue를 설정해 준다.

Note: 세부적인 화면 디자인은 지금 생각하지 않으므로 위 이미지의 구현 사항은 무시한다.

각 뷰 컨트롤러 화면 단위가 의미하는 역할을 표현하기 위해 새로운 코코아 터치 클래스를 만든다. 클래스의 이름은 "(각 화면의 역할)+(ViewController)"의 형태로 지어준다. 예를 들어 다음과 같이 네이밍 할 수 있다.

• 카테고리 리스트를 보여주는 화면을 관리 -> CategoryTableViewController
• 음식 메뉴 리스트를 보여주는 화면을 관리 -> MenuTableViewController
• 메뉴 상세 정보를 보여주는 화면을 관리 -> MenuItemDetailViewController

Note: Swift 파일은 앞선 포스팅에서 소개한 방식으로 앱 아키텍처에 기반하여 조직된 파일 관리 구조를 사용해 정리한다.

Second Tab: Orders

Order 앱의 두 번째 탭에서는 사용자가 담은 주문서 아이템 리스트를 확인하고 편집하며 음식점 서버에 주문을 전송할 수 있어야 한다. 캔버스에 주문서 명단을 확인할 수 있는 Table View Controller를 올린 후 두번째 탭바에 연동된 내비게이션 컨트롤러와 relationship segue를 설정한다.

서버에 주문을 넣을 수 있도록 내비게이션 바 우측에 bar button item 을 추가하여 submit으로 이름을 바꿔준다. 네비게이션 바의 타이틀도 My Order 등 적정한 이름으로 바꿔준다.

사용자가 넣은 주문의 처리율을 확인할 수 있는 주문 확인 화면을 구성하기 위해 View Controller 오브젝트를 추가로 캔버스에 올려준다.

주문 화면과 주문 확인 화면의 관계에서는 화면 전환과 함께 서버와의 통신 코드 처리가 필요하다. 프로그래밍적인 화면 전환 처리를 위해 view controller 간의 모달 형식으로 보여주는 segue를 먼저 추가해 둔 후 submit 버튼이 선택되었을 때 액션을 통해 프로그래밍 적으로 trigger 시키도록 구현한다.

메뉴 정보를 보는 것과 마찬가지로 각 뷰 컨트롤러 화면 단위가 의미하는 역할을 표현하기 위해 새로운 코코아 터치 클래스를 만든다. 클래스의 이름은 "(각 화면의 역할)+(ViewController)"의 형태로 지어준다. 예를 들어 다음과 같이 네이밍 할 수 있다.

• 주문 리스트를 보여주는 화면을 관리 -> OrderTableViewController
• 주문 확인 정보를 보여주는 화면을 관리 -> OrderConfirmationViewController

Binding

스토리보드 리소스 파일에 구현된 사용자 인터페이스 구성과 흐름은 앱이 실행될 때, 아이폰의 메모리에 적재된다. 스토리보드를 통해 메모리에 적재된 UI 계층을 Swift 코드로 관리하기 위해서는 Swift 코드와 스토리보드의 View Controller 오브젝트를 연동하는 작업이 필요하다.

방법은 간단하다. 앞서 만들어둔 Swift 파일을 스토리보드의 ViewController 오브젝트의 커스텀 클래스로 설정해 주면 된다. 스토리보드에서 각 Scene을 선택한 뒤 인터페이스 우측의 identity inspector에서 custom class 영역을 통해 알맞은 ViewController 객체를 선택하면 끝난다.

마무리

스토리보드를 통해 시각적으로 앱의 기능에 따른 전반적인 흐름을 구성해 보았다. 스토리보드의 장단점을 살펴보며 프로토타입핑의 도구로써 활용해 보았다.

다음 차례에서는 서버와 연동할 수 있는 앱의 Model을 구성해 볼 것이다. 😀