leeari95 / acnh-wiki Goto Github PK

View Code? Open in Web Editor NEW

43.0 1.0 1.0 9.32 MB

🌱 모여봐요 동물의 숲 게임을 위한 Wiki 앱

Swift 100.00%

ios swift uikit mvvm-c reactorkit rxcocoa rxswift alamofire kingfisher acnh

acnh-wiki's Introduction

너굴포털+

📱 앱 설치하러 가기!!!

카탈로그 수집 기록의 즐거움 🌱

👩🏻‍💻 개발자 소개

아리(Ari)

⭐️ 프로젝트 소개

모여봐요 동물의 숲을 플레이하면서 수많은 아이템들을 내가 수집했는지의 여부를 기록해둘 수 있어요. (가구, 생물, 레시피 등...)

아이템의 상세정보 및 수집하는 방법에 대해서 간단하게 확인해볼 수 있어요.

또한 동물의 숲의 인기 아티스트 K.K.의 음반도 맛보기로 감상할 수 있는 모동숲 가이드앱입니다. 🌳

🛠 프로젝트 주요 기능

아키텍처

MVVM을 도입하여 뷰 컨트롤러와 뷰는 화면을 그리는 역할에만 집중하고, 데이터 관리, 로직 실행은 뷰 모델에서 진행되도록 했습니다.

뷰모델을 Input과 Output으로 정의하여 뷰의 이벤트들을 Input에 바인딩하고, 뷰에 보여질 데이터를 Output에 바인딩 했습니다.
일관성 있고 직관적인 구조를 유지해 뷰모델의 코드 가독성이 높아졌습니다.

화면 전환에 대한 로직을 ViewController로부터 분리하고 의존성 객체에 대한 주입을 외부에서 처리하도록 하기 위해 코디네이터를 적용했습니다.

기술적 도전

연속된 escaping closure를 피하고, 선언형 프로그래밍을 통한 높은 가독성과 RX 오퍼레이터들을 통한 효율적인 비동기 처리를 위해서 RxSwift를 사용하게 되었습니다.
데이터가 발생하는 시점에서부터 뷰에 그려지기 까지 하나의 큰 Stream으로 데이터를 바인딩 하였습니다.

Github Actions를 활용하여 develop 브랜치로 push를 하게 되면 빌드 및 테스트를 실행하도록 자동화를 처리했습니다.

Credits/Thanks

🙏🏻 Thanks to Animal Crossing: New Horizons spreadsheet

이 앱은 위 스프레드 시트를 활용하여 만든 Norviah의 레파지토리를 활용하여 동물의 숲 아이템을 가져옵니다.

🙏🏻 Thanks to ACNH API

동물의 숲의 음악, BGM 등을 이 API를 통해 불러옵니다

아리의 개발기에 대해 더 자세한 내용이 보고싶다면, 너굴포털 Wiki를 방문해주세요.

acnh-wiki's People

Contributors

Stargazers

Watchers

Forkers

linuxul

acnh-wiki's Issues

[음악] 카테고리 음악 추가 및 뮤직 플레이어 구현

🗣 설명

카테고리에 음악을 추가하고, 해당 음악을 재생할 수 있도록 뮤직 플레이어를 구현합니다.

📋 체크리스트

[공통] 튜토리얼 가이드 구현

🗣 설명

앱을 처음 접하는 사용자에게 보여줄 튜토리얼 화면을 구성합니다.

📋 체크리스트

튜토리얼 화면을 보여주는 ViewController 구현
사용자가 튜토리얼을 확인했다면, 더이상 보여주지 않도록 구현

[홈 화면] 앱 정보를 우측 환경설정 내부로 이동

🗣 설명

잘 보지 않는 앱 정보를 기존 대시보드 좌측에 구현해두었었는데, 자주 보지 않는 정보이므로 보이지 않는 곳으로 숨겨둡니다.

📋 체크리스트

환경설정 화면에 앱정보 화면으로 넘어가는 루트를 고민하여 구현하기
좌측 앱 정보 버튼을 제거하기

