앱이 앱을 키운다. 앱 개발자가 스마트해지는 방법

상세페이지

  • HOME > 월별 특집 & 기획

앱이 앱을 키운다. 앱 개발자가 스마트해지는 방법

언제 어디서나 사용 가능하고 업무에 도움되는 앱이 등장하면서 직장인의 업무 효율은 높아졌다. 앱 개발자들도 예외는 아니다. 스마트폰 스토어에는 와이어프레임 앱, 목업 앱 등 앱 개발자의 업무를 도와주는 앱들이 존재한다. 어린이가 유아를 보살피는 것을 보면서, 아기가 아기를 키운다는 말을 한다. 이제는 앱이 앱을 키운다. 본 기자는 아이폰과 아이패드를 활용해, 앱 개발에 도움되는 앱을 살펴봤다.

글. 신건우 gw@websmedia.co.kr


1. 앱이 앱을 키운다. 앱 개발자가 스마트해지는 방법
2. 프로세스와 찰떡궁합인 디자인 툴 찾기
3. 나는 마케터다

앱 개발자에게 가장 중요한 건, 다른 팀과의 커뮤니케이션이다. 기획자가 구상하고 디자이너가 그린 앱을 잘 구현해내기 위해 서로 많은 이야기를 나눠야 한다. 가상의 상황을 설정해보자. 앱 개발 회사에서 스마트 기기를 잘 활용하는 A 개발자를 설정해봤다. 스마트 기기 앱이 앱 개발에 어떻게 도움되는지 알아봤다. A 개발자가 어떻게 빠르고 효과적으로 커뮤니케이션하는지 염두하면서 지켜보자.

현장에서 그리는 와이어프레임
기획자, 디자이너, 개발자가 한자리에 모여, 새로 제작할 아이폰 앱에 대해 회의를 한다. 종이에 스케치한 몇 장의 화면 구성이 나왔고, 모두 어떻게 구동될지 궁금해한다. A 개발자가 아이패드를 꺼내, ‘Team Proto’를 실행한다. 스캔 버튼을 클릭해, 회의에서 나온 화면 구성을 카메라로 촬영해 스캔한다. 스캔한 화면 구성은 ‘카드’라는 보관소에 순서대로 정렬된다. 화면마다 이름을 입력하고, 정렬이 잘못됐다면 순서를 변경한다. A 개발자는 기획자와 디자이너와 함께 이야기하면서 각 화면에 들어갈 제스처를 입력했다. 오른쪽 상단에 플러스 버튼을 누르고, 범위를 설정해 하단의 ‘제스처’를 클릭했다. 그러면 탭, 홀드, 스와이프 등 실행 버튼이 나타났다. 다음으로 ‘링크 투’를 눌러 제스처가 실행되고 넘어갈 화면을 선택했다. 이렇게 화면마다 실행 버튼을 입력한 A 개발자는 와이어프레임을 단번에 완성했다. 기획자와 디자이너에게 완성된 와이어프레임을 한눈에 파악할 수 있도록 ‘스토리보드’에 들어갔다. 화면마다 입력 신호를 통해 어느 화면으로 이동하는지 쉽게 볼 수 있었다. A 개발자는 ‘Team Proto’를 통해 짧은 시간 앱의 전체 구성도를 현장에서 만들었다. 손쉽게 와이어프레임을 제작해 기획자, 디자이너와 함께 현장에서 커뮤니케이션할 수 있었다. 바로 피드백도 받고, 수정할 부분도 파악했다. A 개발자 또한 이러한 작업을 통해 어떻게 앱 개발을 할지 생각할 수 있었다. 참고로 ‘Team Proto’ 앱은 무료로 다운 가능하며, 추가 구매를 통해 아이폰과 아이패드 동기화를 사용할 수도 있다.


Team Proto로 제작한 와이어프레임


Team Proto 스토리 보드


Team Proto 제스처 설정

