WearOS 101

- HelloWorld.2023에서 발표한 자료입니다.
- 2023년 3월 18일

Transcript

1. Wear OS 101 권혁준 GDG Incheon Org 가볍게 알아보는 wear os
2. 권혁준 Android Developer GDG Incheon Organizer 스파이더 크래프트
3. 시작하기에 앞서 ❏ 이 세션은 안드로이드 기반 wear os에 대해 발표합니다. ❏ UI 관련 코드는 Jetpack Compose로 작성되어 있습니다.
4. 목차 1. wear os 소개 2. 일반 UI와 wear os UI의 차이점 소개 3. Composable Component 4. 간단하게 wear os 만들어보기
5. wear os 소개
6. wear os 소개 현재 워치를 사용하고 계신 분 손 들어주실 수 있으신가요?
7. wear os 소개 • 업무 • 운동 • 연락 워치를 사용함으로써 편리함이 증가한다는 장점이 있습니다! 이외에도 여러가지 기능들에 대해 핸드폰이 아닌 워치를 통해 해결 가능
8. 일반 UI 스마트폰과 워치의 차이점 소개
9. 일반 UI와 wear os UI의 차이점 소개 그렇다면 일반 UI와 wear os의 가장 큰 차이점은 무엇일까요?
10. 일반 UI와 wear os UI의 차이점 소개 바로 UI 입니다. 기존의 핸드폰을 통해 보는 UI는 상대적으로 큰 화면을 갖지만, 워치를 통해 보는 UI는 훨씬 작은 크기를 갖습니다. 또한 위치는 스마트폰처럼 형태가 고정화된 사각형의 모양을 갖지 않습니다. 어떤 워치는 사각형의 모양을 갖기도 하지만, 어떤 워치는 원형의 모양을 갖기도 합니다.
11. 일반 UI와 wear os UI의 차이점 소개 그렇기에 핸드폰의 UI와는 차이점을 갖게 됩니다. - 중요한 작업을 위한 디자인 : 완전한 App 환경보다는 한두가지 작업에만 집중! - 손목에 최적화 : 몇 초 내로 워치에서 작업을 완료할 수 있도록 설계 - 항상 관련성 있음 : TPO 활용해서 상황에 맞게 앱 콘텐츠 업데이트 필요 - 연결이 느리거나 오프라인 사용도 고려하여 디자인
12. 일반 UI와 wear os UI의 차이점 소개
13. 일반 UI와 wear os UI의 차이점 소개
14. wear os Composable Component
15. Component - Button 핸드폰과 워치 UI는 디자인부터 다른 것을 확인할 수 있습니다. 핸드폰은 네모모양의 디자인이지만, 워치는 둥근 모양의 버튼 디자인을 확인할 수 있습니다
16. Component - Button
17. Component - Button - 내부 구조
18. Component - Card 카드 component를 사용함으로써 모서리의 둥근 정도, 그라데이션 배경을 넣어줄 수 있습니다. 독립형 이미지를 추가해 줄 수도 있습니다.
19. Component - Card
20. Composable - Chip 칩에는 텍스트 라벨 최대 2개와 선택적 아이콘이 포함될 수 있습니다.
21. Composable - Chip
22. Composable - ScalingLazyColumn Compose에서 사용되는 LazyColumn의 확장 크기 조정과 투명도를 제공 => 화면 중앙 부분에 집중할 수 있음
23. Composable - ScalingLazyColumn
24. Composable - ScalingLazyColumn
25. Composable - Scaffold wear os는 화면을 보여주는 것 이외에도 다양한 기능을 수행할 수 있습니다. - 시간 알려주기 - list 보여주는 정도 조정
26. Composable - Scaffold - TimeText : 최상단에 시간 - Vignette : 스크롤 가능한 화면이 표시될 경우 화면의 상단 & 하단 흐리게 처리해줌 - PostitionIndicator : 화면 오른쪽에 존재하며, 스크롤 정도를 알려줌
27. Composable - Scaffold
28. 간단하게 wear os 만들어보기
29. 간단하게 wear os 만들어보기
30. 간단하게 wear os 만들어보기
31. 간단하게 wear os 만들어보기
32. 간단하게 wear os 만들어보기
33. 간단하게 wear os 만들어보기
34. 간단하게 wear os 만들어보기
35. horologist Media 및 Time/Date를 비롯하여 다양한 컴포넌트를 좀 더 편리하게 그려줄 수 있습니다 :)
36. 버전 관련 문제 발생 https://developer.android.com/jetpack/androidx/releases/compose- kotlin?hl=ko
37. 참고 자료 깃허브 주소 https://github.com/DavidKwon7/WatchExample 안드로이드 공식 문서 https://developer.android.com/training/wearables/compose/buttons https://developer.android.com/codelabs/compose-for-wear-os?hl=ko#0 Horologist https://github.com/DavidKwon7/WatchExample
38. QNA
39. 감사합니다