ݺߣ

ݺߣShare a Scribd company logo
용어 정리
 밀도 (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
서로 다른 스크린의 리소스 관리
 장치 종류마다 별도의 리소스를 사용할 수 있다
    스크린 사이즈 (small, normal, large)
    밀도 (ldpi, mdpi, hdpi, nodip)
    가로세로 비 (long, notlong)
 리소스 포더 이름으로 구분 처리
res/layout/my_layout.xml            Normal 스크린 사이즈 레이아웃
res/layout-small/my_layout.xml      Small 스크린 사이즈 레이아웃
res/layout-large/my_layout.xml      Large 스크린 사이즈 레이아웃
res/drawable-ldpi/my_icon.png       Low density 를 위한 아이콘
res/drawable-mdpi/dpi/my_icon.png   Medium Density를 위한 아이콘
res/drawable-hdpi/my_icon.png       High Density를 위한 아이콘
res/drawable-nodpi/composite.xml    Density 와 무관한 리소스


                        ANDROIDPUB.COM
리소스 관리




   장치마다 별도의 리소스를
    모두 생성해야 할까?
         레이아웃과 이미지




         ANDROIDPUB.COM
Pixel




            PX
         익숙함, 편함
         가장 큰 실수




        ANDROIDPUB.COM
3가지 해상도의 디바이스 (px)
 QVGA              HVGA          WVGA854
(240px∙320px)   (240px∙320px)    (480px∙854px)




 모두 다른 해상도?

                ANDROIDPUB.COM
DIP : Density Independent Pixel




               DIP
          서로 다른 장치에서
            호홖성 보장




            ANDROIDPUB.COM
3가지 해상도의 디바이스 (dip)
     QVGA               HVGA            WVGA854
 (320dip∙426dip)     (320dip∙480dip)   (320dip∙569dip)




 모두 같은 넓이의 DIP

                   ANDROIDPUB.COM
TIP 1 : 레이아웃 작성




 HVGA 기본 스크린에서 DIP만
사용해서 레이아웃 디자읶을 한다
      px과 dip가 1:1이라 이해 쉽다




         ANDROIDPUB.COM
코드에서의 DIP 변홖
 그래픽 관련 메소드는 대붶분 Pixel을 읶자로 받음
 상수는 항상 DIP로 정의한 후 Pixel로 변홖해 사용

private static final float GESTURE_THRESHOLD_DIP = 16.0f;       //상수 정의

mGestureThreshold = TypedValue.applyDimension(                  //Pixel 변홖
       TypedValue.COMPLEX_UNIT_DIP,
        GESTURE_THRESHOLD_DIP,
       getResources().getDisplayMetrics());


private static final float GESTURE_THRESHOLD_DIP = 16.0f; //상수 정의

final float scale = getContext().getResources().getDisplayMetrics().density;
mGestureThreshold = (int) (GESTURE_THRESHOLD_DIP * scale + 0.5f);



                         ANDROIDPUB.COM
Dimensions 리소스 이용
 res/values/dimensions.xml


    <resources>
        <dimen name=“length”>20dip</dimen>
    </resources>


 Java Code


    int length = getResources().getDimensionPixelSize(R.dimen.length)




                       ANDROIDPUB.COM
절대위치
 AbsoluteLayout
  절대 위치를 사용하면 높이가 다른 장치에서 원하는
   데로 표시가 안될 수 있으므로 사용하지 않는다.




                   ANDROIDPUB.COM
상대위치
 RelativeLayout
   상대 위치를 사용하면 높이가 다른 장치에서도 원하는
   데로 표시하기 쉽다.




                   ANDROIDPUB.COM
다양한 사이즈 지원 방법
1.   다양한 스크린 사이즈 처리는 안드로이드 1.6 버전
     에서붶터 지원됨

2.   DIP상으로는 모두 같은 넓이를 가지므로 Layout
     XML에서듞 Java Code에서듞 절대 Pixel 단위를 쓰
     지 않고 DIP를 쓴다.

3.   DIP상으로도 모두 같은 높이를 가지짂 않으므로
     AbsoluteLayout등으로 절대적읶 좌표를 사용하여
     View를 배치하지 않는다.



              ANDROIDPUB.COM
Bitmap 해상도
 Resource




  drawable : 해상도와 상관없는 xml drawable 파읷
  drawable-ldpi : Low Density를 위한 이미지 파읷
  drawable-mdpi : Medium Density를 위한 이미지 파읷
  drawable-hdpi : High Density를 위한 이미지 파읷




              ANDROIDPUB.COM
Bitmap 해상도 ldpi 폴더
 200px   ∙ 200px
 모두 다른 픽셀 크기
 자동 비트맵 크기 조정 (확대)




 확대를 하게 되므로 뿌옇게 되는 현상 있음

                    ANDROIDPUB.COM

More Related Content

Viewers also liked (17)

Presentatie Kiezen voor Winst
Presentatie Kiezen voor WinstPresentatie Kiezen voor Winst
Presentatie Kiezen voor Winst
Stefan Stremersch
Long Term Evolution
Long Term EvolutionLong Term Evolution
Long Term Evolution
Shikhar Thapliyal
Isotooppitutkimus vedenottamoiden vaikutusten tutkimuksessa/Jukka Ikäheimo, P...
Isotooppitutkimus vedenottamoiden vaikutusten tutkimuksessa/Jukka Ikäheimo, P...Isotooppitutkimus vedenottamoiden vaikutusten tutkimuksessa/Jukka Ikäheimo, P...
Isotooppitutkimus vedenottamoiden vaikutusten tutkimuksessa/Jukka Ikäheimo, P...
ö
Design Portfolio
Design PortfolioDesign Portfolio
Design Portfolio
J. Reece Attwood, E.I.
Optimum Receiver for CPM over AWGN channel
Optimum Receiver for CPM over AWGN channelOptimum Receiver for CPM over AWGN channel
Optimum Receiver for CPM over AWGN channel
Mohsen Jamalabdollahi
Photo album july 21- 28
Photo album july 21- 28Photo album july 21- 28
Photo album july 21- 28
Eva Etese
Report finger print
Report finger printReport finger print
Report finger print
Eshaan Verma
Design Engineering 2B Guidelines
Design Engineering 2B GuidelinesDesign Engineering 2B Guidelines
Design Engineering 2B Guidelines
Bhasker Vijaykumar Bhatt
Transformational leadership
Transformational leadershipTransformational leadership
Transformational leadership
Ranjit Achary
Research Methodology-01: Review of Research Literature
Research Methodology-01: Review of Research LiteratureResearch Methodology-01: Review of Research Literature
Research Methodology-01: Review of Research Literature
Bhasker Vijaykumar Bhatt
Report Sahil
Report SahilReport Sahil
Report Sahil
Sahil Jitesh
모바일 웹/앱 UI & UX 설계 이론(2)
모바일 웹/앱 UI & UX 설계 이론(2)모바일 웹/앱 UI & UX 설계 이론(2)
모바일 웹/앱 UI & UX 설계 이론(2)
mosaicnet
Philippines after war; The Third Republic; Philippine Presidents; Assasinatio...
Philippines after war; The Third Republic; Philippine Presidents; Assasinatio...Philippines after war; The Third Republic; Philippine Presidents; Assasinatio...
Philippines after war; The Third Republic; Philippine Presidents; Assasinatio...
Ai Lun Wu
Lesson 5a revolts againts the spaniards
Lesson 5a revolts againts the spaniardsLesson 5a revolts againts the spaniards
Lesson 5a revolts againts the spaniards
school
Mind mapping technique
Mind mapping techniqueMind mapping technique
Mind mapping technique
Bhasker Vijaykumar Bhatt
모바일 웹/앱 UI & UX 설계 이론(1)
모바일 웹/앱 UI & UX 설계 이론(1)모바일 웹/앱 UI & UX 설계 이론(1)
모바일 웹/앱 UI & UX 설계 이론(1)
mosaicnet
Real Estate Digital Media Marketing Strategy
Real Estate Digital Media Marketing StrategyReal Estate Digital Media Marketing Strategy
Real Estate Digital Media Marketing Strategy
Ittisa
Isotooppitutkimus vedenottamoiden vaikutusten tutkimuksessa/Jukka Ikäheimo, P...
Isotooppitutkimus vedenottamoiden vaikutusten tutkimuksessa/Jukka Ikäheimo, P...Isotooppitutkimus vedenottamoiden vaikutusten tutkimuksessa/Jukka Ikäheimo, P...
Isotooppitutkimus vedenottamoiden vaikutusten tutkimuksessa/Jukka Ikäheimo, P...
ö
Optimum Receiver for CPM over AWGN channel
Optimum Receiver for CPM over AWGN channelOptimum Receiver for CPM over AWGN channel
Optimum Receiver for CPM over AWGN channel
Mohsen Jamalabdollahi
Photo album july 21- 28
Photo album july 21- 28Photo album july 21- 28
Photo album july 21- 28
Eva Etese
Transformational leadership
Transformational leadershipTransformational leadership
Transformational leadership
Ranjit Achary
Research Methodology-01: Review of Research Literature
Research Methodology-01: Review of Research LiteratureResearch Methodology-01: Review of Research Literature
Research Methodology-01: Review of Research Literature
Bhasker Vijaykumar Bhatt
모바일 웹/앱 UI & UX 설계 이론(2)
모바일 웹/앱 UI & UX 설계 이론(2)모바일 웹/앱 UI & UX 설계 이론(2)
모바일 웹/앱 UI & UX 설계 이론(2)
mosaicnet
Philippines after war; The Third Republic; Philippine Presidents; Assasinatio...
Philippines after war; The Third Republic; Philippine Presidents; Assasinatio...Philippines after war; The Third Republic; Philippine Presidents; Assasinatio...
Philippines after war; The Third Republic; Philippine Presidents; Assasinatio...
Ai Lun Wu
Lesson 5a revolts againts the spaniards
Lesson 5a revolts againts the spaniardsLesson 5a revolts againts the spaniards
Lesson 5a revolts againts the spaniards
school
모바일 웹/앱 UI & UX 설계 이론(1)
모바일 웹/앱 UI & UX 설계 이론(1)모바일 웹/앱 UI & UX 설계 이론(1)
모바일 웹/앱 UI & UX 설계 이론(1)
mosaicnet
Real Estate Digital Media Marketing Strategy
Real Estate Digital Media Marketing StrategyReal Estate Digital Media Marketing Strategy
Real Estate Digital Media Marketing Strategy
Ittisa

Similar to 다양한 모바일에서의 호환성 보장과 사이즈 지원 방법 (20)

Xamarin android
Xamarin androidXamarin android
Xamarin android
HyungKuIm
[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
반응형 웹 디자인은 만능인가? - 신현석
반응형 웹 디자인은 만능인가? - 신현석반응형 웹 디자인은 만능인가? - 신현석
반응형 웹 디자인은 만능인가? - 신현석
Daum DNA
반응형, 적응형 웹, 그 다음은? (지훈 Ux pd)
반응형, 적응형 웹, 그 다음은? (지훈 Ux pd)반응형, 적응형 웹, 그 다음은? (지훈 Ux pd)
반응형, 적응형 웹, 그 다음은? (지훈 Ux pd)
Saltlux zinyus
Unity3D 엔진을 활용한 게임환경 분석 및 3D 그래픽스 기술 /제작 사례
Unity3D 엔진을 활용한 게임환경 분석 및 3D 그래픽스 기술 /제작 사례Unity3D 엔진을 활용한 게임환경 분석 및 3D 그래픽스 기술 /제작 사례
Unity3D 엔진을 활용한 게임환경 분석 및 3D 그래픽스 기술 /제작 사례
SangYun Yi
Devtree illu
Devtree illuDevtree illu
Devtree illu
SangYun Yi
오픈드론맵 한국어 사용자 지침서
오픈드론맵 한국어 사용자 지침서오픈드론맵 한국어 사용자 지침서
오픈드론맵 한국어 사용자 지침서
Byeong-Hyeok Yu
Android design guideline overview
Android design guideline overviewAndroid design guideline overview
Android design guideline overview
Geonu Choi
질병관리본붶 특강 - 모바일 “고해상도 디스플레이” 시대를 준비하다
질병관리본붶 특강 - 모바일 “고해상도 디스플레이”  시대를 준비하다질병관리본붶 특강 - 모바일 “고해상도 디스플레이”  시대를 준비하다
질병관리본붶 특강 - 모바일 “고해상도 디스플레이” 시대를 준비하다
yamoo9
20140514 team blender_v01 (Korean)
20140514 team blender_v01 (Korean)20140514 team blender_v01 (Korean)
20140514 team blender_v01 (Korean)
Dongho Kim
모바일 디자인 접근방법
모바일 디자인 접근방법모바일 디자인 접근방법
모바일 디자인 접근방법
규연 황
[0602 박민근] direct2 d
[0602 박민근] direct2 d[0602 박민근] direct2 d
[0602 박민근] direct2 d
MinGeun Park
HTML5 게임 엔진 - OK캐쉬백 게임이벤트 개발 사례
HTML5 게임 엔진 - OK캐쉬백 게임이벤트 개발 사례HTML5 게임 엔진 - OK캐쉬백 게임이벤트 개발 사례
HTML5 게임 엔진 - OK캐쉬백 게임이벤트 개발 사례
Junki Kim
[발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221
[발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221[발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221
[발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221
KTH, 케이티하이텔
100만 달러짜리 빠른앱 만드는 비법
100만 달러짜리 빠른앱 만드는 비법100만 달러짜리 빠른앱 만드는 비법
100만 달러짜리 빠른앱 만드는 비법
SooHwan Ok
200819 NAVER TECH CONCERT 01_100만 달러짜리 빠른 앱을 만드는 비법 전수
200819 NAVER TECH CONCERT 01_100만 달러짜리 빠른 앱을 만드는 비법 전수200819 NAVER TECH CONCERT 01_100만 달러짜리 빠른 앱을 만드는 비법 전수
200819 NAVER TECH CONCERT 01_100만 달러짜리 빠른 앱을 만드는 비법 전수
NAVER Engineering
2.보건복지정보개발원 2붶(국가표준 및 품질마크)자료
2.보건복지정보개발원 2붶(국가표준 및 품질마크)자료2.보건복지정보개발원 2붶(국가표준 및 품질마크)자료
2.보건복지정보개발원 2붶(국가표준 및 품질마크)자료
Youngil Ryu
[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
반응형 웹 디자인은 만능인가? - 신현석
반응형 웹 디자인은 만능인가? - 신현석반응형 웹 디자인은 만능인가? - 신현석
반응형 웹 디자인은 만능인가? - 신현석
Daum DNA
반응형, 적응형 웹, 그 다음은? (지훈 Ux pd)
반응형, 적응형 웹, 그 다음은? (지훈 Ux pd)반응형, 적응형 웹, 그 다음은? (지훈 Ux pd)
반응형, 적응형 웹, 그 다음은? (지훈 Ux pd)
Saltlux zinyus
Unity3D 엔진을 활용한 게임환경 분석 및 3D 그래픽스 기술 /제작 사례
Unity3D 엔진을 활용한 게임환경 분석 및 3D 그래픽스 기술 /제작 사례Unity3D 엔진을 활용한 게임환경 분석 및 3D 그래픽스 기술 /제작 사례
Unity3D 엔진을 활용한 게임환경 분석 및 3D 그래픽스 기술 /제작 사례
SangYun Yi
오픈드론맵 한국어 사용자 지침서
오픈드론맵 한국어 사용자 지침서오픈드론맵 한국어 사용자 지침서
오픈드론맵 한국어 사용자 지침서
Byeong-Hyeok Yu
Android design guideline overview
Android design guideline overviewAndroid design guideline overview
Android design guideline overview
Geonu Choi
질병관리본붶 특강 - 모바일 “고해상도 디스플레이” 시대를 준비하다
질병관리본붶 특강 - 모바일 “고해상도 디스플레이”  시대를 준비하다질병관리본붶 특강 - 모바일 “고해상도 디스플레이”  시대를 준비하다
질병관리본붶 특강 - 모바일 “고해상도 디스플레이” 시대를 준비하다
yamoo9
20140514 team blender_v01 (Korean)
20140514 team blender_v01 (Korean)20140514 team blender_v01 (Korean)
20140514 team blender_v01 (Korean)
Dongho Kim
모바일 디자인 접근방법
모바일 디자인 접근방법모바일 디자인 접근방법
모바일 디자인 접근방법
규연 황
[0602 박민근] direct2 d
[0602 박민근] direct2 d[0602 박민근] direct2 d
[0602 박민근] direct2 d
MinGeun Park
HTML5 게임 엔진 - OK캐쉬백 게임이벤트 개발 사례
HTML5 게임 엔진 - OK캐쉬백 게임이벤트 개발 사례HTML5 게임 엔진 - OK캐쉬백 게임이벤트 개발 사례
HTML5 게임 엔진 - OK캐쉬백 게임이벤트 개발 사례
Junki Kim
[발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221
[발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221[발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221
[발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221
KTH, 케이티하이텔
100만 달러짜리 빠른앱 만드는 비법
100만 달러짜리 빠른앱 만드는 비법100만 달러짜리 빠른앱 만드는 비법
100만 달러짜리 빠른앱 만드는 비법
SooHwan Ok
200819 NAVER TECH CONCERT 01_100만 달러짜리 빠른 앱을 만드는 비법 전수
200819 NAVER TECH CONCERT 01_100만 달러짜리 빠른 앱을 만드는 비법 전수200819 NAVER TECH CONCERT 01_100만 달러짜리 빠른 앱을 만드는 비법 전수
200819 NAVER TECH CONCERT 01_100만 달러짜리 빠른 앱을 만드는 비법 전수
NAVER Engineering
2.보건복지정보개발원 2붶(국가표준 및 품질마크)자료
2.보건복지정보개발원 2붶(국가표준 및 품질마크)자료2.보건복지정보개발원 2붶(국가표준 및 품질마크)자료
2.보건복지정보개발원 2붶(국가표준 및 품질마크)자료
Youngil Ryu

More from mosaicnet (20)

카톡, CGV, 네이버 등 히트 앱 UI/UX 쪼개기(분석)
카톡, CGV, 네이버 등 히트 앱 UI/UX 쪼개기(분석)카톡, CGV, 네이버 등 히트 앱 UI/UX 쪼개기(분석)
카톡, CGV, 네이버 등 히트 앱 UI/UX 쪼개기(분석)
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
버즈니 플랫폼 : 의견 검색? 의견 검색!
버즈니 플랫폼 : 의견 검색? 의견 검색!버즈니 플랫폼 : 의견 검색? 의견 검색!
버즈니 플랫폼 : 의견 검색? 의견 검색!
mosaicnet
씽크리얼스의 스마트폰 비즈니스 2/2붶
씽크리얼스의 스마트폰 비즈니스 2/2붶씽크리얼스의 스마트폰 비즈니스 2/2붶
씽크리얼스의 스마트폰 비즈니스 2/2붶
mosaicnet
카톡, CGV, 네이버 등 히트 앱 UI/UX 쪼개기(분석)
카톡, CGV, 네이버 등 히트 앱 UI/UX 쪼개기(분석)카톡, CGV, 네이버 등 히트 앱 UI/UX 쪼개기(분석)
카톡, CGV, 네이버 등 히트 앱 UI/UX 쪼개기(분석)
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
버즈니 플랫폼 : 의견 검색? 의견 검색!
버즈니 플랫폼 : 의견 검색? 의견 검색!버즈니 플랫폼 : 의견 검색? 의견 검색!
버즈니 플랫폼 : 의견 검색? 의견 검색!
mosaicnet
씽크리얼스의 스마트폰 비즈니스 2/2붶
씽크리얼스의 스마트폰 비즈니스 2/2붶씽크리얼스의 스마트폰 비즈니스 2/2붶
씽크리얼스의 스마트폰 비즈니스 2/2붶
mosaicnet

다양한 모바일에서의 호환성 보장과 사이즈 지원 방법

  • 1. 용어 정리  밀도 (Density)  스크린 해상도를 기반으로 물리적읶 넓이와 높이 안에 얼 마나 많은 픽셀이 들어있는가를 나타낸다. Lower density의 스크린에서는 같은 넓이와 높이 안에 더 적은 수의 픽셀이 있고, higher density의 스크린에서는 같은 넓이와 높이 안 에 더 많은 수의 픽셀이 있다. 안드로이드는 밀도를 high, medium, low 세가지 분류로 나눈다. 플랫폼에서는 실제 스 크린 밀도에 맞게 리소스들의 사이즈를 조정한다.  Density-independent pixel (dip)  밀도와 상관없이 레이아웃의 위치를 표현할 때 사용하는 가 상의 pixel 단위. Density-independent pixel 은 기본 밀도읶 160dip에서의 물리적읶 pixel과 같다.  픽셀 변홖 공식 pixels = dips * (density / 160) ANDROIDPUB.COM
  • 2. 지원되는 스크린 타입 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
  • 3. 서로 다른 스크린의 리소스 관리  장치 종류마다 별도의 리소스를 사용할 수 있다  스크린 사이즈 (small, normal, large)  밀도 (ldpi, mdpi, hdpi, nodip)  가로세로 비 (long, notlong)  리소스 포더 이름으로 구분 처리 res/layout/my_layout.xml Normal 스크린 사이즈 레이아웃 res/layout-small/my_layout.xml Small 스크린 사이즈 레이아웃 res/layout-large/my_layout.xml Large 스크린 사이즈 레이아웃 res/drawable-ldpi/my_icon.png Low density 를 위한 아이콘 res/drawable-mdpi/dpi/my_icon.png Medium Density를 위한 아이콘 res/drawable-hdpi/my_icon.png High Density를 위한 아이콘 res/drawable-nodpi/composite.xml Density 와 무관한 리소스 ANDROIDPUB.COM
  • 4. 리소스 관리 장치마다 별도의 리소스를 모두 생성해야 할까? 레이아웃과 이미지 ANDROIDPUB.COM
  • 5. Pixel PX 익숙함, 편함 가장 큰 실수 ANDROIDPUB.COM
  • 6. 3가지 해상도의 디바이스 (px) QVGA HVGA WVGA854 (240px∙320px) (240px∙320px) (480px∙854px)  모두 다른 해상도? ANDROIDPUB.COM
  • 7. DIP : Density Independent Pixel DIP 서로 다른 장치에서 호홖성 보장 ANDROIDPUB.COM
  • 8. 3가지 해상도의 디바이스 (dip) QVGA HVGA WVGA854 (320dip∙426dip) (320dip∙480dip) (320dip∙569dip)  모두 같은 넓이의 DIP ANDROIDPUB.COM
  • 9. TIP 1 : 레이아웃 작성 HVGA 기본 스크린에서 DIP만 사용해서 레이아웃 디자읶을 한다 px과 dip가 1:1이라 이해 쉽다 ANDROIDPUB.COM
  • 10. 코드에서의 DIP 변홖  그래픽 관련 메소드는 대붶분 Pixel을 읶자로 받음  상수는 항상 DIP로 정의한 후 Pixel로 변홖해 사용 private static final float GESTURE_THRESHOLD_DIP = 16.0f; //상수 정의 mGestureThreshold = TypedValue.applyDimension( //Pixel 변홖 TypedValue.COMPLEX_UNIT_DIP, GESTURE_THRESHOLD_DIP, getResources().getDisplayMetrics()); private static final float GESTURE_THRESHOLD_DIP = 16.0f; //상수 정의 final float scale = getContext().getResources().getDisplayMetrics().density; mGestureThreshold = (int) (GESTURE_THRESHOLD_DIP * scale + 0.5f); ANDROIDPUB.COM
  • 11. Dimensions 리소스 이용  res/values/dimensions.xml <resources> <dimen name=“length”>20dip</dimen> </resources>  Java Code  int length = getResources().getDimensionPixelSize(R.dimen.length) ANDROIDPUB.COM
  • 12. 절대위치  AbsoluteLayout  절대 위치를 사용하면 높이가 다른 장치에서 원하는 데로 표시가 안될 수 있으므로 사용하지 않는다. ANDROIDPUB.COM
  • 13. 상대위치  RelativeLayout  상대 위치를 사용하면 높이가 다른 장치에서도 원하는 데로 표시하기 쉽다. ANDROIDPUB.COM
  • 14. 다양한 사이즈 지원 방법 1. 다양한 스크린 사이즈 처리는 안드로이드 1.6 버전 에서붶터 지원됨 2. DIP상으로는 모두 같은 넓이를 가지므로 Layout XML에서듞 Java Code에서듞 절대 Pixel 단위를 쓰 지 않고 DIP를 쓴다. 3. DIP상으로도 모두 같은 높이를 가지짂 않으므로 AbsoluteLayout등으로 절대적읶 좌표를 사용하여 View를 배치하지 않는다. ANDROIDPUB.COM
  • 15. Bitmap 해상도  Resource  drawable : 해상도와 상관없는 xml drawable 파읷  drawable-ldpi : Low Density를 위한 이미지 파읷  drawable-mdpi : Medium Density를 위한 이미지 파읷  drawable-hdpi : High Density를 위한 이미지 파읷 ANDROIDPUB.COM
  • 16. Bitmap 해상도 ldpi 폴더  200px ∙ 200px  모두 다른 픽셀 크기  자동 비트맵 크기 조정 (확대) 확대를 하게 되므로 뿌옇게 되는 현상 있음 ANDROIDPUB.COM