KTH_Detail day_화성에서 온 개발자 금성에서 온 기획자 시리즈_4차_안드로이드_홍성훈_20120605

ⓒ 2011 KT Hitel Corporation

화성에서 온 개발자, 금성에서 온 기획자 – 개발자가 들려주는 ‘안드로이드’이야기

Android 팀/홍성훈

2 개발실 / Android팀 ⓒ 2011 KT Hitel Corporation 2

홍성훈(Brad Hong)

Android 팀

트위터 @Awoong

• C/C++(Win32API, MFC, QT, .Net), JAVA(Android)

• Windows CE/Mobile 응용 프로그램 개발

• ucloud, usay 주소록, 프렌딩, 푸딩 카메라…

소개


1. 맛있는 Android - Android 알아가기

A. Android 소개

B. Naming Rule

C. 버전 별 달라진 점

2. Android UI

A. 기본 UI

B. Layout 좀더 알기

C. 해상도와 화면 밀도

D. 9-Patch

3. Android 기능

A. Back키와 앱 종료

B. 기본 앱 설정

C. 앱 위젯

D. 앱 업데이트와 퍼미션

4. Android 개발 프로세스

A. 개발과정

5. Android 개발자가 힘든 이유

A. 파편화

B. 단말부족

C. Layout과 1pixel

Agenda

4 개발실 / Android팀 ⓒ 2011 KT Hitel Corporation

맛있는 Android - Android 소개

- Naming Rule

- 버전 별 달라진 점



Android 소개

• Google의 주도하에 Open Handset Alliance에서 개발

• 한마디로 표현해보면, 모바일 단말의 OS

• Linux kernel위에서 동작하는 Platform

• Android란 OS, Middleware 및 주요 응용프로그램을 포함하는 모바일 기기용 소프트

웨어 모음

• OS라고 불러주세요.



어떻게 디자인하나요? (잘 몰라요;;)

사진 촬영 또는 3D Studio로 모델링

Photoshop 이나 Illustrator를 이용

그럼 개발은 어떻게 할까요?

C/C++언어를 사용하는 NDK(Native Development Kit)

JAVA언어를 사용하는 SDK(Software Development Kit)

이클립스


OS 버전?

2007년 11월 beta 부터 여러 버전이 존재

처음 Android 단말은 HTC Dream으로 1.0(Apple Pie) 버전이 탑재

맛있는 Android?

ABCD 순으로 Code name이 정해짐

Code name = 디저트 이름

Apple pie, Banana bread, Cupcake, Donut, Éclair, Froyo, Gingerbread, Honeycomb, Ice

cream sandwich, Jelly Bean…

단순히 ABCD순일까?

맛있는 Android - Naming Rule


맛있는 Android - 버전 별 달라진 점

버전 별 달라진 점?

Éclair(2.0 ~ 2.1) 와 Froyo(2.2)

많이 먹으면 살찌는 Éclair => 기능은 풍부해졌지만, 느렸던 Éclair

다이어트에 좋은 Froyo => 다이어트해서 빨라진 Froyo

JIT(Just-in-time) !! 외부 메모리 앱 설치 지원!!


맛있는 Android - 버전 별 달라진 점

버전 별 달라진 점?

Gingerbread(2.3.x) 와 Honeycomb(3.x), ICS(Ice Cream Sandwich)(4.0.x)

Honeycomb는 Tablet에 최적화

ICS는 Honeycomb UI를 모바일 단말로 녹여냄

Menu가 Action bar로..

HW버튼은 어디로?


Android UI - 기본 UI

- Layout 좀더 알기

- 해상도와 화면 밀도

- 9-Patch



기본 UI 종류

View와 Layout

Activity

Menu와 Action bar

Dialog와 Toast

Notification

Fragment



View와 Layout

View는 UI의 최소 단위

Layout도 View

Layout은 View들을 적당히 배치할 수 있는 View의 Group

Activity

화면을 구성하는 기본 단위



Dialog와 Toast

Dialog는 꼭 필요할 때에만 사용

Toast는 사용자가 보지 못할 수도 있다.

Notification

지우지 않으면 계속 남아있다.

유저를 앱으로 끌어올 수 있다.



어떻게 하라구;;;??!?!?!?!



Menu와 Action bar

Honeycomb 이후에 Action bar 추가

이전 버전에는 Menu

Navigate UP

Menu Action bar



Menu와 Action bar - 차이

이전 버전 앱을 ICS에서 실행

ICS에 최적화 중간



• Navigate UP 기능을 끈 경우(왼쪽) Navigate UP 기능을 켠 경우(오른쪽) 아이콘 • 자동으로 생긴다

• Navigate UP 버튼의 용도

Menu와 Action bar – Navigate UP



Context Menu

