🏫 학교 대항전

📖 목차

1. 소개
2. 개발환경 및 라이브러리
3. Tree
4. 키워드
5. 타임라인
6. 실행화면
7. 트러블슈팅

🌱 소개

학교를 선택하고 게임화면으로 가서 화면을 터치하며 점수를 올리는 앱입니다.

🧑🏻‍💻 팀원

최동호	황성진	김성엽	김혜란	윤준성

⚙️ 개발 환경 및 라이브러리

🌲 Tree

📦TouchSchool
┣ 📂iOS
┃ ┣ 📂AD
┃ ┃ ┣ 📜BannerView.swift
┃ ┃ ┗ 📜BannerViewController.swift
┃ ┣ 📂Game
┃ ┃ ┣ 📜GameVM.swift
┃ ┃ ┗ 📜GameView.swift
┃ ┣ 📂Helpers
┃ ┃ ┣ 📂Font
┃ ┃ ┃ ┣ 📜Giants-Bold.otf
┃ ┃ ┃ ┗ 📜Recipekorea.ttf
┃ ┃ ┣ 📂Sound
┃ ┃ ┃ ┣ 📜buttomBGM.mp3
┃ ┃ ┃ ┣ 📜buttonBGM.mp3
┃ ┃ ┃ ┣ 📜errorBGM.mp3
┃ ┃ ┃ ┗ 📜mainBGM.mp3
┃ ┃ ┣ 📜ActivityIndicator.swift
┃ ┃ ┣ 📜Audio.swift
┃ ┃ ┣ 📜Colors.swift
┃ ┃ ┣ 📜Helpers.swift
┃ ┃ ┣ 📜infoView.swift
┃ ┃ ┣ 📜MultitouchRepresentable.swift
┃ ┃ ┗ 📜MultitouchView.swift
┃ ┣ 📂Main
┃ ┃ ┣ 📜MainVM.swift
┃ ┃ ┗ 📜MainView.swift
┃ ┣ 📂Model
┃ ┃ ┣ 📜School.swift
┃ ┃ ┗ 📜Smoke.swift
┃ ┣ 📂Rank
┃ ┃ ┗ 📜RankView.swift
┃ ┗ 📂Search
┃ ┃ ┣ 📜FirebaseManager.swift
┃ ┃ ┣ 📜SearchBar.swift
┃ ┃ ┣ 📜SearchGuide.swift
┃ ┃ ┣ 📜SearchVM.swift
┃ ┃ ┗ 📜SearchView.swift
┣ 📜ContentView.swift
┣ 📜GoogleService-Info.plist
┣ 📜Info.plist
┗ 📜TouchSchoolApp.swift

🔑 키워드

• MVVM
• URLSession
• Alamofire
• Firebase

⏰ 타임라인

Step 1 타임라인

• 23.10.11 ~ 23.10.17
  • 프로젝트 시작
  • 학교검색화면 구현
  • 메인화면 구현
• 23.10.19 ~ 23.10.26
  • 초,중,고등학교 데이터 가져와서 저장
  • URLSession -> Alamofire 라이브러리 적용
  • 학교정보 검색 시 필터링 기능 구현

Step 2 타임라인

• 23.11.02 ~ 23.11.03
  • Firebase와 데이터 주고 받는 함수들 구현
  • 학교 선택 시 Firebase에 추가 및 데이터 연결
  • 배경화면 수정
  • 깃 컨벤션 템플릿 추가
• 23.11.06 ~ 23.11.15
  • 랭킹 화면 추가
  • 게임 기능 구현 완료
  • 앱 실행 시 메인화면이 먼저나오도록 로직 수정
• 23.11.16
  • 앱 종료 후 들어왔을 때 데이터 남게 수정
  • 터치시 이벤트 추가

Step 3 타임라인

• 23.11.17
  • 비정상적인 값 검출 및 초기화 기능 구현
• 23.11.19 ~ 23.11.21
  • UI 수정 및 sound데이터 추가
  • 게임 화면 터치 애니메이션 추가
• 23.11.22
  • 메인BGM, 터치BGM, 오류BGM 추가
  • 게임화면 멀티터치 기능 구현
  • 앱 아이콘 생성
• 23.11.23
  • 커스텀 폰트 적용
  • Sound 인스턴스 생성 후 재사용 로직으로 변경
  • 오디오 재생 백그라운드 스레드에서 처리