[무값 계산기] 매일 무값의 가격을 기록하여 가격 변동을 추측하는 계산기 기능 추가

🗣 설명

무값을 측정하는 계산기를 구현합니다.

📋 체크리스트

무값 계산기 탭 추가
무의 가격을 오전 오후별로 기록하는 화면 구현
무의 가격을 기록한 후 API를 활용하여 예상 가격을 보여주는 화면 구현
- 예상 가격을 어떤 방식으로 보여줄지 고민해보기
푸시 알림을 활용하여 매일 측정한 무 가격을 사용자에게 알려주는 기능 추가

[대시보드] 섬 기본 설정 수정

🗣 설명

섬 설정에 섬의 평가도 기록할 수 있도록 추가합니다.

📋 체크리스트

섬 평가를 기록할 수 있도록 추가
대시보드에서 섬 평판을 볼 수 있도록 구현

[대시보드] 현재 시간대에 잡을 수 있는 생물을 보여주는 섹션 구현

🗣 설명

�현재 시간대에 잡을 수 있는 물고기, 해산물, 곤충의 목록을 보여주는 섹션을 구현합니다.

📋 체크리스트

현재 시간대에 잡을 수 있는 물고기, 곤충, 해산물의 숫자를 나타내는 섹션뷰 구현
섹션뷰에 있는 각 생물의 아이콘을 터치하게 되면 현재 시간대에 잡을 수 있는 생물을 리스트로 보여주는 뷰 컨트롤러를 구현

[피드백/대시보드] 섬 정보 섹션을 터치했을 때, 바로가기 기능 구현

🗣 설명

섬 정보 섹션을 터치하면 바로 앱 기본 설정 화면을 모달로 띄워주도록 구현합니다.

📋 체크리스트

섬 정보 섹션 뷰에 Tap Gesture 등록
터치이벤트 바인딩 처리하여 앱 기본 설정화면 띄워주도록 구현

[디자인] 앱 디자인 변경 및 다크모드 대응

🗣 설명

전체적인 앱 디자인을 편집하고 다크모드에 대응할 수 있도록 설정합니다.

📋 체크리스트

다크모드 시 어두운 테마로 바뀌도록 수정
앱 디자인 수정

[음악] 탭바를 터치했을 때의 뮤직 플레이어 모드 변화

🗣 설명

탭바를 터치했을 때 뮤직 플레이어의 상태를 재조정 합니다.

📋 체크리스트

뮤직 플레이어의 모드가 list, large 경우일 때,
- 탭바를 터치하면 자동으로 small 모드로 변경되도록 하기

[마을주민 상세화면] View 구성 및 바인딩

🗣 설명

주민을 터치했을 때 상세하게 정보를 표현해줄 뷰를 구성합니다.

📋 체크리스트

VillagerDetail을 표현할 Section을 구성 및 ViewController 구성
ViewModel, Coordinator를 생성
뷰 바인딩 처리
대시보드 화면에서 주민을 길게 터치했을 때 디테일 화면을 모달로 띄울 수 있도록 기능 구현

[피드백/아이템] 요리, 꽃을 따로 카테고리로 분리

🗣 설명

요리와 꽃을 따로 분리하여 볼 수 있도록 구성합니다.

📋 체크리스트

잡화에서 요리를 필터 가능하도록 구현
레시피에서 요리 레시피만 필터 가능하도록 구현
기타 아이템에서 꽃을 필터 가능하도록 구현

[공통] CoreData 스토리지 구현

🗣 설명

이전에 만든 Entity를 활용하여 CoreDataStorage를 구현합니다.

📋 체크리스트

CoreDataStorage 타입 생성
CRUD 기능 구현

[공통] Github Action을 활용하여 xcode Build & test 자동화 설정

🗣 설명

github action에 새로운 workflow를 설정하여 Xcode 빌드 및 테스트를 자동화하도록 설정합니다.

📋 체크리스트

github Actions에 새로운 workflow 추가
무조건 통과하는 테스트 케이스 세팅 후 bulid & test를 실행하는지 확인하기

