SlideShare a Scribd company logo
모바일 “고해상도 디스플레이” 
시대를 준비하다_ 
고밀도 픽셀 기반 디자인 
모던 워크플로우에 관하여
만들면서 배우는 
“모던 웹사이트 디자인” 저자 
야무(yamoo9), 지훈
모바일 시대 모바일 “고해상도 디스플레이” 시대를 준비하다_ 
모바일 퍼스트 
모바일 온리 
2012-2015 TREND
모바일 퍼스트, 데스크톱 세컨드 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. 
데스크톱 중심의 사고를 벗어나 
모바일을 우선으로 서비스를 만들어야 합니다. 
>
모바일 vs 데스크톱 Analyze the Future IDC 모바일 “고해상도 디스플레이” 시대를 준비하다_ 
모바일 > 데스크톱 Mobile vs Desktop 
2014-15 모바일, 데스크톱 시장 추월 예측 
2007 2009 2011 2013 2015 2016
모바일은 일상 Analyze the Future Complete.com 모바일 “고해상도 디스플레이” 시대를 준비하다_ 
일상이 되어 버린 모바일 세상 
집, 출퇴근 길, 회사, TV 시청, 쇼핑, 잠자기 전.. 언제나!
모바일 트래픽 Analyze the Future cisco.com 모바일 “고해상도 디스플레이” 시대를 준비하다_ 
모바일 트래픽 ↑, 데스크탑 트래픽 → 
스마트폰, 태블릿 사용량 급증에 따른 결과
데스크톱 퍼스트 모바일 “고해상도 디스플레이” 시대를 준비하다_ 
데스크톱 우선! 
기획, 디자인, 개발 모두 익숙한 기존 경험에만 의존 
새로운 환경에 적응 더뎌..
모바일 퍼스트 모바일 “고해상도 디스플레이” 시대를 준비하다_ 
모바일 우선! 
기획, 디자인, 개발 모두 새로운 경험에 도전/시행착오 
새 시대를 준비하고 앞서가는..
모바일 퍼스트 월드 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
요약 Point Summary 모바일 “고해상도 디스플레이” 시대를 준비하다_ 
모바일 First 
모바일 Only 
서비스 개발 시, Mobile이 우선 되어야 합니다. 
2015년에는 모바일 사용량이 무려 26배 이상 향상(2011년 대비)될 것으로 예상됩니다. 
모바일 기기에서 모든 것이 처리 가능한 세상이 다가오고 있습니다. 
아시아 인터넷 사용자 계층(24%) 중, 무려 51% 사용자가 모바일 온리 사용자입니다.
모바일 사용자 모바일 “고해상도 디스플레이” 시대를 준비하다_ 
모바일 웹/앱 
사용자 고려 체크 
질병관리본부 웹사이트 cdc.go.kr/CDC
모바일 웹 사용자 고려 질병관리본부 웹사이트 cdc.go.kr/CDC 모바일 “고해상도 디스플레이” 시대를 준비하다_ 
모바일 웹 사용자 고려 X 
‘모바일 퍼스트’를 넘어 ‘모바일 온리’의 <오늘> 
질병관리본부 사이트는 아직 <어제>에 머물고 있습니다. 
모바일 환경에서 질병관리본부 
웹사이트 이용시 불편 야기
모바일 웹 사용자 고려 질병관리본부 웹사이트 cdc.go.kr/CDC 모바일 “고해상도 디스플레이” 시대를 준비하다_ 
모바일 웹 사용자 고려 X 
Pinch In-Out 터치 제스쳐를 사용해 질병관리본부 웹 사이트를 Full Browsing 할 수는 있지만.. 
콘텐츠를 읽는데 매우 불편하기에 사용자 편의성이 떨어집니다. 
모바일 환경에서 질병관리본부 
웹사이트 이용시 불편 야기
모바일 웹 사용자 고려 - 반응형 웹 국민체육진흥공단 kspo.or.kr 모바일 “고해상도 디스플레이” 시대를 준비하다_ 
공공기관 반응형 웹 사례 - 모바일 웹 사용자 고려 
1개 도메인으로 관리되는 ‘One Source Multi Use’를 구현한 반응형 웹 디자인은 구축 과정에 많은 공수가 들지만, 
구축을 완료한 후에는 유지보수가 손쉬운 장점이 있으면 사용자의 모바일 환경 편의성이 뛰어납니다. 
kspo.or.kr 
모바일, 데스크톱 어떤 환경에서도 
웹사이트 이용이 매우 편리함
모바일 웹 사용자 고려 - 반응형 웹 LG 디스플레이 lgdisplay.com 모바일 “고해상도 디스플레이” 시대를 준비하다_ 
기업 반응형 웹 사례 - 부분 반응형 
2개 도메인으로 관리되는 반응형 웹 디자인 사례로 콘텐츠가 많은 유형의 서비스에서 효율적으로 
콘텐츠 관리 및 업데이트에 용이합니다. 사용자 또한 모바일 환경, 데스크탑 환경마다 최적화된 뷰를 제공 받습니다. 
모바일, 데스크톱 어떤 환경에서도 
웹사이트 이용이 매우 편리함 
m.lgdisplay.com lgdisplay.com
모바일 웹 사용자 고려 - 반응형 웹 LG 디스플레이 lgdisplay.com 모바일 “고해상도 디스플레이” 시대를 준비하다_ 
포털 반응형 웹 사례 - 부분 반응형 
2개 도메인으로 관리되는 반응형 웹 디자인 사례로 콘텐츠가 많은 유형의 서비스에서 효율적으로 
콘텐츠 관리 및 업데이트에 용이합니다. 사용자 또한 모바일 환경, 데스크탑 환경마다 최적화된 뷰를 제공 받습니다. 
m.naver.com naver.com 
모바일, 데스크톱 어떤 환경에서도 
웹사이트 이용이 매우 편리함
모바일 애플리케이션 사용자 고려 질병관리본부 앱 (iOS/Android 제공) 모바일 “고해상도 디스플레이” 시대를 준비하다_ 
모바일 앱 사용자 고려 O 
희망의 씨앗 조혈모세포 기증희망 도우미, 
질병관리본부 mini, NIP 예방접종도우미, 결핵 ZERO 등 
만약 Windows 스토어, Amazon 앱스토어 
국내 점유율 향상되면 별도 앱 추가 개발 필요
웹: 정보 접근성 취약 계층 사용자 고려 질병관리본부 웹사이트 cdc.go.kr/CDC 모바일 “고해상도 디스플레이” 시대를 준비하다_ 
웹 사이트: 정보 접근성 취약 계층 고려 O 
장애를 이유로 불 평등한 차별을 받는 약자 계층에 대한 배려 
모바일 환경 이용시 불편하지만 
모바일 접근성은 잘 지켜짐
모바일 “고해상도 디스플레이” 시대를 준비하다_ 
모바일 앱: 정보 접근성 취약 계층 고려 X 
모바일 앱 (iOS 테스트) 테스트 결과, 정보 접근성이 고려되지 않아 사용자에게 
정보 접근 차별을 야기 
모바일 앱 접근성 
잘 안 지켜짐 
앱: 정보 접근성 취약 계층 사용자 고려 질병관리본부 앱 (iOS/Android 제공) 
“메인 메뉴 1 버튼” 
“메인 메뉴 2 버튼” 
“메인 메뉴 3 버튼” 
“메인 메뉴 4 버튼” 
“메인 메뉴 5 버튼” 
“레프트 메뉴 0 버튼” 
“레프트 메뉴 1 버튼” 
“레프트 메뉴 2 버튼” 
“레프트 메뉴 11D 버튼” 
“레프트 메뉴 12D 버튼” 
. 
. 
.
모바일 “고해상도 디스플레이” 시대를 준비하다_ 
모바일 앱: 정보 접근성 취약 계층 - 시뮬레이션 
iOS ‘보이스 오버’ 스크린 리더를 사용하여 질병관리본부 앱 사용 접근성 문제 확인 
모바일 앱 접근성 
잘 안 지켜짐 
앱: 정보 접근성 취약 계층 사용자 고려 질병관리본부 앱 (iOS/Android 제공) 
? “메인 메뉴 1 버튼” 
“메인 메뉴 2 버튼” 
“메인 메뉴 3 버튼” 
“메인 메뉴 4 버튼” 
“메인 메뉴 5 버튼”
요약 Point Summary 모바일 “고해상도 디스플레이” 시대를 준비하다_ 
모바일 웹 
모바일 앱 
데스크톱이 아닌, 모바일에 최적화된 웹 사이트 서비스를 제공해야 합니다. 
별도로 앱을 인스톨하지 않고 웹 브라우저를 통해 바로 서비스를 이용하려는 사용자를 고려해주세요. 
(예: 모바일 전용 웹 사이트 제공 또는 반응형 웹 사이트 제공) 
“모바일 웹 이용이 왜 이리 불편해?!” 
애플리케이션 접근성을 준수할 수 있도록 조치해야 합니다. 
각 플랫폼마다 지속적이고 차별없는 업데이트가 요구됩니다. 
시대의 변화에 따라 새롭게 시장을 차지하는 플랫폼이 있다면 
해당 플랫폼용 앱을 별도로 개발해야 합니다.
모바일 트렌드 모바일 “고해상도 디스플레이” 시대를 준비하다_ 
NEO 모던 디자인 
비주얼 트렌드 & 
테크 
고해상도(고밀도) 디스플레이
고해상도 디스플레이 시대 5K Display 모바일 “고해상도 디스플레이” 시대를 준비하다_
고해상도 디스플레이 시대 Introducing Apple iMac 5K Display 모바일 “고해상도 디스플레이” 시대를 준비하다_
고해상도 디스플레이 시대 5K Image 모바일 “고해상도 디스플레이” 시대를 준비하다_
고해상도 디스플레이 시대 5K Image 모바일 “고해상도 디스플레이” 시대를 준비하다_
고해상도 디스플레이 시대 초 고해상도 Ultra HD TV (3840×2160) 모바일 “고해상도 디스플레이” 시대를 준비하다_ 
UHD TV 대중화에 한걸음 
세계 시장, 국내 시장 할 것 없이, 고 해상도 디스플레이 시대가 찾아왔습니다.
고해상도 디스플레이 시대 고해상도 Smart Phone 모바일 “고해상도 디스플레이” 시대를 준비하다_ 
고해상도 스마트폰 시대! 
스마트폰 또한 TV 시장과 마찬가지로 고해상도, 고밀도 디스플레이가 이슈! 
“삼성, UHD 스마트폰 준비하고 있다” 
Samsung사의 WQHD 스마트폰 ‘Galaxy S5’ Apple사의 Full HD 스마트폰 ‘iPhone 6+’ HTC의 Full HD 스마트폰 ‘드로이드 DNA’
고해상도 디스플레이 시대 HD 규격 모바일 “고해상도 디스플레이” 시대를 준비하다_ 
HD 규격 ‘크기에 관한 이해’ 
4K, Quad HD, Ultra HD > WQHD > Full HD > HD
고해상도 디스플레이 시대 Why? 4K 모바일 “고해상도 디스플레이” 시대를 준비하다_ 
왜 ‘4K’라고 부르는 걸까요? 
4k는 Full HD(1080p) x 4 크기. 즉 Full HD 4개 만큼의 크기이기 때문입니다. 
Full HD(1080p) 
4K
고해상도 디스플레이 시대 고밀도 디스플레이 모바일 “고해상도 디스플레이” 시대를 준비하다_ 
작은 스마트폰 해상도를 높일 수 있는 원리는? 
스크린에 집약되어 있는 픽셀 밀도(Density)가 보다 촘촘하기 때문입니다.
고해상도 디스플레이 시대 What is Pixel? 모바일 “고해상도 디스플레이” 시대를 준비하다_ 
픽셀(Pixel) 
디지털 이미지의 경우 수많은 타일의 모자이크 그림과 같은 사각형 픽셀로 이루어져 있습니다. 
디지털 이미지는 이 픽셀의 집합으로 이미지를 형성합니다.
고해상도 디스플레이 시대 DPI / PPI 모바일 “고해상도 디스플레이” 시대를 준비하다_ 
DPI(PPI)란? 
DPI(Dots Per Inch)는 원래 인쇄(Print) 상에서 사용되던 용어로, 컴퓨터 스크린에 적용되어 
1인치 당 픽셀(Pixel)의 개수를 나타내는 용어인 PPI(Pixels Per Inch)로 불려집니다.
고해상도 디스플레이 시대 Effect of the design 모바일 “고해상도 디스플레이” 시대를 준비하다_ 
디자인에 미치는 영향 
물리적으로 동일한 공간 내에 들어 찬 픽셀의 농도가 다르기 때문에 
고 밀도 디스플레이의 경우, 크기가 작아집니다.
고해상도 디스플레이 시대 Screen Resolution 모바일 “고해상도 디스플레이” 시대를 준비하다_ 
스크린 해상도 
해상도(Resolution)란? 스크린에 표시되는 픽셀의 개수 (예: 27인치 Cinema Display 기기의 스크린 해상도는 2560 x 1440px)를 말합니다. 
스크린 가로 픽셀의 개수 2560개, 높이 픽셀의 개수 1440개 입니다. 
x2
고해상도 디스플레이 시대 Screen Hertz 모바일 “고해상도 디스플레이” 시대를 준비하다_ 
모니터 헤르츠(Hertz) 
헤르츠 설정은 초당 스크린의 이미지를 몇 번 바꿔 표시(FPS, Frame Per Second)하는가에 대한 척도로 PPI와는 아무런 관련이 없습니다. 
60Hz가 설정된 모니터는 초당 60개의 프레임을 변경하며, 120Hz 모니터는 120fps를 지원합니다.
고해상도 디스플레이 시대 Retina Display 모바일 “고해상도 디스플레이” 시대를 준비하다_ 
레티나 디스플레이 
"레티나 디스플레이(Retina Display)"는 Apple사가 iPhone 4를 출시할 때 붙여진 이름입니다. 
망막(Retina)으로 불린 이유는 기기의 PPI가 높아 스크린 상의 픽셀을 인간의 망막이 분간할 수 있는 최대치라고 발표했기 때문입니다. 
x2
고해상도 디스플레이 시대 Versus Pixels 모바일 “고해상도 디스플레이” 시대를 준비하다_ 
CSS 픽셀 vs Device 픽셀 vs Bitmap 픽셀 
CSS 픽셀은 웹 브라우저가 웹 페이지 콘텐츠를 화면에 그릴 때 사용되는 단위입니다. 비트맵 픽셀은 래스터(Raster, 직사각형 격자의 화소, 색상 등을 종이 
또는 모니터 매체에 표시하는 그래픽 포멧) 기반의 이미지(JPG, PNG, GIF 등)에 사용되는 가장 작은 단위입니다.
고해상도 디스플레이 시대 Retina Display & Bitmap Pixels 모바일 “고해상도 디스플레이” 시대를 준비하다_ 
고해상도 디스플레이에서 발생할 수 있는 문제점 
비트맵 픽셀이 디바이스 픽셀만큼 강제로 늘어나야 하기 때문에 뿌옇게 화면에 표시됩니다.
고해상도 디스플레이 시대 Retina Display Design Assets 모바일 “고해상도 디스플레이” 시대를 준비하다_ 
레티나 디스플레이 디자인 에셋 제작 
일반 디스플레이(x1)에 비해 레티나 디스플레이는 x2 배율로 디자인 에셋(비트맵 픽셀 기반)을 만들어야 합니다.
고해상도 디스플레이 시대 Multiplier 모바일 “고해상도 디스플레이” 시대를 준비하다_ 
승수(乘數, Multiplier)란? 
승수는 여러분의 디자인을 각기 다른 PPI에 따라 변경 적용할 때 수학적 구원이 됩니다. 
승수에 대해 공부하면 기기의 세부사양에 대해 고민하지 않아도 됩니다.
고해상도 디스플레이 시대 NEXT iPhone 6+ : Multiplier x3 모바일 “고해상도 디스플레이” 시대를 준비하다_ 
x3 
x2
고해상도 디스플레이 시대 DP/PT and SP 모바일 “고해상도 디스플레이” 시대를 준비하다_ 
DP, PT 그리고 SP 단위 
DP 또는 PT는 다양한 기기, DPI에 적용 가능한 측정 단위입니다. DP 또는 Dip이라고 불리는 단위는 기기에 독립적으로 사용되는 
픽셀(stands for Device independent Pixel)을 의미합니다. DP는 Android에서 PT는 Apple이 사용하는 단위입니다만, 본질적으로는 
동일한 개념입니다. 쉽게 말해 기기에 한해 독립적으로 승수(Multiplier)가 적용되어 크기가 정의됩니다.
고해상도 디스플레이 시대 High Density Display Guide 모바일 “고해상도 디스플레이” 시대를 준비하다_
고해상도 디스플레이 시대 Setting PPI 모바일 “고해상도 디스플레이” 시대를 준비하다_ 
PPI 설정 
비트맵 픽셀 설정 값은 PPI 설정이 달라져도 크기 변화 없이 동일하지만, 
기기 독립적인 추상 단위인 PT(DP)는 PPI 설정에 영향을 받습니다.
고해상도 디스플레이 시대 iOS, Design Assets 모바일 “고해상도 디스플레이” 시대를 준비하다_ 
iOS 앱 디자인 - Chrome 에셋(Assets) 탭 스위처 
오직 하나의 승수(Multiplier)만을 사용해서 iOS, OSX 디자인 파일을 만드는 것은 매우 간단합니다. 
먼저 x1 기준(기본 PPI, 100%)으로 디자인 파일을 생성한 후, 디자인 파일을 내보낼 때 
레티나 디스플레이용으로 x2(200%)하여 @2x 파일을 생성하면 됩니다.
고해상도 디스플레이 시대 Android, Design Assets 
모바일 “고해상도 디스플레이” 시대를 준비하다_ 
Android 앱 디자인 & 승수(Multiplier) 
Android 플랫폼은 iOS에 비해 고려해야할 제품의 폭이 넓습니다. 이유는 iOS와 달리 Android는 OEM(Original Equipment Manufacturer, 위탁생산)이 가능해 
몇 가지 제약사항을 제외하면 Android를 가져다 사용하는데 아무런 문제가 없기 때문입니다. 그 결과 Apple을 제외한 다수의 업체가 Android를 가져다 
폰/태블릿 기기의 운영체제로 사용하다 보니, 거의 대부분의 기기가 Android를 사용하게 되었습니다.
고해상도 디스플레이 시대 Android, Design Assets 
모바일 “고해상도 디스플레이” 시대를 준비하다_ 
Android 앱 디자인 - Chrome 에셋(Assets) 뒤로가기 
가장 많이 사용되는 MDPI에서 XXHDPI까지 고려한다면 총 4세트의 디자인 에셋을 만들어야 합니다. (LDPI는 제외하세요) 아래 Chrome 모바일 
웹 브라우저의 디자인 에셋 데모를 참고하세요. 특별히 TVDPI를 고려해야 한다면 총 5세트를 준비해야 합니다. 다만 iOS용으로 제작할 경우는 
x1(100%) 승수(Multiplier)로 만들길 권합니다. 이유는 Android(x1.33, x1.5)를 포함한 다른 승수를 적용한 디자인 구현이 손쉽기 때문입니다.
요약 Point Summary 모바일 “고해상도 디스플레이” 시대를 준비하다_ 
고해상도 디스플레이 
픽셀/밀도/DPI/해상도/승수 
기술이 발전함에 따라 디스플레이 환경은 큰 폭으로 변화되었습니다. 
고해상도 디스플레이의 등장으로 스크린을 처리하는 보다 전문적인 기술에 대한 공부가 필요합니다. 
앱 디자인 에셋 제작 방법 웹과 달리 각 메이저 플랫폼을 고려하여 환경을 이해하고 디자인해야 합니다.
감사합니다. 
야무(yamoo9), 지훈 
yamoo9@naver.com 
facebook.com/yamoo9

