HP Trivia (1)

게시 2025/06/13

By Dongik Song

15 분읽는 시간

📁 Folder vs Group (Xcode)

항목	Folder (파란색)	Group (회색)
기본 적용 버전	Xcode 16부터 기본	Xcode 15 이하에서 기본
파일 시스템 반영	실제 macOS 파일 시스템에도 동일한 폴더 구조로 생성됨	Xcode 프로젝트 내에서만 존재하며, 실제 파일 시스템과 일치하지 않을 수 있음
Git 병합 충돌	상대적으로 적음	프로젝트 파일 (`.xcodeproj`) 자체 변경이 많아져 충돌 위험 높음
프로젝트 내 정렬	이름 기준 자동 정렬 (알파벳 순)	수동 정렬 가능 (개발자 자유 배치)
협업 시 장점	Git 병합 충돌 최소화로 협업에 유리	협업 시 프로젝트 파일 충돌 가능성 큼
단점	파일 위치가 고정적이며, 커스텀 정렬 어려움	Git 충돌 시 해결이 까다롭고, 실수 가능성 있음

강의에선 Git 충돌을 줄이기 위해 Folder 방식을 선호
하지만 개인적으로 파일 정렬을 더 유연하게 관리하고 싶다면 Group 방식도 고려할 수 있음

Single Responsibility Principle (단일 책임 원칙)

정의
하나의 클래스, 구조체, 뷰, 파일 등은 오직 하나의 책임만을 가져야 하며, 하나의 이유로만 변경되어야 한다는 소프트웨어 설계 원칙.

예시

나쁜 예

  
struct CurrencyView: View {  
    var body: some View {  
        // 통화 아이콘 디자인  
        // 그리드 레이아웃 처리  
        // 통화 선택 화면 전체 구성  
    }  
}

모든 역할이 하나의 뷰에 몰려 있어 유지보수 및 재사용 어려움

좋은 예

  
struct CurrencyIconView: View {  
    // 통화 아이콘 디자인만 담당  
}

struct IconGridView: View {  
    // 여러 개의 아이콘을 그리드로 배치  
}

struct SelectCurrencyView: View {  
    // 전체 화면을 구성하며 위 컴포넌트를 조합  
}

각 뷰는 한 가지 역할만 하며, 명확한 책임 분리

장점

코드 가독성 향상
유지보수 용이
테스트 단위 작아짐 → 유닛 테스트 용이
재사용성과 확장성 향상

유연하게 적용하자

반드시 엄격히 적용할 필요는 없음.
상황과 프로젝트의 성격에 맞게 적용하면 됨.
핵심은 “파일/구조체/뷰가 너무 많은 역할을 하지 않도록 하는 것”

여기까지가 강의의 초반을 정리한 내용.

프로젝트에서는

폴더 구성하기

이번에는 기존 프로젝트와 달리 폴더를 만들고 swift파일들을 관리하려고 한다.

이후, 프로젝트에 필요한 파일을 넣어주자.

이번에도 역시 Swift 버전은 6으로.

모델링

이번에도 역시 json을 사용하기에 모델링을 해주도록한다.

  
struct Question: Decodable {
    let id: Int
    let question: String
    let answer: String
    let wrong: [String]
    let book: Int
    let hint: String
}

모델링은 다음과 같다.

앱 구현 플랜 세우기

이번에는 처음부터 플랜을 세우고 들어간다.

App Development Plan:
- Game Intro Screen
- Gameplay Screen
- Game logic (questions, scores, etc.)
- Celebration
- Audio
- Animations
- In-app purchases
- Store
- Instructions screen
- Books
- Persist scores

기능을 나열을 해보았다 (순서는 무관)

아마도 결과는 이렇게 나올듯

Instruction View 디자인

