[Challenge] 3주만에 앱스토어에 앱 출시하기 - 3부 프로토타이핑

Overview

본 글은 짧은 시간을 투자하여 앱스토어에 나만의 앱을 출시하고 싶은 독자를 대상으로 개발 가이드를 제공하고자 작성하였습니다. 2부에서는 성과물을 만들어나가기 위해 필요한 작업 관리 방식의 전 과정을 다루어보았습니다. 3부에서는 iOS 앱 개발 도구를 활용하여 가시적인 성과물을 만들기 위한 프로토타입 제작 과정을 조망해 보겠습니다. 독자 여러분께서 포스팅을 읽고 "앱 개발 별거 아니네!" 생각할 수 있도록 인도할 수 있다면 본 포스팅은 목적을 달성하는 것입니다. 이전 포스팅을 읽지 않으셨다면 반드시 보고 오세요.

GoodJob!

[Challenge] 3주만에 앱스토어에 앱 출시하기 - 2부 작업 관리

개발 방향

1부에서 기획 내용을 바탕으로 화면 흐름 등의 사용자 경험과 데이터 모델링을 진행했었죠. 이걸 실제로 구현해볼꺼에요. 개발 작업 흐름을 소개해드릴게요. 작업 흐름은 개발자의 개성과 성향을 많이 타는 부분으로 생각해요. 필자는 사람을 중심으로 사용자 경험을 설계해 둔 후에 데이터 모델을 개발해 나가는 작업 흐름을 선호하는 편이에요. 예를 들면 사용자 경험을 디자인한 프로토타입을 먼저 개발해 둔 후에 내부적인 데이터 모델링을 개발하는 형태인 거죠.

앱의 개발 도구를 선정하는 것도 중요한데요. 독자 여러분께서 익숙하게 사용할 수 있는 개발 도구가 있다면 그거 사용하세요. 아니라면 약간의 가이드를 드릴게요. 크게 보면 안드로이드나 iOS앱을 동시에 개발할 수 있는 크로스플랫폼 개발 도구와 특정 플랫폼에 종속된 네이티브 개발 도구가 있어요. 기획 상 안드로이드나 iOS에서 동일한 브랜드 사용자 경험을 저비용으로 구축할 수 있어야 한다면 크로스플랫폼 개발 도구를 추천드려요. 특정 플랫폼이 제공하는 고유의 사용자 경험을 살리고 최신 기술을 적극적으로 도입해보고 싶으시다면 네이티브 개발 도구를 추천 드려요.

이번 프로젝트는 Apple 플랫폼 한정 최신 기술을 사용하여 플랫폼 고유 경험을 살려보고자 네이티브 개발 도구를 사용해 볼 것이에요. 프로토타입은 UIKit 환경에서 Xcode의 인터페이스 빌더를 활용해 짧은 시간을 투자하여 제작해 볼 거예요. 여기서는 디테일한 UI 스타일링은 중요하지 않아요. 사용자가 개별 화면이 다루는 정보를 식별할 수 있는지, 사용자가 앱을 사용하면서 길을 잃지 않도록 탐색 구조가 조직되었는지 등 큰 영역에서 검토할 수 있을 수준만 만들면 됩니다. 실제로 사용할 앱은 SwiftUI를 활용하여 개발할 거예요. 비교적 최신 프레임워크이기도 하고요. Apple 생태계 내의 확장성 등을 직관적인 선언적 코드 구문을 통해 얻을 수 있어요. 개발에 사용할 수 있는 기술을 파악하기 위해 다음의 사이트를 참조해 보세요.

Planning your iOS app

프로토타이핑

1부에서 피그마에 설계해 둔 내용을 구체화하여 iOS 앱의 전체적인 화면 흐름을 프로토타입으로 구현해 볼 거예요. 프로토타이핑에 관하여 이전에 정리해 둔 글이 하나 있어요. 다음의 포스팅을 통해 스토리보드를 활용한 프로토타입 구현에 관하여 파악하고 오셔야 합니다.

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

위 포스팅을 읽고 나면 전체적인 작업 흐름을 잡을 때 프로토타입을 사용하면 빠르게 개발과 검증 과정을 반복할 수 있다는 장점이 있음을 파악할 수 있어요. 스토리보드를 통해 코드를 작성하지 않고 캔버스에서 와이어프레임을 활용한 사용자 인터페이스의 모양과 흐름을 시각화할 수 있음을 파악할 수 있어요. UseCase 단위로 화면 섹션 별 책임 단위를 구성하고 탭과 내비게이션을 통해 사용자가 정보를 탐색할 수 있는 구조를 만들 수 있음을 파악할 수 있어요. 간단한 인터페이스 빌더 사용법을 파악하여 나의 프로젝트에 접목해 볼 수 있어요.

프로젝트 생성

프로토타입에 사용할 Xcode 프로젝트를 생성해 주세요. iOS 앱 프로젝트로 Storyboard 인터페이스 옵션을 사용할 거예요. Persistence를 사용하지는 않을 것이니 storage 옵션은 비활성화해 주시면 됩니다.

Xcode 프로토타입 프로젝트 생성

눈앞에는 깨끗한 스토리보드가 보일 거예요. 눈앞에 백지가 보이면 무한한 가능성을 어떻게 채워나가야 할지 두려움이 밀려올 수 있어요. 걱정 마세요. 누구에게나 "기획"이라는 이름의 플랜이 있잖아요.

