링마크 출시회고 2024.01.11 ~ 04.23
드디어 1월부터 디자인과 개발을 거쳐 완성된 앱이 출시했다!
그런 기념으로 이번에는 회고록을 작성해보고자 한다
(변명하자면 이거 개발한다고 블로그 글 업로드도 미뤘다. 그래서는 안됐는데..🥲)
개발 의도 및 구현 기능
링마크를 처음 구상한 것은 꽤 오래전이었다.
아마 iOS를 제대로 공부하기도 전이었던 것 같다.
막 iOS와 안드로이드가 무엇인지 알게 되었을 때, 친구들이랑 카카오톡으로 공유하는 링크나 당시의 트위터(현재 X), 네이버에서 해둔 즐겨찾기 링크들을 각 플랫폼에서만 확인할 수 있다는 점이 꽤 불편하게 다가왔다.
그래서 이 다음에 앱을 만들거면 이러한 불편함을 개선할 수 있는 앱을 만들자!하고 메모에 끄적여뒀던게 시작이었다.
그리고 작년 11월부터 본격적으로 iOS강의를 수강하고 1월초에 해당 과정을 완강한 후, 강의에서 배운 것들을 복습하는 겸 아직 뭣도 없는 포트폴리오라는걸 채워보고자 해당 아이디어를 꺼내들었다.
당시 아이디어는 이런 문제가 있어서 이렇게 해결해보자~하는 식으로 구상이유와 더불어 해결방법, 넣고싶은 기능들을 아래처럼 적어뒀다.
앱명은 링크 + 북마크의 형태로 '링마크'라고 지었다.
구상이유
트위터(X), 인스타그램, 카카오 등 여러 플랫폼에서 저장하고 싶은 URL을 각 플랫폼에 나에게 보내기, 북마크 등으로 표시를 해두었더니 찾으려고 하는 정보가 어떤 플랫폼에 어디에 있는지 정확히 찾을 수 없는 경우가 발생함
해결
iOS의 공유 기능을 통해 URL과 썸네일, 제목을 앱으로 보내도록 하여 내가 즐겨찾기 해두고자 하는 링크들을 한 앱에서 확인할 수 있도록 함
기능
1. 로그인 기능
2. 공유하기를 통해 [제목 / 썸네일 / 링크] 받아오기 (제목과 ~~썸네일은 수정~~ 가능)
3. 메모 기능
4. 폴더 태그 및 링크 직접 추가 기능
4-1. 태그는 10자까지
4-2. 태그 선택은 5개까지
5. 필터링 기능(최신순, 오래된 순)
6. 폴더 태그 별로 카테고리 분류
7. 검색 기능
8. 즐겨찾기 기능 (폴더에서 즐겨찾기 된 링크는 상단에 위치)
그리고 최종적으로 로그인, 썸네일 수정을 제외하고 폴더가 아닌 태그로 카테고리 분류 방식을 변경한 형태로 개발을 마무리했다.
사용 기술
- UIKit
- Realm
- MVVM
- Combine
- Snapkit
- Lottie
- Toast
- Link Presentation
나는 SwiftUI를 조금 사용해보기도 했지만 가장 많이 다뤄본 것은 UIKit이었기 때문에 UIKit을 베이스로 Realm, MVVM, Combine, Snapkit, Lottie, Toast, Link Presentation을 사용했다.
Lottie는 메타데이터를 불러올 때의 로딩화면을, Toast는 Share Extension에서 데이터를 불러오지 못했을 때 알려주는 용도로 사용했다.
앱 둘러보기
이제 구구절절 설명한 앱이 어떻게 구현되었는지 직접 확인해보자!
홈(모아보기)
우선 사용자가 처음 앱을 켰을 때, 마주하는 홈(모아보기) 화면이다.
아무 링크도 저장되어 있지 않을 때에는 상단의 버튼을 이용해 링크를 추가할 수 있음을 명시해주었다.
만약 생성된 태그가 하나라도 있다면 태그 섹션에 백그라운드를 주어 링크와 태그 목록을 구분지었다.
만약 저장된 링크가 하나라도 있을 때엔 선택 버튼을 통해 삭제 모드로 들어갈 수 있다.
그리고 링크 좌측의 버튼을 통해 즐겨찾기를, 우측의 버튼을 통해 해당 링크로 바로 이동할 수 있다.!
또한, 사용자는 상단의 필터링 버튼을 통해 링크를 <최신순 / 오래된 순>으로 정렬해 볼 수 있다.
태그된 링크 모아보기
사용자는 태그 목록에서 태그를 선택하여 해당 태그가 포함된 링크들의 리스트만 따로 모아볼 수 있다.
여기서도 마찬가지로 선택을 통해 삭제 모드에 진입할 수 있고 바로 이동, 즐겨찾기 기능이 포함되어있다.
링크 추가
링크를 추가하는데에는 두 가지 방법이 있다.
앱 내에서 직접 링크를 추가하는 방법, 공유하기를 통해 추가하는 방법이다.
링크 데이터 또는 썸네일을 불러오지 못할땐 각 상황에 맞는 알림창이 뜨도록 설정했다.
+)공유하기를 통해서는 ExtensionContext의 URL을 가져와 해당 URL의 데이터를 자동으로 불러오도록 처리했는데 간혹 URL을 불러오지 못할 때가 있어 앱에서 추가해달라는 알림을 추가했다.
검색
검색에서는 사용자가 입력한 키워드가 링크 정보의 URL / 제목 / 메모에 포함되어 있을 때 해당되는 링크들을 불러올 수 있도록 했다.
검색에서는 검색을 한다는 자체가 잘 보이지 않는 링크를 찾는 과정 중 하나일거라고 생각해 예외로 오래된 순으로 링크를 정렬했다.
즐겨찾기
즐겨찾기에서는 현재 즐겨찾기 상태중인 링크들만 가져와서 보여주도록 했다.
홈에서 기본 나열을 최신순으로 하고 있기 때문에 필터링이 없는 즐겨찾기뷰에서도 링크를 최신순으로 정렬했다.
설정
설정에는 총 세 가지 기능이 들어있다.
이미지 순서대로 태그 관리, 사용방법, 문의하기이다.
태그 관리에서는 태그를 등록하거나 태그명을 수정할 수 있고 태그를 삭제할 수 있다.
사용방법은 기본적인 앱 사용방법을 이미지와 함께 설명하고 있다.
그리고 버그나 건의하고 싶은 사항이 생겼을 때, 문의하기를 통해 사용자가 메일을 보낼 수 있도록 했다.
어려웠던 점
- MVVM
- Link Presentation
이 중에서 어려웠던 게 뭐냐고 물어보면 MVVM과 Link Presentation을 이용한 메타데이터를 가져오는 과정이었다.
MVVM은 Model - View - ViewModel의 형태로 ViewModel에서 Model의 데이터 처리를 해내고 Controller가 View에 관한 코드만을 가지고 있는 것을 이야기한다.
하지만 막상 코드를 짜다보니 분명 MVVM이라고 적용했는데, 그래도 Controller의 코드가 예상보다 길어지는 것을 보며 내가 제대로 적용한 게 맞는지 의문이 들었다. 하지만 이론적으로는 맞게 적용했다.
그리고 Link Presentation의 경우에는 해당 프레임워크를 이용해 링크를 가져오는 글을 많이 찾아볼 수 없었다. 그래도 공식 문서의 설명이 친절하고 관련 코드를 작성해둔 해외 글을 찾을 수 있어서 이를 이용해 사용자가 URL을 입력한 후, 데이터를 불러오는 버튼을 누르면 해당 URL에 포함된 썸네일과 제목을 가져오도록 했다. (이미지 참고)
아쉬웠던 점
- 목표 출시 기간 못 맞춘 점
- 태그 보여주는 방식을 컬렉션뷰로 구현하지 못한 점
사실 아쉬웠던 건 많지만 가장 아쉬운 건 내가 원래 정해둔 개발기간을 지키지 못했다는 점이다. 원래 계획은 1월에 개발을 시작해서 3월에 출시하는 것이었다. 다만 내 힘으로 앱을 0부터 쌓아올리는 것은 예상보다도 오래 걸리는 일이었다.
더불어 태그 기능을 구현하면서 태그를 선택한 상태에서 태그를 등록했을 때 '원래 선택되어있던 태그는 선택된 상태로 유지하기, 상세보기에서 현재 링크가 가지고 있던 태그는 편집뷰에서 체크되어있는 상태로 보여주기 등' 그 간단해보이는 행위 하나에 많은 경우의 수를 처리하다보니 몇 번의 크래쉬를 겪었다.
또한, 홈에서 태그를 컬렉션뷰를 이용해 보여주고 싶었는데 이 부분은 결국 내가 원하는 방향으로 구현을 실패해서 각 태그를 결국 String형태로 **_#태그1 #태그2_** 이런 식으로 이어준 방향으로 보여주게 되었다.
그렇게 태그 기능에 생각보다 많은 시간이 빼앗기고 정신차려보니 벌써 4월의 중반을 달리고 있었다. 목표가 3월이었는데 4월이면 무려 한 달이나 지체되었다는게 정말 많이 아쉽다.
그리고 4월 30일에 심사를 맡겨 5월 1일 드디어! 출시 메일이 도착했다!
잘한 점
중간에 포기하지 않은 의지!
개인적으로 잘한 점은 역시 중간에 그만두지 않고 끝까지 해낸 점이 아닐까 싶다.
사실 중간에 태그를 등록하고 창을 나오면 같은 태그가 하나 더 생기는 문제라든가, ShareExtension이 제대로 뜨지 않을 때라든가 태그가 내 마음대로 구현이 안될 때라든가.. 정말 많은 순간에 분을 삭히고 그랬던 것 같다. 특히, 중간에 마음이 붕 떴을 때는 아무것도 하고 싶지 않은 마음에 2주간 손을 놓기도 했다.
하지만 에러 하나하나를 해결할 때마다 느껴지는 기쁨이나 원하는 기능을 구현하는데 성공했을 때 얻은 뿌듯함에 꾸준히 해올 수 있었던 것 같다. 이런 맛에 개발하는거 아닐까..? 😆
배운 점
- 다양한 구현 방법(CollectionView를 섹션 별로 그리는 법, Link Presentation을 이용해서 메타데이터를 불러오는 방법, Extension Context로부터 URL을 받아오는 방법, Share Extension을 띄우는 방법 등)
- 검색을 잘하는 방법
- CS의 중요성
이번 기회를 통해 배운 것은 우선 검색을 잘하는 법이다.
개발자란 결국 구글과 함께하는 직업이기도하니까 이것도 나름의 노하우라면 노하우인 것 같다.
그리고 앱의 성능을 위해서는 결국 다양한 CS지식이 필요하다는 것을 깨닫게 되었다.
CS를 조금 손에서 놓아둔 상태였는데, 결국 비동기 작업을 위해서 다양한 글들을 접하게 되며 CS지식이 정말 필요한 부분이라는 것을 절실히 깨달았다.
또한 앱을 직접 제출해보면서 앱을 출시하는 전과정을 직접 경험해볼 수 있었기에 미래에 회사에서든 개인적으로든 앱을 또 출시하게 된다면 이번 경험이 정말 많은 도움이 될 것 같다.
이외에는 CollectionView를 섹션 별로 그리는 법, Link Presentation을 이용해서 메타데이터를 불러오는 방법, Extension Context로부터 URL을 받아오는 방법, Share Extension을 띄우는 방법 등 정말 많은 것들을 다양하게 구현하고 배울 수 있었다.
마무리
사실 개발 회고라는게 이렇게 하는건지 잘은 모르겠지만 우선 생각나는 것들을 쓰기 위해 이렇게 써봤다.
이후에 보완할 점이 있다면 또 열심히 수정하고 있지 않을까 싶다.
진짜 마지막으로!!!
혹시 이번 글을 읽고 조금이라도 흥미가 생겼다면 다운해보시지 않으실래오..?🥺