[피드백/카탈로그/마을주민] EmptyView 구현

🗣 설명

카탈로그의 미획득, 획득 탭, 마을주민의 선호주민, 섬주민 탭이 비어있다면, 비어있다는 것을 알려주는 EmptyView를 구현합니다.

📋 체크리스트

EmptyView를 구현
필터 시 아이템이 비어있다면 EmptyView를 보여주도록 개선

[테스트] 단위 테스트

🗣 설명

모델, 뷰모델에 대한 단위 테스트를 작성합니다.

📋 체크리스트

각 유틸리티(MusicPlayerManager, Items... )에 대한 테스트 작성
각 뷰모델에 대한 테스트 작성

[홈 화면] Dashboard 화면 구성

🗣 설명

앱의 메인 화면을 구성합니다.

📋 체크리스트

[피드백/아이템] 너굴카탈 아이템/비매품 구분짓는 필터기능 추가

🗣 설명

카탈아이템과 비매품을 구분지어 목록을 볼 수 있도록 필터기능을 추가합니다.

📋 체크리스트

[Refactor] 주민 사진에 누락된 아이템 개선

🗣 설명

📋 체크리스트

완료하지 못한 체크리스트
완료한 체크리스트

[햅틱] 피드백 설정

🗣 설명

햅틱을 실행하여 피드백 줄 부분을 골라 적절한 햅틱을 실행할 수 있도록 합니다.

📋 체크리스트

수집 아이템 체크, 마을 주민 표시, 선호 주민 표시에 햅틱을 줄 수 있도록 구현
대시보드 내에서 길게 터치하여 마을 주민의 상세정보 창을 모달로 표시했을 때 햅틱으로 피드백 줄 수 있도록 구현
오늘의 할일을 터치해서 완료 유무, 마을 주민을 터치하여 체크(선물, 대화)유무를 변경해줄 때 햅틱으로 피드백 줄 수 있도록 구현
햅틱을 설정창에서 끄고 켤 수 있도록 옵션 추가

[공통] 네트워크 타입 구현

🗣 설명

API와 소통하는 네트워킹 타입을 구현

📋 체크리스트

[아키텍처] ReactorKit 프레임워크를 활용하여 구조 개선

🗣 설명

ReactorKit 프레임워크를 활용하여 전체적인 구조를 개선합니다.

📋 체크리스트

ReactorKit 프레임워크 설치하기
뷰모델의 전체적인 구조와 바인딩 처리 부분 리팩토링
- 대시보드
- 카탈로그
- 마을주민
- 수집품
메모리 누수가 없는지 확인하고 약한 참조로 개선하기

[대시보드] AboutViewController 리팩토링

🗣 설명

미완성된 AboutViewController 구조를 완성 시킵니다.

📋 체크리스트

뷰모델을 구현하여 분리하기
임시로 생성해두었던 데이터 구조화

[공통] README 작성하기

🗣 설명

앱 소개 및 개발 과정을 소개하는 README를 작성합니다.

📋 체크리스트

[지역화] 언어 설정 및 한국어 번역

🗣 설명

언어 설정 및 앱의 문자열을 정리하여 번역합니다.

📋 체크리스트

지역화 처리
앱 언어 설정
앱 이름 설정

[대시보드] 뮤직 플레이어 섹션 추가

🗣 설명

앞서 구현한 뮤직플레이어를 활용하여 대시보드에 뮤직 플레이어 섹션을 추가로 구현합니다.

📋 체크리스트

뮤직 플레이어 섹션 구현
뷰 바인딩
24시간 BGM 음악을 들을 수 있도록 기능 추가

[공통] 뷰에서 사용할 모델타입들 정의

🗣 설명

DTO를 그대로 사용하는 것이 아니라, 필요한 속성만 골라와서 래핑할 타입들을 정의합니다.
해당 타입들을 가지고 사용자 컬렉션 타입을 정의합니다. 해당 타입은 코어데이터로 영구저장소에 보관할 수 있도록 구현합니다.
- 사용자가 앱을 껐다가 다시 실행하여도 사용자 컬렉션을 통해 홈화면을 자동 설정합니다.