More Related Content

What's hot

MezzoMedia - Media & Market Report [3월 호]
MezzoMedia - Media & Market Report [3월 호]MezzoMedia - Media & Market Report [3월 호]
MezzoMedia - Media & Market Report [3월 호]
MezzoMedia
 
MezzoMedia - Media & Market Report [2월 호]
MezzoMedia - Media & Market Report [2월 호]MezzoMedia - Media & Market Report [2월 호]
MezzoMedia - Media & Market Report [2월 호]
MezzoMedia
 
2014년 2월 나스미디어 Media Trend 미디어 동향 & 신규 광고 상품
2014년 2월 나스미디어 Media Trend 미디어 동향 & 신규 광고 상품2014년 2월 나스미디어 Media Trend 미디어 동향 & 신규 광고 상품
2014년 2월 나스미디어 Media Trend 미디어 동향 & 신규 광고 상품
아르떼소피
 
[메조미디어] 2017 상반기 미디어 트렌드 리포트
[메조미디어] 2017 상반기 미디어 트렌드 리포트[메조미디어] 2017 상반기 미디어 트렌드 리포트
[메조미디어] 2017 상반기 미디어 트렌드 리포트
MezzoMedia
 
[메조미디어] 2017 상반기 업종 분석 리포트_종합편
[메조미디어] 2017 상반기 업종 분석 리포트_종합편[메조미디어] 2017 상반기 업종 분석 리포트_종합편
[메조미디어] 2017 상반기 업종 분석 리포트_종합편
MezzoMedia
 
