SlideShare una empresa de Scribd logo
1 de 11
다양한 Device 대응 방법
Pixel과 Screen Density
장비 마다 일정 길이 안에 들어가는 pixel 수가 다릅니다.
이것을 이른 바 screen density가 다르다라고 합니다.
그래서 화면에 따라서 특정 pixel로 길이 단위를 주면 아래와 같은 현상이 발생
참고: http://developer.android.com/guide/practices/screens_support.html
즉, 우리는 screen density와 무관하게 화면에 일정 길이를 그리고 싶습니다.
그래서 android가 제공하는 단위가 dp입니다.
px = dp * (dpi / 160) : 160 dpi 장비에서는 1dp는 1pixel 크기입니다.
DPI & DP
DPI는 dot per inch로 장비의 screen density를 표현하는 기준.
이 DPI 값을 구분 지어서 아래와 같이 장비를 구분을 짓습니다.
앞선 공식으로 다시 돌아가서, px = dp * (dpi / 160)
만약, 내가 맞출 려 하는 장비가 240 dpi이고,
디자인 가이드가 해당 장비에서 40px이라고 하면, 지정할 dp는?
dp = 40 / (240/160) = 26.66 dp
Mdpi 장비용으로 pixel 데이터 받으면 계산 안 해도 되는데, mdpi 장비가
요즘에는 찾기가 힘들다는 … -_-;;
Dp를 사용해서 표현
지금까지 알아본 DP를 계산해서 사이즈를 표현하면,
아래와 같이 각기 다른 화면밀도를 가진 장비에서도 정상적으로 동일 크기 표시.
지금까지 이야기는 동일 길이에
대한 이야기였습니다.
그러나, density가 다르면,
동일 길이 이미지를 쓰면 ~
더 작아지겠죠.
그래서 옆 그림과 같이
각 density별 이미지를 준비
해야 합니다.
DPI 따른 이미지 준비해서 넣기
대상 Device 별로 필요한 이미지는
우리의 멋진 디자이너님들에게 요청해서 받습니다.
그리고는 받은 이미지는 안드로이드가
DPI 따라서 적합한 것을 찾을 수 있도록
우측 그림에 나오는 것과 같이
각 dpi 별 폴더에 위치를 시키도록 합니다.
만약 dpi와 관계없이 길이 유지 시킬려는
경우에는 옆 그림에는 없지만, -nodpi로
폴더 만들어서 저장하면 됩니다.
이로서 screen density와 무관하게 화면에
나타내는 방법을 알아보았습니다.
DPI 와 화면 크기는 다른 이야기
DPI가 동일하더라도 화면의 크기는 다른 이야기입니다.
예를 들어서 갤러시 노트와 갤럭시 S3는 동일급의 DPI이지만
다른 길이를 가지게 됩니다.
갤럭시 노트갤럭시 S3
동일하게 420 dp를 지정한 경우
화면 크기에 따라서 Layout을~
레이아웃 관련해서는 절대적 수치 대신 상대적인 레이아웃을 사용합니다.
• LinearLayout
• RelativeLayout
• fill_parent
• wrap_content
• match_parent
• …
+ 늘어 날 공간
고정 크기 공간 선정
결론은 화면이 늘어날 때, 동작을 생각하고 관련해서 적정 위치를
상대적 레이아웃을 통해서 잡아주도록 하는 방법을 모색하면 됩니다.
간단한 예는 다음 장에~
만약 수치를 하드코딩하고 있는 순간. 다시 한 번 생각을!!
LinearLayout에서 Weight를 활용
Text 1 Text 2
화면 넓이와 관계 없이 버튼 2개로
균등한 폭을 차지 하게 만들고 싶을 때.
절대 특정 폭을 지정 하지 않고!!
1. LinearLayout 을 사용 (상대적 배치)
2. Layout_weight 를 사용해서 비율을 조정
RelativeLayout을 활용
RelativeLayout 응용 사례
확장 영역: height를 match_parent로 선언
dp 값으로 height 고정
RelativeLayout을 사용해서 순차적으로
쌓아나갈 때, 중간에 있는 항목이 match_parent를
사용하게 되면, 해당 내용이 한다 영역(영역 A)를
덮어버리는 증상이 발생.
이러한 경우이 영역 A가 고정폭인 경우에
해당 높이 만큼을 margin 값을 주어서 대처
영역 A.
이게 답은 아니지만, 이렇게 해서 화면 크기에
대처했다는 사례 공유 입니다.
최종 가이드
1. 화면을 받아서, 화면이 늘어날 때 늘어날 부분과 고정된 부분 판단.
2. 고정될 부분에 대해서, dp 단위로 수치를 계산
(mdpi 기준으로 작업 진행하면 pixel 단위로 dp 별도 계산 없음)
3. 화면을 구분해서 전체 Layout 형태를 구상
4. 세세한 부분에 대해서는 상상력을 활용해서 Layout 조합
5. 실 기기에서 테스트 하면서 미진한 부분 보강 및 완료
6. 디자인 팀에서 각 dpi에 해당하는 필요 이미지 받아서 배포!!

