iOS 개발을 시작한지 2-3개월만에 처음으로 출시한 앱 Timo에 대한 회고입니다.
정말 기획부터 개발까지 혼자서 해내야 했기 때문에 우당탕탕 굴러가기도 했지만 결과적으로 출시에 성공했습니다🎉
옆에서 길을 헤맬때마다 도와준 SeSAC 멘토님들과 동기분들께 감사인사를..! (혼자 한게 아니기도 하네요)
사실 개발도 개발이지만 기획, 디자인에서 정말 방향성 잡기가 어려웠기때문에 나름대로 제가 한 방법을 적으면서..전반적인 개발에 대한 회고도 함께 있을 예정입니다!
1. Timo 앱 소개
1-1. 기획 동기
사실 원래부터 너무나도 만들고 싶었고, 간절하게 바랐던 주제!였으면 좋았겠지만 저의 개발능력 한도 내에서 만들수있는 내가 원하는 앱이 뭘까에 대한 고민을 많이 했던 것 같습니다.
그래서 생각한 큰 테마는 공수산정 앱을 만들자!라는 것이었습니다. 공수산정이 생소하실수도 있는데요. 한 프로젝트 또는 테스크를 할 때 예상시간을 산정하고 실제 시간과 비교해보는 그런 프로세스입니다.
이렇게 생각하게 된 계기는 열품타 앱에서 시작된 아이디어였습니다. 다만 열품타는 공부하는 학생에 포인트가 맞춰져 있다고 생각했기에, 개발자, 직장인 등 모두가 사용할 수 있으면 좋겠다라고 생각했습니다. 거기에 추가적으로 하나의 테스크를 해냈다는 성취감을 줄 수 있는 포인트가 어디에 있을까라고 생각하게 되었고, 공수산정이라는 테마를 가져오게 되었습니다.
1-2. Timo 앱 소개 & 기능
작업 단위별로 예상 시간을 기록하고 실제 작업 시간을 측정할 수 있는 앱입니다.
프로젝트 단위로 작업을 구성할 수 있고, 각 작업별로 타이머를 통해 시간을 측정할 수 있습니다.
미리 설정해둔 예상 시간과 실제로 기록된 시간을 비교하면서 점차 그 차이를 줄여나가는 것을 (개발자가) 바라는? 앱입니다.
2. 기획
앱을 기획한다는 것은 정말,, 추상적인 작업이라고 생각합니다. 제 입장에서는 '아무것도 없는 도화지에 디자인 감각도 없는 내가 어떻게 앱을 기획해' + '보이는게 없는데 어떻게 기능을 구상해'의 굴레에서 한참 헤맸던 것 같습니다.
그렇기에.. 제가 기획에 도움이 되었던 Reference 찾기와 디자인했던 방법에 대해 적어보았습니다. 우연히 블로그 들어왔다가 누군가에게 도움이 되기를..
2-1. Reference 찾기
어차피 제가 현재 만들 수 있는 앱은 전 세계를 뒤지면 최소한 하나는 발견될 이미 있는 앱이라고 생각했습니다. 그리고 가장 기본 베이스는 흔하디 흔한 투두앱이라고 생각했고, 그렇다면 널리고 널린게 레퍼런스 아닐까?해서 서치를 시작했습니다.
제가 도움이 되었던 레퍼런스 참고 사이트들은 다음과 같습니다.
1. 기획부터 출시까지 스토리가 담긴 블로그
이걸 레퍼런스라고 하는게 맞을지는 모르겠지만, 우선 프로세스가 어떻게 되는 지 큰 그림을 그릴 때 도움이 많이 되었습니다. 만들려고 하는 앱이랑 전혀 다른 앱이라도 어떻게 시작하고, 어떤 방향성으로 가는게 맞을지 생각하는데 도움이 되었습니다.
2. 핀터레스트
저같은 경우는 'Project Management UI'로 검색했습니다. 핀터레스트의 장점은 디자인적으로 구상할 수 있는 포인트들이 많다는 점입니다. 보면서 이런 요소가 들어가면 좋겠구나 하는 화면들을 찾을 수 있었습니다.
단점은 단편적인 화면UI만 나와있는 경우가 많아서 기능구현을 할 때 제가 할 수 없는 UI도 많았고 기능 연결성 측면에서 스스로 고려해야 할 부분들이 많습니다.
3. Behance
핀터레스트에서 이런 화면이 들어가면 좋겠다!를 봤다면 그 다음에는 Behance를 참고하면 좋습니다. 물론 저의 경우가 레퍼런스를 찾기 쉬운 앱이었어서 그럴 수도 있지만, Behance의 장점은 하나의 앱을 만들기 위해 어떻게 설정할지, 디자인할지 기능적으로 연결성까지 체크할 수 있는 글들을 찾을 수 있었습니다.
제가 도움이 되었던 예시링크들입니다!
Task Management App
Task Management App 게시: 2020년 7월 10일
www.behance.net
Virtual Office Management App (UI/UX Case Study)
E-office organizes, tracks, and manages projects, tasks, and teams. These apps offer task lists, project timelines, collaboration tools, and reporting. They can be used to assign tasks to team members, set deadlines, track progress, and share files. E-o…
www.behance.net
2-2. 디자인
이런 레퍼런스들을 참고하면서 기획을 했고, 이후에는 대략적인 UI 구성을 할 필요가 있었습니다. 기획 단계에 디자인(프로토타입)을 할 때도 다양한 방식으로 구현을 할 수 있는데 사실 이부분은 자신이 가장 편한 방법으로 하면 된다고 생각합니다.
저한테도 몇 가지 선택지가 있었는데 그에 대한 제가 생각하는 장단점을 이야기해보겠습니다.
1. 아이패드 - 그냥 손으로 그리는 방법,,입니다. 가장 러프하게 본인의 생각을 표현할 수 있고 자유도가 높습니다.
하지만 저는 적합한 방법이 아니었습니다. 우선 그림실력이 제로인데다가 제가 그린 그림이 예쁘지 않으니 코드적으로 어떻게 UI를 이쁘게 잡을지 기능을 어떻게 넣어야 할지 모르는 상황이 되어서 패스했습니다.
2. 스토리보드 - iOS 개발만 공부했었다면 스토리보드로 프로토타입을 잡는 것도 하나의 방법입니다. 실제로 멘토님들도 가장 간단한 방법으로 추천해주시기도 했었고 실제로 디자인 툴을 배울 필요가 없다는 점이 장점입니다. 하지만 코드를 사용하지 않고 스토리 보드로 구현하기에는 라운드 처리(cornerRadius..ㅎ)라든가 불편한 점이 있었습니다.
저는 앞서 말했듯 디자인이 있어야기 기능을 어떻게 할지 가늠할 수 있을 것 같았기에 스토리보드를 사용하면 다시 그러나 나는 디자인을 못함 이굴레를 벗어나는게 어려워서 시도는 했으나 다른 방법을 찾아야 했습니다.
3. 피그마 - 제가 생각하기에 그래도 프로토타입을 만들때 가장 빠르게 배울 수 있는 툴이 아닐까 생각합니다. 솔직히 예쁘고 완성도 있게 만들려면 디자인 감각도 필요하고, 배울 것도 많지만 그냥 스토리보드에서 cornerRadius정도만 더 주고 싶다. 연결성을 조금만 더 보고싶다 정도면 피그마 추천합니다!
실제로 피그마를 하나도 모르는 상태에서 유튜브 + 지인의 속성 1시간 강의 정도로 간단하게는 구현이 가능했습니다.
네.. 그래서 저는 피그마를 선택했고 정말정말 러프하게 잡은 프로토타입 UI는 다음과 같습니다.
실제로 실행된 뷰들도 있었고 이중에서도 상당부분 수정이 되었습니다.
처음에는 전반적으로 한번 그렸고 이후 기능을 구체적으로 생각할 때 가장 핵심이 되는 두 뷰만 가지고 생각을 했었습니다.
2-3 DB 구조 잡기
처음 기획했을때는 이렇게 DB 초안을 잡았습니다. 다만 여기서 많은 부분이 변경되었..습니다.
우선 SubTask까지 구현했으면 좋겠지만 필요성 측면에서도 고민하다가 날리는 것으로 결정되었고, 또 타이머를 구현하다 보니 추가된 속성들도 있었습니다.
DB를 처음에 제대로 고민하지 않으면 나중에 번거러워지기 때문에..처음에 시간을 투자해서 생각하기를 추천드립니다. (물론 필요한 앱에 한해서)
개발할때 살짝식 변경되는건 그럴 수 있는데 나중에 앱 출시하고 변경할 사항이 많으면 migration을 해야하니까..귀찮지 않으려면 미리미리 구조를 잘 잡길 바랍니다.
너무 길어지는 것 같아서 이후 개발, 트러블슈팅, 회고 부분은 두번째 글에서 이어서 적도록 하겠습니다!
두번째 글은 기획적인 부분보다 기술적인 부분이 더 많을 예정입니다!
