iOS에서 투명한 상태 표시줄과 내비게이션 바 만드는 방법

iOS에서 투명한 상태 표시줄과 내비게이션 바 만드는 방법

앱을 사용하다 보면 화면 콘텐츠가 전체 화면까지 확장되어, 상태 표시줄(Status Bar)과 내비게이션 바(Navigation Bar)가 투명하게 처리된 앱을 종종 볼 수 있습니다. 이 글에서는 iOS 앱에서 상태 표시줄과 내비게이션 바를 투명하게 만드는 방법을 단계별로 살펴보겠습니다.

그럼 바로 시작해 보겠습니다.

1단계: Xcode에서 새 프로젝트 생성하기

Xcode를 실행하고 New Project → Single View Application을 선택한 뒤, 프로젝트 이름을 "TransparentViews"로 지정합니다.

2단계: 내비게이션 컨트롤러와 이미지 뷰 추가하기

View Controller를 Navigation Controller로 임베드(Embed)합니다. 그다음 Image View를 추가하고 원하는 이미지를 넣어주세요.

3단계: 코드 추가 없이 앱 실행하기

상태 표시줄과 내비게이션 바를 투명하게 만드는 코드를 아무것도 추가하지 않은 상태로 먼저 앱을 실행해 봅니다.

이때 화면은 아래와 같이 기본 스타일로 표시됩니다.

4단계: ViewController.swift에 코드 추가하기

이제 ViewController.swift 파일을 열고 viewDidLoad 메서드에 아래 코드를 추가합니다.

override func viewDidLoad(){
   super.viewDidLoad()
   self.navigationController!.navigationBar.setBackgroundImage(UIImage(), for: .default)
   self.navigationController!.navigationBar.shadowImage = UIImage()
   self.navigationController!.navigationBar.isTranslucent = true
}

코드가 하는 역할을 간단히 설명하면 다음과 같습니다.

• setBackgroundImage(UIImage(), for: .default): 내비게이션 바의 배경 이미지를 빈 이미지로 설정하여 배경색을 제거합니다.
• shadowImage = UIImage(): 내비게이션 바 하단의 그림자 선을 제거합니다.
• isTranslucent = true: 내비게이션 바를 반투명으로 설정해 뒤에 있는 콘텐츠가 비치도록 합니다.

5단계: 앱 실행 후 결과 확인하기

코드를 추가한 뒤 앱을 다시 실행하면, 상태 표시줄과 내비게이션 바가 투명하게 변경되어 이미지가 화면 전체에 자연스럽게 확장된 것을 확인할 수 있습니다.

이처럼 몇 줄의 코드만으로도 iOS 앱에서 몰입감 있는 전체 화면 UI를 손쉽게 구현할 수 있습니다.