질병관리본부(충북 오성읍, 2014.11.11) 특강 교육자료. 일반 공무원 대상으로 현 시대의 트렌드를 짚어주고, 질병관리본부 서비스(웹/앱)에 대해 검토한 후, 발전 방향 제시. 마지막으로 고해상도 디스플레이 시대 도래에 따른 비트맵 콘텐츠 품질 향상 방법과 플랫폼에 따른 준비 방법을 기술.

1. 모바일 “고해상도 디스플레이”
시대를 준비하다_
고밀도 픽셀 기반 디자인
모던 워크플로우에 관하여

2. 만들면서 배우는
“모던 웹사이트 디자인” 저자
야무(yamoo9), 지훈

3. 모바일 시대 모바일 “고해상도 디스플레이” 시대를 준비하다_
모바일 퍼스트
모바일 온리
2012-2015 TREND

4. 모바일 퍼스트, 데스크톱 세컨드 Facebook Design Director Kate Aronowitz 모바일 “고해상도 디스플레이” 시대를 준비하다_
mobile first
We're just now starting to think about mobile first
and desktop second for a lot of our products.
데스크톱 중심의 사고를 벗어나
모바일을 우선으로 서비스를 만들어야 합니다.
>

5. 모바일 vs 데스크톱 Analyze the Future IDC 모바일 “고해상도 디스플레이” 시대를 준비하다_
모바일 > 데스크톱 Mobile vs Desktop
2014-15 모바일, 데스크톱 시장 추월 예측
2007 2009 2011 2013 2015 2016

6. 모바일은 일상 Analyze the Future Complete.com 모바일 “고해상도 디스플레이” 시대를 준비하다_
일상이 되어 버린 모바일 세상
집, 출퇴근 길, 회사, TV 시청, 쇼핑, 잠자기 전.. 언제나!

7. 모바일 트래픽 Analyze the Future cisco.com 모바일 “고해상도 디스플레이” 시대를 준비하다_
모바일 트래픽 ↑, 데스크탑 트래픽 →
스마트폰, 태블릿 사용량 급증에 따른 결과

8. 데스크톱 퍼스트 모바일 “고해상도 디스플레이” 시대를 준비하다_
데스크톱 우선!
기획, 디자인, 개발 모두 익숙한 기존 경험에만 의존
새로운 환경에 적응 더뎌..

9. 모바일 퍼스트 모바일 “고해상도 디스플레이” 시대를 준비하다_
모바일 우선!
기획, 디자인, 개발 모두 새로운 경험에 도전/시행착오
새 시대를 준비하고 앞서가는..

10. 모바일 퍼스트 월드 Google CEO Eric Schmidt
모바일 “고해상도 디스플레이” 시대를 준비하다_
2014. 11. 4
mobile-only world
We are beginning to see ‘mobile-only world’, meaning that
all the functionalities are in the mobile devices, and you may
have a website for some management works.
he said, hinting that the PC era is coming to an end.
데스크톱 PC 시대는 곧 끝날 것이며,
세상은 모바일만으로 모든 것이 처리되는
온리 모바일 시대가 열릴 것입니다.
그 중심은 아시아입니다.
http://url.yamoo9.net/onlymobile

11. 요약 Point Summary 모바일 “고해상도 디스플레이” 시대를 준비하다_
모바일 First
모바일 Only
서비스 개발 시, Mobile이 우선 되어야 합니다.
2015년에는 모바일 사용량이 무려 26배 이상 향상(2011년 대비)될 것으로 예상됩니다.
모바일 기기에서 모든 것이 처리 가능한 세상이 다가오고 있습니다.
아시아 인터넷 사용자 계층(24%) 중, 무려 51% 사용자가 모바일 온리 사용자입니다.

12. 모바일 사용자 모바일 “고해상도 디스플레이” 시대를 준비하다_
모바일 웹/앱
사용자 고려 체크
질병관리본부 웹사이트 cdc.go.kr/CDC

13. 모바일 웹 사용자 고려 질병관리본부 웹사이트 cdc.go.kr/CDC 모바일 “고해상도 디스플레이” 시대를 준비하다_
모바일 웹 사용자 고려 X
‘모바일 퍼스트’를 넘어 ‘모바일 온리’의 <오늘>
질병관리본부 사이트는 아직 <어제>에 머물고 있습니다.
모바일 환경에서 질병관리본부
웹사이트 이용시 불편 야기

