2010.08.10 03:51

[강좌A04]안드로이드 실전 개발 - 아이콘 제작 편




전편에 이어 오늘의 강좌는 아이콘 제작 및 아이콘 관련 자료들에 대해서 좀 알아보도록 하겠습니다.

전체 강좌 목차
[강좌A01] Moteodev Studio를 이용한 안드로이드 개발 환경 구축 가이드
[강좌A02] 안드로이드 개발 참고 서적 소개
[강좌A03] Android 실전 개발 - 아이디어 / 기획 / Wireframe
[강좌A04] 안드로이드 실전 개발 - 아이콘 제작

왠 개발 강좌에서 아이콘 제작이냐? 라고 의아해 하시는 분도 많으시겠지만,
이런 분들은 곁에 훌륭한 디자이너 분들이 계시거나, 본인이 이미 상당한 디자인 감각 및 스킬을 갖추신 분들일겁니다.
 
제가 처음으로 안드로이드 개발을 할 때...
혼자서 코딩 뿐만 아니라 아이콘 제작 등 이것저것 모든 작업을 다 해야 했었습니다. 작업하다 보니 가장 시간이 많이 걸리는 작업이 코딩이 아니라 아이콘이나 디자인 요소 제작이었습니다. 그렇게 시간을 투자한다고 해도 뛰어난 퀄리티의 작품이 나오지도 않는게 더 환장할 노릇이죠.

하여간 오늘은 곁에 뛰어나신 디자이너 분들과 협업할 형편이 못되는 저같은 개발자들을 위해.. 아이콘 관련 툴과 관련 자료들에 대해서 알아보도록 하겠습니다.

1. 만들지 말고 무료 아이콘 중에서 적합한 아이콘을 찾아서 사용하자.

앱에 필요한 아이콘 제작과 관련하여 가장 좋은 방안은 당연히 전문 디자이너가 크리에이티브한 아이콘을 제작해주는 것일 겁니다.  그럴 상황이 안되신다면.. 이미 만들어진 뛰어난 퀄리티의 아이콘을 무료로 사용할 수 있다면 더 좋을겁니다.

아래 사이트들은 대표적인 아이콘 사이트들입니다.
유료도 있으며, 무료 아이콘도 있고  무료 중에서도 상용으로 사용가능한 것도 있고, 비상용인 경우에만 무료인 것도 있습니다. 자신에게 적합한 아이콘이 있다면 라이센스 잘 확인하시고 사용하시면 됩니다.

무료 아이콘 사이트 들

A. http://www.iconarchive.com/


30,000 여개 이상의 최대 icon 사이트 입니다. 웹용 데스크탑용등 다양한 포맷으로 파일등을 제공하고, 유료도 많지만 무료 아이콘으로 상당한 퀄리티를 가진 것도 많습니다. 카테고리별로 정리되어 있으니.. 한 두시간만 투자하면  대충 다 볼 수 있을것 같습니다.
안드로이드에서는 png를 주로 사용합니다. 사이트에서 맘에 드는 아이콘이 ico 파일이라면.. 주저말고 다운 받으시기 바랍니다. 대분분의 아이콘 편집툴에서 원하는 포맷으로 변환이 가능합니다.

B. http://www.freeiconsdownload.com


iconarchive 사이트와 겹치는 아이콘도 많지만 그렇지 않는 것도 상당히 많습니다. 역시, 라이센스를 잘 읽어보시고   다운 받아 사용하시면 됩니다. 위 첨부 이미지에 표기된 라이센스를 보면 Creative Commons Attribute 3.0 LIcense로 되어 있군요. 상세한 라이센스 내용은 웹사이트 찾아 보시면 상당히 많은 내용이 나옵니다. 여기서 간략하게 소개한다면.. 대부분 비상업적 용도에 사용하시는 것은 저작자 표기(사이트 링크 등)만 하시면 그냥 사용하시면 됩니다. CCL 중에서도 상업적 용도에 사용하는 것도 허락이 되어 있다면 저작자 표시만 하시고 상업적으로 사용하셔도 좋습니다. 상업적 이용을 허락하지 않는 것들도 저작자의 허락을 득하면 되기도 하므로 꼭 필요하시면 직접 연락해보시는 것도 괜챦을 것 같습니다.

아래 사이트들은 추가적인 아이콘 사이트 들입니다. 위와 비슷한 것들이 많습니다. 워낙 내용들이 많고 겹치는 아이콘들이 많아..그렇지 않는것 찾기도 힘이 들지만, 의외로 좋은 자료를 찾을 수도 있습니다.

- http://downloadpedia.org/Free_Icons_and_Buttons

- http://www.freeiconsweb.com/

2. 마땅한게 없으면 만들어 보자.

