SwiftUI 23

[HIG] Toolbars

툴바는 도구 모음이라고 볼 수 있을 것 같다. 빠르게 기능을 제공하는 부분이라고 생각하면 될 것 같다. 권장 사항 툴바는 사용자가 주요 기능을 사용할 수 있게 하자 툴바에 너무 많은 아이템을 넣지 말자 macOS, iPadOS 의 경우 툴바를 기능별로 모아두자 툴바의 기능을 확실히 표현하는 아이템을 사용하라 일관성 있는 툴바 아이템을 제공하자 기본적으로 제공해주는 SF Symbol 을 사용하는 것이 좋다 툴바의 배경화면을 투명하게 하는것을 고려하자 링크 Toolbars | Apple Developer Documentation A toolbar provides convenient access to frequently used commands and controls that perform actions re..

SwiftUI/HIG 2023.06.16

[HIG] Tab bars

탭바는 네이베이션을 위한 뷰이다. 탭바는 다른 종류의 정보를 구분할 때 사용한다. 또한 사용자가 빠르게 다른 종류의 뷰를 왔다갔다 하는데 쓰인다. HIG에서 권장하는 Tab bar의 사용 탭바는 뷰의 이동에 사용하는 것이 좋다. 기능 버튼을 추가할때는 toolbar를 사용하자. 다른 뷰에 있을때 탭바를 항상 보이게 하자. 사용자가 집중해야 하거나 새로운 경험을 제공하는 경우 예외가 될수 있다. (모달뷰) 탭바는 최대한 적게 써서 유저의 혼란을 줄여주자. 구체적인 명사나 동사를 탭의 제목으로 활용하자. SF Symbol 을 사용하는 것을 권장한다. 비슷한 무드의 Tab Item을 사용하자. 개인적인 공부 TabBar 에 어떠한 아이콘을 넣어야 할지 고민한 적 있다. 색이 있는 아이콘을 넣어볼까? 화려한 ..

SwiftUI/HIG 2023.06.16

[SwiftUI] Lottie 사용하기

