iOS 앱에서 고품질 아이콘을 추출하는 방법... '아이튠즈 보관함과 자동화 스크립트'

2014. 11. 17. 11:11    작성자: ONE™

백투더맥 블로그를 통해 맥이나 iOS용 앱을 소개해 드릴 때면, 글과 더불어 앱의 아이콘도 같이 첨부하는 편입니다. 아이콘은 앱의 얼굴이나 다름 없는데다, 개발자의 디자인 센스를 엿볼 수 있는 좋은 힌트가 되어 주기 때문입니다.

일전에 OS X에 내장된 앱이나 서드파티 앱으로부터 아이콘을 추출하는 방법에 관해 알아봤는데요, 이번에는 iOS앱 아이콘을 얻기 위해 제가 사용하는 방법을 간단히 정리해봤습니다. 꼭 이 방법이 정답이라고 말씀 드릴 수는 없지만, 아이튠즈에서 사용 중인 정식 아이콘을 고품질로 얻을 수 있는 좋은 방법임에 틀림 없습니다.

본격적으로 방법을 소개해 드리기에 앞서 지금까지 어떤 시행착오를 거쳤는지 먼저 되돌아 봤습니다.

시행 착오...

아이튠즈 검색 후 앱 소개 페이지 링크를 따오고 웹 속성 보기를 열어 이미지 다운로드 → 손이 많이 가고 번거로워서 실패!

할인안내 사이트인 'AppShopper'에서 앱을 검색한 뒤 아이콘을 다른 이름으로 저장 → 아이콘이 코딱지만 해서 실패!

구글 이미지 검색 → 어떤 게 공식 아이콘인지 알기 어렵고, 비인기 앱인 경우 알파 채널이 제거되거나 이미지 품질이 좋지 않은 경우가 많아서 실패!

아이튠즈 보관함에 저장된 앱은?

아이튠즈 보관함에 저장되어 있는 앱, 즉 이미 구매와 다운로드를 완료한 앱이라면 멀리 돌아갈 필요 없이 아이튠즈 내에서 바로 아이콘을 추출할 수 있습니다.

보관함에서 앱을 선택하고 메뉴 막대 ▸ 파일에 있는 "정보 가져오기"를 클릭하거나 command + option + i 키를 눌러 정보 창을 띄웁니다. 정보 창 좌측 상단에 있는 아이콘을 클릭한 뒤 command + c 키로 클립보드에 복사해 놓습니다. ▼

미리보기 실행 후 메뉴 막대 ▸ 파일에 있는 "클립보드에서 신규" 항목을 클릭하거나 command + n 키를 입력합니다. ▼

클립보드에서 가로 세로 1024 픽셀의 고품질 아이콘을 가져옵니다. 이제 command + s 키를 눌러 아이콘을 파일로 저장하면 끝! ▼

* 미리보기를 거칠 필요 없이 바로 포토샵 같은 이미지 편집 프로그램에 붙여넣어도 무방합니다.

아이튠즈 보관함에 없는 앱은?

아이튠즈 보관함에 없는 앱은 별도의 자동화 스크립트를 이용하면 편리합니다. NVAlt와 Marked 등으로 유명한 'Brett Terpstra'가 제작한 스크립트인데요, ➥ 링크를 통해 'ItunesIcon'라는 스크립트를 내려받은 뒤 실행하면 입력 난이 달린 대화상자가 나타납니다.

입력 난에는 앱의 이름만 적어도 되고, 이름 뒤에 추가로 달 수 있는 매개변수를 이용해 맥∙아이폰∙아이패드 아이콘을 구분해서 내려받거나 아이콘의 크기를 지정할 수 있습니다. 예를 들어, 아이패드용 Omni Focus 아이콘 중에서 가장 해상도가 높은 아이콘을 내려받으려면 "omni focus #ipad ~l"을 입력하면 됩니다. 만약 명령어가 성공적으로 실행되면 애플 서버에 접속해 아이콘을 내려받습니다.

