Relay_및_Compose를_사용하여_완전한_앱_빌드하기.pdf

2023.08.26
Google I/O Extended Incheon

Transcript

1. Relay Relay 및 Compose를 사용하여 완전한 앱 빌드하기 Jetpack Compose Speaker Deck
2. 권혁준 - GDG Incheon Oranizer - Spidor Craft Android Developer
3. 1. Introduction 2. Basic Relay 3. Advanced Relay 4. Wrap up 목차 Index
4. Compose 및 Relay에 대한 소개 Introduction about Compose & Relay Section 01 Speaker Deck
5. 적은 수의 코드로 더 많은 작업을 하고 전체 버그 클래스를 방지할 수 있으므로 코드가 간단하며 유지 관리하기 쉽습니다. UI만 설명하면 나머지는 Compose에서 처리합니다. 앱 상태가 변경되면 UI가 자동으로 업데이트됩니다. 코드 감소 직관적 Jetpack Compose 기존의 모든 코드와 호환되므로 언제 어디서든 원하는 대로 사용할 수 있습니다. 실시간 미리보기 및 완전한 Android Studio 지원으로 빠르게 반복할 수 있습니다. Android 플랫폼 API에 직접 액세스하고 기본적으로 지원되는 Material Design, 다크 테마, 애니메이션 등을 사용해 멋진 앱을 만들 수 있습니다. 빠른 개발 과정 강력한 성능 Introduction
6. Introduction 실수를 발견 UI를 그려준다 확인한다 수정한다
7. 만약에 Figma에 그려진 UI를 화면에 바로 가져올 수 있다면? Introduction
8. Introduction
9. Android Release Version Introduction RC Alpha Beta Stable
10. Relay 플러그인을 사용하면 Figma에서 만들어진 UI를 Android의 Jetpack Compose 코드로 변환시켜줄 수 있습니다. Introduction Relay의 이점
11. “ 기존의 작업을 간략화할 수 있다. ” Introduction
12. 그렇다면 이제 어떠한 방식으로 Relay를 사용할 수 있는지 알아보겠습니다 🙂 Introduction
13. Relay를 활용하여 Android UI 빌드하기 [기초] Relay 설치 후 간단한 예제 만들어보기 Basic Relay Section 02 Slido
14. - Figma에서 - Relay plugin 설치하기 Relay CodeLab
15. Android Figma에 연결 - personal access token 발급 및 입력해주기 z Relay CodeLab
16. Android Tools > Relay Settings 에서 받아온 Token 값 입력! Relay CodeLab
17. 선택할 component 선택 > Plugins > Relay for Figma Basic Relay
19. Basic Relay
20. - Relay 현재 버전 : 3.08 - Android 사용 가능 버전 : 2021.2.1 Chipmunk 이상의 버전 Jetpack Compose 1.2 이상의 버전 Relay Basic Relay
21. Section title slides Groovy Kotlin 현재 Relay는 0.3.08 버전까지 나왔습니다.
22. Relay CodeLab
23. Relay Basic Relay
24. Relay CodeLab Figma URL 주소 입력!
25. 이후에 화면 확인 가능 -> create 누르기! Relay CodeLab
27. Update 하는법 (update UI Package) Relay CodeLab
28. Update 하는법 (update UI Package) Relay Basic Relay
29. Relay CodeLab Preview 가능해짐
30. “ 어?! 아직 안 되는데 ” Basic Relay
31. Section title slides
33. Section title slides
34. 그런데 어느날 UI를 수정해야 하는 상황이 발생했습니다 당연히 Android에서 수정을 하려고 하였지만 불가능.. 어떻게 해야 할까요? Relay Update Basic Relay
35. Figma 작업 완료 > File > Save to version history > 버전명 description 저장 Basic Relay
37. ui-packages > update all UI packages… Basic Relay
38. 간단한 컴포넌트를 그려주고, 피그마에서 수정해 준 후 수정해 준 결과를 안드로이드로 받아올 수 있게 되었습니다. Basic Relay
39. • 새로운 컴포넌트가 추가된 경우에는 import를 사용해야 합니다. • 기존의 컴포넌트가 변경될 때만 update 사용! 주의사항 Basic Relay
40. Relay를 활용하여 Android UI 빌드하기 [심화] 하나의 페이지 만들어보기 Advanced Relay Section 03 Slido
41. 코드랩 예제입니다. 저는 여기서 영어로 되어진 텍스트를 한국어로 수정해보려 합니당 Relay CodeLab
42. 목표 • 영어로 되어진 텍스트를 한국어로 수정 • 클릭 기능 추가 Advanced Relay
45. 기존의 코드를 보면 알 수 있듯이 Relay CodeLab
46. 기존의 코드를 보면 알 수 있듯이 Relay CodeLab
47. 기존의 코드를 보면 알 수 있듯이 Relay CodeLab
48. 기존의 코드를 보면 알 수 있듯이 Relay CodeLab
49. Section title slides
50. 데이터 형식에 맞춰 Data class 를 생성합니다.
51. data를 넣어줍니다.
52. 화면 완성! Relay Advanced Relay
53. • tap - handler • doubletap - handler • longpress-handler Advanced Relay
54. update를 받아오면 변화된 코드 확인 가능
56. Relay를 활용하여 Android UI 빌드하기 [심화] 스위치 / TextField / Style 적용 Next Level Section 3.5 Slido
57. 이제 스위치 기능 추가 (controller[wrapping]를 생성해야 하는 이유) 과정 보여주기 … 123 Relay CodeLab
58. 기본적으로 Relay로 생성된 컴포넌트는 stateless. 효과적으로 user interaction 및 상태 관리를 위해서는 Wrapping을 하는 것이 매우 좋습니다. Wrapping? Next Level
59. 데이터 형식에 맞춰 Data class 를 생성합니다.
60. 데이터 형식에 맞춰 Data class 를 생성합니다.
61. 이제 스위치 기능 추가 (controller[wrapping]를 생성해야 하는 이유) 과정 보여주기 … 123 Relay CodeLab
62. Figma에서 가져온 컴포넌트와 기존의 Android 컴포넌트 간에 제대로 인식을 못하는 상황일 발생할 수 있습니다. 이 때 Mapping을 통해 구분지어 줄 수 있습니다. Mapping? Next Level
63. ui-package에서 mapping을 원하는 파일 선택 > 마우스 우측 클릭 > Generate mapping file
64. Mapping 값 수정 TextField를 사용하는 것이 아닌 ReflectTextField 사용 Next Level
65. Style.json 파일을 통해 style을 지정해 줄 수 있습니다. Style? Next Level
66. Style.json 파일 생성 및 Mapping https://bit.ly/3PcqiyJ Next Level
67. CodeLab
68. Wrap up Section 04 Slido
69. Wrap up • 디자인 관련 실수가 발생할 확률이 줄어든다. • 생산성 상승 기대사항
70. • 수정을 위해서는 무조건 Figma에서 작업을 해야한다. • 아직 설정해주어야 할 것이 많다. (Mapping..) • Import 및 update를 할 때, 시간소요가 있다. 아쉬운 점 Wrap up
71. • Relay는 alpha 단계이다 • 아직 불편한 점은 많지만, 미래가 기대된다. 결론 Wrap up
72. QnA
73. 감사합니다 권혁준 GDG Incheon Organizer