14. 모바일 웹 사용자 고려 질병관리본부 웹사이트 cdc.go.kr/CDC 모바일 “고해상도 디스플레이” 시대를 준비하다_
모바일 웹 사용자 고려 X
Pinch In-Out 터치 제스쳐를 사용해 질병관리본부 웹 사이트를 Full Browsing 할 수는 있지만..
콘텐츠를 읽는데 매우 불편하기에 사용자 편의성이 떨어집니다.
모바일 환경에서 질병관리본부
웹사이트 이용시 불편 야기

15. 모바일 웹 사용자 고려 - 반응형 웹 국민체육진흥공단 kspo.or.kr 모바일 “고해상도 디스플레이” 시대를 준비하다_
공공기관 반응형 웹 사례 - 모바일 웹 사용자 고려
1개 도메인으로 관리되는 ‘One Source Multi Use’를 구현한 반응형 웹 디자인은 구축 과정에 많은 공수가 들지만,
구축을 완료한 후에는 유지보수가 손쉬운 장점이 있으면 사용자의 모바일 환경 편의성이 뛰어납니다.
kspo.or.kr
모바일, 데스크톱 어떤 환경에서도
웹사이트 이용이 매우 편리함

16. 모바일 웹 사용자 고려 - 반응형 웹 LG 디스플레이 lgdisplay.com 모바일 “고해상도 디스플레이” 시대를 준비하다_
기업 반응형 웹 사례 - 부분 반응형
2개 도메인으로 관리되는 반응형 웹 디자인 사례로 콘텐츠가 많은 유형의 서비스에서 효율적으로
콘텐츠 관리 및 업데이트에 용이합니다. 사용자 또한 모바일 환경, 데스크탑 환경마다 최적화된 뷰를 제공 받습니다.
모바일, 데스크톱 어떤 환경에서도
웹사이트 이용이 매우 편리함
m.lgdisplay.com lgdisplay.com

17. 모바일 웹 사용자 고려 - 반응형 웹 LG 디스플레이 lgdisplay.com 모바일 “고해상도 디스플레이” 시대를 준비하다_
포털 반응형 웹 사례 - 부분 반응형
2개 도메인으로 관리되는 반응형 웹 디자인 사례로 콘텐츠가 많은 유형의 서비스에서 효율적으로
콘텐츠 관리 및 업데이트에 용이합니다. 사용자 또한 모바일 환경, 데스크탑 환경마다 최적화된 뷰를 제공 받습니다.
m.naver.com naver.com
모바일, 데스크톱 어떤 환경에서도
웹사이트 이용이 매우 편리함

18. 모바일 애플리케이션 사용자 고려 질병관리본부 앱 (iOS/Android 제공) 모바일 “고해상도 디스플레이” 시대를 준비하다_
모바일 앱 사용자 고려 O
희망의 씨앗 조혈모세포 기증희망 도우미,
질병관리본부 mini, NIP 예방접종도우미, 결핵 ZERO 등
만약 Windows 스토어, Amazon 앱스토어
국내 점유율 향상되면 별도 앱 추가 개발 필요

19. 웹: 정보 접근성 취약 계층 사용자 고려 질병관리본부 웹사이트 cdc.go.kr/CDC 모바일 “고해상도 디스플레이” 시대를 준비하다_
웹 사이트: 정보 접근성 취약 계층 고려 O
장애를 이유로 불 평등한 차별을 받는 약자 계층에 대한 배려
모바일 환경 이용시 불편하지만
모바일 접근성은 잘 지켜짐

20. 모바일 “고해상도 디스플레이” 시대를 준비하다_
모바일 앱: 정보 접근성 취약 계층 고려 X
모바일 앱 (iOS 테스트) 테스트 결과, 정보 접근성이 고려되지 않아 사용자에게
정보 접근 차별을 야기
모바일 앱 접근성
잘 안 지켜짐
앱: 정보 접근성 취약 계층 사용자 고려 질병관리본부 앱 (iOS/Android 제공)
“메인 메뉴 1 버튼”
“메인 메뉴 2 버튼”
“메인 메뉴 3 버튼”
“메인 메뉴 4 버튼”
“메인 메뉴 5 버튼”
“레프트 메뉴 0 버튼”
“레프트 메뉴 1 버튼”
“레프트 메뉴 2 버튼”
“레프트 메뉴 11D 버튼”
“레프트 메뉴 12D 버튼”
.
.
.

