안녕하세요. 김지지입니다.
대학 생활의 마지막을 장식할 컴퓨터공학과 iOS개발 부문 졸업작품 소개와 그 과정을 돌아보고자 글을 작성하게 되었습니다. 10년 뒤에 다시 이 글을 본다면, 단순 무식하게 이 프로젝트에 매달린 과거의 나를 회상하며 추억에 잠길 수도 있겠죠. 이 글은 내년에 졸업작품을 개발해야 하는 후배분을 위해 기획부터 개발 과정, 그리고 뒷 이야기까지 최대한 자세하게 담아내려고 노력했습니다. 많은 도움이 되었으면 좋겠습니다.
#0. 프로젝트 개요
| 항목 | 내용 | 비고 |
| 이름 | 부크부크(BookBook) | |
| 주제 | 올바른 독서 습관 형성에 도움을 주고, 목표를 설정하여 이를 추적하여 달성하는 과정을 돕는 앱 | |
| 목적 | ▪︎ Swift, SwiftUI의 기본 문법 학습 ▪︎ Realm 데이터베이스 활용해보기 ▪︎ 상용 API와 실제로 통신 및 사용 ▪︎ 앱스토어에 출시해 실제 서비스 경험 확보 |
|
| 기한 | 2023. 3. 14 ~ 10. 31 | |
| 플랫폼 | iOS 17.0+ | |
| 기술 스택 | Swift, SwiftUI, Realm | |
| 개발 환경 | XCode 15 | |
| 참여 인원 | 김지지 (이상 1명) | |
| 제안 및 요구사항 (요약) |
▪︎ 읽고 있는 도서를 리스트로 한 눈에 볼 수 있도록 함 ▪︎ 목표 달성 현황을 텍스트와 그래프로 볼 수 있도록 함 ▪︎ 베스트셀러 등 도서 리스트를 볼 수 있도록 함 ▪︎ 국내 도서 검색 기능을 제공함 ▪︎ 찜한 도서를 리스트로 볼 수 있도록 함 ▪︎ 전체 도서의 분석 결과를 차트로 볼 수 있도록 함 |
- 자세한 내용은 #2. 기능 요구사항 및 화면 설계 참조 |
#1. 사전 조사 및 주제 선정
주제 선정
졸업작품 주제를 고민하던 중 문득 학사 생활 동안 전공 서적을 완독 한 적이 별로 없다는 점을 떠올렸습니다. 전공 서적은 많이 딱딱하고 재미없고, 당장 와닿지 않아서 이걸 배워서 어따 써먹는지 의문부터 들죠. '어떻게 하면 두꺼운 전공 서적을 완독할 수 있을까'라는 고민에서 출발해 독서 트래커를 주제로 선정하였습니다. 아이폰의 건강앱이 다양한 차트와 분석으로 '운동 목표 달성'을 돕는다면, 독서 트래커도 마찬가지로 '독서 목표 달성'을 돕는 거죠.
사전 조사
- 프로토타입
본격적으로 프로젝트를 시작할 무렵에 'SwiftUI는 프로덕트 단계의 앱을 개발하기 힘들다'는 말을 무척이나 많이 들었습니다. 깔짝깔짝 작은 기능 구현만 해본 저는 정말 많이 걱정했습니다. 게다가, API 통신과 DB 구축은 처음이라 제대로 할 수 있을지 걱정부터 앞섰구요. 최악의 경우, 프로젝트가 중간에 멈추지 않을까라고 생각해서 개별 단위의 기능을 테스트하기 위해 여러 프로토타입을 미리 만들어보았습니다. 아래 그림은 만들어본 프로토타입 화면입니다.
사실, 프로토타입을 성공적으로 만들었음에도 기쁨보다는 걱정이 앞섰던 것 같습니다. 왜냐하면 SwiftUI가 기본적으로 제공해주는 UI로는 유연하게 화면을 꾸미는 데 별로 도움이 되지 않으리라 봤습니다. 그래서 기본 UI에 의존하지 않고, 흰 도화지부터 시작해 UI를 꾸미기로 결정했습니다. 제 시간에 프로젝트를 끝내지 못하더라도 프레임워크의 밑바닥부터 경험해본다는 생각이었습니다. (다행히 프로젝트는 무사히 끝내고 있는 중이네요)
- 도서 API 선정
주제를 선정했다면 주어진 환경에서 앱스토어 출시가 가능한 수준의 앱을 개발할 수 있는지 확인해야 합니다. 제일 중요한 도서 API를 먼저 살펴보았습니다. 시중에 개발자가 사용 가능한 도서 API는 크게 네이버 검색 API와 알라딘 오픈 API가 있습니다. 모두 도서 검색과 상세 정보를 제공해주고 있습니다.
| 항목 | 장점 | 단점 | 비고 |
| 네이버 검색 API | - 문서가 보기 편하게 되어 있음(사용하기 편함) | - 제공 정보량이 부족함 | 무료(제휴 신청을 통해 일 허용량을 늘릴 수 있음) |
| 알라딘 오픈 API | - 제공 정보량이 엄청 방대함(도서 쪽수, 목차, 카테고리 등 제공) | - 문서가 엄청 불친절하고, 틀린 내용도 있음 | 무료(프리미엄 오픈API 신청을 통해 일 허용량을 늘릴 수 있음) |
제공 정보량이 방대한 알라딘 오픈 API를 채택하였습니다. 네이버 검색 API는 사용하기는 편하나, 카테고리 등 필요한 정보를 제공받을 수 없었습니다. 여담이지만, 알라딘 오픈 API는 문서가 불친절합니다. API 사용이 처음이시라면 조금 헤매실 수도 있습니다.
- 데이터베이스 선정
데이터베이스 선정은 그닥 오랜 시간이 걸리지 않았습니다. 작년 졸업 작품 전시회에서 사용이 쉬운 탓인지, 대부분의 졸업 선배들이 Firebase나 Realm을 활용하였습니다. 유튜브 선생님의 도움을 받아 간단하게 투두앱을 만들어 본 후, 사용하기로 결정하였습니다. 데이터를 복잡한 쿼리문 없이 마치 배열을 다루듯이 활용할 수 있다는 데에 크게 인상 깊었습니다.
⭐️ 지금은 이 결정을 후회하고 있습니다.
처음 Realm을 사용하기로 결정할 당시, iCloud 기기 간 동기화를 제공할 계획도 가지고 있었습니다. 깃허브에 업로드되어 있는 iceCream 라이브러리를 활용해 iCloud 동기화가 가능하리라 판단하였습니다. ChatGPT 선생님께도 물어보니 마치 가능한 것마냥 자신 있게 코드까지 작성해 주니 더욱 확신했죠. 그런데 실제 프로젝트에 적용하려니, iceCream 라이브러리가 과거 Realm 버전만 지원한다는 사실을 알게 되었습니다. 직접 구현하려고 해도 iCloud 동기화는 CoreData와 조금 더 친숙한 기능이란 걸 알게 되었습니다. Mongo DB에서 제공해 주는 Flexible Sync 서비스를 사용하려고 해도 서버 비용이 부담돼서 포기하였습니다.
결국 iCloud 동기화 서비스를 포기하고 앱 스토어에 출시하려고 합니다. 추후 CoreData(SwiftData)를 학습하고 난 후, 2.0 버전에 해당 서비스를 적용하려고 계획하고 있습니다.
#2. 기능 요구사항 및 화면 설계
요구사항(기능 명세서)와 화면 설계는 간단하게 표와 이미지로 보여드려도 충분하리라 생각됩니다.
기능 명세서
| 번호 | 구분 | 기능 명 | 설명 | 진척도 | 비고 |
| 1 | 인트로 | 로그인 | ▪︎ 애플 등 소셜 수단으로 로그인을 할 수 있도록 함 | X | 동기화 서비스 미제공에 따른 보류 |
| 2 | 앱소개 | ▪︎ 최초 앱 실행 시, 간단한 앱 소개 화면을 띄움 | 0% | ||
| 3 | 홈 화면 | 프로필 보기 | ▪︎ 문의, 버그 리포트 및 후원(인-앱 결제) 관리 기능을 제공함 | 0% | |
| 4 | 독서 활동 보기 | ▪︎ 최근 3건의 독서 활동 내역을 볼 수 있도록 함(홈 화면) ▪︎ 모든 독서 활동 내역을 월 별로 분류해 볼 수 있도록 함(활동 화면) |
100% | ||
| 5 | 읽고 있는 도서 보기 | ▪︎ 읽고 있는 도서를 리스트로 볼 수 있도록 함 | 100% | ||
| 6 | 읽고 있는 도서 상세 | ▪︎ 읽고 있는 도서의 상세 정보를 볼 수 있도록 함 ▪︎ 목표 달성 현황을 텍스트와 그래프로 볼 수 있도록 함 ▪︎ 독서 진척도 상황을 갱신할 수 있도록 함 ▪︎ 독서 진척도 현황을 그래프로 볼 수 있도록 함 ▪︎ 한줄 글귀를 수집할 수 있도록 함 ▪︎ 도서 정보를 수정할 수 있도록 함 ▪︎도서 정보를 삭제할 수 있도록 함 |
100% | ||
| 7 | 검색 화면 | 리스트 보기 | ▪︎ 베스트셀러, 신간 도서 및 신간 베스트 등 도서 목록을 볼 수 있도록 함 | 100% | |
| 8 | 도서 검색하기 | ▪︎ 국내 도서 검색 기능을 제공함 ▪︎ 검색한 도서의 카테고리 별로 서로 다른 색상을 부여함 |
100% | ||
| 9 | 도서 검색 상세 | ▪︎ 검색한 도서의 상세 정보를 볼 수 있도록 함 ▪︎ 도서를 찜할 수 있도록 함 ▪︎ 읽을 도서로 추가할 수 있도록 함 |
100% | ||
| 10 | 책장 화면 | 찜한 도서 보기 | ▪︎ 찜한 도서를 리스트로 볼 수 있도록 함 | 100% | |
| 11 | 읽은 도서 보기 | (위와 동일) | 100% | ||
| 12 | 찜한 도서 리스트 | ▪︎ 찜한 도서를 리스트로 볼 수 있도록 함 ▪︎ 찜한 도서 내 검색 기능을 제공함 ▪︎ 찜한 도서 내 정렬(제목순, 저자순, 인기순) 기능을 제공함 |
100% | ||
| 13 | 읽은 도서 리스트 | (위와 동일) | 100% | ||
| 14 | 찜한/읽은 도서 상세 | ▪︎ 찜한/읽은 도서의 상세 정보를 볼 수 있도록 함 | 100% | ||
| 15 | 분석 화면 | 분서 결과 보기 | ▪︎ 전체 도서의 분석 결과를 차트로 볼 수 있도록 함 | 100% | |
| 16 | 동기화 | 동기화 | ▪︎ 기기를 바꾸더라도 데이터 영속성을 보장하기 위해 동기화 서비스를 제공하도록 함 | X | 동기화 서비스 미제공에 따른 보류 |
(2023년 7월 1일 기준)
화면 설계서
프로젝트를 진행하면서, 생각보다 많은 시간을 소모한 파트입니다. 어떻게 하면 한정된 자원으로 세련된 UI를 디자인할 수 있을지 정말 많은 고민을 하였습니다. 처음 설계도 힘들었지만, 프로젝트 진행 도중 화면 설계를 밥 먹듯이 갚아 엎은 관계로 시간을 더 소모하게 된 듯합니다. 그런 연유로 초기 UI 설계와 완성된 프로젝트의 UI를 보면 대부분 맞지 않습니다. 레퍼런스는 구글 이미지 검색을 통해 얻을 수 있었습니다.
PPT로 조잡하게나마 만들어본 UI 설계도입니다. 간단하게나마 UI 설계도를 그려보시길 추천드립니다. 적어도 구현하고자 하는 기능이 실제 앱에서 어떻게 동작하게 만들 건지 청사진을 그리는 데 많은 도움이 됩니다. 추후 계획이 바뀐다 하더라도, 가지고 있는 소스는 많으면 많을수록 개발에 도움 되기에, 무조건 쓸모없다고 치부하기는 어렵다고 생각합니다.
⭐️ SwiftUI에서 기본적으로 제공해주는 기본 UI도 훌륭하지만, 하나부터 열까지 직접 구현하고자 했습니다.
앱 스토어에 출시된 대부분의 앱은 기본 UI를 활용하지 않습니다. 각 앱은 고유한 디자인 속성으로 저마다 다른 방식으로 사용자에게 어필하고 있습니다. 마찬가지로, 비록 졸업 작품이더라도 앱이 고유의 정체성을 가지게 하고 싶었습니다. 더불어, 프레임워크를 깊이 이해하는 데 도움이 되리라 생각했구요.
#3. 프로젝트 둘러보기
이제 프로젝트를 둘러볼 시간입니다. 앱은 크게 홈 화면, 검색 화면, 책장 화면 및 분석 화면으로 구성되어 있습니다. 이 포스팅에서 모든 화면을 소개하면 글이 너무 길어질 듯하니 자랑하고 싶은 일부 기능만 작성하도록 하겠습니다. 더 다양한 자료는 포스팅 하단에 따로 첨부하였습니다.
검색 화면
검색 화면은 국내 도서를 검색하고, 검색한 도서의 상세 정보를 볼 수 있는 곳입니다. 더불어, 베스트셀러, 신간 도서, 신간 베스트 혹은 블로거 추천과 같은 도서 목록도 순위 별로 볼 수 있습니다.
검색창에 '옥수수'를 검색한다면, 도서 제목이나 저자가 '옥수수'인 도서 목록을 뽑아서 출력해 줍니다. 이렇게 출력된 검색 결과는 도서 카테고리 별로 분류해 볼 수 있습니다. 그리고 각 검색 결과 항목은 서로 다른 <포인트 색상>을 가지고 있습니다. 이는 사용자가 보고 있는 도서가 어느 카테고리 범주에 속하는지 시각적으로 알려주고, UI를 다채롭게 꾸며주는 역할을 합니다. 이 <포인트 색상>은 검색 결과뿐만 아니라 다양한 화면에 적용되어 있습니다.
각 검색 결과 항목을 클릭하면 위와 같이 상세 화면이 나타납니다. 도서 표지・제목・저자는 물론, 쪽수와 이 책에 관한 설명을 보여주고 있습니다. 상단 오른쪽에 위치한 ⌜도서 찜하기⌟ 버튼을 클릭하면 도서 찜 목록에 해당 도서를 추가할 수 있습니다. 하단에 위치한 ⌜추가하기⌟ 버튼을 클릭하면 앞으로 읽을 도서로 추가할 수 있습니다.
홈 화면
홈 화면은 읽고 있는 도서를 모아두고, 독서 활동 기록을 볼 수 있는 곳입니다.
홈 화면은 크게 활동 탭 영역과 독서 탭 영역으로 구분되어 있습니다. 활동 탭 영역에서는 최근 어느 도서를 언제 얼마나 읽었는지 알 수 있습니다. 홈 화면에서는 최근 3개의 독서 활동 기록만 표시해줍니다. 모든 독서 활동 기록을 보려면 오른쪽에 위치한 ⌜더 보기⌟ 버튼을 클릭하면 됩니다.
독서 탭 영역은 읽고 있는 도서를 모아두는 곳입니다. 검색 화면과 마찬가지로 도서를 카테고리 별로 분류해 볼 수 있습니다. 각 도서 항목을 클릭하면 아래 그림과 같이 도서 상세 화면으로 넘어가게 됩니다. 이 화면에서 독서 진척도 갱신은 물론, 문장을 수집하는 등 다양한 활동을 할 수 있습니다.
이 화면은 개요 탭 영역, 분석 택 영역과 문장 수집 탭 영역으로 구분되어 있습니다. 각 탭 영역의 역할은 아래와 같습니다.
| 개요 탭 | ▪︎ 읽고 있는 도서의 간략한 정보를 표시 |
| 분석 탭 | ▪︎ 지난 2주 동안의 독서 활동 기록을 막대 차트로 보거나, 주 독서 시간대 혹은 연속 독서일을 확인 |
| 문장 수집 탭 | ▪︎ 수집된 문장을 표시 |
책장 화면
책장 화면은 찜한 도서나 읽은 도서를 모아두는 곳입니다. 수집된 문장도 한눈에 볼 수 있습니다. 책장 화면은 찜한 도서 탭 영역과 읽은 도서 탭 영역으로 구분되어 있습니다. 찜한 도서 탭 영역에서는 최근 10개의 찜한 도서만 보여줍니다. 모든 찜한 도서를 보려면 오른쪽에 위치한 ⌜더 보기⌟ 버튼을 클릭해야 합니다.
오른쪽에 위치한 ⌜더 보기⌟ 버튼을 클릭하면, 모든 찜한 도서 리스트를 볼 수 있습니다. 이 화면에서 도서 검색을 하거나 제목 순・저자 순으로 정렬을 할 수 있습니다. 읽은 도서 리스트도 같은 방식으로 동작합니다.
분석 화면
분석 화면은 지금까지의 모든 독서 기록을 시각화하여 차트로 보여주는 화면입니다.
⭐️ 가장 구현하기 난해한 화면 중 하나였습니다.
데이터 시각화를 위해 애플에서 기본적으로 제공하는 프레임워크인 Charts를 활용하였습니다. 하지만, 초창기 Charts 프레임워크는 기능이 많이 부족했습니다. 가장 중요한 차트 스크롤링(Scrolling)을 지원하지 않아 넓은 범위의 날짜 데이터를 어떻게 차트에 녹여내야 할지 고민거리 중 하나였습니다. 다행히도 WWDC23에서 Charts 프레임워크가 보완되면서 빠르게 원하는 기능을 구현할 수 있었습니다. (다른 의미로 많이 아쉽기도 합니다)
#4. 마무리
이 프로젝트는 앱스토어 출시를 목표로 두고 시작한 프로젝트입니다. 프로젝트 수행에 있어 간결하고 직관적인 UI 구현과 폭넓은 프레임워크 사용을 중점에 두었습니다. 제한된 개발 환경에서 사용자에게 가능한 직관적인 UI를 제공하고자 많은 노력을 기울였습니다. 그래서 토스, 야후 파이낸스, 건강 및 운동 등 다양한 앱을 참고하며 UI를 디자인하고 프로젝트에 적용하였습니다. 대표적으로 분석 화면은 건강 앱을 많이 참고하여 디자인하였습니다.
프로젝트가 아무런 비바람을 맞지 않고 순항만 했던 건 아닙니다. 가령, 코드를 지나치게 비효율적으로 작성해 성능 저하를 불러왔다던가, 기기 별로 UI가 제대로 대응되지 않는 등 여러 문제가 있었습니다. 그리고 제일 아쉬운 점 중 하나는 MVVM 패턴을 제대로 이해하지 못하고 프로젝트에 잘못 적용해 코드가 꼬여버렸다는 것입니다. 시간이 촉박해 충분한 고민을 거치지 않고 코드를 작성한 게 너무 아쉽습니다. 이미 알아차려버린 이상, 어떻게든 수정을 해야 하는데 손대기가 쉽지 않네요.
초기 앱을 기획할 때 조금 더 역동적으로 보일 수 있도록 충분한 애니메이션 효과를 적용할 계획을 가지고 있었습니다. 예를 들어, ①날짜를 선택할 때, 토스 뱅크의 돈 모으기처럼 슬라이더 효과를 적용한다던가 ②독서 페이지가 갱신될 때, 스크롤링 넘버 애니메이션 효과를 추가하는 등 여러 가지 효과가 후보에 올랐으나 능력 부족으로 결국 프로젝트에 적용되지 못했습니다.🤣 코드를 이해하고 직접 구현해보고 싶은데 너무 힘들더라고요. (지금 보니 라이브러리가 있었네요)
마지막으로, 프로젝트를 수행하며 느낀 한 가지는 SwiftUI는 죄가 없다는 점입니다. 유튜브나 Git에 게시되어 있는 SwiftUI 코드를 보면 생각보다 많은 일을 할 수 있습니다. 제가 능력이 부족할 뿐이죠...😢 정말 뿌듯하지만, 그 만큼 아쉬움이 많이 남는 프로젝트였습니다. 코드는 여기서 확인하실 수 있습니다. 앱스토어에 실제 출시가 이뤄진다면 다시 포스팅하겠습니다. 내년에 졸업작품을 제작하실 많은 후배분들에게 도움이 되었으면 좋겠습니다.
