Secret-Of-SwiftUI / SSDC22

🀑 응~ 질렀? deprecated ν•˜λ©΄ κ·Έλ§Œμ΄μ•Ό~
9 stars 0 forks source link

Build a Watch productivity app #31

Open hyun99999 opened 2 years ago

hyun99999 commented 2 years ago

Your wrist has never been more productive. Discover how you can use SwiftUI and system features to build a great productivity app for Apple Watch. We'll show you how you can design great work experiences for the wrist, and explore how you can get text input, display a basic chart, and share content with friends.

hyun99999 commented 2 years ago

Build a productivity app for Apple Watch - WWDC22 - Videos - Apple Developer

λ³Έ 글은 WWDC λ₯Ό 보고, λ²ˆμ—­ 및 μš”μ•½ 그리고 μ‹€ν–‰ν•΄λ³΄λŠ” μŠ€ν„°λ”” ν”„λ‘œμ νŠΈμ˜ μΌν™˜μž…λ‹ˆλ‹€.

1

πŸ‘‰Β μ„Έμ…˜μ—μ„œ μƒˆλ‘­κ²Œ μ†Œκ°œλœ λ‚΄μš©

2

1️⃣ Create a Watch app

3

WatchOS νƒ­μ—μ„œ App μ„ νƒν•˜κ³  Next λ₯Ό ν΄λ¦­ν•˜μ—¬ λ§Œλ“€ 수 μžˆμŠ΅λ‹ˆλ‹€.

4

μ΄λ•Œ Watch-only μ•± 을 λ§Œλ“€μ§€ iOS 앱이 μžˆλŠ” Watch 앱을 λ§Œλ“€μ§€μ— λŒ€ν•œ μ„ νƒμ§€λŠ” 맀우 μ€‘μš”ν•©λ‹ˆλ‹€.

πŸ‘‰Β Great Watch apps

5

πŸ‘‰Β iOS Companion apps

6

watch 앱을 μœ„ν•œ companon app 이 ν•„μš”ν•œ μ΄μœ λŠ” μ—¬λŸ¬κ°€μ§€κ°€ μžˆμŠ΅λ‹ˆλ‹€. 예λ₯Ό λ“€μ–΄ ν”ΌνŠΈλ‹ˆμŠ€ μ•±μ²˜λŸΌ μ• ν”Œ μ›ŒμΉ˜μ—μ„œ μΊ‘μ²˜ν•œ λ°μ΄ν„°μ˜ κ³Όκ±° 기둝, 좔세에 λŒ€ν•œ μžμ„Έν•œ 뢄석을 μ œκ³΅ν•˜λŠ” 것이 μžˆμŠ΅λ‹ˆλ‹€.

μš°λ¦¬κ°€ λ§Œλ“€ 앱은 μ§‘μ€‘ν•΄μ•Όν•˜λŠ” κΈ°λŠ₯κ³Ό λΉ λ₯Έ μƒν˜Έ μž‘μš©, μ œν•œλœ 데이터λ₯Ό 가지기 λ•Œλ¬Έμ— Watch-only app 을 λ§Œλ“€ κ²ƒμž…λ‹ˆλ‹€.

μƒμ„±λœ target 에 λŒ€ν•΄μ„œ 잠깐 이야기λ₯Ό ν•΄λ³΄κ² μŠ΅λ‹ˆλ‹€.

7

κ³Όκ±°μ—λŠ” watch 앱을 λΉŒλ“œν–ˆλ‹€λ©΄ ν”„λ‘œμ νŠΈμ—λŠ” watch κ΄€λ ¨ target 이 두 κ°œκ°€ μƒκΉλ‹ˆλ‹€.(Test λ₯Ό ν¬ν•¨ν•˜λŠ” κ²½μš°μ—λŠ” μΆ”κ°€λ‘œ μƒκΉλ‹ˆλ‹€.) μ•„λž˜μ™€ κ°™μ΄μš”.

8

μ’€ 더 μžμ„Έν•˜κ²Œ μ‚΄νŽ΄λ³΄κ² μŠ΅λ‹ˆλ‹€.

9

좜처:

Apple Developer Documentation

storyboard, assets, lacalization-related files κ°€ μžˆλŠ” WatchKit App target κ³Ό μ•± μ½”λ“œκ°€ ν¬ν•¨λœ WatchKit Extension 이 μ‘΄μž¬ν•©λ‹ˆλ‹€.