21. 모바일 “고해상도 디스플레이” 시대를 준비하다_
모바일 앱: 정보 접근성 취약 계층 - 시뮬레이션
iOS ‘보이스 오버’ 스크린 리더를 사용하여 질병관리본부 앱 사용 접근성 문제 확인
모바일 앱 접근성
잘 안 지켜짐
앱: 정보 접근성 취약 계층 사용자 고려 질병관리본부 앱 (iOS/Android 제공)
? “메인 메뉴 1 버튼”
“메인 메뉴 2 버튼”
“메인 메뉴 3 버튼”
“메인 메뉴 4 버튼”
“메인 메뉴 5 버튼”

22. 요약 Point Summary 모바일 “고해상도 디스플레이” 시대를 준비하다_
모바일 웹
모바일 앱
데스크톱이 아닌, 모바일에 최적화된 웹 사이트 서비스를 제공해야 합니다.
별도로 앱을 인스톨하지 않고 웹 브라우저를 통해 바로 서비스를 이용하려는 사용자를 고려해주세요.
(예: 모바일 전용 웹 사이트 제공 또는 반응형 웹 사이트 제공)
“모바일 웹 이용이 왜 이리 불편해?!”
애플리케이션 접근성을 준수할 수 있도록 조치해야 합니다.
각 플랫폼마다 지속적이고 차별없는 업데이트가 요구됩니다.
시대의 변화에 따라 새롭게 시장을 차지하는 플랫폼이 있다면
해당 플랫폼용 앱을 별도로 개발해야 합니다.

23. 모바일 트렌드 모바일 “고해상도 디스플레이” 시대를 준비하다_
NEO 모던 디자인
비주얼 트렌드 &
테크
고해상도(고밀도) 디스플레이

24. 고해상도 디스플레이 시대 5K Display 모바일 “고해상도 디스플레이” 시대를 준비하다_

25. 고해상도 디스플레이 시대 Introducing Apple iMac 5K Display 모바일 “고해상도 디스플레이” 시대를 준비하다_

26. 고해상도 디스플레이 시대 5K Image 모바일 “고해상도 디스플레이” 시대를 준비하다_

27. 고해상도 디스플레이 시대 5K Image 모바일 “고해상도 디스플레이” 시대를 준비하다_

28. 고해상도 디스플레이 시대 초 고해상도 Ultra HD TV (3840×2160) 모바일 “고해상도 디스플레이” 시대를 준비하다_
UHD TV 대중화에 한걸음
세계 시장, 국내 시장 할 것 없이, 고 해상도 디스플레이 시대가 찾아왔습니다.

29. 고해상도 디스플레이 시대 고해상도 Smart Phone 모바일 “고해상도 디스플레이” 시대를 준비하다_
고해상도 스마트폰 시대!
스마트폰 또한 TV 시장과 마찬가지로 고해상도, 고밀도 디스플레이가 이슈!
“삼성, UHD 스마트폰 준비하고 있다”
Samsung사의 WQHD 스마트폰 ‘Galaxy S5’ Apple사의 Full HD 스마트폰 ‘iPhone 6+’ HTC의 Full HD 스마트폰 ‘드로이드 DNA’

30. 고해상도 디스플레이 시대 HD 규격 모바일 “고해상도 디스플레이” 시대를 준비하다_
HD 규격 ‘크기에 관한 이해’
4K, Quad HD, Ultra HD > WQHD > Full HD > HD

31. 고해상도 디스플레이 시대 Why? 4K 모바일 “고해상도 디스플레이” 시대를 준비하다_
왜 ‘4K’라고 부르는 걸까요?
4k는 Full HD(1080p) x 4 크기. 즉 Full HD 4개 만큼의 크기이기 때문입니다.
Full HD(1080p)
4K

32. 고해상도 디스플레이 시대 고밀도 디스플레이 모바일 “고해상도 디스플레이” 시대를 준비하다_
작은 스마트폰 해상도를 높일 수 있는 원리는?
스크린에 집약되어 있는 픽셀 밀도(Density)가 보다 촘촘하기 때문입니다.