■ 플랫폼 선택

#iphone : 아이폰용 아이콘
#ipad : 아이패드용 아이콘
#mac : 맥용 아이콘

크기 선택

~s : 소형 (160*160px)
~m : 중형 (512*512px)
~l: 대형 (1024p*1024px)

모퉁이 다듬기

애플 서버에서 바로 내려받은 아이콘은 모퉁이가 둥글지 않기 때문에 한번의 가공 작업을 추가로 진행해야 합니다. ▼

모서리를 둥글게 처리하기 위해 제가 사용하는 방법은 'Kakumaru Punch'라는 앱입니다. 일본인이 만든 앱인데요, 이런 용도에 특화되어 있어 다른 이미지 편집 프로그램이나 포토샵 보다 좀 더 간편하게 사용할 수 있습니다. ▼

슬라이드 바를 이용해 모서리를 얼마나 둥글게 만들 것인지 정할 수 있는데, iOS 8 기준으로 45 정도가 딱 좋습니다. PNG 형식의 아이콘의 경우 앱을 사용하더라도 이미지 품질 저하되지 않고, 또 모퉁이 배경을 투명하게 처리하는 알파 채널도 자동으로 추가되는 등 여러 장점을 가지고 있습니다. 관심 있는 분은 ➥ 공식 웹사이트를 통해 상시 무료로 내려받을 수 있습니다.

자, 이제 '저장(Save)' 버튼을 마저 눌러주면 군더더기 없이 깔끔한 아이콘이 저장됩니다. ▼



참조
Brett Terpstra - ItunesIcon
Kakumaru for Mac 공식 홈페이지

