오늘은 제가 직접 만든 Todo 앱에 포함된 Timer 기능을 소개하고 리뷰해보려고 해요.이번 포스팅에서는 총 세 가지 기능을 중심으로 살펴볼게요.⏱ Timer 설정 및 시작❌ Timer 취소⏸ Timer 일시정지 및 재개하나씩 자세히 확인해볼게요!⏱ Timer 설정 및 시작1. 시간 설정: Picker로 시/분/초 선택Picker("시", selection: $selectedHour) { ForEach(0..Picker를 사용해 시, 분, 초를 각각 선택할 수 있게 구성했습니다.선택된 값은 @Binding으로 상위 뷰(TimerView)와 연결되어 공유됩니다.@Binding var selectedHour: Int@Binding var selectedMinute: Int@Binding var sel..

오늘은 (SwiftUI 버전) 나만의 Todo 앱의 Recording(녹음) 기능을 리뷰하려고 합니다. 이번 기능은 전체적인 흐름이 UIKit에서 구현하던 것과 거의 비슷한 구조라서,이번 글에서는 녹음을 담당하는 코드에 대해서 자세히 알아 볼려고 합니다. UIKit 구현이 궁금하신 분들은 아래 글을 참고하시면 될 것 같아요!👉 [UIKit] 녹음 기능 리뷰 (Feat. 나만의 Todo) Riu 개발노트안녕하세요 iOS 개발자를 꿈꾸는 Riu입니다. Github: woolndriu-dev.tistory.comRecordingManager역할녹음/재생/초기화 전반을 담당하는 Manager 클래스SwiftUI에서 사용할 수 있도록 ObservableObject 채택AVFoundation 사용 (AVAudio..

오늘은 제가 만들고 있는 나만의 Todo앱의 Memo 기능에 대해 리뷰해보려고 합니다.이번에 구현한 Memo 기능은 메모 작성하기와 메모 상세 보기를 중심으로 살펴볼 예정이에요. 지난번 포스팅(Todo 기능 구현 리뷰)에서도 소개했듯이, 메모 불러오기와 메모 삭제 기능은 Todo 기능과 거의 동일한 구조로 구성되어 있어서 이번 포스팅에서는 따로 다루지 않고 위 링크를 참고해주시면 도움이 될 것 같아요. 이번 포스팅에서는 메모 작성하기 기능과 상세 화면 구성에서 어떤 점을 고려해서 구현했는지,SwiftUI를 활용하면서 어떻게 더 간결하고 유연하게 UI 흐름을 만들었는지 중심으로 리뷰해보겠습니다. 그럼 하나씩 살펴볼게요! 🚀✏️ 메모 작성하기사용자가 메모 제목과 내용을 입력하면 Firebase Firest..

오늘 블로그에서는 제가 만들고 있는 Todo 앱의 핵심 기능 중 하나인 Todo 기능을 중심으로 구현 내용을리뷰해보려고 합니다. 지난번에는 UIKit을 사용해 Todo 기능을 구현했었는데요, 이번에는 SwiftUI로 다시 구현해보았습니다.이번에 구현한 기능은 다음과 같습니다:📥 Todo 불러오기✏️ Todo 생성🗑 Todo 삭제☑️ Todo 체크 (완료 여부 토글)단순히 기능만 구현하고 끝나는 것이 아니라, 실제로 앱을 사용해보면서 사용성에 불편한 점이 있는지 확인하고 계속해서 개선해나가는 방식으로 프로젝트를 이어가고 있습니다. 그럼 이제 하나씩 상세히 살펴보겠습니다!📥 Todo 불러오기이 기능은 Firebase Firestore에 저장된 데이터를 불러와 사용자에게 할 일을 보여주는 구조로 되어 있..

Firebase에서 데이터를 잘 받아왔는데도, SwiftUI View에서는 아무것도 나타나지 않는 상황. 분명히 @Published를 썼는데도 화면에는 변화가 없었다. 왜 이런 문제가 생겼을까?이 글에서는 내가 직접 겪은 오류 상황과, SwiftUI의 상태 바인딩 원리, 그리고 UIKit과의 결정적인 차이에 대해 정리해보겠습니다.❌ 문제 상황현재 ViewModel 구조는 UIKit 개발 경험을 바탕으로 구성을 하였습니다.final class State { struct ViewModels { var todoViewModels: [Todo] = [] } @Published var viewModels = ViewModels()}final class TodoMainViewModel:..

이번 글에서는 제가 직접 만든 To-Do 앱의 Splash 화면과 Onboarding 화면을 소개해보려고 합니다.제가 구성한 흐름은 다음과 같습니다:🌱 앱의 진입 흐름 (RootView) – 앱의 시작 구조와 화면 전환 관리🌊 SplashView – 심플하지만 강렬한 로딩 화면📖 OnboardingTabView – 앱의 주요 기능을 소개하는 페이지 뷰이 순서대로 각 화면의 구성과 구현 방식을 차근차근 리뷰해보겠습니다. 그럼 지금부터 함께 살펴보시죠! 🚀🌱 앱의 진입 흐름(RootView)앱의 진짜 시작점은 @main 속성을 가진 N_VoiceMemoApp_SwiftUIApp 구조체입니다.SwiftUI 앱의 생명주기에서 가장 처음 실행되는 이 지점에서는 RootView()를 호출하여UI 흐름을 시..

📌 들어가며Figma로 디자인한 화면 속 이미지 크기를 그대로 구현하고 싶은데,기기마다 해상도가 달라서 비율이 맞지 않아 고민해본 적 있으신가요? 저는 프로젝트를 하면서 디자이너분께 “피그마대로 정확하게 나왔으면 좋겠어요!” 라는 요청을 정말 많이 받아왔습니다. 하지만 실제 iPhone 기기마다 화면 크기와 Safe Area가 다르기 때문에,디자인대로 보이도록 구현하는 일은 생각보다 까다로운 작업이었죠. Figma 기준으로 많이 사용하는 사이즈인 가로 393pt, 세로 852pt 화면을 기준으로,모든 iPhone에서 디자인 비율을 자연스럽게 유지하는 방법을 찾아서 적용을 해본 결과 아래의 방법이 제일 오차가 적었습니다.🔧 Constants 코드 설명전체코드import Foundationimport U..

오늘의 내용은?앞에서 뷰 상태변경 제1장에 관하여 포스팅을 하였습니다. 오늘은 또다른 뷰 상태변경에 대해서 알아보도록 하겠습니다.@StateObjectSwiftUI에서 상태변경를 위에서 자주 쓰이는 property wrapper중 하나인데 공식문서에서는 아래와 같이 정의가 되어있습니다.관찰이 가능한 객체를 인스턴스화하는 property wrapper입니다.@StateObject의 목적: @StateObject 속성 래퍼는 관찰 가능한 객체(observable object)를 생성하고 관리하는 데 사용되며, 특정 뷰 내에서 단일 진리의 원천 역할을 합니다. 이 객체는 뷰의 생명주기 동안 단 한 번 초기화됩니다.사용방법DataModel이라는 클래스는 객체가 변경될때 감지하고 업데이트해주는 Observable..

오늘의 내용은?앞에서 Property Wrapper에 관하여 포스팅을 하였습니다. Property Wrapper는 프로퍼티에 미리 정의해둔 연산을 통해서 값을 관리할 수 있도록 도와줍니다. 오늘은 Property Wrapper가 개발에서 실제로 어떻게 쓰이는지 확인해보도록 하겠습니다.@StateSwiftUI에서 상태변경를 위에서 자주 쓰이는 property wrapper중 하나인데 공식문서에서는 아래와 같이 정의가 되어있습니다.SwiftUI에서 값을 관리하고 읽고 쓸 수 있는 property wrapper입니다.@State 속성은 속성 선언에 상태를 추가하고 초기값을 설정할 때 사용됩니다.@State로 선언된 속성을 private로 선언하면 memberwise initializer(구조체가 가지는 모든 ..

오늘의 내용은?SwiftUI로 개발을 진행하다면 State 구조체를 많이 확인하실 수 있습니다. 필수라고 생각합니다.AppleDeveloper 문서를 통해서 읽어보면 아래와 같이 나와있습니다.SwiftUI에서 관리하는 값을 읽고 쓸수 있는 Property Wrapper이다.Property Wrapper가 무엇인지 궁금하여서 정리를 조금 해볼려고 합니다.정의Property Wrapper란 프로퍼티를 한번 감싸는 것을 의미하며 프로퍼티를 저장하고 정의하는 코드 사이를 분리 계층을 추가하여 프로퍼티를 관리할 수 있게 됩니다.위에서도 언급이 되었지만@State, @ObservedObject, @Published, @Binding 등등 많이 들어보셨을 겁니다. 이들을 자세히 들어다보면 아래와 같이 특정 프로퍼티값..