Más contenido relacionado

Similar a 07 다양한 device_대응_방법

Bitmap 해상도와 작성 및 적용
Bitmap 해상도와 작성 및 적용Bitmap 해상도와 작성 및 적용
Bitmap 해상도와 작성 및 적용mosaicnet
 
221105 UX/UI 해외 인기 아티클 7기 : 1주차 발표
221105 UX/UI 해외 인기 아티클 7기 : 1주차 발표221105 UX/UI 해외 인기 아티클 7기 : 1주차 발표
221105 UX/UI 해외 인기 아티클 7기 : 1주차 발표Minho Lee
 
파이어몽키 3D 애플리케이션 만들기
파이어몽키 3D 애플리케이션 만들기파이어몽키 3D 애플리케이션 만들기
파이어몽키 3D 애플리케이션 만들기Devgear
 
Unity3D 엔진을 활용한 게임환경 분석 및 3D 그래픽스 기술 /제작 사례
Unity3D 엔진을 활용한 게임환경 분석 및 3D 그래픽스 기술 /제작 사례Unity3D 엔진을 활용한 게임환경 분석 및 3D 그래픽스 기술 /제작 사례
Unity3D 엔진을 활용한 게임환경 분석 및 3D 그래픽스 기술 /제작 사례SangYun Yi
 
협업하는 디자이너 - #4 Android
협업하는 디자이너 - #4 Android협업하는 디자이너 - #4 Android
협업하는 디자이너 - #4 AndroidJinkyou Son
 
[D2 CAMPUS] 안드로이드 오픈소스 스터디자료 - HTML, Android Animation
[D2 CAMPUS] 안드로이드 오픈소스 스터디자료 - HTML, Android Animation[D2 CAMPUS] 안드로이드 오픈소스 스터디자료 - HTML, Android Animation
[D2 CAMPUS] 안드로이드 오픈소스 스터디자료 - HTML, Android AnimationNAVER D2
 
그래프에서 대시보드까지, 서비스를 위한 데이터 시각화
그래프에서 대시보드까지, 서비스를 위한 데이터 시각화그래프에서 대시보드까지, 서비스를 위한 데이터 시각화
그래프에서 대시보드까지, 서비스를 위한 데이터 시각화Minho Lee
 
D가 알고 있는 걸 y도 알게 된다면 - 안드로메다에서 온 디자이너 이야기
D가 알고 있는 걸 y도 알게 된다면 - 안드로메다에서 온 디자이너 이야기D가 알고 있는 걸 y도 알게 된다면 - 안드로메다에서 온 디자이너 이야기
D가 알고 있는 걸 y도 알게 된다면 - 안드로메다에서 온 디자이너 이야기yamoo9
 
