오늘의 주제


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

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

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


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

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

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


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

[##_http://blog.yagom.net/script/powerEditor/pages/1C%7Ccfile25.uf@190B50334ECCA5A6301C13.png%7Cwidth=%22500%22%20height=%22343%22%20alt=%22%22%20filename=%222.png%22%20filemime=%22image/jpeg%22%7C_##]
 총 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 받기 


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

Posted by yagom

댓글을 달아 주세요

  1. 옥탑방원숭이S 2012.03.03 21:05  댓글주소  수정/삭제  댓글쓰기

    이번 내용도 잘 보았습니다 ^_^
    아이콘 설정은 꼭 알아야 할 중요한 내용 같네요!
    중간에 알려주신 아이콘 등록 앱은
    일일이 설정으로 잡을 걸 알아서 파일 옮기면 해주는 건가요??

    • Favicon of https://blog.yagom.net BlogIcon yagom 2012.03.05 10:13 신고  댓글주소  수정/삭제

      폭풍같은 댓글 감사드립니다~!

      중간에 소개해 드린 앱들은 저렇게 많은 아이콘 파일들을 일일히 다른이름으로 저장하는 불편함을 덜어주기 위하여 가장 큰 해상도인 114*114 해상도의 아이콘만 만들어서 이 앱에 넣어 주시면 이름별로 스스로 정리해서 뱉어주는 녀석입니다~^^*

  2. 한이 2012.03.16 00:42  댓글주소  수정/삭제  댓글쓰기

    잘보고 갑니다.
    중간중간에 유틸 소개 정말 도움이 되었습니다. ㅎㅎㅎㅎㅎㅎㅎ

    • Favicon of https://blog.yagom.net BlogIcon yagom 2012.03.16 10:02 신고  댓글주소  수정/삭제

      찾아주셔서 감사합니다^^
      도움이 되셨다니 행복하네요~
      필요하거나 궁금한 것이 있으면 언제든 말씀주세요^^

  3. 여맹이 2012.03.26 14:01  댓글주소  수정/삭제  댓글쓰기

    잘보고 갑니다!!!

    이제 입문인데 많이 배워가네요.^^

  4. 리현 2012.07.21 07:42  댓글주소  수정/삭제  댓글쓰기

    잘보고있습니다. 지금 따라 해보는데욤. 저는 plist 에서 아이콘 파일 리스트가 안나와요 ㅁ흠 ㅠㅠ 왜ㅡ일까요?

  5. 초보kay 2012.07.23 19:11  댓글주소  수정/삭제  댓글쓰기

    잘 보고있습니다.
    plist 파일에서 icon files의 아이템이름을 임의로 주었더니 실행시 어플의 아이콘이 생기지 않습니다.
    아이콘파일이름은 야곰님이 이용하신 이름으로 고정되였고 그래야 콤파일러가 인식을 하는건지요?

    • Favicon of https://blog.yagom.net BlogIcon yagom 2012.07.23 21:02 신고  댓글주소  수정/삭제

      임의로 아이콘 이름을 설정해도 그에 맞는 아이콘이 있다면 구동이 될 것 입니다.
      대소문자도 구분을 하구요~ 확장자도 넣어주어야 합니다.
      png형태로 넣어주시는 것이 좋구요.
      그리고 그래도 아이콘이 안나온다면 Build-Clean 한 후 다시 빌드해 보시기 바랍니다.
      빌드클린 단축키는 Command+Shift+K 입니다~
      그럼 잘 해결되시면 좋겠네요 ㅎ

  6. 초보kay 2012.07.23 23:00  댓글주소  수정/삭제  댓글쓰기

    아, 제가 plist 에 파일 확장자를 써넣지 않았댔군요.
    답글 감사합니다.
    저는 현재 시뮬레이터상에서 테스트를 해보고 있습니다.
    본래 아이콘이미지파일을 지우고 새 아이콘파일을 복사해서 넣었고
    또 Build-Clean도 해 주었는데 실행하면 아이콘그림이 바뀌지 않고 지워진 이미지가 계속 나와서요.
    시뮬레이터에 이미 설치된 앱의 정보가 남아있는것 같은데 무슨 방도가 없을가요? ㅠ ㅠ ㅠ

  7. neoaero 2012.07.26 10:38  댓글주소  수정/삭제  댓글쓰기

    전 아이콘파일 해상도는 57*57만 있는줄 알았는데..이런 기능이 있는줄 몰랐네요..
    감사합니다.

  8. chosamong 2012.08.24 14:07  댓글주소  수정/삭제  댓글쓰기

    정말로 피가 되고 살이 되는 내용이네요.
    마음을 담아서 감사의 인사를 드립니다.
    꾸벅 <(__)>

  9. alison 2012.09.10 18:01  댓글주소  수정/삭제  댓글쓰기

    왜...
    위에것 그대로 따라했는데 어떤 버젼에석너 114짜리 해상도 아이콘으로만나올까요..;;;
    엑스코드 4.4.1, 시뮬레이터 5.1 쓰고 있는데 뭔가 다른건가요??

    • Favicon of https://blog.yagom.net BlogIcon yagom 2012.10.03 21:43 신고  댓글주소  수정/삭제

      만약에 그렇게 나온다고 하면 Xcode에서 빌드클린(커맨드+K)을 해 보시고 시뮬레이터 안에서 어플리케이션을 삭제하고 다시 한 번 해보세요~

  10. 루감 2012.11.22 08:37  댓글주소  수정/삭제  댓글쓰기

    감사히 잘 배웠습니다.
    근데.. 질문이 .. xcode나 시뮬레이터등 캡쳐는 어떻게 하신건가요?
    창 뒤쪽 그림자까지도 캡쳐되어 있네요.. 신기합니다.

    • Favicon of https://blog.yagom.net BlogIcon yagom 2012.11.22 10:20 신고  댓글주소  수정/삭제

      안녕하세요 루감님 :)
      덧글 고맙습니다 ㅎ
      Command + Shift + 4 누르신 후에 화면이 바뀌면 Space 눌러주세요 ㅎ 그럼 창 캡쳐가 됩니다.
      추가로 Command + Shift + 3을 누르시면 전체 화면 캡쳐구요 ㅎ
      Command + Shift + 4를 누르고 원하는 영역 드래그 하시면 영역 캡쳐입니다.

      이미지는 데스크탑에 저장됩니다 ㅎ

    • 루감 2012.11.23 08:13  댓글주소  수정/삭제

      와우.. space에 비밀이 있었군요.. 상상도 못했네요. ㅎㅎ
      무한한 정보 정말 감사합니다.

  11. 딴또 2013.03.07 08:31  댓글주소  수정/삭제  댓글쓰기

    진짜 최고의 명강의 입니다. 감사합니다.

  12. 2013.03.12 18:16  댓글주소  수정/삭제  댓글쓰기

    우왕! 깨알같네여! 요즘은 바쁘신지 포스팅을 미루시는 듯...?. 실망이네여 흥쳇퉷

  13. yimcold 2014.04.09 09:34  댓글주소  수정/삭제  댓글쓰기

    대박이네요 ㅋㅋ 항상 야곰님 블로그에서 많이 얻고갑니다!

  14. yimcold 2014.04.09 09:34  댓글주소  수정/삭제  댓글쓰기

    대박이네요 ㅋㅋ 항상 야곰님 블로그에서 많이 얻고갑니다!