Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

피클 구조 설계를 위한 요구사항 명세 #4

Open
Charlezz opened this issue Nov 21, 2019 · 11 comments
Open

피클 구조 설계를 위한 요구사항 명세 #4

Charlezz opened this issue Nov 21, 2019 · 11 comments

Comments

@Charlezz
Copy link
Contributor

Charlezz commented Nov 21, 2019 •
edited
Loading

  • 싱글 액티비티 구조, Navigation Component 활용해서 네비게이션 그래프로 UI 변경

  • 앱에서 피클 호출시 Pickle.startActivityForResult(..., ReqCode) 또는 Pickle.start(...,Callback) 구조 고려중

  • PickleViewModel 을 토대로 N개의 View(Fragment)를 갖는 MVVM 패턴 사용

  • ContentResolver를 통한 20~30만장의 사진 또는 동영상 로드시 모바일 환경에서 최대 수초에서 수십초까지 초기화하는데 시간이 소요되므로, 페이지네이션을 하는 구조로 가야함. 사진이 19만장 정도 있는 갤럭시 S8에서 인스타그램 실행후 첫 번째 썸네일 이미지가 표현되는데까지 9초가 걸림.

  • 인스타 그램 피커는 [ 라이브러리 / 사진 및 동영상 ] 안드로이드는 2개의 탭 아이폰은 3개의 탭을 갖는 뷰페이저형식으로 구성되어있음.
    ViewPager2-Rc1 사용 고려중, 젯팩 문서에 Navigation Component와 ViewPager2를 같이 사용하는 예제가 나와있음.

    1. 라이브러리
      라이브러리화면에서 상단은 동영상이 실행가능한 섬네일 화면 하단은 일반적인 그리드뷰로 구성
      상단과 하단이 사용자의 액션에 의해 서로 상호작용해야하므로 CoordinatorLayout내에서 상단 View + 하단 RecyclerView로 구성하는것을 고려중.

    2. 사진 및 동영상은 Camera API를 직접사용해야함.API 파편화( Camera, Camera2)를 고려해야하므로 CameraX 라이브러리를 사용하거나 최악의 경우 Camera2(롤리팝 API 21)만 쓰는것을 고려중.

  • 상단 앱바의 경우 뒤로 갈수있는 back버튼과 폴더별 리스트 그리고 편집을 할수 있는 다음 버튼을 가지고 있다.
    편집기능은 추후 고려 우선 이미지 선택기능에 집중.

  • 인스타그램은 액티비티를 portrait만 지원하지만, 피클을 가져다 쓰는 앱에서는 portrait & landscape로 사용할 수도 있기 때문에 configuration change에 대한 대비를 해야함. AAC ViewModel 사용으로 query를 반복하는 일을 없도록 함

  • 피클이 백그라운드에 있고 다른 앱에서 사진을 찍거나 삭제후 피클로 진입할 경우 재쿼리 또는 FileObserver 등을 통해 새로 추가/삭제된 이미지를 업데이트해야한다.

  • 지원하는 포맷 결정해야함 (JPG, PNG, GIF, MP4, HEIC 등) , 아마 글라이드에 의존적으로 결정해야할 듯

  • 멀티 셀렉션 구현 방식 고려해야함(RecyclerView selection library 검토)

  • 피클을 사용하는 애플리케이션과 데이터를 전달할 규격(entity)을 결정해야함(포맷, 사이즈, 경로, 아이디, 기타 등등)

추가적으로 고려하고 있는 내용을 댓글로 달아주세요~
해당내용 토대로 업무 분장하고 이슈 쪼개서 같이 진행해보도록할게요.
@Charlezz
Copy link
Contributor Author

진입전 퍼미션 처리도 피클에서 하면 좋을것 같아요

@Charlezz
Copy link
Contributor Author

Charlezz commented Nov 21, 2019 •
edited
Loading

페이징은 paging컴포넌트와 PositionalDataSource를 사용하면 좋을것같습니다

