나는 디자이너가 아니라 개발자 이기 때문에 적당한 UI를 디자인 할 수 있는 방법을 리서치 해 보았다. 리서치 해보니 다양한 가이드라인들이 존재하였고 쉽게 적용할 수 있는 몇 가지 방법을 정리해 보았다.



1. Material Design

디자이너가 없는 개발 환경에서 어플을 디자인 할 수 있는 가이드 라인이 존재 한다. 구글에서 제공하는 [Material Guide](https://developer.android.com/training/material/get-started.html?hl=ko) 를 사용하면 된다.

  • material guide blog : http://davidhyk.github.io/google-design-ko/material-design/introduction.html#introduction-principles

구글에서 제공하는 Material Guide 를 사용하면 이미지 파일을 포토샵으로 소스를 만들어 추출 할 필요 없이 안드로이드 디자인 서포트 라이브러리를 연결함으로써 가이드된 UI를 사용 할 수 있다. 여백이나 사이즈 등 수치만 잡아주면 되므로 매우 심플하고 편리하게 어플리케이션을 개발 할 수 있다.

Material Design

은 안드로이드 API 21(롤리팝) 이상 에서만 사용할 수 있다. 안드로이드 스튜디오에서 API 21 이상을 선택하게 되면 테마는 자동으로 머티리얼 테마가 적용이 된다. 머티리얼 테마가 적용이 된것을 확인하려면 res -> values -> sytle.xml 에서 아래의 사진과 같다면 적용이 된 것이다.


머티리얼 테마는 style.xml 에서 다음과 같이 적용 될 수 있다.

  • android:style/Theme.Material (어두운 버전)
  • android:style/Theme.Material.Light (밝은 버전)
  • android:style/Theme.Material.Light.DarkActionBar

사용가능 한 머리티얼 스타일 목록은 [R.style](https://developer.android.com/reference/android/R.style.html?hl=ko) 에서 확인 할 수 있다.



2. Theme Color 지정하기
Material Theme

를 상속 시 테마의 기본 색상을 변경 할 수 있다. 사용자 지정 색상을 사용할 수 있다. 먼저 사용자 색상을 설정하기 위한 요소들은 다음 아래의 그림과 같다.


color 값은 res -> values -> colors.xml 에서 지정 할 수 있다. 디자이너 없이 좋은 컬러값을 추출해 내는 것이 어려운데 [Material Palette](https://www.materialpalette.com/) 를 사용하면 쉽게 컬러 값을 추출 할 수 있다. 각 색상값을 더블클릭하면 웹 컬러값을 자동으로 클립보드에 복사해주기 때문에 ctrl + v하여 사용하거나 palettes 탭에서 주요 테마 색상 2가지를 선택하면 자동으로 테마 뷰를 보여준다.


color 값 정보는 res -> values -> color.xml 파일에 기재하고 컬러값 설정은 res -> values -> styles.xml 에서 설정한다.

  • res -> values -> colors.xml
<resources>
    <color name="colorPrimary">#FF9800</color>
    <color name="colorPrimaryDark">#F57C00</color>
    <color name="windowBackground">#ffffff</color>
    <color name="textColorPrimary">#ffffff</color>
    <color name="textColor">#212121</color>
    <color name="colorAccent">#FF5722</color>
</resources>
  • res -> values -> styles.xml
<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="android:Theme.Material.Light">
        <!-- Customize your theme here. -->
        <item name="android:colorPrimary">@color/colorPrimary</item>
        <item name="android:colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="android:textColorPrimary">@color/textColorPrimary</item>
        <item name="android:colorAccent">@color/colorAccent</item>
    </style>
</resources>



3. Material Icon 사용하기

아이콘은 구글이 공개한 저작권 없는 [Material Icon](https://material.io/icons/) 을 사용하면 된다. Meterial Icon 홈페이지에 접속하면 아이콘을 선택하여 dp별로 SVG(벡터파일)이나 PNG 파일로 다운 받을 수 있다.







refernece
  • https://developer.android.com/training/material/get-started.html?hl=ko
  • http://davidhyk.github.io/google-design-ko/material-design/introduction.html#introduction-principles