Prologue
애플 아카데미에 들어온 지 약 4개월.. 시간이 정말 빠르다.
MC 1과 MC2, 그리고 나노챌린지 까지 끝이 났다.
나는 4개월 가량 어떤 성장을 이뤄냈는가?
이번 나노챌린지가 내 성장 상태를 돌아보는 계기가 되었다고 생각한다.
도메인, 테크, 디자인 사실 전 영역이 부족하다.
당연하다 나는 배우러 왔으니까. 다 잘하면 여기 안 있지 ㅎ..
이번 나노챌린지의 목표는 'Fill the Gap'
즉 도메인, 디자인, 테크 중 부족한 영역, 갭차이가 큰 부분을 보완하는 것이다.
그래도 개발은 나름 혼자서 꾸준히 공부하고, 앞으로도 공부할 것이기 때문에
나는 '디자인'에 한번 집중해 보기로 했다. (물론 개발을 곁들인..)
Why Design?
MC1, MC2를 진행하면서 '나도 디자인 해보고 싶다.'라는 욕심이 계속 커졌던 것 같다.
MC1에서는 SwiftUI에 허덕였고, MC2에서는 SwiftUI와 좀 더 친해졌었다.
하지만 공통적으로는 디자인 부분은 거의 손대지 못했다.
물론 UI/UX적인 고민은 디자이너와 함께 했지만
직접 Figma나 Procreate, Illustrator와 같은 툴을 활용해 보지는 못했다.
그래서! 필요한 디자인 에셋을 내가 전부 만들어 버리겠다는 챌린지를 시작했다.
기획
우선 0순위 욕심은 '앱스토어 배포' 였다.
iOS 공부를 시작한 지 약 5개월.. iOS 개발자가 되겠다 다짐한 순간부터, 사실 애플 아카데미에 들어왔을 때부터
'앱스토어에 내 앱이 하나라도 있으면 좋겠다.'라는 욕심이 있었다.
간단하지만 평소에 쓸 수 있는? 내가 자주 쓰는 앱이면 더 좋겠다 라는 생각을 곁들인..
대략 10일정도 안에 기획, 디자인, 개발, 출시까지 전부 해야하기에
개발 공수가 적게 들면서 실용적이고, 내가 쓸 수 있고 남도 쓸 수 있는 앱이 무엇일까 고민하다 '투두리스트'로 결정했다.
앱스토어에는 이미 수많은 투두리스트가 존재한다.
여기서 어떤 차별점을 만들고, 유저에게 특별한 가치와 경험을 제공할 수 있을까?
나는 '귀여움'에 집중했다. 귀여운건 최고니까... 귀여운 디자인이 개인적으로 정말 큰 가치라고 생각한다.
오케이! 귀여운 디자인의 투두리스트를 한 번 만들어서 앱스토어에 배포해보자!
디자인 컨셉, 컬러
어.. 일단 컨셉을 정하려고 했다.
오래 걸리지 않았다. 컨셉은 고양이다.
why? 내가 제일 좋아하는 캐릭터가 카카오의 춘식이라서..ㅋㅋㅋ
하지만 저작권 이슈로 춘식이 투두리스트를 만들 수는 없다.
그래서 그냥 귀여운 고양이 컨셉 투두리스트로 간다.
Main Color
따뜻한 파스텔톤 옐로우로 정했다.
귀엽고 감성적인 앱 분위기를 연출 해야하기 때문에, 노랑노랑한 것이 좋다고 생각했다.
Point Color
노란색의 보색을 찾아보기도 하고, 적절히 시인성에 문제도 없으면서
전반적인 따뜻한 분위기를 해치지 않는 컬러를 찾았다.
컬러휠을 계속 돌려가며 적절한 파스텔톤의 핑크로 정했다.
MVP 개발 (with Figma)
본격적인 디자인에 들어가기 앞서, 디자인을 적용할 틀이 필요하기 때문에 MVP 개발에 들어갔다.
기본적으로 SwiftUI, List를 활용할 것이다.(이 때 까지만 해도 개발 할 거 없을줄...)
그리고 이것을 피그마에서 간단하게 확인해 봤다.
나름대로 UI/UX적인 고민을 꽤 했다. 여기가 좋을까.. 이것도 필요할까..
개발적으로는 이것 저것 데이터도 더 받아야 할 것 같고 이런 저런 기능도 추가되어야 할 거 같은데..라는 생각이 계속 들었지만.
개발 공수 최소화, 최소 기능, 디자인에 집중, 복잡하지 않은 사용자 경험 super simple super focused를 되새겼다.
추가적으로 유튜브를 통해 피그마에 대한 기본적인 기능들도 살펴봤다.
컴포넌트 관리하는 방식이나 오토레이아웃 등을 보면 피그마는 정말 개발자가 만든 디자인 툴이 분명하다...ㅋㅋㅋ
본격 디자인 시작 (Procreate)
먼저 필요한 디자인이 무엇들이 있는 지 생각해봤다.
[메인 배경, 메모 추가 화면 배경, 메모 추가 버튼, 앱 아이콘, 빈 화면에 필요한 온보딩 애니메이션]
오케이 뭐가 많네.. 그럼 뭘로 만들까? 고민도 없이 Procreate로 만들기 시작한다.
why? MC1, MC2에서 Procreate를 활용한 팀원들이 있었고 너무 재밌어보였다.
또한 일러스트와 같은 툴을 배우기에는 시간이 너무 촉박하다고 판단했다.
그래서 Procreate가 손그림 느낌을 잘 낼 수 있으면서 빠르게 디자인 할 수 있는 툴이라고 판단했다.
근데 나는 그림을 못그린다.
물론.. 뭐 챌린지로 그냥 해보는 거니까 상관은 없지만.. 나는 정말 그림을 못그리는 사람이라 생각하고 살아왔다.
내가 뭐 그리면 맨날 사람들이 웃길래..ㅋㅋㅋ
그래서 정말 반듯하고 또렷한 일러스트보다는 아기자기한 손그림으로 간 것이다.
그래도 디자인 시안이 나오고 나서 디자인 멘토분들이나, 다른 러너들의 반응이 굉장히 좋아서
스케치는 잘 못하지만 일러스트 감각은 꽤 있을 지도..? 라는 혼자만의 착각을 하게 된다.
Procreate도 정말 한 번도 안써봤고, 포토샵, 일러스트와 같은 레이어 기반 프로그램 경험이 없어서
이 또한 유튜브를 보면서 하나하나 연습하고 익혀가며 사용했다.
먼저 '귀여운 고양이'컨셉이기 때문에 고양이를 몇마리 그렸다.
이름은 참고로 삼색이, 먼지, 나른이, 노랭이 ㅎㅎ
그리고 배경을 꾸밀 수 있는 여러 요소들을 손 가는대로 그렸다.
고양이 장난감, 츄르, 꽃, 생선 등..
MVP 앱에 넣어보면서 조금씩 시안을 수정했다. 이래서 최최최최종, 진짜찐막파이널최종10.. 이러는 거구나..를 깨달았다 ㅋㅋㅋ
Stamp 디자인
사실상 이 앱의 핵심 기능인 '도장'을 그려야 했다.
사용자가 투두를 완료했을 때, 참 잘했어요 도장을 콕 찍어주고 싶었다.
고양이가 발바닥으로 약간 꾹꾹이 하듯이!
그리고 지우고 컬러 바꾸고, 위치 바꾸고.. 정말 오래 걸렸던 것 같다. 그래도 만들고 나니 너무 귀여워서 만족스러웠다.
애니메이션 제작
투두리스트, 메모가 하나도 없을 때 빈 화면만 뚱하니 있으면 어색하기 때문에, 메모를 추가하라는 온보딩용 화면이 필요했다.
나는 이걸 애니메이션으로 제작해보고 싶었고 고양이가 손을 흔드는 모습이면 좋겠다고 생각했다.
프레임 단위로 조금씩 옮겨가며 애니메이션을 만들었다. 고양이 발바닥이 좌우로 왔다갔다 움직이는 귀여운 애니메이션이다.
디자인 적용, 개발
필요한 에셋들을 잘 넣어서 적용하고, 코드를 짜기 시작했다.
원래는 유저 디폴트로 데이터를 저장하는 방식이었는데,
이전 챌린지에서 코어데이터가 적용되었지만 제대로 살펴보지 못한 아쉬움이 있었다.
그래서 코어데이터를 적용하는 과정을 좀 거쳤다.
CRUD를 구현하고, List아이템과 상호작용하는 부분에서 꽤 시간이 걸렸던 것 같다.
저장이 잘 되는지, 삭제가 잘 되는지, 이동이 잘 되는지.. 뷰 렌더링이 바로 안되는 경우도 있었고
이런 저런 버그들을 꽤 만났기 때문이다.
또 iOS 기본 애니메이션 때문에 애를 먹기도 했었다.
얼핏 듣기로는 현업에서 기본 List를 잘 사용하지 않고, 전부 커스텀해서 사용한다던데 그 이유를 좀 알 것 같기도 했다.
정말 그냥 단순한 리스트만 필요하면 쉽고 빠르지만, 이것 저것 원하는 기능이나 디자인이 많아질 수록
기본 리스트는 커스텀에 제한이 있기 때문이다. 또한 자잘한 버그도 있는 것 같고..
또한 기본 EditButton을 사용했다가,
메모 추가 버튼이 EditMode에서 사라지도록 하기 위해(조작 방해를 막기 위해) 커스텀으로 구현하기도 했다.
다크모드, 라이트모드 등 컬러스킴 부분도 확인했고
UUID, 애니메이션을 통해서 리스트의 동작을 좀 더 명확하고 매끄럽게 했었다.
또한 @State, @Binding 그리고 코어데이터의 엔티티, 어트리뷰트를 이것 저것 시도해보며
도장이 찍히는 애니메이션을 구현했다.
완벽한 MVVM은 아닐지라도 최대한 뷰, 모델, 뷰모델을 분리하려 했고
한 파일 내에서도 extension, modifier 등을 사용해서 최대한 코드를 깔끔하게 만들려고 했다.
정말 깔끔하고 명확하게 분리하는 스킬을 어서 기르고 싶다.. 근데 이건 경험치의 영역일 것 같다 ㅋㅋ
몇 가지 크게 느꼈던 것은..
애니메이션을 아무곳이나 막 쓰지 말것.. 의도치 않은 동작이 발생하기도 한다.
비동기 처리를 생각 없이 막 쓰지 말것.. 순서도 유의해야 하고 비동기가 만능은 아니다..
초반에 기능을 구현하기 전에 어떤 방식으로 구현할 것인지 미리 고민하면 더 좋았겠다..
그래도 차근차근 원하는 기능을 구현하고 버그를 만나면 해결해 나가는 과정이 재미있었다.
확실히 내가 원하는 앱을 스스로 만들다 보니 크게 스트레스를 받는 부분은 없었다.
UT (유저 테스트)
약간의 자잘한 버그가 남기는 했지만, 사용성에 크게 문제가 없다 생각해서
주변 사람들에게 앱을 구경시켜줬다. 각 잡고 진행한 ut는 아니었지만, 짧은 시간 많은 정보를 얻어냈다.
1. 나도 모르는 버그가 있었다. 🐞
혼자 테스트 할 때는 전혀 보이지 않았던 버그가 발견되었다.
간헐적으로 리스트 아이템의 이동이 앱 종료 후 제대로 반영되지 않는 것이었다.
근데 됐다 안됐다 해서.. 어 왜 안되지..? 어 되잖아요! 를 몇 번 반복했던 것 같다 ㅋㅋㅋ
-> @published 배열과, 뷰컨텍스트 관리 방식을 제대로 고려하지 않아서 발생했던 문제였다.
역시.. 이래서 테스터가 따로 있구나 생각했다 ㅋㅋㅋ
2. 유저의 반응을 직접 확인할 수 있다.
기대 이상으로 좋은 반응을 보여주는 사람들이 많았다.
귀엽다, 디자인 잘했다, 꼭 출시해 달라 등.. 겉으로 크게 표현은 안했지만
정말 뿌듯하고 기분 좋은 순간이었다 :)
3. 새로운 기능 제안을 받았다.
할 일을 완료했을 때 귀여운 도장이 찍히는 것도 꽤 매력적이라 생각했지만
뭔가 아쉬운 부분이 있었는데 이 부분을 확 채워주는 아이디어가 있었다.
먼저 도장이 다양했으면 좋겠다는 의견. 도장은 원래 추가적으로 만들 생각이긴 했었다.
그리고 도장이 찍히고 나면 메모 옆에도 도장이 남았으면 좋겠다는 의견이었다.
오? 너무 괜찮은데? 이러면 정말 도장을 모으는 느낌이 날 수도 있고, 한 순간 사라지는 것이 아닌
기록으로 남으니 추가해 보기로 한다.
UT반영 디자인 & 개발
우선 기존에는 한 가지 도장만 나오고 완료된 메모 옆에 도장이 찍히지도 않았다.
따라서 아래와 같은 순서로 추가 기능 작업을 했었다.
1. 메모를 더블탭 했을 때 메모 옆에 도장이 남도록
2. 메모를 더블탭 했을 때 다양한 도장이 나오도록
3. 더블탭을 할 때 도장이 겹치지 않고 개별적으로 자연스럽게 잘 나오도록
4. 화면에 표시되는 도장과 메모 옆에 남는 도장이 일치하도록
1번 - @State, @Binding을 이것 저것 해보다가
최종적으로는 새로운 메모를 생성할 때 코어데이터에 도장 데이터를 같이 생성해주는 방식으로 작업
2번, 3번 - 1번에서 추가한 attribute를 통해서 구현
다만 기존에는 ZStack 위에 삼항연산자를 통해 opacity를 전환하는 방식이었는데,
도장이 다양해 지면서 이전 도장과 새로 나오는 도장이 전환되는 과정에서 겹치고 어색한 문제가 있었음.
-> transition 활용해서 해결
4. 1번을 통해서 표시되는 도장과 남는 도장의 싱크가 가능해 졌고, 여기서는 트랜지션 대신 opacity 조절로 작업.
그리고 여러 고민과 컨셉에 따라 탄생한 초기 도장들 :)
내가 그렸지만.. 뭔가 보기만 해도 은은하게 기분이 좋아지는 도장들이다 ㅋㅋㅋ
여러분은 어떤 도장이 가장 마음에 드시나요?
앱 심사
드디어 완성된 앱..
출시를 위해서 미루고 미루던 개발자 계정을 구매했다.
원래 나노챌린지 쇼케이스 마지막에 짜잔~ 앱스토에서 다운로드 받아보세요!를 하고 싶었는데
앱 배포를 해보지 않았기에 앱 배포에 이런저런 과정이 있고 시간이 얼마나 걸리는지 생각하지 못했다....
이래서 뭐든 해봐야해..
129,000원을 결제하고 제발..!!! 리젝 안나야 하는데!! 라고 걱정을 했다.
이것 저것 채워야 하는 정보가 굉장히 많았다.
6.7형, 5.5형 아이폰 사이즈에 맞는 스크린샷들을 준비하고
앱 제목, 설명, 개인정보 처리 방침, 가격 등을 설정했다.
개인정보를 수집하지 않는 앱이지만 그럼에도 불구하고 개인정보 처리 방침을 제출해야한다.
또 무료 앱이지만 여러 가격 설정, 국가별 환율 등 정말 세부적인 설정이 많더라 🧐
심사에 짧게는 하루, 길게는 이틀 이상 걸린다길래
쇼케이스에 제대로 앱을 보여주지 못할 수도 있겠다는 생각에 테스트플라이트로 먼저 진행하기로 했다.
오..근데 테스트플라이트도 심사를 받아야 했다 ㅋㅋㅋ
그래도 테스트플라이트는 금방 통과돼서 큐알코드로 외부테스트 링크를 준비 했다.
심사제출을 하고 계속 메일이 언제오나.. 들여다 보고
리젝 나면 어떻게 하지.. 리젝 나도 괜찮긴 한데 리젝 경험도 좋으니까..
근데 이번 발표에서 그냥 깔끔하게 딱 보여주고 싶은데.. 어떻게 되려나
이런 생각들을 했던 것 같다 ㅋㅋㅋ
앱스토어 심사가 그렇게 까다롭다던데.. 과연 첫 앱 출시에 바로 통과할 수 있을까? 하기도 하고
출시 성공 !
발표 자료를 작성하면서 계속 언제 심사 결과가 나오나 기다렸었다.
심사 현황이 바뀔 때마다 이런 저런 메일도 알림도 많이 와서 이날은 중간 중간 깨기도 했었다.
아무리 간단한 앱이지만.. 0에서 1까지 내 손으로 전부 만들었고 인생 처음으로 앱 스토어 배포에 도전하는 것이었기에
꽤 떨리고 기대도 되고 걱정도 되고 그랬다.
비몽사몽 계속 잠을 설치다가 아침에 메일이 하나 띠링 왔다.
야호!
하지만 바로 앱스토에서 검색해도 나오지 않는다.
보통 판매 준비중 단계에 들어가면 대부분은 24시간 이내, 길게는 48시간 까지도 기다려야 검색이 된다고 하더라.
그래도 내 앱이 앱스토어의 심사를 무사히 통과했다는 사실이 너무 기쁘고 안심되는 순간이었다.
이제 앱스토어에 내 이름 올라가는거야??
* 진행 상태는 아래와 같은 절차로 진행되었다.
제출 준비 중 -> 심사 준비됨 -> 심사 대기 중 -> 심사 중 -> 판매 준비됨
쇼케이스(나노 챌린지 발표)
아쉽게도 앱스토어 검색이 안 돼서 그냥 심사통과 사실만 알리고 테스트플라이트로 체험을 진행했다.
뒤늦게 안 사실이지만, 저렇게 판매 준비됨 상태에서는 앱스토어 링크를 직접 공유할 수 있었다.😅
그래도 당시에는 테스트플라이트가 확실했으니..
약 10분정도 기획, 디자인, 개발, 출시 과정을 발표했지만 자세하게 공유하지는 못해서 아쉬운 마음이 컸었다.
그래서 이렇게 길게 게시글로 남기고 있는 것이다 ㅎㅎ.. 기록하지 않으면 나 조차도 다 잊을테니까
나~중에 햇병아리 시절 간단한 앱 만들고 즐거워하던 내 모습을 다시 돌이켜보면 얼마나 재밌을까? 싶기도 해서 ㅋㅋㅋ
소감
쓰다보니 글이 굉장히 길어졌지만 그럼에도 불구하고 전 과정을 전부 담지는 못했다고 생각한다.
먼저 짧은 기간동안 나름대로 명확한 목표를 가지고 이를 달성했다는 점에서 굉장히 뿌듯한 시간이었다.
- 제약(본인 역량, 제한 시간, 챌린지 주제 등) 속에서 명확한 아웃풋이 기대되는 기획(귀여운 투두리스트)
- 내가 직접 사용하고, 주변 친구도 사용할 수 있는 앱 기획.
- 디자인 갭 채우기(UI/UX 고민, 프로토타이핑)
- 피그마, 프로크리에이트 사용법 익히기
- 직접 일러스트 및 애니메이션 제작
- SwiftUI 활용
- CoreData 적용
- 유저 테스트
- 앱 출시 전 과정 경험
- 앱 배포 성공
등등..
정말 짧은 시간이지만 너무 의미있는 챌린지였다.
물론 코드적으로는 개선이 필요한 부분이 분명 많을 것이다.
(코드 분리나, 불필요한 코드, 더 매끄러운 작동 방식, 데이터 흐름 개선 등)
그렇지만 우선 앱스토어 심사에 통과하고, 유저의 사용성을 해치지 않을 수준으로 기능 구현을 했다는 점에서 우선 만족한다.
그리고 직접 디자인 해서 만든 앱이라서 점이 정말 뿌듯하고 소중하게 느껴진다.
또한 개인앱이기 때문에 이런 것들을 할 수 있었다고 생각한다.
회사에서는 정해진 디자인, 정해진 기획, 클라이언트 등이 있기 때문에 이렇게 막? 만들 수는 없을 것이다 ㅋㅋㅋ
점점 애플아카데미 내 챌린지의 규모도 계속 커질 것이기 때문에 적절한 기간에 적당한 볼륨의 앱을 잘 만들어 출시한 것 같다.
앱 스토어에서 내 앱 검색하고 싶다! 라는 욕구를 충족했다는 점에서도 아주 좋다.
너무 재밌었고!
다시 공부에 집중하도록 하자.
다음 챌린지들도 화이팅 🔥