Android :: Vector Asset 을 활용한 아이콘 생성 및 활용법 (feat. Material Design)

오늘은 앱 개발에 빠질 수 없는 아이콘을 만드는 방법에 대해 알아봅니다. UX를 향상시키기 위해서는 상황에 맞는 아이콘을 배치하는 것이 꽤나 중요한데요, 이 경우 우리는 개발 툴을 잘 알고 있다는 것을 보여주기 위해 Vector Asset을 활용합니다. Vector Asset이 무엇이고, 어떻게 활용하는지 알아보시죠.

 

#1> 개요

---

End단에서 동작하는 앱은 물론 잘 동작하는 것도 중요하지만, 사용자 경험(UX, User Experience)를 향상시키는 것도 매우 중요합니다. 아무리 효율적으로 동작하는 앱도 못생기고 쓰기 불편하면 아무도 관심가져주지 않기 때문입니다.

 

소... 손나바카나....

UX 향상에 기여하는 가장 좋은 방법은 기능을 직관적으로 나타낼 수 있는 아이콘을 활용하는 것입니다.

 

Android Application 개발툴인 Android Studio에서는 UX를 향상시키고 싶지만 영 센스가 좋지못한 저 같은 똥 손(?) 개발자들을 위해 Vector Asset을 제공합니다. 처음 들어보셨다고요? 그럼 아주 잘 오셨습니다. 이 글을 읽고 나면 앞으로 아이콘이 필요할 때 고민할 필요가 없기 때문입니다.

 

Vector Asset은 SVG 형식의 아이콘을 제공하는데요, 우선 이 svg(Scalable Vector Graphics)에 대해 살펴보시죠.

 

 

#2> SVG(Scalable Vector Graphics) 이란?

---

보통 아이콘이 필요하면 icon finder 혹은 material design 에서 검색하곤 합니다. 여기서 메티리얼 디자인에서는 아이콘을 선택하면 해당 아이콘에 대해 2가지 형식의 다운로드를 지원하는데요, 바로. svg 형식과. png 형식입니다.

 

svg / png 형태의 다운로드를 제공하는 material.io

png는 알겠는데 svg는 뭘까요? svg에 대한 위키 설명은 아래와 같습니다.

스케일러블 벡터 그래픽스 (Scalable Vector Graphics, SVG)는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 
파일 형식으로, 1999년 W3C(World Wide Web Consortium)의 주도하에 개발된 오픈 표준의 벡터 그래픽 파일 형식이다. 

스케일 변경이 자유로운 벡터 기반의 그래픽이라는 말인데, 이런 파일 형식이 탄생하게 된 배경은 HTML의 발전과 밀접한 관련이 있습니다. 홈페이지 관련 기술들이 진화하기 시작하면서 다양한 플랫폼과 사이즈에 따라 적합한 크기의 이미지들을 표시해야 했습니다. 이에 따라 디자이너들은 울며 겨자 먹기 식으로 같은 아이콘 이미지를 20x20, 120x120, 240x240과 같은 식으로 다양한 크기로 제공했으며, 웹 개발자들은 브라우저가 표시 중인 홈페이지의 해상도에 따라 적합한 이미지들을 가져다 쓰곤 했지요. Android에서 drawable-xhdpi / drawable-xxhdpi 와 같은 이미지 리소스 디렉터리를 제공하는 것과 같은 맥락입니다.

 

왜 해상도별로 다른 사이즈의 이미지를 제공할까요? 바로 이런 현상이 발생할 수 있기 때문입니다.

출처: https://ko.wikipedia.org

개발자들의 공통점은 비효율적인 업무를 소름 끼치게 싫어한다는 것입니다. (저만 그런가요?) 그럼 방법을 찾아야죠. 이 비효율적인 작업에 환멸을 느낀 사람들이 찾은 솔루션이 바로 svg입니다. 이미지가 아닌 vector 값이기 때문에 어떤 해상도에서도 깨지지 않고 그 모양을 그대로 유지합니다. 앤드단에서 vector값을 참조해 다시 그리기 때문이죠. 이는 개발자에게도, 디자이너에게도 아주 좋은 솔루션이 되고 있습니다.

 

아직 무슨 말인지 이해가 안 되시나요? 아래 코드와 이미지를 보시면 이해가 되실 겁니다.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="18px" height="18px">
	<path d="M0 0h24v24H0z" fill="none"/>
	<path d="M12 2c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm9 7h-6v13h-2v-6h-2v6H9V9H3V7h18v2z"/>
</svg>

위 코드는 svg를 해석하는 브라우저에서는 이렇게 보입니다.

 

 

#3> Vector Asset이란?

---

Android 개발자 사이트에서는 Vector Asset에 대해 이렇게 설명합니다.

출처: https://developer.android.com/studio/write/vector-asset-studio?hl=ko

어떤가요? 아주 편리한 기능이죠? 이 녀석 실제로 이렇게 생겼습니다.

 

Android Studio의 Vector Asset을 실행한 모습

각 항목에 대해 간단히 설명드리겠습니다.

• Asset Type
  • Clip Art: 머티리얼 디자인에서 제공하는 클립 이미지 중 하나를 사용할 때 선택합니다.
  • Local file: 직접 만든 svg 혹은 psd 파일을 사용할 때 선택합니다.