μ΄λŸ¬ν•œ 이쀑 νƒ€κ²Ÿμ€ watchOS μ΄ˆκΈ°λΆ€ν„° μœ μ§€λœ κ²ƒμž…λ‹ˆλ‹€. 이젠 μ—¬λŸ¬ Watch target κ°€ μžˆμ„ μ΄μœ κ°€ μ—†μŠ΅λ‹ˆλ‹€. Xcode 14 λΆ€ν„° μƒˆ Watch 앱은 단일 Watch target 만 κ°€μ§‘λ‹ˆλ‹€.

10

code, assets, localizations, Siri Intent, Widget Extensions κΉŒμ§€ Watch App 에 κ΄€λ ¨λœ λͺ¨λ“  것이 ν•˜λ‚˜μ˜ νƒ€κ²Ÿμ— μ†ν•˜κ²Œλ©λ‹ˆλ‹€.

11

쒋은 μ†Œμ‹μ€ single-target Watch app 이 watchOS 7 μ—μ„œ μ§€μ›λ©λ‹ˆλ‹€. 이λ₯Ό 톡해 μ΅œμ‹  watchOS κ°€ μ•„λ‹Œ 고객을 계속 μ§€μ›ν•˜λ©΄μ„œ ν”„λ‘œμ νŠΈ ꡬ쑰λ₯Ό λ‹¨μˆœν™”ν•˜κ³ , ν˜Όλž€κ³Ό 쀑볡을 쀄일 수 μžˆμŠ΅λ‹ˆλ‹€.

λ˜ν•œ, WatchKit Extension target 이 μžˆλŠ” κΈ°μ‘΄ μ•±μ˜ 경우 계속 μž‘λ™ν•˜λ©° Xcode λ₯Ό μ‚¬μš©ν•˜μ—¬ 앱을 μ—…λ°μ΄νŠΈν•˜κ³  μ•± μŠ€ν† μ–΄μ— 올릴 수 μžˆμŠ΅λ‹ˆλ‹€.

이미 SwiftUI life cycle 을 μ‚¬μš©ν•˜λŠ” Watch 앱이라면 Xcode 14 migration tool 둜 μ‰½κ²Œ μ „ν™˜ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

πŸ‘‰Β SwiftUI life cycle?

μ΄μ „μ—λŠ” λ‹€μŒκ³Ό 같이 Life Cycle 을 선택할 수 μžˆμ—ˆμŠ΅λ‹ˆλ‹€. Xcode 14 λΆ€ν„°λŠ” λͺ¨λ‘ SwiftUI 둜 μ„€μ •λ˜μ–΄μ§‘λ‹ˆλ‹€.

좜처 :

Apple Developer Documentation - creating a watchOS app


13

target 선택 > Editor > Validate Settings… μ„ νƒν•©λ‹ˆλ‹€. deployment target 이 watchOS 7 이상이라면 target collapsing option(νƒ€κ²Ÿ μΆ•μ†Œ μ˜΅μ…˜)이 μ œκ³΅λ©λ‹ˆλ‹€.

πŸ‘‰Β Add an app icon

14 15 16 17

2️⃣ Add a simple list

ν•  일 λͺ©λ‘μ„ μΆ”κ°€ν•΄μ„œ 앱에 λͺ‡ 가지 κΈ°λŠ₯을 μΆ”κ°€ν•΄ λ³΄κ² μŠ΅λ‹ˆλ‹€.

ν•  일 λͺ©λ‘μ— λŒ€ν•œ 데이터 λͺ¨λΈ μƒμ„±ν•©λ‹ˆλ‹€.

18

그런 λ‹€μŒ 데이터λ₯Ό μ €μž₯ν•˜κ³  ν•­λͺ©μ˜ 배열을 κ²Œμ‹œν•˜λŠ” κ°„λ‹¨ν•œ λͺ¨λΈμ„ λ§Œλ“­λ‹ˆλ‹€.

19

λ§ˆμ§€λ§‰μœΌλ‘œ, λ·°κ°€ λͺ¨λΈμ— μ•‘μ„ΈμŠ€ ν•  수 μžˆλ„λ‘ λͺ¨λΈμ„ environment object 둜 μΆ”κ°€ν•©λ‹ˆλ‹€.

20