길게 클릭할 때 나온다.

선택된 컨텐츠에 대한 메뉴

Honeycomb, ICS 이전 Honeycomb, ICS 이후



Fragment

Honeycomb 부터 추가

하위 OS에서도 구현할 수 있도록 Library를 따로 제공



TOUCH

ROTATE

ROTATE

TitlesFragment DetailsFragment

FragmentLayout

TitlesFragment DetailsFragment

FragmentLayout DetailsActivity

Fragment


Android UI - 해상도와 화면 밀도

해상도와 화면 밀도

Android는 다양한 해상도의 단말이 존재

=> 다양한 해상도와 다양한 화면 밀도, 다양한 화면 크기를 가진 단말이 있음.

해상도(Resolution)

240x320, 320x480, 480x800, 720x1280, 800x1280….

=> Android에서는 의미 없음. => 고려 대상이 아님.



화면 크기(Screen size)

4”, 4.3”, 4.7”, 10.1”…..

화면 크기 별로 small, normal, large, xlarge로 구별됨

화면 밀도(Density)

DPI(Dots Per Inch): 1inch에 몇 개의 pixel이 있는가?

밀도에 따라 low, medium, high, extra high로 구별됨



쟁점

같은 크기로 보여지게 할 수 없을까?

비슷한 비율로 보여지게 할 수 없을까?

이미지, 디자인 가이드를 따로 만들어야 하는가?

(Size에 따라 4가지 종류 X 밀도에 따라 4가지 종류 = 16가지)



이미지, 이미지 가이드

몇 벌을 만들어야 할까? => 한 벌로 만들어보자.

같은 크기로 보여져야 하는 UI => DP, SP

같은 비율로 보여져야 하는 UI => Layout, 9-Patch



DP(Density-independent pixel, DIP, DPI)

밀도가 다르더라도, 같은 크기로 표시되게 하기 위한 단위

어떤 밀도의 화면에서든지 같은 크기로 보여지게 한다.

Pixel

DP

Low Medium High



SP(Scale-independent pixel)

DP와 비슷하지만, 글꼴 크기 설정에 따라 크기가 틀리다.

글꼴 설정

작게

보통

크게


Android UI - Layout 좀더 알기

View 공통 속성 – 넓이(w)와 높이(h)

• 직접 값으로 입력

• Fill Parent

• Wrap Content

Layout 종류

• Linear layout*

• Relative layout*

• Frame layout*

• Table layout

• Absolute layout

• Scroll layout



Linear Layout

방향(Horizontal, Vertical)

weight

Horizontal



Linear Layout

방향(Horizontal, Vertical)

weight

Vertical



Relative layout

View 들의 관계에 의해서 결정

RED: 부모의 상단, 왼쪽 ORANGE: 부모의 상단, 중간 YELLOW: 부모의 상단, 오른쪽 BLUE: 부모의 중간 GREEN: BLUE의 왼쪽 INDIGO: BLUE의 오른쪽 VIOLET: 부모의 아래쪽 부모



Frame layout

가장 심플한 Layout

View를 겹치게 할 수 있다.



복잡한 Layout 만들기(Quiz)




LinearLayout(Horizontal, w Fill, h Fill)

LinearLayout(Vertical, w 0dp, h Fill, weight 1) Empty View(w 0dp, h Fill, Weight 4)

FrameLayout(w Fill, h Fill)




??????? Layout FrameLayout(w Fill, h Fill)




LinearLayout(Vertical, w Fill, h Fill)

Empty View

(w Fill, h 0dp, weight 3)

FrameLayout(w Fill, h Fill)

LinearLayout(Horizontal, w Fill, h 0dp, weight 1)




LinearLayout(Vertical, w Fill, h Fill) FrameLayout(w Fill, h Fill)

LinearLayout

(Horizontal, w Fill, h 0dp

, Weight 3)

Empty View

(w Fill, h 0dp, Weight 1)



LinearLayout

(Vertical, w 0dp, h Fill, Weight 3)

RelativeLayout

(w 0dp, h Fill,

Weight 1)

Empty View

(w 0dp, h Fill,

Weight 2.5)







RelativeLayout

(w 0dp, h Fill,

Weight 1)






Android UI – 9-Patch 좀 더 알기

9-Patch

9개로 나누어져서 9-Patch

검은색으로 표시

늘어나는 이미지에 적합

늘어나는 부분 표시 : 상단, 왼쪽

내용이 들어갈 부분 표시 : 오른쪽, 하단

늘어나는부분

늘어나는부분



크기에 따라 늘어나는 부분 표시

내용이 표시될 영역 표시





UI 오류(Quiz)



UI 오류(Quiz)



3.44KB

139B

UI 오류(Quiz)



Draw9patch.bat

