이 튜토리얼에서는 안드로이드 앱에서 프로필 아이콘(사람 형태) 모양을 그리는 방법을 단계별로 살펴봅니다. XML 벡터 드로어블(Vector Drawable)만 활용하면 이미지 파일 없이도 깔끔하고 선명한 프로필 아이콘을 구현할 수 있습니다.
개요
프로필 아이콘은 사용자 정보 화면, 로그인 페이지, 내비게이션 드로어 등 다양한 곳에서 활용되는 필수 UI 요소입니다. 이번 예제에서는 PNG 이미지 대신 벡터 드로어블을 배경으로 지정하는 방식으로 구현합니다. 벡터 방식은 화면 해상도와 관계없이 항상 선명하게 표시된다는 장점이 있습니다.
구현 단계
1단계: 새 프로젝트 생성
안드로이드 스튜디오(Android Studio)를 실행하고 File ⇒ New Project 메뉴로 이동한 뒤, 새 프로젝트 생성에 필요한 모든 세부 정보를 입력합니다.
2단계: 레이아웃 수정
res/layout/activity_main.xml 파일에 아래 코드를 추가합니다.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
xmlns:tools="https://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center"
android:layout_marginTop="30dp"
tools:context=".MainActivity">
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:background="@drawable/background"/>
</LinearLayout>
위 코드에서는 ImageView를 배치하고, 해당 뷰의 배경(background)으로 background.xml을 지정했습니다. 크기를 100dp로 설정해 화면 중앙에 적당한 크기의 아이콘이 나타나도록 구성했습니다.
3단계: 벡터 드로어블 작성
drawable/background.xml 파일에 다음 코드를 추가합니다.
<vector xmlns:android="https://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:autoMirrored="true"
android:viewportWidth="277.58"
android:viewportHeight="277.58">
<path
android:fillColor="#D80027"
android:pathData="M138.46,164.287c-38.628,0 -69.925,-37.519 -69.925,-83.767C68.535,
34.277 99.832,0 138.46,0c38.634,0 69.957,34.277 69.957,80.52C208.417,
126.768 177.093,164.287 138.46,164.287zM29.689,277.528c0,0 -14.832,
0.979 -21.365,-8.023c-3.53,-4.863 -1.071,-14.718 1.343,-20.217l5.912,
-13.473c0,0 16.35,-36.567 34.962,-57.757c11.433,-12.994 25.031,
-10.035 33.826,-5.809c5.417,2.6 11.542,10.176 16.018,14.191c6.168,
5.532 17.057,11.819 34.859,12.173h10.922c17.791,-0.354 28.68,
-6.641 34.843,-12.173c4.471,-4.014 10.427,-11.825 15.795,
-14.511c8.072,-4.041 20.358,-6.527 31.492,6.13c18.618,21.191 33.363,
58.421 33.363,58.421l6.059,13.212c2.507,5.461 5.075,15.267 1.643,
20.195c-6.124,8.811 -19.874,7.642 -19.874,7.642S29.689,277.528 29.689,
277.528z" />
</vector>
이 벡터 드로어블은 원형의 머리와 어깨 곡선으로 구성된 사람 형태의 경로(path) 데이터를 담고 있으며, fillColor 속성을 통해 붉은색(#D80027)으로 채워집니다. 색상 값을 변경하면 원하는 색상의 프로필 아이콘을 손쉽게 만들 수 있습니다.
앱 실행 및 결과 확인
이제 애플리케이션을 실행해 보겠습니다. 실제 안드로이드 기기가 컴퓨터에 연결되어 있다고 가정합니다. 안드로이드 스튜디오에서 프로젝트의 액티비티 파일 중 하나를 연 후, 툴바에서 Run 아이콘을 클릭하세요. 실행 기기 목록에서 자신의 모바일 기기를 선택하면, 기기 화면에 아래와 같이 프로필 아이콘이 표시됩니다.