KTH_Detail day_안드로메다에서 온 디자이너이야기_1차_디자인용어_지훈
KTH_Detail day_안드로메다에서 온 디자이너이야기_1차_디자인용어_지훈KTH_Detail day_안드로메다에서 온 디자이너이야기_1차_디자인용어_지훈
KTH_Detail day_안드로메다에서 온 디자이너이야기_1차_디자인용어_지훈KTH, 케이티하이텔
 
220319 해외 아티클 스터디 5기 : 1주차 발표
220319 해외 아티클 스터디 5기 : 1주차 발표220319 해외 아티클 스터디 5기 : 1주차 발표
220319 해외 아티클 스터디 5기 : 1주차 발표Minho Lee
 
투어팁스모바일웹 제작가이드
투어팁스모바일웹 제작가이드투어팁스모바일웹 제작가이드
투어팁스모바일웹 제작가이드병수 김
 
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
 
100만 달러짜리 빠른앱 만드는 비법
100만 달러짜리 빠른앱 만드는 비법100만 달러짜리 빠른앱 만드는 비법
100만 달러짜리 빠른앱 만드는 비법SooHwan Ok
 
Xamarin android
Xamarin androidXamarin android
Xamarin androidHyungKuIm
 
오픈드론맵 한국어 사용자 지침서
오픈드론맵 한국어 사용자 지침서오픈드론맵 한국어 사용자 지침서
오픈드론맵 한국어 사용자 지침서Byeong-Hyeok Yu
 
Android design guideline overview
Android design guideline overviewAndroid design guideline overview
Android design guideline overviewGeonu Choi
 
Direct3d overview
Direct3d overviewDirect3d overview
Direct3d overview문익 장
 

Similar a 07 다양한 device_대응_방법 (18)

Bitmap 해상도와 작성 및 적용
Bitmap 해상도와 작성 및 적용Bitmap 해상도와 작성 및 적용
Bitmap 해상도와 작성 및 적용
 
221105 UX/UI 해외 인기 아티클 7기 : 1주차 발표
221105 UX/UI 해외 인기 아티클 7기 : 1주차 발표221105 UX/UI 해외 인기 아티클 7기 : 1주차 발표
221105 UX/UI 해외 인기 아티클 7기 : 1주차 발표
 
파이어몽키 3D 애플리케이션 만들기
파이어몽키 3D 애플리케이션 만들기파이어몽키 3D 애플리케이션 만들기
파이어몽키 3D 애플리케이션 만들기
 
Unity3D 엔진을 활용한 게임환경 분석 및 3D 그래픽스 기술 /제작 사례
Unity3D 엔진을 활용한 게임환경 분석 및 3D 그래픽스 기술 /제작 사례Unity3D 엔진을 활용한 게임환경 분석 및 3D 그래픽스 기술 /제작 사례
Unity3D 엔진을 활용한 게임환경 분석 및 3D 그래픽스 기술 /제작 사례
 
협업하는 디자이너 - #4 Android
협업하는 디자이너 - #4 Android협업하는 디자이너 - #4 Android
협업하는 디자이너 - #4 Android
 
[D2 CAMPUS] 안드로이드 오픈소스 스터디자료 - HTML, Android Animation
[D2 CAMPUS] 안드로이드 오픈소스 스터디자료 - HTML, Android Animation[D2 CAMPUS] 안드로이드 오픈소스 스터디자료 - HTML, Android Animation
[D2 CAMPUS] 안드로이드 오픈소스 스터디자료 - HTML, Android Animation
 
그래프에서 대시보드까지, 서비스를 위한 데이터 시각화
그래프에서 대시보드까지, 서비스를 위한 데이터 시각화그래프에서 대시보드까지, 서비스를 위한 데이터 시각화
그래프에서 대시보드까지, 서비스를 위한 데이터 시각화
 
Devtree illu
Devtree illuDevtree illu
Devtree illu
 
D가 알고 있는 걸 y도 알게 된다면 - 안드로메다에서 온 디자이너 이야기
D가 알고 있는 걸 y도 알게 된다면 - 안드로메다에서 온 디자이너 이야기D가 알고 있는 걸 y도 알게 된다면 - 안드로메다에서 온 디자이너 이야기
D가 알고 있는 걸 y도 알게 된다면 - 안드로메다에서 온 디자이너 이야기
 