이제 model 둜 List λ₯Ό λ§Œλ“­λ‹ˆλ‹€. μ§€κΈˆμ€ 빈 λͺ©λ‘μ΄ ν‘œμ‹œλ©λ‹ˆλ‹€. 이에 λŒ€ν•΄ μ‚¬λžŒλ“€μ΄ μΆ”κ°€ν•  수 μžˆλŠ” 방법을 μ œκ³΅ν•΄μ•Ό ν•©λ‹ˆλ‹€.

21

3️⃣ Enable list updates

μŠ€ν¬λ¦°μƒ· 2022-11-11 μ˜€μ „ 3 42 37

λ‹€μŒκ³Ό 같이 κ°„λ‹¨ν•œ λ¬Έμžμ—΄μ„ 가진 TextFieldLink λ₯Ό λ§Œλ“€κ±°λ‚˜

23

Label 둜 더 κ°œμ„±μžˆκ²Œ λ§Œλ“€ 수 μžˆμŠ΅λ‹ˆλ‹€.

24

view modifier 둜 λ²„νŠΌ λͺ¨μ–‘을 λ°”κΏ€ 수 μžˆμŠ΅λ‹ˆλ‹€. foregroundColor λ‚˜ foregroundStyle, buttonStyle 등이 μžˆμŠ΅λ‹ˆλ‹€.

25 26

TextFieldLink 의 μŠ€νƒ€μΌκ³Ό λ™μž‘μ„ μΊ‘μŠν™”ν•˜κΈ° μœ„ν•΄ AddItemLink λ·°λ₯Ό μƒμ„±ν•˜κ² μŠ΅λ‹ˆλ‹€.

27

πŸ§‘β€πŸ­Β : 이제 TextFieldLink λ₯Ό μΆ”κ°€ν•˜κΈ°λ‘œ ν•˜μ˜€μœΌλ‹ˆ μœ„μΉ˜μ— λŒ€ν•΄μ„œ μƒκ°ν•΄λ΄…μ‹œλ‹€.

Watch μ•±μ˜ λͺ©λ‘μ— μž‘μ—…μ„ μΆ”κ°€ν•  λ•ŒλŠ” λͺ‡ 가지 μ˜΅μ…˜μžˆμŠ΅λ‹ˆλ‹€.

28 29

πŸš¨Β κ·ΈλŸ¬λ‚˜, λͺ©λ‘μ΄ κΈΈ κ²ƒμœΌλ‘œ μ˜ˆμŒλ˜λŠ” κ²½μš°μ—λŠ” λͺ©λ‘μ˜ λκΉŒμ§€ 계속 μŠ€ν¬λ‘€ν•΄μ•Ό ν•©λ‹ˆλ‹€.

30

ToolbarItem 을 μΆ”κ°€ν•˜λ €λ©΄ List 에 toolbar modifier λ₯Ό λ„£κ³ , action view λ₯Ό μ½˜ν…μΈ λ‘œ μ‚¬μš©ν•˜μ„Έμš”.(예λ₯Ό λ“€μ–΄, μœ„μ—μ„œ λ§Œλ“  AddItemLink)

31

1%84%92%E1%85%AE_4.08.53.png)

그러면 μžλ™μœΌλ‘œ 단일 toolbar item 이 μœ„μΉ˜ν•©λ‹ˆλ‹€.

πŸ§‘β€πŸ­Β : μ €λŠ” ν•  일 λͺ©λ‘μ„ 짧게 μ“°λ €κ³  ν•˜λŠ”λ° κ²°κ΅­μ—λŠ” κ·Έλ ‡κ²Œ μ•ˆλ˜λ”λΌκ΅¬μš”! κ·Έλž˜μ„œ ToolbarItem 에 TextFieldLink λ₯Ό λ„£μ–΄μ„œ μ‰½κ²Œ μ•‘μ„ΈμŠ€ν•  수 있게 ν•˜κ² μŠ΅λ‹ˆλ‹€.

λ‹€μŒκ³Ό 같이 κ²°κ³Όλ₯Ό 확인할 수 μžˆμŠ΅λ‹ˆλ‹€. environmentObject λŠ” λΆ€λͺ¨ ν˜Ήμ€ 쑰상 λ·°μ—μ„œ μ œκ³΅ν•˜λŠ” observable object 이기 λ•Œλ¬Έμ— ItemListModel 을 μ‚¬μš©ν•  수 μžˆμ—ˆμŠ΅λ‹ˆλ‹€.

μŠ€ν¬λ¦°μƒ· 2022-11-11 μ˜€μ „ 3 43 19

4️⃣ App navigation structure