[메조미디어] 2017 상반기 업종 분석 리포트_유통
[메조미디어] 2017 상반기 업종 분석 리포트_유통[메조미디어] 2017 상반기 업종 분석 리포트_유통
[메조미디어] 2017 상반기 업종 분석 리포트_유통
MezzoMedia
 
[메조미디어] 2017 상반기 업종 분석 리포트_식음료
[메조미디어] 2017 상반기 업종 분석 리포트_식음료[메조미디어] 2017 상반기 업종 분석 리포트_식음료
[메조미디어] 2017 상반기 업종 분석 리포트_식음료
MezzoMedia
 
2014 상반기 미디어 트렌드
2014 상반기 미디어 트렌드2014 상반기 미디어 트렌드
2014 상반기 미디어 트렌드
Junhwa Kim
 
[메조미디어] 2018 업종분석 리포트_교육
[메조미디어] 2018 업종분석 리포트_교육[메조미디어] 2018 업종분석 리포트_교육
[메조미디어] 2018 업종분석 리포트_교육
MezzoMedia
 
[메조미디어] 2014 미디어 트렌드 전망_2013.12
[메조미디어] 2014 미디어 트렌드 전망_2013.12[메조미디어] 2014 미디어 트렌드 전망_2013.12
[메조미디어] 2014 미디어 트렌드 전망_2013.12
MezzoMedia
 