📋 체크리스트

각 아이템들 모델 생성
DTO에서 모델로 변환하는 기능 추가
사용자 컬렉션 타입 생성

[공통] 음악 아이템 버전 업데이트

🗣 설명

현재 API에서 가져오는 음악 아이템이 업데이트 되지 않은 버전으로, 최신 버전의 음악 아이템을 보여주도록 합니다.

📋 체크리스트

음악 아이템 버전 업그레이드

[공통] 캐싱 처리 구현

🗣 설명

네트워크를 통해 받은 이미지와 JSON을 캐싱 처리한다.

📋 체크리스트

이미지 캐싱
JSON 캐싱

[피드백] 그림과 이름이 간헐적으로 맞지 않게 나오는 현상

🗣 설명

네이버 카페 WTAC에서 받은 피드백
이전에 다운로드 되었던 이미지가 취소되지 않고 다운로드 되어 이미지가 이름과 다르게 매핑되는 현상.

📋 체크리스트

셀을 재사용할 때 진행중인 이미지 다운로드를 취소하도록 개선

[피드백] 카탈로그에 전체검색 기능 추가

🗣 설명

📋 체크리스트

완료하지 못한 체크리스트
완료한 체크리스트

[마을주민 목록 화면] View 구성

🗣 설명

마을 주민 목록을 나타낼 CollectionView를 생성하고 전체적인 View를 구성합니다.

📋 체크리스트

CollectionView를 활용하여 마을 주민 목록 화면을 구현
하트, 집 버튼을 구현
검색 필터를 만들어서 성격, 타입, 성별, 종족별로도 리스트를 확인할 수 있도록 기능 구현
SearchBar에 ScopeBar를 만들어서 Like, House 주민들을 구분짓도록 구현
ViewModel 생성 후 뷰 바인딩 처리

[메모리 누수] 누수 관련 개선 작업

🗣 설명

ViewController를 생성하여 화면을 띄우는 과정 속에서 누수가 일어나는 곳이 없는지 확인합니다.

📋 체크리스트

메모리 누수 발생 구간 체크하기
메모리 누수가 발생하는 구간을 개선하기

고민한 점 / 해결 방법

첫번째 시도
- 뷰가 사라질 때 ViewController가 가지고 있는 ViewModel을 nil처리를 해주어보았다.
- 하지만 효과는 없었다. 이 문제가 아닌 것 같았다.
두번째 시도
- 방법을 모색하던 와중에, 해당 내용에 대한 stackoverflow 질문 글을 찾게 되었다.
- 뷰 컨트롤러를 닫거나, 팝할 때 강력한 참조를 만들지 않은 경우에만 할당이 해제된다는 답변이 있었다.

따라서 이 답변을 참고하여, 문제가 발생하는 뷰 컨트롤러에 강한 참조를 하고 있는 부분이 있나 체크를 해보았다.

해결 방법
- 뷰 바인딩 처리해주는 부분에서, 혹은 ViewController 내부에서 self를 사용하는 구간을 모두 약한 참조를 하도록 바꾸어주었다.
- 그리고 viewModel을 뷰 컨트롤러가 소유했던 방향을 bind(to:) 라는 메소드로 변경하여 파라미터로 뷰모델을 전달받아 바인딩 처리를 하도록 구조를 수정해주었다.

참고링크
- https://stackoverflow.com/questions/21398934/why-arc-is-not-deallocating-memory-after-popviewcontroller

[UX] 앱의 전체적인 UX 개선

🗣 설명

앱의 전체적인 UX를 개선합니다.

📋 체크리스트

기본 설정, 할일 편집을 아래로 스와이프 했을 때에도 닫힐 수 있도록 개선
반구나 과일 선택 시 나타나는 체크표시에 공백 추가하기
정렬이랑 필터 기능이 합쳐진 메뉴를 분리해보기
할일을 저장할 때 사용하는 체크 아이콘을 다른 저장 아이콘으로 변경해보기
아이템 리스트에서 획득하지 못한 아이템도 볼 수 있도록 추가하기
아이템 상세정보 분리하기
아이템 셀의 UI를 수정
- 가격뷰, 출현기간 뷰 아래쪽 여백 추가

