2013/05/14

아이폰용 앱을 위한 프로토타이핑 앱

프로토타이핑의 중요성이야 아무리 강조해도 지나치지 않습니다만, 막상 iOS나 Android용 프로토타입을 만드려고 하면 아무래도 막막하죠. 특히나 개발경험이 없는 기획자나 디자이너들은 더 막막하지요. iOS용 프로토타이핑 방법은 HTML을 활용하거나 Keynote를 사용하는 방법에서부터 Xcode, Interface Builder로 살짝 코딩해보는 방법까지 다양합니다. 개인적으로는 Keynote나 HTML을 사용하곤 했는데, 이보다 쉽고 효과적인 앱을 하나 소개해보고자 합니다. 저도 이 앱을 만드는데 도움을 조금 드린 입장이라 살짝 편파적이기는 하겠네요. :)

이미지 기반의 프로토타이핑 앱, "앱필"입니다. 말그대로 이미지만 몇 장 만들면 이 앱이 각 이미지들을 서로 서로 연결하도록 도움을 줍니다. 프로토타이핑 툴 자체가 앱으로 만들어졌기 때문에, 앱이 돌아가야하는 환경에서 작업이 되고 시뮬레이션되어서 즉각적으로 디바이스에서 어떻게 보여질지 알 수 있다는 점이 큰 장점입니다.

프로토타입 목록
앱을 실행하면 샘플로 들어있는 "Demo" 프로토타입이 보입니다. 좌측상단의 + 버튼을 누르면 새로 프로토타입을 생성할 수 있습니다.

이미지 불러오기
iTunes에서 이미지 폴더를 싱크시키면 사진앨범으로 들어갑니다. 그 다음에 사진앨범에서 이미지를 불러올 수 있습니다. 하지만 이것도 실제 디자인작업을 해보면 조금씩 수정한다음에 반복적으로 디바이스에서 확인을 해볼 필요가 생기기 때문에 여간 번거롭지 않습니다. 앱필에서는 Dropbox와 Picasa에서 이미지를 불러올 수 있습니다. 둘 다 충분한 기본 저장 공간을 제공하기 때문에 무료 계정만 사용하셔도 편리하게 이미지 불러오기를 하실 수 있습니다. 그리고 이미지 불러오기를 할 때 이미지 폴더를 선택하면 폴더를 통째로 불러오기 때문에 디자인작업을 할 때 버전별로 폴더를 만드시면 더욱 편리할 수 있습니다.
편집 - Drag & Drop으로 이미지 순서 정렬
일단 이미지가 다 불러지고난 후, "완료"를 누르고 "프로토타입 실행"을 누르면 바로 프로토타입을 실행해볼 수 있습니다. 기본적으로 각 페이지를 탭하면 다음페이지로 이동하는 기능이 제공됩니다. Liner flow로만 use case를 검증하거나, 대략적인 앱의 컨셉을 검증하는 수준 혹은 high fidelity design이 디바이스에서 어떻게 보이는지 확인하는 정도라면 이렇게만 쓰셔도 충분하리라 예상됩니다.

하지만, 역시 프로토타이핑을 해보다보면 욕심이 나기 마련이죠. :) 내비게이션바도 달고, 탭바도 달고 싶고, 화려한 트랜지션도 좀 넣어보고 싶고 등등... 앱필은 iOS에 제공하는 기본적인 내비게이션을 모두 지원합니다.
상세 페이지
각 상세페이지에 보면, 페이지에 링크를 걸거나 페이지가 이동될 때 어떠한 전환 효과를 줄지 설정할 수 있게 되어 있습니다.
페이지 전환 효과 선택
내비게이션바와 탭바의 상세 설정
앱필의 또다른 장점은 페이지가 긴 경우에 자동으로 스크롤이 가능하도록 설정을 해준다는 점입니다. 저도 전에 아이폰에서 디자인이 어떻게 되는지 보려고 사진앨범에 넣어봤었는데요, 사진앨범의 문제는 전체 이미지가 다 보이도록 자동 리사이징을 한다는데 있습니다. 스크롤이 필요한 긴 페이지는 사진앨범으로 보는데 한계가 있죠. 이 자동 스크롤 세팅은 내비게이션바나 탭바를 사용했을 때 진가를 발휘합니다. 내비게이션바와 탭바의 설정을 On으로 하면 화면 상단과 하단에 각각 내비게이션바와 탭바가 항상 보여지면서 페이지는 여전히 스크롤이 가능합니다.

