첫 iOS 앱 출시기 TimeBear
2021년 11월 15일 부터 첫 iOS 앱 '타임베어' 출시를 위한 프로젝트를 시작했다.
15일부터 기획, 개발, 출시 단계를 차근차근 거쳤고, 12월 4일에 앱스토어에 정식 배포가 시작되었다.
비록 부족한 점이 많지만, 첫 어플리케이션을 어떻게 출시했는지 정리해보고자 한다
🐻SeSAC
iOS는 올해 9월부터 시작한 청년취업사관학교(Seoul Software ACademy) iOS 앱 개발자 데뷔과정에서 처음 접했다.
과정을 시작하면서 swift와 xcode를 집중적으로 배웠다.
SeSAC은 일련의 선발 과정을 통과한 서울시민이라면 무료로 수강할 수 있다.
iOS 말고 프론트엔드, 백엔드 등 다양한 분야의 강의도 진행하고 있으니 관심있는 분들은 아래 홈페이지에 들어가보시길:)
이러한 SeSAC의 학습 과정 중 하나로 이번 출시프로젝트를 진행하게 됐다.
🐻타임베어 기획
만들고자 하는 앱은 타임스탬프 이미지를 만들 수 있는 앱으로 정했다.'
타임스탬프 이미지는 현재 날짜, 시간이 찍히는 이미지이다.
주로 인스타그램에 #기상인증 #공부인증과 같은 인증샷을 만들기 위해 사용된다.
꾸준히 필요로 하는 사람들이 많은 앱이기도 하고해서 이걸로 주제를 정했다!
앱의 전반적인 기능에 대한 기획을 진행했다.
타임스탬프 이미지를 생성하고, 생성한 이미지를 기반으로 일기 및 메모를 남길 수 있도록 했다.
그리고 폴더 기능으로 이미지를 분류해서 모아볼 수 있게 하려고 한다.
그리고 앱을 통해 만들 수 있는 타임스탬프 디자인은 위와 같이 하려고 했다.
또한, 앱에 다국어 기능을 적용해서 한국어, 영어 두가지 버전으로 사용할 수 있게 기획했다.
🐻타임베어 개발
스토리보드
xcode 13과 스토리보드를 이용해서 개발했다.
스토리보드로 레이아웃을 잡고, 코드로 기능을 구현하는 방식으로 진행했다.
타임베어 메인화면의 스토리보드이다.
탭바와 네비게이션 컨트롤러를 달아서 3개의 메인 화면을 왔다갔다 할 수 있도록 했다.
타임베어 개발에는 총 11개의 스토리보트 파일을 사용했다.
오픈소스
IQKeyboardManager / Realm / Toast 이렇게 3가지의 오픈소스를 사용했다.
IQKeyboardManager는 전반적인 키보드 기능을 좀 더 편리하게 해준다.
탭하여 키보드 내리기, 키보드 위치 만큼 화면 올려주기 등의 기능을 위해 사용했다.
Realm은 사용자 데이터를 저장하기 위해 사용했다.
타임베어에서는 총 2개의 데이터베이스 스키마를 사용하며, 각각 폴더 / 생성된 이미지와 일기 저장을 담당한다.
Toast는 화면 하단에 작은 알람을 띄워주는 기능을 제공한다.
Toast를 통해 앱에서 기능의 동작 결과를 알려준다. ex. 이미지 저장 성공, 폴더 생성 에러
1주차
이미지를 불러와서 zoom in/out 하는 기능을 만드는데 가장 큰 어려움을 겪었다.
scrollView를 안에 이미지뷰를 넣는 방식으로 사용했는데, 주로 전체 화면길 길게 사용하는 방법에 대해서만 많이 나와있어서 관련 정보를 찾는데 좀 힘들었다. ( 이 부분은 나중에 글로 정리해보려고 한다.)
출시프로젝트 1주차에 촬영한 영상이다.
아직 scroll view에 zoom in/out scale 값의 최소,최대가 설정되지 않아서 너무 과하게 줌인되거나 줌아웃되는 문제가 있다.
폰트나 색상은 따로 지정해주지 않아서 애플의 기본 셋팅을 따랐다.
2주차
2주차엔 realm을 사용하기 위해 기본적인 스키마를 생성했고, scroll view 문제를 해결했다!
이제 의도한대로 이미지를 zoom in/out 할 수 있게 되었다.
그리고 두번째 탭바 화면인 일기장 부분을 어느정도 구현했다.
또한, 가장 핵심적인 기능인 collection view를 클릭했을때 이미지 위에 타임스탬프 정보를 보여주는 기능을 만들었다.
처음엔 design subview를 collection view를 클릭할때마다 추가되도록 했더니..여러번 눌렀을때 뷰가 점점 쌓이면서 메모리 점유율도 늘어났다.
이걸 해결하기 위해서 view의 subview 갯수가 1개 이상이면 삭제하고, 새로운 subview를 띄워주는 방법을 사용했다.
그리고, 본격적으로 타임스탬프 디자인을 적용하기 전에 타임스탬프에 필요한 DateFormat에 대해서 미리 extension으로 만들어두었다.
3주차
3주차엔 앱의 전체적인 기능을 모두 완성하고, 심사에 필요한 준비들을 했다.
타임스탬프 디자인 15종을 추가했고,
다이어리 기능을 완성하기 위해 다이어리 상세 페이지를 만들고 거기서 내용을 수정하거나 삭제할 수 있도록 했다.
사용자가 생성한 이미지를 폴더별로 나눠서 모아보거나 전체를 한눈에 볼 수 있게 하고, 여기서 클릭하면 해당 이미지와 함께 작성한 일기 내용을 볼 수 있다.
그리고 다국어 지원을 버튼 타이틀 이외에도 권한 허용, 앱 이름 등의 부분에도 적용될 수 있게 했다.
infoPlist.strings 파일을 만들어서 적용했다.
생성한 폴더 삭제 기능, toast 알림 기능 등등 필요한 기능들을 만들었다.
이 과정에서 realm 스키마 구조를 한번 갈아엎기도 했다...😂
또한, 타임베어라는 캐릭터를 만들어서 앱 여기저기에 캐릭터를 넣어줬다.
ppt 도형 기능으로 만들고 위에 효과를 넣어서 만들었다...ㅎ
수염 대신에 시침과 분침을 넣어서 '타임'베어 임을 강조하고 싶었다.
이렇게 타임베어 앱이 완성되었다!
이제 Apple의 심사만 잘 받으면 앱 스토어에 출시할 수 있다.
🐻Apple Store Connect - 출시 과정
애플 개발자 계정
애플 앱스토어에 앱 출시를 하기 위해서는 애플의 개발자 계정이 필요하
개발자 계정 등록을 해야하는데, 무료는 아니고...1년에 129,000원이다.
홈페이지에서 결제를 하고 하루~이틀 정도 기다리면 다음과 같은 메일이 오고, 개발자 계정이 활성화된다.
이제 Apple store connect를 사용할 수 있고, 앱도 출시할 수 있다!
TestFlight
xcode에서 빌드한 앱을 TestFlight에 등록해서 미리 테스트를 해볼 수 있다.
TestFlight는 이름 그대로 실제로 날아보기 전에 미리 연습해보는 것이다.
TestFlight로 앱을 사용해보면서 실 사용시에 발생하는 문제들, 개선해야하는 부분들을 체크해볼 수 있다.
제출하려고 하는데 자꾸 고쳐야 하는게 생각나서 심사 넣는 날에는 빌드를 4번 했다..
TestFlight에는 SeSAC 팀원분들이 함께해주셨다!😍
피드백을 받고 개선하는 과정을 거쳤다.
심사 제출
앱스토어 심사에 제출하기 위해선 여기 뜨는 빈칸들을 모두 채워야 한다.
기본적인 앱 설명, 스크린샷, 앱 이름, 부제목 등등 채워야하는게 정말 많다.
그중에서 특히 좀 어려웠던 부분은 개인정보처리방침이었다.
앱 내부에도 개인정보처리방침을 표기해야하고, 심사 제출할때도 따로 주소를 넣어야한다.
'개인정보보호포털'에서 개인정보처리방침을 만들 수 있다.
그런데 이 과정이 생각보다 복잡하고 어려운 용어도 많이 나온다.
그리고 타임베어는 딱히 수집하는 개인정보도 없어서 더 어려웠다..
좀 더 편하게 할 방법을 찾아보다가 대신 이 사이트를 찾았다.
앱 이름이랑 종류, firebase와 같은 사용하는 서비스에 대해서 몇개 체크만 해주면 영문 개인정보처리방침이 생긴다!
html로도 제공을 해주기 때문에 이걸 그대로 앱의 개인정보처리방침 메뉴에서 webKit로 볼 수 있게 했다.
그리고 심사 제출할때는 노션에 넣어서 링크를 올렸다.
이때 올린 링크는 앱스토어에 출시됐을때 '개발자의 개인정보 처리방침' 이곳과 연결된다.
빈칸들을 다 채우면 이제 정말 심사 제출만 하면 끝이다!
심사 제출을 눌렀더니 한번 더 확인하는 과정을 거친다.
이제 정말 제출되었다!
애플에서 심사 후 reject만 주지 않는다면 바로 앱스토어에 올라가게 될 것이다.
Appstore Connect 앱이 따로 있는데, 이걸 설치해두면 앱 출시 관련 알림이 온다.
목요일 저녁에 심사 제출을 했고, 토요일 아침에 심사받고 통과되었다!
자다가 잠깐 깨서 알림을 봤다가 심사통과된걸 알고 늦잠을 잤다😆
물론 아직 부족한 점도 많고 보완해서 업데이트 해야하는 부분도 있지만, 큰 산을 하나 넘은 느낌이다.
🐻향후 업데이트 방향
앱은 출시되었지만 끝난게 아니다..!
일단 한번 이미지의 폴더를 지정하면 변경할 수 없는 문제가 있다..이건 마지막에 시간이 좀 부족해서 뒤로 넘긴 기능인데 꼭 필요한 기능이여서 가장 먼저 추가하려고 한다.
아마 다음주 중에 한번 더 업데이트를 할 것 같다.
그리고 타임스탬프 이미지를 생성할때 색상 9가지 말고도, 커스텀 컬러를 만들 수 있는 colorpicker 기능을 달아야 한다.
이건 출시 초반부터 기획했던 기능인데 이리저리 치이다보니 결국 추후 업데이트로 밀려났다.
마지막으로는 디자인 추가이다.
각 타임스탬프 별로 폰트와 폰트 크기를 조절할 수 있는 기능은 넣을지 말지 고민중이다.
타임베어는 앱스토어에 '타임베어'를 검색하면 만나보실 수 있습니다!
사용해보시고 피드백 부탁드려요:)