KTH_Detail day_안드로메다에서 온 디자이너이야기_1차_디자인용어_지훈
KTH_Detail day_안드로메다에서 온 디자이너이야기_1차_디자인용어_지훈KTH_Detail day_안드로메다에서 온 디자이너이야기_1차_디자인용어_지훈
KTH_Detail day_안드로메다에서 온 디자이너이야기_1차_디자인용어_지훈
 
220319 해외 아티클 스터디 5기 : 1주차 발표
220319 해외 아티클 스터디 5기 : 1주차 발표220319 해외 아티클 스터디 5기 : 1주차 발표
220319 해외 아티클 스터디 5기 : 1주차 발표
 
투어팁스모바일웹 제작가이드
투어팁스모바일웹 제작가이드투어팁스모바일웹 제작가이드
투어팁스모바일웹 제작가이드
 
200819 NAVER TECH CONCERT 01_100만 달러짜리 빠른 앱을 만드는 비법 전수
200819 NAVER TECH CONCERT 01_100만 달러짜리 빠른 앱을 만드는 비법 전수200819 NAVER TECH CONCERT 01_100만 달러짜리 빠른 앱을 만드는 비법 전수
200819 NAVER TECH CONCERT 01_100만 달러짜리 빠른 앱을 만드는 비법 전수
 
100만 달러짜리 빠른앱 만드는 비법
100만 달러짜리 빠른앱 만드는 비법100만 달러짜리 빠른앱 만드는 비법
100만 달러짜리 빠른앱 만드는 비법
 
Xamarin android
Xamarin androidXamarin android
Xamarin android
 
오픈드론맵 한국어 사용자 지침서
오픈드론맵 한국어 사용자 지침서오픈드론맵 한국어 사용자 지침서
오픈드론맵 한국어 사용자 지침서
 
Android design guideline overview
Android design guideline overviewAndroid design guideline overview
Android design guideline overview
 
Direct3d overview
Direct3d overviewDirect3d overview
Direct3d overview
 

Más de 운용 최

Wot(daliworks) 20131113
Wot(daliworks) 20131113Wot(daliworks) 20131113
Wot(daliworks) 20131113운용 최
 
NIPA SW Insight Report '13.08
NIPA SW Insight Report '13.08NIPA SW Insight Report '13.08
NIPA SW Insight Report '13.08운용 최
 
Agile Spirit Base On The Book "Agile Samuari"
Agile Spirit Base On The Book "Agile Samuari"Agile Spirit Base On The Book "Agile Samuari"
Agile Spirit Base On The Book "Agile Samuari"운용 최
 
21 application and_network_status
21 application and_network_status21 application and_network_status
21 application and_network_status운용 최
 
20 handler and_async_task
20 handler and_async_task20 handler and_async_task
20 handler and_async_task운용 최
 
18 안드로이드 리스트뷰_속도향상
18 안드로이드 리스트뷰_속도향상18 안드로이드 리스트뷰_속도향상
18 안드로이드 리스트뷰_속도향상운용 최
 
19 나만의 view 만들기
19 나만의 view 만들기19 나만의 view 만들기
19 나만의 view 만들기운용 최
 
17 adapter view & db
17 adapter view & db17 adapter view & db
17 adapter view & db운용 최
 
16 데이터 저장과 사용
16 데이터 저장과 사용16 데이터 저장과 사용
16 데이터 저장과 사용운용 최
 
15 content provider
15 content provider15 content provider
15 content provider운용 최
 
14 broad castreceiver
14 broad castreceiver14 broad castreceiver
14 broad castreceiver운용 최
 
13 service 좀더
13 service 좀더13 service 좀더
13 service 좀더운용 최
 
11 tablet 대응 가이드
11 tablet 대응 가이드11 tablet 대응 가이드
11 tablet 대응 가이드운용 최
 
