스플래시 화면 이후 제대로 된 첫 화면 개발에 돌입. 먼저, 여러 화면에 두루 사용될 헤더 메뉴를 디자인하는 것으로 시작해본다.
스토리보드에서 헤더 메뉴 추가하기
스토리보드에 헤더 메뉴 추가
뒤로가기와 마이페이지로 가는 버튼을 포함한 조촐한 헤더 메뉴를 구성해보자. 스토리보드의 우측 상단에 + 버튼에서 UIView를 추가한다. UIView는 html에서 div와 같은 역할을 하는 것으로 추측된다...(아직 나도 잘 모르고 그냥 쓴다ㅋㅋㅋ) 좀 더 자세한 개념은 찾아보고 swift 카테고리에 정리해봐야겠다.
Constraints 추가로 위치 고정하기
UIView를 드래그앤드롭으로 스토리보드에 위치시킨 후 constraint를 추가하여 위치를 잡아준다. 위치 제약조건으로는 Top, Left, Right를 safearea 에 0px로 딱 붙여준다. 그리고 header 영역의 height는 60pt로 설정해준다.(처음엔 44pt로 설정했다가 너무 작아서 60으로 늘려주었다.)
viewcontroller 코드와 연결(IBOutlet, IBAction)
스토리보드에서 만든 UI 요소들을 코드에서 사용하려면, ViewController와의 연결이 필요하다. IBOutlet을 사용하여 headerView라는 이름으로 코드에서 액션을 지정할 수 있도록 @IBOutlet weak var headerView: UIView! 라는 코드를 한 줄 추가한다.
import UIKit
class GamingViewController: UIViewController {
@IBOutlet weak var headerView: UIView! // header menu IBOutlet
override func viewDidLoad() {
super.viewDidLoad()
headerView.backgroundColor = UIColor(white: 0.8, alpha: 1.0)
}
}
이렇게 하면 headerView.backgroundColor = UIColor(white: 0.8, alpha: 1.0)으로 헤더 메뉴의 배경색을 지정할 수 있다. 이 회색 배경색은 일단 개발 단계에서만 이렇게 두고, 디자인이 들어갈 때 수정하도록 해보자.
앱을 실행했을 때, 스플래시 화면이 1.5초간 보여지고 다음 화면으로 넘어가도록 하는 기능
프로젝트 착수 이후, 아직 로고도, 완벽한 기획도 없지만 바로 개발에 뛰어들었다. 무엇보다 swift를 이용한 iOS 앱 개발이 처음이었기에, 나름의 공부도 필요하기 때문에, 기획이 다 나오고 나서 재빠르게 개발이 뒤따라갈 수 있는 구조는 아니다. 그래서 xcode라는 개발환경에 친숙해질 겸, swift가 어떻게 돌아가는지도 알아볼 겸 디자인 하나없는 빈 앱의 뼈대를 세워나가기 시작했다.
먼저, Main.storyboard 파일에 두 개의 ViewController(SplashViewController.swift, GamingViewController.swift)를 추가하고, 대략적인 로고와 내용물(?)을 던져넣었다. 가장 먼저 할 일은 앱을 실행했을 때, 스플래시 화면이 2초간 보여지고 게임 중 화면으로 트랜지션 되도록 할 것.
Main.storyboard 구성
swift에는 LaunchScreen.storyboard라는 파일이 프로젝트 생성과 동시에 만들어져 있는데, 처음엔 여기에다 로고를 넣었더니 문제가 발생했다. 앱을 설치하고 최초 실행할때에는 LaunchScreen의 화면이 길게 보여지는데, 이후에는 정말 재빠르게 사라지는 문제가 있었다. 이를 해결하고자 Main.storyboard 파일에 스플래시 화면과 게임중 화면을 둘 다 집어넣은 것. 구글링을 좀 해보니 하나의 .storyboard 파일에 하나의 viewcontroller를 사용하는 것이 앱의 성능에 유리하다고 하는데, 우리의 사이드프로젝트는 많은 화면으로 구성되지 않을 듯하여(사실 아직 내가 잘 몰라서ㅋㅋ) 하나의 .storyboard에 두 개의 viewcontroller를 연결하였다.
SplashViewController.swift
첫 번째 viewcontroller는 Splash화면을 보여주는 뷰컨트롤러로, 1.5초 시간을 머물고 다음 화면인 게임중화면(GamingViewController.swift)로 넘어가도록 만들었다.
import UIKit
class SplashViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
// 1.5초 후에 게임중 화면으로 전환
DispatchQueue.main.asyncAfter(deadline: .now() + 1.5) {
self.transitionToGamingViewController()
}
}
func transitionToGamingViewController() {
let storyboard = UIStoryboard(name: "Main", bundle: nil)
if let gamingViewController = storyboard.instantiateViewController(withIdentifier: "GamingViewController") as? GamingViewController {
gamingViewController.modalTransitionStyle = .crossDissolve
gamingViewController.modalPresentationStyle = .fullScreen
self.present(gamingViewController, animated: true, completion: nil)
}
}
}
SceneDelegate.swift
SceneDelegate.swift에서 Main.storyboard를 최초 로드해서 띄워주도록 구성
