ݺߣ

ݺߣShare a Scribd company logo
안드로이드 UI에서의
다양한 스크린 사이즈 지원
안드로이드펍
박성서
발표자
 박성서(회색)
  2008 안드로이드 개발자 챌린지 I 입상
  2009 안드로이드 개발자 챌린지 II TOP 20

  안드로이드펍 운영자
   http://www.androidpub.com


  회색의 구글 안드로이드 개발 블로그
   http://graynote.tistory.com




               ANDROIDPUB.COM
UI 레이아웃




레이아웃 디자읶 어떻게 하시나요?




          ANDROIDPUB.COM
안드로이드의 다양성
 현재의 스크린
    QVGA(240x320), 120dpi     : HTC Tatoo
    HVGA(320x480), 160dpi     : 안드로원, HTC G1
    WVGA(480x800), 240dpi    : 넥서스원, 갤럭시A
    FWVGA(480x854), 240dpi    : 모토로이

 앞으로는 더 종류가 많아짐
  WQVGA(240x400)
  FWQVGA(320x432)
  ..


 스크린 사이즈 처리방법을 모르면 제대로 된 안드로
 이드 앱개발을 할 수가 없음
                  ANDROIDPUB.COM
용어 정리
 스크린 사이즈 (Screen Size)
  스크린 사이즈는 스크린의 대각선 크기로 재어지는 물리적
   읶 크기를 나타낸다. 안드로이드는 스크린 사이즈를 크게
   3가지로 분류하는데 large, normal, small로 나눈다.

 가로세로 비 (Aspect ratio)
  가로세로 비는 스크린의 물리적읶 넓이와 높이의 비율로 결
   정된다. 안드로이드는 가로세로 비를 long과 notlong 으로
   나눈다.

 해상도 (Resolution)
  스크린이 가지고 있는 전체 픽셀의 수. 해상도는 종종 넓이
   x 높이로 표현되지만 해상도가 특정 가로세로 비를 의미하
   지는 않는다. 안드로이드에서는 해상도를 직접 처리하지 않
   는다.

                ANDROIDPUB.COM
용어 정리
 밀도 (Density)
   스크린 해상도를 기반으로 물리적읶 넓이와 높이 안에 얼
   마나 많은 픽셀이 들어있는가를 나타낸다. Lower density의
   스크린에서는 같은 넓이와 높이 안에 더 적은 수의 픽셀이
   있고, higher density의 스크린에서는 같은 넓이와 높이 안
   에 더 많은 수의 픽셀이 있다. 안드로이드는 밀도를 high,
   medium, low 세가지 분류로 나눈다. 플랫폼에서는 실제 스
   크린 밀도에 맞게 리소스들의 사이즈를 조정한다.

 Density-independent pixel (dip)
   밀도와 상관없이 레이아웃의 위치를 표현할 때 사용하는 가
    상의 pixel 단위. Density-independent pixel 은 기본 밀도읶
    160dip에서의 물리적읶 pixel과 같다.
   픽셀 변홖 공식 pixels = dips * (density / 160)



                 ANDROIDPUB.COM
지원되는 스크린 타입
           Low density 120   Medium density 160    High density 240
                ldpi               mdpi                  hdpi
Small    • QVGA (240x320)
screen     2.6"-3.0”
Normal • WQVGA (240x400) • HVGA (320x480)         • WVGA (480x800)
screen   3.2"-3.5”         3.0"-3.5”                3.3"-4.0”
       • FWQVGA (240x432)                         • FWVGA (480x854)
         3.5"-3.8”                                  3.5"-4.0”
Large                        • WVGA (480x800)
screen                         4.8"-5.5”
                             • FWVGA (480x854)
                               5.0"-5.8”

 기본 스크린 (Baseline screen)
     HVGA, Normal Screen, Medium density
     DIP와 Pixel 1:1 매치

                       ANDROIDPUB.COM

More Related Content

Similar to 안드로이드의 다양성과 UI 레이아웃 (20)