관련 글
맥용 프로그램과 OS X 시스템 내장 아이콘을 추출하는 3가지 방법
깔끔하고 아름다운 고품질 아이콘을 무료로 내려받을 수 있는 인터넷 웹사이트 6선
CandyBar + LiteIcon = 맥에서 아이콘 관리와 교체를 위한 최상의 콤보


    
  1. Blog Icon
    JohnK

    오..좋은 방법이네요. 늘 감사 드립니다.

  2. Blog Icon
    goodtho

    수고하십니다. 원님 ^^;

  3. Blog Icon
    SJSJ

    대박! 멋집니다.

  4. Blog Icon
    bbom

    좋은 팁입니다! 페북 맥매니아로 퍼가겠습니다! 문제시 알려주시면 삭제하겠습니다!

  5. 첫 한두 단락과 링크를 적는 수준이라면 어느 커뮤니티에 올리셔도 무방합니다 :-)

  6. Blog Icon
    버섯이

    ㅎㅎ 갑자기 생각나서 적는.. 삼천포로 빠진 이야기이긴 하지만.. 간혹가다가 개발자가 의도하여..

    앱에 내장된 아이콘(아이폰, 아이패드 해상도별 사이즈)과 앱스토어에 노출시킬 아이콘(1024 * 1024)을 약간 다른 이미지를

    등록하는 경우도 있기는 합니다~ 아주 생판 다른 이미지라면 앱스토어 심사할 때 리젝 사유가 되기도 하지만요..

    이럴 경우 실제 설치된 이미지를 얻으려면 파인더에서 아이튠즈 보관함 경로로 찾아들어가서.. 해당 IPA 파일의 패키지 보기를 하여 이미지를 찾아야 합니다.

    이렇게 한다고 해서 큰 이미지를 얻는것은 아니고 그냥 단지.. 비밀앨범앱 같은 경우 스토어 노출된 아이콘하고 디바이스에 보이는 아이콘이 다를 수 있어서요~

  7. 아이튠즈에서 노출되는 아이콘과 실제로 iOS 기기 상에 표시되는 아이콘과 차이가 나는 경우가 있나 보군요. 참고하고 있겠습니다 :-)

  8. Blog Icon
    시니

    항상 좋은 글을 이렇게 올려주셔서 너무나도 감사합니다.

  9. Blog Icon
    푸른안개

    오호...그렇구나..하고 보고 있는중에...
    아이튜스 미리보기 페이지를 파이어 폭스로 들어가서 아이콘 오른쪽 클릭해서 [요소 검사] 하면 바로 그 테그로 접근할 수 있고 테크에 보면 src-swap-high-dpi 란 항목뒤에 보면 512 사이즈 png 화일 주소있는데 나름 알파값도 살아있고 모서리도 둥글게 처리되 있는 깔끔한 이미지를 얻을 수 있내요..^^;
    사파리에서는 접근하기 좀 까다로울 수 있지만 파폭이나 크롬의 개발자 도구를 살짝 활용하면 512 사이즈 정도는 간단히~ ㅎㅎ

  10. → http://d.pr/i/vKAz
    말씀 듣고 사파리에서 테스트해보니 같은 방법으로 256/512px 아트워크에 접근할 수 있군요. 취향에 따라 본문의 스크립트+모퉁이 다듬기 앱을 사용하거나, 웹 브라우저에서 추출하는 방법을 사용하면 될 듯합니다. 좋은 팁 감사합니다 :-)

  11. Blog Icon
    푸른안개

    어...사파리에도 개발자 도구가 있내요.. 확장 프로그램인가요? 메뉴를 뒤저바도 안보이는데 .... ^^;;

  12. 사파리 환경설정 - 고급 에서 '메뉴 막대에서 개발자용 메뉴 보기'를 ON 해주시면 메뉴가 생깁니다.

  13. 이렇게 멋진 방법이 있다니요~~~ 감사합니다.

  14. 좋은정보 너무감사합니다

  15. Blog Icon
    DK

    http://bendodson.com/code/itunes-artwork-finder/index.html

    저는 여기에서 찾는데 app뿐아니라 artwork등등도 있어서 좋아요.

  16. Blog Icon
    꾸꾸

    혹시, 앨범아트는 방법이 없을까요?
    아이튠즈에 없지만, 애플 아이튠즈 스토어에 있는 앨범의 표지를 비슷한 방법으로 따올 수 있을 것 같은데...

  17. Blog Icon
    genie

    저는 예전에 올려주신 글을 참고해서 해결하곤 합니다만...
    http://macnews.tistory.com/2290

  18. Blog Icon
    꾸꾸

    감사합니다

  19. Blog Icon
    yson

    감사합니다 ^^

  20. Blog Icon
    흠냥

    https://itunes.apple.com/lookup?id=앱의 아이디
    애플에서 공식 제공하는 JSON 형식의 API입니다
    artworkUrl 60, 100, 512 항목별로 이미지 URL입니다

  21. 시행착오까지 ㅎㅎ 고생하셨습니다~~

  22. Blog Icon
    웰치스

    오 이런 방식으로 아이콘 가져올수 있군요. 아이폰 처음 사용하는분땜에 앱스토어 아이콘이 필요했었는데
    이제 이렇게 아이콘을 받으면 되겠네요. 역시 좋은 정보 감사합니다.

  23. Blog Icon
    mjkwak

    애플워치의 원형 아이콘 만들때 유용한 툴이겠네요

    그런데 첫 사진에서 보이듯 아이폰 6+ 에서 홈화면 가로모드가 저렇게 되나요?

  24. 오호~ 이런 고품질의 아이콘을 !! 진정한 꿀팁입니다!!

  25. 디자인 회사 다녔을때 어플 이미지 구할라고 여기저기 찾고 보내달라해고 햇는데 이방법이면 그럴필요가 없을것 같네요 ㅋㅋㅋ 정말 훌륭한 정보 감사요

  26. Blog Icon
    Chan

    첫 그림(아이폰6+ 눕힌 것) 실제 구현되는 건가요?

  27. Blog Icon
    shiregm

    Windows에서는 축출할 수 없나요?

    이제 iTunes에서 복사가 되지 않더라고요.