한국의 개발자들을 위한 Google for Developers 국문 블로그입니다.
태블릿용 앱 디자인 도움말
2013년 1월 17일 목요일
작성자:
Roman Nurik
작성일: 2012년 11월 26일
원문:
http://android-developers.blogspot.hk/2012/11/designing-for-tablets-were-here-to-help.html
Google Play에 아주 괜찮은 안드로이드폰 앱을 출시했고, 사용자 반응이 아주 좋습니다. 이제 뒷짐 지고 치솟는 다운로드수를 감상하고 계시군요. 축하합니다! 하지만 여느 진취적인 개발자처럼, 여러분도 “어떻게 하면 내 앱이 더 큰 성공을 거둘 수 있을까? 라고 고민하실 것입니다. 해결책은 바로, ‘동일하게 훌륭한 사용자 경험을 제공하는 태블릿용 앱을 만들라!’는 것입니다.
사용자들은 태블릿용 앱을 좋아합니다.
예를 들어
Mint.com은 넓은 화면 공간을 제공하는 태블릿이 휴대폰보다 7배 가량 더 많은 예산 데이터를 활용하게 만든다는 사실을 파악했습니다. 그리고 TinyCo는 평균적으로 사용자가 휴대폰보다 태블릿에서 35% 더 많은 지출을 한다는 것을 알아냈습니다. 따라서 지금이야말로 더욱 포괄적이고 일상적인 컴퓨터 사용에 대한 소비자들의 욕구를 만족시키기 위하여, 대형 화면 디바이스로 옮겨가기 위한 전략을 세우기에 적절한 시기입니다.
본 포스팅에서는 사용자에게 훌륭한 태블릿 경험을 제공하는 앱을 만들기 위해 활용할 수 있는 일부 리소스에 대해서 설명 드리겠습니다. 이는 상품 관리자, 디자이너, 개발자, QA 엔지니어에 이르기까지 앱 개발 단계에 있는 모든 사람에게 유용한 정보입니다.
안드로이드 디자인 가이드라인
안드로이드 앱 디자인이나 개발에 대한 내용을 다루기 위해서는, 먼저
안드로이드 디자인
가이드라인을 참고해야 합니다. 대부분 섹션에서 안드로이드 디바이스 전체와 관련된 사항을 다루지만, 어떤 섹션에서는 특히 태블릿 디자인과 관련된 내용을 주로 다루고 있습니다.
디바이스와 디스플레이(Devices and Displays)
페이지에서는 밀도 독립성에 대한 개념을 소개합니다. 예를 들어 넥서스 4, 넥서스 7, 모토로라 XOOM 모두 비슷한 픽셀 해상도를 가지고 있지만 (각각 1280x768, 1280x800, 1280x800) 화면 크기는 매우 다릅니다. 픽셀 대신, dip(density-independent pixels)로 생각해 봅시다. dip의 경우, 넥서스 4(640x384 dp)와 넥서스 7(960x600dp), 넥서스 10 혹은 모토로라 XOOM(1280x800 dp)의 차이를 이해하기 쉬워집니다.
매트릭스와 그리드(Metrics and Grids)
에서 논의된 48dp 리듬을 따르면 (특히 태블릿용에서) 크기 요소를 어림 짐작하지 않아도 됩니다. 미심쩍은 경우에는 가로 및 세로 크기 엘리먼트로 48dp (혹은 16dp finer grid) 배수를 사용하세요. 예를 들어, 큰 화면에서 띄엄 띄엄 콘텐츠를 보여줄 때, 96dp 혹은 144dp로 넉넉한 사이드 여백을 사용하세요. 혹은 10인치 태블릿의 마스터/디테일 레이아웃에서 마스터 창의 너비를 결정할 때, 240dp 혹은 288dp 폭으로 마스터 콘텐츠가 어떻게 보이고 어떤 느낌을 주는지 확인하세요.
멀티창 레이아웃(Multi-pane Layouts)
가이드에서는 앱 방향 탐색을 개선하는 동시에 사용 가능한 화면 공간을 최적화하기 위해 연관된 뷰를 단일 화면으로 결합시키는 용례와 예제를 다룹니다. 또한 모든 방향에서 동일한 기능을 유지하면서
가로 및 세로
로 콘텐츠를 배열하기 위한 전략도 다룹니다. 사용자가 가로와 세로 방향을 모두 즐겨 사용하기 때문에 휴대폰용 앱 개발보다 방향 전환에 더욱 적절하게 대응해야 합니다.
다운로드 가능한 스텐실(Downloadable Stencils)
에서는 레퍼런스 디바이스 초안 및 정확한 사이즈의 액션바 등을 갖추어 디자이너들에게 최고의 모형을 위한 출발점을 제공합니다.
개발자를 위한 안드로이드 교육
개발자 사이트의
교육
섹션에서는 과제 기반의 기술 교육 자료를 제공하며 플로우 다이어그램, 예제 코드, 샘플 프로젝트 등을 갖추고 있습니다. 몇몇 강좌에서는 개발자에게 모든 화면 사이즈에 앱 크기를 조정하는 방법을 제공하고 있습니다.
앱 개발 프로세스의 초기 디자인 과정에 더욱 초점을 맞춘 ‘효과적인 방향 탐색 디자인 강좌(Designing Effective Navigation)’는 효과적으로 태블릿에서 화면을 구성하고
그룹화
하는 방법을 제공하며, 이러한 방법으로 간단한 뉴스 읽기 애플리케이션을 위한
와이어 프레임 예제
도 보여줍니다.
화면 분할로 다이나믹 UI 만들기(
Building a Dynamic UI with Fragments
)와
다중 화면을 위한 디자인(Designing for Multiple Screens)
강좌에서는 안드로이드 리소스 프레임워크와 결합하여 어떻게 화면 분할을 사용하는지 보여줍니다. 강좌를 통해서 리소스 alias를 활용하여 코드 재활용을 최대화하고 애플리케이션 크기를 최소화하면서
런타임 시 태블릿과 휴대폰 레이아웃 사이에서 쉽게 선택하는 방법
을 보여줍니다. 또한
현재 레이아웃에 기반하여 UI 플로우를 조정하는
기술을 보여줍니다.
마지막으로, 엄밀히 말하면 교육 강좌는 아니지만,
태블릿 및 휴대폰 지원하기(Supporting Tablets and Handsets
) 문서에서는 주요 우수 사례에 대한 정보를 제공합니다. 텍스트는 건너뛰고 바로 코딩 작업을 시작하고 싶으다면, 이클립스용 안드로이드 개발자 툴을 사용하여 클릭 몇 번으로 여러분의 앱에 휴대폰 및 태블릿 지원을 갖춘
마스터/디테일 플로우
를 추가할 수 있습니다.
안드로이드 다지인 인 액션 하이라이트
Developer Relations 팀에서 함께 모여 안드로이드 디자인 우수 사례에 대해 토론하기 위해 매주
Android Design in Action
라이브 쇼를 진행합니다. 또한 안드로이드 앱의 형태나 느낌을 설명하기 위해서 오리지널 ‘재설계’ 모형을 제공합니다. 최근 에피소드에서는 반응형 디자인(
responsive design
), 즉 어떤 화면 사이즈나 폼팩터에서도 실행될 수 있도록 구성할 수 있는 유연한 앱 디자인에 초점을 맞췄습니다.
해당 에피소드에서는
Google 캘린더
에서 캘린더 이벤트를 만드는 것에서부터,
Pattrn
및
Pocket
에서 월페이퍼와 스토리를 둘러보고
TED
에서 동영상을 보며
오픈 소스
Google I/O 2012 앱
에서 컨퍼런스 스케줄을 관리하는 것에 이르기까지 안드로이드에서 실행되는 성공적인 반응형 디자인 예제를 소개하였습니다. 또한 주기적으로 태블릿 디자인 컨셉을 선보이고 있으니, 디자인 아이디어를 얻으시려면 매주 라이브 쇼를 시청해주세요.
태블릿 앱에 대한 더욱 많은 아이디어를 원하시면, 다음의 앱들을 확인해 보세요.
Expedia Hotels & Flights
,
Pulse News
,
SeriesGuide
,
Tasks
,
Timer
태블릿 품질 체크리스트
developer.android.com에서 “배포(Distribute)” 섹션에서 최근에 공개된
태블릿 앱 품질 체크리스트
를 통해서 본인의 앱이 태블릿용으로 적절한지 다양한 기술 측면에서 확인할 수 있습니다. 해당 체크리스트는 Google Play 팀에서
직원이 선정한 태블릿용
컬렉션에 추천 앱으로 선정되는 방법 중에 하나입니다. 따라서 해당 체크리스트에 정의된 기준을 모바일 상품에 관련된 모든 사람이 숙지하도록 해야 합니다
.
지금 바로 시작하세요!
2013년은 안드로이드 태블릿을 위한 또 다른 흥미로운 해가 될 것 같습니다. 본 포스팅과
developer.android.com
에서 다루었던 우수 사례 및 예제를 참고하여 진화하는 디바이스 환경에서 여러분의 앱이 성공적으로 자리매김할 수 있도록 만들어 보세요! 본인의 앱에 대해서 구체적인 질문이 있으면 구글플러스(
+Android Developers
)나 트위터(
@AndroidDev
)로 문의하세요!
Contents
ML/Tensorflow
Android
Flutter
Web/Chrome
Cloud
Google Play
Community
Game
Firebase
검색
Tag
인디게임페스티벌
정책 세미나
창구프로그램
AdMob
AI
Android
Android 12
Android 12L
Android 13
Android 14
Android Assistant
Android Auto
Android Games
Android Jetpack
Android Machine Learning
Android Privacy
Android Studio
Android TV
Android Wear
App Bundle
bootcamp
Business
Chrome
Cloud
Community
compose
Firebase
Flutter
Foldables
Game
gdg
GDSC
google
Google Developer Student Clubs
Google Play
Google Play Games
Interview
Jetpack
Jetpack Compose
kotlin
Large Screens
Library
ma
Material Design
Material You
ML/Tensorflow
mobile games
Now in Android
PC
Play Console
Policy
priva
wa
wear
Wearables
Web
Web/Chrome
Weeklyupdates
WorkManager
Archive
2024
9월
8월
7월
6월
5월
4월
3월
2월
1월
2023
12월
11월
10월
9월
8월
7월
6월
5월
4월
3월
2월
1월
2022
12월
11월
10월
9월
8월
7월
6월
5월
4월
3월
2월
1월
2021
12월
11월
10월
9월
8월
7월
6월
5월
4월
3월
2월
1월
2020
12월
11월
10월
9월
8월
7월
6월
5월
4월
3월
2월
1월
2019
12월
11월
10월
9월
8월
7월
6월
5월
4월
3월
2월
1월
2018
12월
11월
10월
9월
8월
7월
6월
5월
4월
3월
2월
1월
2017
12월
11월
10월
9월
8월
7월
6월
5월
4월
3월
2월
1월
2016
12월
11월
10월
9월
8월
7월
6월
5월
4월
3월
2월
1월
2015
12월
11월
10월
9월
8월
7월
6월
5월
4월
3월
2월
1월
2014
12월
11월
10월
9월
8월
7월
6월
5월
4월
3월
2월
1월
2013
12월
11월
10월
9월
8월
7월
6월
5월
4월
3월
2월
1월
2012
12월
11월
10월
9월
8월
7월
6월
5월
3월
2월
1월
2011
12월
11월
Feed