Compose Web 개발하기

Slide 1

Slide 1 text

Compose Web 개발하기 Proprietary Confidential 유광무 GDG Songdo Organizer KUG Seoul Organizer GDSC TUK Lead

Slide 2

Slide 2 text

유광무 KUG Seoul Organizer GDG Songdo Organizer GDSC TUK Lead 전 아우토크립트 안드로이드 개발 팀장 Facebook: https://fb.com/kisa002 Instagram: https://instagram.com/kisahacker Github: https://github.com/kisa002 Introduce

Slide 3

Slide 3 text

웹 그리는 방식에 대해 이야기 Compose HTML/Web에 간단하게 알아보기 Google I/O Extended Incheon 사이트 만드는 과정 일부 소개 몇 가지 팁 제공 이번 발표에서는 Compose Web으로 만든 I/O Extended 사이트

Slide 4

Slide 4 text

Optional tag here 웹 그리기

Slide 5

Slide 5 text

HTML, CSS, JS 삼종세트로 구성된 기본적인 웹 개발 React, Vue, Angular 등 다양한 프레임워크로도 개발 웹 그리기 삼종세트

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

미세한, 세밀한 2D 그래픽의 Canvas 여러 태그 없이 Canvas 하나로 모든 것을 표현 가능 웹 그리기 Canvas

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

3D 그래픽 렌더링을 위한 API 복잡하거나 높은 그래픽 성능이 요구되는 경우 사용 기존 Canvas 영역에서 렌더링 웹 그리기 WebGL

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

4.5배 확대 삼종세트 Canvas WebGL

Slide 12

Slide 12 text

WebGL은 웹 브라우저 내 3D 그래픽 렌더링을 위한 표준 크로스플랫폼 엔진에서 Web 배포 시 WebGL로 렌더링 WebGL의 사용

Slide 13

Slide 13 text

WebGL은 웹 브라우저 내 3D 그래픽 렌더링을 위한 표준 크로스플랫폼 엔진에서 Web 배포 시 WebGL로 렌더링 WebGL의 사용 즉, Desktop/Mobile 프로젝트를 그대로. 바로. 웹으로. 가능은? 합니다.

Slide 14

Slide 14 text

WebGL로만 구성 시 미흡한 SEO로 인해 부정적인 검색 결과 Unity, Flutter 등으로 배포 시 느린 퍼포먼스 브라우저 크기에 따른 반응형, 적응형 고려 필요 즉 다양한 해상도 고려가 되지 않았다면, 기존 UI 코드 그대로 사용은 사실상 힘듦 결국 SEO가 중요하거나 해상도 대응이 안됐다면 부적절 WebGL의 사용: 단점

Slide 15

Slide 15 text

하지만 Compose는 필요한 상황에 따라 유연하게 채택 가능 SEO가 중요하다면 HTML TAG 기반으로 빠른 MVP가 필요하다면 WebGL 기반으로 KMP, CMP. 상황에 맞는 자유로운 선택 물론 해상도 대응을 위한 작업 필요 Compose Web의 경우 플랫폼 의존이 있는 경우 해체 필요 Compose HTML / Web

Slide 16

Slide 16 text

Optional tag here Kotlin/Compose Multiplatform

Slide 17

Slide 17 text

KMP/CMP 관련 설명 생략 관련 발표에서 항상 넣어왔기에 생략하겠습니다. 너무 중복… 다음 QR 코드 스캔 통해 발표 자료 확인 가능 Kotlin/Compose Multiplatform

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

Optional tag here Kotlin/ Web

Slide 20

Slide 20 text

Kotlin으로 웹 개발 시 크게 2가지로 나뉨 Kotlin/JS Kotlin/Wasm Kotlin/ Web

Slide 21

Slide 21 text

Kotlin 코드를 JavaScript로 컴파일 NPM과 통합 개발 가능 Kotlin/JS

Slide 22

Slide 22 text

Kotlin 코드를 WebAssembly Wasm 로 컴파일 Kotlin/JS 보다 뛰어난 성능, 최대 2배 이상의 퍼포먼스 Kotlin/Wasm

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

Optional tag here Compose HTML/Web

Slide 26

Slide 26 text

