왕초보 개발자의 안드로이드 앱 UI 기본 공부하기 - 1편

0. 시작하기에 앞서...
1. 아이콘
   1-1. 아이콘 다운로드
   1-2. 아이콘 활용
2. 텍스트
   2-1. dimens
   2-2. strings
   2-3. style
   2-4. 텍스트 간격
3. 여백(margin)
4. 높이(elevation)

 

 

 

---

 

 

0. 시작하기에 앞서...

나는 미적 감각을 어디 갔다 팔아먹었는지 UI를 꾸미는 데에는 영 소질이 없다.

간격은 어떻게 해야 할지 배치는 또 어떻게 해야 하는지 감각도 없어, 지식도 없어, 할 줄도 몰라...

그래서 이번에 공부를 좀 해봤다.

정말 정말 간단한 기초 지식만 왕초보 입장에서 적어보려고 한다.

 

 

 

1. 아이콘

1-1. 아이콘 다운로드

drawable - New - Vector Asset

 

구글에서는 기본적으로 개발자들이 무료로 사용할 수 있게 아이콘을 제공한다.

위 경로를 따라가면

 

 

 

Clip Art 클릭!

 

이런 창이 뜨는데 Clip Art를 클릭하면 다른 아이콘을 선택할 수 있다.

 

 

 

몇 백개 정도 되려나?

 

그러면 이렇게 상황에 맞는 아이콘들을 고를 수 있다.

 

 

 

Flaticon, the largest database of free vector icons

만약 마음에 드는 아이콘이 없다면 위 사이트에서 찾아보면 된다.

무료로 제공하는 아이콘일지라도 라이선스를 잘 확인해야 한다.

 

 

 

1-2. 아이콘 활용

알림 아이콘을 2가지 종류로 설정했다.

 

아이콘은 크게 2종류로 나뉜다.

선으로만 이루어진 아이콘, 면으로 이루어진 아이콘(=색칠된 거)

이걸 이용하면 아이콘에 조금 생기를 불어넣을 수 있다.

 

위 움짤에서 Bottom Navigation을 보면

알림 아이콘은 누를 때 아이콘이 바뀌고 설정 아이콘은 항상 그대로이다. 

아무래도 아이콘에 변화가 있는 게 사용자 입장에서 '내가 터치를 했구나'라는 느낌을 줄 수 있어서 좋다고 생각한다.

 

 

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/선택 했을때 보여줄 아이콘 이름" android:state_selected="true"></item>
    <item android:drawable="@drawable/선택 안 했을때 보여줄 아이콘 이름" />
</selector>

drawable에 위와 같이 xml파일을 만들어주고

이미지 파일 대신 이 파일을 적용시켜주면 된다.

 

 

 

 

2. 텍스트

2-1. dimens

app - res - values

 

프로젝트에서 values 폴더는 이것저것 값을 저장해놓는 공간이다.

colors: 색상

dimens: 사이즈(크기)

strings: 문자열

styles: 스타일(테마)

각각의 xml 파일은 이런 값 들을 가지고 있다. 만약 파일이 없다면 하나 만들면 된다.

 

 

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="안녕하세요"
                android:textSize="20dp" />

xml 파일에서 폰트의 크기를 변경할 때는 textSize에 값을 넣어주면 되는데

이렇게 "20dp"라는 직접적인 값을 넣어주는 것보다 dimens에서 크기를 정의하여 관리하는 것이 용이하다.

앱에서 사용하는 폰트 크기는 몇 가지 정도로 통일하기 때문이다.

 

 

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textSize="안녕하세요"
                android:textSize="@dimen/bodyTextSize" />

그래서 이렇게 직접적인 크기 대신 위처럼 적고

 

 

<resources>
    <!-- margin 값 -->
    <dimen name="activity_horizontal_margin">16dp</dimen>
    <dimen name="activity_vertical_margin">16dp</dimen>
    <dimen name="activity_margin">16dp</dimen>
    <dimen name="notice_margin">20dp</dimen>
    <dimen name="appBarMargin">54dp</dimen>

    <!-- 폰트 크기 값 -->
    <dimen name="appBarTextSize">18sp</dimen>
    <dimen name="bodyTextSize">16sp</dimen>
    <dimen name="explainTextSize">12sp</dimen>

</resources>

dimens 파일에서는 크기를 정의해주면 된다.

위 코드를 보면 알겠지만 margin 값 같은 것도 dimen에 정의해서 사용할 수 있다.

 

 

 

2-2. strings

<resources>
    <string name="app_name">공지 알리미</string>
    <string name="guide">서버에서 평일 9~6시 사이에\n1시간 간격으로 공지사항을 체크하여 알림을 보냅니다.</string>
</resources>

내용이 변하지 않을 문자열은 strings에 정의해두고 사용하는 것이 편하다.

코틀린이나 xml파일 안에서 직접 문자열을 적을 경우 코드가 복잡해지고 길어지기 때문이다.

 

 

 