πŸ§‘β€πŸ­Β : μ„€λͺ…λ§Œ μžˆλŠ” 리슀트λ₯Ό λ§Œλ“œλŠ” 것은 κ°„λ‹¨ν•˜μ§€λ§Œ 그닀지 μœ μš©ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€. ν•­λͺ©μ„ μ™„λ£Œλ‘œ ν‘œμ‹œν•  수 있고, μš°μ„  μˆœμœ„λ₯Ό μ„€μ •ν•˜λŠ” 방법도 ν•„μš”ν•  수 μžˆμŠ΅λ‹ˆλ‹€. 이λ₯Ό μœ„ν•œ 상세 λ·°λ₯Ό μΆ”κ°€ν•΄λ³΄κ² μŠ΅λ‹ˆλ‹€.

πŸ‘‰Β Watch 의 SwiftUI μ—μ„œ navigation structure options

33 34

μ˜ˆμ‹œ) page-based navigation 의 κ°€μž₯ 쒋은 μ˜ˆλŠ” Workout μ•±μ˜ μš΄λ™ 쀑 λ·°μž…λ‹ˆλ‹€. μŠ€μ™€μ΄ν”„ν•˜λ©° μš΄λ™ μ œμ–΄, μ§€ν‘œ, μž¬μƒ μ œμ–΄λ₯Ό μ‰½κ²Œ μ „ν™˜ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

35 36 37

μ˜ˆμ‹œ) mail 은 hierarchical style 둜 λ©”μ‹œμ§€μ˜ λͺ©λ‘μ„ ν‘œμ‹œν•˜κ³  각 λ©”μ‹œμ§€ λ˜λŠ” μŠ€λ ˆλ“œλ₯Ό detail view 둜 ν‘œμ‹œν•©λ‹ˆλ‹€.

38

λ©”μ‹œμ§€ μ„ΈλΆ€ μ •λ³΄μ—μ„œ μˆ˜ν–‰ν•  수 μžˆλŠ” μž‘μ—…μ΄ μžˆμ§€λ§Œ λͺ©λ‘μœΌλ‘œ λŒμ•„κ°€κΈ° 전에 μˆ˜ν–‰ν•΄μ•Όλ§Œ ν•˜λŠ” μž‘μ—…μ€ μ—†μŠ΅λ‹ˆλ‹€.

39

λͺ©λ‘μœΌλ‘œ λŒμ•„κ°€μ„œ New Message λ₯Ό νƒ­ν•˜λ©΄

40

mail 은 modal sheet λ₯Ό μ‚¬μš©ν•΄μ„œ New Message λ·°λ₯Ό ν‘œμ‹œν•©λ‹ˆλ‹€.

41

SwiftUI 의 NavigationStack 에 λŒ€ν•œ λ‚΄μš©μ„ ν¬ν•¨ν•˜μ—¬ programmatic navigation 에 λŒ€ν•΄ μžμ„Ένžˆ μ•Œμ•„λ³΄λ €λ©΄ SwiftUi cookbook for navigation μ„Έμ…˜μ„ ν™•μΈν•˜μ„Έμš”.

42

πŸ‘‰Β μ΄μ œ λ§Œλ“€μ–΄λ΄…μ‹œλ‹€!

λͺ¨λ‹¬ μ‹œνŠΈλ₯Ό ν‘œμ‹œν•˜λ €λ©΄ sheet presentation state λ₯Ό μ œμ–΄ν•˜λŠ” ν”„λ‘œνΌν‹°κ°€ ν•„μš”ν•©λ‹ˆλ‹€.

43

toolbar λ₯Ό μΆ”κ°€ν•˜κΈ° μœ„ν•΄μ„œ μ•„λž˜μ™€ 같이 μž‘μ„±ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

confirmationAction κ³Ό cancellationAction, destructiveAction 등을 μ‚¬μš©ν•˜μ—¬ toolbar item 의 μœ„μΉ˜λ₯Ό μ„€μ •ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

44

μš°λ¦¬λŠ” edit item 을 ν•˜κ³  μžˆμ—ˆμœΌλ―€λ‘œ detail view μ—μ„œ modal sheet λ₯Ό μ‚¬μš©ν•  κ²ƒμž…λ‹ˆλ‹€.(μž‘μ—…μ„ μ™„λ£Œν•˜κ³  done 을 νƒ­ν•˜κΈ° μ „κΉŒμ§€ ν•œ μž‘μ—…μ— 집쀑할 것이기 λ•Œλ¬Έμž…λ‹ˆλ‹€.)

