KMM Colorpicker App

KMM 을 활용한 대표 컬러 찾기 프로젝트

LinkedIn : https://www.linkedin.com/in/yuskyblue/

Transcript

1. Kotlin Multi Platform Project : Color Picker [Blue Star] 옥수환 유청규
2. 시연
3. Table of Contents Blue Star 1. 주제 선정 2. 참고 자료 3. 진행 과정 4. 종료 후기
4. 주제선정
5. 옥수환 - 주어진 이미지에서 대표 색상을 추출하고 싶다. 유청규 - KMM 으로 간단하게 이미지를 처리하는 앱을 만들어 보고 싶다. 주제 선정 Blue Star
6. 참고자료
7. 참고 자료 Blue Star [XML] [Compose]
8. 참고 자료 Blue Star
9. 진행과정
10. 진행 과정 Blue Star [옥수환] [유청규] XML + Compose 적용 후 -> KMP 좌표 값 색상 추출 적용 주어진 이미지에서 대표 컬러 구하는 Usecase 구현
11. 진행과정 이미지 가져오기
12. 진행 과정 - 이미지 가져오기 Blue Star commomMain (App Screen) Android iOS 공통적인 뷰를 가지고 있으면서 Photo Picker 처럼 Dependency 있는 부분 각각 구현
13. 진행 과정 - 이미지 가져오기 Blue Star Comm (Get Dominant Color) Android iOS [image URL Format] Photo 형식을 URL형식으로 가져옴
14. 진행과정 이미지 프로세싱
15. 진행 과정 - 이미지 프로세싱 Blue Star [Image URL] URL 형식의 이미지를 Decode 하여 원하는 이미지 객체인 BSImage로 반환 [Use Case decode] BS Image [Image Object]
16. 진행 과정 - 이미지 프로세싱 Blue Star [CommomMain] [androidMain] [iosMain]
17. 진행 과정 - 이미지 프로세싱 Blue Star Android 예시 any 로 객체로 받아 디코딩 하여 원하는 이미지 객체 반환
18. 진행과정 대표값 찾기
19. 진행 과정 - 대표값 찾기 Blue Star Commommain (Get Dominant Color) Android iOS
20. 진행 과정 - 대표값 찾기 Blue Star CommomMain (Get Dominant Color) Android iOS X Y X, Y를 돌면서 회색조 판단 Map 에 GrayScale 이미지 제외한 색깔을 Counting
21. 진행 과정 - 대표값 찾기 Blue Star CommomMain (Get Dominant Color) Android iOS
22. 진행 과정 - 대표값 찾기 Blue Star CommomMain (Get Dominant Color) Android iOS Most Common Color Value 산출
23. 진행 과정 - 대표값 찾기 Blue Star commomMain (App Screen) Android iOS
24. 진행 과정 - 대표값 찾기 Blue Star commomMain (App Screen) Android iOS 대표값 각 OS 별 삽입
25. 진행과정 이미지 좌표 값 출력
26. 진행 과정 - 이미지 좌표 값 출력 Blue Star Image dominant Color Color Value [App Screen] image의 임의에 지점을 클릭
27. 진행 과정 - 이미지 좌표 값 출력 Blue Star Image dominant Color Color Value [App Screen] offset 좌표 값 추출 및 이미지 디코드 BSImage Color Value
28. 진행 과정 - 이미지 좌표 값 출력 Blue Star Image dominant Color Color Value [App Screen] BSImage Color Value CommomMain (GetColorByPos itionUseCase) 이미지 / 좌표값 / 비율
29. 진행 과정 - 이미지 좌표 값 출력 Blue Star Image dominant Color Color Value [App Screen] BSImage (255,165,0) CommomMain (GetColorByPos itionUseCase) 대표값 다시 적용 ex) orange -> purple
30. 진행 과정 - 이미지 좌표 값 출력 Blue Star Image dominant Color Color Value [App Screen] BSImage (160,32,240) CommomMain (GetColorByPos itionUseCase) 대표값 다시 적용 ex) orange -> purple
31. 종료후기
32. 종료 후기 Blue Star [옥수환] [유청규] KMP 는 유즈케이스에 대해 전반적인 설계 및 OS Dependency 생기지 않도록 만드는 것이 중요하다 KMM으로 프로젝트 진행시 코틀린으로 최대한 공통로직을 작성하고, 특수한 상황을 제외하고는 expect/actual을 통한 플랫폼 분기 구현은 최소화하는 게 좋을 것 같다.