[사용자 컬렉션 화면] 목록보기 구현

🗣 설명

사용자가 수집한 아이템들을 볼 수 있는 컬렉션 뷰를 구성합니다.

📋 체크리스트

사용자가 수집한 아이템들의 리스트를 보여주는 목록화면 구현
목록화면을 클릭했을 때, 해당 카테고리의 아이템 목록을 보여주는 화면으로 넘어가도록 구현
아이템을 클릭했을 때 앞서 구현했던 아이템 상세보기를 보여주도록 구현
대시보드에 존재하는 수집상황을 터치했을 때 CollectionProgressVC를 띄우도록 구현

[카탈로그] ScopeBar를 활용하여 아이템 분리 및 성능 개선

🗣 설명

ScopeBar를 활용하여 수집한 아이템, 수집하지 않은 아이템을 나누도록 합니다.

📋 체크리스트

SearchController에 ScopeBar를 추가
수집한 아이템, 수집하지 못한 아이템을 나눠서 보여줄 수 있도록 하기
수집한 아이템의 비례가 높아질수록 앱의 터치 반응 속도가 느려지는 부분을 개선하기
수집함에서 아이템을 체크 해제하여 아이템을 모두 없애는 경우, 자동으로 popVC가 실행되도록 구현

고민한 점 / 해결 방법

먼저 Date 타입을 활용하여 성능 저하가 의심되는 구간의 실행 시간을 측정해보았다.

그랬더니 위와 같이 획득 아이템의 숫자가 많아질 수록 실행 시간이 늘어나는 것을 확인할 수 있었다.
당시 필터링 하던 코드는 다음과 같았는데...

살펴보니 이중 반복문과 다름이 없는 필터링 코드였다. (시간 복잡도가 O(n)인 듯...) 그래서 이 부분을 개선하기 위해서 구글링을 시도해보았다.
- https://stackoverflow.com/questions/41501930/array-contains-too-slow-swift
쉬운 방법으로 Set를 활용해보라는 답변을 참고하여 수정을 진행했다. 최상의 성능을 위해 BitSet을 사용하는 방법도 있지만, 나는 필터링만 하고 다시 배열로 변환할거기 때문에 이 방법은 패스했다.

위와 같이 대칭차 집합연산을 활용해서 전체 아이템에서 수집아이템이랑 겹치지 않는 아이템을 필터링 하였고 이를 통해 성능을 개선할 수 있었다.

시간 복잡도를 항상 알고리즘 문제 풀이에서만 신경써오다가... 실제 개발을 할때 문제를 맞닥뜨리니, 새삼 시간복잡도가 개발에 있어서 중요한 요소임을 다시 한번 깨닫게 되었다.

[아이템] 옷, 장신구에 대한 아이템을 추가

🗣 설명

게임 아이템 중 장비 아이템에 해당하는 아이템들을 카탈로그에 추가합니다.

📋 체크리스트

옷, 모자, 신발 등... 해당 아이템에 대한 DTO, Request 구현
해당 아이템에 대한 편의 이니셜라이저 추가
- 그에 따른 ItemEntity 타입 리팩토링

[공통] 네트워크 연결 상태에 따라 요청을 재시도 하는 기능 추가

🗣 설명

네트워크 연결이 되어있지 않아서, 아이템을 가져오는 과정이 실패했을 경우, 네트워크를 재시도하여 연결이 정상적으로 된다면 다시 네트워크 요청을 할 수 있도록 구현합니다.

📋 체크리스트

네트워크 연결 상태를 감시하는 모니터 객체 구현
네트워크 연결 상태를 알림받아 아이템 요청을 재시도 하는 로직 구현

[피드백] 도구, 폭죽, 부채 같은 아이템을 따로 분류하여 카테고리로 추가

🗣 설명

📋 체크리스트

완료하지 못한 체크리스트
완료한 체크리스트