πŸ‘‰Β update list item struct

μ˜ˆμƒ μž‘μ—…, 생선 λ‚ μ§œ 및 μ™„λ£Œ λ‚ μ§œλ₯Ό μ €μž₯ν•˜λŠ” μƒˆλ‘œμš΄ ν”„λ‘œνΌν‹°κ°€ μƒκ²ΌμŠ΅λ‹ˆλ‹€.

45

μ΄λŸ¬ν•œ 세뢀정보λ₯Ό 보고 νŽΈμ§‘ν•  수 μžˆλŠ” 방법을 μ œκ³΅ν•΄λ³΄κ² μŠ΅λ‹ˆλ‹€.

μ„€λͺ…을 νŽΈμ§‘ν•˜λŠ” TextField 와 μž‘μ—… μ™„λ£Œ μ—¬λΆ€λ₯Ό ν‘œμ‹œν•˜λŠ” Toggle 이 μžˆλŠ” 상세 λ·°λ₯Ό λ§Œλ“­λ‹ˆλ‹€.

46

μ˜ˆμƒ μž‘μ—…λŸ‰μ€ 값이 λͺ¨λ‘ 숫자이고, μœ νš¨ν•œ κ°’μ˜ λ²”μœ„λ₯Ό 지정할 수 μžˆμŠ΅λ‹ˆλ‹€.

πŸ‘‰Β watchOS 9 λΆ€ν„° Stepper μ‚¬μš© κ°€λŠ₯

Stepper λŠ” 순차적인 값을 νŽΈμ§‘ν•  수 있게 μ„ΈλΆ„ν™”λœ μ œμ–΄λ₯Ό μ œκ³΅ν•  λ•Œ ν›Œλ£‘ν•œ μ˜΅μ…˜μž…λ‹ˆλ‹€.

47

λ˜ν•œ, Stepper λ₯Ό μ‚¬μš©ν•˜μ—¬ 논리적, 순차적으둜 νŽΈμ§‘ν•  수 μžˆμ§€λ§Œ λ°˜λ“œμ‹œ 숫자일 ν•„μš”λŠ” μ—†μŠ΅λ‹ˆλ‹€. 예λ₯Ό λ“€μ–΄ ν•­λͺ©μ— λŒ€ν•œ μ˜ˆμƒ 슀트레슀 μˆ˜μ€€μ„ κΈ°λ‘ν•˜κ³  싢을 수 μžˆμŠ΅λ‹ˆλ‹€.

48

(μ°Έκ³  : StressStepper 의 μžμ‹ 뷰인 Stepper κ°€ 값을 μˆ˜μ •ν•˜κΈ° μœ„ν•΄μ„œ $ λ₯Ό λΆ™μ—¬μ„œ μ‚¬μš©ν•˜κ²Œ λ©λ‹ˆλ‹€.)

5️⃣ Share with a friend

πŸ§‘β€πŸ­Β : λͺ©λ‘μ— μžˆλŠ” ν•­λͺ©μ„ μΉœκ΅¬μ™€ κ³΅μœ ν•΄λ³΄λ©΄ 쒋을 것 κ°™μŠ΅λ‹ˆλ‹€.

detail view 에 ν•­λͺ©μ„ κ³΅μœ ν•  수 μžˆλ„λ‘ share sheet λ₯Ό μ‚¬μš©ν•΄λ³΄κ² μŠ΅λ‹ˆλ‹€.

49

친ꡬ λͺ©λ‘μ—μ„œ μ„ νƒν•΄μ„œ λ©”μ‹œμ§€λ₯Ό νŽΈμ§‘ν•˜μ—¬ 도움을 μš”μ²­ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

50 51

이λ₯Ό μœ„ν•΄μ„œ watchOS 9 λΆ€ν„° SwiftUI μƒˆλ‘œμš΄ 도ꡬ인 ShareLink λ₯Ό μ‚¬μš©ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

52

Meet Transferable μ„Έμ…˜μ„ κΌ­ 확인해 λ³΄μ„Έμš”. ShareLink 에 λŒ€ν•œ μžμ„Έν•œ λ‚΄μš©κ³Ό μ˜΅μ…˜μ„ μ•Œ 수 μžˆμŠ΅λ‹ˆλ‹€.

53

6️⃣ Add a chart