• Name : 파일 이름을 입력합니다. 해당 파일은 res/drawable 폴더에 저장됩니다.
• Clip Art : 머티리얼 아이콘 중 하나를 선택할 수 있습니다.
• Size : 이미지 크기를 나타냅니다. 기본 사이즈는 24 x 24 dp입니다.
• Color : 아이콘의 색상을 선택합니다.
• Opacity : 투명도를 설정합니다
• Enable auto mirroring for RTL layout : 레아이웃이 좌-우(default) 가 아닌 우-좌 인 경우 아이콘을 뒤집습니다.

설명드린 바와 같이 Vector Asset은 아이콘 생성을 위한 아주 다양한 선택지를 제공합니다. 이 녀석 어떻게 사용하는지 살펴보시죠.

 

 

#4> Vector Asset을 활용한 아이콘 제작

---

Vector Asset은 2가지 방법으로 실행이 가능합니다.

1. File > new > Vector Asset
2. Resource Manager > "+" 버튼 클릭 > Vector Asset

File > new > Vector Asset

Resource Manager > + 버튼 > Vector Asset

위 방식으로 Vercor Asset을 실행하면 아래와 같은 창이 뜨는 걸 확인하실 수 있습니다.

 

Vector Asset이 실행된 모습

각 항목들에 대해서는 #3 섹션에서 설명드렸습니다. 우선 원하는 아이콘을 검색해봐야겠죠? Clip Art 항목의 버튼을 클릭해줍니다.

 

Vector Asset에서 제공하는 아이콘의 모습들

어라? 이 아이콘들 어디서 많이 본 것 같다고요? 맞습니다. Clip Art에서 제공하는 아이콘들은 모두 Material Design에서 제공하는 아이콘들입니다.

 

Material Design에서 동일한 아이콘을 다운받을 수 있다.

여기서 원하는 아이콘을 선택한 뒤 OK를 눌러주면 해당 아이콘에 대한 색상, 투명도 등을 결정해서 저장할 수 있습니다. 이렇게 저장된 벡터 기반 이미지 파일은 원하는 layout에 사용할 수 있습니다.

 

Vector Asset을 사용해 아이콘을 생성한 뒤 적용한 모습

위 사진에서 버튼은 3가지가 보이는데, 저는 ImageButton을 사용했으므로 코드는 아래와 같이 입력했습니다.

<LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="16dp"
        android:layout_marginBottom="16dp"
        android:orientation="vertical"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent">

        <ImageButton
            android:id="@+id/btn_current_location"
            style="@style/MapButton"
            android:layout_marginBottom="16dp"
            android:foreground="?android:attr/selectableItemBackground"
            android:src="@drawable/ic_my_location_black_24dp" />

        <LinearLayout
            style="@style/MapButton"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <ImageButton
                android:id="@+id/btn_zoom_in"
                android:layout_width="@dimen/map_button_size"
                android:layout_height="@dimen/map_button_size"
                android:background="#00000000"
                android:foreground="?android:attr/selectableItemBackground"
                android:src="@drawable/ic_add_black_24dp" />

            <View
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:background="@color/colorMapButtonDivider" />

            <ImageButton
                android:id="@+id/btn_zoom_out"
                android:layout_width="@dimen/map_button_size"
                android:layout_height="@dimen/map_button_size"
                android:background="#00000000"
                android:foreground="?android:attr/selectableItemBackground"
                android:src="@drawable/ic_remove_black_24dp" />
        </LinearLayout>

    </LinearLayout>

각 ImageButton에 src 속성으로 입력된 값들이 Vector Asset을 통해 생성한 아이콘들입니다. 아이콘의 종류가 워낙 다양하기 때문에 디자인 요소가 많이 들어간 아이콘이 아닌 이상은 Vector Asset에서 제공하는 Art Clip만으로 모두 제작이 가능합니다. 실제로 우리가 매일같이 사용하는 앱들도 기본 액션 (뒤로 가기, 확대, 내 위치 등)에 대한 아이콘은 머티리얼 디자인이 제공하는 아이콘들을 사용하고 있습니다.

 

 

#5> 마치며

---

오늘은 알아두면 쓸모 있는 Vector Asset에 대해 알아보았습니다. 안드로이드 개발을 몇 년씩 했어도 이런 도구가 있는지조차 모르는 경우가 많습니다. 이런 작은 디테일이 앱 품질과 개발 속도에 영향을 주기 때문에 속으로 뜨끔하신 분들은 개발자 사이트의 Android Studio에 대한 문서를 가벼운 마음으로 한번 훑어보시길 추천드립니다.

 

너.. 너두?? / 출처: 야나두 광고

글 끝까지 읽어주셔서 감사합니다. 좋은 하루 되십시오.

 

 

---

 

광고 클릭, 하트, 댓글은 필자에게 큰 힘이 됩니다!

, 하트, 댓글은 필자에게 큰 힘이 됩니다!

광고 클릭, 하트, 댓글은 필자에게 큰 힘이 됩니다!

광고 클릭, 하트, 댓글은 필자에게 큰 힘이 됩니다!