[리모리모] 마리모와 함께 성장하는 집중 도우미 앱

🖋️ 목차

📍 프로젝트 소개

📍 주요 기능

📍 기술 스택

📍 기술적 의사 결정

📍 트러블 슈팅

📍 업데이트 계획

---

1. 프로젝트 소개

📍프로젝트 이름: 리모리모

📍프로젝트 진행 기간: 2024.05.28 - 2024.07.04.

📍개발 엔진 및 언어: Xcode, Swift

📍https://github.com/marimorimo/RimoRimo

👉  리모리모는 마리모와 함께 성장하며 집중력을 기를 수 있는 집중 도우미 앱입니다. 목표 집중 시간을 설정하고, 목표 달성에 가까워질 수록 마리모가 성장해요! 집중할수록 성장하는 나와 마리모, 함께 목표를 이루어 봐요.

---

2️. 주요 기능

⏰ 스톱워치 - 리모와 함께 집중 모드 ON !

👉  집중 모드 시작하기/중단하기 버튼을 눌러 스톱워치를 실행하고 멈출 수 있어요.

👉 설정한 목표 시간 달성률에 따라 마리모가 단계 별로 성장해요. 5단계에서는 프로필에서 설정한 마리모가 나타나요.

---

📆 캘린더 - 매일의 집중 시간과 마리모를 확인해요.

👉  날마다 성장한 마리모의 모습을 캘린더에서 확인할 수 있어요.

👉  캘린더에서 원하는 날짜를 선택하면 선택한 날짜의 집중 시간, 마리모 상태, 메모를 확인할 수 있어요.

---

☑️ 투두리스트 - 오늘 하루 해야 할 일들을 작성하고 관리할 수 있어요.

👉  오늘 해야 할 일들을 기록하고 완료 여부를 표시할 수 있어요.

👉  캘린더에서 원하는 날짜를 선택하고 해당 날짜의 투두리스트를 확인할 수 있어요.

---

🤓 마이페이지 - 내 정보, 목표 시간과 D-Day, 지난 30일 간 모은 마리모를 확인할 수 있어요.

👉  내 닉네임과 이메일(아이디)를 확인할 수 있어요.

👉  목표 집중 시간과 D-Day 일정 및 남은 일수를 확인할 수 있어요.

👉  ”최근 성장한 마리모 보기” 버튼을 눌러 지난 30일 간 모은 마리모들을 화면을 터치하며 애니메이션과 함께 확인할 수 있어요.

⚙️ 프로필 수정 페이지 - 프로필 이미지, 닉네임, 목표 집중 시간, D-Day 일정을 설정할 수 있어요.

👉  프로필에서 설정한 이미지는 마이페이지 및 스톱워치 페이지에서 확인할 수 있어요.

👉  닉네임을 수정할 수 있어요.

👉  목표 집중 시간을 설정할 수 있어요. 목표 시간을 달성하면 메인 페이지에 프로필 이미지로 설정한 마리모가 나타나요.

👉  D-Day 일정 이름과 날짜를 선택할 수 있어요.

💡 위젯 - D-Day 일정과 투두리스트를 확인할 수 있어요.

👉  라이트 모드와 다크 모드 설정에 따라 색상이 달라져요.

👉  일정이 다가올수록 프로그레스 바가 채워져요.

👉  완료한 할 일 목록은 위젯에서 사라져요.

3. 기술 스택

범위	기술 이름
의존성 관리 도구	SPM
형상 관리 도구	GitHub Git
아키텍처	MVC
디자인 패턴	Delegate Singletone
인터페이스	UIKit SwiftUI
레이아웃 구성	SnapKit Then
저장소	UserDefaults Firebase
코드 스타일	SwiftStyleGuide

4. 기술적 의사결정

💡 마인드맵을 통한 애자일 방법론

💡 아키텍쳐 - MVC

💬 MVC 선택 이유?

간단하고 직관적으로 데이터 흐름을 구분할 수 있어 빠른 개발에 적합하기 때문에 선택하게 되었습니다.

🙌 적용

Model

View

Controller

5. 트러블 슈팅

🥊 메인 페이지