Compose HTML/Web Compose HTML Compose Web Compose로 Web 개발 시 크게 2가지로 나뉨 Compose HTML Compose Web

Slide 27

Slide 27 text

HTML를 Compose로 Wrapping한 UI 라이브러리 HTML 요소를 Kotlin DSL로 사용 가능 Kotlin/JS만 지원 Compose HTML ! Compose Multiplatform Compose HTML

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

Compose HTML 진입

Slide 30

Slide 30 text

Kotlin DSL 형태로 HTML 만드듯이 ? 개발

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

기본적인 css도 코틀린으로

Slide 33

Slide 33 text

미디어 쿼리도 코틀린으로

Slide 34

Slide 34 text

css selector 등 제공되며 없는 경우 property를 통해 직접 제어

Slide 35

Slide 35 text

Compose HTML 기반의 UI 프레임워크 다양한 편의성 및 기능 제공 Page Routing, Live Reloading, Server API 등 Modifier 등 기존 Compose와 유사한 느낌의 개발 가능 유사한 느낌만을 제공하는 것. 동일하지는 않음. Compose HTML Kobweb

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

Compose Multiplatform 기반의 UI 라이브러리 여러분들이 익숙하신 Jetpack Compose와 유사 Compose Web ⊆ Compose Multiplatform Compose Multiplatform ! Jetpack Compose Compose Web

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

Wasm 준비되면 CanvasBasedWindow를 통해 컴포즈 렌더링

Slide 40

Slide 40 text

Compose

Slide 41

Slide 41 text

Optional tag here Start Compose Web!

Slide 42

Slide 42 text

아래 KMP Wizard를 통해 간단하게 시작 가능 프로젝트 이름/ID 입력 후 멀티플랫폼 선택 및 다운로드 https://kmp.jetbrains.com/ Start Compose Web!

Slide 43

Slide 43 text

Jetpack Compose로 개발하는 것처럼 개발하시면 됩니다. 안드로이드 의존성이 걸린 라이브러리만 KMP로 대체 Start Compose Web!

Slide 44

Slide 44 text

감사합니다

Slide 45

Slide 45 text

이렇게 끝낼 수는 없으니… Google I/O Extended Incheon 사이트 만드는 과정 및 팁 안내 Start Compose Web! Compose Web으로 만든 I/O Extended 사이트

Slide 46

Slide 46 text

Compose Web으로 만든 I/O Extended 사이트

Slide 47

Slide 47 text

wasmJs 타겟으로 빌드 시 모바일 지원되지 않음 모바일 타겟을 희망하는 경우, JS로 변경 필요 Start Compose Web!

Slide 48

Slide 48 text

Target Before wasmJs wams 관련 Import 삭제 필요

Slide 49

Slide 49 text

Target After js

Slide 50

Slide 50 text

Experimental Error Before

Slide 51

Slide 51 text

Experimental Error After

Slide 52

Slide 52 text

Setup

Slide 53

Slide 53 text

Setup main.kt

Slide 54

Slide 54 text

Setup index.html

Slide 55

Slide 55 text

실행

Slide 56

Slide 56 text

Optional tag here Structure

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

JS 모듈 JS 웹 에서만 사용하는 모듈 jsBrowser 빌드 시 본 모듈이 빌드됨 진입점 main.kt 공통 모듈 Android, Desktop 등 공통 사용이 가능한 모듈

Slide 59

Slide 59 text

CMP 리소스 사용을 위한 패키지 이미지, 폰트 등 JS 웹 개발을 위한 패키지 모듈 분리 없이 간략화 개발 Web 개발에 필요한 로직만 심플하게 개발하였습니다. KMP에서 Clean Architecture, DI, 플랫폼 별 로직 분기 등 궁금하시다면 다음 발표 참고해주세요. KMP로 Android/iOS/Desktop 번역기 만들기

Slide 60

Slide 60 text

Optional tag here Resources

Slide 61

Slide 61 text

Font, Image, String 등 리소스 사용 시 기본 제공 없음 리소스 관련 라이브러리 필요 Moko Resources Compose Resources Resources

Slide 62

Slide 62 text

대표적인 CMP 리소스 라이브러리 Android, iOS, JVM, Native, Web 지원 Resources Moko Resources

