SwiftKit

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

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 보통 애니메이션을 커스텀 할때, 아래 같은 그래프를 ..

아이폰에 진동을 주고 싶다면...? 아래와 같은 클래스를 사용하면 된다. 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 ..

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

보통 앱을 만들다 보면 버튼들이 많이 생긴다. 버튼을 만들고 여러 가지 세부설정들을 붙이지만 그 버튼이 많이 쓰일 경우 색이나 크기, 모서리값을 미리 설정해 놓으면 편하다. 어떻게 커스텀 버튼을 만드는지 간단하게 알아보자. 더 편하고 좋은 방법이 나오면 업데이트 예정이다. 아래와 같은 방법으로 CustomButton 이라는 구조체를 만든 후 label, disable, action 만 입력하면 자동적으로 아래와 같은 버튼을 간단하게 만들어 줄 수 있다. import SwiftUI struct ContentView: View { var body: some View { VStack { CustomButton(label: "Custom Button", disable: false) { // action } } ..

앱을 만들다 보면 색상을 지정해 줘야 할 때가 있다. 다양한 방법이 있지만 그중에 아예 Asset 에 New Color Set 을 추가하여 색상을 만들어 줄 수 있다. 추가 방법 아래와 같이 Asset 에 들어가서 New Color Set 을 추가해준다. 직접 Color Panel 에 들어가서 색을 지정해 줄 수 있고, Hex 코드나 RGB 값으로도 입력이 가능하다. 이렇게 색을 추가하고 아래의 코드를 추가해 주면 된다. extension을 사용하여 Color 구조체에 static let 을 사용하여 정적 멤버를 추가해준다. extension Color { static let myColor1 = Color("myColor1") static let myColor2 = Color("myColor2") } 이..

Claymorphism 기본 카드뷰와 Claymorphism스타일의 카드의 차이는 이러하다. 마치 점토의 형상을 띄고 있고, 좀 더 둥글둥글하게 표현된다. SwiftUI로 Claymorphism구현 우선 Claymorphism 을 구현하기 위해서는 기본 Shadow, inner Shadow 가 필요하고, 이 Shadow 들을 자연스럽게 나타내기 위해 Blur 처리하는 것도 중요하다. SwiftUI 에는 모든 기능이 다 있다! Blur 기능은 radius 로 어느 정도 조절이 가능했다. 우선 내가 코드로 구현한 Claymorphism 스타일의 카드뷰이다. import SwiftUI struct ContentView: View { var body: some View { ZStack { VStack { Tex..

나의 집착.. 나의 마지막 Corner Radius에 대한 집착... 아래는 위의 Rounding Corners를 만들기 위한 코드이다. import SwiftUI struct ContentView: View { var body: some View { VStack { Text("Rounding Corners") .frame(width: 180, height: 70) .foregroundColor(Color.white) .background(Color.black) .roundingCorner(20, corners : [.topLeft, .topRight]) } } } extension View { func roundingCorner(_ radius : CGFloat, corners : UIRectCorne..

애플의 Document 참조 SwiftUI에 Corner Radius를 걸어주는 방법은 크게 세가지 정도가 있다. 우선 기본적인 것은 애플의 Document에서 그대로 가져왔다. cornerRadius(_:antialiased:) | Apple Developer Documentation Clips this view to its bounding frame, with the specified corner radius. developer.apple.com 애플 Document 코드 .cornerRadius import SwiftUI struct ContentView: View { var body: some View { VStack { Text("Rounded Corners") .frame(width: 175,..

버튼에도 스타일을 적용할 수 있다. 애플에서 Button에 제공해주는 기본 스타일이다. 기본앱에서 많이 본 것 같다. BorderedProminent 스타일 코드를 적용하려면 아래와 같다. 여기서 corner radius 등 다양한 옵션도 추가할 수 있다! BorderedProminent, Bordered의 경우는 padding이 자동으로 어느정도 추가된다. import SwiftUI struct ContentView: View { var body: some View { VStack { Text("BorderedProminent") .bold() Button(action: {}, label: { Text("Button") }) .buttonStyle(.borderedProminent) } } } } 버튼..