• 메인 페이지

  문제점	해결 방안
  다른 페이지 이동 후 마리모 애니메이션이 실행되지 않는 문제	이 문제로 구현 초기부터 애를 먹었는데 해결하고자 온갖 생명주기를 다 사용해보고 튜터님도 찾아가 보고 했지만 해결되지 않고 있었다. 이후, 같이 공부를 하는 분께 이 문제에 대해 조언을 구했는데 애니메이션을 별도의 파일로 분리해서 시작점과 끝점을 맞추어 구현해 보라는 조언을 듣고 이번 피드백 수정 시 반영해 보았다. 처음에는 UIView.animate를 사용해서 구현했는데, UIView.animate은 UIView의 애니메이션 API로 애니메이션 상태를 관리가 적절하지 않을 경우 중간에 View가 사라지거나, 상태가 초기화되지 않는 문제가 발생할 수 있다는 문제점이 있었다. UIView.animate를 CABasicAnimation으로 변경하여 애니메이션을 추가해 봤다. CABasicAnimation에 경우 독립적인 애니메이션 처리가 가능해서 애니메이션이 UIView의 상태와 별개로 작동하게 되고, 키를 사용해서 애니메이션을 추가/삭제할 수 있다. 그렇기 때문에 애니메이션 상태를 보다 명확하게 관리 할 수 있게 되어 다른 페이지를 이동했다 돌아와도 애니메이션이 멈추지 않게 구현할 수 있었다.
  Timer를 시작하면 Background에 버블 애니메이션이 무수히 많아지는 문제	메인 페이지를 View와 Controller로 분리하며 구현하는 도중 Timer를 시작하면 Background 애니메이션인 버블이 엄청나게 늘어나는 문제가 발생했는데, viewDidLayoutSubviews는 ViewController가 레이아웃을 다 그린 후에 호출되는데 이때 setupBubbleEmitter를 호출하게 되면 그 시점에 View의 레이아웃이 완전히 완료되지 않기 때문에 View의 크기나 위치등이 올바르게 설정되지 않았던 것 같다. 그래서 View를 layoutSubviews를 통해 개별적으로 MainViewController에 호출하는 식으로 변경하니 문제가 해결되었다.
  자정이 되면 실행중인 타이머가 리셋되도록 해야 하는데 백그라운드에 있을때 적용되지 않는 문제	자정을 기준으로 타이머를 설정하고 매일 한 번씩 리셋하도록 하는 방식을 시도해보고자 scheduleMidnightTimer 메서드를 사용해 자정에 타이머를 설정하고, 자정 이후 86400초(24시간)마다 타이머가 반복 실행되도록 하여 리셋 작업이 실행되도록 했다. checkAndResetTimerIfNeeded 메서드를 통해 현재 날짜와 저장된 시작 날짜를 비교하고, 불일치 시 데이터를 리셋하고 UI를 업데이트하는데, 이를 통해 백그라운드 작업의 제한을 우회하고 타이머가 정확한 시간에 실행되도록 했다.

🥊 캘린더 페이지

• 캘린더 페이지

  문제점	해결 방안
  각 날짜에 맞는 마리모 이미지가 캘린더에 나타나게 되어있는데 1- 4단계까지는 다 같은 마리모 이미지지만 최종 성장 마리모는 프로필에서 이미지 선택이 되어있는 마리모 이미지를 불러와야 했다. 그래서 마지막 부분을 캘린더 셀에 띄우는 데 있어 이미지가 나타나지 않는다는 문제가 발생했다.	파이어 베이스에서 profile-image라는 이름으로 최종 마리모의 이미지를 캘린더에 띄웠었는데 userInfo 컬렉션에서 가져온 것이 아니라 내가 study-session이라는 컬렉션에서 프로필을 불러오고 있었다. 그래서 userInfo에서 profile 이미지를 불러올 수 있도록 연결 부분을 변경해 주었다.

🥊 투두리스트 페이지

• 투두리스트 페이지

  문제점	해결 방안
  투두 셀 터치 시 투두가 수정되는데 이때 키보드가 올라오는 것까지 생각하지 못해서 탭 제스처를 맨 마지막에 처리하게 되었다. 탭 제스처를 맨 마지막에 얹었더니 셀 이 터치 되지도 않고 수정 기능도 먹통이 되는 문제가 있었다. 원인은 탭 제스처를 전체 화면의 맨 위에 얹었다는 점이었고, 그래서 테이블 뷰를 제외한 화면을 터치 시 키보드가 내려가도록 설정을 했는데 실패했다.	탭 제스처를 화면의 맨 뒤에 얹는 방법이 아닌 테이블 뷰가 없는 부분에 뷰를 화면 크기에 맞춰 만들었고 뷰가 들어가야 할 곳에 있는 버튼들의 앞에 코드를 적어줘서 버튼들도 제대로 동작하도록 만들어줬다.

