Today I Learned

20210524 - The complete iOS App Development Bootcamp 시작

돌맹이시터 2021. 5. 24. 22:52

 

udemy에서 결제해두었던 iOS&Swift - The Complete iOS App Development Bootcamp 강의를 시작한 날

인트로 부분과 관련 자료는 읽어두었었고, 본격적으로 과정을 시작했다.

 

한 개발자가 장난삼아 올렸던 'I am Rich App'따라 만들기로 시작한다.

 

책을 통해 swift 언어를 하나씩 배우는 것이 아니라, 

무작정 부딪히면서 배워나가는 컨셉이 이 부트캠프의 핵심인 것 같다.

 

 

먼저 Xcode에서 프로젝트를 생성했는데,

interface를 SwiftUI가 아닌, Storyboard로 선택해서 생성했다.

SwiftUI는 나중에 다루는 듯 하다.

 

 

 

 

생성된 프로젝트 중 Main.storyboard에서 UI를 만들었는데,

각종 라이브러리를 추가하거나,

Image View를 추가한 뒤, 사진파일 등을 추가할 수 있다.

 

Document outline 영역에서 항목을 선택하고, 

inspector pane 영역을 통해 여러가지 속성이나 사이즈, 위치 등을 조절할 수도 있다.

 

 

 

Image view에 'I am rich' 앱에서 사용할 사진을 넣을건데

Navigation pane 영역에 있는 Assets.xcassets 폴더에 사용할 사진을 넣어준다.

(navigation pane에서 폴더 선택, document outline 영역에 드래그&드롭)

 

 

어플은 다양한 아이폰에서 사용될텐데,

기종에 따라 적용된 해상도가 다르기 때문에 1x,2x,3x에 해당하는 파일을 모두 넣어줘야 한다.

-----

1x ==> 1pt : 1px

2x ==> 1pt : 4px(2x2)

3x ==> 1pt : 9px (3x3)

-----

 

만약 한 개의 사진파일로 모든 기종에서 사용되도록 할 경우

업스케일/다운스케일과 같은 과정을 거쳐야 하기 때문에

메모리 사용량이 늘어나서 결국 어플의 성능에 영향을 줄 수 있기 때문에 애플에서 고안한 규칙인 듯 하다.

 

 

http://appicon.co 

에서 그림파일의 image set을 만들어서 3개의 파일을 Assets.xcassets에 넣어주었더니

Xcode에서 자동으로 3개의 파일을 한데 묶어서 인식했다.

 

여기까지 진행하면 

이 파일을 Main.storyboard에서 asset으로 사용할 수 있게 된다.

 

 

document outline 영역에서 추가해두었던 image view를 선택하고,

Inspector pane 영역에 있는 attributes inspector 영역에 들어가서,

image를 선택하여 Assets.xcassets 폴더에 방금 등록한 사진파일을 사용한다.

 

 

 

다시 돌아가서,

Assets.xcassets 폴더를 선택하여 document outline 영역에 있는 AppIcon을 선택해보면 

각종 기기에 맞는 이미지를 모두 넣게 되어있다.

 

 

 

강의에서 제공한 파일을 살펴보면,

파일명이 특정 방식으로 입력되어 있는 것을 알 수 있고

Xcode에서 Assets.xcassets - AppIcon에 이 파일들을 한 번에 등록하면 

파일명을 통해 자동으로 각각 기기에 해당하는 사진파일이 등록된다.

 

자동으로 등록되지 않는 경우 

경고아이콘이 붙으면서 혼자 떨어져있는데, 원하는 항목으로 이동시켜주면 수동으로 설정할 수 있게 된다.

 

 

1024x1024 px의 아이콘을 만들고,

AppIcon generator를 사용해 appicon을 만들어서 넣어주었다.

 

생성된 Assets.xcassets 폴더를 통째로 프로젝트로 옮겨주면 된다.

 

 

'Today I Learned' 카테고리의 다른 글

20210529 - code를 이용해 어플디자인 변경하기2  (0) 2021.05.30
20210528 - code를 이용해 어플디자인 변경하기1  (0) 2021.05.29
20210527  (0) 2021.05.28
20210526  (0) 2021.05.27
210525 - 어플 테스트하는 방법  (0) 2021.05.26