[Feat] 스켈레톤 UI

[aerohero]

앱 화면의 주요 레이아웃을 미리 보여주는 시각적 요소로 구성된 스켈레톤 UI를 만듭니다.

주요작업

1. Coordinator
2. Scene
3. SkeletonView 라이브러리 -> 사용하지 않기로 결정, just UIView로 작업하기로 함

App

1. User App: 우선 개발
2. Teacher App: User App 개발 후 착수

View
A. 강의목록 탭

1. 강의 목록 뷰 -> LectureSearchView
2. 강의 디테일 뷰 -> LectureDetailView
3. 강의 OT 영상 페이지 뷰 -> OtVodView
4. 수강 날짜 선택 뷰 -> MeetingDateView
5. 결제 뷰 -> PaymentView
6. 결제완료 뷰 -> CompletePaymentView
7. 구매한 강의 목록 뷰 = LectureRecordView (or LectureListView)

B. 반복학습 탭

1. LectureListView
2. MissionListView (ChattingView로 연결되는 버튼 필요, ChattingView에서는 MissionListView로 돌아가는 버튼 필요)
3. MissionUploadView

C. 채팅 탭

1. ChatListView
2. ChattingView = AI에게 물어보기 화면과 동일 뷰로 해야 할 듯

D. 마이페이지 탭

1. UserPageView
2. BadgeView
3. LectureRecordView
4. LectureRecordDetailView
5. NotificationView
6. NotificationControlView
7. PaymentListView

작업내용 상세

1. Coordinator 패턴 기본 구조 - Coordinator.swift -> (0515) 이미 작성된 파일 확인�Protocol.swift
2. SceneDelegate 설정 - SceneDelegate.swift 수정 -> (0515) 이미 작성된 파일 확인 후, AppCoordinator 관련 코드 추가
3. 스켈레톤 UI를 보여줄 ViewController
4. 공통 UI 요소 (CommonUIElementViewController.swift 상단에 정의)
5. SkeletonView 라이브러리 사용 - CommonUIElementViewController.swift -> (0515) 사용하지 않기로 결정, UIView로 작업하기로 함
6. import SkeletonView -> (0515) 사용하지 않기로 결정, UIView로 작업하기로 함
7. View 별 작업

ref.
스켈레톤 UI를 사용하는 주요 이유

1. 사용자 인지 부하 감소: 로딩이 길어질 때 텅 빈 화면은 사용자에게 앱이 멈춘 것처럼 느껴지게 만들 수 있어요. 스켈레톤 UI는 앱이 여전히 작동 중이며 콘텐츠를 가져오는 중이라는 것을 시각적으로 알려주어 사용자의 불안감을 줄여줍니다.
2. 향상된 사용자 경험: 콘텐츠가 점진적으로 로딩되는 느낌을 주어 앱의 반응성이 더 좋다고 느끼게 합니다. 마치 음식이 나오기 전에 식기류가 먼저 세팅되는 것과 비슷하다고 생각하시면 돼요.
3. 집중도 유지: 사용자가 로딩 화면에 집중하지 않고, 콘텐츠가 나타날 위치를 미리 파악하여 앱의 흐름을 끊김 없이 인지하도록 돕습니다.

UIKit 앱 개발에서 스켈레톤 UI를 구현하는 일반적인 방법 2가지

1. UIView를 활용한 방법: 실제 콘텐츠가 들어갈 위치에 비슷한 크기와 형태의 회색 또는 흐릿한 색상의 UIView를 배치하고, 이 뷰들에 애니메이션 효과(예: 페이드 인/아웃, 깜빡임)를 적용하여 로딩 중임을 시각적으로 나타냅니다.
2. 라이브러리 활용: 편리하게 스켈레톤 UI를 구현할 수 있도록 도와주는 다양한 오픈소스 라이브러리들이 있습니다. 예를 들어, Shimmer, SkeletonView 등이 대표적이에요. 이런 라이브러리들을 사용하면 복잡한 애니메이션이나 UI 구성을 직접 구현할 필요 없이 간편하게 스켈레톤 효과를 적용할 수 있습니다.