1 of 50

2022.12.14

S004 김민중 S019 박영준 S049 장재훈 S060 홍지수

iOS01 팀 - 부기온앤온

공간캡슐

2 of 50

1. 소개

1.1 팀 소개

1.2 프로젝트 소개

2. 사용 기술

2.1 구조

2.2 비동기

3. 기술적 고민

3.1 Apple Token Revoke

3.2 이미지 처리 및 캐싱 모듈

3.3 캡슐 개봉 가능 여부 계산 로직

3.4 3D Carousel CollectionView

2

3 of 50

CHAPTER 1.

소개

1.1 팀 소개

1.2 프로젝트 소개

4 of 50

4

1.1 팀 소개

S004 김민중

S019 박영준

S049 장재훈

S060 홍지수

@solbat

@pyj9748

@trumanfromkorea

@hongpower

5 of 50

5

1.2 프로젝트 소개

6 of 50

6

1.2 프로젝트 소개

https://youtu.be/yiHOi-m3Stk

기능 시연영상

7 of 50

CHAPTER 2.

사용 기술

2.1 구조

2.2 비동기

8 of 50

8

2.1 구조

View 와 Model 간 의존성 최소화

ViewController 부담 감소

MVVM-C

화면 전환 로직 분리

View Model

Model

View

Notify

Update

Binding

Event

Coordinator

9 of 50

9

2.2 비동기

비동기 처리 - 콜백 지옥 탈출!

UI Event 처리

VM – VC 데이터 바인딩

RxSwift

10 of 50

CHAPTER 3.

기술적 고민

3.1 Apple Token Revoke

3.2 이미지 처리 및 캐싱 모듈

3.3 캡슐 개봉 가능 여부 계산 로직

3.4 3D Carousel CollectionView

11 of 50

CHAPTER 3.

기술적 고민

3.1 Apple Token Revoke

12 of 50

12

3.1 Apple Token Revoke

Apple Account 정책 변경

13 of 50

13

3.1 Apple Token Revoke - 문제 상황

Firebase

공간캡슐

Apple 서버

Apple Token Revoke

#문제 상황

Firebase Auth, Firestore 에서만 계정 삭제

계정 삭제 시 Apple Token 유지

14 of 50

14

01

JavaScript 와

Firebase Cloud Function 을

활용한 경우 다수 존재

02

서버 개발자의 고민거리?

3.1 Apple Token Revoke - 문제 상황

15 of 50

15

#해결 방법

Authorization Code 재발급

Authorization Code 는 일회성, 유효기간은 5분

회원 탈퇴 전 로그인 재실행

Authorization Code

Client Secret

Refresh Token

Revoke Token

3.1 Apple Token Revoke - 해결 방법

16 of 50

16

#성과

3.1 Apple Token Revoke - 성과

17 of 50

17

01

외부 라이브러리 의존성 감소

3.1 Apple Token Revoke - 성과

02

Firebase 무료 요금제 내에서

문제 해결

18 of 50

CHAPTER 3.

기술적 고민

3.2 이미지 처리 및 캐싱 모듈

19 of 50

19

#문제 상황

UICollectionView 를 이용해 여러 장의 이미지를 출력해야 하는 상황

같은 이미지가 앱 내 여러 곳에서 쓰이는 경우 존재

이미지 중복 호출

3.2 이미지 처리 및 캐싱 모듈 - 문제 상황

20 of 50

20

01

02

시간 문제

이미지 출력 위해 매번 URL 요청

→ 캐시 이용으로 해결 가능

메모리 문제

매번 원본 이미지 출력

→ 이미지 Downsampling 으로 해결 가능

3.2 이미지 처리 및 캐싱 모듈 - 문제 상황

21 of 50

21

라이브러리 사용?

외부 라이브러리에 대한 의존성 최소화

직접 구현해보며 동작 원리 이해

#해결 방법

3.2 이미지 처리 및 캐싱 모듈 – 해결 방법

22 of 50

22

NSCache<NSString, NSData>

Key

URL → NSString

Value

Image Data → NSData

3.2 이미지 처리 및 캐싱 모듈 – 해결 방법

23 of 50

23

시간 단축

#성과

3.2 이미지 처리 및 캐싱 모듈 - 성과

24 of 50

24

Downsampling

3.2 이미지 처리 및 캐싱 모듈 - 성과

25 of 50

25

Downsampling

3.2 이미지 처리 및 캐싱 모듈 - 성과

26 of 50

CHAPTER 3.

기술적 고민

3.3 캡슐 개봉 가능 여부 계산 로직

27 of 50

27

캡슐 개봉 가능 여부 계산

사용자의 움직임이 감지될 때마다

사용자와 모든 캡슐의 거리를 계산해서

개봉 가능한 캡슐인지 판단 후

화면에 출력

#문제 상황

3.3 캡슐 개봉 가능 여부 계산 로직 – 문제 상황

28 of 50

28

캡슐 감시 범위 축소

사용자의 초기 위치로부터

1km내에 있는 캡슐들만 거리 계산

#해결 방법

3.3 캡슐 개봉 가능 여부 계산 로직 – 해결 방법

29 of 50

29

사용자가 반경 1km를 벗어난다면?

3.3 캡슐 개봉 가능 여부 계산 로직 – 해결 방법

30 of 50

30

사용자가 1km에

근접하게 이동하는 경우

새로운 사용자 위치로부터

연산할 캡슐 재지정

3.3 캡슐 개봉 가능 여부 계산 로직 – 해결 방법

31 of 50

31

캡슐 100개

서울 안에서 움직이는 경우

개선 전

개선 후

#성과

3.3 캡슐 개봉 가능 여부 계산 로직 – 성과

32 of 50

32

캡슐 100개

좁은 반경에서 움직이는 경우

개선 전

개선 후

#성과

3.3 캡슐 개봉 가능 여부 계산 로직 – 성과

33 of 50

CHAPTER 3.

기술적 고민

3.4 3D Carousel CollectionView

34 of 50

34

Carousel?

3.4 3D Carousel CollectionView

35 of 50

35

01

02

아쉬운 UI/UX

사용자의 감성을 자극하는 앱을 기획하였으나

이를 전달할 UI/UX가 부족하였음

‘Infinite’ Carousel

좌우로 ‘무한히’ 돌아가는 Carousel을 구현하고자 하였음

#문제 상황

3.4 3D Carousel CollectionView – 문제 상황

36 of 50

36

01

CATransform3D

#해결 방법