H3 2011 반응형 웹디자인, 진짜 할 만 한가?
H3 2011 반응형 웹디자인, 진짜 할 만 한가?H3 2011 반응형 웹디자인, 진짜 할 만 한가?
H3 2011 반응형 웹디자인, 진짜 할 만 한가?
KTH
Xamarin android
Xamarin androidXamarin android
Xamarin android
HyungKuIm
Monthlyhands SMART TV Report ver2.0
Monthlyhands SMART TV Report ver2.0Monthlyhands SMART TV Report ver2.0
Monthlyhands SMART TV Report ver2.0
HANDSTUDIO
시나브로 CSS3
시나브로 CSS3시나브로 CSS3
시나브로 CSS3
승환 오
[NEXT] Android 개발 경험 프로젝트 1일차 (Widget, Linear Layout)
[NEXT] Android  개발 경험 프로젝트 1일차 (Widget, Linear Layout) [NEXT] Android  개발 경험 프로젝트 1일차 (Widget, Linear Layout)
[NEXT] Android 개발 경험 프로젝트 1일차 (Widget, Linear Layout)
YoungSu Son
AD의 TAD와 협업.pptx
AD의 TAD와 협업.pptxAD의 TAD와 협업.pptx
AD의 TAD와 협업.pptx
Visual Tech Dev
[태블릿코드] 모바일 디바이스의 진화, 태블릿에 길을 묻다
[태블릿코드] 모바일 디바이스의 진화, 태블릿에 길을 묻다[태블릿코드] 모바일 디바이스의 진화, 태블릿에 길을 묻다
[태블릿코드] 모바일 디바이스의 진화, 태블릿에 길을 묻다
lswcap
유니티 게임 그래픽스 아트 개발 사례 분석
유니티 게임 그래픽스 아트 개발 사례 분석유니티 게임 그래픽스 아트 개발 사례 분석
유니티 게임 그래픽스 아트 개발 사례 분석
SangYun Yi
버츄얼 프라모델 Virtual Plamodel
버츄얼 프라모델 Virtual Plamodel버츄얼 프라모델 Virtual Plamodel
버츄얼 프라모델 Virtual Plamodel
Jinnie Park
반응형, 적응형 웹, 그 다음은? (지훈 Ux pd)
반응형, 적응형 웹, 그 다음은? (지훈 Ux pd)반응형, 적응형 웹, 그 다음은? (지훈 Ux pd)
반응형, 적응형 웹, 그 다음은? (지훈 Ux pd)
Saltlux zinyus
Unity3D 엔진을 활용한 게임환경 분석 및 3D 그래픽스 기술 /제작 사례
Unity3D 엔진을 활용한 게임환경 분석 및 3D 그래픽스 기술 /제작 사례Unity3D 엔진을 활용한 게임환경 분석 및 3D 그래픽스 기술 /제작 사례
Unity3D 엔진을 활용한 게임환경 분석 및 3D 그래픽스 기술 /제작 사례
SangYun Yi
HTML5 관점에서 본 2015년 웹개발 트렌드 및 인사이트
HTML5 관점에서 본 2015년 웹개발 트렌드 및 인사이트HTML5 관점에서 본 2015년 웹개발 트렌드 및 인사이트
HTML5 관점에서 본 2015년 웹개발 트렌드 및 인사이트
Jun Ho Lee
Adapting UI to different screens
Adapting UI to different screensAdapting UI to different screens
Adapting UI to different screens
영철 권
웹 차트 SVG Chart 'SBChart'
웹 차트 SVG Chart 'SBChart'웹 차트 SVG Chart 'SBChart'
웹 차트 SVG Chart 'SBChart'
ssuser4e0be8
질병관리본부 특강 - 모바일 “고해상도 디스플레이” 시대를 준비하다
질병관리본부 특강 - 모바일 “고해상도 디스플레이”  시대를 준비하다질병관리본부 특강 - 모바일 “고해상도 디스플레이”  시대를 준비하다
질병관리본부 특강 - 모바일 “고해상도 디스플레이” 시대를 준비하다
yamoo9
Vmsoft clairview NVR, VMS, IVS
Vmsoft clairview NVR, VMS, IVSVmsoft clairview NVR, VMS, IVS
Vmsoft clairview NVR, VMS, IVS
Daniel Park
Tobii Pro 고정형 X/TX 시리즈
Tobii Pro 고정형 X/TX 시리즈 Tobii Pro 고정형 X/TX 시리즈
Tobii Pro 고정형 X/TX 시리즈
Nari Park
[IoT] MAKE with Open H/W + Node.JS - 1st
[IoT] MAKE with Open H/W + Node.JS - 1st[IoT] MAKE with Open H/W + Node.JS - 1st
[IoT] MAKE with Open H/W + Node.JS - 1st
Park Jonggun
모바일어디자인
모바일어디자인모바일어디자인
모바일어디자인
lovemarkj
H3 2011 반응형 웹디자인, 진짜 할 만 한가?
H3 2011 반응형 웹디자인, 진짜 할 만 한가?H3 2011 반응형 웹디자인, 진짜 할 만 한가?
H3 2011 반응형 웹디자인, 진짜 할 만 한가?
KTH
Monthlyhands SMART TV Report ver2.0
Monthlyhands SMART TV Report ver2.0Monthlyhands SMART TV Report ver2.0
Monthlyhands SMART TV Report ver2.0
HANDSTUDIO
[NEXT] Android 개발 경험 프로젝트 1일차 (Widget, Linear Layout)
[NEXT] Android  개발 경험 프로젝트 1일차 (Widget, Linear Layout) [NEXT] Android  개발 경험 프로젝트 1일차 (Widget, Linear Layout)
[NEXT] Android 개발 경험 프로젝트 1일차 (Widget, Linear Layout)
YoungSu Son
[태블릿코드] 모바일 디바이스의 진화, 태블릿에 길을 묻다
[태블릿코드] 모바일 디바이스의 진화, 태블릿에 길을 묻다[태블릿코드] 모바일 디바이스의 진화, 태블릿에 길을 묻다
[태블릿코드] 모바일 디바이스의 진화, 태블릿에 길을 묻다
lswcap
유니티 게임 그래픽스 아트 개발 사례 분석
유니티 게임 그래픽스 아트 개발 사례 분석유니티 게임 그래픽스 아트 개발 사례 분석
유니티 게임 그래픽스 아트 개발 사례 분석
SangYun Yi
버츄얼 프라모델 Virtual Plamodel
버츄얼 프라모델 Virtual Plamodel버츄얼 프라모델 Virtual Plamodel
버츄얼 프라모델 Virtual Plamodel
Jinnie Park
반응형, 적응형 웹, 그 다음은? (지훈 Ux pd)
반응형, 적응형 웹, 그 다음은? (지훈 Ux pd)반응형, 적응형 웹, 그 다음은? (지훈 Ux pd)
반응형, 적응형 웹, 그 다음은? (지훈 Ux pd)
Saltlux zinyus
Unity3D 엔진을 활용한 게임환경 분석 및 3D 그래픽스 기술 /제작 사례
Unity3D 엔진을 활용한 게임환경 분석 및 3D 그래픽스 기술 /제작 사례Unity3D 엔진을 활용한 게임환경 분석 및 3D 그래픽스 기술 /제작 사례
Unity3D 엔진을 활용한 게임환경 분석 및 3D 그래픽스 기술 /제작 사례
SangYun Yi
HTML5 관점에서 본 2015년 웹개발 트렌드 및 인사이트
HTML5 관점에서 본 2015년 웹개발 트렌드 및 인사이트HTML5 관점에서 본 2015년 웹개발 트렌드 및 인사이트
HTML5 관점에서 본 2015년 웹개발 트렌드 및 인사이트
Jun Ho Lee
Adapting UI to different screens
Adapting UI to different screensAdapting UI to different screens
Adapting UI to different screens
영철 권
웹 차트 SVG Chart 'SBChart'
웹 차트 SVG Chart 'SBChart'웹 차트 SVG Chart 'SBChart'
웹 차트 SVG Chart 'SBChart'
ssuser4e0be8
질병관리본부 특강 - 모바일 “고해상도 디스플레이” 시대를 준비하다
질병관리본부 특강 - 모바일 “고해상도 디스플레이”  시대를 준비하다질병관리본부 특강 - 모바일 “고해상도 디스플레이”  시대를 준비하다
질병관리본부 특강 - 모바일 “고해상도 디스플레이” 시대를 준비하다
yamoo9
Vmsoft clairview NVR, VMS, IVS
Vmsoft clairview NVR, VMS, IVSVmsoft clairview NVR, VMS, IVS
Vmsoft clairview NVR, VMS, IVS
Daniel Park
Tobii Pro 고정형 X/TX 시리즈
Tobii Pro 고정형 X/TX 시리즈 Tobii Pro 고정형 X/TX 시리즈
Tobii Pro 고정형 X/TX 시리즈
Nari Park
[IoT] MAKE with Open H/W + Node.JS - 1st
[IoT] MAKE with Open H/W + Node.JS - 1st[IoT] MAKE with Open H/W + Node.JS - 1st
[IoT] MAKE with Open H/W + Node.JS - 1st
Park Jonggun
모바일어디자인
모바일어디자인모바일어디자인
모바일어디자인
lovemarkj