Slide 63

Slide 63 text

JetBrains에서 제공하는 공식 라이브러리 기존 Jetpack Compose 방식과 유사 Resources Compose Resources

Slide 64

Slide 64 text

No content

Slide 65

Slide 65 text

이미지, 폰트 등 리소스 배치 Res.xxx로 리소스 접근

Slide 66

Slide 66 text

Optional tag here Navigation

Slide 67

Slide 67 text

org.jetbrains.androidx.navigation를 사용하면 Jetpack Compose와 유사한 환경으로 개발 가능 개인적으로 Voyager도 추천합니다. Navigation

Slide 68

Slide 68 text

No content

Slide 69

Slide 69 text

No content

Slide 70

Slide 70 text

Setup Navigation

Slide 71

Slide 71 text

Navigation 분기

Slide 72

Slide 72 text

No content

Slide 73

Slide 73 text

No content

Slide 74

Slide 74 text

Navigate

Slide 75

Slide 75 text

Jetpack Compose와 동일 대게 기능과 패키지명까지도 동일하지만, 일부 다른 부분은 있습니다.

Slide 76

Slide 76 text

Optional tag here 데스크탑/모바일 UI 맞추기

Slide 77

Slide 77 text

데스크탑과 모바일에 맞는 UI 개발 필요 피그마 디자인 기반으로 브라우저 크기에 따른 분기 처리 데스크탑/모바일 UI 맞추기

Slide 78

Slide 78 text

Desktop Figma Mobile Figma

Slide 79

Slide 79 text

Desktop Figma Mobile Figma

Slide 80

Slide 80 text

Desktop: 768px 이상 Mobile: 768px 미만 Browser width 조건에 따라 사이즈 조정 데스크탑/모바일 UI 맞추기

Slide 81

Slide 81 text

Window Resize 감지 JavaScript Kotlin 당연히 람다로 바로 넘길 수도 있음

Slide 82

Slide 82 text

Compose State

Slide 83

Slide 83 text

produceState로 실시간 window width 상태 반환

Slide 84

Slide 84 text

Compose State WARNING! 사용하는 모든 곳에서 Event Listener 중복 생성됨 Compose Web의 문제가 아닌 Compose 특징

Slide 85

Slide 85 text

Resize Listener 사용하는 모든 곳에서 중복 생성

Slide 86

Slide 86 text

LocalBrowserSizeManager

Slide 87

Slide 87 text

LocalBrowserSizeManager compoistionLocal 생성

Slide 88

Slide 88 text

LocalBrowserSizeManager browserSize 상태

Slide 89

Slide 89 text

CompositionLocalProvider

Slide 90

Slide 90 text

각 UI마다 browserWidth를 비교하여 두벌의 코드 작성하는 것은 비효율적 반응형/적응형 UI 개발을 간편화 하기 위한 Composable과 Extension Function 개발 데스크탑/모바일 UI 맞추기

Slide 91

Slide 91 text

Mobile이면 true, Desktop이면 false 반환

Slide 92

Slide 92 text

No content

Slide 93

Slide 93 text

desktop, mobile에 따라 content slot 분기 dp, sp를 확장하여 Desktop이면 원본 값을 Mobile이면 mobileSize 값 이용 desktop, mobile에 따른 T 반환

Slide 94

Slide 94 text

해당 Composable과 확장 함수로 간단하게 화면 대응하기 데스크탑/모바일 UI 맞추기

Slide 95

Slide 95 text

Mobile Figma 화면 사이즈에 맞는 n개의 세션 최대 2개의 세션 Desktop Figma 수평 여백 20 수직 여백 24 수평 여백 8 수직 여백 16

Slide 96

Slide 96 text

No content

Slide 97

Slide 97 text

desktop, mobile 분기

Slide 98

Slide 98 text

desktop 기준 UI

Slide 99

Slide 99 text

수평 여백 20dp 수직 여백 24dp width 240dp

Slide 100

Slide 100 text

mobile 기준 UI

Slide 101

Slide 101 text

수평 여백 8dp 수직 여백 16dp 최대 2개 weight 1f

Slide 102

Slide 102 text

극한으로 줄인다면?

Slide 103

Slide 103 text

No content

Slide 104