📱 실행 화면

앱 실행	학교선택

게임화면	랭킹화면

❓ 트러블 슈팅

Step1

GameView 멀티 터치가 안되던 이슈

• GameView에서 화면을 터치할 때 여러 손가락으로 화면을 터치하면 먹히는 현상이 있었습니다.

• SwiftUI는 직접적인 멀티터치 처리를 위한 API를 제공하지 않기에 기본적인 onTapGesture 대신에 더 낮은 수준의 이벤트 처리를 사용했습니다.

• 멀티터치 기능을 활성화하기 위해 UIViewRepresentable프로토콜을 준수하는 MultitouchRepresentable과 UIView의 하위 클래스인 MultitouchView를 추가했습니다.

• makeUIView(context:) 이 메소드는 MultitouchView 생성을 담당합니다. MultitouchView의 touchBegan 클로저를 설정합니다. 이 클로저는 MultitouchView에서 터치가 시작될 때마다 호출됩니다.

structMultitouchRepresentable:UIViewRepresentable{vartouchBegan:((CGPoint)->Void)func makeUIView(context:Context)->MultitouchView{letview=MultitouchView()
view.touchBegan = touchBegan
return view
}func updateUIView(_ uiView:MultitouchView, context:Context){}}

• isMultipleTouchEnabled = true 이 코드를 통해 뷰가 여러 개의 동시 터치 이벤트를 감지할 수 있었습니다.
• touchesBegan(_:with:) 이는 뷰에서 새로운 터치가 감지될 때마다 호출되는 UIView의 메서드를 재정의합니다. 이 메서드는 각 터치를 처리하고 터치 위치와 함께 touchBegan클로저를 호출합니다.

import UIKit
classMultitouchView:UIView{vartouchBegan:((CGPoint)->Void)?overrideinit(frame:CGRect){
super.init(frame: frame)
isMultipleTouchEnabled =true}requiredinit?(coder:NSCoder){fatalError("init(coder:) has not been implemented")}overridefunc touchesBegan(_ touches:Set<UITouch>, with event:UIEvent?){
touches.forEach{ touch inletlocation= touch.location(in:self)touchBegan?(location)}}}

• 사용자가 화면을 터치할 때마다 MultitouchView의 touchesBegan(_:with:)가 호출되고, 이는 차례로 touchBegan클로저를 호출하게 됩니다.
• 이 코드를 통해 여러 터치 이벤트를 동시에 감지하고 응답할 수 있게 해결했습니다.

Step 2

터치 효과음 관련 에러