이 정도 기능이면, 커스텀UI를 많이 쓰지 않는 이상 실제와 거의 유사하게 프로토타입을 만드는데 별문제가 없을 것 같네요. 특히 Use case를 검증하는 용도라면 더할나위 없이 좋은 앱인 것 같습니다. 무료로 배포되고 있습니다만, 무료버전은 프로토타입 생성개수에 제한이 있습니다. 유료버전은 $4.99.

커피한잔 가격으로 이정도 수준의 프로토타입을 만들어 볼 수 있다면, 충분히 투자해볼 가치는 있는 것 같네요.
app.eal - Prototype Your App Idea - 아이튠에서 보기

댓글 2개:

  1. 이보다 더 안전할 순 없습니다!!

    에이전시 상위호환 단계의 페이먼트사로
    라이센스는 물론 300억대 마권보험 가입有

    MAX88 주소: max88vip.com

    스포츠북 : 10BET,IBCBET,CMD Sports
    카지노: 아시아게이밍,마이크로게이밍,게임플레이
    슬롯: 게임플레이,마이크로게이밍

    ·페이먼트사로 코드없이 가입가능
    ·슬롯,카지노 모바일 무설치 지원

    한국 외 7개 아시아지역 동시 온라인서비스중!

    가입주소: max88vip.com
    카카오톡 (이용 및 파트너제휴) : m88krw

    ※ 신규 첫 입금 20% 제공
    ※ 매일 첫 입금시 3% 보너스 제공
    ※ 매일 최대 20% 충전 보너스 제공
    ※ 신규 첫 입금시 최대 100,000KRW 제공
    ※ 한국인 상담원, 한국 원화 입출금
    ※ 더블찬스 배팅 및 수 많은 스페셜배팅
    ※ 하루 2만가지 라이브배팅
    ※ 별도의 배팅제재 없음
    ※ 배팅 판매 이벤트

    주소: max88vip.com
    카카오톡 (이용 및 파트너제휴) : m88krw

    답글삭제
  2. 이보다 더 안전할 순 없습니다!!

    에이전시 상위호환 단계의 페이먼트사로
    라이센스는 물론 300억대 마권보험 가입有

    MAX88 주소: max88vip.com

    스포츠북 : 10BET,IBCBET,CMD Sports
    카지노: 아시아게이밍,마이크로게이밍,게임플레이
    슬롯: 게임플레이,마이크로게이밍

    ·페이먼트사로 코드없이 가입가능
    ·슬롯,카지노 모바일 무설치 지원

    한국 외 7개 아시아지역 동시 온라인서비스중!

    가입주소: max88vip.com
    카카오톡 (이용 및 파트너제휴) : m88krw

    ※ 신규 첫 입금 20% 제공
    ※ 매일 첫 입금시 3% 보너스 제공
    ※ 매일 최대 20% 충전 보너스 제공
    ※ 신규 첫 입금시 최대 100,000KRW 제공
    ※ 한국인 상담원, 한국 원화 입출금
    ※ 더블찬스 배팅 및 수 많은 스페셜배팅
    ※ 하루 2만가지 라이브배팅
    ※ 별도의 배팅제재 없음
    ※ 배팅 판매 이벤트

    주소: max88vip.com
    카카오톡 (이용 및 파트너제휴) : m88krw

    답글삭제