프로토타입 개발

기획 내용을 중심으로 하나씩 채워나가 보겠습니다. 마침, 피그마 기획서에 작성해 둔 트리 그래프가 떠오르지 않나요? 지금은 유즈케이스별 다루는 세부적인 속성 정보가 필요한 것은 아니니깐 유즈케이스 중심으로 아래 이미지의 좌측 그래프와 같이 화면 당 책임을 부여해 보았었죠.

유즈케이스 트리와 화면 당 책임 그래프

이제부터 화면 별 책임 단위 그래프를 스토리보드에 올려볼게요! 시작하기 전에 작업을 도와줄 약간의 규칙을 정의해 볼게요. 다루는 정보의 의미 단위가 다른 화면, 즉 책임이 다른 화면 간에는 UITabBarController로 감싸줄 겁니다. 같은 정보의 컬렉션을 보여주거나 그 중 하나의 단일 정보를 선택하는 등 유사한 정보의 구체성과 관련된다면 UINavigationController로 감싸줄겁니다. 정보의 의미적 단위로써 수직, 수평 관계가 아니라 특정 정보 맥락에서 사용자의 작업을 정의하기 위해 modality를 형태로 화면을 띄어줄 겁니다. 정보의 모음을 보여주기 위해 UITableViewController를 사용할 겁니다. 외에는 UIViewController를 활용하여 화면의 책임 단위 혹은 개략적인 UI 컴포넌트 구조를 정의할 겁니다. 그 외의 인터페이스와 연관된 가이드라인은 다음의 사이트에서 정보를 얻을 수 있어요.

Human Interface Guidelines | Apple Developer Documentation

앞서 정의한 규칙에 맞추어 화면당 책임 그래프를 스토리보드에 올려보면 다음과 같이 구현해 볼 수 있습니다. 3가지 책임 화면을 분류하고자 앱의 시작점에 TabBarController가 사용되었습니다. 각종 사항을 통계내고 분석하는 것은 통계 및 분석 도구 화면으로 정의하여 Summary라는 이름의 첫 번째 탭에 할당되었네요. 통계 정보의 구체성과 연관 지어 사용자의 탐색 구조를 구현하고자 NavigationController로 감싸주고 탐색 트리의 단말에는 보일 정보 혹은 Usecase 들을 UILabel을 활용해 적어두었습니다.

두 번째 화면에는 기업의 채용 지원 내역을 관리하는 것을 지원서 관리 화면으로 정의하여 JobPosting 이라는 이름으로 두번째 탭에 할당되었습니다. 같은 논리로 지원서들의 컬렉션과 선택한 단일 지원서에 관하여 정보 계층상 구체성 관계를 띄기 때문에 사용자의 탐색 구조를 구현하고자 NavigationController로 감싸주었습니다. 정보의 컬렉션을 표현하고자 TableViewController를 사용해 보았고요. 탐색 트리의 단말에는 보일 정보 혹은 Usecase 들을 Label을 활용해 적어두었습니다.

세 번째 화면에는 기업의 채용 공고를 조사하는 것을 채용 정보 추적 화면으로 정의하여 Jobs 라는 이름으로 세번째 탭에 할당되었습니다. 이것 또한 같은 논리로 정보의 컬렉션과 단일 정보 간의 구체성 관계를 표현하고자 NavigationController로 감싸주었습니다. 정보의 컬렉션을 표현하고자 TableViewController를 사용했고요. 사용자가 새로운 채용공고를 추가하는 작업을 표현하고자 modality를 활용했습니다. 입력될 데이터 속성 정보를 표현하고자 TextField를 사용했습니다.

프로토타입 평가

Xcode의 run 버튼을 눌러서 시뮬레이터를 통해 프로토타입을 구동해 보세요. 아이폰을 사용하고 계시다면 이미 애플의 HIG에 담긴 내용들이 몸에 채득 되어있을 거예요. 어색하게 느껴지는 사용자 경험이 있다면 그와 관련 한 HIG 가이드를 읽어보면서 고쳐가세요. 앱에서 익숙한 사용자 경험이 느껴질 때가 바로 실제 개발로 넘어가서 나만의 세부적인 스타일을 담아줄 시기라고 생각해요.

마무리

여기까지 오시느라 수고하셨습니다. 이번 시간에는 제가 사용한 앱 프로토타입 제작 방식을 소개해드렸습니다. 어떤 도구나 방식을 사용했는지는 별로 중요하지 않다고 생각합니다. 본질적으로 어떤 문제를 해결하고 사용자 경험을 개선해 나가는 과정이 더 중요하다고 생각합니다.

프로토타입을 개발함에 있어서 익숙하게 다룰 수 있는 디자인 도구(프로그램)가 있다면 그것을 활용하는 것이 단기간에 성과물을 도출하는데 도움 될 겁니다. 없어도 상관없습니다. 흰 종이와 연필 하나만 있으면 도구 사용법에 얽매이지 않고 자유롭게 디자인해 볼 수 있으니까요.

제가 사용한 방법을 참조해서 여러분에게 친숙한 방식의 프로토타이핑 제작 방식을 만들어나가 보세요. 감사합니다.