10 view orientation_change
10 view orientation_change10 view orientation_change
10 view orientation_change운용 최
 
09 android keyboard & layout
09 android keyboard & layout09 android keyboard & layout
09 android keyboard & layout운용 최
 
08 fragment 태블릿 대응
08 fragment   태블릿 대응08 fragment   태블릿 대응
08 fragment 태블릿 대응운용 최
 
06 activity stack and back, flag
06 activity stack and back, flag06 activity stack and back, flag
06 activity stack and back, flag운용 최
 

Más de 운용 최 (20)

Wot(daliworks) 20131113
Wot(daliworks) 20131113Wot(daliworks) 20131113
Wot(daliworks) 20131113
 
NIPA SW Insight Report '13.08
NIPA SW Insight Report '13.08NIPA SW Insight Report '13.08
NIPA SW Insight Report '13.08
 
Agile Spirit Base On The Book "Agile Samuari"
Agile Spirit Base On The Book "Agile Samuari"Agile Spirit Base On The Book "Agile Samuari"
Agile Spirit Base On The Book "Agile Samuari"
 
Uml intro 1
Uml intro 1Uml intro 1
Uml intro 1
 
Uml intro 0
Uml intro 0Uml intro 0
Uml intro 0
 
21 application and_network_status
21 application and_network_status21 application and_network_status
21 application and_network_status
 
20 handler and_async_task
20 handler and_async_task20 handler and_async_task
20 handler and_async_task
 
18 안드로이드 리스트뷰_속도향상
18 안드로이드 리스트뷰_속도향상18 안드로이드 리스트뷰_속도향상
18 안드로이드 리스트뷰_속도향상
 
19 나만의 view 만들기
19 나만의 view 만들기19 나만의 view 만들기
19 나만의 view 만들기
 
17 adapter view & db
17 adapter view & db17 adapter view & db
17 adapter view & db
 
16 데이터 저장과 사용
16 데이터 저장과 사용16 데이터 저장과 사용
16 데이터 저장과 사용
 
15 content provider
15 content provider15 content provider
15 content provider
 
14 broad castreceiver
14 broad castreceiver14 broad castreceiver
14 broad castreceiver
 
13 service 좀더
13 service 좀더13 service 좀더
13 service 좀더
 
12 service
12 service12 service
12 service
 
11 tablet 대응 가이드
11 tablet 대응 가이드11 tablet 대응 가이드
11 tablet 대응 가이드
 
10 view orientation_change
10 view orientation_change10 view orientation_change
10 view orientation_change
 
09 android keyboard & layout
09 android keyboard & layout09 android keyboard & layout
09 android keyboard & layout
 
08 fragment 태블릿 대응
08 fragment   태블릿 대응08 fragment   태블릿 대응
08 fragment 태블릿 대응
 
06 activity stack and back, flag
06 activity stack and back, flag06 activity stack and back, flag
06 activity stack and back, flag
 

