Compose Web 개발하기

Google I/O Extended 2024 Incheon

Git: https://github.com/kisa002/google_io_extended-incheonsongdo

Transcript

1. Compose Web 개발하기 Proprietary Confidential 유광무 GDG Songdo Organizer KUG Seoul Organizer GDSC TUK Lead
2. 유광무 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
3. 웹 그리는 방식에 대해 이야기 Compose HTML/Web에 간단하게 알아보기 Google I/O Extended Incheon 사이트 만드는 과정 일부 소개 몇 가지 팁 제공 이번 발표에서는 Compose Web으로 만든 I/O Extended 사이트
4. Optional tag here 웹 그리기
5. HTML, CSS, JS 삼종세트로 구성된 기본적인 웹 개발 React, Vue, Angular 등 다양한 프레임워크로도 개발 웹 그리기 삼종세트
7. 미세한, 세밀한 2D 그래픽의 Canvas 여러 태그 없이 Canvas 하나로 모든 것을 표현 가능 웹 그리기 Canvas
9. 3D 그래픽 렌더링을 위한 API 복잡하거나 높은 그래픽 성능이 요구되는 경우 사용 기존 Canvas 영역에서 렌더링 웹 그리기 WebGL
11. 4.5배 확대 삼종세트 Canvas WebGL
12. WebGL은 웹 브라우저 내 3D 그래픽 렌더링을 위한 표준 크로스플랫폼 엔진에서 Web 배포 시 WebGL로 렌더링 WebGL의 사용
13. WebGL은 웹 브라우저 내 3D 그래픽 렌더링을 위한 표준 크로스플랫폼 엔진에서 Web 배포 시 WebGL로 렌더링 WebGL의 사용 즉, Desktop/Mobile 프로젝트를 그대로. 바로. 웹으로. 가능은? 합니다.
14. WebGL로만 구성 시 미흡한 SEO로 인해 부정적인 검색 결과 Unity, Flutter 등으로 배포 시 느린 퍼포먼스 브라우저 크기에 따른 반응형, 적응형 고려 필요 즉 다양한 해상도 고려가 되지 않았다면, 기존 UI 코드 그대로 사용은 사실상 힘듦 결국 SEO가 중요하거나 해상도 대응이 안됐다면 부적절 WebGL의 사용: 단점
15. 하지만 Compose는 필요한 상황에 따라 유연하게 채택 가능 SEO가 중요하다면 HTML TAG 기반으로 빠른 MVP가 필요하다면 WebGL 기반으로 KMP, CMP. 상황에 맞는 자유로운 선택 물론 해상도 대응을 위한 작업 필요 Compose Web의 경우 플랫폼 의존이 있는 경우 해체 필요 Compose HTML / Web
16. Optional tag here Kotlin/Compose Multiplatform
17. KMP/CMP 관련 설명 생략 관련 발표에서 항상 넣어왔기에 생략하겠습니다. 너무 중복… 다음 QR 코드 스캔 통해 발표 자료 확인 가능 Kotlin/Compose Multiplatform
19. Optional tag here Kotlin/ Web
20. Kotlin으로 웹 개발 시 크게 2가지로 나뉨 Kotlin/JS Kotlin/Wasm Kotlin/ Web
21. Kotlin 코드를 JavaScript로 컴파일 NPM과 통합 개발 가능 Kotlin/JS
22. Kotlin 코드를 WebAssembly Wasm 로 컴파일 Kotlin/JS 보다 뛰어난 성능, 최대 2배 이상의 퍼포먼스 Kotlin/Wasm
25. Optional tag here Compose HTML/Web
26. Compose HTML/Web Compose HTML Compose Web Compose로 Web 개발 시 크게 2가지로 나뉨 Compose HTML Compose Web
27. HTML를 Compose로 Wrapping한 UI 라이브러리 HTML 요소를 Kotlin DSL로 사용 가능 Kotlin/JS만 지원 Compose HTML ! Compose Multiplatform Compose HTML
29. Compose HTML 진입
30. Kotlin DSL 형태로 HTML 만드듯이 ? 개발
32. 기본적인 css도 코틀린으로
33. 미디어 쿼리도 코틀린으로
34. css selector 등 제공되며 없는 경우 property를 통해 직접 제어
35. Compose HTML 기반의 UI 프레임워크 다양한 편의성 및 기능 제공 Page Routing, Live Reloading, Server API 등 Modifier 등 기존 Compose와 유사한 느낌의 개발 가능 유사한 느낌만을 제공하는 것. 동일하지는 않음. Compose HTML Kobweb
37. Compose Multiplatform 기반의 UI 라이브러리 여러분들이 익숙하신 Jetpack Compose와 유사 Compose Web ⊆ Compose Multiplatform Compose Multiplatform ! Jetpack Compose Compose Web
39. Wasm 준비되면 CanvasBasedWindow를 통해 컴포즈 렌더링
40. Compose
41. Optional tag here Start Compose Web!
42. 아래 KMP Wizard를 통해 간단하게 시작 가능 프로젝트 이름/ID 입력 후 멀티플랫폼 선택 및 다운로드 https://kmp.jetbrains.com/ Start Compose Web!
43. Jetpack Compose로 개발하는 것처럼 개발하시면 됩니다. 안드로이드 의존성이 걸린 라이브러리만 KMP로 대체 Start Compose Web!
44. 감사합니다
45. 이렇게 끝낼 수는 없으니… Google I/O Extended Incheon 사이트 만드는 과정 및 팁 안내 Start Compose Web! Compose Web으로 만든 I/O Extended 사이트
46. Compose Web으로 만든 I/O Extended 사이트
47. wasmJs 타겟으로 빌드 시 모바일 지원되지 않음 모바일 타겟을 희망하는 경우, JS로 변경 필요 Start Compose Web!
48. Target Before wasmJs wams 관련 Import 삭제 필요
49. Target After js
50. Experimental Error Before
51. Experimental Error After
52. Setup
53. Setup main.kt
54. Setup index.html
55. 실행
56. Optional tag here Structure
58. JS 모듈 JS 웹 에서만 사용하는 모듈 jsBrowser 빌드 시 본 모듈이 빌드됨 진입점 main.kt 공통 모듈 Android, Desktop 등 공통 사용이 가능한 모듈
59. CMP 리소스 사용을 위한 패키지 이미지, 폰트 등 JS 웹 개발을 위한 패키지 모듈 분리 없이 간략화 개발 Web 개발에 필요한 로직만 심플하게 개발하였습니다. KMP에서 Clean Architecture, DI, 플랫폼 별 로직 분기 등 궁금하시다면 다음 발표 참고해주세요. KMP로 Android/iOS/Desktop 번역기 만들기
60. Optional tag here Resources
61. Font, Image, String 등 리소스 사용 시 기본 제공 없음 리소스 관련 라이브러리 필요 Moko Resources Compose Resources Resources
62. 대표적인 CMP 리소스 라이브러리 Android, iOS, JVM, Native, Web 지원 Resources Moko Resources
63. JetBrains에서 제공하는 공식 라이브러리 기존 Jetpack Compose 방식과 유사 Resources Compose Resources
65. 이미지, 폰트 등 리소스 배치 Res.xxx로 리소스 접근
66. Optional tag here Navigation
67. org.jetbrains.androidx.navigation를 사용하면 Jetpack Compose와 유사한 환경으로 개발 가능 개인적으로 Voyager도 추천합니다. Navigation
70. Setup Navigation
71. Navigation 분기
74. Navigate
75. Jetpack Compose와 동일 대게 기능과 패키지명까지도 동일하지만, 일부 다른 부분은 있습니다.
76. Optional tag here 데스크탑/모바일 UI 맞추기
77. 데스크탑과 모바일에 맞는 UI 개발 필요 피그마 디자인 기반으로 브라우저 크기에 따른 분기 처리 데스크탑/모바일 UI 맞추기
78. Desktop Figma Mobile Figma
79. Desktop Figma Mobile Figma
80. Desktop: 768px 이상 Mobile: 768px 미만 Browser width 조건에 따라 사이즈 조정 데스크탑/모바일 UI 맞추기
81. Window Resize 감지 JavaScript Kotlin 당연히 람다로 바로 넘길 수도 있음
82. Compose State
83. produceState로 실시간 window width 상태 반환
84. Compose State WARNING! 사용하는 모든 곳에서 Event Listener 중복 생성됨 Compose Web의 문제가 아닌 Compose 특징
85. Resize Listener 사용하는 모든 곳에서 중복 생성
86. LocalBrowserSizeManager
87. LocalBrowserSizeManager compoistionLocal 생성
88. LocalBrowserSizeManager browserSize 상태
89. CompositionLocalProvider
90. 각 UI마다 browserWidth를 비교하여 두벌의 코드 작성하는 것은 비효율적 반응형/적응형 UI 개발을 간편화 하기 위한 Composable과 Extension Function 개발 데스크탑/모바일 UI 맞추기
91. Mobile이면 true, Desktop이면 false 반환
93. desktop, mobile에 따라 content slot 분기 dp, sp를 확장하여 Desktop이면 원본 값을 Mobile이면 mobileSize 값 이용 desktop, mobile에 따른 T 반환
94. 해당 Composable과 확장 함수로 간단하게 화면 대응하기 데스크탑/모바일 UI 맞추기
95. Mobile Figma 화면 사이즈에 맞는 n개의 세션 최대 2개의 세션 Desktop Figma 수평 여백 20 수직 여백 24 수평 여백 8 수직 여백 16
97. desktop, mobile 분기
98. desktop 기준 UI
99. 수평 여백 20dp 수직 여백 24dp width 240dp
100. mobile 기준 UI
101. 수평 여백 8dp 수직 여백 16dp 최대 2개 weight 1f
102. 극한으로 줄인다면?
104. toResponsive 확장 함수를 통해 desktop 기준: 수평 여백 20dp, 수직 여백 24dp mobile 기준: 수평 여백 8dp, 수직 여백 16dp
105. T chooseResponsive 함수를 통해 desktop 기준: Modifier.width mobile 기준: Modifier.weight
106. Optional tag here API 연동 with Ktor
107. API 연동을 위해 Ktor 사용 Android, iOS, Desktop 등 KMP 지원 여기서는 단순한 타임테이블 시트이기에 csv로 split 하였음 JSON API의 경우, kotlinx.serialization을 통해 기존과 동일하게 사용 가능 API 연동 with Ktor
110. 단순하게 produceState 사용하였음
111. Ktor를 통해 timetable API csv 를 bodyAsText로 string 받아옴
112. csv 형태의 String을 split하여 Session 데이터 클래스로 Mapping JSON API인 경우 kotlinx.serialization으로 변환 가능
113. 만들어진 sessions 데이터를 바로 전 반응형/적응형 예시로 보여준 세션 UI에 넣어 사용
114. Optional tag here 이미지 로드 with Coil
115. Coil 3.x alpha부터 CMP 지원 Android, JVM, iOS, macOS, Javascript, and WASM. 이미지 로드 with Coil
118. 이미지 URL
121. Optional tag here 배포하기
123. Optional tag here TIP
124. Kotlin/Wasm은 아직 아니다 아직 모바일은 지원되지 않기에 JS를 추천드립니다… Kotlin/Wasm 사이트 접속 시 WebAssembly MIME 오류 최초 Wasm 빌드 후 접속 시 만날 수 있습니다. 서버에 맞게 htaccess 등으로 MIME를 허용 해주셔야 합니다. kotlinStoreYarnLock 빌드 오류 개발하다보면 여러 번 마주칠 오류 입니다. gradle/other kotlinUpgradeYarnLock 실행해주시면 됩니다. CMP 1.6.x 부터 모바일 스크롤 지원 그 이하 버전은 직접 스크롤을 구현하셔야 합니다… TIP
125. Continuous를 통해 나름 실시간 ? 반영 가능 Gradle run 옵션에 continuous 를 붙여주시면 됩니다. 안정성과 SEO가 중요하신가요? Compose HTML을 추천드립니다. 빠른 Pilot/MVP가 필요하신가요? Compose Web을 추천드립니다. 컴포즈 UI 코드 내 네이티브/비즈니스 로직을 완벽히 분리해두면 좋습니다. TIP
126. Optional tag here Compose Web 현실은…
128. 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도 발전할 수 있습니다.
130. Thank You 유광무 GDG Songdo Organizer