πŸ§‘β€πŸ­Β : 이제 ν•­λͺ©μ„ μ™„λ£Œν•œ μ‹œκ°„μ„ μΆ”μ ν•˜κ³ , μž‘μ—…μ„ μ™„λ£Œν•˜κΈ° μœ„ν•΄ 도움을 μš”μ²­ν•  수 μžˆμœΌλ―€λ‘œ 생산성을 보기 μœ„ν•΄ 차트λ₯Ό μΆ”κ°€ν•˜κ³  μ‹ΆμŠ΅λ‹ˆλ‹€.

단일 데이터와 κ³ μœ ν•œ 값이 있기 λ•Œλ¬Έμ— λ§‰λŒ€ 차트λ₯Ό μ‚¬μš©ν•˜κ² μŠ΅λ‹ˆλ‹€.

54

μ•±μ˜ navigation structure 에 chart view λ₯Ό μΆ”κ°€ν•˜λŠ” κ²ƒμœΌλ‘œ μ‹œμž‘ν•˜κ² μŠ΅λ‹ˆλ‹€.

list-detail 관계가 μ—†κΈ° λ•Œλ¬Έμ— page-based navigation strategy μ„ νƒν•˜μ—¬ μ–Έμ œλ“ μ§€ λͺ©λ‘κ³Ό 차트 사이λ₯Ό μŠ€μ™€μ΄ν”„ν•  수 μžˆλ„λ‘ ν•˜κ² μŠ΅λ‹ˆλ‹€.

55

이λ₯Ό μœ„ν•΄μ„œ λͺ©λ‘ λ·°λ₯Ό μΊ‘μŠν™”ν•˜λŠ” ItemList λΆ€ν„° λ§Œλ“€κ² μŠ΅λ‹ˆλ‹€.

56

차트 뷰에 λŒ€ν•œ ꡬ쑰λ₯Ό λ§Œλ“€κ² μŠ΅λ‹ˆλ‹€. μš°μ„ , navigation structure 에 μ§‘μ€‘ν•˜κΈ° μœ„ν•΄μ„œ μž„μ‹œλ‘œ 이미지λ₯Ό λ„£κ² μŠ΅λ‹ˆλ‹€.

57

page-style 의 TabView 둜 μ„€μ •ν•˜μ˜€μŠ΅λ‹ˆλ‹€.

58

SwiftUI Canvas λ₯Ό μ‚¬μš©ν•΄μ„œ 차트λ₯Ό 그릴 순 μžˆμ§€λ§Œ watchOS 9 λΆ€ν„°λŠ” Swift Charts κ°€ μžˆμŠ΅λ‹ˆλ‹€. μ΄λŠ” iOS, macOS, tvOS μ—μ„œλ„ μ‚¬μš©ν•  수 μžˆμœΌλ―€λ‘œ SwiftUI λ₯Ό μ‚¬μš©ν•˜λŠ” λͺ¨λ“  κ³³μ—μ„œ 차트λ₯Ό μž¬μ‚¬μš©ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

μš°λ¦¬λŠ” 이 차트λ₯Ό λ‚ μ§œλ³„λ‘œ μ™„λ£Œλœ ν•­λͺ© 수λ₯Ό ν‘œμ‹œν•˜λ €κ³  ν•©λ‹ˆλ‹€.

그리고 데이터λ₯Ό μ§‘κ³„ν•˜λŠ” createData(_:) λ©”μ„œλ“œλ„ μž‘μ„±ν•©λ‹ˆλ‹€.

59

(같은 λ‚ μ§œμ˜ data 갯수만큼 μ™„λ£Œλ˜μ—ˆλ‹€κ³  μ„€μ •ν•˜λŠ” λ©”μ„œλ“œ)

data 둜 계열을 μ •μ˜ν•˜κ³ , λ‚ μ§œλ₯Ό x κ°’μœΌλ‘œ, y λŠ” μ™„λ£Œλœ ν•­λͺ©μ˜ 수둜 차트λ₯Ό ν‘œμ‹œν•˜κ² μŠ΅λ‹ˆλ‹€.

60

chartXAxis modifier λ₯Ό μ‚¬μš©ν•˜μ—¬ AxisValueLabel 의 μŠ€νƒ€μΌμ„ μ§€μ •ν•˜μ˜€μŠ΅λ‹ˆλ‹€.(axis λŠ” μΆ•)

