안드로이드 앱 디자인: 컴포넌트, 서체, 에셋 관리

 

Android 레이아웃

Materials Design Guideline

- 플랫폼, 환경 및 화면 크기 전반에 걸쳐 일관성을 유지하기 위해 균일한 요소와 간격을 사용함. Android에서는 크게 3가지 영역으로 구분됨.

1. App bars
2. Body
3. Navigation

*스마트폰 화면(스크린 사이즈 600dp 미만)인 경우

*측정 방식 : 4dp 및 8dp 측정 기준

 

- 시각적인 균형을 이루기 위해 4dp, 8dp를 기준으로 크기와 간격을 정한다. 구성 요소의 크기는 8dp 단위로 조정되어 각 화면에서 시각적으로 일관되게 제작가능✨. 아이콘 같이 작은 요소는 4dp 단위에 맞출 수 있지만- 텍스트는  4dp 기준선 그리드에 떨어질 수 있다는 것ㅎㅎ >>> 글줄에따라 폭이 달라질 수 있기때문! 좌정렬인 경우, 좌측- 우정렬인 경우 우측에 맞춰서 그정렬줄만 맞추면 된다라는 개념으로 이해하자:)

 

 

*그리드는 크게 두가지!

- 격자 그리드 / 베이스라인 그리드

 

*개발에서 레이아웃 구현 방식 이해하기

*안드로이드 스튜디오에서 레이아웃을 구현시 주로 사용하는 방식 2가지

- Linear Layout / Constraints Layout

 

