# 개요
안녕하세요! 개발하는 대학생, 나무입니다.
앱 개발에 있어서 아이콘은 필수, 아니 불가피한 요소입니다.
글로만 앱을 구성하기에는 직관성에서 엄청난 손해를 입을 뿐더러
사용자로 하여금 앱이 깔끔하지 않다는 느낌을 갖게 됩니다.
대신 아이콘을 사용하면 보다 효과적으로 레이아웃을 구성할 수 있고 보다 더 깔끔하고 직관적인 UI를 완성할 수 있습니다.
즉, 각 상황에 적절한 png파일을 직접 만들거나 인터넷에서 구해 리소스 폴더에 넣는 과정을 필수적으로 거쳐야합니다.
이 때 아래와 같은 2가지 고충이 생기게 됩니다.
# 고충
1. 저작권 문제
2. 해상도 문제
3. 귀찮음
우선 1번 고충부터 확인해 볼까요?
기본적으로 모든 이미지는 라이센스를 가지고 있습니다.
어떤 이미지는 상업적으로 이용하려면 비용을 부담해야하고..
어떤 이미지는 비상업적 용도로만 사용이 가능하고..
어떤 이미지는 출처를 남겨야하고..
즉, ImageButton에 사용할 아이콘 단 하나를 위해 구글에서 적절한 아이콘을 찾아보고 해당 아이콘의 라이센스까지 확인해야하는 과정이 필요합니다.
"아이콘은 디자이너에게 맡기면 되잖아?"
가장 좋은 방법이죠. 하지만 저 같은 1인 개발자의 경우엔 코딩하기에도 벅차기 때문에 아이콘까지 만들기란 여간 쉬운 일이 아닙니다.
물론 여기에는 아주 좋은 해결책이 있습니다.
바로 아래의 사이트를 이용하는 것입니다.
https://material.io/resources/icons/?style=baseline
위 그림과 같이 위 사이트에서 제공하는 모든 아이콘들은 Apache License 2.0 라이센스 하에 판매는 불가하되 어떤 용도로든 사용할 수 있다고 밝히고 있습니다.
거기다가 하나의 아이콘이 총 5개의 테마로 제공되니 웬만한 원하는 스타일의 아이콘을 찾을 수 있습니다.
하지만 여기서 두 번째 고충이 또 걸리게 됩니다.
바로 해상도 문제입니다.
원칙적으로 안드로이드 스튜디오에서 png 이미지를 drawble에 추가하게 될 때 hdpi, xdpi, xxdpi 등 각각의 해상도에 맞게 이미지의 크기를 달리해야 합니다.
물론 큰 크기의 이미지를 해상도 구분 없이 drawable폴더에 그냥 추가할 수도 있습니다.
하지만 이는 낮은 해상도의 기기에서 성능상의 문제를 일으킬 수 있고
레이아웃 상에서 이미지의 width, height를 지정하지 못하는 경우(splash) 이미지가 엄청나게 커지는 문제가 발생합니다.
무엇보다도
이미지를 확대하다보면
이미지의 픽셀이 보이면서 깨지게 됩니다.
하...
이 귀찮은 노력을 했음에도 남는건 선명하지 않은 아이콘...
"그렇다면 아이콘 하나를 추가할 때마다 라이센스도 확인하고, 해상도 대응도 해줘야 하나요?"
# 해결책
벡터 이미지를 이용해 위 두 가지 고충을 해결할 수 있습니다.
벡터 이미지는 png이미지처럼 각 픽셀별로 컬러값을 갖지 않고 원, 사각형, 직선 등으로 모양을 직접 그리기 때문에 이미지를 아무리 늘리거나 줄여도 이미지의 품질을 잃지 않고 일정하게 유지됩니다.
라이센스랑 찾기의 귀찮음은요?
역시나 구글은 이 벡터 이미지들을 마음껏 사용할 수 있도록 돕고 있습니다.
그것도 AndroidStudio안에서!
우선 위 그림과 같이 좌측 Project탭의 app을 누르고 메뉴를 열어 New > Vector Asset을 찾아줍니다.
위와 같은 창이 나타나면 Clip Art의 이미지를 눌러 원하는 아이콘을 찾아줍니다.
아래 그림과 같이 drawable에 저장할 이미지의 이름을 지정하고 Next, 뒤이어 Finish를 눌러줍니다.
이제 아래 그림과 같이 벡터 이미지가 추가되었습니다.
저작권 걱정 없이, 해상도 걱정 없이, AndroidStudio안에서!
# 마치며
이외에도 이미 완성된 벡터 이미지(svg, psd)가 있다면 저 Asset Stuidio를 통해 xml로 변환 및 불러올 수 있습니다.
또한 위에서 언급한 사이트 역시 'svg파일로 다운로드'를 지원하므로 라이센스 걱정 없이 더 다양한 벡터 아이콘을 이용할 수 있습니다.
이와 같이, Android Studio에 내장된 Vector Asset Studio를 통해 기존의 방법보다도 훨씬 간편하고 쉽게 이미지를 추가할 수 있었습니다.
이렇게 추가한 아이콘 역시 여느 png와 마찬가지로 어느 레이아웃에서든지 사용할 수 있는데,
이 때 이 아이콘을 적용할 때 기존과는 다른 방식으로 코드가 작성되어야 합니다.
이는 추후 올라갈 게시물을 통해 소개될 예정이니 기다려주세요!
지금까지 나무였습니다.
다음 포스팅에서 봐요!
★댓글과 공감은 블로거에게 큰 힘을 줍니다★
'프로그래밍 노트 > 안드로이드' 카테고리의 다른 글
| [Android/Kotlin] clipToPadding으로 그림자 잘림 방지하기 (0) | 2020.01.28 |
|---|
