당신은 주제를 찾고 있습니까 “어플 기획서 – [IT창업]03.웹\u0026앱 설계 기획서 작성하기 (IT창업 마지막 단계)“? 다음 카테고리의 웹사이트 https://you.maxfit.vn 에서 귀하의 모든 질문에 답변해 드립니다: https://you.maxfit.vn/blog. 바로 아래에서 답을 찾을 수 있습니다. 작성자 민썸 MinSsum , 스타트업 크리에이터 이(가) 작성한 기사에는 조회수 15,382회 및 좋아요 471개 개의 좋아요가 있습니다.
어플 기획서 주제에 대한 동영상 보기
여기에서 이 주제에 대한 비디오를 시청하십시오. 주의 깊게 살펴보고 읽고 있는 내용에 대한 피드백을 제공하세요!
d여기에서 [IT창업]03.웹\u0026앱 설계 기획서 작성하기 (IT창업 마지막 단계) – 어플 기획서 주제에 대한 세부정보를 참조하세요
안녕하세요!! IT 스타트업 크리에이터 민썸입니다.
오늘은 IT창업에서 가장 중요한! 화면설계서, 웹\u0026앱 기획서 작성 방법입니다.
IT가 어려우신 분들은 1편부터 봐주시면 더 이해가 되실거에요!
어플 기획서 주제에 대한 자세한 내용은 여기를 참조하세요.
고양이도 할 수 있는 앱 설계서 작성법 – 브런치
화면 설계서(와이어프레임) 이렇게 만듭니다 | 앱 화면 설계서(와이어프레임) 작성 매뉴얼입니다. 원래 나중에 후배가 생기면 한껏 차갑고 전문적인 …
Source: brunch.co.kr
Date Published: 5/5/2022
View: 1198
앱기획서, 이런 게 있다면 아직 개발하지 마세요. – 린코퍼레이션
전문가에겐 기본이지만, 처음 앱기획서를 제작하시는 분들이 가장 자주 하는 실수 3가지를 알려드리겠습니다. 앱개발 실패 후 린코퍼레이션을 찾아오신 업체 중 80% …
Source: leanstarter.co
Date Published: 1/24/2022
View: 9113
앱개발 기획 프로세스 한 장 정리 – 캐스팅엔
안녕하세요. 업무마켓 캐스팅엔입니다. 앱개발 어느 단계까지 준비가 되셨나요? 일반적인 앱개발 프로세스는 크게 네 가지 과정을 거치게 됩니다.
Source: www.castingn.com
Date Published: 11/16/2022
View: 7027
주제와 관련된 이미지 어플 기획서
주제와 관련된 더 많은 사진을 참조하십시오 [IT창업]03.웹\u0026앱 설계 기획서 작성하기 (IT창업 마지막 단계). 댓글에서 더 많은 관련 이미지를 보거나 필요한 경우 더 많은 관련 기사를 볼 수 있습니다.
![[IT창업]03.웹\u0026앱 설계 기획서 작성하기 (IT창업 마지막 단계)](https://i.ytimg.com/vi/1hfhUmb_bRc/maxresdefault.jpg)
주제에 대한 기사 평가 어플 기획서
- Author: 민썸 MinSsum , 스타트업 크리에이터
- Views: 조회수 15,382회
- Likes: 좋아요 471개
- Date Published: 2021. 4. 25.
- Video Url link: https://www.youtube.com/watch?v=1hfhUmb_bRc
[앱 비지니스 기획] 기획의 개요 및 기획서 작성 방법
안드로이드 앱(어플)의 기획 및 기획서 작성 방법
1. 앱(어플)의 기획단계
앱을 만들려고 한다면 어떤 것을 먼저 생각해야 할까요?
1-1. 어떤 앱인가?
요즘은 누구나 소형화된 컴퓨터인 스마트폰을 가지고 있고 스마트폰의 힘은 무궁무진합니다. 스마트폰을 통해 사용자에게 어떤 가치를 제공할 수 있는 앱인지 기획단계에서 생각해 보아야 합니다.
1-2. 누가 사용하는가?
앱이 어떤 가치를 제공하는지 정했다면 주 사용자층을 정해야 합니다. 사용자층에 따라 앱의 디자인과 구성을 맞춰주어야 오래가고 사랑받는 앱이 될 것입니다. 가령 사용자층이 고령인 건강관리 앱을 만든다면 사용자가 사용하기 편하게 앱의 구성은 단순해야 하고 디자인 또한 너무 화려하면 좋지 않습니다. 사용자층이 20~50대인 SNS나 커뮤니티 앱을 만든다면 그에 맞는 구성요소와 디자인으로 기획을 해야 합니다.
1-3. 얼마나 운영할 것인가?
앱이 얼마나 운영될지도 생각해 보아야 합니다. 단순 계산기 앱을 만든다면 한번 만들고 더 이상의 업데이트나 관리는 필요 없을 것입니다만 SNS나 커뮤니티 앱을 만든다면 지속적인 관심과 관리가 필요합니다. 기획단계에서 정기적인 업데이트가 가능하도록 어떤 방법(실행 시 업데이트 혹은 자동 업데이트)을 사용할 것인지 담아 놓아야 합니다.
1-4. 수익을 어떻게 낼 것인가?
앱의 주목적인 수익을 어떤 방식으로 낼 것인지 생각해보아야 합니다. 앱을 유료로 만들거나 정기구독의 방식으로 만든다거나 무료로 만든다면 광고를 어디에 어떻게 개제해야 하는지도 미리 생각해두면 좋습니다. 디자인을 다 끝내 놓고 갑자기 광고 배너를 추가한다면 원래 마무리했던 디자인과 어긋나 있을 수도 있습니다.
2. 앱(어플)의 기획서
2-1. 기획서의 필요성
번뜩이는 아이디어가 생겨 앱을 만들려고 기획을 했다면 기획서를 작성해야 합니다. 기획서가 있으면 앱을 개발하는데 큰 길잡이가 됩니다. 맛있는 요리를 만들 때에도 요리에 들어가는 재료와 재료가 들어가는 순서가 적힌 레시피가 있으면 더 완벽한 요리가 되듯이 앱에 어떤 재료가 들어가고 어떤 식으로 구성되어 있는지 미리 안다면 더욱 나은 앱이 완성될 것입니다.
2-2. 이해하기 쉽게 작성해야 하는 기획서
개발자에게 앱의 사용자가 어떤 동작을 해서 어떤 기능을 구현할 것인지 설명해 주어야 합니다. 가장 기본적으로 앱 실행과 종료 시 어떻게 실행되고 어떻게 종료하는지 설명을 해주어야 합니다. 앱을 실행시키면 스플래시 이미지가 먼저 실행이 되는지(인트로) 바로 메인 액티비티가 실행이 되는지, 종료는 버튼을 만들어 누르면 종료시킬 것인지 뒤로 가기를 두 번 눌러 종료시킬 것인지 등 꼼꼼하게 체크해야 합니다. 자신이 앱을 만든다면 상관없지만 만약 개발자에게 맡긴다면 개발자가 이해하기 쉽고 효율적으로 만들 수 있게 기획서를 작성하여야 합니다.
2-3. 기획서의 양식
기획서는 회사마다 양식이 다르기 때문에 필요한 기능을 담아 복잡하지 않게 작성하여야 합니다. 앱의 기획서는 포토샵, PPT로 작성하여도 좋고 카카오 오븐으로 작성하여도 좋습니다. 설명만 잘 되어 있다면 그림판이나 메모로 마인드맵 형식으로 작성하여도 됩니다. 어떤 프로그램을 쓰냐는 중요하지 않고 기획서를 보는 사람이 앱의 기능을 잘 파악하게 하면 됩니다. 앱 화면의 구성요소와 해당 화면의 역할과 구성요소의 역할만 잘 적어준다면 기획서는 문제가 없습니다. 첫 기획서는 대부분 수정되기 때문에 디자인을 신경 쓰기보다는 간결하게 만드는 것이 좋습니다.
2-3. 정보 구조도(IA)
앱 내 페이지를 마인드 맵 형식으로 보기 쉽게 그려 놓은 목차입니다. 정보구조도를 작성하면 화면마다 경로를 쉽게 볼 수 있어 개발자에게 앱의 구조를 파악하는데 도움이 됩니다. 정보 구조도는 페이지가 많을수록 복잡해집니다. 연결되는 페이지만 표시해서 간단하게 만들어도 좋고 페이지 내부에 기능들을 간단하게 적어 놓아도 좋습니다. 주로 엑셀과 트리 구조의 정보 구조도를 쓰지만 어떤 방식이든 구조를 이해할 수 있게 작성하면 됩니다. 실제로 포스트잇을 붙여서 보여준 곳도 있고 손으로 그려서 만들어준 곳도 있습니다. 아래는 PPT로 만든 간단한 정보 구조도의 예시입니다.
화면 구성만 있는 간단한 정보 구조도 간단한 기능을 적은 정보 구조도
3. 앱(어플) 기획서 작성 방법과 예시
3-1. 화면 구성 및 설명
기획서를 위해 맨 먼저 해야 할 일은 화면(페이지)을 만드는 일입니다. 필요한 페이지를 만들어 이름을 붙여 주어야 합니다. 이름은 겹치지 않게 주기능을 설명해주며 지어야 합니다. 화면이 어떤 이유로 있는지와 추가사항을 적어주면 더 좋습니다. 위의 구조도를 참고하여 페이지를 만들고 화면을 구성해 보겠습니다.
카카오 오븐으로 구성한 화면
화면 이름 옆의 A001은 화면 코드입니다. 앱을 제작하는 도중 화면이 추가되거나 기능을 추가할 때 혼동되지 않게 붙여주면 좋습니다.
3-2. 화면 경로 작성
다음은 화면(페이지)들이 어떻게 이어지는지 화면 경로를 작성하여야 합니다. 화면 경로가 없으면 후에 화면을 추가하거나 삭제하면서 경로가 없어지거나 원하지 않는 경로가 만들어져 기획과는 다른 앱이 될 수도 있기 때문입니다. 위의 구조도를 예를 들자면 메인 화면이 수정되어 없애고 메인 2 화면을 쓰기 위해 로그인 화면 -> 메인2 화면으로 경로를 잡았으나 회원가입 -> 메인2 화면으로 경로를 설정하지 않거나 잊어버린다면 회원가입을 한 후에 에러가 발생할 수밖에 없습니다. 위의 구조도는 화면이 몇 개 되지 않지만 화면이 많은 앱을 만들 때는 더 빈번하게 실수할 수 있기 때문입니다. 그러므로 화면이 되는 곳 옆에 테이블을 추가하여 이름과 경로를 적어 주겠습니다.
3-3. 구성요소 작성 및 설명
화면 경로까지 잘 적어 주셨다면 이제는 앱의 화면의 요소(컴포넌트)들을 잘 정리하여 표시하고 만들어 주어야 합니다. 그리고 담은 요소들에 설명을 해주어야 더 좋은 앱이 만들어집니다. 하나하나 만들어가며 설명하겠습니다.
로그인 화면
3-3-1. 수많은 에러 처리
구성요소의 단위들 마다 간단하게 혹은 상세하게 설명을 해주면 개발자가 고생을 덜 합니다. 상세 설명란에 보시면 로그인 화면에 들어가는 요소마다 설명을 해놓았습니다.
하지만 이 화면은 간단하게 만든 것이라 빠진 것들이 많습니다. 완벽하게 기획서를 작성하려면 생각보다 꼼꼼하게 챙겨야 할 것들이 많습니다. 예를 들면 아이디나 비밀번호를 비워두고 로그인 버튼을 눌렀을 때 ‘아이디를 입력하세요’, ‘비밀번호를 입력하세요’가 뜨는 팝업창이나 비밀번호를 몇 회 이상 틀렸을 시 동작하는 것은 이곳에 적어 두지 못했습니다. 에러를 하나하나 다 따져가면서 기획서를 써야 할까요?
에러의 경우를 하나하나 다 따져가면서 기획서를 작성하면 엄청난 시간과 노력이 필요합니다. 그래서 완벽하게 작성하기보단 중요 요소만 적당히 작성한 후 개발을 진행하면서 추가/수정을 해주는 것이 더 효율적입니다. 아무리 완벽하다고 생각하더라도 다시 수정하는 게 기획서입니다.
회원가입
3-3-2. 화면의 재구성과 가독성
지금 만들어진 회원가입의 기획서는 수많은 팝업으로 복잡해서 가독성이 떨어집니다. 5번 팝업 같은 경우는 화면을 하나 새로 만드는 것이 더 효율적일 수도 있습니다. 그때는 기획서를 수정하여 화면을 추가하면 됩니다.
기획서의 가독성을 높이는 또 다른 방법은 구성요소들을 숫자로 관리하거나 알파벳으로 관리하는 방법입니다. 표기가 되어 있으면 상세 설명을 하기도 쉽고 보기도 쉽습니다. 숫자와 알파벳을 섞어서 쓰거나 색깔로 구별 짓는 것도 하나의 방법입니다. 예를 들어 단순 동작은 숫자로, DB 처리돼야 할 것은 알파벳으로, 에러 처리는 빨간색으로, 수정이 필요한 것은 노란색으로 표기하는 등 알기 쉽게 표기하면 좋습니다. 개발자라면 상세 설명란에 Text, EditText, Image, Button 등을 바로 표기하여도 좋습니다.
메인화면
3-3-3. 뒤로 가기와 종료 처리
설명을 꼭 해주어야 할 것 중 하나가 경로에 대한 처리입니다. 화면 경로들을 어떻게 이동하고 앱의 종료는 어떻게 하는지 표시하여 주면 좋습니다. 메인화면 상세 설명 8번에 보시면 뒤로 가기 동작을 어떻게 해야 팝업이 뜨는지 적어 놓았습니다. 회원가입에서는 한번만 누르면 로그인으로 가고 로그인에서는 메인화면과 같이 두번 연속 눌러야 종료가 됩니다. 이런 경로들을 사용자가 어떻게 작동시키는지 기획에 담으셔야 합니다. 보통 안드로이드에서는 뒤로가기 동작으로 뒤로가거나 종료를 많이하고 IOS는 뒤로가기 버튼과 종료 버튼을 만들어 주어서 작동시킵니다.
개인 화면
3-3-4. 못생겨도 괜찮습니다.
기획서를 처음부터 예쁘게 꾸며 줄 필요는 없습니다. 중국집에서 자장면을 시키는데 ‘예쁘게 담아주세요’하고 시키나 ‘빨리 배달해주세요’ 하고 시키나 똑같은 자장면이 오듯이 아무리 예쁜 기획서로 예쁘게 만들어 달라고 해도 앱을 제작하다 보면 이리 뜯기고 저리 뜯기고 첫 기획서와는 많이 변경되며 결국 개발자가 디자인하기 때문입니다. 중요한 것은 최대한 기능이 잘 나타나고 개발자가 이해하기 쉽도록 만들어 주면 됩니다. 구성 요소의 위치와 클릭 영역 등 디자인 요소는 유명하고 잘 나가는 앱을 참고하면 좋습니다.
검색 화면(상세 설명란에는 DB에 대해 적어 놓았지만 적어도 되고 안적어도 됩니다. )
3-3-5. 적은 실수를 위해
기획서는 앱 제작이 진행 중 혹은 진행 후에도 변경이 자주 되므로 버전을 적어주어 관리하면 더 효율적입니다. 앱에 자그마한 변동사항으로 기획서를 수정하였다면 변경된 기획서를 보는 개발자와 디자이너가 혼란 스러 울 수 있습니다. 버전과 일자, 변경사항 등을 기록하면 무엇이 어떻게 변경되어가는지 볼 수 있고 디자이너와 개발자도 체크할 수 있어 실수를 줄일 수 있습니다.
다른 사람 프로필
3-3-6. 효율적인 기획
‘다른 사람 프로필’화면과 ‘개인 화면’화면은 요소가 거의 같습니다. 이런 경우, DB에서 불러오는 방식만 바꾸면 같은 화면에서 작동시킬 수 있습니다. 화면을 하나 더 만드는 것보다 한 화면에서 여러 가지 일을 하는 것이 앱이 덜 무거워집니다. 기획자와 개발자의 역량에 따라 다르지만 화면을 추가하거나 합치는 것을 생각하여 기획서를 짠다면 더 효율적인 기획서와 효율적인 앱 개발이 될 것입니다.
마치며
기획서를 쓰는 방법을 간단하게 살펴보았습니다. 앞서 말한 것과 같이 기획서는 정해진 표준 같은 것은 없습니다. 기획서는 앱을 잘 만들기 위해 존재합니다. 본질은 개발자를 도와주는 물건입니다. 사람마다 기획하는 방법과 개발하는 방법이 다릅니다만, 저는 기획서를 ‘대충-빨리-잘’의 순서로 작성하는 것을 추천합니다. 누가 개발을 하든 아무리 기획서를 잘 만들어도 기능이나 페이지가 추가되거나 버그 및 기술 문제 등으로 기획서는 필히 수정되기 때문입니다. 대충 정보구조도로 윤곽을 그려 빨리 기획서를 작성하고 앱을 잘 만들어 지기를 바랍니다. 앱뿐만 아니라 어떤 것이든 자신이 얼마나 간절하냐에 따라 결과물이 좋은 것 같습니다.
어플 기획서 작성법과 샘플 기획서
최근 비즈니스 전략의 일환으로 앱 개발을하는 기업이 증가하고 있습니다. 이번 포스트에서는 어플 개발 경험이 적은 분들을 위해, 어플 기획서 작성시 중요한 포인트 10개와 샘플을 모아 보았습니다.
애플리케이션을 개발하려고해도 “어디서부터 시작해야할지 모르겠다”라거나 “스스로 기획해 보았지만 자신이 없다”고 벽에 부딪치는 경우가 많다고 생각합니다.
그래서 기획은 “전문성이 높은 분야이기 때문에 제작사에게 맡겨 버리자” 라고 생각하는 분도 있을지 모르겠는데요. 턴키로 아웃소싱해 버리는 것에 다시 한번 생각해 보기를 추천합니다.
왜냐면 주문하는 쪽도 기획에 필요한 아이디어를 알아두면 프로젝트가 성공할 확률이 크게 높아지기 때문입니다.
목차
어플 기획서 작성 전에 고려해야 할 사항
포인트 ① 왜 이 어플을 만드는가?
포인트 ② 대상 사용자를 이해하고 있는가?
포인트 ③ 사용자에게 가치를 제공하고 있는가?
개발 관련 어플 기획서 작성 포인트
포인트 ④ 네이티브 어플, Web 어플?
포인트 ⑤ 어느 플랫폼과 디바이스에 대응해야 하나?
포인트 ⑥ 최소한 구현해야 할 기능은 무엇인가?
사업성과 관련 어플 기획서 작성 포인트
포인트 ⑦ “가치제공” 과 “수익” 의 균형이 잡혀 있는지?
포인트 ⑧ 앱 용량은 얼마나 되나?
포인트 ⑨ 얼마나 사용되는 어플을 만들고 싶은가?
포인트 ⑩ 디자인과 사용성에 대한 개발자의 이해가 있나?
어플 기획서 샘플
정리 앱 개발의 성공은 어플 기획서 작성에 달려있다
어플 기획서 작성 전에 고려해야 할 사항
우선, 응용 프로그램 개발의 출발점이되는 기획을 고려할 때 생각해야 할 포인트에서 설명하고 있습니다.
포인트 ① 왜 이 어플을 만드는가?
어플 기획서 작성 단계에서 먼저 생각해야 하는 것은 “과제 해결과 목표 달성을 위해 어떤 수단으로 어떤 조치를 할 것인가” 라는 것입니다.
“왜 이 어플을 만드는 것인가?” “이 응용 프로그램이 아니면 해결이 어려운 것은 무엇이지?” 라고 자문 자답하여 응용 프로그램 개발의 목적을 명확하게하는 것이 중요합니다.
맨 처음부터 “응용 프로그램 개발의 끝에 있는 목표는 무엇인가” 라는 부분을 명확하게하는 것이 어플 기획서 작성에 있어서 매우 중요한 포인트 입니다.
포인트 ② 대상 사용자를 이해하고 있는가?
대상 사용자에 대한 이해가 부족하다면, 응용 프로그램과 Web 서비스의 개발을 성공시키는 것은 매우 어려운 일이 되어 버립니다.
리서치 및 분석을 제대로하지 않고 “이런 어플이나 Web 서비스가 요구되고있는 것이 아닌가?”라고 믿어 버려 서비스를 개발하고도 실제로는 사용자 요구에 정확히 일치하지 않았다는 사례도 많이 있습니다.
모처럼 개발 한 앱을 아무도 사용하지 않는다.. 라는 것이되지 않도록, 앱 개발 및 기획을 시작하기 전에 사업의 목표를 명확하게 정의 해 둡시다. 대상 사용자에 대해 다음과 같은 항목을 의식하고 생각하면 좋을 것입니다.
★ 대상 사용자를 생각할 때 알아야 할 것
사용자의 속성 정보
사용자가 지금 놓여져있는 상황
사용자가 지금 곤란한 점
사용자의 구체적인 요구
사용자의 유사한 응용 프로그램 / 서비스에 대한 인상
사용자의 인터넷 이용 상황
위의 항목을 의식하여 “사용자가 어떤 사람인지” “지금 어떤 요구가있는지” “어떤 타이밍에 자신의 응용 프로그램과 서비스를 사용해 달라고 할 것인지” 라는 사용자의 배경과 활용도 구체적으로 이미지 할 수 있습니다 .
포인트 ③ 사용자에게 가치를 제공하고 있는가?
응용 프로그램과 Web 서비스를 기획 할 때 “사용자에게 어떤 행동을 취하고 싶어? ‘라는 기업 측의 의도와 장점만을 그만 생각하기 쉽습니다.
그러나 가장 중요한 것은 사용자의 입장이되어 생각 입니다. 현재 기획 개발중인 응용 프로그램은 “사용자에게 혜택을 제공 기능이 있느냐” “정말 사용자의 요구를 충족시킬 것인가”라는 부분을 단단히 생각합시다.
개발 관련 어플 기획서 작성 포인트
이어 앱 개발에 들어가기 전에 최소한의 전제로 미리 결정 해 두어야 할 점을 설명하고 있습니다.
포인트 ④ 네이티브 어플, Web 어플?
응용 프로그램은 Web 브라우저상에서 사용하는 “Web 앱” 와 스마트 폰이나 태블릿에 다운로드하여 사용하는 “네이티브 앱” 의 2 종류 가 있습니다.
많은 분들이 일상적으로 “어플” 이라고 부르고있는 것은, 네이티브 앱을 가리키는 것이 많을 것입니다. iPhone이라면 스위프트 등, Android 단말이라면 JAVA 등의 여러 개발 언어로 만들어져 있습니다.
단말기의 종류 나 개발 언어에 의해 개발의 난이도가 크게 변화하기 때문에, 개발을 시작으로 ‘어떤 유형의 응용 프로그램을 개발 하는가’를 상세히 정해 둘 필요가 있습니다.
Web 앱과 네이티브 앱의 특징을 밑에서 간단히 정리해 두겠습니다.
★ Web 응용 프로그램의 특징
Web 브라우저상에서 동작하는 Web 앱은 “OS별로 개발을 하지 않아도된다” 라는 장점이 있습니다. 상대적으로 개발 공수가 적어도 되는 것이 특징입니다.
한편, “동작 속도가 느리다” “장치의 기능과 연계하기 어렵다” 등의 단점이 지적되지만, 최근에는 많이 개선됐습니다. 현재 속도면에서는 네이티브 애플리케이션과 거의 동일한 수준의 동작이 가능하다고 알려져 있습니다.
★ 네이티브 앱의 특징
네이티브 앱은 OS별 개발이 필요합니다. iOS 및 Android를 모두 지원해야 하는 경우, 공수가 더 소요됩니다. 또한 OS의 버전 업 등에 따른 보수 비용도 염두에 넣어 두지 않으면 안됩니다.
그러나 동작이 빠르고, iOS · Android 앱 마켓을 사용할 수 있다는 메리트가 있습니다.
기능, 사용자 경험, 걸린 비용, 개발 기간 등 여러가지 종합적으로 고려하여 Web 응용 프로그램과 네이티브 앱의 어디에서 실현할 것인가를 결정합니다.
또한 Web 애플리케이션과 네이티브 응용 프로그램의 특성을 함께 개발하는 “하이브리드 앱” 이라는 타입도 있습니다.
포인트 ⑤ 어느 플랫폼과 디바이스에 대응해야 하나?
iPhone과 iPad 등의 iOS 단말에 대응하는 것인지, Android 단말에 대응시킬 것인지 모두에 대응하는 것인지. 어플을 개발하는 경우, 우선 해당 플랫폼 (OS )를 결정해야합니다.
비용과 시간상 하나만 대응해야 할 때는 대상 사용자의 스마트 폰이나 태블릿, 데스크톱의 이용 상황을 분석하여 보십시오. 또한 App Store와 Googleplay의 특징을 고려하여 보면 좋을 것입니다.
또한 플랫폼의 문제뿐만 아니라 해당 기종에 대해서도 고민해야합니다. 예를 들어 iPhone의 경우 iPhone 6s 이전의 낡은 기종에도 대응시킬 것인지 등등 모델 도 중요한 요소입니다.
포인트 ⑥ 최소한 구현해야 할 기능은 무엇인가?
경험이 적은 담당자는 담고 싶은 모든 기능을 완벽하게 구현하고 싶다고 생각하기 쉽습니다. 그러나 IT 업계의 움직임은 너무 빨라서 경쟁에 뒤지지 않도록 최소한의 기능만을 구현한 시점에서 출시해 버리는 스타일이 주류 가 되고 있습니다.
출시 후에 사용자의 반응을 보면서 개선을 해나갈 것이기 때문에 단계적으로 출시해 나갈 기능에 대해 미리 계획을 세워두면 좋을 것입니다.
사업성과 관련 어플 기획서 작성 포인트
기업용 어플 개발에 있어서는 당연히 비즈니스 측면의 목적이 있습니다. 기능적인 과제 해결에 집중한 나머지, 이 사업적인 부분을 놓칠 지 않도록 주의합니다. 사업적으로 성공시키기 위한 포인트는 아래와 같습니다.
포인트 ⑦ “가치제공” 과 “수익” 의 균형이 잡혀 있는지?
응용 프로그램과 Web 서비스에서 성공하기 위해서는 유저우선의 생각이 중요하지만, 동시에 비즈니스로서 성립 여부도 제대로 기획하지 않으면 안됩니다.
“어떤 방법으로 어느 정도의 수익을 전망 할 것인가” “왜 사용자가 이 서비스에 대가를 지불해야 하는가” 등 비즈니스적인 관점에서 구조를 생각하고 장기적으로 존속하는 비즈니스 모델을 만들 필요가있다 것입니다.
포인트 ⑧ 앱 용량은 얼마나 되나?
다운로드해서 이용하는 네이티브앱은 앱 데이터 크기에 대한 배려도 중요합니다. 최근 스마트 폰의 저장 용량은 증가 추세에 있지만, 사용자의 이용 상황이나 사용하는 모델에 따라 데이터 크기의 크기가 걸림돌이되어 버릴지도 모릅니다.
포인트 ⑨ 얼마나 사용되는 어플을 만들고 싶은가?
응용 프로그램 개발 회사의 Certatim의 분석에 따르면, 일반 사용자는 금방 싫증을 내는 경향이 있습니다. 세상에 나와있는 응용 프로그램의 75 %는 비활성화 되어 다시는 다운로드조차되지 않는 다고 합니다.
즉, 항상 최고의 위치를 유지하지 않으면 일반 사용자에서 점점 잊혀져 버린다는 것입니다. 그렇게되지 않기위한 장치 및 방법, 정기적 인 업데이트를 기획 단계부터 계획에 담고 있어야합니다.
포인트 ⑩ 디자인과 사용성에 대한 개발자의 이해가 있나?
응용 프로그램은 외형이 아름다울뿐만 아니라, 직관적 인 조작을 쉽게 할 수있는 것이 매우 중요합니다. 응용 프로그램을 만들어가는 개발자가 디자인과 사용성에 이해가 있는 사람이여야 하는 부분도 중요한 관점입니다.
어플 기획서 샘플
아래는 게임 어플 기획요 보드의 샘플입니다. 참고가 되면 좋겠습니다.
어플기획용보드.pdf 0.01MB
요약 : 어플 개발의 성공은 기획서 작성에 달려있다
응용 프로그램의 비즈니스 전략에 대해 제대로 고민해야 합니다. 응용 프로그램 개발의 기획 단계는 물론, 앱 출시 후에도 다양한 전략을 생각하고 응용 프로그램을 성장시켜 나가야 합니다.
개발자가 선호하는 앱 기획서 – 1 설계
개발자가 기획서를 보는 시각
앱 기획서는 앱 개발 프로젝트를 시작할때 개발자가 기획자로 부터 기획서를 받아서 일을 시작하게 됩니다.
앱 기획서의 구성 요소
앱 기획서는 대체로 표지, 목차, 변경이력, 메뉴 구조도, 공통요소 정의, 기능별 상세화면 정의로 이루어집니다.
1.표지
2.목차(Index)
3.변경이력(Document History)
4.메뉴구조도(Menu Structure)
5. 공통요소정의
6. 기능별 상세화면 정의
그 중 중요한 것이 기능별 상세화면 정의입니다.
매 페이지마다 레이아웃을 짜놓고 각 기능들을 구성해 놓는 것을 말합니다.
해당 페이지에 데이터들을 정렬시키고 뷰를 만드는 방법부터 버튼과 같은 객체들의 반응까지를 정의해 놓는 문서입니다.
개발자는 이 문서를 가지고 실제 개발에 들어가게 됩니다.
그러다보니 이 문서의 질에 따라 실제 개발 산출물이 달라지게 됩니다.
이런 이유로 주요 독자는 여러사람이 있지만 가장 중요한 사람은 개발자가 됩니다.
다년 간 여러 기획서를 받아보고 개발한 결과를 실제 경험한 사례를 중심으로
제대로 된 앱기획을 알려드리도록 하겠습니다.
보통 형식은 조금씩 다르겠지만 이 세가지 경우를 벗어나는 경우는 별로 없었습니다.
1. 설명이 전혀 없는 경우
*아래 페이지는 설명이 전혀 없습니다.
1-1 기획자에게 전화해서 물어본다.
1-2 기획자에게 기획서를 보충해달라고 요충한다.
1-3 기획자에게 기획서를 만들어서 보내드릴까요?라고 요청한다.
1-4 기획자에게 묻지 않고 그냥 알아서 진행한다.
보통 개발자는 1-2=>1-1=>1-4 테크를 타게됩니다. 개발 시간상 1-13을 하지 않습니다.
정석대로 진행하려면 반드시 설명을 집어넣어야 합니다.
Q. 굳이 작성하지 않아도 할 수 있는 부분이 아닌가? 라는 의문을 가질 수 있습니다.
A.맞습니다. 하지만 기획자의 의도에 맞는 산출물을 가지기 어렵습니다.
2. 설명이 전혀 없지는 않지만 많이 빈약한 경우
* 빠진 부분은 구체적인 처리 순서(프로세스)가 전혀 없습니다.
1번 보다는 조금 난 케이스 입니다. 사진을 확대 해 보면 약간의 설명이 들어가 있네요.
Description을 살펴보면
2-1. 로그인시 틀린경우에 알림 메시지로 알림.
2-2. 로그인 후 보고 있던 화면으로 이동하고 프로세스가 들어 있습니다.
여기에는 처리 순서(프로세스)와 예외처리에 대한 내용이 조금 있습니다.
여기에는 프로세스 에러처리가 최소한 약 6개 이상 나오게 됩니다.
하지만 위의 경우는 하나로 통합했습니다
예를 들어 로그인을 시도 했을때
1. 아이디를 입력해주세요.
2. 비밀번호를 입력해주세요
3. 아이디가 너무 짧습니다.
4. 비밀번호가 너무 짧습니다.
5. 올바르지 않은 아이디 입니다
6. 잘못된 비밀번호 입니다.
…
로그인의 조건에 따라 에러메시지는 점점 늘어나서 나오게 됩니다.
= 아이디 또는 비밀번호를 다시 확인해주세요.
예시 상황 )
아이디 또는 비밀번호를 다시 확인해주세요. 처럼 문구가 나오게 되면 이용자는 어디가 잘못된 것인지 정확하게 알기 어렵습니다.
이런걸 이유로 이제 개발자가 가장 두려워하는 말이 나오게 됩니다.
두둥 “알아서 해주세요”
그럼 개발자는 자신이 생각할수 있는 경우의 수를 계산해서 구현하게 됩니다.
그런데 말입니다.
이제 실제 구현한 후에 아래와 같은 상황이 발생하게 됩니다.
기획자의 상사가 비밀번호를 잘못 알고 있는 상태입니다.
그 상태에서 테스트로 여러번 로그인을 시도했는데 아이디 또는 비밀번호를 다시 확인해 달라는 메시지만 확인하게 됩니다.
그럼 서로 개발자와 기획자가 서로 책임을 떠미는 상황이 됩니다.
개발자도 인간인지라 모든 경우의 수를 못하는 부분이 있을 수 있습니다.
해결 방법 )
기획서에 로그인 정보가 5회 이상 틀리면 비밀번호 재설정하는 알림을 띄워준다.
라고 했다면 많은 것들이 달라졌을 것입니다.
물론 기획자도 신이 아닌지라 생각 못한 부분이 있을 겁니다.
때문에 이렇게 기획서가 빈약한 경우에는 개발자에게 한번 기획서에 대한 설명을 진행한 후 피드백을 반드시 받아 수정해야 합니다.
3. 프로세스와 약간의 설명이 있는 경우
* 빠진 부분은 기획자의 의도가 빠져 있습니다.
이전에 기획서와 달리 프로세스도 어느정도 들어있고 각 오류에 맞는 메시지를 출력한다는 말이 있습니다.
즉 기획자에게 질의 하라는 뜻이 됩니다.
보통 이정도 선에서 개발이 시작되게 됩니다.
4. 앱 페이지의 의도가 명확히 표현된 경우(프로세스는 다른 표페이지에 표기 됨)
“개발자 관점의 좋은 기획서는 4번 처럼 의도가 명확하게 드러나는 기획서”
의도가 들어간 기획서는 개발자의 생각을 명확하게 해줍니다.
만약 설명이 조금 빠진 부분이 생기면 보다 쉽게 회원가입을 할 수 있게 유도하는 방향으로 생각해서 질의하게 될 것 입니다.
이제 모든 내용을 정리하겠습니다.
개발자의 선호도는 아마 열이면 열 아래의 순번으로 이야기 할 것 입니다.
4>3>2>1
1번 기획서는 아무 설명도 없습니다.
2번 기획서는 약간의 설명이 있습니다.
3번 기획서는 약간의 설명과 프로세스가 있습니다.
4번 기획서는 해당 페이지의 의도와 설명이 있습니다.(프로세스 별도 페이지)
해당 페이지의 의도를 명확하게 명시하는 것은 개발자에게 큰 영향을 미칩니다.
하지만 기획자가 기획서로 모든것을 표현 할 수는 없습니다.
기획자는 프로그래밍적인 지식과 경험이 부족하기 때문입니다.
기획서를 최대한 완전하게 만들어야 한다는 생각을 하지 않아야 한다(틀이나 구현 방법에).
수정이 당연하다는 것을 기획자,디자이너,프로그래머가 모두 전제로 가지고 있어야 한다.
기획서의 본질은 기획자의 의도를 개발자가 잘 이해하는 것이 가장 중요합니다.
고양이도 할 수 있는 앱 설계서 작성법
앱 화면 설계서(와이어프레임) 작성 매뉴얼입니다. 원래 나중에 후배가 생기면 한껏 차갑고 전문적인 표정을 지으면서 ‘OO씨 이거 내일까지 다 읽어오세요’ 하고 싀-크하게 건네주려던 글이었습니다. 하지만 후배는 도통 들어올 기미가 안 보이고.. 지금 하는 일은 언제까지 할지 모르겠고..(…)
그래서 제가 예전에 그랬던 것처럼, 오늘도 언 땅에 호미질을 하고 있을 수많은 초보 기획자분들께 작게나마 도움이 되고 싶어 그간의 경험을 미주알고주알 정리했습니다. 이 매뉴얼은 고양이도 알아들을 수 있을 만큼 쉽고, 쉽고… 음 그냥 쉽습니다. 전문지식이 전혀 없어도 이해할 수 있습니다.
이 글은 다음과 같은 분들이 읽으시면 좋습니다.
겁나 대박인 아이디어가 생각났는데 앱 설계를 어디서부터 시작해야 할지 모르겠는 경우
어느 날 갑자기 나이 지긋하신 상무님이 ‘거 우리도 앱이란 거 한번 만들어보지?’ 하고 막 던지셨는데 우리 팀장님이 거부를 못했고, 마침 그게 나한테 떨어진 경우
개발자(프로그래밍)랑 디자이너(디자인)가 무슨 일을 하는지는 알겠는데 서비스 기획자는 도대체 밥만 축내는 인간 아닌가 하는 (고약한) 생각이 드는 경우
지금 쓰고 있는 수많은 앱들이 처음 만들어질 때 어떤 과정을 거쳤는지 궁금한 경우
목차는 다음과 같습니다.
시작하기
화면(스크린) 그리기
정보구조도(IA) 만들기
화면 이름(스크린 아이디) 짓기
화면 경로(스크린 패스) 쓰기
컴포넌트(디스크립션) 붙이기
시나리오 만들기
버전 관리하기
공통 요구사항 쓰기
*위 용어는 업계에서 쓰는 단어들인지라 우리말과 영어를 어쩔 수 없이 혼용하도록 하겠습니다.
*UX/UI 디자인 가이드는 아닙니다. 이 글은 앱 기획 초심자가 따라 할 수 있는 ‘화면 설계서(문서) 작성 가이드’입니다. UX/UI 가이드가 궁금하시다면 최철호 작가님을 추천드립니다.
시작하기
꼭 만들고 싶은 (혹은 누가 시켜서 만들어야만 하는) 앱이 생겼습니다. 고객 조사도 충분히 했고 필요한 서비스가 무엇인지도 알았습니다. 하지만 앱 기획을 한 번도 해본 적이 없는 꼬마 기획자는 화면을 도대체 어디서부터 그려야 할지 감도 오지 않습니다. 밥 아저씨가 ‘껄껄 참 쉽죠?’ 하고 가르쳐주면 좋겠지만 우리 현실은 절대 그렇게 녹록하지 않습니다. 초심자는 아래 과정을 따라 합니다.
그립읍니다..밥아저씨..
우선 플레이스토어나 앱스토어를 엽니다. 그리고 내가 만들려는 서비스와 같은 분야의 키워드를 3개 정도 검색합니다. 그러면 비슷한 앱들이 시리얼 광고 속 우유처럼 쏟아져 내립니다. 이중에 가장 ‘잘 나가는’ 앱을 5개 정도 다운로드합니다. 예전에 써봤던 앱도 상관없습니다. 오히려 구면인 친구가 더 좋을 때도 많습니다. 저는 이걸 일짱 앱이라고 부릅니다. 이제 그 일짱 앱들의 화면을 콩밥에서 콩을 골라내는 꼬맹이처럼 뚫어져라 읽어봅니다. 동시에 그 앱의 구성 방식을 공책에 똑같이 따라 그립니다. 주요 화면을 10개 정도를 고른 뒤 디자인을 걷어내고 선(와이어)으로만 이루어진 구조(프레임)를 만듭니다.
여기 이미 모범 답안이 있습니다
참고용 일짱 앱을 고를 때 알아두면 좋은 팁이 몇 개 있습니다. 하나는 현재 업계의 표준이 된 앱을 고르는 겁니다. 숙박? 에어비앤비, 채팅? 카카오톡, 음악? 멜론, 호텔? 트리바ㄱ..처럼 분야별로 가장 잘 나가는 앱을 봐야 합니다. 잘 나가는 서비스는 무조건 잘 나가는 이유가 있기 때문입니다. (따라서 공공기관 앱 같은 건 절대 네버 노노) 둘째는 앱스토어 (한국) 국가 제한을 없애는 것입니다. 지구는 넓고 해외에는 좋은 앱들이 무진장 많습니다. 우리는 외국인 선생님도 가리지 않습니다. (구글에 ‘앱스토어 국가 제한 풀기’를 검색합니다)
그렇게 하루 이틀 날을 잡고 나랑 비슷한 생각을 했던 과거의 사람들과 허심탄회하게 대화합니다. 이렇게 잘 만든 앱을 물고 뜯고 하다 보면 내가 아무 생각도 없이 쓰던 앱이 사실 누군가가 등골 휠만큼 노력해서 나왔구나 하는 것을 느낄 수 있습니다. 하지만 감탄도 잠시, 이제는 내 등골이 휠 차례입니다. 문방구에 가서 공책과 펜을 사 옵니다.
화면(스크린) 그리기
이제 우리(나의) 서비스를 담은 화면을 삐뚤빼뚤 그려봅니다. 똑같이 베끼는 것이 아닙니다. 이미 있는 서비스라면 내가 굳이 만들 필요도 없습니다. 기존 앱을 참고하되 내 생각을 반드시 넣어서 그립니다. 가끔 대기업이 스타트업 앱을 똑같이 카피하는 경우가 있는데 이건 범죄입니다.
처음 그려보는 화면은 누구나 못 그립니다. 따라서 열에 아홉은 초등학생 그림일기 같은 결과가 나오지만 실망할 필요는 없습니다. ‘처음인데 뭐’하고 뻔뻔하게 생각하는 게 중요합니다.
처음인데 뭐
기획자가 초기 화면을 그리는 도구는 굉장히 다양합니다. 금손(혹은 경험자)이라면 스케치나 XD처럼 디자인 툴을 사용하면 좋습니다. 이 중에서 어도비의 XD는 배우기도 쉽고 일단 한번 배워 놓으면 두고두고 큰 도움이 됩니다. (영상 툴처럼 엄청 어렵지 않습니다.) 앞으로도 왠지 이 일을 계속할 것 같다 싶으면 처음부터 배워두시는 것이 좋습니다. XD는 최근에도 계속 업데이트되는 서비스이며, 개발 시 연계도 편하기 때문에 무척 좋은 도구입니다.
XD를 통해 간편하고 깔끔하게 편집할 수 있습니다
금손까지는 아니지만 어느 정도 손재주가 있는 경우에는 오븐이나 액슈어같은 프로토타이핑 도구를 써도 됩니다. 특히 오븐은 다음카카오에서 만든 서비스입니다. (아마 스타트업이 개발한 프로그램을 인수한 것 같습니다) 화면 프레임이나 버튼들이 도구 모음으로 잘 정리되어 있어 초보자가 쓰기에도 간편합니다. 하지만 최근 전혀 관리를 안 하고 있는 것 같다는 단점도 있습니다. (업데이트 좀..)
그런데 ‘나는 금손도 은손도 아니다, 똥손이다’ 하는 경우도 있습니다. 그럴 때는 파워포인트를 이용해 네모, 세모 도형을 넣거나 손으로 슥삭슥삭 그려도 아무 문제없습니다. 화면을 그리는 도구 자체는 하나도 중요하지 않기 때문입니다. 초기 화면을 그리는데 정말 중요한 것은 ‘이 화면의 중심 기능을 다른 사람도 이해할 수 있게끔 큼직큼직하게 만드는 것’입니다. 그러니까 대충일지라도 최대한 빨리 그려서 누군가를 보여주는 것이 화면 만들기의 제1원칙입니다.
이렇게 알림장 낙서 같은 화면이라도 일단 그리고 나면 이제 조금도 망설이지 말고 고객을 찾아갑니다. 앞서 고객이라고 거창하게 표현했습니다만 그냥 지금 만드는 서비스를 쓸 만한 아는 사람을 찾아가면 됩니다. (지금 옆자리에 앉아 있는 사람도 괜찮습니다) 초심자가 처음 만든 화면은 당연히 저세상급-저퀄이기 때문에 망태기 자루처럼 후줄근합니다. 이미 월드클래스 앱들만 쓰고 계신 고객님 눈에 이런 화면이 성에 찰 리 없습니다.
기획자는 이때 잠시 심리학자가 되어 사람의 본성을 자극합니다. 화면을 보는 고객에게 ‘내가 해도 이것보단 잘하겠다’는 생각이 들게끔 노력합니다. 인상을 잔뜩 쓰는 아저씨(고객)에게 속없는 철면피처럼 다가가서 ‘님이라면 여기 어떻게 만들 거 같음?’하고 뻔뻔하게 묻습니다. 그러면 그 고객은 기다렸다는 듯 시어머니 잔소리 폭탄을 한 무더기 쏟아놓습니다.
경험상 고객의 5명 중 한 분은 금붙이처럼 소중한 피드백을 줍니다. 보통 ‘와 이거 너무 불편하다, 내가 쓰는 다른 앱에서는 이 기능은 이렇게 만드는데 말이지’ 하는 식으로 레퍼런스까지 알려줍니다. 기획자는 이런 잔소리를 꼼꼼히 적어서 돌아온 뒤 한 땀 한 땀 내 화면을 업그레이드합니다. 그리고 반복입니다. 도르마무와 협상하는 닥터 스트레인지처럼 계에에-속합니다. 제 경우에는 개인, 단체, 관계자 인터뷰 그리고 UX디자이너 회의까지 한 달 넘게 이 일만 했었습니다. 그리고 나면 화면이 넝마자루 수준에서 세련된 에코백으로 천지개벽합니다.
도르마무 화면을 수정하러왔다
처음 화면을 그릴 때 초보자가 하는 가장 흔한 실수는 ‘화면을 예쁘게 만드는 것’입니다. 처음 그리는 화면은 절대 예쁘게 만들면 안 됩니다. 그 이유는 3가지입니다. 첫째 예쁘게 만드는 데는 시간이 많이 듭니다. 예쁘게 만들 시간에 고객 인터뷰를 한 번이라도 더하는 게 기획자가 할 일입니다. 앞에서도 이야기했지만 앱은 혼자 만드는 것이 아니라 쓸 사람에게 물어보며 만들어야 합니다. 잘못하면 예쁜 쓰레기가 됩니다.
이런 마인드 절대 안됨 (대학일기)
둘째, 내가 예쁘게 만들어도 안 예쁩니다. 기획자가 아무리 용을 쓰고 밤을 새 가며 그린 화면도 나중에 디자이너가 보면 초등학교 3학년이 과학의 달에 그린 해저도시 상상화 정도로 보입니다. 마지막 셋째, 어차피 지금 그린 화면은 99.99% 확률로 버려야 합니다. 다수의 고객이 마음에 안 든다고 하면 한치의 망설임 없이 지금 화면을 폐기합니다. 괜히 예쁘게 만드는 동안 들인 시간 때문에 미운 정이 생기면 버려야 할 못난 UI를 못 버리게 됩니다.
어느 정도 화면이 정리되었다 싶으면 앞서 말씀드렸던 도구들을 활용해 화면을 정리합니다. 그리고 화면 설계서의 좌측 중앙에 큼직하게 박아 넣습니다. 저는 보통 파워포인트 기본 툴이나 파워 목업 기능을 사용합니다. 디자인 쪽으로 강점이 있는 분들은 스케치라는 도구를 활용합니다. 스케치는 몇 년 전부터 워낙 핫한 툴이라 여기저기 설명이 많습니다.
정보 구조도(IA) 만들기
두 번째는 정보 구조도입니다. 업계에서는 보통 인포메이션 아키텍처라고 부르거나 이것을 줄여 IA라고도 씁니다. 이름에서부터 알 수 있듯이 IA는 앱의 정보가 담긴 형태를 알려줍니다. IA라는 이과풍(?) 이름은 문과생 찌랭이가 괜히 함부로 열었다간 폭발할 것 같은 위압감을 줍니다. 하지만 이 문서는 의외로 매우 간단하기 때문에 기획자가 직접 만듭니다. 내 머릿속에만 있던 앱을 모든 사람이 볼 수 있도록 뼈대를 세우는 작업으로 보시면 됩니다.
IA는 일반적으로 엑셀에 적습니다. (그냥 그리는 경우도 있습니다.) 우선 엑셀을 켜고 첫 번째 열에 ‘인덱스’, 두 번째 열에 ‘기능’이라고 씁니다. 그리고 2,3,4… 열에는 뎁스 1(Depth), 뎁스 2, 뎁스 3…(처음에는 보통 6까지 적습니다)이라는 식으로 적습니다. 여기서 뎁스란 해당 화면까지 접근하기 위해 얼마나 많은 화면을 지나쳐왔는지를 나타냅니다. 쉽게 말해 버튼을 몇 번 눌러야 이 ‘깊이’까지 들어갈 수 있는지 알려주는 것입니다. 추가적으로 뎁스 뒤에는 설명, 타입, 디렉토리 등을 적을 수 있습니다. 하지만 어차피 나중에 개발 문서를 또 만들기 때문에 일단 위 세 가지 사항은 생략합니다.
IA 예시화면입니다
IA는 엑셀로 만든다고 말씀드렸습니다. 하지만 이것을 처음부터 엑셀로 만드는 것은 인피니티 스톤을 맨손으로 잡는 것처럼 무모한 행동입니다. 만드는 중간에 빼먹는 화면이 계속 생겨서 엄청 헷갈리기 때문입니다. 그래서 다짜고짜 엑셀 시트를 붙들고 있는 작업자는 ‘아 맞다’ 소리를 반복하며 세월아 네월아 ‘열 추가’, ‘행 추가’ 지옥에 빠지게 됩니다. 깔끔해야 할 파일은 누더기가 됩니다.
그래서 저 같은 경우에는 포스트잇을 활용한 꼼수(?)를 씁니다. 우선 회사에서 넓직한 회의실을 하나 빌립니다. 그리고 작은 포스트잇에 프로토타입으로 만든 화면의 주요 기능을 슥삭 적습니다. 다음으로 가장 큼직한 주요 화면(보통 하단 탭이나, 메뉴바의 주요 기능)을 좌에서 우로 혹은 위에서 아래로 충분한 간격을 두고 띄엄띄엄 붙입니다.
주요 기능을 붙였으면 이제 그 주요 기능 밑(옆)으로 내려가며 세부 기능을 붙입니다. 카카오톡을 예를 들자면 주요 화면은 ‘친구’, ‘채팅’, ‘검색’, ‘게임’, ‘더보기’입니다. ‘친구’ 아래에는 ‘나’, ‘생일 친구’, ‘즐겨찾기’, ‘추천 친구’, ‘플러스친구’, ‘설정’ 등 다양한 기능이 두 번째 뎁스에 따라붙습니다. 각각의 상세 기능 역시 그 밑에 세부 기능이 따라옵니다. ‘설정’을 누르면 세 번째 뎁스에 ‘편집’, ’ 친구 관리’, ‘전체 설정’이 나오는 식입니다.
예시를 위해 일부만 작성해 보았습니다
이렇게 1-2시간 정도 작업을 하고 나면 내가 만드는 앱이 어떤 형태이며 각 화면이 연결되는 경로를 한눈에 파악할 수 있습니다. 마지막, 제일 말단(맨 밑에 있는 화면들)에는 최종 화면까지 오기 위해 지나온 경로를 줄줄 써줍니다. (예시: 친구 -> 설정 -> 편집) 보통 다른 색깔의 포스트잇을 사용하여 작성하는데 이 포스트잇은 따로 쓸 곳이 있습니다. 스크린 패스를 작성할 때 참고할 겁니다.
다 그린 IA는 화면 설계서의 3번째 장에 붙여놓습니다. 보통의 화면 설계서는 표지 -> 버전 관리 -> IA -> 화면 설계서 -> 시나리오 -> 기타 사항 순으로 구성됩니다. 이렇게 IA를 초반에 붙이는 이유는 IA가 화면 설계서에서 목차 역할도 할 수 있기 때문입니다. 개발자나 디자이너는 문서 앞에 있는 IA를 보고 해당 자료가 어떤 기능의 화면을 담고 있는지 파악합니다.
화면 설계서를 여러 개로 쪼개는 기준도 IA를 통해 정합니다. 예를 들어 카카오톡처럼 거대한 서비스는 하나의 화면 설계서 안에 욱여넣을 경우 문서가 수백 장에 달할 만큼 커집니다. 화면 설계서는 기본적으로 개발자와 디자이너가 편하게 작업하도록 만드는 문서입니다. 문서 하나가 이렇게 커지게 되면 읽기에 무척 불편하기 때문에 본래의 목적을 잃습니다. 따라서 IA상 크게 구분되는 기능(채팅/검색)이 있다면 화면 설계서를 여러 개로 분할하여 가독성을 올립니다.
화면 이름(스크린 아이디) 짓기
이제 소중하게 만든 앱 화면에 이름을 붙여줘야 합니다. 그 이름을 스크린 아이디라고 합니다. 스크린 아이디를 쓸 때는 다음 2가지 원칙을 지킵니다. 첫째로 유일해야 합니다. 하나의 화면은 반드시 하나의 아이디를 가집니다. 비슷한 화면이라고 같은 이름을 쓰면 네버 에버 안됩니다. 가끔 한 화면에 기능이 엄청나게 많은 경우 화면 설계서가 여러 장 나올 수도 있습니다. 이때도 여러 장의 화면에 같은 스크린 아이디를 씁니다.
둘째로 규칙적이어야 합니다. 예쁜 이름을 짓는 것이 아닙니다. 실용적인 이름을 짓는 겁니다. 앱 화면은 설계 도중에도 계-속 추가됩니다. 아이디가 규칙적이어야 나중에 화면이 추가되어도 손쉽게 끼워 넣을 수 있습니다. 그래서 보통 스크린 아이디는 주기능-보조기능-001-(001) 형태로 적습니다. 완성한 스크린 아이디는 앞으로 진행될 모든 개발의 중심이 됩니다. 학교에서 온갖 학사관리를 학번 중심으로 하는 것과 같습니다.
주요기능(홍철)이 담긴 이름이여야 합니다(…)
스크린 아이디가 중요한 이유는 앱 개발이 다양한 분야의 전문가가 함께하는 작업이기 때문입니다. 스크린 아이디가 뒤죽박죽 섞이거나, 자기 마음대로 규칙 없이 작성되거나, 개발 도중 살그머니 귀여운 애칭 등으로 바뀌게 되면 상상치도 못했던 오류가 발생합니다. 한 명의 실수가 여러 사람에게 막대한 헛수고를 선물합니다.(탄식)
예를 들어 개발자는 001 화면의 코드를 쓰는데 디자이너는 002 화면의 이미지를 만들어주면 로그인을 눌렀는데 로그아웃이 될 수도 있습니다. 더 큰 문제는 나중에 누가 잘못한 건지 찾기도 어렵다는 겁니다. 비유하자면 병원에서 아기가 바뀌는 것과 비슷한 셈입니다. (이럴 때는 무조건 화면 설계서를 관리하는 기획자 잘못입니다) 그러므로 스크린 아이디는 처음에 잘 정해야 하고 나중에 바꾸게 되면 나 혼자 바꾸는 것이 아니라 모든 사람에게 ‘나 이거 바꾼다!!’알리고 함께 바꿔야 합니다.
지금부터 스크린 아이디를 002로 바꾸겠소
현실적으로 기획자가 처음 화면 설계서 문서를 만들 때부터 스크린 아이디를 모두 적을 수는 없습니다. 심지어 앱을 다 만든 뒤에도 화면이 추가되는 경우가 있기 때문입니다. 그래서 일단은 앞서 그렸던 화면을 설계서에 최대한 붙여 넣습니다. ‘질린다 정말! 이 정도면 충분하지 않아!’같은 권태기 연인의 감정이 들 때까지 합니다. 그리고는 스크린 아이디를 규칙적으로, 그리고 꼼꼼히 작성합니다. 경험상 처음에 아무리 화면을 열심히 넣더라도 완성본과 비교하면 60% 수준이었던 것 같습니다.
화면 경로(스크린 패스) 쓰기
다음은 패스입니다. 쉽게 말하면 ‘내가 지금 보고 있는 화면까지 가기 위한 경로’입니다. 브런치로 예를 들어보겠습니다. 브런치에 ‘작가 프로필 수정’이라는 화면으로 진입하는 패스는 다음과 같습니다. [홈->메뉴바->설정->작가 프로필 수정]이나 [홈->메뉴바->작가(프로필)->작가 프로필 수정]입니다. 이렇게 패스를 지정하면 해당화면이 이전에 어느 화면에서부터 출발했는지 알 수 있습니다.
앱을 만들다 보면 화면을 수정하거나 추가, 혹은 삭제하는 경우가 생각보다 빈번하게 발생합니다. 서버 구조부터 시작해서 고객 불만까지 별의별 일이 다 있기 때문입니다. 앞서 말했던 스크린 아이디는 수정이 쉽습니다. 화면이 바뀌면 기획자가 그 자리에서 고치면 됩니다. 하지만 스크린 패스는 수정에 주의를 기울여야 합니다. 여러 화면이 고리처럼 물려있는 경우가 많습니다.
변경 화면에 물려있는 화면을 모두 검토하지 않으면 화면에 잘못된 패스가 남게 됩니다. 잘못된 패스는 앞서 말했던 것처럼 앱에 오류를 발생시키거나, 사용자를 막다른 길(다른 화면으로 이동할 수 없는 화면)로 몰아넣습니다. 따라서 스크린 자체를 추가, 삭제하는 경우 단순히 그 스크린뿐만 아니라 화면 설계서 스크린 패스를 꼼꼼히 확인해야 합니다.
컴포넌트(디스크립션) 붙이기
이제 화면에 들어갈 인포메이션 리스트를 작성합니다. 앱 기획, 개발은 기본적으로 레고 혹은 마인크래프트와 똑같습니다. 레고에서 성이나 배를 만들기 위해선 설명서에서 말하는 재료가 있어야 합니다. 앱도 마찬가지입니다. 화면을 만들기 위해서는 화면에 들어갈 구성물을 확실하게 준비합니다. 예를 들어 아무리 잘 만든 쇼핑 앱일지라도 결제 버튼이 없으면 무용지물인 것과 같습니다.
마인크래프트와 동일한 방식입니다
이제 실제로 컴포넌트 리스트를 만드는 방법을 알아보겠습니다. 우선 아까 그린 화면 프로토타입을 설계서 좌측 중앙에 붙입니다. 이제 좌 상단에서 우 하단까지 따로 떼어낼 수 있는 항목에는 전부 번호(알파벳)를 붙입니다. 컴포넌트를 최대한 자세하게 식별하는 것이 중요합니다. 저희 팀은 이걸 인형 눈깔 붙이기라고 표현했었는데 1.뭐하나 붙들고, 2.뚫어지게 쳐다보면서, 3.끝도없이 한다는 점에서 아주 비슷합니다.
컴포넌트를 뽑을 때는 이제 화면 설계서를 자주 볼 개발자나 디자이너에게 연애편지를 쓴다는 마음으로 작성해야 합니다. 왜냐하면 이 인형 눈 작업이 실제로 해보면 매-우 귀찮기 때문입니다. 하지만 내가 정성을 들인 만큼 이 문서를 읽는 사람은 편해집니다. 저는 이걸 ‘고통 총량 보존의 법칙’이라고 불렀습니다. 기획 문서 중간에 빠진 항목이 생기면 개발자나 디자이너가 여기저기 찾아다니며 기획 의도를 물어야 합니다. 이런 고통이 다 낭비입니다. 따라서 컴포넌트 작성은 로맨스 비슷한 박애정신이 많이 요구되는 작업이라 하겠습니다.
컴포넌트 리스트 작성할 때
컴포넌트는 크게 두 가지로 나뉩니다. 하나는 인포메이션이고 다른 하나는 컨트롤입니다. 둘을 분류하지 않고 그냥 컴포넌트 혹은 디스크립션이라고 부르는 경우도 많습니다. 하지만 앱이 크고 복잡해지면 둘을 분류하는 편이 가독성이 높습니다. 보통 관리자용 앱처럼 작은 단위는 디스크립션만 구구절절 달고 기능이 복잡한 사용자 앱의 경우 컴포넌트를 세밀하게 분류합니다.
인포메이션과 컨트롤을 분류하는 기준은 해당 컴포넌트를 눌렀을 때 앱에서 반응이 일어나는지 유무입니다. 별달리 반응이 없으면 인포메이션이고 그게 아니라 앱이 반응하는 버튼이라면 컨트롤입니다. 맨 처음부터 이 둘을 엄격하게 구분 지을 필요는 없습니다. 처음 설계서를 쓸 때는 둘을 구별하는 것보다 컴포넌트를 빠트리지 않는 것이 가장 중요하기 때문입니다. 하지만 어느 정도 얼개가 나왔다면 둘을 차근차근 나눠놓습니다.
브런치 작가 소개 페이지 예시 화면
이때 위의 예시 화면처럼 인포메이션은 설계서의 우측 상단에, 컨트롤은 우측 하단에 적습니다. 일반적으로 주요 페이지(정보구조에서 뎁스가 낮은 경우)는 컨트롤이 많고 상세페이지(정보구조에서 뎁스가 높은 경우)는 인포메이션이 많습니다.
브런치 앱으로 예를 들어서 설명해보겠습니다. 다음 화면은 브런치의 작가 소개 페이지의 글 탭을 분석한 컴포넌트 리스트입니다. 해당 페이지는 약 20개 정도의 컴포넌트로 구성되어있습니다. [메뉴바], [프로필 설정], [프로필], [작가명], [직업명], [구독자/수], [관심작가/수], [제안하기], [글쓰기], [작가소개], [글/수], [작품/수], [매거진명], [제목], [부제], [내용 전반부], [공유/수], [댓글/수], [날짜], [썸네일]가 그것입니다.
작가 소개 페이지의 헤더
우선 위 화면처럼 컴포넌트들에 숫자(인포메이션)와 알파벳(컨트롤)을 붙입니다. 전체 화면이 너무 복잡해서 우선 프로필이 보이는 헤더에만 적용해보았습니다. 지금은 앱의 실제 화면에 컴포넌트 번호를 붙였습니다. 하지만 와이어프레임은 말 그대로 기본 도형과 선으로만 만들기 때문에 이 예시보다 허접해 보이는 게 당연합니다.
인포메이션은 인덱스, 상세, 타입, 표시조건이 나옵니다
이제 인포메이션을 작성합니다. 인덱스, 상세 사항, 데이터 타입, 표시 조건 순으로 적습니다. 보면 아시겠지만 인포메이션은 화면에 ‘표시’되는 정보입니다. 예를 들어 ‘구독자’ 영역의 경우, [구독자 수]는 정보를 알려주는 단순 인포메이션입니다. 하지만 [구독자+구독자수] 묶음은 버튼 클릭 시 구독자 리스트를 보여줍니다. 따라서 컨트롤입니다.
컨트롤은 좀 더 꼼꼼히 씁니다
컨트롤도 동일하게 작성합니다. 다만 컨트롤의 경우 상세(디스크립션)을 훨씬 자세히 써주셔야 합니다. 아무래도 단순 정보보다는 버튼의 설명이 복잡합니다. 구구절절 쓴다는 느낌이 아니라 핵심을 요약해준다는 생각으로 작성합니다.
잘 작성된 컴포넌트 리스트는 개발자나 디자이너의 의미 없는 노가다를 줄여줍니다. 개발자는 인포메이션을 보고 해당 화면이 서버로부터 어떤 정보를 받아와야 하는지 압니다. 또한 컨트롤 리스트를 통해 화면을 연결합니다. 디자이너도 마찬가집니다. 디자이너는 공통으로 사용하는 디자인을 우선적으로 만들고 세부적인 디자인을 추가하는 식으로 작업할 수 있습니다. 이처럼 기획자는 두 집단이 일하는 방식을 생각하면서 컴포넌트를 적어야 합니다.
시나리오 만들기
다음은 시나리오입니다. 시나리오란 ‘사용자가 앱에 들어와서 정해진 행동을 하기 위해 필요한 절차’를 말합니다. 쉽게 말해 롤러코스터 타이쿤에서 놀이공원을 다 짓고 나면 이용객 입장에서 놀이기구를 어떻게 이용할지 스토리를 작성해보는 것입니다. 예를 들어 숙박 앱 화면을 다 설계하고 나면 ‘실제로 고객이 화면1, 화면2, 화면3을 거쳐 호텔을 예약합니다.’ 라고 시나리오를 만들 수 있습니다. 다시 말해 ‘사용자 행동을 화면으로 정리하는 것’이 시나리오입니다.
사용자가 장바구니를 지나 배송지 입력 후 결제하는 과정
세상에는 정말 다양한 사람이 있습니다. 그러다 보니 실제 앱을 만들면 ‘아니 대체 어떤 인간이 이 기능을 이따구로 쓰나’ 싶은 애석한(어처구니 없는) 경우도 자주 발생합니다. 하지만 시나리오 문서에서 이런 특이 케이스까지 전부 작성하는 것은 불가능합니다. 따라서 우리가 화면 설계서에 첨부하는 주요 시나리오는 정말 일반적이고 정상적인 사용 패턴으로 한정됩니다. 아웃라이어(드문 경우)의 신박한 사용 패턴은 후일 테스트 케이스 문서에서 잡아냅니다.
모든 화면 설계서에 시나리오가 첨부되는 것은 아닙니다. 대부분의 경우 시나리오가 없더라도 개발자나 디자이너가 화면을 만드는데 전혀 지장이 없습니다. 하지만 시나리오가 꼭 필요한 경우가 있습니다. 이때는 개발자와 디자이너의 분노 관리를 위해 시나리오를 꼼꼼히 써줘야 합니다. 대표적인 예는 ‘일련의 절차를 거쳐’ 기능을 사용하는 경우입니다. 회원가입, 회원정보 찾기, 생체인증 등의 상황이 있습니다.
브런치의 카카오계정 가입 절차
그렇다면 생체인증을 예시로 시나리오를 한번 작성해보겠습니다. 우선 진입하는 사용자의 케이스를 나눠야 합니다. 생체인증을 사용하기 위해서는 우선 사용자가 생체인증을 등록했는지 확인해야 합니다. 따라서 가장 먼저 앱(클라이언트)이 서버에 사용자가 ‘생체인증을 등록한 사람’인지 아니면 ‘생체인증을 등록하지 않은 사람’인지 체크합니다. 서버를 통해 사용자의 생체인증 등록 여부를 확인하면 이제 사용자에게 맞춤형 화면을 노출합니다.
예를 들어 생체 인증 미등록 사용자는 다음 절차를 따릅니다. 1. 생체인증을 등록할 것인지 물어보고, 2. 생체인증 등록을 위해 휴대폰 본인 확인 절차를 거쳐야 하며, 3. 본인 인증이 된 상태에서 자신의 생체 정보를 등록하고, 4. 해당 생체정보를 이용해 인증합니다. 반면 이미 생체정보를 등록한 사용자라면 1,2,3단계를 건너뛰고 바로 4번 화면을 노출합니다.
생체인증을 등록하고 사용하기만 하면 모든 시나리오가 끝난 것 같습니다. 하지만 4번 항목 이후에도 상당히 많은 케이스가 있습니다. 예를 들어 생체인증이 불가능한 경우입니다. 가장 흔한 예는 지문인증을 등록했는데 손가락에 물이 묻어서 인증이 안 되는 경우가 있습니다. 또 극단적인 경우를 들자면 성형수술로 인해 얼굴 인증이 실패하는(…) 사례도 있습니다. 뭐 이런 거까지 생각하나 싶지만 이런 걸 생각하는 앱과 생각하지 않는 앱은 완성도에서 정말 큰 차이가 납니다
전체 파일은 이런 시나리오가 6개 나옵니다
잘 짜인 앱 시나리오는 이런 특이한 상황에서 사용자가 앱을 끄지 않고 재빨리 다른 행동을 할 수 있게끔 유도합니다. 예를 들어 인증이 3회 연속 실패할 경우 휴대폰 인증으로 자동 전환한다, 혹은 생체인증 정보를 재등록한다 등 대안을 제시합니다. 물론 대부분의 사용자는 앱에 이런 과정이 있다는 것을 인식하지 못합니다. 잘 만든 앱은 이 과정이 너무 스-무스해서 내가 그런 행동을 했는지도 모르기 때문이고, 못 만든 앱의 경우 사용자가 굳이 앱에 더 머무르지 않고 강제 종료해버리기 때문입니다. 우리가 유독 은행 앱과 관공서 앱, 결제 앱에 빡친다고 느끼는 것은 이 앱들이 보통 그냥 꺼버릴 수가 없는 이유로 사용되기 때문입니다. (다행히 최근 은행 앱은 상당히 좋아졌습니다)
이처럼 시나리오를 작성하는 것은 단순히 앱 화면에 컴포넌트(인포/컨트롤)로는 설명할 수 없는 복잡한 내용을 개발자나 디자이너에게 알기 쉽게 전달하는데 목적이 있습니다. 따라서 시나리오를 작성할 때 주의해야 하는 점은 모든 케이스를 꼼꼼히 다루는 것도 있겠지만 기본적으로는 읽을 사람이 쉽게 이해할 수 있도록 만들어야 합니다.
버전 관리하기
버전 관리는 보통 표지 다음장에서 관리합니다. 사소하고 귀찮은 일이지만 가장 중요한 일이기도 합니다. 이 페이지에는 [버전, 일자, 상세, 작성자, 비고] 순으로 적습니다. 우선 버전 같은 경우는 1.0, 1.1, 2.0 식으로 적습니다. 컴포넌트나 화면에서 소규모 변동이 있을 경우에는 소수점 버전업을 하고 앱 구조 등 대대적인 개편이 있을 때 앞자리 버전 업을 합니다. 판단은 기획자가 적절히(?) 하시면 됩니다. 저 같은 경우에는 앱 하나를 만들면 3달 동안 보통 버전 5~7까지 업데이트했던 것 같습니다.
버전관리 예시화면
일자나 작성자는 그냥 있는 대로 쓰시면 됩니다. 다만 상세를 적을 때는 주의할 점이 있습니다. 한 페이지짜리 상세에 모든 수정사항을 구구절절 적을 수는 없습니다. 그렇지만 주된 변경 사항은 반드시 기록해야 합니다. 예를 들어 상세에 가끔 ‘컴포넌트 항목 수정’ 이런(or 이딴)식으로 적는 경우가 있는데 이는 매우 잘못된 방식입니다. 저런 수정은 오히려 안 적느니만 못합니다. 버전 관리자는 ‘컴포넌트의 어디를 어떻게 수정한 것’인지 알려줘야 합니다. 예를 들어 ‘로그인 시나리오 5단계 -> 7단계 확장’ 이렇게만 요약해주어도 충분합니다. 변경한 ‘곳’이 아니라 변경한 ‘것’을 적습니다.
버전 관리는 무척 쉬운 일 같지만 생각보다 어렵습니다. 프로젝트 초기에는 화면 설계서를 기획자만 자주 봅니다. 그래서 버전 관리가 어렵다는 것을 당최 이해하지 못합니다. 하지만 본격적으로 코딩과 디자인이 시작되고 중간중간 오류를 수정하다 보면 버전이 섞이기 시작합니다. 기획자는 소스트리같은 협업 툴을 통해 문서 변경을 계속 확인해야 합니다. 더불어 문서를 변경할 필요가 있다면 누가 왜 변경하고자 하며 언제 변경했는지까지 파악해두어야 합니다. 빈틈없는 성격이 필요하다 하겠습니다.
공통요구사항 적기
공통요구사항에는 당연하지만 당연하지 않은 것을 적습니다. 이 역설적인 문장을 설명하기 위한 예를 들어보겠습니다. 우리는 화면을 아래에서 위로 올릴 때 엄지를 화면에 대고 아래에서 위로 끌어올립니다. 이런 행동을 스크롤 업이라고 합니다. 이렇게 당연한 기능의 제스처를 공통 요구사항에서 정의합니다. 제스처 외에도 팝업이나 키보드 설정 혹은 공유처럼 여러 화면에 동시에 등장하는 기능은 공통 요구사항에서 통일합니다.
스와이프 방식 등 설명
디자인 면에서도 공통 요구사항을 적습니다. 이때는 버튼 위치나 화면 구성 원칙들을 나열합니다. 예를 들어 뒤로가기(종료) 버튼은 윈도우 PC의 경우 창의 우측 상단에 있지만 Mac이나 iOS는 좌측 상단에 있습니다. 따라서 ‘iOS 앱의 뒤로가기 버튼은 좌측 상단에 고정하라’는 공통요구사항에 적을 수 있습니다. 그 외에도 버튼 디자인을 다양하게 구분하여 위계질서를 보여주는 것도 디자인 공통 요구사항에서 정의할 수 있는 요소입니다.
구구절절 길게 적었습니다만 세상만사가 그렇듯 화면 설계서도 실제로 그려보며 배우는 것이 가장 빠릅니다. 다 만들어진 화면 설계서를 보면 ‘와 이걸 어떻게 해’ 싶습니다. 하지만 일주일만 주면 누구나 할 수 있는 것이 이 작업이기도 합니다. 당장 ‘앱 설계학과’나 ‘앱 설계 자격증’같은 것도 없습니다. 누구나 본인이 원하는 서비스를 기획하고 사람들에게 전달할 수 있다는 뜻입니다.
하지만 이 일을 잘하는 것은 완전히 다른 문제입니다. 똑같은 컨셉의 서비스를 만들어도 어떤 앱은 자체 홍보가 필요 없을 정도로 팬층이 생기고 어떤 앱은 제작자를 비꼬는 별점 테러가 횡행합니다. 기획자는 항상 내가 조금 더 조사하고, 조금 더 고생하여 함께 일하는 동료, 그리고 수많은 고객에게 개비스콘을 선사한다는 사명감으로 일합니다. 잘 만든 서비스를 사용자가 좋아하면 그것만큼 뿌듯한 일도 없기 때문입니다.
잘만든 화면 설계서는 모두를 행복하게 합니다
추가적으로 저보다 고수분들이 쓰신 앱 화면 설계서 관련 자료를 하단에 링크로 남겨두었습니다. 모쪼록 많은 분들에게 도움이 되길 바랍니다.
송미경 님 [화면 설계서와 기능 명세서]
쀼어 님 [스토리보드 작성법 – 템플릿 제공]
데이먼 님 [한번쯤 들어봤던 화면설계 & 프로토타이핑 툴 총정리]
앱기획서, 이런 게 있다면 아직 개발하지 마세요.
전문가에겐 기본이지만, 처음 앱기획서를 제작하시는 분들이 가장 자주 하는 실수 3가지를 알려드리겠습니다. 앱개발 실패 후 린코퍼레이션을 찾아오신 업체 중 80% 이상이 했던 실수이기도 합니다.
개발 전 이것을 체크하지 않을 경우 개발 시간이 늘어나는 것은 물론 추가 비용이 발생할 수 있습니다. 무엇보다 원하셨던 앱으로 구현되지 않을 위험이 매우 큽니다. 개발을 앞두고 앱기획서를 작성하고 계신 분이라면 오늘 이 글을 주의 깊게 읽어주시기 바랍니다.
앱개발 기획 프로세스 한 장 정리ㅣ캐스팅엔
안전한 거래대금 예치 제도
업무 특성에 따라, 의뢰 고객과 파트너 합의를 통해
계약업무 시작 전, 기업고객이 캐스팅엔에 대금을 결제합니다.
계약업무 진행 중, 캐스팅엔이 대금을 안전하게 보호합니다.
계약업무가 완료되면 캐스팅엔에서 파트너사에 대금을 지급합니다.
프로젝트 결과를 확인 후 안전하게 대금을 지급할 수 있습니다.
에스크로 제도란?
제3자(은행, PG사, 보험 등 에스크로 사업자)가 소비자의 결재 대금을 예치하고 있다가 상품배송이 완료된 후 그 대금을 통신판매업자에게 지급하는 전자거래안전장치로 법률에서는 결재대금 예치제도라고 합니다.즉,판매자와 구매자가 대금을 직접거래하지 않고 제3자(KSnet)같은 서로 신뢰할 수 있는 중계기관을 끼고서 대금을 결제하는 제도입니다.구매자가 알리다로부터 물품을 구매하기로 했으면,물품대금을 KSnet에 입금합니다. 물품대금이 KSnet에 입금된게 확인이되면 물품을 구매자에게 발송하고 구매자는 물품이 잘 도착했고, 이상이 없음을 확인하시게되면 중계기관에서 예탁해 둔 대금을 알리다에 입금시키는 제도입니다.
앱&웹 기획서 스토리보드 양식.PPT 배포 (프리모아)
현재 새로운 분야의 기획 업무를 맡아 진행 하시나요?
기업내 신규 온라인 분야 사업 확장진행시, 관련 시장 조사 및 사업 타당성의 조사를 통해 본격적으로 TF 팀을 꾸리고 준비를 하게 됩니다. 특히 IT 관련 웹(Web), 앱(App),SW 분야 신규 사업 진행시 관련 부서, 팀들과의 여러 차례의 아이디어 기획 회의를 진행하게 되고, 회의를 통해 도출되는 주요 타겟, 사업 목적과 방향성 그리고 기능 리스트들 작성하고 시장의 유사한 레퍼런스 서비스 등을 조사한 후 정리된 내용들을 UI 설계/기획자가 실제 서비스의 WIRE FRAME을 설계하는 작업을 진행하게 됩니다.
하지만 프리모아에서 사업을 준비하는 고객들 서비스의 아이디어를 FRAME 설계하는 문서작업을 어려워하거나 피로감을 느껴하시는 분들이 종종 계셔 프리모아에서 실제 작성되어 적용되었던 샘플 기획스토리보드(PPT)를 공유드리며 고민을 해소시켜드리려 합니다
프리모아_기획서양식_2020_02_11.pptx 1.34MB
▶히스토리 문서이력 ( HISTORY)
<이 문서의 버전정보를 확인할 수 있는 화면>
작성된 기획서는 최초 작성 후 관련 여러 이해당사자들과의 의견 개진이나 환경에 따라 수정이 많이 이루어질 수 있습니다. 문서는 디자인, 개발 완료까지 작업을 진행하는 작업자와 관리자까지 최종 결과물에 대한 기초자료가 되기 때문에 수정된 정보 에 대한 관리가 되지 않으면 최종 결과물이 원하는 방향대로 나오지 않을 수 있습니다.
정해진 양식은 없지만 일반적으로 버전 별 변경일자, 수정된 페이지와 수정 내용을 작성하고 최종 버전을 공유합니다.
▶ 서비스 개요
<서비스에 대한 개괄적인 내용을 작성한 화면 >
신규 서비스라면 기획서를 읽는 다양한 관계자의 이해를 돕기 위해 간단한 서비스 개요를 삽입하면 좋습니다. 서비스의 배경과 목적, 효과를 공유하여 방향성을 전달합니다.
▶플로우차트
< 서비스 또는 단위프로세스의 흐름을 도식화 한 화면 >
서비스 유저 플로우는 개발자의 전체 흐름에 대한 파악에 용이합니다. 세부 기능별 프로세스 플로우는 각 기능에 발생 가능한 이슈사항을 확인할 수 잇고 대응에 대해 간결히 기술합니다.
이 또한 정해진 양식은 없습니다. 단 기호는 국제적으로 통일된 기호이기 때문에 맞추어 작성해주셔 야합니다.
플로우차트에 모든 정보를 작성하려 하다 보면 오히려 이해가 어려울 수 있습니다. 간결히 작성 후 상세 기획에 표기하는 것이 효율적입니다.
▶와이어프레임 ,화면설계 ( Wire Frame )
< UI(User Interface)라고 불리우는 서비스의 화면을 설계하고 실제 작업자에게 작업할 사항을 전달하는 화면 >
이 또한 지정된 양식은 없으나, 화면을 설계하고 각 요소에 번호(1, 2, 3)로 표기 후 우측의 Description영역에 내용을 작성합니다.설명을 상세히 작성하되, 디자인 보다는 구성요소와 기능에 집중하여 작성합니다. Description영역은 개발, 디자인을 구분 할 수 있고, 구분 없이 하나로 작성하기도 합니다.
예시는 스토리보드와 스토리보드를 토대로 실제 디자인 개발된 프리모아 모바일 웹 페이지입니다.
만약 외부 아웃소싱 발주를 위해 화면 설계서를 작성하는 경우, 상대적으로 관련 분야 사전 지식 및 서비스 이해도가 낮은 대상에게 유저 FLOW 와 각 화면별 기능동작이 어떻게 이루어지는지를 명확하게 이해를 시키는것이 주요 목적이므로 설계 문서 1차적으로 작성 후 서비스 시뮬레이션을 통해 누락된 것은 없는지, 불필요한 요소 제거 혹은 상세한 디스크립션, 주석을 작성 등의 수정/보완 작업을 통해 설계서의 완성도를 높이는 작업을 중점적으로 해야 할 것입니다.
프리모아_기획서양식_2020_02_11.pptx 1.34MB
적합한 IT전문가 (디자이너, 개발자 ) 찾거나 , 안전한 IT 아웃소싱을 진행 할땐,
http://www.freemoa.net
[무료웹세미나] 망하지 않는 웹/앱 기획서 만들기
*본 웹세미나는 온라인으로만 진행됩니다.
이런 분들은 꼭 들으세요!
웹/앱 기획은 처음 해보는 스타트업 창업자
개발자한테 칭찬받는 기획서 만들고 싶은 사람
갑자기 웹/앱 기획 일을 하게 되어 진땀 나는 사람
어깨너머로 배워서, 제대로 다시 해보고 싶은 사람
말만 넘치는 강의보다, 제대로 된 기획서를 눈으로 확인하고 싶은 사람
무엇을 배울 수 있을까요?
웹/앱 기획서 작성 단계별 업무 종류 파악 및 스킬 빈틈없는 와이어프레임 작성하는 법 기획툴 사용법 기획 문서 또는 기획자들이 사용하는 용어 개발자들과 커뮤니케이션 잘하는 법
아무리 사업 아이템이 좋다고 해도, 서비스로 구현하기 위해서는 엄청난 시간과 돈이 들기 마련이죠.
그렇게 중요한 일을 하는데, 대충 기획을 해서 개발자에게 넘긴다구요?!
수백만원에서 수천만원이나 들어가는 개발비를 들여서 만들어 놓고,
정작 내가 원하던 그런 서비스 형태가 되지 않는 경우가 얼마나 많은지 아세요?
돈도 돈이지만, 그렇게 허비한 내 귀중한 시간은요?
다시 만들기도 힘들고, 그렇다고 이 상태로 계속 서비스하기도 어렵고.
개발자는 이제 나몰라라 하고.. ㅠ
그래서 다른 건 몰라도, 이건 꼭 알고 앱/웹 서비스를 맡기셔야 합니다.!
“웹/앱 기획 전문회사 (주)린캔버스의 김규진 대표가
여러분의 웹/앱을 성공적으로 이끌 수 있는 기획의 핵심을 알려 드립니다. ”
[오프라인 강연 장면](주)린캔버스 는
린캔버스 (https://www.leancanvas.io/ )는 창업자의 서비스를 제대로 개발하기 위한 웹/앱 어플리케이션 기획 컨설팅 전문 회사입니다. 수 년에 결처 수많은 창업자들이 제대로 개발을 완성할 수 있도록 컨설팅을 진행해 왔고, 여기에 더 나아가 웹기획을 보다 쉽게 할 수 있는 템플릿 어플리케이션을 직접 개발하여 창업자들의 성공을 도와주는 서비스를 확장해 나가고 있습니다.
[무료웹세미나]<망하지 않는 웹/앱 기획서 만들기>
하이라이트 다시보기
[유료웹세미나]<망하지 않는 웹/앱 기획 기초 마스터반>
12/17 화 (저녁9시~11시) & 12/18 수 (저녁9시~11시) (총 4시간 코스)
할인(44%) 금액 사전등록 바로가기
<결제 고객 경품리스트>
*전원 경품 좋은 기획서 샘플 결제 고객 전원 제공
*선착순 경품 결제 고객 선착순 10명, 1시간 무료 기획 컨설팅
웹세미나란 무엇일까요?
– 집이나 카페에서 편하게 PC / 모바일 을 통해 세미나에 참석할 수 있어요.
– 강사와 실시간 채팅으로 질의응답 소통할 수 있어요.
– 웹세미나가 끝나면 인강 형태로 언제든 복습할 수 있어요.
웹세미나 문의
키워드에 대한 정보 어플 기획서
다음은 Bing에서 어플 기획서 주제에 대한 검색 결과입니다. 필요한 경우 더 읽을 수 있습니다.
이 기사는 인터넷의 다양한 출처에서 편집되었습니다. 이 기사가 유용했기를 바랍니다. 이 기사가 유용하다고 생각되면 공유하십시오. 매우 감사합니다!
사람들이 주제에 대해 자주 검색하는 키워드 [IT창업]03.웹\u0026앱 설계 기획서 작성하기 (IT창업 마지막 단계)
- 창업
- 창업지원
- 지원사업
- 정부지원사업
- 예비창업자
- 창업준비생
- 정부지원
- 예비창업
- 서비스기획
- 지원금
- 대외활동
- 취업
- 멘토링
- IT컨설팅
- 웹기획
- 앱기획
- 디자인
- 웹디자인
- 앱디자인
- 웹기획서
- 앱기획서
- UX기획
- 기능명세서
- 화면설계서
- 와이어프레임
- wireframe
YouTube에서 어플 기획서 주제의 다른 동영상 보기
주제에 대한 기사를 시청해 주셔서 감사합니다 [IT창업]03.웹\u0026앱 설계 기획서 작성하기 (IT창업 마지막 단계) | 어플 기획서, 이 기사가 유용하다고 생각되면 공유하십시오, 매우 감사합니다.