• 투두리스트 캘린더 팝업 페이지

  문제점	해결 방안
  기존에는 앱 종료 후 재접속 시에 사용자가 마지막으로 선택한 날짜 뜨도록 구현했는데, 투두리스트 페이지에서 앱 종료 후 재접속 시 오늘 날짜를 표시하도록 수정하면서 동일하게 수정이 필요했다.
  앱을 종료하지 않았을 때는 사용자가 마지막 선택한 날짜가, 앱을 종료하고 재접속 시에는 오늘 날짜가 뜨도록 수정해야 했는데, 앱을 종료하지 않고 뷰를 닫았다가 열면 오늘 날짜가 나타나는 문제가 있었다.	기존에는 날짜를 선택하고 확인 버튼 눌러서 Firebase에 Date 정보를 투두리스트 페이지로 넘겨주고, 뷰가 로드 될 때마다 Firebase에 저장된 선택 날짜를 불러와서 표시하도록 구현했는데,
  투두리스트 페이지에 나타나 있는 날짜의 string 값을 투두리스트 캘린더 팝업 페이지로 불러와서 date 값으로 변환해 해당 날짜에 표시하도록 수정했다.

🥊 마이 페이지 |최종 마리모를 사용자가 선택한 마리모로 보여줘야 하는데 이미지(URL)로 변환하여 저장한 데이터를 변수에 다시 저장하여 보여주려고 하니 제대로 이미지가 보이지 않는 상황이 발생|처음부터 assets에 있는 이미지 이름을 저장하고, 문자열로서 변수에 저장하여 보여주는 방식으로 처리했습니다.| |타이머의 시간과 마리모의 시간을 별도로 두고 서로 연동 및 백그라운드에서도 동작하게 구현 |상태를 UserDefaults에 저장하는 방식으로 해결| 🥊 설정 페이지

• 프로필 수정 페이지

  문제점	해결 방안
  D-Day 날짜를 선택하고 현재 날짜부터 선택 날짜까지 남은 일수를 계산해 D-(남은 일수)로 Firebase에 저장하도록 구현했는데, 선택 날짜가 지났을 경우에 D-(지난 일수)로 표시되는 문제가 있었다.	예외처리를 통해 D-Day 날짜가 오늘보다 이전 날짜일 경우 D+(지난 일수)로 표시되도록 수정했다.
  D-Day 일수를 오늘 날짜를 포함할 경우 계산 일자에서 1을 더해 targetDate로 Firebase 저장해 다른 뷰에서 남은 일자를 편하게 계산할 수 있도록 했는데, 이 데이터를 그대로 D-Day 일자 선택 시 나타나는 날짜의 값으로 받아오니, 사용자 선택 날짜에서 하루 더해진 날짜로 표시되는 문제가 있었다.	파이어베이스에서 targetDate 값을 받아올 때 오늘 날짜를 포함할 경우에는 targetDate 값에서 1을 빼서 기존에 선택한 날짜를 받아올 수 있도록 코드를 수정했다.

🥊 위젯

iOS 17.0+ 에서 위젯의 백그라운드 컬러가 제대로 적용되지 않는 이슈가 있었습니다. 17.0 이상의 버전에선 분기처리를 통해 새로 추가된 containerBackground메서드를 사용해 배경화면을 설정해 해결했습니다.

6. 업데이트 계획

페이지	업데이트 내용1	업데이트 내용2
메인 페이지	목표시간 달성 시 사용자에게 push 알람으로 안내하기 구현	타이머가 실행중일 때 진행 상황을 위젯으로 보여주기 구현
캘린더 페이지	셀 터치 시 selection effect를 적용
투두리스트 페이지	투두 완료 버튼 클릭 시 시각적으로 더 잘 보이도록 텍스트 필드에 중간 줄 넣는 NSMutableAttributedString을 구현
마이 페이지
설정 페이지	프로필 설정 페이지 마리모 디자인 변경