딱히 언급할 부분이 없어서 이건 전체 코드로 대체한다.

  
struct InstructionsView: View {
    @Environment(\.dismiss) private var dismiss
    
    
    var body: some View {
        ZStack {
            Image(.parchment)
                .resizable()
                .ignoresSafeArea()
                .background(.brown)
            
            VStack {
                Image(.appiconwithradius)
                    .resizable()
                    .scaledToFit()
                    .frame(width: 100)
                    .padding(.top)
                
                ScrollView {
                    Text("How To Play")
                        .font(.largeTitle)
                        .padding()
                    
                    VStack(alignment: .leading, spacing: 20) {
                        Text("Welcome to HP Trivia! In this game you will be asked random questions from the HP books and you must guess the right answer or you will lose points!😱")
                        
                        Text("Each question is worth 5 points, but if you guess a wrong answer, you lose 1 point.")
                        
                        Text("If you are struggling with a question, there is an option to reveal a hint or reveal the book that answers the question. But beware! Using these also removes 1 point each.")
                        
                        Text("When you select the correct answer, you will be awarded all the points left for that question and they will be added to your total score.")
                        
                    }
                    .font(.title3)
                    .padding(.horizontal)
                    
                    Text("Good Luck!")
                        .font(.title)
                }
                
                Button("Done") {
                    dismiss()
                }
                .font(.largeTitle)
                .padding()
                .buttonStyle(.borderedProminent)
                .tint(.brown.mix(with: .black, by: 0.2))
                .foregroundStyle(.white)
            }
       

이렇게 기초작업중 하나가 끝났다.

PhaseAnimator

우선 이렇게 디자인을 해준다.

  
struct ContentView: View {
    var body: some View {
        GeometryReader { geo in
            ZStack {
                Image(.hogwarts)
                    .resizable()
                    .frame(width: geo.size.width * 3, height: geo.size.height)
                    .padding(.top, 3)
            }
            .frame(width: geo.size.width, height: geo.size.height)
        }
        .ignoresSafeArea()
    }
}

코드는 이렇게 작성.

이제 여기서 조금 더 UI를 발전시키기위해 phaseAnimator Modifier를 사용한다.

padding 밑에 추가해주었다.

  
.padding(.top, 3)
.phaseAnimator([false, true]) { content, phase in
    content
        .offset(x: phase ? geo.size.width/1.1 : -geo.size.width/1.1)
} animation: { _ in
        .linear(duration: 60)
}

실행하면 아래와같다. (※ 아래 예시는 duration을 테스트용으로 2초로 설정)

이렇과 좌우로 움직인다.

phaseAnimator ?
- phaseAnimator는 SwiftUI에서 사용하는 뷰 애니메이션 도구로, 여러 상태(phase) 간 전환을 자동으로 반복하면서 애니메이션을 적용할 수 있다. Docs}는 여기
사용 목적
- 특정 뷰 속성을 상태별로 변화시켜 반복 애니메이션 생성
- 예: 이미지의 좌우 이동, 투명도 변화, 크기 변화 등

Parameters	설명
`phases`	순환할 상태(phase)들의 시퀀스. 비어 있으면 런타임 경고와 시각적 경고가 발생함
`content`	두 개의 인자를 받는 뷰 빌더 클로저: 수정된 뷰 프록시와 현재 phase
`animation`	phase 간 전환 시 사용할 애니메이션을 반환하는 클로저. `nil`이면 애니메이션 없음

강의에서는 일반적으로 2~3개의 상태를 사용하는 것이 일반적이라고 한다. 그리고 [false, true]를 사용한 이유는 Apple의 공식 예제 대부분이 false → true의 흐름으로 구성되어 있기 때문이다라고 한다.

Transition Animation

  
struct ContentView: View {
    @State private var animateViewsIn = false // new

    var body: some View {
        GeometryReader { geo in
            ZStack {
                // 생략

                VStack {
                    VStack {
                        if animateViewsIn {
                            VStack {
                                Image(systemName: "bolt.fill")
                                    .imageScale(.large)
                                    .font(.largeTitle)

                                Text("HP")
                                    .font(.custom("PartyLetPlain", size: 70))
                                    .padding(.bottom, -50)

                                Text("Trivia")
                                    .font(.custom("PartyLetPlain", size: 60))
                            }
                            .padding(.top, 70)
                            .transition(.move(edge: .top))
                        }
                    }
                    .animation(.easeInOut(duration: 0.7).delay(2), value: animateViewsIn)
                    
                    Spacer()
                }
            }
            .frame(width: geo.size.width, height: geo.size.height)
        }
        .ignoresSafeArea()
        .onAppear {
                animateViewsIn = true
        }
    }
}

이렇게 코드를 각성했다.

Transition
- SwiftUI에서 .transition(.move(edge: .top))은 뷰가 화면에 등장하거나 사라질 때 애니메이션 효과를 적용하는 데 사용된다. 단, 다음 조건이 충족되어야 제대로 작동한다:
  - 뷰는 if 조건을 통해 삽입/삭제되어야 함
  - 해당 if를 감싸는 외부 뷰에 .animation(_:value:)이 있어야 함
Transition 작동을 위한 필수 구성 요소
1. @State로 Boolean 변수 선언
2. .onAppear에서 상태값 변경 (withAnimation 사용하거나 외부에서 .animation() 적용)
3. if 문으로 뷰 조건 분기
4. .transition(.move(edge: .top)) 적용
5. .animation(_:value:)을 if문을 감싼 외부 VStack에 적용

Group 대신 VStack을 쓴 이유
Group은 여러 뷰를 묶는 데 쓰이는 경량 컨테이너이지만, 애니메이션 트리거와 관련해 다음과 같은 문제가 발생할 수 있다:
내부 상태 변화 감지가 불안정할 수 있음
.animation(_:value:)을 붙여도 기대한 대로 동작하지 않을 수 있음
그래서 강의에서는 Group 대신 VStack을 사용하여 더 안정적으로 작동하게 했다.

코드를 보며 간단히 작동에 대해 알아보기

  
GeometryReader { geo in
    ZStack {
        // 생략
        VStack {
            VStack {
                if animateViewsIn {
                    VStack {
                        // 생략
                    }
                    .padding(.top, 70)
                    .transition(.move(edge: .top))
                }
            }
            .animation(.easeInOut(duration: 0.7).delay(2), value: animateViewsIn)

            Spacer()
        }
    }
    .frame(width: geo.size.width, height: geo.size.height)
}
.ignoresSafeArea()
.onAppear {
        animateViewsIn = true
}

.transition()은 if 내부에 있는 뷰(VStack)에 적용됨
- 여기선 상단에서 움직이겠다는 것.
.animation(_:value:)은 if를 감싸는 외부 VStack에 적용되어야 하며, 해당 VStack이 나타날 때 easeInOut 애니메이션이 2초 뒤에 실행됨
if는 View가 아니므로 modifier를 붙일 수 없고, wrapping이 필요함
- 강의에서는 Group 대신 VStack을 사용하여 안정적인 애니메이션 처리를 유도함
.onAppear에서 상태값을 변경하여 애니메이션이 트리거됨

즉, value에 전달된 상태(animateViewsIn)가 false에서 onAppear때 true로 변경되면서 animation이 트리거되고, 해당 시점에 if 내부의 VStack이 생성되면서 위에서 내려오는 애니메이션과 함께 화면에 나타난다.

그리고 혹시나 초기값을 true로 설정하면 !animateViewsIn처럼 부정 조건을 써야 해서 코드 흐름이 직관적으로 읽히지 않고, 전환 시점도 명확하지 않다.

실행하면 아래와 같이 된다.

참고
- Animations Docs
- Transition Docs
- animation(Method) Docs 위의 Docs와는 다름
- withAnimation Docs

.animation vs withAnimation

갑자기 문득 간단히 정리하면 좋을것 같아 여기에 적어본다.

withAnimation
- SwiftUI의 함수 기반 애니메이션 트리거
- 내부 클로저에서 발생하는 상태 변화가 뷰를 바꾸면, 해당 변화에 애니메이션 적용
- 주로 onAppear, onTapGesture, Button 액션 등 이벤트성 동작과 함께 사용됨

예시:

  
withAnimation(.easeInOut) {
    isVisible.toggle()
}

isVisible의 변경으로 인해 if isVisible 조건 하의 뷰가 삽입 또는 제거되면, 해당 뷰에 transition이 적용되어 애니메이션 발생

.animation(_:value:)
- SwiftUI의 modifier 기반 선언적 애니메이션
- 특정 상태값(value)의 변화가 해당 뷰 트리의 외형 변화로 이어질 경우, 애니메이션 적용
- if 조건이 바뀌는 것처럼, 뷰의 등장/퇴장이 조건에 따라 바뀌는 상황에 적합

예시:

  
.animation(.easeInOut, value: isVisible)

isVisible이 바뀔 때, 이 값을 기준으로 뷰 트리 변화가 생기면 transition과 함께 애니메이션 처리

요약

항목	withAnimation	.animation(_:value:)
타입	함수	modifier
위치	상태 변경을 감싸는 클로저	View 트리에 직접 적용
주 용도	이벤트 기반 애니메이션 트리거	상태 변화 기반 뷰 업데이트 감지

Udemy, SwiftUI

SwiftUI