2-3. style

    <style name="headerText">
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:textSize">@dimen/appBarTextSize</item>
        <item name="android:textColor">@color/colorBlackHighEmphasis</item>
        <item name="android:textStyle">bold</item>
    </style>

만약 '제목에 쓰이는 텍스트의 속성을 변경해야겠어!'라고 마음먹었는데

앱에서 제목으로 쓰이는 텍스트가 수십 개라면...?

일일이 다 고치는 것이 고역일 것이다.

이건 꼭 텍스트뿐만 아니라 모든 뷰에 해당하는 이야기이다.

그래서 style.xml 파일에 스타일을 정의해놓고 사용하는 것이 편하다.

 

            <TextView
            	style="@style/headerText"
                android:textSize="안녕하세요" />

코드가 아주 간결하게 바뀌었다.

 

 

 

2-4. 텍스트 간격

윽 숨막혀

 

텍스트가 이렇게 다닥다닥 붙어있다면 읽기가 정말 불편할 것이다.

그래서 텍스트끼리의 간격을 조정해주는 작업이 필요하다.

근데 초반에 언급했듯이.. 나는 미적 감각이 정말 없다 ㅠㅠ 이래저래 조정을 해봐도

다른 앱들은 딱 보기 깔끔하고 좋은데 내가 한건 뭔가 엉성하다.

 

 

Material Design

그러다가 google material이라는 것을 알게 되었는데

구글에서 나름대로의 UI 가이드를 만든 것이다.

아래 링크에 들어가면 구글이 열심히 연구한(?) 자료들이 있다.

폰트 외에도 다양한 정보가 있고 아래 링크는 그중 폰트에 관한 것이다.

 

 

안드로이드: UI 디자이너를 위한 타이포그래피 활용

이 블로그도 참고하면 좋다.

 

 

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/license"
                android:lineSpacingExtra="5dp"
                android:lineSpacingMultiplier="1.1"
                android:letterSpacing="0.2"/>

간격을 변경하는 건 위 소스에 있는 속성 값 3개를 사용하면 된다.

글로 설명을 읽는 것 보다 직접 값을 변경해가며 변화를 눈으로 보는 게 이해가 빠르다.

 

 

 

2-5. 텍스트 밝기

 

출처: google material

 

구글 메테리얼에서는 중요도에 따른 밝기를 위와 같이 가이드해주고 있다.

밝기를 조절하는 방법은 간단하다.

 

 

<color name="colorBlack">#000000</color>
<color name="colorBlackHighEmphasis">#D9000000</color>
<color name="colorBlackMediumEmphasis">#99000000</color>
<color name="colorBlackDisabled">#66000000</color>

예를 들어 '#000000'은 투명도가 100%인 검은색을 나타낸다.

이제 투명도를 조절하고 싶다면 숫자 앞에 투명도를 나타내는 값을 넣으면 된다.

 

 

95%	F2	70%	B3	45%	73	20%	33
90%	E6	65%	A6	40%	66	15%	26
85%	D9	60%	99	35%	59	10%	1A
80%	CC	55%	8C	30%	4D	5%	0D
75%	BF	50%	80	25%	40	0%	00

(표 어떻게 이쁘게 수정하지 ㅠㅠ... 디자인 멍청이가 이걸 또...)

아무튼 이 값을 앞에 넣으면 된다.

 

 

 

3. 여백

bottom navigation

 

뷰와 뷰 사이의 여백을 두는 것도 정말 정말 중요한 요소이다.

근데 나는 이것도 얼마나 띄어야 할지 모르겠어서 구글 메테리얼을 참고했다 ㅎ...

위 사진은 bottom navigation이고

 

 

Material Design

이건 리사이클러뷰인데 높이가 최소 48dp는 되어야 한다는 것 같았다.

이와 같은 몇몇 가이드가 문서에 적혀있으니 위 링크에 들어가서 확인하면 된다.

 

 

 

 

개인적으로 눈여겨본 것은 이것인데

사용자가 보는 버튼의 크기보다 실제 터치를 감지하는 범위가 더 커야 한다는 뜻이다.

또, 버튼의 크기는 최소 48dp 이상이 되어야 사용자가 터치를 할 때 불편함을 느끼지 않는다고 한다.

 

 

 

4. 높이(elevation)

뷰마다 높이를 다르게 해야한다.

 

구글 메테리얼에서는 모든 뷰마다 어느 정도의 높이를 가질지 가이드를 정해두었다.

높이가 높을수록 그림자가 생기며 다른 뷰보다 더 앞쪽으로 튀어나와있는 듯한 느낌을 준다.

이를 통해 어떤 버튼이나 요소가 중요하다는 것을 강조하기도 한다.

 

 

Material Design

여기에 들어가면 또 자세히 설명되어있다.

 

 

 

---

 

 

 

Icons made by Freepik from www.flaticon.com