적당한 무료 아이콘이 없거나 독창적인 아이콘을 저작해야 한다면 어쩔수 없이 만들어야 합니다. 물론 Adobe의 포토샵이나 일러스트를 잘 사용하신다면 훨씬 퀄리트 높은 아이콘을 저작하실 수 있습니다.

포토샵이나 일러스트를 이용하신다면 아래 사이트 자료들을 참고하시기 바랍니다.

iPhone icon 제작 가이드

아이폰용으로 만든 아이콘도 안드로이드에서 사용해도 좋은것 같습니다. 삼성에서 만든 갤럭시 핸드폰을 보면 메뉴화면은 꼭 아이폰처럼 구현을 했습니다. 아이폰에서 사용하는 입체감 있는 둥근 사각형 버튼을 배경으로 각 앱 아이콘 하단에 깔았더군요. 상당히 괜챦아 보입니다.

http://www.photoshopvids.com/photshop-tutorials/photoshop-tutorial-how-to-make-iphone-icons/
아이폰용 아이콘을 만드는 방법을 동영상으로 알려주네요.

http://blog.cocoia.com/2010/iphone-ipad-icon-psd-template/
아이폰용 아이콘을 제작을 위한 PSD 템플릿 파일을 제공합니다.

http://www.storm-consultancy.com/blog/design/design-tutorials/how-to-mke-iphone-application-icon-photoshop/
포토샵으로 iphone용 아이콘을 만들 수 있는 방법을 자세히 설명하고 있습니다.

Android icon 관련 자료

http://androgeek.com/android-icon-packs-basics-and-a-list-of-free-icon-sets.html
안드로이드용 아이콘 팩과 무료 아이콘 세트 자료입니다. Android SDK를 설치하셨다면..  SDK 폴더 하위에 data\res\ 폴더에 있는 아이콘 자료들이 대부분 이긴 합니다.

http://developer.android.com/guide/practices/ui_guidelines/icon_design.html
이 사이트는 안드로이드 개발자가 가장 많이 참고해야 되는 사이트죠. 위 링크는 안드로이드용 아이콘 제작 가이드입니다. 에구.. 영어라서 그렇긴 하지만.... 암튼, 참고하시기 바랍니다.

아이콘 저작 툴