@dotkebi
Copy link

dotkebi commented Nov 21, 2019

interface 기반 설계를 하실건가요?

@Charlezz
Copy link
Contributor Author

interface 기반 설계를 하실건가요?
네

@kklyoon
Copy link
Collaborator

kklyoon commented Nov 21, 2019

기존에 많이 쓰는 피커에서 지원하는 mime type 리스트를 퍼왔습니다.
https://github.com/zhihu/Matisse/wiki/Basic-Usage#mime-type

Mime type File extensions Media type
image/jpeg jpg, jpeg image
image/png png image
image/gif gif image
image/x-ms-bmp bmp image
image/webp webp image
video/mpeg mpeg, mpg video
video/mp4 mp4, m4v video
video/quicktime mov video
video/3gpp 3gp, 3gpp video
video/3gpp2 3g2, 3gpp2 video
video/x-matroska mkv video
video/webm webm video
video/mp2ts ts video
video/avi avi video

@sangcomz
Copy link
Member

  • 멀티 선택했을 때 순서에 따라서 리싸이클러뷰 갱신을 위한 고민 (셀렉션 라이브러리를 쓰시면 다를것같네요)
  • 피시번의 경우 멀티페이지라서 선택된 이미지 정보를 어떤 식으로 처리할 것인가에 대한 고민

지금 생각나는 오래 작업했던 이슈들은 이정도가 있는것같네요! 오래전에 작업을 많이 했었어서 기억이 잘 안나네요 ㅠㅠ
혹시 더 생각나는게 있으면 추가적으로 코멘트 남기겠습니다 !

@kklyoon
Copy link
Collaborator

kklyoon commented Nov 21, 2019

기존 라이브러리 몇개 찾아보고 넣을만한 기능 정리해봤습니다.

  • 커스텀 필터기능 ( 이미지 사이즈, 크기, 날짜, 머신러닝과 연동시켜 고양이사진만 보여준다든가 )
  • 리스팅 순서기능 ( 오래된사진순, 최근사진순, 이미지크기순, 동영상길이순 등등)
  • Header 및 Footer 추가 기능 ( 선택된 파일의 EXIF 정보를 출력한다든가, 다중선택시 선택된 이미지리스트를 보여준다든가)
  • 이미지 원본의 ratio 를 유지하면서 tile 형식으로 보여주는 레이아웃

[참고]
스크린샷 2019-11-21 오후 10 09 59

@kklyoon
Copy link
Collaborator

kklyoon commented Nov 21, 2019 •
edited
Loading

인스타그램을 잘 살펴보니 정말 많은 기능이 있네요.

  • 선택된 비디오 재생기능
  • 이미지/동영상 크롭 혹은 aspect ratio
  • 사진 카메라
  • 사진 카메라에서 버튼 꾹 누르고 있으면 자동으로 동영상녹화기능으로 넘어감
  • 사진 필터 기능 ( 필터 종류 41개)
  • 자주쓰는 필터 설정기능
  • 동영상 필터
  • 동영상 썸네일 시점 추출기능
  • 동영상 편집기능

피커의 기능과 거리가 먼것들은 가져다 쓰는 사람이 만들어 쓸 수 있도록 할 수 있을까요??

@sangcomz
Copy link
Member

  • 화면 회전에 대한 고려

뷰모델을 쓰셔서 하시니 크게 영향은 없을것같지만 또 생각나서 코멘트 남깁니다.

@Charlezz
Copy link
Contributor Author

Charlezz commented Dec 2, 2019

KakaoTalk_Photo_2019-12-02-16-31-53
네비게이션 그래프

@Charlezz
Copy link
Contributor Author

Charlezz commented Dec 2, 2019

KakaoTalk_Photo_2019-12-02-16-31-49
페이징 컴포넌트를 활용한 워크플로

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@dotkebi @sangcomz @Charlezz @kklyoon