More from mosaicnet (20)

카톡, CGV, 네이버 등 히트 앱 UI/UX 쪼개기(분석)
카톡, CGV, 네이버 등 히트 앱 UI/UX 쪼개기(분석)카톡, CGV, 네이버 등 히트 앱 UI/UX 쪼개기(분석)
카톡, CGV, 네이버 등 히트 앱 UI/UX 쪼개기(분석)
mosaicnet
모바일 웹/앱 UI & UX 설계 이론(2)
모바일 웹/앱 UI & UX 설계 이론(2)모바일 웹/앱 UI & UX 설계 이론(2)
모바일 웹/앱 UI & UX 설계 이론(2)
mosaicnet
모바일 웹/앱 UI & UX 설계 이론(1)
모바일 웹/앱 UI & UX 설계 이론(1)모바일 웹/앱 UI & UX 설계 이론(1)
모바일 웹/앱 UI & UX 설계 이론(1)
mosaicnet
개발자와 디자이너 간 실제 커뮤니케이션(협업) 사례
개발자와 디자이너 간 실제 커뮤니케이션(협업) 사례개발자와 디자이너 간 실제 커뮤니케이션(협업) 사례
개발자와 디자이너 간 실제 커뮤니케이션(협업) 사례
mosaicnet
어려운 협업의 극복 방안은 UI개념의 공유
어려운 협업의 극복 방안은 UI개념의 공유어려운 협업의 극복 방안은 UI개념의 공유
어려운 협업의 극복 방안은 UI개념의 공유
mosaicnet
모바일 시대 스마트해진 고객 대응을 위한 시장 분석과 전략(2)
모바일 시대 스마트해진 고객 대응을 위한 시장 분석과 전략(2)모바일 시대 스마트해진 고객 대응을 위한 시장 분석과 전략(2)
모바일 시대 스마트해진 고객 대응을 위한 시장 분석과 전략(2)
mosaicnet
모바일 시대 스마트해진 고객 대응을 위한 시장 분석과 전략(1)
모바일 시대 스마트해진 고객 대응을 위한 시장 분석과 전략(1)모바일 시대 스마트해진 고객 대응을 위한 시장 분석과 전략(1)
모바일 시대 스마트해진 고객 대응을 위한 시장 분석과 전략(1)
mosaicnet
앱스프레소를 이용한 모바일 앱 개발(2)
앱스프레소를 이용한 모바일 앱 개발(2)앱스프레소를 이용한 모바일 앱 개발(2)
앱스프레소를 이용한 모바일 앱 개발(2)
mosaicnet
앱스프레소를 이용한 모바일 앱 개발(1)
앱스프레소를 이용한 모바일 앱 개발(1)앱스프레소를 이용한 모바일 앱 개발(1)
앱스프레소를 이용한 모바일 앱 개발(1)
mosaicnet
UX 핫 트렌드, 멀티 플랫폼 모바일 개발(2)
UX 핫 트렌드, 멀티 플랫폼 모바일 개발(2)UX 핫 트렌드, 멀티 플랫폼 모바일 개발(2)
UX 핫 트렌드, 멀티 플랫폼 모바일 개발(2)
mosaicnet
UX 핫 트렌드, 멀티 플랫폼 모바일 개발(1)
UX 핫 트렌드, 멀티 플랫폼 모바일 개발(1)UX 핫 트렌드, 멀티 플랫폼 모바일 개발(1)
UX 핫 트렌드, 멀티 플랫폼 모바일 개발(1)
mosaicnet
구글 앱 엔진을 이용한 소셜네트워크게임(SNG) 개발(2)
구글 앱 엔진을 이용한 소셜네트워크게임(SNG) 개발(2)구글 앱 엔진을 이용한 소셜네트워크게임(SNG) 개발(2)
구글 앱 엔진을 이용한 소셜네트워크게임(SNG) 개발(2)
mosaicnet
구글 앱 엔진을 이용한 소셜네트워크게임(SNG) 개발(1)
구글 앱 엔진을 이용한 소셜네트워크게임(SNG) 개발(1)구글 앱 엔진을 이용한 소셜네트워크게임(SNG) 개발(1)
구글 앱 엔진을 이용한 소셜네트워크게임(SNG) 개발(1)
mosaicnet
친구가 추천하는 검색? 소셜 서치 지폰
친구가 추천하는 검색? 소셜 서치 지폰친구가 추천하는 검색? 소셜 서치 지폰
친구가 추천하는 검색? 소셜 서치 지폰
mosaicnet
동영상 검색의 새로운 패러다임
동영상 검색의 새로운 패러다임동영상 검색의 새로운 패러다임
동영상 검색의 새로운 패러다임
mosaicnet
오빠믿지에서 글로벌LBS서비스로, 무료 앱의 생존법(2)
오빠믿지에서 글로벌LBS서비스로, 무료 앱의 생존법(2)오빠믿지에서 글로벌LBS서비스로, 무료 앱의 생존법(2)
오빠믿지에서 글로벌LBS서비스로, 무료 앱의 생존법(2)
mosaicnet
오빠믿지에서 글로벌LBS서비스로, 무료 앱의 생존법(1)
오빠믿지에서 글로벌LBS서비스로, 무료 앱의 생존법(1)오빠믿지에서 글로벌LBS서비스로, 무료 앱의 생존법(1)
오빠믿지에서 글로벌LBS서비스로, 무료 앱의 생존법(1)
mosaicnet
애플이 꿈꾸는 검색 미래인 인식 기술을 통한 서비스
애플이 꿈꾸는 검색 미래인 인식 기술을 통한 서비스 애플이 꿈꾸는 검색 미래인 인식 기술을 통한 서비스
애플이 꿈꾸는 검색 미래인 인식 기술을 통한 서비스
mosaicnet
펜션 전문 레스티 버티칼 검색의 기술적 특징과 시장성
펜션 전문 레스티 버티칼 검색의 기술적 특징과 시장성펜션 전문 레스티 버티칼 검색의 기술적 특징과 시장성
펜션 전문 레스티 버티칼 검색의 기술적 특징과 시장성
mosaicnet
감성 컴퓨팅과 검색
감성 컴퓨팅과 검색감성 컴퓨팅과 검색
감성 컴퓨팅과 검색
mosaicnet
카톡, CGV, 네이버 등 히트 앱 UI/UX 쪼개기(분석)
카톡, CGV, 네이버 등 히트 앱 UI/UX 쪼개기(분석)카톡, CGV, 네이버 등 히트 앱 UI/UX 쪼개기(분석)
카톡, CGV, 네이버 등 히트 앱 UI/UX 쪼개기(분석)
mosaicnet
모바일 웹/앱 UI & UX 설계 이론(2)
모바일 웹/앱 UI & UX 설계 이론(2)모바일 웹/앱 UI & UX 설계 이론(2)
모바일 웹/앱 UI & UX 설계 이론(2)
mosaicnet
모바일 웹/앱 UI & UX 설계 이론(1)
모바일 웹/앱 UI & UX 설계 이론(1)모바일 웹/앱 UI & UX 설계 이론(1)
모바일 웹/앱 UI & UX 설계 이론(1)
mosaicnet
개발자와 디자이너 간 실제 커뮤니케이션(협업) 사례
개발자와 디자이너 간 실제 커뮤니케이션(협업) 사례개발자와 디자이너 간 실제 커뮤니케이션(협업) 사례
개발자와 디자이너 간 실제 커뮤니케이션(협업) 사례
mosaicnet
어려운 협업의 극복 방안은 UI개념의 공유
어려운 협업의 극복 방안은 UI개념의 공유어려운 협업의 극복 방안은 UI개념의 공유
어려운 협업의 극복 방안은 UI개념의 공유
mosaicnet
모바일 시대 스마트해진 고객 대응을 위한 시장 분석과 전략(2)
모바일 시대 스마트해진 고객 대응을 위한 시장 분석과 전략(2)모바일 시대 스마트해진 고객 대응을 위한 시장 분석과 전략(2)
모바일 시대 스마트해진 고객 대응을 위한 시장 분석과 전략(2)
mosaicnet
모바일 시대 스마트해진 고객 대응을 위한 시장 분석과 전략(1)
모바일 시대 스마트해진 고객 대응을 위한 시장 분석과 전략(1)모바일 시대 스마트해진 고객 대응을 위한 시장 분석과 전략(1)
모바일 시대 스마트해진 고객 대응을 위한 시장 분석과 전략(1)
mosaicnet
앱스프레소를 이용한 모바일 앱 개발(2)
앱스프레소를 이용한 모바일 앱 개발(2)앱스프레소를 이용한 모바일 앱 개발(2)
앱스프레소를 이용한 모바일 앱 개발(2)
mosaicnet
앱스프레소를 이용한 모바일 앱 개발(1)
앱스프레소를 이용한 모바일 앱 개발(1)앱스프레소를 이용한 모바일 앱 개발(1)
앱스프레소를 이용한 모바일 앱 개발(1)
mosaicnet
UX 핫 트렌드, 멀티 플랫폼 모바일 개발(2)
UX 핫 트렌드, 멀티 플랫폼 모바일 개발(2)UX 핫 트렌드, 멀티 플랫폼 모바일 개발(2)
UX 핫 트렌드, 멀티 플랫폼 모바일 개발(2)
mosaicnet
UX 핫 트렌드, 멀티 플랫폼 모바일 개발(1)
UX 핫 트렌드, 멀티 플랫폼 모바일 개발(1)UX 핫 트렌드, 멀티 플랫폼 모바일 개발(1)
UX 핫 트렌드, 멀티 플랫폼 모바일 개발(1)
mosaicnet
구글 앱 엔진을 이용한 소셜네트워크게임(SNG) 개발(2)
구글 앱 엔진을 이용한 소셜네트워크게임(SNG) 개발(2)구글 앱 엔진을 이용한 소셜네트워크게임(SNG) 개발(2)
구글 앱 엔진을 이용한 소셜네트워크게임(SNG) 개발(2)
mosaicnet
구글 앱 엔진을 이용한 소셜네트워크게임(SNG) 개발(1)
구글 앱 엔진을 이용한 소셜네트워크게임(SNG) 개발(1)구글 앱 엔진을 이용한 소셜네트워크게임(SNG) 개발(1)
구글 앱 엔진을 이용한 소셜네트워크게임(SNG) 개발(1)
mosaicnet
친구가 추천하는 검색? 소셜 서치 지폰
친구가 추천하는 검색? 소셜 서치 지폰친구가 추천하는 검색? 소셜 서치 지폰
친구가 추천하는 검색? 소셜 서치 지폰
mosaicnet
동영상 검색의 새로운 패러다임
동영상 검색의 새로운 패러다임동영상 검색의 새로운 패러다임
동영상 검색의 새로운 패러다임
mosaicnet
오빠믿지에서 글로벌LBS서비스로, 무료 앱의 생존법(2)
오빠믿지에서 글로벌LBS서비스로, 무료 앱의 생존법(2)오빠믿지에서 글로벌LBS서비스로, 무료 앱의 생존법(2)
오빠믿지에서 글로벌LBS서비스로, 무료 앱의 생존법(2)
mosaicnet
오빠믿지에서 글로벌LBS서비스로, 무료 앱의 생존법(1)
오빠믿지에서 글로벌LBS서비스로, 무료 앱의 생존법(1)오빠믿지에서 글로벌LBS서비스로, 무료 앱의 생존법(1)
오빠믿지에서 글로벌LBS서비스로, 무료 앱의 생존법(1)
mosaicnet
애플이 꿈꾸는 검색 미래인 인식 기술을 통한 서비스
애플이 꿈꾸는 검색 미래인 인식 기술을 통한 서비스 애플이 꿈꾸는 검색 미래인 인식 기술을 통한 서비스
애플이 꿈꾸는 검색 미래인 인식 기술을 통한 서비스
mosaicnet
펜션 전문 레스티 버티칼 검색의 기술적 특징과 시장성
펜션 전문 레스티 버티칼 검색의 기술적 특징과 시장성펜션 전문 레스티 버티칼 검색의 기술적 특징과 시장성
펜션 전문 레스티 버티칼 검색의 기술적 특징과 시장성
mosaicnet
감성 컴퓨팅과 검색
감성 컴퓨팅과 검색감성 컴퓨팅과 검색
감성 컴퓨팅과 검색
mosaicnet

