iOS개발하기 #10. 해상도 및 기기별 아이콘, 이미지 처리

오늘의 주제

1. 기기별 Icon추가 및 관리하기
2. 해상도별 이미지 처리

열 번째 시간입니다.

지난번에는 TabView기반 어플리케이션을 만들어 보았습니다~!

오늘은 지난 번에 다음 번에 얘기 해 보자고 한 이미지에 대해 얘기해 보려 합니다...ㅎㅎ

자 이제 본론으로 고고 ^^

# 어플리케이션 Icon관리하기

지난번에 만들어 놓았던 MyFirstTabbedApp을 이용해 볼까 합니다~

그 전에 아이콘 파일들에 대해 좀 살펴봐야 할 것 같아요~
제가 미리 만들어본 아이콘 파일들입니다.

이게 다 뭐냐구요?ㅋㅋ
설명해 드릴게요.
아이콘 안에 들어가 있는 숫자들은 아이콘 이미지의 크기입니다.
29 x 29  부터 114 x 114까지 다양하지요?
지금부터 설명 들어갑니다~!

파일명	사이즈	용도
Icon.png	57 * 57	iPod 터치 3세대 이하 iPhone3GS 이하  디스플레이의 홈화면 아이콘
Icon@2x.png	114 * 114	iPod 터치 4세대 이상 iPhone4 이상 Retina  디스플레이용 홈화면 아이콘
Icon-72.png	72 * 72	iPad 및 iPad2 홈화면 아이콘
Icon-Small.png	29 * 29	iPod 터치 3세대 이하 iPhone3GS 이하 스포트라이트용 아이콘
Icon-Small@2x.png	58 * 58	iPod 터치 4 이상 iPhone4 이상 Retina 스포트라이트용 아이콘
Icon-Small-50.png	50 * 50	iPad 및 iPad2 스포트라이트용 아이콘

조금 감이 오시나요?
아이콘 종류가 뭐가 이렇게 많냐구요?
기기별로 지원 해상도와 화면 크기가 다르기 때문이죠~
아, 그런데 물론 기본아이콘인 Icon.png하나만 넣어도 모든 기기에서 똑같은 아이콘을 볼 수 있긴 하지만 기기별로 아이콘이 약간 뭉그러져 보이거나 깨끗해 보이지 않을 수 있기 때문에 분리해서 넣어주는 거예요.
분리해서 안넣어준다고 쇠고랑 차지 않아요~
그냥 안이뻐 보이면 안좋으니까 하는거예요~
ㅋㅋㅋㅋㅋㅋㅋ

아, 또 스포트라이트가 뭐냐구요?
iOS의 기능 중에 하나인데, 홈화면에서 왼쪽으로 쭈욱 끝까지 화면 이동하면 검색하는 화면이 나올거예요.
거기가 스포트라이트 검색창입니다.
기기에 있는 모든 정보들을 검색할 수 있는 곳이죠.
그 목록에는 조금 작은 아이콘을 넣어놓으면 이미지 로딩 속도가 더 빠르기 때문에 스포트라이트용 아이콘을 따로 넣는 건데요, 사실~ 이것도 굳이 넣어주지 않아도 됩니다.

하지만 그냥 유저들을 위한 깨알같은 서비스?ㅋㅋㅋ
여튼 이렇게 여러 크기의 아이콘을 만드는 이유를 조금 이해하시나요?

제가 먼저 만든 아이콘은 파일 첨부 해 두었습니다^^

icons.zip

그럼 이 아이콘들을 직접 어플에 적용시켜 봅시다.

지난 번에 만들었던 어플을 다시 한 번 실행시켜 봅시다^^* (아, 물론 그냥 비어있는 어플 만드셔도 상관없습니다~)
 

일단 아이콘 이미지들을 넣어 줄 그룹을 생성했구요~

아이콘 파일들을 끌어다 넣어줍니다.
가져올때 복사에 체크 해 주시는거 잊지 마시구요~

 총 6개가 되겠죠?ㅎ

