ios도 모르고 하이브리드 앱 개발하기 [ 16 Xcode 에서 아이콘 수정 (변경) / Asset Catalog Creator Free ]





Xcode 에서 아이콘을 수정(변경)해 보자. (이미지 위주 설명이라 스크롤 압박이...)


* Asset Catalog Creator Free 를 이용한다.




먼저 Xcode 에서 아이콘을 변경할 수 있는 곳을 찾아보자.


Xcode > 프로젝트창 > Assets.xcassets 파일을 클릭

그럼 아래와 같은 화면이 나온다.

각각 종류에 맞는 사이즈의 아이콘을 만들어 넣으면 된다.


별거 아니였군...

 




혹시나 사이즈를 알면 만들수 있는 사람들을 위해서 IOS 아이폰 아이콘 사이즈표를 가져와봤다. (패드 등 다른 사이즈 확인은 출처로 이동)


출처 : https://developer.apple.com/library/content/qa/qa1686/_index.html#top

Table 1  iPhone-only app icon requirements.

Image Size (px)

File Name

Used For

App Store

Ad Hoc

512x512

iTunesArtwork

App list in iTunes

Do not include

Optional but recommended

1024x1024

iTunesArtwork@2x

App list in iTunes on devices with retina display

Do not include

Optional but recommended

120x120

Icon-60@2x.png

Home screen on iPhone/iPod Touch with retina display

Required

Required

180x180

Icon-60@3x.png

Home screen on iPhone 6 Plus

Optional but recommended

Optional but recommended

76x76

Icon-76.png

Home screen on iPad

Optional but recommended

Optional but recommended

152x152

Icon-76@2x.png

Home screen on iPad with retina display

Optional but recommended

Optional but recommended

40x40

Icon-Small-40.png

Spotlight

Optional but recommended

Optional but recommended

80x80

Icon-Small-40@2x.png

Spotlight on devices with retina display

Optional but recommended

Optional but recommended

120x120

Icon-Small-40@3x.png

Spotlight on iPhone 6 Plus

Optional but recommended

Optional but recommended

29x29

Icon-Small.png

Settings

Recommended if you have a Settings bundle, optional otherwise

Recommended if you have a Settings bundle, optional otherwise

58x58

Icon-Small@2x.png

Settings on devices with retina display

Recommended if you have a Settings bundle, optional otherwise

Recommended if you have a Settings bundle, optional otherwise

87x87

Icon-Small@3x.png

Settings on iPhone 6 Plus

Recommended if you have a Settings bundle, optional otherwise

Recommended if you have a Settings bundle, optional otherwise

In addition to the above icons, iPhone-only applications with a deployment target of iOS 6.1 or earlier use the following icons. Items marked with "Required" must be included if the application's deployment target is iOS 6.1 or earlier.

Table 2  iPhone-only app icon requirements (iOS 6.1 and earlier).

Image Size (px)

File Name

Used For

App Store

Ad Hoc

57x57

Icon.png

Home screen on iPhone/iPod touch (iOS 6.1 and earlier)

Required

Required

114x114

Icon@2x.png

Home screen on iPhone/iPod Touch with retina display (iOS 6.1 and earlier)

Optional but recommended

Optional but recommended

72x72

Icon-72.png

Home screen on iPad (iOS 6.1 and earlier)

Optional but recommended

Optional but recommended

144x144

Icon-72@2x.png

Home screen on iPad with retina display (iOS 6.1 and earlier)

Optional but recommended

Optional but recommended

29x29

Icon-Small.png

Spotlight on iPhone/iPod Touch (iOS 6.1 and earlier) and Settings

Recommended if you have a Settings bundle, otherwise optional but recommended

Recommended if you have a Settings bundle, otherwise optional but recommended

58x58

Icon-Small@2x.png

Spotlight on iPhone/iPod Touch with retina display (iOS 6.1 and earlier) and Settings on devices with retina display

Recommended if you have a Settings bundle, otherwise optional but recommended

Recommended if you have a Settings bundle, otherwise optional but recommended

50x50

Icon-Small-50.png

Spotlight on iPad (iOS 6.1 and earlier)

Optional but recommended

Optional but recommended

100x100

Icon-Small-50@2x.png

Spotlight on iPad with retina display (iOS 6.1 and earlier)

Optional but recommended

Optional but recommended

포토샵좀 할 줄 알면 그냥 이미지 사이즈 조정해서 넣으면 된다.


나는 포토샵을 할 줄 안다 ㅋㅋ


하지만 누구나 할 수 있는 쉬운 방법을 설명하는 것이 목적이기 때문에...


