초등학생도 쉽게 만들 고퀄리티 앱 스토리보드 양식

※ 전문 기획자와 디자이너 합작 ※

온라인 App 서비스를 제작하려고 하는데 기획 비용이 생각보다 너무 많이 들어 기획 단계를 대충 건너뛰려 생각하고 계시지 않으세요?

머릿속에서 하는 상상으로는 이미 완성되었는데 업체에 맡기려니 고액을 부르기만 하고 시작하려니 금액 때문에 그조차도 고민되지 않으세요?

저도 처음 IT회사에 입사했을 때 보기 불편하고 이쁘지도 않은 기획서를 검토하려니 일을 시작하기도 어렵고, 작업 시간보다 고민하는 시간이 더 많았습니다. 매일 work time 9시간 중 절반 이상을 서류 검토하는데 소비하는 경우가 많았습니다. 그때 문득 이런 생각이 들었습니다.

' 오늘 정말 힘들게 일했는데, 내가 실제로 작업한 양은 고작 결과물의 절반도 하지 못했구나.'

처음에는 제가 문제인 줄 알고 집에서 기획서를 빠르게 이해하려고 공부하고 다른 현명한 사람들은 이 문제를 어떻게 해결하는지 알아보았습니다.

그 결과, 기존 기획서의 문제점과 개선점을 찾을 수 있게 되었습니다.

1. 기획서는 제작하는 사람마다 결과물이 들쭉날쭉하다.

- 대부분 사람은 기획서는 ppt로 만들어야 한다는 고정관념이 있습니다. 하지만 실무에서는 그럴 의무가 없습니다. 기획자, 디자이너, 개발자들과의 협업이 가장 중요합니다. 협업이 잘되기 위해선 문서 리딩이 좋아야 하는데 제작 중 기획이 자주 바뀌게 되어 10년 차 전문가들도 놓치는 부분이 다반사입니다. 또한 기획자의 성향에 따라 결과물 퀄리티가 제각각이기 때문에 귀찮은 부분을 최소화한 작업 문서가 필요하다고 생각했습니다.

> 해당 문서는 깔끔하고 심플한 디자인으로 설계되어 서로 놓치는 부분을 최소화한 문서입니다. 또한 각 툴에서 제공되는 기능을 활용하여 작업 중 다른 부분에 신경을 최소화할 수 있도록 제작하였습니다. 다양한 예시와 가이드를 친절히 설명해 드리기 때문에 제목과 같이 '초등학생'도 쉽고 재미있게 사용할 수 있습니다. 또한 툴 사용 팁도 첨부돼 있기 때문에 따로 공부할 필요도 없습니다.

2. 기획서에서 사용되는 서체가 고리타분을 떠나서 가독성이 너무나 떨어진다.

- 기획서는 아이디어를 담아내는 문서이기도 하지만 결국엔 다른 사람들에게 보여주려고 만드는 문서입니다. '보기 좋은 떡이 먹기도 좋다'와 같이 작업한 문서를 사람들이 온전히 아이디어를 읽어내는 데 집중할 필요가 있다고 생각했습니다.

> 사용된 폰트는 '스포카 한 산스 네오' 폰트입니다. (문서 내에 다운로드 정보 有) 폰트는 상업적으로 무료로 사용할 수 있는 폰트이며, 가독성이 좋은 폰트입니다. pc에 폰트를 적용하여 문서 작업을 시작해 보세요.

3. 기획서를 수정해야 하는데 수정할수록 막막해진다.

- ppt로 만든 기획서에 큰 단점입니다. 페이지별 부분 수정은 큰 부담 없이 할 수 있겠지만, 전체 플로우를 체크하면서 수정된 부분으로 인해 파생되는 문제들을 확인하기가 어렵습니다. 이렇게 사소한 문제들이 개발 과정에서 엄청나게 눈덩이처럼 커져서 나중에는 개발 중에 하나씩 손보며 서비스 품질을 갉아먹는 결과를 초래합니다.

> XD와 Figma로 만든 기획서는 버전 관리, 다수 협업, 수정 반영 등 이러한 단점들을 보안한 프로그램이기 때문에 쓰지 않을 수 없는 컴퓨터 도구입니다.

4. 기획서를 작성하는데 기획자인 나도 모르게 비주얼에 신경 쓰고 있었다.

- 이 부분은 제가 경험이 별로 없던 시절에 실제로 경험한 사례입니다. 앱 로직, 앱 사용성과 같이 정말 고려해야 할 부분에 신경 써야 하는데 한 화면을 예쁘게 꾸미고 있던 저를 발견하게 되었습니다. 정신 차리고 다시 집중하긴 했지만 이러한 과정이 생각보다 정말 많이 반복됩니다.. (왜., 통제가 잘 안되지..?)

