gkac 2014 nov. - the beautiful design collection 살펴보기
DESCRIPTION
GDG Korea Android Conference (11월) 세션 자료입니다. 세션 영상: http://www.youtube.com/watch?v=kh_FC47ZlIITRANSCRIPT
![Page 1: GKAC 2014 Nov. - The Beautiful Design Collection 살펴보기](https://reader033.vdocuments.net/reader033/viewer/2022052910/559aa11b1a28ab02098b475a/html5/thumbnails/1.jpg)
The Beautiful Design Collection- 좋은 앱을 넘어 위대한 앱으로
김준호,소프트웨어 엔지니어, (주)모글루
# GDG Korea Android Conference
![Page 2: GKAC 2014 Nov. - The Beautiful Design Collection 살펴보기](https://reader033.vdocuments.net/reader033/viewer/2022052910/559aa11b1a28ab02098b475a/html5/thumbnails/2.jpg)
The Beautiful Design Collection?
![Page 3: GKAC 2014 Nov. - The Beautiful Design Collection 살펴보기](https://reader033.vdocuments.net/reader033/viewer/2022052910/559aa11b1a28ab02098b475a/html5/thumbnails/3.jpg)
![Page 4: GKAC 2014 Nov. - The Beautiful Design Collection 살펴보기](https://reader033.vdocuments.net/reader033/viewer/2022052910/559aa11b1a28ab02098b475a/html5/thumbnails/4.jpg)
the goal of this collection is to highlight beautiful apps with masterfully crafted design details
such as beautiful presentation of photos, crisp and meaningful layout and typography, and delightful yet intuitive gestures and transitions.
![Page 5: GKAC 2014 Nov. - The Beautiful Design Collection 살펴보기](https://reader033.vdocuments.net/reader033/viewer/2022052910/559aa11b1a28ab02098b475a/html5/thumbnails/5.jpg)
The Beautiful Design Collection
2013 w 2014 s2013 s
Gogobot
Yahoo Digest
Lumosity
…
Yahoo Weather
Etsy
Timely
…
NYTimes
Timer
…
![Page 6: GKAC 2014 Nov. - The Beautiful Design Collection 살펴보기](https://reader033.vdocuments.net/reader033/viewer/2022052910/559aa11b1a28ab02098b475a/html5/thumbnails/6.jpg)
What’s good about it?
![Page 7: GKAC 2014 Nov. - The Beautiful Design Collection 살펴보기](https://reader033.vdocuments.net/reader033/viewer/2022052910/559aa11b1a28ab02098b475a/html5/thumbnails/7.jpg)
- 사용자 경험의 극대화
What’s good about it?
- 끊김없는 사용 경험
- 맥락 전환의 최소화
![Page 8: GKAC 2014 Nov. - The Beautiful Design Collection 살펴보기](https://reader033.vdocuments.net/reader033/viewer/2022052910/559aa11b1a28ab02098b475a/html5/thumbnails/8.jpg)
- 사용자 경험의 극대화
- 끊김없는 사용 경험
What’s good about it?
- 맥락 전환의 최소화
![Page 9: GKAC 2014 Nov. - The Beautiful Design Collection 살펴보기](https://reader033.vdocuments.net/reader033/viewer/2022052910/559aa11b1a28ab02098b475a/html5/thumbnails/9.jpg)
듀오링고 - 상태 & 네비게이션 바 감추기
사용자 경험의 극대화
경험을 분산시키는 알림 아이콘들
![Page 10: GKAC 2014 Nov. - The Beautiful Design Collection 살펴보기](https://reader033.vdocuments.net/reader033/viewer/2022052910/559aa11b1a28ab02098b475a/html5/thumbnails/10.jpg)
듀오링고 - 상태 & 네비게이션 바 감추기
사용자 경험의 극대화
![Page 11: GKAC 2014 Nov. - The Beautiful Design Collection 살펴보기](https://reader033.vdocuments.net/reader033/viewer/2022052910/559aa11b1a28ab02098b475a/html5/thumbnails/11.jpg)
상태 & 네비게이션 바 감추기 구현
사용자 경험의 극대화
![Page 12: GKAC 2014 Nov. - The Beautiful Design Collection 살펴보기](https://reader033.vdocuments.net/reader033/viewer/2022052910/559aa11b1a28ab02098b475a/html5/thumbnails/12.jpg)
사용자 경험의 극대화 Etsy - 배경 블러 처리 (1)
사용자가 현재 관심 있는 콘텐츠에 오롯이 집중할 수 있도록
![Page 13: GKAC 2014 Nov. - The Beautiful Design Collection 살펴보기](https://reader033.vdocuments.net/reader033/viewer/2022052910/559aa11b1a28ab02098b475a/html5/thumbnails/13.jpg)
사용자 경험의 극대화 Etsy - 배경 블러 처리 (2)
사용자가 현재 관심 있는 콘텐츠에 오롯이 집중할 수 있도록
![Page 14: GKAC 2014 Nov. - The Beautiful Design Collection 살펴보기](https://reader033.vdocuments.net/reader033/viewer/2022052910/559aa11b1a28ab02098b475a/html5/thumbnails/14.jpg)
사용자 경험의 극대화 야후 날씨 - 배경 블러
사용 흐름에 최적화된 화면 변화
![Page 15: GKAC 2014 Nov. - The Beautiful Design Collection 살펴보기](https://reader033.vdocuments.net/reader033/viewer/2022052910/559aa11b1a28ab02098b475a/html5/thumbnails/15.jpg)
사용자 경험의 극대화 FIFA - 배경 블러 & 텍스트 페이드 인
부드럽게 관심을 환기하는 화면 변화
![Page 16: GKAC 2014 Nov. - The Beautiful Design Collection 살펴보기](https://reader033.vdocuments.net/reader033/viewer/2022052910/559aa11b1a28ab02098b475a/html5/thumbnails/16.jpg)
http://nicolaspomepuy.fr/blur-effect-for-android-design/
사용자 경험의 극대화
https://github.com/PomepuyN/BlurEffectForAndroidDesign
블러 효과 구현
![Page 17: GKAC 2014 Nov. - The Beautiful Design Collection 살펴보기](https://reader033.vdocuments.net/reader033/viewer/2022052910/559aa11b1a28ab02098b475a/html5/thumbnails/17.jpg)
사용자 경험의 극대화 블러 효과 구현
1. 원본 이미지, 블러처리된 이미지 준비
![Page 18: GKAC 2014 Nov. - The Beautiful Design Collection 살펴보기](https://reader033.vdocuments.net/reader033/viewer/2022052910/559aa11b1a28ab02098b475a/html5/thumbnails/18.jpg)
사용자 경험의 극대화 블러 효과 구현
2. 스크롤에 맞춰 블러처리된 이미지의 알파 값을 조정
![Page 19: GKAC 2014 Nov. - The Beautiful Design Collection 살펴보기](https://reader033.vdocuments.net/reader033/viewer/2022052910/559aa11b1a28ab02098b475a/html5/thumbnails/19.jpg)
What’s good about it?
- 사용자 경험의 극대화
- 끊김없는 사용 경험
- 맥락 전환의 최소화
![Page 20: GKAC 2014 Nov. - The Beautiful Design Collection 살펴보기](https://reader033.vdocuments.net/reader033/viewer/2022052910/559aa11b1a28ab02098b475a/html5/thumbnails/20.jpg)
끊김없는 사용 경험 페이스북 - 이미지 줌 애니메이션
사용자의 시선, 집중을 한 순간도 잃지 않는다.
![Page 21: GKAC 2014 Nov. - The Beautiful Design Collection 살펴보기](https://reader033.vdocuments.net/reader033/viewer/2022052910/559aa11b1a28ab02098b475a/html5/thumbnails/21.jpg)
끊김없는 사용 경험 대조 - 트위터, 포스퀘어
![Page 22: GKAC 2014 Nov. - The Beautiful Design Collection 살펴보기](https://reader033.vdocuments.net/reader033/viewer/2022052910/559aa11b1a28ab02098b475a/html5/thumbnails/22.jpg)
끊김없는 사용 경험 에어비엔비 - 이미지 애니메이션
사용 흐름의 자연스러운 연결
![Page 23: GKAC 2014 Nov. - The Beautiful Design Collection 살펴보기](https://reader033.vdocuments.net/reader033/viewer/2022052910/559aa11b1a28ab02098b475a/html5/thumbnails/23.jpg)
What’s good about it?
- 사용자 경험의 극대화
- 끊김없는 사용 경험
- 맥락 전환의 최소화
![Page 24: GKAC 2014 Nov. - The Beautiful Design Collection 살펴보기](https://reader033.vdocuments.net/reader033/viewer/2022052910/559aa11b1a28ab02098b475a/html5/thumbnails/24.jpg)
맥락 전환의 최소화Etsy - 웹뷰 사용
경험의 맥락이 끊어지지 않도록
![Page 25: GKAC 2014 Nov. - The Beautiful Design Collection 살펴보기](https://reader033.vdocuments.net/reader033/viewer/2022052910/559aa11b1a28ab02098b475a/html5/thumbnails/25.jpg)
맥락 전환의 최소화링크 버블 - 플로팅 버튼
![Page 26: GKAC 2014 Nov. - The Beautiful Design Collection 살펴보기](https://reader033.vdocuments.net/reader033/viewer/2022052910/559aa11b1a28ab02098b475a/html5/thumbnails/26.jpg)
감사합니다
![Page 27: GKAC 2014 Nov. - The Beautiful Design Collection 살펴보기](https://reader033.vdocuments.net/reader033/viewer/2022052910/559aa11b1a28ab02098b475a/html5/thumbnails/27.jpg)
김준호
여러분 생각을 들려주세요
- 혹시 재밌는 사례를 더 알고 계신가요?- 제 발표 내용은 어땠나요?