2016. 9. 23. 10:25ㆍmobile/ios
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
|
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.
|
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에 무지한 상태에서 구글링만으로 앱 개발 및 포스팅이 진행됨 누구나 따라할 수 있겠지만 결코 완벽한 정답이 아닐 수 있음 아주 주관적인 입장에서의 포스팅임 |