33. 고해상도 디스플레이 시대 What is Pixel? 모바일 “고해상도 디스플레이” 시대를 준비하다_
픽셀(Pixel)
디지털 이미지의 경우 수많은 타일의 모자이크 그림과 같은 사각형 픽셀로 이루어져 있습니다.
디지털 이미지는 이 픽셀의 집합으로 이미지를 형성합니다.

34. 고해상도 디스플레이 시대 DPI / PPI 모바일 “고해상도 디스플레이” 시대를 준비하다_
DPI(PPI)란?
DPI(Dots Per Inch)는 원래 인쇄(Print) 상에서 사용되던 용어로, 컴퓨터 스크린에 적용되어
1인치 당 픽셀(Pixel)의 개수를 나타내는 용어인 PPI(Pixels Per Inch)로 불려집니다.

35. 고해상도 디스플레이 시대 Effect of the design 모바일 “고해상도 디스플레이” 시대를 준비하다_
디자인에 미치는 영향
물리적으로 동일한 공간 내에 들어 찬 픽셀의 농도가 다르기 때문에
고 밀도 디스플레이의 경우, 크기가 작아집니다.

36. 고해상도 디스플레이 시대 Screen Resolution 모바일 “고해상도 디스플레이” 시대를 준비하다_
스크린 해상도
해상도(Resolution)란? 스크린에 표시되는 픽셀의 개수 (예: 27인치 Cinema Display 기기의 스크린 해상도는 2560 x 1440px)를 말합니다.
스크린 가로 픽셀의 개수 2560개, 높이 픽셀의 개수 1440개 입니다.
x2

37. 고해상도 디스플레이 시대 Screen Hertz 모바일 “고해상도 디스플레이” 시대를 준비하다_
모니터 헤르츠(Hertz)
헤르츠 설정은 초당 스크린의 이미지를 몇 번 바꿔 표시(FPS, Frame Per Second)하는가에 대한 척도로 PPI와는 아무런 관련이 없습니다.
60Hz가 설정된 모니터는 초당 60개의 프레임을 변경하며, 120Hz 모니터는 120fps를 지원합니다.

38. 고해상도 디스플레이 시대 Retina Display 모바일 “고해상도 디스플레이” 시대를 준비하다_
레티나 디스플레이
"레티나 디스플레이(Retina Display)"는 Apple사가 iPhone 4를 출시할 때 붙여진 이름입니다.
망막(Retina)으로 불린 이유는 기기의 PPI가 높아 스크린 상의 픽셀을 인간의 망막이 분간할 수 있는 최대치라고 발표했기 때문입니다.
x2

39. 고해상도 디스플레이 시대 Versus Pixels 모바일 “고해상도 디스플레이” 시대를 준비하다_
CSS 픽셀 vs Device 픽셀 vs Bitmap 픽셀
CSS 픽셀은 웹 브라우저가 웹 페이지 콘텐츠를 화면에 그릴 때 사용되는 단위입니다. 비트맵 픽셀은 래스터(Raster, 직사각형 격자의 화소, 색상 등을 종이
또는 모니터 매체에 표시하는 그래픽 포멧) 기반의 이미지(JPG, PNG, GIF 등)에 사용되는 가장 작은 단위입니다.

40. 고해상도 디스플레이 시대 Retina Display & Bitmap Pixels 모바일 “고해상도 디스플레이” 시대를 준비하다_
고해상도 디스플레이에서 발생할 수 있는 문제점
비트맵 픽셀이 디바이스 픽셀만큼 강제로 늘어나야 하기 때문에 뿌옇게 화면에 표시됩니다.

41. 고해상도 디스플레이 시대 Retina Display Design Assets 모바일 “고해상도 디스플레이” 시대를 준비하다_
레티나 디스플레이 디자인 에셋 제작
일반 디스플레이(x1)에 비해 레티나 디스플레이는 x2 배율로 디자인 에셋(비트맵 픽셀 기반)을 만들어야 합니다.

42. 고해상도 디스플레이 시대 Multiplier 모바일 “고해상도 디스플레이” 시대를 준비하다_
승수(乘數, Multiplier)란?
승수는 여러분의 디자인을 각기 다른 PPI에 따라 변경 적용할 때 수학적 구원이 됩니다.
승수에 대해 공부하면 기기의 세부사양에 대해 고민하지 않아도 됩니다.