그런데... 이렇게 여섯개나 되는 파일을 일일히 저장하기 귀찮죠...ㅠㅠ
그런 분들을 위한 어플이 존재합니다~
Mac App Store에 가셔서 iConify라는 어플리케이션을 받아 설치하시면 한방에 모두 해결해 드립니다 ㅎㅎㅎ

iConify

또는 Icon Express를 이용하세요~

Icon Express

네비게이션 영역에서 MyFirstTabbedApp-Info.plist 파일을 찾아 클릭해 봅시다.
새로 프로젝트를 만드신 분들께서는 <ProjectName>-Info.plist 의 형식으로 자동생성이 되어있을거예요.
plist파일은 Property list 파일입니다. 즉, 속성값들을 갖고 있는 파일입니다.
지금 선택된 이 plist파일은 이 어플리케이션의 속성과 설정 값들을 저장하고 있는 파일이라고 생각하시면 됩니다~!
잘 보시면 Icon files라는 행이 보이실거예요.
오른쪽에 보시면 0 items라고 써있는게 보이구요~

우리는 6개를 넣어줄거니까요~
Icon files 좌측에 보시면 화살표가 보이는데, 아래로 향하도록 한번 클릭해 주시고~
Icon files라는 행이 파란색으로 표시되어 있는 상태에서 엔터 한번 눌러주시면 아래 item 0 이라는 행이 하나 생길거예요~
여섯 행을 만들어 줍시다.
그리고 아이콘 파일들의 이름을 쭈욱 적어줍니다~! (대소문자 구별 합니다)

그리고 실행시켜 볼까요?
시뮬레이터에서 보니 아이콘에 57 x 57 이라고 보이시죠?
제가 Icon.png 파일에 57 x 57 이라고 적어놓았으니 이렇게 나올거예요~
그런데, 시뮬레이터 화면은 분명히 아이폰4 모양인데 왜 57 아이콘이 나올까요?ㅠㅠ

자, 시뮬레이터는 기본적으로 레티나 디스플레이가 아닌 기기로 설정이 되어있습니다.
시뮬레이터 실행 중에 상단에 메뉴표시줄에서 Hardware-Device-iPhone(Retina)를 선택하여 레티나 화면으로 변경하여 봅시다.

짜잔~ 아이폰4 이상에서 지원되는 레티나 화면에서는 114 아이콘 (Icon@2x.png)가 정상적으로 나오네요~

그럼 디바이스를 아이패드로 바꾸면? 
짜잔~ 72 아이콘이 나와욬ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
아 신기해랔ㅋㅋㅋㅋㅋㅋㅋㅋ

그런데, 나는 아이콘에 발광 효과를 넣지 않았는데 여기는 자동으로 나와요~
없애고 싶으신 분들을 위하여 방법을 알려드립니다~
다시 plist파일로 돌아와서 공백에 대고 마우스 오른쪽 클릭!
또는 컨트롤+클릭 하시면 메뉴가 나오는데요
Add Row를 클릭합니다~

그러면 새로 한 줄이 나오는데요, Key라는 열의 내용을 Icon already includes gloss effects라고 입력하여 하시고 (아마 자동완성으로 나올거예요) Value는 YES를 써주시구요~(대소문자 구별합니다)

다시 실행하여 봅니다~
엄허~! 뽀송뽀송 글로시 효과가 사라졌어용 ㅋㅋㅋ

근데 아이콘 밑에 보이는 어플이름을 좀 바꾸고 싶다면...??
plist파일에 보면 Bundle display name 이라는 행에서 Value를 자신이 원하는 이름으로 바꿔주시면 됩니다. 한글 영문 상관없습니다. 다만 ...이 생기지 않으려면 한글6글자, 영문 12자까지만 써주시면 됩니다.(띄어쓰기는 영문 1글자로 취급됩니다)

자~ 이렇게 어플 아이콘 아래의 이름이 변경되었습니다~!
나라별로 지정 가능합니다. 이를 로컬라이제이션이라고 하는데, 그 부분에 대해서는 다음에 다루도록 해 볼게요..ㅎㅎ

# 해상도별 이미지 관리