사실 내가 사용하는 맥북에는 포토샵이 없다 ㅠㅠ








포토샵을 할 줄 모른다 하는 사람은 이제 여기부터 읽어보면 된다.


Xcode 에 아이콘을 만들어서 적용시키기 위해서 Asset Catalog Creator Free 라는 프로그램을 사용할 계획이다.


이 프로그램은 이미지를 필요한 아이콘의 사이즈별로 생성해준다.


아이폰에서 아이패드용 아이콘까지 모두 제작가능하다.



첫번째로 할 일은 아이콘으로 사용할 이미지를 준비한다.

나는 애플에서 영감을 얻어 만들었다는 배 아이콘을 준비했다. (저작권이 없는 무료 이미지입니다)





아까 말한 Asset Catalog Creator Free 를 다운받아야 한다.

https://itunes.apple.com/kr/app/asset-catalog-creator-free/id866571115?mt=12

위 주소로 접속하면 아래와 같은 페이지로 이동한다.

Mac App Store 에서 보기 클릭





App Store 에서 아래 페이지로 이동된다.

설치 버튼 클릭





혹시나 이런 약관 동의 페이지가 나오면 동의를 누르고 다시 설치를 시도한다.





설치가 완료되면 열기 버튼으로 바뀐다.

열기 버튼을 클릭





처음 실행하면 이런 팝업이 나온다.

당황하지 말라.

리뷰를 원하는 팝업이니...

리뷰를 남기고 싶다면 Rate Now 클릭





아래 이미지 중 좌측에 있는게 Asset Catalog Creator Free 이다.

준비한 아이콘으로 사용할 이미지를 드래그 앤 드롭한다.





그럼 자동으로 이미지를 인식한다.

아이콘들을 만들어서 저장할 경로를 잘 선택하고

맨 아래 Create Asset Catalog를 클릭





위에서 지정한 경로에 Media.xcassets 폴더가 생성됐다.





생성된 Media.xcassets 폴더를 가지고

Xcode로 돌아와서 프로젝트 하위레벨로 드래그 앤 드롭한다.





파일을 복사할 옵션을 선택하고 Finish 클릭





복사된 Media.xcassets 를 클릭해보자.

다음과 같이 여러 종류에 맞게 자동으로 아이콘들이 배치된 모습을 볼 수 있다.





이제 실행하면 아이콘이 변경된 것을 확인할 수 있다.














 * 경고


IOS에 무지한 상태에서 구글링만으로 앱 개발 및 포스팅이 진행됨


누구나 따라할 수 있겠지만 결코 완벽한 정답이 아닐 수 있음


아주 주관적인 입장에서의 포스팅임



'mobile > ios' 카테고리의 다른 글

ios | ios도 모르고 하이브리드 앱 개발하기 [ 21.1 APNS 구현 - APNS 인증서 만들기 ]  (0) 2016.10.07
ios | ios도 모르고 하이브리드 앱 개발하기 [ 20 키체인에서 인증서는 언제 유효해 질까? ]  (0) 2016.10.07
ios | ios도 모르고 하이브리드 앱 개발하기 [ 19 Provisioning 설정 후 Unable to install "project name" 에러 ]  (0) 2016.10.07
ios | ios도 모르고 하이브리드 앱 개발하기 [ 18 아이폰으로 테스트 하기 / Xcode에 아이폰 연결 / 디바이스 테스트 ]  (6) 2016.10.04
ios | ios도 모르고 하이브리드 앱 개발하기 [ 17 아이폰 해상도별 storyboard 설정 / 디바이스 해상도 설정 ]  (0) 2016.10.04
ios | ios도 모르고 하이브리드 앱 개발하기 [ 16 Xcode 에서 아이콘 수정 (변경) / Asset Catalog Creator Free ]  (0) 2016.09.23
ios | ios도 모르고 하이브리드 앱 개발하기 [ 15 Xcode static 변수 / extern 변수 / static 함수 ]  (0) 2016.09.22
ios | ios도 모르고 하이브리드 앱 개발하기 [ 14 AppDelegate에서 ViewController 사용하기 / AppDelegate란 ]  (2) 2016.09.21
ios | ios도 모르고 하이브리드 앱 개발하기 [ 13 NSUserDefaults 사용하여 데이터 저장하고 읽기 ]  (0) 2016.09.19
ios | ios도 모르고 하이브리드 앱 개발하기 [ 12 webview에서 네트워크 체크하기 ]  (0) 2016.09.19
ios | ios도 모르고 하이브리드 앱 개발하기 [ 11 webview와 javascript간의 상호 호출하기 ]  (0) 2016.09.19
by 개발자 CofS 2016.09.23 10:25