9 Patch 이미지를 만드는 Tool

JDK 와 Android SDK를 설치하여야 한다. SDK 폴더의 Tools 폴더에 있음.

Photoshop으로 만들어도 됨


Android 기능 - Back키와 앱 종료

- 기본 앱 설정

- 앱 위젯

- 앱 업데이트와 퍼미션


Android 기능 - Back키와 앱 종료

Back키와 앱 종료

Back키는 이전 버튼

앱 종료는 어떻게 해야 할까?

“앱 종료 해야 하는가?”

“아이폰 앱은 종료되는가?”

=> 종료 안 해도 된다. 사용자는 그냥 사용하면 된다. (원래는)

다른 앱은 어떻게 처리하는가?

Facebook 같은 글로벌 App은 그냥 종료된다. 국내 앱은?

팝업으로 종료하시겠습니까? 물어보고 종료하거나 Back키를 두 번 눌러 종료하도록 함.

의도하지 않았지만 사용자 경험으로 굳어지고 있긴 하다.

그냥 종료하는 게 나을 수도 있다?!?


Android 기능 - 기본 앱 설정

기본 앱 설정

Android 폰에 있는 모든 기본 앱들은 대체할 수 있다.

더 좋고 편리한 앱이 있다면, 기본 앱을 쓰지 않고 바꿀 것이다.

“기본 앱으로 설정하면 무슨 일이 벌어지는가?”

그 작업을 위해 항상 기본 앱이 실행된다.

설정에 들어가서 기본 앱 설정을 변경 하지 않으면, 계속 기본 앱으로 실행된다.

노출이 많이 되면, 기회도 많다.

“불공평한 싸움이다?”

“제조사 앱보다 더 좋게 만들 수 있을까?”

더 좋은 가치를 불어 넣는다면….?


Android 기능 - 기본 앱 설정

• 푸딩투

• 갤러리

• 이미지 보정(크롭, 회전)

• 아임인


• 스냅스타일


• 푸딩카메라

• 갤러리


KTH 갤러리 앱이 있다면?

• 중복해서 만들지 않아도 됨 => 비용 절감

• 기능이 더 깊고 단단해짐 => 품질 향상


Android 기능 - 앱 위젯

App widget - 사용자의 홈 스크린을 점령하라!

앱을 실행하지 않아도 정보를 보여줄 수 있다.

실행하지 않아도 볼 수 있다? 앱을 실행하도록 유도할 수 있다.

Home screen은 Cell로 이루어져 있다.

얼마나 많은 Cell을 차지할 것인가?


Android 기능 - 앱 업데이트와 퍼미션

앱 업데이트

옛날엔 양날의 검이었던 업데이트

자동업데이트

퍼미션(Permission)

앱에서 단말 내에 민감한 정보 또는 기능을 사용할 때 설정해야 함.

사용자들은 퍼미션을 보고 신뢰할 수 있는지 없는지 판단하여 설치를 결정.


Android 기능 - 앱 업데이트와 퍼미션

퍼미션 과 앱 업데이트

퍼미션이 추가되면 자동 업데이트 되지 않는다.

(삭제하는건 괜찮다.)

업데이트 목록에는 나타난다.

업데이트 하는 사람이 많을까?

설정 들어가서 제거를 하는 사람이 많을까?

“초기에 필요한 퍼미션은 미리 넣어놓는 것이 좋다?”

균형잡기…

모든 퍼미션을 미리 넣는 것은 아니다.

민감한 퍼미션은 잘 생각해보고 넣자.


Android 개발 프로세스 - 개발 과정


Android 개발 프로세스 - 개발과정

개발 과정

공부 -> UI 작업 -> 이벤트 처리 -> Background 작업 처리 -> 버그 수정 -> 끝

공부?

UX: 스토리 보드 큰 흐름 파악

UI: UI 가이드라인 + 컷팅 이미지

정책 문서, 언어 리스트

서버 API 문서

디테일은 언제 하지?

항상 합니다.


Android 개발 프로세스 - 이벤트처리



View backButton = findViewById(R.id.btnBack);

backButton.setOnClickListener(new OnClickListener() {

@Override

public void onClick(final View arg0) {

finish();

}

});

btnBack



View backButton = findViewById(R.id.btnBack);

backButton.setOnClickListener(new OnClickListener() {

@Override

public void onClick(final View arg0) {

finish();

}

});

TOUCH



컷팅 이미지

이미지 가이드, 서버 API 문서 스토리 보드



클라이언트 서버