안드로이드의 다양성과 UI 레이아웃

  • 1. 안드로이드 UI에서의 다양한 스크린 사이즈 지원 안드로이드펍 박성서
  • 2. 발표자  박성서(회색)  2008 안드로이드 개발자 챌린지 I 입상  2009 안드로이드 개발자 챌린지 II TOP 20  안드로이드펍 운영자  http://www.androidpub.com  회색의 구글 안드로이드 개발 블로그  http://graynote.tistory.com ANDROIDPUB.COM
  • 3. UI 레이아웃 레이아웃 디자읶 어떻게 하시나요? ANDROIDPUB.COM
  • 4. 안드로이드의 다양성  현재의 스크린  QVGA(240x320), 120dpi : HTC Tatoo  HVGA(320x480), 160dpi : 안드로원, HTC G1  WVGA(480x800), 240dpi : 넥서스원, 갤럭시A  FWVGA(480x854), 240dpi : 모토로이  앞으로는 더 종류가 많아짐  WQVGA(240x400)  FWQVGA(320x432)  ..  스크린 사이즈 처리방법을 모르면 제대로 된 안드로 이드 앱개발을 할 수가 없음 ANDROIDPUB.COM
  • 5. 용어 정리  스크린 사이즈 (Screen Size)  스크린 사이즈는 스크린의 대각선 크기로 재어지는 물리적 읶 크기를 나타낸다. 안드로이드는 스크린 사이즈를 크게 3가지로 분류하는데 large, normal, small로 나눈다.  가로세로 비 (Aspect ratio)  가로세로 비는 스크린의 물리적읶 넓이와 높이의 비율로 결 정된다. 안드로이드는 가로세로 비를 long과 notlong 으로 나눈다.  해상도 (Resolution)  스크린이 가지고 있는 전체 픽셀의 수. 해상도는 종종 넓이 x 높이로 표현되지만 해상도가 특정 가로세로 비를 의미하 지는 않는다. 안드로이드에서는 해상도를 직접 처리하지 않 는다. ANDROIDPUB.COM
  • 6. 용어 정리  밀도 (Density)  스크린 해상도를 기반으로 물리적읶 넓이와 높이 안에 얼 마나 많은 픽셀이 들어있는가를 나타낸다. Lower density의 스크린에서는 같은 넓이와 높이 안에 더 적은 수의 픽셀이 있고, higher density의 스크린에서는 같은 넓이와 높이 안 에 더 많은 수의 픽셀이 있다. 안드로이드는 밀도를 high, medium, low 세가지 분류로 나눈다. 플랫폼에서는 실제 스 크린 밀도에 맞게 리소스들의 사이즈를 조정한다.  Density-independent pixel (dip)  밀도와 상관없이 레이아웃의 위치를 표현할 때 사용하는 가 상의 pixel 단위. Density-independent pixel 은 기본 밀도읶 160dip에서의 물리적읶 pixel과 같다.  픽셀 변홖 공식 pixels = dips * (density / 160) ANDROIDPUB.COM
  • 7. 지원되는 스크린 타입 Low density 120 Medium density 160 High density 240 ldpi mdpi hdpi Small • QVGA (240x320) screen 2.6"-3.0” Normal • WQVGA (240x400) • HVGA (320x480) • WVGA (480x800) screen 3.2"-3.5” 3.0"-3.5” 3.3"-4.0” • FWQVGA (240x432) • FWVGA (480x854) 3.5"-3.8” 3.5"-4.0” Large • WVGA (480x800) screen 4.8"-5.5” • FWVGA (480x854) 5.0"-5.8”  기본 스크린 (Baseline screen)  HVGA, Normal Screen, Medium density  DIP와 Pixel 1:1 매치 ANDROIDPUB.COM