만화경 구름톡 - 1. 분석하기

안녕하세요. Skillist입니다

 

여담이지만, 최근엔 개인적으로 사용할 비공개 앱을 RxSwift로 개발했습니다.

그리고, iOS 학습을 위해 여러 기업 기술 블로그를 기웃거리다가, 재밌어 보이는 기능을 발견했습니다.

 

바로바로바로 "우아한형제들" - "만화경" 앱의 "구름톡"!!

저는 우아한형제들과 전혀 상관이 없습니다.

 

https://story.baemin.com/2851/

만화에 댓글기능을 넣었더니 벌어진 놀라운 일

https://techblog.woowahan.com/6803/

웹툰도 같이 봐요: 만화경 구름톡 | 우아한형제들 기술블로그

저작권 문제가 예상되므로, 스크린샷은 따로 추가하지 않겠습니다.

 

정말 재밌는 기능이라 생각했어요.

예전에 동영상에 댓글?을 보여주는 기능도 있었죠???

이와 같이, "구름톡"은 웹툰 컷에 댓글을 보여주는 기능입니다.

위의 URL을 들어가 글을 읽어보면, 어떻게 구현돼있는지 설명 해주네요.

 

사실은 글을 안읽어보고, 구현 먼저 생각했습니다.

이유는 다음과 같아요.

글 안에는 아주 작을지라도 구현에 대한  설명이 있을것이고,

설명을 읽게되면, 블로그에서 설명한 로직 틀 안에서 벗어나지 못할 것 같았어요.

마치, 기획자에게 기능에 대한 설명을 듣고, 백지 상태에서 기능을 구현하는 만화경 개발자처럼 접근했어요.

 

우선 화면을 구현해야겠죠?

navigationBarController을 사용합니다.

또 TableView를 사용하고, section으로 구분합니다.

하단의 view는 직접 구현해주면 될것 같아요.

스크롤에 따라, navigationBar와 하단View를 hide하고,

제스처를 추가하여, fullScreen모드를 toggle하면 되겠어요.

"흐르는 Text View"는 iOS에선 개발해본적이 없지만, Android에선 개발해봤거든요.

문제는 "흐르는 Text View"의 위치인데요.

이를 파악하기 위해, 아이폰과 아이패드에서 만화경을 나름 열심히 분석해봤어요.

뷰, 좋아요 수가 많은 만화로 들어가서 "흐르는 Text View"를 봤어요.

아이폰과 다르게, 아이패드에서 "흐르는 Text View"의 개수는 동일해보이고, 상하 간격이 좀 있어보이는것으로 봐서,

스택뷰로 구현했나요..??

만화 한컷(tableView Cell)에 "흐르는 Text View"를 stackView로 추가하면 되겠는데요?????

시작 타이밍은 tableview delegate의 willDisplay 함수를 사용하면 될듯해요.

"흐르는 Text View"를 터치하면 상세 textView가 보입니다.

그리고 "구름톡" 버튼 이동은 잘 모르겠어요.

이 정도면 어느정도 분석됐습니다.

글로는 아주 간단하게 작성했는데, 개발해보고 싶어서 정말 열씸히 살펴봤어요.

 

글을 봐볼까요?

각 컷의 y 좌표를 기준으로 구름톡을 등록했네요.

서버로부터, 구름톡을 미리 받아와서, 만화컷이 보일때 노출하네요.

테스트를 위해서, 설정 admin 기능도 있어요.

admin화면을 보니, 구름톡의 속도는 3이고, 갯수는 10개인가보네요?

버튼은 Facetime Pip을 사용했나봐요.

구름톡 상세View는 Modality를 사용했구요.

https://github.com/nathangitter/fluid-interfaces

GitHub - nathangitter/fluid-interfaces: Natural gestures and animations inspired by Apple's WWDC18 talk "Designing Fluid Interfa

 

저는 심심하거나 클론코딩을 할 때 또는 앱에서 사용한 오픈소스가 궁금할때 앱의 오픈소스를 종종 봅니다.

그럼 만화경의 오픈소스를 한번 볼까요????

Alamofire는 네트워크통신을,

Moya는 네트워크 테스트인가요? (https://techblog.woowahan.com/2704/)

Kingfisher는 이미지 다운 task,

Reachability는 처음 들어봤어요. 네트워크 관련 으로 보이네요.

RxSwift는 RxSwift입니다.

MarqueeLabel이 "구름톡"에 사용하는 "흐르는 text"입니다.

swinject는 의존성 주입을 해결하기 위한 디자인 패턴이라는데, 처음 들어봤어요.

lottie-ios는 에어비엔비에서 만든 움직이는 애니메이션으로 알고있어요.

Amplitude-iOS는 이벤트를 수집하여 분석 하나봐요.

facebook-ios-sdk는 페이스북 관련 sdk겠네요.

SnapKit은 제가 사랑하는 오픈소스입니다. 코드로 레이아웃의 제약사항을 구현할 수 있어요.

Appboy-iOS-SDK는 사용자의 클릭을 유도하는 마케팅 관련 같은데 알것같기도 하고 모르겠어요.

Firebase는 파이어베이스죠?

 

좋은 라이브러리가 많네요. 모르는 라이브러리에 대해서 공부해봐야 겠어요.

cocoapods에서 라이브러리 하나씩 검색해서 보세요.

꼭 보세요.

https://cocoapods.org/

CocoaPods.org

 

구름톡에 대한 청사진이 그려졌나요????

저는 어느정도 느낌이 왔습니다.

 

그럼 이제 개발에 착수해도 되겠네요.

개발 전에 분석을 왜케 하냐구요????

개발자의 기본 아니겠습니까?

 

만화경 개발파트의 이야기를 들어보니, 문화가 좋아보이고, 업무가 재미있어보이네요.

https://story.baemin.com/2401/

직업 만족도 상위 1% 의 비밀

 

개발 후 다시 만나죠~

 

———————————————————————————————————————————————————

 

잘못되거나 부족한 내용 등, 피드백 감사합니다!