[피드백/카탈로그] 전체선택, 초기화 기능 구현

🗣 설명

카탈로그를 모두 완성한 사용자를 위한 전체선택 기능 추가
섬 초기화를 하고 다시 시작하는 사용자를 위한 초기화 기능 추가

📋 체크리스트

카탈로그 내부 아이템 목록 화면에서 전체선택 기능을 추가
카탈로그 내부 아이템 목록 화면에서 선택 초기화 기능을 추가
앱 기본 설정에서 모든 정보를 초기화하는 기능을 추가

[아이템] 울타리를 카탈로그 목록에 추가

🗣 설명

울타리를 카탈로그 목록에 추가합니다.

📋 체크리스트

울타리에 대한 요청 타입 구현
울타리에 대한 DTO 타입 구현
울타리을 불러와서 카탈로그 목록에 정상적으로 보여질 수 있도록 리팩토링 작업

[Bug] 전체선택 시 앱이 종료되는 현상 개선

🗣 설명

📋 체크리스트

완료하지 못한 체크리스트
완료한 체크리스트

[피드백/아이템] 리액션을 카탈로그 목록에 추가

🗣 설명

📋 체크리스트

리액션에 대한 요청 타입 구현
리액션에 대한 DTO 타입 구현
리액션을 불러와서 카탈로그 목록에 정상적으로 보여질 수 있도록 리팩토링 작업

[카탈로그 화면] 목록화면, 상세화면 구성

🗣 설명

물고기, 곤충, 해산물, 화석, 미술품 목록을 나타내는 테이블뷰를 구성합니다.

📋 체크리스트

각 카탈로그에 맞는 아이콘 및 타이틀을 표시하도록 하기
카탈로그 갯수 표시하기
ViewModel 생성 및 바인딩 처리
아이템의 상세정보를 나타내는 섹션 추가 및 바인딩

[가구] 가구 아이템을 추가

🗣 설명

현재까지 등록된 아이템 외에 카탈로그 아이템을 추가적으로 더 구현합니다.

📋 체크리스트

가구 Resopnse, Request, DTO 타입들을 추가
해당 타입에 맞는 디테일 뷰 추가적으로 구현
- 바디, 패턴별로 이미지 보여주도록 구성
- 제작해서 얻어지는 아이템의 경우 레시피 함께 보여주기
- 수집방법, 수집메모, 카탈로그 구매 가능 여부, 레시피 획득처
- 해피홈 정보 (컨셉, 포인트, 포키)
- 시리즈 아이템, 혹은 세트 아이템이라면 관련 아이템으로 보여주기
- 키워드
지역화 처리

[홈 화면] ViewModel 구현

🗣 설명

앞서 만든 View들의 ViewModel을 구현합니다.

📋 체크리스트

Dashboard 관련 ViewController, View들의 ViewModel을 구현
RxSwift, RxCocoa로 리팩토링 작업

[피드백/아이템] 카탈로그에 주민 사진 추가

🗣 설명

주민들에게 선물받은 사진을 체크할 수 있도록 카탈로그란에 추가합니다.

📋 체크리스트

주민 사진에 대한 요청 타입 구현
주민 사진에 대한 DTO 타입 구현
주민 사진을 불러와서 카탈로그 목록에 정상적으로 보여질 수 있도록 리팩토링 작업

[피드백/버그] SearchBar가 비정상적으로 움직이는 현상

🗣 설명

SearchBar에 텍스트를 입력한 후 Navigation Push 이후 Pop을 할 때, SearchBar가 비정상적으로 움직이는 현상을 개선합니다.

📋 체크리스트

원인 분석
- NavigationBar의 속성 중 prefersLargeTitles을 false로 주면 해당 현상 사라짐.
- searchController의 hidesNavigationBarDuringPresentation 속성을 false로 할당해주어도 해당 현상 발생 안됨.
- 나의 추측 UIKit의 버그인 것 같다...
버그 개선
- SearchBar가 있는 컨트롤러는 hidesNavigationBarDuringPresentation 속성을 false로 할당하도록 수정