Lottie가 뭐죠? Lottie는 에어비앤비에서 개발한 JSON 기반의 애니메이션 라이브러리다. 아마 로티를 사용해 보면 정말 자연스럽고 부드럽고 귀엽게(?) 애니메이션이 팡팡 터지는 것을 경험할 것이다. Lottie에 대한 간단한 설명과 이것을 어떻게 사용할 수 있을지 알아보자. PNG, GIF, Lottie? 위는 PNG, GIF, Lottie의 크기 차이를 설명한 것이다. PNG, GIF는 픽셀이 보여서 만들어지기 때문에 계단현상과 깨짐 현상이 발생하게 된다. 그리고 픽셀 하나당 색상이 있어서 용량도 무거워진다. 하지만 Lottie는 JSON을 기반으로 하여 벡터 기반(선분, 면)으로 이루어져 있어서 깨지지 않는다. PNG(Portable Network Graphics)와 SVG(Scalable ..

[SwiftUI][WWDC 2023] Animation 정리

Animation에 진심인 나... 아래의 2023 WWDC 영상을 참고하여 정리한 자료이다. Explore SwiftUI animation - WWDC23 - Videos - Apple Developer Explore SwiftUI's powerful animation capabilities and find out how these features work together to produce impressive visual effects... developer.apple.com Animation 의 종류 SwiftUI Animation 에는 Timing curve, Spring, Higher order 정도로 분류될 수 있다. Timing curve 보통 애니메이션을 커스텀 할때, 아래 같은 그래프를 ..

[SwiftUI] Haptic 사용하기

아이폰에 진동을 주고 싶다면...? 아래와 같은 클래스를 사용하면 된다. HapticManager 를 불러와서 nofiticationOccurred 나 impactOccurred 를 사용하면 된다. class HapticManager { static let instance = HapticManager() func notification(type: UINotificationFeedbackGenerator.FeedbackType) { let generator = UINotificationFeedbackGenerator() generator.notificationOccurred(type) } func impact(style: UIImpactFeedbackGenerator.FeedbackStyle) { let ..

[SwiftUI] @AppStorage 알아보기

보통은 앱을 껐다키면 앱에 저장된 데이터들을 따로 저장하지 않는 이상 사라지게 된다. SwiftUI 에서는 UserDefaults 를 통해 간단한 데이터를 앱을 삭제하지 않는 이상 저장할 수 있도록 지원한다. 이 UserDefaults 를 사용하는 방법 중 하나가 @AppStorage 이다. 이름부터 뭔가 앱에 저장을 해줄 것 같은 느낌이 난다. @AppStorage 사용방법은 정말 간단하다. @AppStorage("name") var userName: String? 형식으로 사용해 주면 된다. "name" 이라는 키로 userName 의 값을 저장한다는 뜻이다. 타입에서 String? 처럼 옵셔널 String 을 사용해 주는 이유는 처음에는 저장하는 값이 없기 때문이다. 초기값을 지정해 준다면 @App..

[SwiftUI] @FocusState 알아보기

@FocusState 는 아주 간단하다. 말 그대로 Focus 되어있는지 안되어 있는지를 관리한다. 보통 TextField 를 만들게 되면 유저들이 text 를 써넣을 때 클릭해야 하는데 @FocusState 를 활용하면 자동으로 선택되어 있게 만들 수 있다. TextField 만들기 우선 @FocusState 를 사용하기 위해서는 TextField 를 만들어 줘야 한다. 아래와 같은 코드로 간단한 TextField 를 만들어 보았다. 이제 간단하다 @FocusState 를 통해 Bool 타입의 textFocus 변수를 선언해 주고, 해당되는 TextField 앞에 .focused($textFocus) 를 입력해 주면 된다. 이제 textFocus 라는 변수는 TextField 가 선택되면 true 값이..

[SwiftUI] @EnvironmentObject 알아보기

SwiftUI 에서는 많은 변수들을 사용하게 된다. 그리고 뷰간에 많은 데이터가 오가게 될 것이다. 또한 어떠한 데이터는 앱 전체에 사용된다. 이때 유용한 것이 @EnvironmentObject 이다. 시작하기에 앞서 코드는 아래에서 설명했을 때 쓴 코드를 사용할 것이다, [SwiftUI] @Published, @ObservedObject 알아보기 시작하기에 앞서... 이 글은 @Published, @ObservedObject 을 아주~ 간단하게 설명한 글이다. 기본적인 것부터 알아두고 심도있게 들어가는것이 맞는 것 같다. (Combine 프레임워크, ViewModel... 등 공부가 필 codingnest.tistory.com @EnvironmentObject @EnvironmentObject 도 Ob..

[SwiftUI] Color Literal 코드안에서 색상표 보기

코딩을 하다보면 아래와 같이 귀여운(?) 기능이 있다. 바로 색상을 이렇게 골라줄수 있다는거? 사용방법은 아주아주 간단하다. Color(#colorLiteral( 까지만 입력하면 팔레트가 생긴다. 그렇게 만든 Color 는 아래와 같이 사용하면 된다. VStack 안에서 사용하고 싶었는데... 복사해서 붙여넣으니 아래와 같이 생긴다. 색상을 선언할때만 사용 가능한 것 같다.

[SwiftUI] @StateObject 알아보기

앞에서 @Published, @ObservedObject 를 공부했다. 그것과 바로 이어지는 것이 @StateObject 이다. [SwiftUI] @Published, @ObservedObject 알아보기 시작하기에 앞서... 이 글은 @Published, @ObservedObject 을 아주~ 간단하게 설명한 글이다. 기본적인 것부터 알아두고 심도있게 들어가는것이 맞는 것 같다. (Combine 프레임워크, ViewModel... 등 공부가 필 codingnest.tistory.com @ObservedObject 의 문제점 @Published 로 선언된 변수가 변경될 때 뷰를 자동으로 업데이트시켜주지만 문제가 있다. 화면 자체가 다시 업데이트된다면 변수는 초기화된다. 이게 무슨 소리인지 헷갈릴 것이다...