07 다양한 device_대응_방법

  • 2. Pixel과 Screen Density 장비 마다 일정 길이 안에 들어가는 pixel 수가 다릅니다. 이것을 이른 바 screen density가 다르다라고 합니다. 그래서 화면에 따라서 특정 pixel로 길이 단위를 주면 아래와 같은 현상이 발생 참고: http://developer.android.com/guide/practices/screens_support.html 즉, 우리는 screen density와 무관하게 화면에 일정 길이를 그리고 싶습니다. 그래서 android가 제공하는 단위가 dp입니다. px = dp * (dpi / 160) : 160 dpi 장비에서는 1dp는 1pixel 크기입니다.
  • 3. DPI & DP DPI는 dot per inch로 장비의 screen density를 표현하는 기준. 이 DPI 값을 구분 지어서 아래와 같이 장비를 구분을 짓습니다. 앞선 공식으로 다시 돌아가서, px = dp * (dpi / 160) 만약, 내가 맞출 려 하는 장비가 240 dpi이고, 디자인 가이드가 해당 장비에서 40px이라고 하면, 지정할 dp는? dp = 40 / (240/160) = 26.66 dp Mdpi 장비용으로 pixel 데이터 받으면 계산 안 해도 되는데, mdpi 장비가 요즘에는 찾기가 힘들다는 … -_-;;
  • 4. Dp를 사용해서 표현 지금까지 알아본 DP를 계산해서 사이즈를 표현하면, 아래와 같이 각기 다른 화면밀도를 가진 장비에서도 정상적으로 동일 크기 표시. 지금까지 이야기는 동일 길이에 대한 이야기였습니다. 그러나, density가 다르면, 동일 길이 이미지를 쓰면 ~ 더 작아지겠죠. 그래서 옆 그림과 같이 각 density별 이미지를 준비 해야 합니다.
  • 5. DPI 따른 이미지 준비해서 넣기 대상 Device 별로 필요한 이미지는 우리의 멋진 디자이너님들에게 요청해서 받습니다. 그리고는 받은 이미지는 안드로이드가 DPI 따라서 적합한 것을 찾을 수 있도록 우측 그림에 나오는 것과 같이 각 dpi 별 폴더에 위치를 시키도록 합니다. 만약 dpi와 관계없이 길이 유지 시킬려는 경우에는 옆 그림에는 없지만, -nodpi로 폴더 만들어서 저장하면 됩니다. 이로서 screen density와 무관하게 화면에 나타내는 방법을 알아보았습니다.
  • 6. DPI 와 화면 크기는 다른 이야기 DPI가 동일하더라도 화면의 크기는 다른 이야기입니다. 예를 들어서 갤러시 노트와 갤럭시 S3는 동일급의 DPI이지만 다른 길이를 가지게 됩니다. 갤럭시 노트갤럭시 S3 동일하게 420 dp를 지정한 경우
  • 7. 화면 크기에 따라서 Layout을~ 레이아웃 관련해서는 절대적 수치 대신 상대적인 레이아웃을 사용합니다. • LinearLayout • RelativeLayout • fill_parent • wrap_content • match_parent • … + 늘어 날 공간 고정 크기 공간 선정 결론은 화면이 늘어날 때, 동작을 생각하고 관련해서 적정 위치를 상대적 레이아웃을 통해서 잡아주도록 하는 방법을 모색하면 됩니다. 간단한 예는 다음 장에~ 만약 수치를 하드코딩하고 있는 순간. 다시 한 번 생각을!!
  • 8. LinearLayout에서 Weight를 활용 Text 1 Text 2 화면 넓이와 관계 없이 버튼 2개로 균등한 폭을 차지 하게 만들고 싶을 때. 절대 특정 폭을 지정 하지 않고!! 1. LinearLayout 을 사용 (상대적 배치) 2. Layout_weight 를 사용해서 비율을 조정
  • 10. RelativeLayout 응용 사례 확장 영역: height를 match_parent로 선언 dp 값으로 height 고정 RelativeLayout을 사용해서 순차적으로 쌓아나갈 때, 중간에 있는 항목이 match_parent를 사용하게 되면, 해당 내용이 한다 영역(영역 A)를 덮어버리는 증상이 발생. 이러한 경우이 영역 A가 고정폭인 경우에 해당 높이 만큼을 margin 값을 주어서 대처 영역 A. 이게 답은 아니지만, 이렇게 해서 화면 크기에 대처했다는 사례 공유 입니다.
  • 11. 최종 가이드 1. 화면을 받아서, 화면이 늘어날 때 늘어날 부분과 고정된 부분 판단. 2. 고정될 부분에 대해서, dp 단위로 수치를 계산 (mdpi 기준으로 작업 진행하면 pixel 단위로 dp 별도 계산 없음) 3. 화면을 구분해서 전체 Layout 형태를 구상 4. 세세한 부분에 대해서는 상상력을 활용해서 Layout 조합 5. 실 기기에서 테스트 하면서 미진한 부분 보강 및 완료 6. 디자인 팀에서 각 dpi에 해당하는 필요 이미지 받아서 배포!!