SwiftUI
-
SwiftUI로 테두리 오버레이 효과 만들기 (feat. ZStack)SwiftUI 2024. 11. 14. 15:00
안녕하세요. 그린입니다 🍏이번 포스팅에서는 SwiftUI로 테두리 오버레이 효과를 만드는 방법에 대해 구현해보려고 합니다 🙋🏻 SwiftUI로 테두리 오버레이 효과 만들기사실 테두리 오버레이 효과라고 하면 어떤건지 감이 안올 수 있죠!테두리에 쉐도우를 입히거나 어떤 뷰를 오버레이로 까는것을 말할수도 있고, 너무 사용법이 다양하기에 구현되는 결과물을 상상하자니 너무 무궁 무진하죠! 그래서, 먼저 예시를 보이고 이런걸 만들어보려고 한다~ 소개해볼까 합니다 😃 요런 뷰를 만들어보려고 해요.약간 공책 디자인 같기도하죠?여기서 오늘의 챌린지는 저 초록색 뷰를 테두리 위에 겹쳐 올리는겁니다.즉, 공책에서도 스프링 부분이 있는데, 어떻게 보면 저 초록색 뷰가 스프링을 표현하는거라고 보면 될것 같아요. 가장 ..
-
SwiftUI의 Text에 stroke 적용하기SwiftUI 2024. 11. 7. 18:55
안녕하세요. 그린입니다 🍏이번 포스팅에서는 SwiftUI의 Text에 테두리에 stroke를 넣는 방법에 대해 한번 구현해보겠습니다 🙋🏻 간단하기도 하고 제가 필요해서 한번 모디파이어로 빼보면서 만들어볼까해요! SwiftUI의 Text에 stroke 적용하기SwiftUI에서는 Text에 stroke를 넣을 수 있는 모디파이어가 없는걸로 압니다 🥲 그래서 우리는 UIKit을 활용하거나 SwiftUI에서 사용 가능한 모디파이어들을 이용해 stroke를 만들어 볼 수 있어요! 우선 shadow를 이용해서 테두리를 구현해볼 수 있어요. shadow는 그림자를 주는 효과를 말하죠? struct ContentView: View { var body: some View { Text("테두리 효과") ..
-
SwiftUI를 이용한 인터랙티브 애니메이션SwiftUI 2024. 11. 1. 18:50
안녕하세요. 그린입니다 🍏이번 포스팅에서는 제가 필요해서 구현해보다가 이런것도 SwiftUI로 쉽게 구현할 수 있구나 하는걸 소개해볼까 합니다 🙋🏻 바로 SwiftUI를 이용한 인터랙티브 애니메이션이 그 주제입니다ㅎㅎ 이번 포스팅은 개념적인 설명 그런것보다 실제 구현에 기반하고 있기에 코드를 주의깊게 보는것이 좋을것 같습니다! ⚠️ 인터랙티브 애니메이션인터랙티브가 뭘까요? 이런 뜻을 가지고 있다고 구글 AI, 재미나이가 말해주네요. 즉, 인터랙티브 애니메이션이라는것은 쌍방향의 애니메이션을 뜻하게 되는겁니다.사용자의 입력이나 동작에 반응해 변화하는 동적인 애니메이션을 말해요.그런 구현은 정말 무궁무진하게 생각한대로 펼쳐볼 수 있겠지만, 저는 하나의 예시를 가지고 그 인터랙티브 애니메이션 구현을 살펴..
-
SwiftUI - Color 혼합하기SwiftUI 2024. 10. 28. 18:45
안녕하세요. 그린입니다 🍏이번 포스팅에서는 간단한 SwiftUI의 새로운 기능을 알아보려 합니다 🙋🏻바로 SwiftUI에서 색상을 적용시키는 Color를 사용할때 새로 나온 mix 메서드를 이용해 컬러를 혼합하여 새로운 컬러를 도출해내보는것이죠! 정말 간단히 바로 알아볼까요? Color mix우선 기본적으로 Color 타입을 간단히 짚고 넘어가볼께요. Color는 SwiftUI에서 색상을 표현하는 구조체입니다. @frozenstruct Color 표현하는 방식으로는 에셋 카탈로그에서 색상을 로드하거나, RGB 값을 넣거나 색조, 채도, 밝기 등을 지정하여 편하게 표현할 수 있어요. let aqua = Color("aqua")let skyBlue = Color(red: 0.4627, green: 0...
-
SwiftUI - ContainerValueKeySwiftUI 2024. 10. 24. 18:52
안녕하세요. 그린입니다 🍏이번 포스팅에서는 SwiftUI의 ContainerValueKey에 대해 알아보겠습니다 🙋🏻 ContainerValueKeyiOS 18에서 나온 개념으로 컨테이너 값에 접근하기 위한 키입니다. protocol ContainerValueKey 익숙한 PreferenceKey처럼 프로토콜이며 비슷하지만, 조금 다른 차이가 있어요. 조금 더 차이를 짚어볼까요? PreferenceKey는 특정 뷰에서 계산된 값을 뷰에 전달하는 역할로 많이 쓰이죠.즉 데이터는 자식 뷰에서 상위 뷰로 전파됩니다.레이아웃의 정보를 전파하거나 여러 하위 뷰에서 데이터들을 모아서 상위 뷰에서 처리할 때 많이 사용하죠. struct SizePreferenceKey: PreferenceKey { static..
-
SwiftUI - NavigationTransitionSwiftUI 2024. 10. 21. 18:45
안녕하세요. 그린입니다 🍏이번 포스팅에서는 iOS 18에서 새로 나온 SwiftUI의 NavigationTransition에 대해 알아보겠습니다 🙋🏻 NavigationTransition우선 전환 효과에 대한 얘기인것 같죠?우리가 네비게이션 구조로 스택을 쌓아 화면을 전환하거나 시트 형태로 전환할때 보통 일반적으로 생각하고 있는 전환 효과가 있죠? 아주 익숙한 전환 효과입니다. 그런데, iOS 18부터는 이런 기본 전환 효과 외에도 줌 전환 효과를 사용할 수 있게 되었어요.그래서 NavigationTransition이라는것도 나오면서 그에 맞는 뷰 모디파이어도 생겨났습니다. 그럼 먼저 NavigationTransition부터 알아봐야겠죠? protocol NavigationTransition Na..
-
컨텐츠 크기에 따른 자동 ScrollView 전환하기 (feat. SwiftUI)SwiftUI 2024. 10. 17. 18:59
안녕하세요. 그린입니다 🍏이번 포스팅에서는 SwiftUI에서 간단히 컨텐츠 크기에 따른 자동 ScrollView로 전환하는 코드 구현을 소개해볼까 합니다 🙋🏻 자동 ScrollView 전환하기일반적으로 우리가 컨텐츠를 채워서 구현할때 코드 상 스크롤뷰로 감싸지 않으면 스크롤되지가 않죠.물론 List와 같은 그런 컴포넌트 사용은 제외하고요..! 그런데, 데이터를 받아오는 입장에서 이 데이터를 그려줄때 디바이스의 어느정도 사이즈를 차지할지 미리 알 순 없죠.그렇기에, 스크롤이 되게 스크롤뷰로 미리 감싸놓는 경우가 많습니다. 만약 요구하는 UI / UX가 컨텐츠가 적어서 디바이스에 스크롤을 하지 않아도 다 표시가 된다면 스크롤이 되지 않도록하고, 컨텐츠가 많아서 디바이스의 사이즈를 넘어가면 스크롤이 적용..
-
SwiftUI - ScrollPositionSwiftUI 2024. 10. 14. 18:56
안녕하세요. 그린입니다 🍏이번 포스팅에서는 SwiftUI의 ScrollPosition에 대해 알아보겠습니다 🙋🏻 ScrollPosition이번 iOS 18로 업데이트 되면서 SwiftUI에서 ScrollPosition 타입이 생기면서 이와 관련된 모디파이어들로 스크롤 뷰의 기능이 더 편리해졌습니다 😃 기존에, SwiftUI에서 ScrollView를 사용할 때, 특정 위치로 스크롤을 이동시키거나 할때 우리는 ScrollViewReader를 활용해서 scrollTo 메서드로 동작 시켜줬습니다. 이와 관련해서는 아래 포스팅을 참고해보면 이번 포스팅에서 다뤄볼 ScrollPosition과 어떤 차이가 있는지 확인해볼 수 있어요! SwiftUI - ScrollViewReader안녕하세요. 그린입니다🍏 ..