• SoundSetting 클래스에서 playSound메서드로 버튼을 클릭하면 효과음이 나오는 효과를 주려고했습니다.
• playSound 메서드에서는 매번 새로운 `AVAudioPlayer 인스턴스를 생성하고 있었고, 이는 비효율적이며 성능 저하를 일으키고 있었습니다.
• 또, playSound 메서드가 메인 스레드에서 오디오를 재생하여 화면이 뚝뚝 끊기는 문제가 있었습니다.

//변경 전
classSoundSetting:ObservableObject{staticletinstance=SoundSetting()varplayer:AVAudioPlayer?enumSoundOption:String{case mainBGM ="mainBGM"case buttonBGM ="buttonBGM"case errorBGM ="errorBGM"}func playSound(sound:SoundOption){guardlet url =Bundle.main.url(forResource: sound.rawValue, withExtension:".mp3")else{return}do{
player =tryAVAudioPlayer(contentsOf: url)
player?.play()
player?.volume =1}catch{print("재생하는데 오류가 발생했습니다. \(error.localizedDescription)")}}

• 각 사운드별로 AVAudioPlayer 인스턴스를 사전에 생성하고 저장하는 방식으로 SoundSetting 클래스를 수정했습니다.
• 또한, 오디오 재생을 백그라운드 스레드에서 수행하도록 변경했습니다.

// 수정 후
classSoundSetting:ObservableObject{staticletinstance=SoundSetting()privatevarplayers:[SoundOption:AVAudioPlayer]=[:]enumSoundOption:String,CaseIterable{case mainBGM ="mainBGM"case buttonBGM ="buttomBGM"case errorBGM ="errorBGM"}init(){forsoundinSoundOption.allCases {iflet url =Bundle.main.url(forResource: sound.rawValue, withExtension:"mp3"){do{letplayer=tryAVAudioPlayer(contentsOf: url)
player.prepareToPlay()players[sound]= player
}catch{print("오디오 플레이어 초기화 실패: \(error)")}}else{print("사운드 파일 로드 실패: \(sound.rawValue).mp3")}}}func playSound(sound:SoundOption){DispatchQueue.global().async{iflet player =self.players[sound], !player.isPlaying {
player.play()
player.volume =0.1}}}}

Step 3

배포 후 이용자 후기로 알게된 오류

• GameView에서 화면을 아주 많이 터치하다보면 어느순간부터 화면이 버벅이고 멈추는 현상이 있었습니다.
• 팀원분들과 제작하면서 테스트를 할 때는 기능만 동작하는것만 확인되면 뒤로 돌아가 다른 기능 테스트를 진행하였기에 몰랐었던 오류였습니다.
• 초기 상태: smokes 배열에 화면 탭 이벤트마다 새로운 Smoke 객체가 추가되어 사용자가 화면을 많이 탭할수록 배열의 크기가 계속 증가하는 상태였습니다.
• 배열의 크기가 커질수록, 각 탭 이벤트에 대해 더 많은 SmokeEffectView 인스턴스를 렌더링해야 했고, 이로 인해 UI가 버벅이는 성능 문제가 발생했습니다.

// 수정 전
ForEach(smokes.indices, id: \.self){ index inletsmoke=smokes[index]if smoke.showEffect {SmokeEffectView().rotationEffect(.degrees(smoke.angle)).opacity(smoke.opacity).offset(x: smoke.location.x - UIScreen.main.bounds.width /2,
y: smoke.location.y - UIScreen.main.bounds.height /2).onAppear{withAnimation(.linear(duration:1)){smokes[index].opacity =0smokes[index].angle +=30}}}}privatefunc handleTap(location:CGPoint){letangle=Double.random(in:-30...30)
// Smoke 객체를 계속하여 추가
smokes.append(Smoke(location: location,
showEffect:true,
angle: angle,
opacity:1))
myTouchCount +=1
soundSetting.playSound(sound:.buttonBGM)
vm.newAdd()withAnimation{self.animationAmount +=360}

해결방법

• 어떻게 해결해야할지 계속 생각하다가 FPS 게임에서 벽에 총을 계속하여 쏘다보면 총자국이 처음 쐈던거부터 사라지는게 생각이 났습니다.
• 배열 크기 제한: 먼저 smokes 배열의 크기를 30으로 제한하였습니다.
• 코드 변경: handleTap 함수에서 새로운 Smoke 객체를 배열에 추가하기 전에 배열의 크기가 이미 30이면, 가장 오래된 요소(0번 인덱스)를 제거합니다. 그런 다음 새로운 요소를 배열에 추가합니다.
• 결과: 이 방식은 smokes 배열의 크기를 일정하게 유지하여 각 탭 이벤트에 대해 일정한 수의 SmokeEffectView 인스턴스만 렌더링하도록 보장하였고, 화면이 버벅이는 문제를 해결할 수 있었습니다.

// 수정 후
ForEach(smokes){ smoke inif smoke.showEffect {SmokeEffectView(smoke: smoke).rotationEffect(.degrees(smoke.angle)).opacity(smoke.opacity).offset(x: smoke.location.x - UIScreen.main.bounds.width /2,
y: smoke.location.y - UIScreen.main.bounds.height /2).onAppear{withAnimation(.linear(duration:1)){smokes[smokes.firstIndex(where:{ $0.id == smoke.id })!].opacity =0smokes[smokes.firstIndex(where:{ $0.id == smoke.id })!].angle +=30}}}}privatefunc handleTap(location:CGPoint){letangle=Double.random(in:-30...30)letnewSmoke=Smoke(location: location,
showEffect:true,
angle: angle,
opacity:1)
// 배열의 크기가 이미 30이면, 가장 오래된 요소(0번 인덱스)를 제거
if smokes.count >=30{
smokes.removeFirst()}
smokes.append(newSmoke)
myTouchCount +=1
soundSetting.playSound(sound:.buttonBGM)
vm.newAdd()withAnimation{self.animationAmount +=360}}