[메조미디어] 2017 상반기 업종 분석 리포트_교육/복지
[메조미디어] 2017 상반기 업종 분석 리포트_교육/복지[메조미디어] 2017 상반기 업종 분석 리포트_교육/복지
[메조미디어] 2017 상반기 업종 분석 리포트_교육/복지
MezzoMedia
 
[메조미디어] 2017 상반기 업종 분석 리포트_게임
[메조미디어] 2017 상반기 업종 분석 리포트_게임[메조미디어] 2017 상반기 업종 분석 리포트_게임
[메조미디어] 2017 상반기 업종 분석 리포트_게임
MezzoMedia
 
나스리포트 276호 total
나스리포트 276호 total나스리포트 276호 total
나스리포트 276호 total
Nasmedia
 
Mezzomedia - Media & Market Report (7월 호)
Mezzomedia - Media & Market Report (7월 호)Mezzomedia - Media & Market Report (7월 호)
Mezzomedia - Media & Market Report (7월 호)
MezzoMedia
 
나스리포트 268호 total
나스리포트 268호 total나스리포트 268호 total
나스리포트 268호 total
Nasmedia
 
크로스미디어 Monthly report 11월
크로스미디어 Monthly report 11월크로스미디어 Monthly report 11월
크로스미디어 Monthly report 11월
훈미 김
 
[New] MezzoMedia Media & Market Report (2018년 3월호)
[New] MezzoMedia Media & Market Report (2018년 3월호)[New] MezzoMedia Media & Market Report (2018년 3월호)
[New] MezzoMedia Media & Market Report (2018년 3월호)
MezzoMedia
 
[메조미디어] 2018 업종분석 리포트_식음료
[메조미디어] 2018 업종분석 리포트_식음료[메조미디어] 2018 업종분석 리포트_식음료
[메조미디어] 2018 업종분석 리포트_식음료
MezzoMedia
 
