컨퍼런스 :: Google I/O Extended 2018 Seoul

구글 I/O 에서 다룬 내용과 참여후기를 공유하는 GDG (Google Developers Group) Korea 의 컨퍼런스를 다녀왔다.

디자인과 관련된 두 가지 섹션을 간단하게 정리해보고자 한다.

#4. Review: Material Design from I/O (김지홍 - Design Spectrum)

1. Material Theming

스케치 플러그인 테마 에디터를 제공하여 쉽게 머터리얼 디자인을 사용할 수 있게 함

Color / Shape / Type / Icons 등 심볼 관리를 효율적으로 할 수 있음

https://material.io/tools/theme-editor/

2. Gallery

제플린과 유사한 어플리케이션, 플러그인 > 갤러리 업로드를 통해 공유 가능 

한 가지 어플리케이션을 사용함으로써 디자인 집중도를 높여줄 수 있다는 평

• Share work

• Organize projects

• Give feedback

• Inspect Mode

https://material.io/tools/gallery/

3. Material Icon

기존 solid 타입의 아이콘 스타일 1가지에서 5가지로 다양해짐

• Filled

• Outlined

• Rounded

• Two tone

• Sharp

https://material.io/tools/icons/?style=baseline

4. New Components

App bars

위에서만 사용하던 앱바를 아래에서도 사용 가능하도록 함

• 모바일 디바이스에서만 사용 가능

• 2개~5개의 기능이 들어가야함

• 플로팅 액션 버튼(FAB) 함께 들어가야함  

손과 가깝다는 장점이 있지만,

하단바와의 충돌 문제, 웹/모바일의 통일성 문제 등의 케이스 스터디가 필요

https://material.io/design/components/app-bars-bottom.html

Back drop

• Back layer : Actions / Context / Control / inform F.L

• Front layer : Contents

주기능은 프론트 레이어에, 프론트 정보에 대한 컨트롤 기능은 백레이어에 사용

https://material.io/design/components/backdrop.html#usage

FAB

기존 플로팅 액션 버튼은 심볼 아이콘만 들어간 논텍스트 원형의 형태였는데, 오해를 하거나 잘못 사용한 경우들이 생겼음

텍스트 정보를 넣을 수 있도록 확장함

https://material.io/design/components/buttons-floating-action-button.html

#5. New Google News & Material Design (안태완 - 구글)

구글뉴스가 왜 중요한가?

수 많은 뉴스 컨텐츠 중 가장 큰 문제는 'Fake News'

믿을 수 있는 퀄리티 정보를 접하는 것이 어려움

미국 리서치

58% 제대로 된 정보를 찾기 힘들다

57% 찾았더라도 믿기가 힘들다

33% 뉴스를 보면 도움이 되지 않고, 부정적이고 우울해진다

<구글의 방향>

세상의 모든 정보를 모으고 정확하게 정리해서 누구에게나 유용하게 이용될 수 있도록 하는 것

Mobile Firlst to AI First 

구글 뉴스에서는 저널리스트와 콘텐츠 크리에이트브와 같은 고급인력(=컨텐츠)들을 위해 AI로 서포트 하고자함

구글 뉴스와 머터리얼 디자인

1. Keep up with news you care about

Top 5 Briefing 

구글에서 추천하는 TOP 5를 탑에 노출

• 1~2. 중요한 이슈 헤드라인

• 3. 지역 뉴스

• 4~5. 관심 뉴스

뉴스 아티클, 비디오, 팟캐스트등의 다양한 미디어 제공 로컬뉴스

For You

메인 섹션이 되는 곳 - 뉴스 추천, 지역 뉴스

심플한 컴포넌트 디자인

AI, 머신러닝 최적화한 Personal UX

스크롤시 영상 플레이, 클릭시 비디오 모드

Headline

전통적인 뉴스폼

퍼스널을 원치않는 유저들을 위해 제공

Newscasts

프리뷰 개념

트위터, 비디오 아티클등의 다양한 컨텐츠를 빠르게 접할 수 있도록 함

아티클에서 중요한 내용을 뽑아 관련 

2. Understand the full story

깊고 다양한 접근성

사건에 대한 풀컨텍스 형태를 제공 

>> 비디오, 팩트 체크가 된 컨텐츠, 기자 의견, 서치 질문/답변, 트위터 관련 글, 사건의 히스토리...

개인 별이 아닌 모든이가 쉽게 공통적으로 찾아볼 수 있도록 함

3. Enjoy and support the news sources you love

News Stand

뉴스 소스와 퍼블리셔들이 소개되는 페이지

매거진 구매와 컨텐츠 정보 좋아요를 할 수록 맞춤 정보를 받을 수 있음

Subscribe with Google

구글 Account를 통해 Search, App에서 Subscribe한 컨텐츠들을 연결하고, 이를 토대로 Google News에 관련 컨텐츠를 제공하는 UX 구성

4. Built with Google Material theme

Material theme의 대표 예시 디자인 : 구글뉴스

디자인 시스템 + 디벨로퍼 = 빌드 가능한 폼을 전세계 제공

Material theme 이란?

머터리얼 디자인을 기본으로 개개인의 제품들이 브랜드화/최적화가 가능하도록 유연한 테마를 제공하는 것

구글 역시 테마 중 하나 

Material theme 적용된 제품

• G메일

• 구글뉴스

• G페이

• 구글 홈

어떻게 테마화되었나?

• 컨텐츠를 센터화(강조)하기 위해  white space 사용

• 브랜드 컬러 최소화

• 디자인 센터 (Full Coverage 의 타이틀, 뉴스...)

• Google Sans 사용, (원형 쉐이프 베이스) 

• 브랜드 컬러가 들어간 Branded Action 추가 (뉴스 +버튼, 음성 버튼...)

• 새로운 weather icon

구글 브랜드보다 컨텐츠에 집중할 수 있고, AI 머신러닝이 최적화 될 수 있도록 디자인