μ„Έλ‘œ λˆˆκΈˆμ„ μ„ μ›ν•˜μ§€ μ•ŠκΈ° λ•Œλ¬Έμ— AxisGridLine λ₯Ό μƒλž΅ν–ˆμŠ΅λ‹ˆλ‹€.

61

chartYAxis modifier 둜 y 좕을 μ •μ˜ν•˜κ² μŠ΅λ‹ˆλ‹€.

AxisGridLine μœΌλ‘œμ°¨νŠΈμ™€ μ–΄μšΈλ¦¬λŠ” λˆˆκΈˆμ„  μŠ€νƒ€μΌμ„ μ§€μ •ν•˜μ˜€μŠ΅λ‹ˆλ‹€.

AxisValueLabel 의 format 을 μ •μˆ˜λ‘œ μ§€μ •ν•˜κ³  상단 λ ˆμ΄λΈ”μ€ μƒλž΅ν•˜μ—¬ 차트 상단이 μž˜λ¦¬λŠ” 것을 λ°©μ§€ν–ˆμŠ΅λ‹ˆλ‹€.

62

Swift Charts 둜 ν•  수 μžˆλŠ” 것을 μžμ„Ένžˆ μ•Œμ•„λ³΄λ €λ©΄ μ•„λž˜μ˜ μ„Έμ…˜μ„ ν™•μΈν•˜μ„Έμš”.

63

7️⃣ Scroll with the Digital Crown

πŸ§‘β€πŸ­Β : 더 λ§Žμ€ 데이터λ₯Ό 보여주고 μ‹ΆμŠ΅λ‹ˆλ‹€. 슀크둀이 κ°€λŠ₯ν•˜λ„λ‘ ν•΄λ³΄κ² μŠ΅λ‹ˆλ‹€.

이λ₯Ό λ‹¬μ„±ν•˜κΈ° μœ„ν•΄ digitalCrownRotation modifier μ‚¬μš©ν•  κ²ƒμž…λ‹ˆλ‹€. Digital crown μ΄λ²€νŠΈμ— λŒ€ν•œ μ½œλ°±μ„ μ„€μ •ν•  수 μžˆμŠ΅λ‹ˆλ‹€. 이λ₯Ό 톡해 μ°¨νŠΈμ— λŒ€ν•œ μ‚¬μš©μž μ •μ˜ 슀크둀 λ™μž‘μ„ κ΅¬ν˜„ν•˜κ² μŠ΅λ‹ˆλ‹€.

64

digitalCrownRotation modifier λ₯Ό μΆ”κ°€ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

65

detent λΌλŠ” μš©μ–΄λ₯Ό 개발자 λ¬Έμ„œμ—μ„œ μ‚¬μš©ν•˜λŠ”λ° λ©ˆμΆ€μ‡ λΌκ³  ν•΄μ„ν•˜κΈ°μ— 쑰금 뢀쑱함이 μžˆμ—ˆλ‹€. 그러던 쀑 WWDC22 μ„Έμ…˜ Build a productivity app for Apple Watch μ—μ„œ λ“£κ²Œ λ˜μ–΄μ„œ λ°œμ·Œν–ˆλ‹€.

πŸ‘‰Β detent?

detent λŠ” 기계적 μš©μ–΄λ‘œ 움직일 만큼 μΆ©λΆ„ν•œ 힘이 κ°€ν•΄μ§ˆ λ•ŒκΉŒμ§€ 무언가λ₯Ό μ œμžλ¦¬μ— κ³ μ •μ‹œν‚€λŠ” λ©”μ»€λ‹ˆμ¦˜μž…λ‹ˆλ‹€.

예λ₯Ό λ“€μ–΄, μ°¨ 문을 μ—΄ λ•Œ μ•ˆμ°©λ˜λŠ” β€˜μ •μ§€β€™ μœ„μΉ˜κ°€ μžˆλ‹€. 문을 쑰금 더 μ„Έκ²Œ λ°€μ–΄ 또 λ‹€λ₯Έ β€˜μ •μ§€β€™ μœ„μΉ˜κΉŒμ§€ 더 μ—΄ μˆ˜λ„ μžˆλ‹€.

문을 λ‹«μœΌλ €λ©΄ β€˜μ •μ§€β€™μ—μ„œ λΉΌλ‚Ό 수 μžˆμ„ 만큼 μ„Έκ²Œ λ‹Ήκ²¨μ„œ 저항을 이겨내야 ν•©λ‹ˆλ‹€. 그렇지 μ•ŠμœΌλ©΄ 문은 β€˜μ •μ§€β€™ μœ„μΉ˜λ‘œ λŒμ•„κ°‘λ‹ˆλ‹€. 이것이 detent μž…λ‹ˆλ‹€.