나스리포트 272호 total
나스리포트 272호 total나스리포트 272호 total
나스리포트 272호 total
Nasmedia
 
메조미디어 이종매체 캠페인 통합효과측정 솔루션 소개서
메조미디어 이종매체 캠페인 통합효과측정 솔루션 소개서메조미디어 이종매체 캠페인 통합효과측정 솔루션 소개서
메조미디어 이종매체 캠페인 통합효과측정 솔루션 소개서
MezzoMedia
 

What's hot (20)

MezzoMedia - Media & Market Report [3월 호]
MezzoMedia - Media & Market Report [3월 호]MezzoMedia - Media & Market Report [3월 호]
MezzoMedia - Media & Market Report [3월 호]
 
MezzoMedia - Media & Market Report [2월 호]
MezzoMedia - Media & Market Report [2월 호]MezzoMedia - Media & Market Report [2월 호]
MezzoMedia - Media & Market Report [2월 호]
 
2014년 2월 나스미디어 Media Trend 미디어 동향 & 신규 광고 상품
2014년 2월 나스미디어 Media Trend 미디어 동향 & 신규 광고 상품2014년 2월 나스미디어 Media Trend 미디어 동향 & 신규 광고 상품
2014년 2월 나스미디어 Media Trend 미디어 동향 & 신규 광고 상품
 
[메조미디어] 2017 상반기 미디어 트렌드 리포트
[메조미디어] 2017 상반기 미디어 트렌드 리포트[메조미디어] 2017 상반기 미디어 트렌드 리포트
[메조미디어] 2017 상반기 미디어 트렌드 리포트
 
[메조미디어] 2017 상반기 업종 분석 리포트_종합편
[메조미디어] 2017 상반기 업종 분석 리포트_종합편[메조미디어] 2017 상반기 업종 분석 리포트_종합편
[메조미디어] 2017 상반기 업종 분석 리포트_종합편
 
[메조미디어] 2017 상반기 업종 분석 리포트_유통
[메조미디어] 2017 상반기 업종 분석 리포트_유통[메조미디어] 2017 상반기 업종 분석 리포트_유통
[메조미디어] 2017 상반기 업종 분석 리포트_유통
 
[메조미디어] 2017 상반기 업종 분석 리포트_식음료
[메조미디어] 2017 상반기 업종 분석 리포트_식음료[메조미디어] 2017 상반기 업종 분석 리포트_식음료
[메조미디어] 2017 상반기 업종 분석 리포트_식음료
 
2014 상반기 미디어 트렌드
2014 상반기 미디어 트렌드2014 상반기 미디어 트렌드
2014 상반기 미디어 트렌드
 
[메조미디어] 2018 업종분석 리포트_교육
[메조미디어] 2018 업종분석 리포트_교육[메조미디어] 2018 업종분석 리포트_교육
[메조미디어] 2018 업종분석 리포트_교육
 
[메조미디어] 2014 미디어 트렌드 전망_2013.12
[메조미디어] 2014 미디어 트렌드 전망_2013.12[메조미디어] 2014 미디어 트렌드 전망_2013.12
[메조미디어] 2014 미디어 트렌드 전망_2013.12
 
[메조미디어] 2017 상반기 업종 분석 리포트_교육/복지
[메조미디어] 2017 상반기 업종 분석 리포트_교육/복지[메조미디어] 2017 상반기 업종 분석 리포트_교육/복지
[메조미디어] 2017 상반기 업종 분석 리포트_교육/복지
 
[메조미디어] 2017 상반기 업종 분석 리포트_게임
[메조미디어] 2017 상반기 업종 분석 리포트_게임[메조미디어] 2017 상반기 업종 분석 리포트_게임
[메조미디어] 2017 상반기 업종 분석 리포트_게임
 
나스리포트 276호 total
나스리포트 276호 total나스리포트 276호 total
나스리포트 276호 total
 
Mezzomedia - Media & Market Report (7월 호)
Mezzomedia - Media & Market Report (7월 호)Mezzomedia - Media & Market Report (7월 호)
Mezzomedia - Media & Market Report (7월 호)
 
나스리포트 268호 total
나스리포트 268호 total나스리포트 268호 total
나스리포트 268호 total
 
크로스미디어 Monthly report 11월
크로스미디어 Monthly report 11월크로스미디어 Monthly report 11월
크로스미디어 Monthly report 11월
 
[New] MezzoMedia Media & Market Report (2018년 3월호)
[New] MezzoMedia Media & Market Report (2018년 3월호)[New] MezzoMedia Media & Market Report (2018년 3월호)
[New] MezzoMedia Media & Market Report (2018년 3월호)
 
[메조미디어] 2018 업종분석 리포트_식음료
[메조미디어] 2018 업종분석 리포트_식음료[메조미디어] 2018 업종분석 리포트_식음료
[메조미디어] 2018 업종분석 리포트_식음료
 
나스리포트 272호 total
나스리포트 272호 total나스리포트 272호 total
나스리포트 272호 total
 
메조미디어 이종매체 캠페인 통합효과측정 솔루션 소개서
메조미디어 이종매체 캠페인 통합효과측정 솔루션 소개서메조미디어 이종매체 캠페인 통합효과측정 솔루션 소개서
메조미디어 이종매체 캠페인 통합효과측정 솔루션 소개서
 

Viewers also liked

KTH, H3 2012 - 발표자료 - 모두의 도구로 프로토타이핑하라!
KTH, H3 2012 - 발표자료 - 모두의 도구로 프로토타이핑하라!KTH, H3 2012 - 발표자료 - 모두의 도구로 프로토타이핑하라!
KTH, H3 2012 - 발표자료 - 모두의 도구로 프로토타이핑하라!
yamoo9
 
D가 알고 있는 걸 y도 알게 된다면 - 안드로메다에서 온 디자이너 이야기
D가 알고 있는 걸 y도 알게 된다면 - 안드로메다에서 온 디자이너 이야기D가 알고 있는 걸 y도 알게 된다면 - 안드로메다에서 온 디자이너 이야기
D가 알고 있는 걸 y도 알게 된다면 - 안드로메다에서 온 디자이너 이야기
yamoo9
 