43. 고해상도 디스플레이 시대 NEXT iPhone 6+ : Multiplier x3 모바일 “고해상도 디스플레이” 시대를 준비하다_
x3
x2

44. 고해상도 디스플레이 시대 DP/PT and SP 모바일 “고해상도 디스플레이” 시대를 준비하다_
DP, PT 그리고 SP 단위
DP 또는 PT는 다양한 기기, DPI에 적용 가능한 측정 단위입니다. DP 또는 Dip이라고 불리는 단위는 기기에 독립적으로 사용되는
픽셀(stands for Device independent Pixel)을 의미합니다. DP는 Android에서 PT는 Apple이 사용하는 단위입니다만, 본질적으로는
동일한 개념입니다. 쉽게 말해 기기에 한해 독립적으로 승수(Multiplier)가 적용되어 크기가 정의됩니다.

45. 고해상도 디스플레이 시대 High Density Display Guide 모바일 “고해상도 디스플레이” 시대를 준비하다_

46. 고해상도 디스플레이 시대 Setting PPI 모바일 “고해상도 디스플레이” 시대를 준비하다_
PPI 설정
비트맵 픽셀 설정 값은 PPI 설정이 달라져도 크기 변화 없이 동일하지만,
기기 독립적인 추상 단위인 PT(DP)는 PPI 설정에 영향을 받습니다.

47. 고해상도 디스플레이 시대 iOS, Design Assets 모바일 “고해상도 디스플레이” 시대를 준비하다_
iOS 앱 디자인 - Chrome 에셋(Assets) 탭 스위처
오직 하나의 승수(Multiplier)만을 사용해서 iOS, OSX 디자인 파일을 만드는 것은 매우 간단합니다.
먼저 x1 기준(기본 PPI, 100%)으로 디자인 파일을 생성한 후, 디자인 파일을 내보낼 때
레티나 디스플레이용으로 x2(200%)하여 @2x 파일을 생성하면 됩니다.

48. 고해상도 디스플레이 시대 Android, Design Assets
모바일 “고해상도 디스플레이” 시대를 준비하다_
Android 앱 디자인 & 승수(Multiplier)
Android 플랫폼은 iOS에 비해 고려해야할 제품의 폭이 넓습니다. 이유는 iOS와 달리 Android는 OEM(Original Equipment Manufacturer, 위탁생산)이 가능해
몇 가지 제약사항을 제외하면 Android를 가져다 사용하는데 아무런 문제가 없기 때문입니다. 그 결과 Apple을 제외한 다수의 업체가 Android를 가져다
폰/태블릿 기기의 운영체제로 사용하다 보니, 거의 대부분의 기기가 Android를 사용하게 되었습니다.

49. 고해상도 디스플레이 시대 Android, Design Assets
모바일 “고해상도 디스플레이” 시대를 준비하다_
Android 앱 디자인 - Chrome 에셋(Assets) 뒤로가기
가장 많이 사용되는 MDPI에서 XXHDPI까지 고려한다면 총 4세트의 디자인 에셋을 만들어야 합니다. (LDPI는 제외하세요) 아래 Chrome 모바일
웹 브라우저의 디자인 에셋 데모를 참고하세요. 특별히 TVDPI를 고려해야 한다면 총 5세트를 준비해야 합니다. 다만 iOS용으로 제작할 경우는
x1(100%) 승수(Multiplier)로 만들길 권합니다. 이유는 Android(x1.33, x1.5)를 포함한 다른 승수를 적용한 디자인 구현이 손쉽기 때문입니다.

50. 요약 Point Summary 모바일 “고해상도 디스플레이” 시대를 준비하다_
고해상도 디스플레이
픽셀/밀도/DPI/해상도/승수
기술이 발전함에 따라 디스플레이 환경은 큰 폭으로 변화되었습니다.
고해상도 디스플레이의 등장으로 스크린을 처리하는 보다 전문적인 기술에 대한 공부가 필요합니다.
앱 디자인 에셋 제작 방법 웹과 달리 각 메이저 플랫폼을 고려하여 환경을 이해하고 디자인해야 합니다.

51. 감사합니다.
야무(yamoo9), 지훈
yamoo9@naver.com
facebook.com/yamoo9