Axialis IconWorkshop 6 (http://www.axialis.com/)

최고의 아이콘 편집툴입니다. 가격은 49.95$나 하는군요. 저희같은 가난한 개발자들에게는 무척이나 비싸군요.
무료로 된 아이콘 편집툴들도 많긴 하지만, 이거 못 따라 옵니다. 기능이 많지 않아서 사용하기 어렵지 않고, 그럼에도 샘플이나 꼭 필요한 기능들은 다 있어서 무지 편합니다. 그냥 30일 평가판을 다운받아서 사용하시기 바랍니다. 노력하신다면 시리얼도 구하실 수 있을겁니다.

자.. 이제 부터는 디자이너도 없고, 무료로 적합한 아이콘도 없고, 저처럼 포토샵이나 일러도 잘 사용못하시는 분들은 저화 함께 IconWorkshop 으로 저희 프로젝트에서 사용될 메인 아이콘을 제작하도록 하겠습니다.

먼저 완성된 아이콘 부터 보도록 하겠습니다. 안드로이드용 어플의 High Density에서 사용되는 72*72 사이즈의 아이콘입니다.

네. 저희 프로젝트 Hangul To English 프로그램에서 사용될 메인 아이콘입니다.
한글인 "카"를 영문인 "zk"로 변환해 준다는 퀄리티가 높진 않지만, 어플을 내용을 어느정도는 잘 나타내 준다고
저는 생각하고 있습니다. 하하^^ 물론 제가 만들었으니깐요.

Step 1. 둥근 모서리 사각형 버튼 형태의 배경 작업

먼저 둥근 사각형의 버튼 형태의 배경부터 제작해야 합니다. iconWorkshop을 실행하시면 좌측 패널에 Librarian이란 패널이 보입니다. 일종의 아이콘 관련 라이브러리를 관리하는 기능이라고 생각하시면 될 것 같습니다. Librarian 창이 안 보이신다면 View 메뉴에서 선택하시면 됩니다. iconWorkshop의 Librarian에는 상당히 많은 샘플들이 있습니다. 참고로 Help 파일을 보면 이 샘플들을 가지고 아이콘을 제작하는 방법들을 잘 설명하고 있습니다.

Librarian > Objects > Pack 2 - Realistic Buttons > Rounded Square 를 눌러보시면 둥근 사각형 및 사각형에 이펙트를 줄 수 있는 여러가지 요소들이 나옵니다. 이 이미지들을 합치고 색상을 변형시켜서 여러가지 형태의 모서리가 둥근 사각형을 만들 수 있습니다.

물론 다른 도형들을 가지고 버튼을 제작할 수도 있습니다.

근데, 저희가 제작할 아이콘은.. iconWorkshop의 Librarian > Objects > Pack 5 - Web Illustrations > Background Bases > Glossy > Glossy Blue Rounded.png 에 이미 맘에 드는게 있군요. 앗싸.. 그냥 가져가다 쓰면 되겠습니다. 좌측 패널에서 더블클릭하면 메인 창에 띄워 둡니다. 이것으로 배경작업은 완료되었습니다.

유의하실 점은 iconWorkShop은 Photoshop처럼 Layer를 지원하지 않습니다. 그러므로 일반적으로 작업할때는 여러개의 Project (이미지)를 만들어서 최종 원하는 파일에 복사 - 붙여넣기로 작업을 합니다. 붙여넣기를 하고나면 마지막 붙여넣기 이미지는 컨트롤할 수 있는 핸들이 생기며, 크기 변환이나 색상 변환, 효과 주기 등 다양한 작업을 할 수 있습니다.

Step 2. 텍스트 구현

텍스트 "카", "zk"를 입력하기 위해서 각각의 iconWorkshop에서 New > Bitmap Image, Unix Icon..을 클릭합니다.


새 프로젝트화면에서 Project명은 아무거나 입력하시고(예:카) Color는 RGB Alpha Channel(RGB/A-32 bits)를 선택하시고 사이즈는 배경 버튼이 128 * 128 이었으므로 동일한 사이즈로 생성합니다.

그리고 우측 팔레트에서 먼저 흰색을 클릭((바탕색으로 설정) - 팔레트 하단의 HTML용 색상표에서 #FFFFFF를 입력하셔도 됨) 한 후  팔레트 위의 A 아이콘(텍스트 입력)을 눌러서 글자를 입력합니다.



이쁜 폰트를 찾아서 적당한 크기를 입력하고 확인하면 프로젝트에 해당 글자가 흰색으로 입력됩니다. 사각형의 핸들을 조정하여 적당한 크기 및 위치를 조정합니다.


텍스트가 선택된 상태에서 메인 작업창 상단의 Image Transformation 툴바를 선택하고 Drop Shadow를 선택합니다. 디폴트 옵션으로 OK 버튼 클릭. 그림자 효과를 주어 입체적으로 글자가 보입니다.
이제 팔레트에서 진한 푸른색을 선택한 후 팔레트 위쪽의 상단 Flood Fill (페인트 통)을 선택한 후 텍스트의 흰색부분에 클릭합니다.  텍스트가 테두리는 흰색을 가지면서 가운데는 짙은 푸른색으로 카 텍스트가 완성되었습니다.

zk 텍스트도 동일한 방식으로 작업합니다. zk를 위한 128 * 128 새로운 프로젝트를 만든 후 카 텍스트와 동일하게 작업하시면 됩니다. 다만, zk는 흰색으로 텍스트를 만든 후 노란색으로 입히는 게 아니라 처음부터 노란색 계열로 텍스트를 생성한 후 Drop Shodow에서 디폴트값인 검은색으로 그림자가 지도록 만들겠습니다.

Step 3. 화살표 심볼 만들기.

이제 화살표 심볼을 만들어야 합니다. 이걸 아무것도 없이 그려서 만드려면 저 같이 디자인 꽝인 사람들은 절대 못 만듭니다. 하하.. 그러나 iconWorkshop에서 저같은 사람들을 위해서 상당히 많은 무료 심볼들을 제공합니다.


Librarian > Icons > Free > Basic.icl 을 선택하시면 상당히 많은 아이콘용 심볼들이 있습니다. 저희는 그 중에서 첫번째인 Action redo 심볼을 사용하도록 하겠습니다.

Action redo을 더블클릭하시면 작업창에 32 * 32 아이콘이 나옵니다. 128 * 128 새 프로젝트를 만드시고
Action redo 아이콘을 전체선택(Ctrl + A), 복사 (Ctrl + C) 하신 후 새 프로젝트 창에 붙여넣기(Ctrl + V)
하시고 붙여넣기 옵션 중에 두번째 항목인 Resize Image to fit the editor area 항목을 선택하시면 32*32 아이콘이 128*128 사이즈에 맞게 붙여넣어 집니다. 이 아이콘의 크기 조절 핸들을 드래그 하셔서 적당한 사이즈로 줄여줍니다.



이번에는 색상을 변경하기 위해서 팔레트에서 선택한 색상으로 칠하지 않고, HSB 값을 조정하도록 하겠습니다. 메인 에디터 상단의 상단의 Image Color 툴바 하위의 Hue/Saturation.. 메뉴를 선택하면 위의 그림과 같이 나타납니다. 각각의 값을 조정하여 원하는 색상으로 화살표를 변경합니다.

색상 변경 후 역시 텍스트와 마찬가지고 그림자 옵션을 주어 입체효과를 줍니다.
 

그리고 화살표를 우측으로 회전시켜서 화살표가 카 와 zk 글자가 변환되는 느낌을 줍니다. 이제 각각의 요소가 모두 완성 되었습니다.

Step 4. 각각의 요소를 합쳐서 Icon 완성하기.

이제 지금껏 만든 4개의 프로젝트(일종의 4개의 레이어 효과)를 하나의 새 프로젝트로 합쳐야 합니다. 128 * 128 사이즈의 프로젝트를 만든 후 이전에 만들었던 각각의 프로젝트 화면에서 전체선택(Ctrl + A), 복사(Ctrl + C) 후 합쳐야 될 프로젝트에 붙여넣기(Ctrl + V) 합니다. 붙여넣기 할때는 이전의 작업에서 처럼 Resize 가능한 옵션으로 붙여 넣습니다. 붙여넣으신 후 제일 마지막에 붙여 넣기 한 항목에는 사각형 모서리 부분에 핸들이 나타납니다. 핸들을 조정하여 위치나 크기를 조정하여 작업을 마무리 하시면 됩니다. 잘못 작업하시면 언제든지 취소(Ctrl + Z)를 눌러 취소할 수 있으니 맘 놓고 작업하시면 됩니다.

이제 저희가 계획한 icon이 128 * 128 사이즈로 만들어졌습니다.
안드로이드용 어플에서는 기본적으로 72*72, 48*48, 36*36  사이즈의 아이콘 3개가 필요합니다.
그리고 TStore에 등록하기 위해서는 추가적으로 76*76, 212*212 사이즈의 아이콘이 필요합니다
메인으로 만든 128 * 128 사이즈로 각각 Resize (Image 메뉴 > Image Size .. 클릭 후 값 조정 혹은 신규 프로젝트를 원하는 사이즈로 만든 후 복사/붙여넣기로 생성) 하신 후 Save As.. 하시면 필요한 모든 아이콘 제작이 끝이 납니다.

끝으로 아이콘 제작시 도움이 되는 사이트를 하나 더 소개하겠습니다.

http://msdn.microsoft.com/en-us/library/ms997636.aspx

MS의 MSDN 사이트 컨텐츠인데, Windows XP용 아이콘 제작 가이드 및 Primary Color 등 아이콘 제작에 관해 아주 상세하고 유용한 정보들이 나와 있습니다. 

이것으로 네번째 강좌를 마칩니다. 다음번에는 순서를 바꿔서 UI 레이아웃을 먼저 만들고 (드디어 Motodev 실행하는 군요) 그 히후에 안드로이드 앱에서 이미지, XML 리스소 훔쳐보는 방법에 대해서 알려드리도록 하겠습니다.


Trackback 0 Comment 6
  1. MCo더머 2010.08.10 08:18 신고 address edit & del reply

    오우 작게 써주는 프로그램도 있군여 포토샾으로하면 진짜 힘든데 ㅜㅜ

  2. 남시언 2010.08.11 23:35 신고 address edit & del reply

    긴글 잘보고 갑니다~ 정말 도움되는 글 계속 얻어가고있어요 RSS 에서요~~ㅎ

    많은 도움 될것 같습니다...
    포스팅에서 정성이 묻어나네요 ㅎㅎ

  3. fireman 2010.08.17 15:57 신고 address edit & del reply

    ㅋ 일반 프로그래머가 다루기 힘든 부분을 잘 설명해 주셨네요.

    많은 도움이 될 것 같습니다.
    이제 프로그래머도 아이콘 제작 직접 할 수 있을 것 같습니다.

  4. 궁금 2011.07.05 17:59 신고 address edit & del reply

    내장 되어있는 여러 아이콘 소스는 그냥 상업적으로 사용을 해도 상관이 없는지요 ??
    재판매는 아니고 빌더에 들어갈 아이콘인데 괜찮을까요 ??

    • 보고픈 2011.07.15 15:43 신고 address edit & del

      툴을 정품을 구매했다면 써도 상관없겠죠? 그렇지 않다면 공개되는 제품에는 사용이 좀 어렵지 않을까요?

  5. 예슬 2014.10.13 13:03 신고 address edit & del reply

    덕분에 일주일간 헤메던 글자깨짐 문제 잘 해결했습니다. 포토샵보다 일러스트레이터보다 글자가 덜 깨지네요.. 진짜 63x63사이즈로 만들었을때 글자깨지는 현상때문에 엄청 고생했거든요.. 좋은 포스팅 감사합니다 ^^ 근데 그래도 63사이즈는 글자가 완전히 선명하기는 어려운 걸까요.. 실제로 앱을 적용하면 여전히 흐린감은 있기에.. 좀 속상하네요 ㅠㅠ