웹표준화,대한민국 의식개선프로젝트 02 웹디자이너란?
웹표준화,대한민국 의식개선프로젝트 02 웹디자이너란?웹표준화,대한민국 의식개선프로젝트 02 웹디자이너란?
웹표준화,대한민국 의식개선프로젝트 02 웹디자이너란?
yamoo9
 
웹표준화,대한민국 의식개선프로젝트-03 웹표준,접근성이란?
웹표준화,대한민국 의식개선프로젝트-03 웹표준,접근성이란?웹표준화,대한민국 의식개선프로젝트-03 웹표준,접근성이란?
웹표준화,대한민국 의식개선프로젝트-03 웹표준,접근성이란?
yamoo9
 
도서 11번가 앱(모바일 웹) 사용성 모델 분석
도서 11번가 앱(모바일 웹) 사용성 모델 분석도서 11번가 앱(모바일 웹) 사용성 모델 분석
도서 11번가 앱(모바일 웹) 사용성 모델 분석
yamoo9
 
웹 접근성을 고려한 UI 컴포넌트 디자인 - 캐로셀(carousel) 편
웹 접근성을 고려한 UI 컴포넌트 디자인 - 캐로셀(carousel) 편웹 접근성을 고려한 UI 컴포넌트 디자인 - 캐로셀(carousel) 편
웹 접근성을 고려한 UI 컴포넌트 디자인 - 캐로셀(carousel) 편
yamoo9
 
Improve CSS IR & Sprites Image Techniques for Accessibility
Improve CSS IR & Sprites Image Techniques for AccessibilityImprove CSS IR & Sprites Image Techniques for Accessibility
Improve CSS IR & Sprites Image Techniques for Accessibility
yamoo9
 
스마트워커를 위한 에버노트 활용
스마트워커를 위한 에버노트 활용스마트워커를 위한 에버노트 활용
스마트워커를 위한 에버노트 활용
yamoo9
 
일관된 컬러 매니지먼트 - Consistent Color Management
일관된 컬러 매니지먼트 - Consistent Color Management일관된 컬러 매니지먼트 - Consistent Color Management
일관된 컬러 매니지먼트 - Consistent Color Management
yamoo9
 
2015년 상반기 모바일 광고 트렌드 top5_1507
2015년 상반기 모바일 광고 트렌드 top5_15072015년 상반기 모바일 광고 트렌드 top5_1507
2015년 상반기 모바일 광고 트렌드 top5_1507
Nasmedia
 
일본 게임 시장의 현황과 가능성
일본 게임 시장의 현황과 가능성일본 게임 시장의 현황과 가능성
일본 게임 시장의 현황과 가능성
KIM SANG HA
 
KTH 자기소개, 지훈 PD
KTH 자기소개, 지훈 PDKTH 자기소개, 지훈 PD
KTH 자기소개, 지훈 PD
yamoo9
 

Viewers also liked (12)

KTH, H3 2012 - 발표자료 - 모두의 도구로 프로토타이핑하라!
KTH, H3 2012 - 발표자료 - 모두의 도구로 프로토타이핑하라!KTH, H3 2012 - 발표자료 - 모두의 도구로 프로토타이핑하라!
KTH, H3 2012 - 발표자료 - 모두의 도구로 프로토타이핑하라!
 
D가 알고 있는 걸 y도 알게 된다면 - 안드로메다에서 온 디자이너 이야기
D가 알고 있는 걸 y도 알게 된다면 - 안드로메다에서 온 디자이너 이야기D가 알고 있는 걸 y도 알게 된다면 - 안드로메다에서 온 디자이너 이야기
D가 알고 있는 걸 y도 알게 된다면 - 안드로메다에서 온 디자이너 이야기
 
웹표준화,대한민국 의식개선프로젝트 02 웹디자이너란?
웹표준화,대한민국 의식개선프로젝트 02 웹디자이너란?웹표준화,대한민국 의식개선프로젝트 02 웹디자이너란?
웹표준화,대한민국 의식개선프로젝트 02 웹디자이너란?
 
웹표준화,대한민국 의식개선프로젝트-03 웹표준,접근성이란?
웹표준화,대한민국 의식개선프로젝트-03 웹표준,접근성이란?웹표준화,대한민국 의식개선프로젝트-03 웹표준,접근성이란?
웹표준화,대한민국 의식개선프로젝트-03 웹표준,접근성이란?
 
도서 11번가 앱(모바일 웹) 사용성 모델 분석
도서 11번가 앱(모바일 웹) 사용성 모델 분석도서 11번가 앱(모바일 웹) 사용성 모델 분석
도서 11번가 앱(모바일 웹) 사용성 모델 분석
 
웹 접근성을 고려한 UI 컴포넌트 디자인 - 캐로셀(carousel) 편
웹 접근성을 고려한 UI 컴포넌트 디자인 - 캐로셀(carousel) 편웹 접근성을 고려한 UI 컴포넌트 디자인 - 캐로셀(carousel) 편
웹 접근성을 고려한 UI 컴포넌트 디자인 - 캐로셀(carousel) 편
 
Improve CSS IR & Sprites Image Techniques for Accessibility
Improve CSS IR & Sprites Image Techniques for AccessibilityImprove CSS IR & Sprites Image Techniques for Accessibility
Improve CSS IR & Sprites Image Techniques for Accessibility
 
스마트워커를 위한 에버노트 활용
스마트워커를 위한 에버노트 활용스마트워커를 위한 에버노트 활용
스마트워커를 위한 에버노트 활용
 
일관된 컬러 매니지먼트 - Consistent Color Management
일관된 컬러 매니지먼트 - Consistent Color Management일관된 컬러 매니지먼트 - Consistent Color Management
일관된 컬러 매니지먼트 - Consistent Color Management
 
2015년 상반기 모바일 광고 트렌드 top5_1507
2015년 상반기 모바일 광고 트렌드 top5_15072015년 상반기 모바일 광고 트렌드 top5_1507
2015년 상반기 모바일 광고 트렌드 top5_1507
 
일본 게임 시장의 현황과 가능성
일본 게임 시장의 현황과 가능성일본 게임 시장의 현황과 가능성
일본 게임 시장의 현황과 가능성
 
KTH 자기소개, 지훈 PD
KTH 자기소개, 지훈 PDKTH 자기소개, 지훈 PD
KTH 자기소개, 지훈 PD
 

Similar to 질병관리본부 특강 - 모바일 “고해상도 디스플레이” 시대를 준비하다

