이제 우리는 우리가 만들 앱에 대한 아이디어와 개발 플랫폼을 결정하였다. 이제 당신의 아이디어를 실체화 시킬 때가 되었다. 코드 작성으로 뛰어들기 전에, 코드를 재작성하거나 또는 리팩토링하는 것으로 끝나지 않도록 약간의 기획이 필요하다. 이것이 기획 프로세스에서 우리의 다음 단계인 프로토타이핑(prototyping)이다.
프로토타이핑(Prototyping)
전통적으로 어플리케이션 스펙을 생성하는 여러 가지 방법이 있다. 앱 개발 시에 (보통은) 제한된 수의 화면과 기능들 때문에 와이어프레임과 프로토타입을 만드는 것이 점차 인기를 얻고 있다. 와이어프레임 스케치는 당신의 생각을 종이에 그려서 앱이 어떤 기능을 가질 것이고 어떤 흐름을 가질 것인지 함께 계획하는 첫 단계가 된다.
당신은 여기서 멈추고 바로 개발을 시작할 수도 있다. 하지만 지금까지 그려진 것들로도 앱이 개발된 후에 실제로 핸드폰 상에서 어떻게 느껴질 것인지 그림을 그리기 어렵다. proto.io로 가보자.
proto.io는 디자이너와 개발자들이 디지털 와이어프레임, 플로우, 그리고 디자인들을 코드 작성없이 쉽게 만들 수 있게 해 주는 서비스이다. 이건 와이어프레임을 당신의 손 안에 잡게 해주고, 버튼들을 태핑하고, 화면 사이에서 움직이게 해주는 아주 대단한 방법이다. 이 버튼이 이 영역에서 가장 잘 작동할 것인가 아니면 저쪽에서 잘 작동할 것인가? 화면들을 이 순서대로 배열하는 것이 의미가 있을까? 이런 질문들에 대해 최소한의 노력으로 코드 작성하기 전의 초기 단계에서 대답할 수 있으면 수백 시간의 개발 시간을 절약할 수 있을 것이다. 당신이 한 명 이상의 팀이라면, 빨리 반복하고 아이디어들을 주고 받을 수 있는 훌륭한 방법이다. 한편으로 프로토타입들이 당신의 디바이스에서 살아 움직이는 것을 볼 수도 있다.
이 단계는 당신은 여전히 개략적인 설계들을 사용 중일 것이다. 즉 이쁘지 않고, 네모 버튼, 90년대 스타일의 웹 사이트 같은 뭐 그런 것들. 중요한 것은 기능을 세분화(nail down)하여 프로토타입이 당신이 앱에서 하고자 하는 모든 것들을 명확하게 표현하는 것이다. 물론, 디자인 과정은 가능한 한 빨리 시작하는 것이 좋다. 그래서 지금이 시작하기 딱 좋은 때이다. 디자인들은 병렬적으로(asynchronously) 만들어지고 개발단계에 적절한 때에 하나의 옷처럼 기워질 수 있다.(woven)
디자인
고백하는 것으로 시작해 보자. 나는 엔지니어이다. 나는 토목 공학(civil engineering)과 컴퓨터 과학을 전공했고, 내가 우아한 코드보다 즐기는 몇 가지 것들이 있다. 내가 앱을 만들기 시작했을 때, 난 사용자들 또한 그 앱을 사랑할 것이라고 믿었다. 내가 몇 개의 앱을 런칭하고, 앱 스토어에서 경쟁을 하게된 후에야, 좋은 디자인이 얼마나 중요한 지 깨달았다.
눈을 사로잡아라.
당신의 앱 디자인은 사용자들이 당신이 생각하는 것을 느끼는 첫번째 터치 포인트이다. 당신의 앱을 열기도 전에, 그들은 앱 스토어에서 수많은 옵션들을 스크롤하고 있다. 그들이 느낄 첫번째 것들은 아마도 제목, 별 평가, 그리고 아이콘일 것이다. 이런 것들이 사용자들의 호기심을 불러일으켜서 당신의 앱을 탭한다고 가정해보자, 그들은 설명을 읽기 전에 당신의 스크린샷들을 볼 것이다.
이런 것들은 사용자의 선택 과정(process)에서 가장 중요한 포인트이고, 이들은 모두 당신의 디자인에 대해 사용자의 호감(appeal)에서 출발한다. 자 당신은 무엇을 할 수 있을까?
야하지만(flashy) 외설스럽지 않은(gaudy)
검색 결과와 순위 안에서 발견됨으로써 당신의 앱이 매우 의미있는 앱임을 증명할 수 있다. 앱 스토어에서 검색을 통해 경쟁 앱들을 확인하고 경쟁자들의 아이콘들을 보면서 경향(트렌드)이 어떤 지 파악해라. 당신이 다음과 같은 스크린을 본다면, 어떤 것이 두드러지느냐? 당신의 경쟁자들을 알고 당신이 경쟁력을 갖고 대중 속에서 두드러지기 위해서 할 수 있는 모든 것을 해야 한다는 것을 기억해라.
크고, 짙은 색깔은 눈을 사로잡는 데 큰 도움이 될 수 있다. 하지만 그런 아이콘들이 당신의 메시지를 잘 전달해야 한다. 당신이 업무 앱을 만들고 있다면 네온 핑크색 같은 건 갈 길이 아닐 것이다.
내용
당신의 로고는 명확하고 간결해야 한다. 사용자들이 당신의 아이콘과 로고로부터 직접적으로 당신의 앱이 무엇을 하는 지 이해할 수 있어야 한다. 너무 많은 정보를 넣지 않도록 하고, 너무 많은 색이나, 복잡하게 디자인된 아이콘 등을 피해야 한다. 아이콘이 어지럽고 요란하다면, 사용자는 당연히 당신의 앱도 그럴 것이라고 생각할 것이다. 다음의 아이콘들을 보자, 어떤 것이 더 많이 그려진 것 같은가?
대단한 경험을 만들기
당신이 가장 좋아하는 앱을 생각해보자. 가장 많이 사용하는 앱일 필요는 없으며 즐기는 앱이면 된다. 하나를 지금 바로 열어서 디자인을 보자. 아마도 깨끗하고(clean) 명확하며(clear), 친숙한 색채(color scheme)로 되어 있을 것이다. 앱을 디자인할 때, 이 세 컴포넌트는 좋은 경험을 만드는 데 핵심적이다.
그러나 일반적으로는 디자이너들이 픽셀이 아주 정확하게 계산된 많은 화면들과 손이 많이 간(hand over) 포토샵 파일들을 만들어 낸다. 그들이 거기에서 멈추게 하지 마라. 훌륭한 앱은 대단해 보일 뿐만 아니라 대단하게 느껴져야 한다.
당신은 "도대체 그게 뭔 소리야"라고 물을 지 모른다. 그러니 당신이 좋아하는 앱을 탭하기 시작해라. 당신이 평소에 느끼지 못했던 것들을 느끼려고 시도해보라. 화면 사이의 이동이나 뷰가 화면에 뜰 때 애니메이션이 커지는 것, 탭했을 때 반짝이는 버튼, 적절하게 실행되는 애니메이션(clever loading animation) 등. 이런 것들이 적절하게 이뤄지면, 이것들은 당신의 경험과 충돌하는 것이 아니라 오히려 강화시킨다. 사용자가 당신의 앱을 탭하는 걸 즐긴다면, 당신은 제대로 된 길에 서 있는 것이다.
예
사용자들이 좋게 느끼는 앱 중 내가 좋아하는 한 예는 아이폰의 B&H Photo이다. 당신이 이 앱을 다운로드해서 쇼핑카트에 뭔가 추가하기를 권한다. 어서 시도해 보라. 그리고 당신이 즐기지 않는 척 하지 않기를 바란다. 무언가에 돈을 지불하는 것을 즐기는 사용자를 당신이 얻게 된다면, 당신은 제대로 한 것이다.
결론
적절한 기획은 당신의 몇시간, 몇일, 몇주 그리고 심지어 몇달의 낭비되는 개발 시간을 절약해 줄 수 있다. 처음에는 지나친 오버헤드처럼 보일 수도 있으나 어떤 규모의 팀들이라도 개발을 시작하기 전에 구현해야 하는 주요 특징이나 화면들을 알 수 있어야 한다는 것은 필수적이다. 개발이 시작되면, 디자인을 정제하거나 반복 과정을 거쳐 개선되는 것이 동시에(in parallel) 이뤄질 수 있다. 이상적으로는 앱 론칭을 준비할 때, 디자인과 개발이 합쳐져서 하나의 대단한 앱으로 만들어 진다.
이제 프로토타이핑과 디자인에 대해 생각할 거리를 얻게 되었으니 당신과 당신의 팀이 효율적인 개발자(coder)가 되도록 도와줄 훌륭한 IDE에 대해 얘기할 다음 회차(installment)를 지켜보라.
——————–
Crittercism is the leading provider of mobile crash reporting and performance monitoring with over 20,000 apps utilizing the platform. With a simple SDK, you can add top of the line performance monitoring in less than 10 minutes. Sign up for free at http://crittercism.com/
Chris is a Developer Evangelist at Crittercism, and has been building apps for iOS and Android since the early days of the iPhone SDK. His apps have gathered tens of millions of downloads across platforms and he continues to build as the lead developer for Whitewater Labs.
——————–
'모바일 앱 개발 일반' 카테고리의 다른 글
스텝 2 : 앱 플랫폼 선택하기 (0) | 2015.01.05 |
---|---|
스텝 1 : 앱을 개발하고 싶어요, 다음은 뭔가요? (0) | 2015.01.05 |