대략적으로 어떤식으로 반응형으로 개발이 되는지를 알아두면, 더 자신있게 개발자와 소통하면서 디자인작업 가능(:

 

Android 서체
Roboto	Roboto Serif	Noto Sans
전용 서체	가독성을 위한 명조 폰트	글로벌 폰트
Android의 기본서체	편안한 독서 경험을 위해 설계된 가변 글꼴 모음	모든 언어를 위한 글로벌 글꼴 모음
전 세계 수백가지 언어를 나타내는 3,300개 이상의 글리프가 포함.	다양한 크기와 다양한 두께를 제공하며 어디에서나 편하게 사용가능.	각 Noto Snas 제품군은 Roboto와 호환되며 Noto Sans는 150개 이상의 스크립트와 수천 개의 언어를 지원함🖤.  언어가 지원되지 않을 때 “대체” 글꼴로 사용된다. (개인적으로 애정하는 서체)

 

유형 스케일

: 머티리얼 디자인 3에서는 15가지의 기본타입 스케일 제공

타입: Display / Headline / Title / Label / Body

크기 : Large / Medium / Small

 

*단, 15개 중 사용하지 않는 것을 제외하고 필요한 세트만 활용가능(:

 

타이포그래피 토큰

- 글꼴, 크기, 행간, 자간, 두께 등의 타이포그래피 선택은 토큰을 사용하여 구현가능하다.

 

- 토큰: 디자인 시스템을 구축하고 개발자들과 효율적으로 커뮤니케이션하고 UI의 일관성을 유지할 수 있게 도와주는 것. 시스템 토큰이라고 해서  md.sys.typescale.display-large.font 혹은 md.sys.typescale.display-large.line-height 뒤에 변수네임을 바꿔가면서 기본적으로 제공하는 default value 라고 쓰여져 있다. 이 값을 적용할 수 있게 도와주는 것🖤

 

직접 피그마로 혹은 스케치나 xd로 작업을 할 때 머티어리얼에서 기본적으로 제공하는 이 유형을 활용할거라면 이런 개념은 반드시 숙지!

 

유형 스케일

머티리얼 디자인 2에서는 13가지의 기본 타입 스케일 제공

: H1~6 / Subtitle / Body / Button / Caption / Overline

 

Soucre : Google Mateiral Design

 

주의할 점

> 본문에 얇은 서체는 지양한다. 특히 해상도가 낮은 디스플레이에서는 섬세한 타이포그래피 랜더링에 어려움이 있을 수 있다.

> 작은 크기의 폰트에 두꺼운 서체는 가독성에 영향을 미칠 수 있다.*

 

디자인 툴과 개발 방식간의 차이

: 디자이너 입장에서 알아두면 좋은 부분은, Figma에서 디자인툴로 작업하는 것과 Android Studio에서 개발자 분들이 수치를 입력해서 개발한 결과물이 수치가 완전히 똑같이 적용되더라도 시각적으로 다른 부분이 있을 수 있다. 안드로이드는 베이스라인을 기준으로 행간을 적용해서 미세한 차이가 발생하기 때문이다.

 

커뮤니케이션 필요

디자인 툴과 안드로이드 개발시 행간 조정방법이 다르다. 디자이너의 의도와 다르게 베이스라인을 기준으로 개발되어 시각적으로 정확히 맞추기 어려울 수 있다. 서로의 의견을 존중하고 원활한 커뮤니케이션을 통해 UI를 구현하는 것이 중요하다.

 

컴포넌트

Component란 프로그래밍에 있어 재사용이 가능한 각각의 독립된 모듈.

마치 레고 블록처럼 이미 만들어진 컴포넌트들을 조합하여 빠르게 사용자 인터페이스를 구성가능.

 

각 목적에 맞는 컴포넌트를 활용하면, 효율적으로 앱을 만들 수 있다는 것🖤

Ex. 버튼, date, radio button, tap etc.

 

주요 컴포넌트

 

Andropid에서 자체적으로 제공하는 기본 컴포넌트 : Top App bar / Navigation bar / Cards & Lists / Tab

 

 

목적에 도달하도록 도와주는 액션 컴포넌트 

Common Buttons / Extended FAB (Floating Action Buttons) / FAB / Icon buttons / Segmented button

 

 

 

커뮤니케이션을 도와주는 컴포넌트 

Badges / Progress indicators / Snackbar (토스트 같은거. 무슨 행동을 했을때 그에 대한 반응을 띄어주고, 몇초 뒤에 사라지는 형식으로 제공하기도 함)

 

 

 

여러 요소를 묶는 것을 도와주는 컴포넌트 

Bottom sheets / Cards / Dialogs / Divider / Lists / Side sheets(우측에서 나오는 건데- 모바일 환경에서 사용되기 보다는, 태블릿처럼 큰 화면에서 제공한다)

 

 

 

네비게이션을 도와주는 컴포넌트 

Bottom app bar / Navigation bar / Navigation drawer / Navigation rail (주로 태블릿이나 데스트톱 같이 큰 화면에서만 사용이 됨.) / Search / Tabs / Top app bar

 

 

 

선택을 도와주는 컴포넌트

Checkbox / Chips (칩 타입으로 주로 필터를 쓸 때, 많이 활용) / Date pickers / Menus / Radio button / Sliders / Switch (on/off 토글 방식으로 사용되는 개념) / Time pickers

 

 

 

데이터 입력을 도와주는 컴포넌트

Text inputs

 

나인패치

: 배경으로 사용할 수 있는 확장 가능한 비트맵 이미지

: 이미지를 늘렸을 때 왜곡되는 부분과 그렇지 않은 부분을 설정해서 유지하는 기능 ㅎㅎ.

: 다양한 디바이스에도 자연스럽게 이미지 에셋을 적용하기 위해 안드로이드 스튜디오에 제공하는 기능🖤

: 코드로 구현하기 어려운 디자인을 UI로 구현할 때 활용됨(:

 

Create resizable bitmaps (9-patch files)  |  Android Studio  |  Android Developers

 

에셋 내보내기

개발에 필요한 에셋 저장하는 방법

벡터 : 벡터 그래픽은 .svg x1(mdpi)
비트맵 : 사진 위주의 이미지는 .jpg x4(xxxhdpi)
그래픽 위주의 이미지는 .png x4(xxxhdpi)

 

*안드로이드 시스템에서 자동으로 다른 DPI에 대한 크기 조정을 수행할 수 있으므로 xxxhdpi기준으로 4배로 크기를 키워 작업하는 것은 권장되는 방법 중 하나다.

 

에셋 적용

Android Studio 내에서 에셋을 넣을 때, drawable이란 걸 많이 쓰는데-

drawable-xxxhdpi - xxxhdpi의 icon.png(@4x)
drawable-xxhdpi - xxhdpi의 icon.png(@3x)
drawable-Xhdpi - xhdpi의 icon.png(@2x)
drawble-hdpi - hdpi의 icon.png(@1.5x)
drawble-mdpi - mdpi의 icon.png(@1x)

 

이런식으로 되어있다.

**파일명 뒤에 붙는 @2x, @3x같은 접미사를 없애고, 각 해상도에 맞는 폴더에 넣어줘야 한다.

디자이너가 굳이 이것까지 신경쓰지 않아도 되지만, 이런 형식으로 반영이된다는 걸 알면 좋다는 것(:

 

제플린으로 내보내기

피그마로도 물론 내보낼 수 있지만, 제플린이 훨씬 효율적임(:

 

 

안드로이드에 적합한 에셋 이름

<에셋 이름의 작명 방법>

개발에서 많이 사용되는 작명 규칙 3가지
camelCase	kebab-case	snake_case
iconHeart.svg	icon-heart.svg	icon_heart.svg

 

*이는 팀 내의 개발 규칙이나 개인적 취향에 따라 다를 수 있으며, 중요한 건--> 일관성 있는 작명 규칙을 사용하여 협업과 유지보수에 도움이 되는 것🖤

 

 

에셋 작명시 주의할 점 

> 유효한 문자 세트 a~z(소문자), _, 0~9 다.
> snake_case를 사용하여 언더스코어(_)로 구분을 권장.
> 공백이 있으면 안 된다.
> 첫 글자가 숫자면 안 된다.
> 확장자명에 PNG, JPG같은 대문자 사용하면 안 된다.

 

 

(Do) 

icon_heart.png

 

(Dont’)

icon heart.png

Icon_Heart.png

12_icon.png

icon_heart.PNG

 

 

에셋 작명 팁

: 아이콘 활용시 ‘ic_’ 접두사(prefix)활용
: 배경에셋 활용시 ‘bg_’ 접두사(prefix)활용
: 상태 추가시 pressed, selected 등 접미사 활용

 

Ex. ic_heart.png / ic_heart_pressed.png / ic_heart_selected.png / ic_heart_disabled.png

 

 

앱 런처 아이콘

: 실행하는 앱 아이콘. 제품 아이콘은 브랜드의 제품, 서비스 및 도구를 시각적으로 표현한 것.

> 여러 앱 사이에서 눈에 띄어야 함

> 브랜드 아이덴티티가 묻어나야 함

 

안드로이드 내 앱 런처 아이콘

Android 8.0 이상 : 적응형 아이콘 제작 필요 — 백그라운드와 포그라운드로 구성된 2개의 레이어를 정의해서 만들어야 함.

Android 7.1 (Legacy) : 하나의 에셋으로 제작 필요 *기존 사양에 따른 아이콘은 2019년 5월부터 업로드할 수 없다.

 

적응형 아이콘

: 안드로이드 8.0부터 도입된 새로운 아이콘 포맷으로 다양한 기기 모델에서 여러가지 형태로 표시. 

*앱의 설정이나 유저의 취향에 따라서 다양한 셰입에 대해 아이콘을 여러번 만들필요없이 개발에서 알아서 변환되도록 전환될 수 있도록 하는 기술. 

 

적응형 아이콘 만들기 (Mdpi 기준 전경, 배경 2벌 제작)
Foreground (메인 그래픽 외 투명)	safe area	Background (불투명 이미지)
108 x 108 px	66 x 66 px	108 x 108 px

 

 

적응형 아이콘을 사용하지 않을 경우

레거시 아이콘만 사용할 경우 : 안드로이드 8.0이상에서는 레거시 아이콘은 크기의 75%로 축소되어 들어가며, 백그라운드는 시스템이 자동으로 흰색이 적용된다. 

Asset Size : 512 x 512 px
(배경제외 시 -> 384 x 384 px)

 

플레이스토어

: 구글에서 만든 앱 마켓 플랫폼. 이 앱을 탐색하는 사용자들이 이 앱의 내용을 파악할 수 있도록, 앱 디자인과 미리보기 이미지는 중요한 역할을 한다. 

 

미리보기 이미지

: 앱의 특장점에 대한 설명과 스크린샷으로 이루어진 이미지

: 첫 화면에 3.5개가 보인다 ㅎㅎ.

: 이커머스 관련 플랫폼에서 미리보기 영역에 마케팅 요소로 활용.