스마트폰 전문 개발사가 바라보는 급변하는 모바일 환경
스마트폰 전문 개발사가 바라보는 급변하는 모바일 환경스마트폰 전문 개발사가 바라보는 급변하는 모바일 환경
스마트폰 전문 개발사가 바라보는 급변하는 모바일 환경
mosaicnet
 
반응형, 적응형 웹, 그 다음은? (지훈 Ux pd)
반응형, 적응형 웹, 그 다음은? (지훈 Ux pd)반응형, 적응형 웹, 그 다음은? (지훈 Ux pd)
반응형, 적응형 웹, 그 다음은? (지훈 Ux pd)
Saltlux zinyus
 
mobile platform
mobile platformmobile platform
mobile platform
ash84
 
Mobile Platform
Mobile PlatformMobile Platform
Mobile Platform
ash84
 
모바일 앱(App) 디자인과 모바일 시장변화의 이해
모바일 앱(App) 디자인과 모바일 시장변화의 이해모바일 앱(App) 디자인과 모바일 시장변화의 이해
모바일 앱(App) 디자인과 모바일 시장변화의 이해
SeungBeom Ha
 
[발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221
[발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221[발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221
[발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221
KTH, 케이티하이텔
 
지니빌더 솔루션 상품제안서
지니빌더 솔루션 상품제안서지니빌더 솔루션 상품제안서
지니빌더 솔루션 상품제안서
crossys
 
2018 GDG 인천 DevFest GoogleAndroidDevSummit
2018 GDG 인천 DevFest GoogleAndroidDevSummit2018 GDG 인천 DevFest GoogleAndroidDevSummit
2018 GDG 인천 DevFest GoogleAndroidDevSummit
Veronika Bae
 
RemoteCall+mobile pack 리모트콜 모바일팩 모바일 원격지원 제안서
RemoteCall+mobile pack 리모트콜 모바일팩 모바일 원격지원 제안서RemoteCall+mobile pack 리모트콜 모바일팩 모바일 원격지원 제안서
RemoteCall+mobile pack 리모트콜 모바일팩 모바일 원격지원 제안서
RSUPPORT
 
Smart Phone Changes The World
Smart Phone Changes The WorldSmart Phone Changes The World
Smart Phone Changes The World
Gunhee Lee
 
[HCI2011]모바일웹 UI패턴 및 UI플랫폼_김창겸,문승현_배포용
[HCI2011]모바일웹 UI패턴 및 UI플랫폼_김창겸,문승현_배포용[HCI2011]모바일웹 UI패턴 및 UI플랫폼_김창겸,문승현_배포용
[HCI2011]모바일웹 UI패턴 및 UI플랫폼_김창겸,문승현_배포용
ChangGyum Kim
 
[태블릿코드] 모바일 디바이스의 진화, 태블릿에 길을 묻다
[태블릿코드] 모바일 디바이스의 진화, 태블릿에 길을 묻다[태블릿코드] 모바일 디바이스의 진화, 태블릿에 길을 묻다
[태블릿코드] 모바일 디바이스의 진화, 태블릿에 길을 묻다
lswcap
 
아카데미를 위한 Windows Phone 7
아카데미를 위한 Windows Phone 7아카데미를 위한 Windows Phone 7
아카데미를 위한 Windows Phone 7
Seo Jinho
 
국내외모바일Os동향및플랫폼동향
국내외모바일Os동향및플랫폼동향국내외모바일Os동향및플랫폼동향
국내외모바일Os동향및플랫폼동향
Jong Jin Hong
 
차세대 기업형 브랜드 앱 개발
차세대 기업형 브랜드 앱 개발차세대 기업형 브랜드 앱 개발
차세대 기업형 브랜드 앱 개발
Seo Jinho
 
누구나 만드는 모바일앱 하이씨엘
누구나 만드는 모바일앱 하이씨엘누구나 만드는 모바일앱 하이씨엘
누구나 만드는 모바일앱 하이씨엘
VentureSquare
 
안드로이드 어플 개발 전략 10가지 2부
안드로이드 어플 개발 전략 10가지 2부안드로이드 어플 개발 전략 10가지 2부
안드로이드 어플 개발 전략 10가지 2부
mosaicnet
 
Creto business introduction 0228
Creto business introduction  0228Creto business introduction  0228
Creto business introduction 0228
Byung-Hee Oh
 
Tech Inspired Digital Marketing Creator - Creto
Tech Inspired Digital Marketing Creator - CretoTech Inspired Digital Marketing Creator - Creto
Tech Inspired Digital Marketing Creator - Creto
Byung-Hee Oh
 

Similar to 질병관리본부 특강 - 모바일 “고해상도 디스플레이” 시대를 준비하다 (20)

스마트폰 전문 개발사가 바라보는 급변하는 모바일 환경
스마트폰 전문 개발사가 바라보는 급변하는 모바일 환경스마트폰 전문 개발사가 바라보는 급변하는 모바일 환경
스마트폰 전문 개발사가 바라보는 급변하는 모바일 환경
 
반응형, 적응형 웹, 그 다음은? (지훈 Ux pd)
반응형, 적응형 웹, 그 다음은? (지훈 Ux pd)반응형, 적응형 웹, 그 다음은? (지훈 Ux pd)
반응형, 적응형 웹, 그 다음은? (지훈 Ux pd)
 
mobile platform
mobile platformmobile platform
mobile platform
 
Mobile Platform
Mobile PlatformMobile Platform
Mobile Platform
 
모바일 앱(App) 디자인과 모바일 시장변화의 이해
모바일 앱(App) 디자인과 모바일 시장변화의 이해모바일 앱(App) 디자인과 모바일 시장변화의 이해
모바일 앱(App) 디자인과 모바일 시장변화의 이해
 
[발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221
[발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221[발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221
[발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221
 
지니빌더 솔루션 상품제안서
지니빌더 솔루션 상품제안서지니빌더 솔루션 상품제안서
지니빌더 솔루션 상품제안서
 
2018 GDG 인천 DevFest GoogleAndroidDevSummit
2018 GDG 인천 DevFest GoogleAndroidDevSummit2018 GDG 인천 DevFest GoogleAndroidDevSummit
2018 GDG 인천 DevFest GoogleAndroidDevSummit
 
RemoteCall+mobile pack 리모트콜 모바일팩 모바일 원격지원 제안서
RemoteCall+mobile pack 리모트콜 모바일팩 모바일 원격지원 제안서RemoteCall+mobile pack 리모트콜 모바일팩 모바일 원격지원 제안서
RemoteCall+mobile pack 리모트콜 모바일팩 모바일 원격지원 제안서
 
Smart Phone Changes The World
Smart Phone Changes The WorldSmart Phone Changes The World
Smart Phone Changes The World
 
[HCI2011]모바일웹 UI패턴 및 UI플랫폼_김창겸,문승현_배포용
[HCI2011]모바일웹 UI패턴 및 UI플랫폼_김창겸,문승현_배포용[HCI2011]모바일웹 UI패턴 및 UI플랫폼_김창겸,문승현_배포용
[HCI2011]모바일웹 UI패턴 및 UI플랫폼_김창겸,문승현_배포용
 
[태블릿코드] 모바일 디바이스의 진화, 태블릿에 길을 묻다
[태블릿코드] 모바일 디바이스의 진화, 태블릿에 길을 묻다[태블릿코드] 모바일 디바이스의 진화, 태블릿에 길을 묻다
[태블릿코드] 모바일 디바이스의 진화, 태블릿에 길을 묻다
 
Waverobo_Intro_NEW_091210
Waverobo_Intro_NEW_091210Waverobo_Intro_NEW_091210
Waverobo_Intro_NEW_091210
 
아카데미를 위한 Windows Phone 7
아카데미를 위한 Windows Phone 7아카데미를 위한 Windows Phone 7
아카데미를 위한 Windows Phone 7
 
국내외모바일Os동향및플랫폼동향
국내외모바일Os동향및플랫폼동향국내외모바일Os동향및플랫폼동향
국내외모바일Os동향및플랫폼동향
 
차세대 기업형 브랜드 앱 개발
차세대 기업형 브랜드 앱 개발차세대 기업형 브랜드 앱 개발
차세대 기업형 브랜드 앱 개발
 
누구나 만드는 모바일앱 하이씨엘
누구나 만드는 모바일앱 하이씨엘누구나 만드는 모바일앱 하이씨엘
누구나 만드는 모바일앱 하이씨엘
 
안드로이드 어플 개발 전략 10가지 2부
안드로이드 어플 개발 전략 10가지 2부안드로이드 어플 개발 전략 10가지 2부
안드로이드 어플 개발 전략 10가지 2부
 
Creto business introduction 0228
Creto business introduction  0228Creto business introduction  0228
Creto business introduction 0228
 
Tech Inspired Digital Marketing Creator - Creto
Tech Inspired Digital Marketing Creator - CretoTech Inspired Digital Marketing Creator - Creto
Tech Inspired Digital Marketing Creator - Creto
 

More from yamoo9

SEF 2017 — 디자이너, 디자인에 코딩을 더하다
SEF  2017 — 디자이너, 디자인에 코딩을 더하다SEF  2017 — 디자이너, 디자인에 코딩을 더하다
SEF 2017 — 디자이너, 디자인에 코딩을 더하다
yamoo9
 
KTH Easing Markup DAY01
KTH Easing Markup DAY01KTH Easing Markup DAY01
KTH Easing Markup DAY01
yamoo9
 
DIK accessible technique
DIK accessible techniqueDIK accessible technique
DIK accessible technique
yamoo9
 
다이내믹 스타일시트 언어 Less framework 활용 by yamoo9
다이내믹 스타일시트 언어 Less framework 활용 by yamoo9다이내믹 스타일시트 언어 Less framework 활용 by yamoo9
다이내믹 스타일시트 언어 Less framework 활용 by yamoo9
yamoo9
 
Mac seminar - 2012
Mac seminar - 2012Mac seminar - 2012
Mac seminar - 2012
yamoo9
 
웹표준화,대한민국 의식개선프로젝트 04 웹의 탄생과 미래
웹표준화,대한민국 의식개선프로젝트 04 웹의 탄생과 미래웹표준화,대한민국 의식개선프로젝트 04 웹의 탄생과 미래
웹표준화,대한민국 의식개선프로젝트 04 웹의 탄생과 미래
yamoo9
 
Webinar mobile presentation_2010
Webinar mobile presentation_2010Webinar mobile presentation_2010
Webinar mobile presentation_2010
yamoo9
 
Webinar Kuler Presentation 2010
Webinar Kuler Presentation 2010Webinar Kuler Presentation 2010
Webinar Kuler Presentation 2010
yamoo9
 

More from yamoo9 (8)

SEF 2017 — 디자이너, 디자인에 코딩을 더하다
SEF  2017 — 디자이너, 디자인에 코딩을 더하다SEF  2017 — 디자이너, 디자인에 코딩을 더하다
SEF 2017 — 디자이너, 디자인에 코딩을 더하다
 
KTH Easing Markup DAY01
KTH Easing Markup DAY01KTH Easing Markup DAY01
KTH Easing Markup DAY01
 
DIK accessible technique
DIK accessible techniqueDIK accessible technique
DIK accessible technique
 
다이내믹 스타일시트 언어 Less framework 활용 by yamoo9
다이내믹 스타일시트 언어 Less framework 활용 by yamoo9다이내믹 스타일시트 언어 Less framework 활용 by yamoo9
다이내믹 스타일시트 언어 Less framework 활용 by yamoo9
 
Mac seminar - 2012
Mac seminar - 2012Mac seminar - 2012
Mac seminar - 2012
 
웹표준화,대한민국 의식개선프로젝트 04 웹의 탄생과 미래
웹표준화,대한민국 의식개선프로젝트 04 웹의 탄생과 미래웹표준화,대한민국 의식개선프로젝트 04 웹의 탄생과 미래
웹표준화,대한민국 의식개선프로젝트 04 웹의 탄생과 미래
 
Webinar mobile presentation_2010
Webinar mobile presentation_2010Webinar mobile presentation_2010
Webinar mobile presentation_2010
 
Webinar Kuler Presentation 2010
Webinar Kuler Presentation 2010Webinar Kuler Presentation 2010
Webinar Kuler Presentation 2010
 

질병관리본부 특강 - 모바일 “고해상도 디스플레이” 시대를 준비하다

  • 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