이처럼 νŒŒλΌλ―Έν„° detent λŠ” crown 정지 ν†±λ‹ˆ μ—­ν• μž…λ‹ˆλ‹€.

이제 μ°¨νŠΈμ—μ„œ μŠ€ν¬λ‘€ν•  λ•Œ crown 의 μœ„μΉ˜λ₯Ό ν‘œμ‹œν•  수 있고, 이λ₯Ό μœ„ν•΄ Swift Charts 의 RuleMark λ₯Ό μ‚¬μš©ν•  수 μžˆμŠ΅λ‹ˆλ‹€. RuleMark λŠ” μ°¨νŠΈμœ„μ˜ μ§μ„ μž…λ‹ˆλ‹€. μˆ˜ν‰μ„  ν˜Ήμ€ μˆ˜μ§μ„ μœΌλ‘œ μž„κ³„κ°’μ„ ν‘œμ‹œν•˜κ±°λ‚˜ 경사선을 ν‘œμ‹œν•  수 μžˆμŠ΅λ‹ˆλ‹€.

66

πŸ§‘β€πŸ­Β : 보기 μ’‹κ²Œ ν•˜κΈ° μœ„ν•΄μ„œ crown 이 움직이지 μ•Šμ„ λ•Œ 선을 ν¬λ―Έν•˜κ²Œ ν•˜κ³  μ‹ΆμŠ΅λ‹ˆλ‹€.

μ΄λŠ” isCrownIdle 속성을 μ‚¬μš©ν•˜μ—¬ κ°„λ‹¨ν•œ μ• λ‹ˆλ©”μ΄μ…˜μ„ ν•  수 μžˆμŠ΅λ‹ˆλ‹€.(μ•žμ„œ μ–ΈκΈ‰ν–ˆλ˜ 슀크둀이 λ©ˆμΆ”κ³  μ‹œμž‘ν•  λ•Œμ˜ μ• λ‹ˆλ©”μ΄μ…˜μ„ 말함)

67

μŠ€ν¬λ‘€ν•  λ•Œ 차트의 λ§‰λŒ€ μ˜†μ—κ°’μ„ ν‘œμ‹œν•˜κΈ° μœ„ν•΄μ„œ annotation 을 μΆ”κ°€ν•˜λ©΄ λ©λ‹ˆλ‹€.

68

μƒλ‹¨μ˜ 후행에 값을 μΆ”κ°€ν•˜λŠ”λ° λ§ˆμ§€λ§‰ λ§‰λŒ€μ—μ„œλŠ” 상단 선행에 μΆ”κ°€ν•˜κ² μŠ΅λ‹ˆλ‹€.

69

πŸ§‘β€πŸ­Β : 슀크둀 κ°€λŠ₯ν•œ μ‚¬μš©μž μ •μ˜ 차트λ₯Ό λ§Œλ“œλŠ” λ§ˆμ§€λ§‰ λ‹¨κ³„λŠ” μŠ€ν¬λ‘€ν•  λ•Œ 차트의 데이터 λ²”μœ„λ₯Ό μ‘°μ •ν•˜λŠ” κ²ƒμž…λ‹ˆλ‹€.

μ°¨νŠΈμ— λ²”μœ„ 데이터λ₯Ό μ œκ³΅ν•˜κΈ° μœ„ν•΄μ„œ chartData λ³€μˆ˜λ₯Ό μƒμ„±ν•˜κ³  highlightedDateIndex 값이 변경될 λ•Œ ν•„μš”ν•œ 경우 μ—…λ°μ΄νŠΈ ν•©λ‹ˆλ‹€.

70

(23λΆ„ 8μ΄ˆλΆ€ν„° κ΅¬ν˜„λœ κΈ°λŠ₯ 확인 κ°€λŠ₯.)

watchOS 9 μ—μ„œ μ‚¬μš©ν•  수 μžˆλŠ” μƒˆλ‘œμš΄ SwiftUI κΈ°λŠ₯에 λŒ€ν•΄ μžμ„Ένžˆ μ•Œμ•„λ³΄λ €λ©΄ μ•„λž˜μ˜ μ„Έμ…˜μ„ μ‹œμ²­ν•΄μ£Όμ„Έμš”.

71