> 해당 문서에서는 그런 걱정 Nope! 이쁜 블록(컴포넌트)들을 휴대전화 프레임에 차곡차곡 쌓듯이 마우스를 움직여 주고, Ctrl C + V만 할 줄 알아도 완성할 수 있습니다.

5. 몇 날 며칠 고생하며 만든 기획서를 공유하자 돌아오는 것은 핀잔뿐 ㅠ.,ㅜ

- 정말 마음 아프지만 현실입니다. 개인에 고민을 거듭한 결과물이 사랑을 받지 못한다는 것은 사업자, 직원 누구에게나 마음 아픈 기억으로 자리 잡습니다.

> 하지만 아시나요? 상사, PM, 디자이너, 개발자 등 기획서를 검토하는 모두가 좋은 결과물을 지향합니다. 보기 난해하고 이해하기 어려운 문서를 심플하고 퀄리티 있는 작업물로 전달하면 핀잔보다는 제대로 된 피드백을 주게 될 확률이 훨씬 높습니다.

위 문서를 사용하면, 앱 기획을 더욱 손쉽게 좋은 퀄리티로 사람들에게 공유할 수 있습니다. 사용 가이드를 읽고 작업을 시작해 주세요. 현명하게 사용하는 방법들을 어렵지 않게 정리해놓았습니다.

—

문서 구성 목록

1. 사용 가이드

- User guide

2. 컴포넌트 모음

- Component collection

3. 참고 템플릿 - iOS, Android

- iphone_sample

- Android_sample

4. iOS, Android 목업 틀

- iphone_frame

- Android_frame

5. 샘플 작업본

- page_sample01

- page_sample02

- page_sample03

6. 기획서 사용 소스

- Source of use (suggestion)

7. 작업 아트보드

- page ~

—

이런 분께 추천해 드립니다.

1. 온라인 사업 아이디어를 가지고 있는 사람

2. 더욱 좋은 능률로 회사에 인정받고 싶은 사람

3. 회사 사정으로 인해 앱 기획을 배정받은 사람

4. UI 디자인 작업 전에 UX 설계가 필요한 사람

5. 기획의 필요성은 알겠지만 과한 비용 때문에 시도를 고민하는 사람

6. 일을 현명하게 하려고 노력하는 사람

7. 앱 기획을 하려는 사람

—

이런 분은 구매를 신청하지 말아 주세요!

1. 직접 할 의지가 없고 부정적 사고를 하는 사람

2. 좋은 것을 보여줘도 보려고 하지 않는 사람

기존에 사용하던 기획서에서 문제의식을 느끼고 경험한 프로젝트들을 기반으로 제작한 문서입니다. 다수의 프로젝트에서 사용한 경험이 있고 더욱 좋은 결과물을 제작하는 데 큰 도움이 되었습니다.

좋은 피드백들은 감사히 수용하여 반영하도록 하겠습니다.

—

후기 작성 시 제공되는 보너스!!!

1. 기획서 작업에 있어서 궁금하신 점이나 실무 노하우 질문 5개를 성실히 답변드리겠습니다.

2. 앞으로 업데이트되는 버전을 스크린 캡처로 구매 인증과 후기 인증을 하면 50% 할인된 가격에서 추가로 20% 할인하여 구매하실 수 있게 하겠습니다.

3. 요청하는 추가 블록(컴포넌트) 10개를 맞춤형으로 제작해서 무상으로 전달해 드리겠습니다. (5만 원 상당)

현재 문서 가격은 리뷰 이벤틀 진행하기 위해 아주 저렴한 가격으로 한정 판매하고 있습니다. 문서가 저렴하다고 내용이 저렴하지 않습니다.

구매 확인 후 최대한 빠르게 대응해 드립니다.

STANDARD, DELUXE 제품은 문서를 받은 후 환불이 되지 않습니다.

1. STANDARD

- 문서 전달(Adobe XD 파일)

2. DELUXE

- 문서 전달(Figma 파일)

3. PREMIUM

- 문서 전달(Adobe XD, Figma 파일)

※추가 구매 가능 상품

- 직접 의뢰 (맞춤 제작) : 10p 기준 300,000원(수정은 원하시는 결과물로 원본 전달 전까지)

* 옵션 선택 후 의뢰접수 > 작업 공수(기간) 및 견적 > 견적 내용 협의 및 확정 > 작업 착수 > 완료

- 컴포넌트 작업 : 개당 5,000원

* 해당 문서에 제공되어 있지 않은 컴포넌트를 맞춤형으로 제작해 드립니다. 아이콘을 무료로 다운받으실 수 있는 아카이브 사이트 정보를 제공해 드리고 있지만 해당 사이트에서 찾을 수 없는 소스들을 말씀해 주세요.

1. 앱 기획에 조금이라도 관심을 가지고 있다는 마음가짐

2. 이 자료를 120% 활용해보자 하는 욕심