질병관리본부(충북 오성읍, 2014.11.11) 특강 교육자료.
일반 공무원 대상으로 현 시대의 트렌드를 짚어주고, 질병관리본부 서비스(웹/앱)에 대해 검토한 후, 발전 방향 제시. 마지막으로 고해상도 디스플레이 시대 도래에 따른 비트맵 콘텐츠 품질 향상 방법과 플랫폼에 따른 준비 방법을 기술.
2016 Media Keyword
- 2016년 "Mobile Only"의 시대를 경험하다.
2017 Core Trend Keyword
- 2017년 디지털 광고업계 종사자들이 뽑은 트렌드 키워드
2017 Mobile All
- 2017년 "모든 미디어 중심에는 모바일이 있다"
1. 모바일 영상으로 변모하는 미디어 콘텐츠
- TV 프로그램의 모바일화 : TV 방송사들이 모바일 콘텐츠 전용 제작 채널 보유, 서비스 오픈
- 모바일 최적화 광고 : 기존 TV, 온라인 광고가 모바일 환경에 최적화 된 광고 상품으로 진화함
- V커머스 : TV 홈쇼핑과 온라인 커머스가 모바일 영상화 된 ‘V 커머스’ 탄생
2. 모바일 결제와 O2O 서비스 시너지 창출
- 모바일 결제 현황 : 다양한 간편결제 서비스가 출시되고, 업체 간 경쟁적인 마케팅을 진행하면서 간편결제 이용경험의 비중이 높게 나타남
- 오프라인 시너지 창출 : O2O 사업의 지속적인 오프라인 진출 및 확장으로 인해 모바일 결제의 비중이 점차 증대되는 추세. 앞으로의 시너지가 기대됨
3. 데이터 기반 광고 플랫폼 도입 확산
- 애드테크의 본격화 : 모바일 광고의 성장, 매체의 다변화 등 디지털 환경변화에 따른 애드테크의 본격화
- 페이스북, 구글 광고 약진 : 글로벌 플랫폼 사업자인 페이스북, 구글 등이 모바일 기반의 프로그래매틱 광고 시장을 선도함
- 국내 도입 확산 : 모바일 시장의 지속적인 성장과 글로벌 사업자들의 약진으로 데이터에 기반한 광고 플랫폼 시장이 본격 확산될 것으로 전망
4. Live 영상 플랫폼 활용 증가
- 라이브 영상 현황 : 'Live’ 기능을 강화한 영상 플랫폼이 확산되고, 메신저 및 VR 등의 기능들까지 접목되어 더 적극적인 활용이 예상됨
- 다양한 라이브 영상 : 미디어 및 엔터 분야의 셀럽들이 라이브 영상을 활용한 콘텐츠 제작해 소통을 강화함
- 에이전시 및 마케터 대부분이 실시간 스트리밍 동영상 광고에 투자한다는 글로벌 조사
5. 생활플랫폼으로 확대되는 모바일 메신저
- 이미 메신저는 모바일 시대를 대표하는 주요한 의사소통 수단으로 정착함
- 다양한 영역의 서비스로 확장되며 생활 플랫폼으로 진화 중
6. 콘텐츠 중신 마케팅 확산
- Multi Use Multi Platform : 특정 플랫폼에 종속되지 않는 경쟁력 있는 콘텐츠의 제작
- 콘텐츠 마케팅 믹스 : 콘텐츠의 힘을 활용한 마케팅과 타겟팅이 더욱 활성화 될 것으로 전망
7. TV와 경계가 희미해지는 동영상 소비
- 동영상으로 소비되는 TV : 모바일을 통한 TV 콘텐츠의 시청 및 증가
- TV로 보는 모바일 영상 : IPTV 내 콘텐츠 채널 편성, 앱/OTT 활용한 온라인 콘텐츠의 TV 수신 확대 등...
2016 Media Keyword
- 2016년 "Mobile Only"의 시대를 경험하다.
2017 Core Trend Keyword
- 2017년 디지털 광고업계 종사자들이 뽑은 트렌드 키워드
2017 Mobile All
- 2017년 "모든 미디어 중심에는 모바일이 있다"
1. 모바일 영상으로 변모하는 미디어 콘텐츠
- TV 프로그램의 모바일화 : TV 방송사들이 모바일 콘텐츠 전용 제작 채널 보유, 서비스 오픈
- 모바일 최적화 광고 : 기존 TV, 온라인 광고가 모바일 환경에 최적화 된 광고 상품으로 진화함
- V커머스 : TV 홈쇼핑과 온라인 커머스가 모바일 영상화 된 ‘V 커머스’ 탄생
2. 모바일 결제와 O2O 서비스 시너지 창출
- 모바일 결제 현황 : 다양한 간편결제 서비스가 출시되고, 업체 간 경쟁적인 마케팅을 진행하면서 간편결제 이용경험의 비중이 높게 나타남
- 오프라인 시너지 창출 : O2O 사업의 지속적인 오프라인 진출 및 확장으로 인해 모바일 결제의 비중이 점차 증대되는 추세. 앞으로의 시너지가 기대됨
3. 데이터 기반 광고 플랫폼 도입 확산
- 애드테크의 본격화 : 모바일 광고의 성장, 매체의 다변화 등 디지털 환경변화에 따른 애드테크의 본격화
- 페이스북, 구글 광고 약진 : 글로벌 플랫폼 사업자인 페이스북, 구글 등이 모바일 기반의 프로그래매틱 광고 시장을 선도함
- 국내 도입 확산 : 모바일 시장의 지속적인 성장과 글로벌 사업자들의 약진으로 데이터에 기반한 광고 플랫폼 시장이 본격 확산될 것으로 전망
4. Live 영상 플랫폼 활용 증가
- 라이브 영상 현황 : 'Live’ 기능을 강화한 영상 플랫폼이 확산되고, 메신저 및 VR 등의 기능들까지 접목되어 더 적극적인 활용이 예상됨
- 다양한 라이브 영상 : 미디어 및 엔터 분야의 셀럽들이 라이브 영상을 활용한 콘텐츠 제작해 소통을 강화함
- 에이전시 및 마케터 대부분이 실시간 스트리밍 동영상 광고에 투자한다는 글로벌 조사
5. 생활플랫폼으로 확대되는 모바일 메신저
- 이미 메신저는 모바일 시대를 대표하는 주요한 의사소통 수단으로 정착함
- 다양한 영역의 서비스로 확장되며 생활 플랫폼으로 진화 중
6. 콘텐츠 중신 마케팅 확산
- Multi Use Multi Platform : 특정 플랫폼에 종속되지 않는 경쟁력 있는 콘텐츠의 제작
- 콘텐츠 마케팅 믹스 : 콘텐츠의 힘을 활용한 마케팅과 타겟팅이 더욱 활성화 될 것으로 전망
7. TV와 경계가 희미해지는 동영상 소비
- 동영상으로 소비되는 TV : 모바일을 통한 TV 콘텐츠의 시청 및 증가
- TV로 보는 모바일 영상 : IPTV 내 콘텐츠 채널 편성, 앱/OTT 활용한 온라인 콘텐츠의 TV 수신 확대 등...
A. 2월광고비현황:전체
2014년 2월 전체 온라인 광고 집행 금액은 약 531억 원으로 집계
전월(2014년 1월, 569억 원) 대비 6.6% 감소, 전년 동기(2013년 2월, 509억 원) 대비 4.5% 증가한 수치
B. 2월광고비현황:업종
Top10 내 중상위 업종 광고비는 대부분 하락세로 전환, 유통 업종은 전월 대비 광고비 15% 감소했으나 순위 유지 봄 시즌을 맞아 화장품 및 보건용품과 패션/의류 업종의 광고비가 각각 52%, 97% 증가하며 순위 상승
건설,건재 및 부동산 업종은 분양광고 집행 증가로 광고비 17% 상승하며 순위권 진입
C. 2월광고비현황:광고주
이베이코리아는 지난 달에 이어 가장 많은 광고비를 집행했으나, 광고 집행 규모는 26% 감소
아모레퍼시픽(라네즈, 에뛰드, 프리메라, 마몽드 등)은 신제품 출시 및 관련 이벤트로 광고비 4배 정도 급증, Top10 내 신규 진입 현대캐피탈(현대캐피탈다이렉트론), 삼성전자(갤럭시3), 한국피자헛(피자헛) 등은 광고비 증가하며 순위 상승
B. 뉴스 서비스의 부상 (1) 페이스북, 뉴스 서비스 앱 ‘페이퍼’ 출시
최근 SNS를 통한 뉴스 접촉이 눈에 띄게 증가하면서 대표 SNS 페이스북 역시 뉴스 제공 앱 ‘페이퍼’ 출시
약 45개의 뉴스 매체에서 제공되는 뉴스를 플립보드* 형식이 아닌 페이퍼 에디터가 직접 선별하여 노출하는 방식 적용
야후 역시 뉴스 다이제스트를 출시하여 뉴스 요약 서비스를 제공하고 있으며, 구글도 전세계 1,900 여개 언론사 뉴스를 한 곳에서 볼 수 있는 앱
뉴스 스탠드 출시
B. 뉴스 서비스의 부상 (2) 뉴스 콘텐츠의 가능성
뉴스 콘텐츠에 대한 관심이 늘어나면서 다양한 분야의 매체에서 뉴스 서비스를 제공하려는 움직임 보임
글로벌 쇼핑 매체인 아마존이나 이베이도 주요 매체를 인수하거나 자체 뉴스 매체 창간 계획을 밝히기도 함
국내에서는 카카오톡이 뉴스 서비스 도입 예정, 향후 모바일 뉴스 생태계에 새로운 영향을 끼칠 것으로 전망
이러한 뉴스의 인기는 매일 생성되는 흥미로운 콘텐츠가 새로운 뉴스 소비 플랫폼인 모바일의 성장과 맞물리며 더욱 각광 받고 있기 때문으로 보임
A. 2월트래픽동향:초기페이지top5
전월 대비 월간 일수 감소로 인터넷 이용과 활동성이 하락하면서 초기 페이지 트래픽은 전체적으로 감소세 11번가는 개인정보 유출 이슈 등으로 지난 달 방문자수가 급증했던 KB국민은행과 다시 순위 변동
초기면 PV는 대부분 매체에서 하락세를 보였으나, 20-30세대의 활동성이 증가한 다음은 보합세 유지
A. 2월광고비현황:전체
2014년 2월 전체 온라인 광고 집행 금액은 약 531억 원으로 집계
전월(2014년 1월, 569억 원) 대비 6.6% 감소, 전년 동기(2013년 2월, 509억 원) 대비 4.5% 증가한 수치
B. 2월광고비현황:업종
Top10 내 중상위 업종 광고비는 대부분 하락세로 전환, 유통 업종은 전월 대비 광고비 15% 감소했으나 순위 유지 봄 시즌을 맞아 화장품 및 보건용품과 패션/의류 업종의 광고비가 각각 52%, 97% 증가하며 순위 상승
건설,건재 및 부동산 업종은 분양광고 집행 증가로 광고비 17% 상승하며 순위권 진입
C. 2월광고비현황:광고주
이베이코리아는 지난 달에 이어 가장 많은 광고비를 집행했으나, 광고 집행 규모는 26% 감소
아모레퍼시픽(라네즈, 에뛰드, 프리메라, 마몽드 등)은 신제품 출시 및 관련 이벤트로 광고비 4배 정도 급증, Top10 내 신규 진입 현대캐피탈(현대캐피탈다이렉트론), 삼성전자(갤럭시3), 한국피자헛(피자헛) 등은 광고비 증가하며 순위 상승
B. 뉴스 서비스의 부상 (1) 페이스북, 뉴스 서비스 앱 ‘페이퍼’ 출시
최근 SNS를 통한 뉴스 접촉이 눈에 띄게 증가하면서 대표 SNS 페이스북 역시 뉴스 제공 앱 ‘페이퍼’ 출시
약 45개의 뉴스 매체에서 제공되는 뉴스를 플립보드* 형식이 아닌 페이퍼 에디터가 직접 선별하여 노출하는 방식 적용
야후 역시 뉴스 다이제스트를 출시하여 뉴스 요약 서비스를 제공하고 있으며, 구글도 전세계 1,900 여개 언론사 뉴스를 한 곳에서 볼 수 있는 앱
뉴스 스탠드 출시
B. 뉴스 서비스의 부상 (2) 뉴스 콘텐츠의 가능성
뉴스 콘텐츠에 대한 관심이 늘어나면서 다양한 분야의 매체에서 뉴스 서비스를 제공하려는 움직임 보임
글로벌 쇼핑 매체인 아마존이나 이베이도 주요 매체를 인수하거나 자체 뉴스 매체 창간 계획을 밝히기도 함
국내에서는 카카오톡이 뉴스 서비스 도입 예정, 향후 모바일 뉴스 생태계에 새로운 영향을 끼칠 것으로 전망
이러한 뉴스의 인기는 매일 생성되는 흥미로운 콘텐츠가 새로운 뉴스 소비 플랫폼인 모바일의 성장과 맞물리며 더욱 각광 받고 있기 때문으로 보임
A. 2월트래픽동향:초기페이지top5
전월 대비 월간 일수 감소로 인터넷 이용과 활동성이 하락하면서 초기 페이지 트래픽은 전체적으로 감소세 11번가는 개인정보 유출 이슈 등으로 지난 달 방문자수가 급증했던 KB국민은행과 다시 순위 변동
초기면 PV는 대부분 매체에서 하락세를 보였으나, 20-30세대의 활동성이 증가한 다음은 보합세 유지
Improve CSS IR & Sprites Image Techniques for Accessibilityyamoo9
[12.09] 제10회 2014 정보접근성 동향 세미나 발표 자료
Windows High Contrast Mode 감지 및 CSS 활성화 Images 비활성화 상태 체크 감지 스크립트, ImproveIR.js를 활용한 IR 테크닉 접근성 향상
코드 소스 다운로드
https://github.com/yamoo9/Improve-IR-Accessible-Tech
<2015년>
상반기 모바일 주요 트렌드 Top 5
1. 스낵 컬쳐 소비 문화 증가에 따른 서비스 출시
2. 모바일 띠배너 크기의 확대
3. 동영상 광고 사업자의 다양화
4. 리워드 유형의 변화
5. 사회·문화 주류에 따른 각종 특화 매체 출현
Appendix
> 모바일 서비스 주요 이슈
> 모바일 광고 매체 주요 이슈
지니빌더 솔루션 상품제안서입니다.
웹과 모바일어플리케이션을
기존방식보다 빠르고 합리적인 가격으로
구축할 수 있습니다.
신규 사업을 위한 홈페이지와 어플리케이션 개발
콘텐츠만 가지고 있고 온라인으로 판매가 어려운 업체
노후화된 홈페이지와 최신 기술적용이 필요한 홈페이지
N-Screen 서비스를 준비하시는 업체들에게
지니빌더를 추천드립니다.
<p><font>한동호 안드로이드사이드 운영자</font></p><div><font>01.안드로이드 기능을 적극 활용하라 02.남의 콘텐츠를 활용하는 어플 개발은 자제하라 03.무료/유료 선택을 현명히 하라 04.Web-based를 고려하라 05.지속적으로 활용할 수 있는 어플을 만들어라 06.단일 상점이 아닌 백화점 같은 어플을 만들어라 07.Fun과 Social을 가미하라 08.안드로이드 버전 및 해상도를 고려하라 09.어플 홍보 방법에 대해서 고민하라 10.개발은 혼자가 아닌 여럿이 함께 하라</font></div><div> </div><div><font>2010 공개SW 개발자대회 1차 기술세미나</font></div><div><font>주제: Open Your Mind, Show Your Dream</font></div><div><font>주최: 지식경제부가</font></div><div><font>주관: 정보통신산업진흥원, 한국공개SW협회</font></div>
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 모던 디자인
비주얼 트렌드 &
테크
고해상도(고밀도) 디스플레이
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/해상도/승수
기술이 발전함에 따라 디스플레이 환경은 큰 폭으로 변화되었습니다.
고해상도 디스플레이의 등장으로 스크린을 처리하는 보다 전문적인 기술에 대한 공부가 필요합니다.
앱 디자인 에셋 제작 방법 웹과 달리 각 메이저 플랫폼을 고려하여 환경을 이해하고 디자인해야 합니다.