이미지 출처: 버드군의 토이 하우스(http://bird238.tistory.com/)

http://bird238.tistory.com/

http://bird238.tistory.com/



UX

오류/안내 팝업까지 고려

논리적 오류

이해가 안 간다.

UI

같은 이미지라면 파일이름은 같아야 한다.

숫자로 시작하면 안 된다.

폴더가 다르더라도 똑같은 이름 이미지 있으면 안 된다.

16진수 색 값을 사용. 투명 값도 16진수.(ARGB순)

공통

뭐가 변경된 건지 잘 모르겠다.

UX 문서는 업데이트되는데 UI 문서는 업데이트가 안되거나, 그 반대의 상황도 생긴다.

표현하는 단어가 틀리다.



앞의 문제들은 Agile하게 하면 해결 할 수 있다.

한 발짝 더…

UI, UX, 정책 모두 따로 나와야 하는가?

UX, UI, 정책문서에서 단어가 틀려서 연결이 안 된다.

이해합니다.

사람이 하는 일이고, 나눠서 하다 보니 연결시키기 쉽지 않습니다.

개발자도 똑같습니다.

나눠서 하다 보면 연결시키는 일이 가장 힘듭니다.

하나의 문서로 만들 수는 없을까?


Android 개발자가 힘든 이유 - 파편화

- 단말 부족

- Layout과 1pixel


Android 개발자가 힘든 이유 - 파편화

파편화

다양한 해상도와 화면 밀도, 그리고 디자인 가이드

디자인 가이드는 iOS 기준으로 만들어진 가이드

다양한 OS 버전

똑같은 소스코드라도 OS 버전마다 차이가 있음.

모든 OS 버전에서 동작하도록 개발

제조사별 차이

구글폰에서 동작하는 앱도 다른 단말에서는 이상동작을 하는 경우가 다반사

통신사별 차이

같은 이름을 가진 단말도 통신사별로 차이가 있음.


Android 개발자가 힘든 이유 - 단말부족

단말부족

모든 해상도와 화면 밀도, 모든 제조사, 모든 통신사에서 나오는 단말을 지원해야 함.

“우리가 보유하고 있는 단말은?”

문제점을 수정하기 위해서는 재현이 되어야 수정이 빠름.

단말이 부족하여 디버깅을 할 수 없으면 추측하여 수정하는 방법밖에 없음.

개발자 지원센터?

문제가 발생할 때마다 개발자 지원센터를 이용한다면, 개발은 언제 하지?


Android 개발자가 힘든 이유 - Layout과 1pixel

Layout과 1pixel

1Pixel 중요할까?

1Pixel을 잘 맞추려면 Layout을 잘 잡아야 한다.

Layout 기준의 Smart한 디자인 가이드

지금까지의 디자인 가이드는 레이아웃 기준이 아닌 Pixel 기준

Layout 기준의 디자인 가이드는?

요소 요소 별로 성격이 있어야 한다.

화면 크기가 틀리더라도 같은 크기로 보여야 하는 요소

화면 크기가 틀려지면 같은 비율로 보여야 하는 요소

엄한 소리 한마디

Layout을 만들어주면 어때요?


정리


정리


Q&A


감사합니다.


Reference

A simple guide to 9-patch for Android UI http://warodridev.blogspot.com/2012/03/simple-guide-to-9-patch-for-android-ui.html

How weight in LinearLayout works http://android.amberfog.com/?p=328

Android, LinearLayout distribution explained(weight and sizes) http://joseluisugia.wordpress.com/2012/01/19/android-linearlayout-distribution-explained-weight-and-sizes/

[유용한TIP] 안드로이드 버전 히스토리 http://www.androidside.com/bbs/board.php?bo_table=B46&wr_id=34046

Android Developer http://developer.android.com/guide/practices/screens_support.html

Project AAA http://wiki.kthcorp.com/display/projectAAA/Simple+example+of+9+patch+image Android 이야기 http://ji5.me/

Android Design http://developer.android.com/design/patterns/selection.html

http://warodridev.blogspot.com/2012/03/simple-guide-to-9-patch-for-android-ui.html
















http://android.amberfog.com/?p=328

http://android.amberfog.com/?p=328

http://joseluisugia.wordpress.com/2012/01/19/android-linearlayout-distribution-explained-weight-and-sizes/














http://www.androidside.com/bbs/board.php?bo_table=B46&wr_id=34046

http://www.androidside.com/bbs/board.php?bo_table=B46&wr_id=34046

http://developer.android.com/guide/practices/screens_support.html

http://developer.android.com/guide/practices/screens_support.html

http://wiki.kthcorp.com/display/projectAAA/Simple+example+of+9+patch+image

http://wiki.kthcorp.com/display/projectAAA/Simple+example+of+9+patch+image

http://ji5.me/

http://ji5.me/

http://developer.android.com/design/patterns/selection.html

Technology

KTH_Detail day_화성에서 온 개발자 금성에서 온 기획자 시리즈_4차_안드로이드_홍성훈_20120605