Udemy iOS 강의 - 섹션 2(Storyboard)

빨간 새 아이콘 -> Swift 프로그래밍 파일

노란색 아이콘 -> 디자인 파일

Main과 LaunchScreen 차이

LaunchScreen은 화면이 로딩될 때 처음에만 뜨고 사라지는 화면

Main에서 앱의 디자인을 진행하면 됨

 

오른쪽 상단에 + 버튼을 누르면 다양한 iOS 구성요소를 선택할 수 있음

 

아이폰 기종에 따른 points, pixels

https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions

• 포인트: 앱에서 보이는 크기
• 픽셀: 화면의 전구(light bulb) 개수, 많아질수록 화면이 선명해짐

아이폰의 해상도가 향상되면서 같은 화면에 픽셀 수가 늘어났음

즉, 화면 크기는 같은데 더욱 화질이 좋아진 것

ImageView에 이미지 추가하기

Assets폴더에 ImageView에 넣고 싶은 이미지 드래그

→ 1x, 2x, 3x에 사진 추가

→ Main의 ImageView 클릭

→ 우측 Attribute Inspector

→ Image 드롭박스 누르면 추가한 이미지가 보임

→ 선택

1x, 2x, 3x?

Assets에 이미지를 넣었을 때, 1x, 2x, 3x를 볼 수 있음

즉, 3x 버전이 300px * 300 px 이미지라면, 200px * 200px로 축소해서 2x 버전으로 저장하고, 100px * 100px로 축소해서 1x 버전으로 저장함. 그래서 앱에서 실제로 사용할 수 있는 최대 크기는 100px * 100px이 될 것

왜? 아이폰은 어디에 디스플레이되느냐에 따라 이미지를 얼마나 압축할지가 결정되기 때문.

300px * 300px를 작은 아이폰에서 100px * 100px로 줄여서 보여주면 처음부터 100px * 100px이었던 이미지를 보여주는 것보다 훨씬 선명해보일테니까.

 

App Icon Genterator(appicon.co)로 가면 이미지 자산을 생성하는 온라인 툴

Image sets에서 이미지가 필요한 플랫폼을 선택하면 됨

이미지를 드래그앤드롭하고, generate하면 1x, 2x, 3x 이미지를 자동으로 생성함

App Icon 생성

Canva.com에서 원하는 크기의 이미지를 간단하게 생성할 수 있음.

전문가들이 만들어 놓은 템플릿을 무료로 사용할 수 있는 유용한 사이트

이미지를 생성하고 앞서 언급한 App icon Generator에 이미지를 추가하면 ..

아래와 같은 폴더가 생성됨!!

그러면 새로 생성된 Assets.xcassets 폴더 안에 있는 AppIcon.appiconset 폴더를 현재 프로젝트의 AppIcon 정보가 위치한 곳으로 가서 똑같이 Assets.xcassets - AppIcon.appiconset으로 대치해주면 됨! App icon Generator가 xcode의 네이밍 컨벤션에 따라 자동으로 폴더를 생성해주기 때문.

다운받은 AppIcon.appiconset을 실제 프로젝트 내 폴더로 이동한 모습

그렇다면 현재 프로젝트의 AppIcon 정보가 위치한 폴더는 어디에 있나? 아래처럼 Show in Finder를 누르면 알 수 있음

실제 아이폰으로 앱 실행하기

1. Xcode와 아이폰의 iOS 버전 매칭

→ 소수점 뒷자리가 일치하면 됨. ex) Xcode 11.0 - iOS 13.0 / Xcode 11.1 - iOS 13.1

(이해가 안 됨. 나는 현재 Xcode 14.3.1 - iOS 16.5.1이기 때문이지..)

2. 애플 개발자 계정 추가(무료)

→ Xcode - Settings - Accounts에 Apple ID 추가하기

3. 앱에 서명

→ 왼쪽에서 프로젝트명 선택 - TARGETS에 프로젝트명 선택 - Signing & Capabilities - Automatically manage signing 체크! - Team에는 방금 추가한 Apple ID 선택

위 에러는 실제 아이폰을 연결하고 Try Again을 누르면 해결됨!

4. 실제 아이폰과 맥 연결

→ 아이폰에 뜨는 신뢰버튼 누르기 - 시뮬레이터 선택할 때처럼 프로젝트명 누르고, 연결된 실제 디바이스 선택 - 끝

 

출처: https://www.udemy.com/course/ios-13-app-development-bootcamp/