한 손으로 제작한 테스트 버전
회의에서 구성한 와이어프레임이 실제 화면에서 어떻게 보일지 궁금했다. 테스트 버전을 제작해 다른 팀에게 빨리 피드백을 받고도 싶었다. 회의 때 사용했던, 아이패드를 다시 꺼냈다. 비싸게 구매한 유료 테스트 버전 제작 앱인 ‘App Cooker’를 실행했다. 이 앱은 아이패드에서만 지원하며, ‘Team Proto’처럼 와이어프레임 형식으로 제작하면 된다. 다른 점이 있다면, 실제 적용되는 디바이스 화면에서 구동 화면을 볼 수 있다는 점이다. 새로운 프로젝트를 만들기 위해 추가 버튼을 실행했다. 애플 워치부터 아이폰, 아이패드까지 디바이스 포맷이 나온다. 이번 프로젝트에서 아이폰 6 앱을 제작하기 때문에 해당하는 포맷을 선택했다. ‘Team Proto’에서 했던 작업을 그대로 옮긴다는 생각으로 순서대로 작업했다. 위젯과 버튼을 추가하고, 사진을 적용하기 위해 그림 버튼을 터치했다. 아이클라우드와 드롭박스 등 클라우드 서버에 있는 사진도 불러올 수 있어, 사진 추가가 더 편했다. 글씨도 추가하고 하나씩 화면을 채워 나갔다. 화면 구성이 모두 끝나고, 실행 버튼을 입력해 와이어프레임을 완성했다. 처음부터 다시 돌아가, 화면 구성을 한 번 더 확인하고, 와이어프레임 실행 버튼들이 제대로 적용됐는지도 꼼꼼히 확인했다. 마지막으로 앱 플레이 버튼을 눌러, 제작한 테스트 버전을 실행해봤다. 실제 화면처럼 적용하기 위해 시간은 꽤 걸렸지만, 그래도 손쉽게 테스트 버전을 완성했다.


App Cooker 초기 화면


App Cooker 실행 버튼 추가


App Cooker로 제작한 테스트 버전

쉽고 빠른 피드백을 위한 방법
이제 완성한 테스트 버전을 기획자와 디자이너에게 전달해, 피드백을 받아야 했다. 하지만, 직접 가서 보여줄 수도 없는 상황. 또한, 개발자가 아닌 기획자와 디자이너에게 ‘App Cooker’가 있을 리는 만무했다. 하지만 ‘App Taster’라는 무료 앱을 다운 받으면 ‘App Cooker’에서 작업한 프로젝트를 볼 수 있다. 일단, ‘App Cooker’에서 공유 버튼을 눌러, 기획자와 디자이너 ‘App Taster’로 공유했다.
이 앱은 공유 받은 앱 테스트 버전을 실행 시켜주는 뷰어라고 생각하면 된다. 아이폰, 아이패드 모두 지원하며 무료로 다운받을 수 있어 부담도 없다. 뷰어 앱답게 화면 구성도 간단하다. 공유 받은 프로젝트를 불러와, 재생 버튼만 누르면 된다. 그러면 전체화면으로 제작한 앱이 실행된다. 실제 스마트폰을 실행하듯, 사용하면 되기 때문에 어려울 것도 없다. A 개발자는 이 앱을 통해 제작한 테스트 버전을 쉽게 전달하고, 기획자와 디자이너에게 빠르게 피드백 받을 수 있었다. A 개발자에게 몇몇 수정사항이 전달됐고, 이를 토대로 본격적인 앱 개발을 시작할 수 있었다.


App Cooker 공유 기능


App Taster 초기 화면


App Taster를 이용한 재생 화면

이 단계까지 오면서, 앱 개발자는 PC를 한 번도 켜지 않았다. 아이폰과 아이패드를 사용해 손쉽게 와이어프레임과 테스트 버전을 제작하고 공유할 수 있었다. 또한, 앱을 통해 기획자, 디자이너, 개발자는 더 빠르고 효과적으로 커뮤니케이션할 수 있었다. 시간이 절약되면 그만큼 완성도에 에너지를 쏟을 수 있다. 스마트 기기를 사용해 줄어든 시간은 분명, 더 좋은 앱을 제작하는 원동력이 될 것이다. 앱을 사용해, 더 스마트하게 앱을 개발해보자.

tags 디아이투데이 , ditoday , 디아이 매거진 , DI 매거진 , 앱 개발자 , 와이어프레임 , Team Proto , App Cooker , App Taster

저작권자 © 웹스미디어 무단 전재-재배포 금지

뉴스콘텐츠는 저작권법 제7조 규정된 단서조항을 제외한 저작물로서 저작권법의 보호대상입니다.
본 기사를 개인블로그 및 홈페이지, 카페 등에 게재(링크)를 원하시는 분은
반드시 기사의 출처(로고)를 붙여주시기 바랍니다.
영리를 목적으로 하지 않더라도 출처 없이 본 기사를 재편집해 올린 해당 미디어에 대해서는 합법적인 절차(지적재산권법)에 따라
그 책임을 묻게 되며, 이에 따른 불이익은 책임지지 않습니다.

URL 복사 출력하기 목록보기 스크랩하기

관련기사

최신뉴스
월드리포트
Swim into The VR The Power of Swimming
월드리포트
오고 가는 음식 속에 싹트는 사랑 Knorr ‘Love At First Taste’
월별 특집 & 기획
앱이 앱을 키운다. 앱 개발자가 스마트해지는 방법
월별 특집 & 기획
프로세스와 찰떡궁합인 디자인 툴 찾기
월별 특집 & 기획
나는 마케터다

정기구독신청