메모장 프로젝트 시작 전

< 손공장 코딩 소개

메모장 프로젝트를 시작하기 전에 앱이 만들어지는 과정을 잠깐 이야기를 할까 합니다.

하나의 앱을 만들기 위해서는 정말 많은 과정을 거치게 됩니다. 무슨 앱을 만들지를 정하고, 어떻게 만들지 기획하고… 이건 대부분 기획자가 하는 일이죠. 기획자가 이런 앱을 만들겠다고 스토리보드를 만들면, 그것을 디자이너와 개발자가 봅니다.

스토리보드는 파워포인트로 제작해도 되고, wireframe 제작용 툴을 사용해도 됩니다. 대부분 파워포인트로 제작하죠. 맥은 키노트로 제작합니다.

 

 

PowerPoint                          Keynote

참고 wireFrame : https://zapier.com/blog/best-wireframe-tools/

디자이너는 스토리보드를 보고 컨셉에 맞게 화면 디자인을 하게되죠. 개발자는 스토리보드를 보고 정말 가능한 기능인지를 판단한 후에 그 기능을 어떻게 만들지 설계를 합니다. 이 부분이 설계 단계입니다.

이 단계에서 기획자, 디자이너, 개발자간에 사이가 안좋아 지는 경우가 많아요. 각자의 입장만 주장하게 되면 기획단계에서부터 망가지게 되죠. 하지만 우리는 혼자서 다 할거니까 자신과 싸울일도 없습니다. 혹시 다중인격의 소유자라면 서로 싸울수도 있겠네요.

어쨌건, 기획자의 스토리보드는 굉장히 중요합니다. 스토리보드에 맞춰서 디자인, 개발설계가 진행되니까요. 개발 도중에 스토리보드가 약간이라도 고쳐지면, 이젠 정말 디자이너와 개발자들과는 다시는 보지 말자는 겁니다.

그만큼 앱의 결과를 좌지우지 하는것이 기획자의 스토리보드입니다. 가끔 윗분들은 개발이 다 된 테스트용 앱을 보고 기획을 바꾸어버리는 경우도 정말 많이 있습니다. 윗분들은 결과물을 봐야 뭔가 보이는가 봅니다.

스토리보드가 완성이 되면 디자이너는 디자인 툴을 사용해서 디자인을 하게 됩니다. 대부분 어도비사의 포토샵, 일러스트레이터를 사용하죠. 요즘은 스케치(Sketch)라는 전용툴을 많이 사용하고 있습니다.

        

Photoshop                               Illusrator                                Sketch

그래서 여기서도 스케치, 포토샵, 일러스트레이터를 병행하면서 간단한 디자인을 제작할 겁니다. 이렇게 제작된 디자인을 다 같이 공유하고 개발자가 개발을 쉽게 할 수 있도록 해주는 제플린(Zeplin)이라는 툴을 사용해서 공유합니다. 이것도 같이 해 볼겁니다.

https://zeplin.io/

개발에서는 스토리보드에 나와있는 기능을 보고 데이터베이스를 설계하고 로직을 설계합니다. 여기에서 데이터베이스는 데이터를 저장하는 공간이라고 보시면 되고, 로직은 그 데이터를 화면에 보여주는 일련의 과정이라고 생각하시면 됩니다.

그리고 앱을 만들기에 적합한 프로그램 언어를 선택하게 되죠. 프로그램 언어는 정말 다양합니다.

대표적으로 php, c#, Java, Objective C, phython, nodeJs 등 다양한 프로그래밍이 있고 html, css, javascript 등의 마크업, 스크립트 언어등이 있습니다.

지금은 마크업, 스크립트가 뭔지 각 언어가 뭔지 생각하실 필요는 없습니다. 이런 용어는 진행하면서 그때 다시 한번 언급하겠습니다.

여기에서는 javascript의 업그레이드인 angularJS를 사용할 겁니다. 앱으로 만들기 위해서는 ionic이라는 것을 사용할거구요. 이것도 그때가서 다시 언급하도록 하겠습니다.

Angular 7                                              ionic

     https://angular.io/                https://ionicframework.com/

개발툴은 다양하게 있지만, JAVA라는 프로그래밍 언어는 대부분 이클립스(Eclipse)라는 툴을 사용하죠. 요즘에는 이클립스에서 인텔리제이(IntelliJ)를 사용하는 추세고, C#이라는 언어는 마이크로소프트사의 비쥬얼스튜디오(VisualStudio)라는 툴을 사용합니다. iOS의 경우에는 맥에서만 돌아가는 XCode를 사용합니다.

  

   

각 툴에서도 당연히 다른 언어로 개발할 수 있습니다. 이클립스, 비쥬얼스튜디오, XCode 등등 다 배우실 필요는 없습니다. 얘네들은 개발을 쉽고 편하게 해주는 편의성을 제공해주는 것이지 그 툴만 사용해서 개발하는 건 아닙니다. 참고로 윈도우의 메모장, 맥의 텍스트 편집기만으로도 개발이 가능합니다. 대신 정말 힘들게 해야하죠.

어쨌든, 우리는 이런 고급툴을 사용하지는 않을 거예요. 대신 요즘 대세인 Visual Studio Code를 사용할겁니다. 마이크로소프트사에서 간편하게 만든 개발툴입니다. 또한 마음대로 설치해서 하셔도 됩니다.

https://code.visualstudio.com/

우리는 메모장을 만들기 때문에 클라이언트, 서버라는 개념은 사용하지 않을 겁니다. 나만의 메모장이며, 인터넷도 필요없죠. 만약 SNS, 채팅, Forum등 다른 사람들과 정보를 공유하고, 이야기를 해야하는 앱이라면 인터넷도 필요하고, 서버라는 것도 필요합니다. 이건 메모장을 만들고 난 후에 다른 프로젝트로 진행해 보겠습니다.

정리하면, 기획자가 파워포인트 또는 키노트로 스토리보드를 제작하고 디자이너가 스케치, 포토샵, 일러스트레이터를 사용해서 디자인을 하고, 개발자는 개발툴.. 여기서는 VsCode를 사용해서 ionic과 angularJS를 코딩할거예요. 최종적으로 이런 것들을 이용해서 앱으로 만들어 보도록 하겠습니다.

필요한 기능 체크하기(요구사항) - 1 >