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