아이폰에는 두 가지 해상도가 존재합니다.
320*480과 640*960.
꼭 두배 차이나죠?
그렇기 때문에 높은 해상도의 화면과 낮은 해상도의 이미지 화면의 이미지의 선명도도 다릅니다.
기본적으로 어떤 크기의 이미지던간에 기기별로 알아서 리사이징을 해 주어 같은 이미지를 출력하도록 해주지만, 그렇게 하면 리사이징 처리 시간도 걸리게 되고, 기기에 최적화된 이미지가 아니기 때문에 선명하지 못하거나 뭉그러져 보일 수 있습니다.
그래서 깨끗한 화면을 원하는 개발자는 해상도별로 이미지도 따로 관리를 해주게 되는데요~
그것에 대해 간략한 설명 드리겠습니다~
지난 번에 집어 넣었던 yagom_icon.png라는 이미지 파일이 있습니다.
아이콘 파일이 아닙니다... 혼동을 드려 죄송합니다 (ㅠ_ㅠ)
여튼, 이 파일의 이미지 크기와 꼭 2배가 되는 이미지를 yagom_icon@2x.png라는 이름으로 집어 넣어줍니다.
.

그리고 실행해 봅시다.
retina디스플레이가 아닌 일반 화면(320*480) 버전의 기기를 통하여 yagom_icon.png라는 파일을 사용하였던 화면을 보면 전에 봤던 것과 동일한 이미지가 나옵니다.

하지만 레티나 디스플레이로 변경한 후 다시 보게된다면!?

어머나 세상에!
전 단지 @2x라는 접미어만 붙여서 파일을 넣어줬을 뿐인데 알아서 찾아서 보여주네요~ 

이렇게나 친철하게 말입니다 ㅋㅋㅋ

그래서 아이패드로도 실행 해 보았습니다.
그런데...
아이패드에서 아이폰 어플을 실행하였을 때에는 @2x가 아닌 일반 이미지를 로딩하는군요.
이 이유에 대해서는 논란이 많은데, 구글링 해보시면 조금이나마 이유를 알 수 있으실 거예요..^^
정확한 사실도 아니거니와 설명하기 복잡하여 일단 패스 합니다 ㅎㅎㅎ

자 이렇게 해서 아이콘 넣어보기와 이미지 관리에 대해 조금 알아보았습니다~
협업하시는 디자이너 분께 이렇게 저렇게 이미지를 처리해 주세요~ 라고 말씀하시면서 이유를 설명해 주세요~ㅎㅎ
이미지가 더 이뻐보이려고 이렇게 한다고 말씀드리면 마다하는 디자이너분은 없으실 거예요ㅋㅋ
그런데~!
더 편하게 하는 방법을 소개해 드립니다~!
맥 앱스토어에서 Unretiner 검색하시면 나옵니다..^^
레티나 디스플레이 기준의 이미지를 넣으면 이미지 뒤의 @2x라는 접미어를 없애는 동시에 크기를 절반으로 줄여서 따로 저장해 줍니다~
그러면 일반 이미지와 레티나 이미지를 한방에 해결할 수 있죠^^
다만, 사이즈가 111x123과 같이 홀수가 되는 파일은 처리가 되질 않으니 112x124와 같이 이미지 크기를 조정하셔서 넣어주셔야 합니다^^
링크는요~ Unretiner


후아~
이렇게 아이콘과 이미지에 대해 조금 알아보았습니다^^
어떠세요?
유익하셨나요?
별거 아닌 내용인 것 같아도 나중에 다 피가되고 살이되는 내용일겁니다 ㅎㅎ
유익하셨다거나 도움이 되셨다면 응원이나 질책의 댓글 하나씩 남겨주세요 ㅠㅠ 넙죽넙죽
저는 그럼 다음번에 조금 더 유익한 내용으로 찾아뵙겠습니다~^^*

다음에 뭐 할까요? 댓글 주세요 ㅎㅎ
 
by yagom

p.s 제 포스팅을 RSS 피드로 받아보실 수 있습니다.

RSS Feed 받기 

↓↓↓저 열심히 썼는데 추천 한방 꾹 눌러주고 가시는 건 어떨까요? ^~^ 사랑합니다~ ↓↓↓