iOS

웹개발자의 iOS 개발기(12) - [SwiftUI] 네이버 음성메모앱 클론코딩

whh__ 2025. 5. 6. 00:51

01. 개요

강의 초반 챕터에서 Swift 문법, 다양한 컴포넌트 예제를 학습했었습니다.

이후 챕터부터는 다양한 서비스들을 클론코딩 하는 챕터들입니다.

모든 챕터를 듣기에는 시간적 여유가 없어, 네이버 음성메모앱 클론코딩 챕터만 완강하기로 마음먹었습니다.

해당 챕터만이라도 완강하는 이유는 이후 나만의 앱을 만들 때 프로젝트 구성, 구조, 개발 방법 등을 전체적으로나마 터득하기 좋을 것 같기 때문입니다.

이후 남은 챕터들은 완강은 아니더라도 필요한 내용을 골라가며 들으려고 합니다. 예를 들어 애플리케이션은 CI/CD를 어떻게 구성하는지와 같은..

 

02. 내용

1. Property Wrappers의 용도를 어느 정도 파악할 수 있게 되었습니다. (추후에 클론코딩이 아닌 직접 코드를 작성하게 되면 좀 더 명확하게 이해할 수 있을 것 같습니다.)

 

Property Wrappers

  • @State
  • @Binding
  • ObservableObject
    • 엄밀히 말하면 Property Wrapper는 아니고 클래스 프로토콜이다.
  • @Published
  • @ObservedObject
  • @StateObject
  • @Environment
  • @EnvironmentObject

@State

  1. Swiftu에서 상태를 처리하는 방법
  2. 뷰의 상태를 저장하는 프로퍼티로 상태 관리 주체는 해당 뷰
  3. 기본적으로 Private 선언이기에 다른 뷰와 값을 소통하려면 Binding을 이용
  4. 값이 변경될 때마다 UI 업데이트

@Binding

  1. 뷰와 상태를 바인딩하는 방법
  2. 상위 @State 변수를 전달받아 하위 뷰에서 캐치해 변화 감지 및 연결
  3. Binding은 다른 뷰가 소유한 속성을 연결하기에 소유권 및 저장 공간이 없음

@ObservableObject

  1. 클래스 프로토콜로 관찰하는 어떠한 값이 변경되면 변경사항을 알려줌
  2. 뷰에서 인스턴스 변화를 감시하기 위해 뷰모델 객체로 생성할 때 사용할 수 있음

@Published

  1. Observableobject를 구현한 클래스 내에서 프로퍼티 선언 시 사용
  2. @Published로 선언된 프로퍼티를 뷰에서 관찰할 수 있음
  3. ObservableObject의 objectWillChange.send 기능을 @Published 프로퍼티가 변경되면 자동으로 호출

@ObservedObject

  1. 뷰에서 Observableobject 타입의 인스턴스 선언 시 사용
  2. Observableobject의 값이 업데이트되면 뷰를 업데이트

@StateObject

  1. 뷰에서 ObservableObject 타입의 인스턴스 선언 시 사용
  2. 뷰마다 하나의 인스턴스를 생성하며, 뷰가 사라지기 전까지 같은 인스턴스 유지
  3. @observedobject의 뷰 렌더링 시 인스턴스 초기화 이슈 해결을 위한 방법
  4. 매번 인스턴스가 새롭게 생성되는 것처럼 외부에서 주입받는 경우가 아닌 최초 생성 선언 시에 @StateObject를 사용하는 것이 적절한 방법

@Environment

  1. 미리 정의되어 있는 시스템 공유 데이터
  2. 사용하려는 공유 데이터의 이름을 keyPath로 전달하여 사용
  3. 시스템 공유 데이터는 가변 하기에 var로 선언 필요
  4. 뷰가 생성되는 시점에 값이 자동으로 초기화됨

@EnvironmentObject

  1. Observableobject를 통해 구현된 타입의 인스턴스를 전역적으로 공유하여 사용
  2. 앱 전역에서 공통으로 사용할 데이터를 주입 및 사용
  3. 전역변수 개념이기 때문에 남발 시 코드 가독성, 유지보수, 예상치 못한 에러 발생이 있을 수 있다.

 

 

2. MVVM 아키텍처의 이해

  • Model, View, ViewModel
  • 애플리케이션의 비즈니스 로직과 UI를 분리하여 관리, 데이터 바인딩을 통해 뷰와 뷰 모델 사이에 자동으로 동기화

Model

  • 애플리케이션의 데이터와 비즈니스 로직을 담당
  • 네트워크 요청, 데이터베이스 작업, 데이터 가공 등을 수행
  • UI에 직접적으로 의존하지 않음

View

  • 사용자에게 보이는 UI를 담당
  • 데이터를 표시하고 사용자 상호작용을 처리하지만, 뷰 자체는 로직을 포함하지 않음.
  • SwiftUI에서는 선언형 코드로 UI를 작성

ViewModel

  • 뷰와 모델 사이를 연결하는 중간 역할
  • 모델에서 데이터를 가져와서 변환하고, 이를 뷰에 제공
  • 상태(@State, @Binding, @Published)를 사용해 UI와 데이터의 양방향 바인딩을 지원
  • 뷰가 비즈니스 로직에 직접 접근하지 못하게 하는 역할을 수행

SwiftUI와 MVVM의 관계

  1. SwiftUI의 Property Wrapper 사용과 구조들로 이미 MVVM 느낌
  2. 사실 모델과 뷰가 결합된 MV면 충분할 수 있음
  3. 상태 관리 중심에 조금 더 집중하는 것이 적절
  4. View 내에서 비즈니스 로직과 View 상태 관리를 위한 프로퍼티들을 ViewModel로 분리

“SwiftUI에서 중요한 건 데이터 바인딩을 위한 MVVM 구조 사용이 아닌 적절한 상태 관리를 위한 구조 사용이 필요”

 

03. 마무리

코드를 따라치며 iOS 앱 개발에 있어 다양한 지식을 얻은 것 같습니다.

프로젝트의 전체적인 폴더 구성, MVVM 패턴을 적용하는 방법, Assets 사용, 애니메이션 적용 등

문법이나 컴포넌트 예제를 학습할 때 배울 수 없는 인사이트를 얻게 되었습니다.

 

이젠 제가 만들고 싶었던 서비스를 직접 만들어 보려고 합니다. 관련 포스팅은 '프로젝트' 카테고리에서 작성하겠습니다.

 

네이버 음성메모앱.MP4
12.59MB