Slide 104 text

toResponsive 확장 함수를 통해 desktop 기준: 수평 여백 20dp, 수직 여백 24dp mobile 기준: 수평 여백 8dp, 수직 여백 16dp

Slide 105

Slide 105 text

T chooseResponsive 함수를 통해 desktop 기준: Modifier.width mobile 기준: Modifier.weight

Slide 106

Slide 106 text

Optional tag here API 연동 with Ktor

Slide 107

Slide 107 text

API 연동을 위해 Ktor 사용 Android, iOS, Desktop 등 KMP 지원 여기서는 단순한 타임테이블 시트이기에 csv로 split 하였음 JSON API의 경우, kotlinx.serialization을 통해 기존과 동일하게 사용 가능 API 연동 with Ktor

Slide 108

Slide 108 text

No content

Slide 109

Slide 109 text

No content

Slide 110

Slide 110 text

단순하게 produceState 사용하였음

Slide 111

Slide 111 text

Ktor를 통해 timetable API csv 를 bodyAsText로 string 받아옴

Slide 112

Slide 112 text

csv 형태의 String을 split하여 Session 데이터 클래스로 Mapping JSON API인 경우 kotlinx.serialization으로 변환 가능

Slide 113

Slide 113 text

만들어진 sessions 데이터를 바로 전 반응형/적응형 예시로 보여준 세션 UI에 넣어 사용

Slide 114

Slide 114 text

Optional tag here 이미지 로드 with Coil

Slide 115

Slide 115 text

Coil 3.x alpha부터 CMP 지원 Android, JVM, iOS, macOS, Javascript, and WASM. 이미지 로드 with Coil

Slide 116

Slide 116 text

No content

Slide 117

Slide 117 text

No content

Slide 118

Slide 118 text

이미지 URL

Slide 119

Slide 119 text

No content

Slide 120

Slide 120 text

No content

Slide 121

Slide 121 text

Optional tag here 배포하기

Slide 122

Slide 122 text

No content

Slide 123

Slide 123 text

Optional tag here TIP

Slide 124

Slide 124 text

Kotlin/Wasm은 아직 아니다 아직 모바일은 지원되지 않기에 JS를 추천드립니다… Kotlin/Wasm 사이트 접속 시 WebAssembly MIME 오류 최초 Wasm 빌드 후 접속 시 만날 수 있습니다. 서버에 맞게 htaccess 등으로 MIME를 허용 해주셔야 합니다. kotlinStoreYarnLock 빌드 오류 개발하다보면 여러 번 마주칠 오류 입니다. gradle/other kotlinUpgradeYarnLock 실행해주시면 됩니다. CMP 1.6.x 부터 모바일 스크롤 지원 그 이하 버전은 직접 스크롤을 구현하셔야 합니다… TIP

Slide 125

Slide 125 text

Continuous를 통해 나름 실시간 ? 반영 가능 Gradle run 옵션에 continuous 를 붙여주시면 됩니다. 안정성과 SEO가 중요하신가요? Compose HTML을 추천드립니다. 빠른 Pilot/MVP가 필요하신가요? Compose Web을 추천드립니다. 컴포즈 UI 코드 내 네이티브/비즈니스 로직을 완벽히 분리해두면 좋습니다. TIP

Slide 126

Slide 126 text

Optional tag here Compose Web 현실은…

Slide 127

Slide 127 text

No content

Slide 128

Slide 128 text

Flutter도 동일했습니다. Compose Web과 견줄 정도의 엄청나게 느린 퍼포먼스 웹으로 빌드는 할 수 있다. 정도의 보여주기식 퀄리티 하지만 2.0부터 달라졌습니다. 2.0부터 Web을 Stable로 지원하면서부터 달라졌습니다. 현재도 완벽하다고는 할 수 없지만 발전하고 있습니다. 폰트 로딩 전, Compose Web 동일하게 ㅁㅁ 폰트 깨짐 Google Earth도 Flutter를 사용합니다. 2023년 9월 29일, Google Earth에서 공식으로 발표하였습니다. 단일 Flutter UI 코드 베이스 iOS, Android, Web에서 사용합니다. Flutter도 그랬습니다. Compose Web도 발전할 수 있습니다.