새로운 구글뉴스와 머티리얼 디자인
이 내용은 Google I/O Extended 2018 Seoul 에서 진행 된
- Review: Material Design from I/O (김지홍 - Design Spectrum)
- New Google News & Material design (안태완 - Google)
두 세션 내용에서 진행 된 내용을 토대로 작성되었습니다. 잘못 된 내용이 있다면 코멘트 부탁드립니다.
Material Design from I/O
김지홍 - Design Spectrum
1. 구글 I/O 현장 스케치
- 대규모 컨퍼런스를 진행하는 진행자로서 바라보면서 행사가 어떤식으로 진행되는지 눈여겨 봄. 군데군데 표식을 나타내주는 설치물이 있어 행사를 참관하는데 편리했다고 느꼈으며 설치물 하나하나에도 공통된 느낌으로 디자인되어 보기 좋았다.
- 메인 홀에서 진행 된 구글 I/O 내용과 별개로 돔에서 진행 된 내용들이 눈길을 끌었으며, 다음 방문시엔 돔에서 진행되는 것들을 좀 더 중점적으로 보는게 어떨까 생각함. 돔에서 진행 된 내용들은 주로 구글의 UI 디자이너, 프로덕트 디자이너들이 나와 자신들이 어떤 생각을 갖고 디자인을 했었는지 영상과 함께 리뷰를 해주는 것들이었는데 이것을 좀더 가까이에서 접하면서 자세히 볼 수 있어 좋았다 느낌.
2. New Material Design
- 디자이너들이 획일화 된 디자인을 해나가게 되는 것 아니냐, 일방향 된 디자인을 해나가는 것 아니냐 는 질문에 대해 구글도 인지를 하고 있던 점이었고 이번에 머테리얼 디자인 업데이트를 통해 일부지만 바뀐 점이 있다고 얘기함.
- 단순히 디자인가이드를 위한 디자인업데이트가 아니라 우리는 머테리얼 디자인을 디자이너와 디벨로퍼가 함께 무언갈 만들어 갈 수 있는 최적의 가이드를 전달하려 한 것이다 라고 전달함.
1) Material Theming
- 머테리얼 테마가 들어갔다. 현재는 스케치에서만 사용이 가능하고, 이것을 받아서 설치하면 자동 적용 됨.
- Color / Shape / Type / Icons 으로 제공되어 있으며 심볼화 된 것들을 관리할 수 있다. 기존에 인비전 크레프트에서 제공되는 플러그인이랑 크게 다르지 않으며 오히려 새로운 내용. 기존에 머테리얼 디자인 컴포넌츠가 자동으로 탑재되어 있어 이런 내용을 참고하며 디자인을 진행 했었는데 이제는 그럴 필요가 없으며 오토메이션 된 플러그인으로 적용할 수 있다는 장점이 있음.
- 컬러수정이나 쉐입수정 등 다양하게 볼 수 있는데, 기존에 심볼이 되어있는 것들이 컬러로 지정되어 있는 상태에서 이미 머테리얼디자인셋을 가지고 자신이 문제없이 편하게 바꿀 수 있다는 것이 큰 장점으로 느껴짐. 텍스트 또한 자신이 설정한 텍스트셋을 찾아서 바꿀 수 있는 형태로 되어있음. 쉐입에서는 자신들이 제너럴컴포넌트를 만들다보면 라운딩을 중요하게 생각하곤 하는데 이런것들을 자동으로 조정하여 바꿔주는 등 오토메이션이 잘 되어 있음을 확인할 수 있다. 유저들이 한번에 수정할 수 있도록 해주는 도구.
2) Gallery
- 보통 인비전이나 제플린에서 제공했던 ShareWrok / 프로젝트 조직관리인 OrganizeProjects / 피드백기능을 하는 GiveFeedback / 제플린이 가장 강력하게 제공하고 있는 InspectMode를 함께 제공하고 있다. 팀원들을 초대하고, 프로젝트에 대해서 어떤 상태인지 확인하고, 피드백을 주는 코멘트모드를 제공하고 있음.
- 가장 크게 느꼈던 장점은 기존에 다른 어플리케이션을 여러번 키고 작동하는 불필요한 소모를 많이 없애줬다는 것. 디자이너들이 디자인을 하면서 생기는 흐름을 깨지 않게 해줬다는 점이 효율적인 면에서 크게 느껴짐.
3) Material Icons
- 원래부터 시스템 아이콘을 제공하고 있던 것에서, 이번에 머테리얼 아이콘을 업데이트 하면서 5가지 형태로 구분하여 제공하는 것으로 바뀜. Filled / Outlined / Rounded / Two-Tone / Shape. 원하는 형태로 받아 사용하는 것이 가능. 다운로드시 svg, png 로 받는것이 가능하기 때문에 얼마든지 수정할 수 있다. 이런 아이콘에 대한 베리에이션을 주는 것도 기존에 구글머테리얼디자인에서 자신들이 하나의 솔루션으로 주어줬던 것들을 다섯가지 스타일로 이용, 수정이 가능하도록 해준 것.
4) New Components
- 버튼, 라벨, 수많은 컴포넌트 들 중 대표적으로 3가지가 추가되었음.
(1) AppBars : Bottom - 원래 기존에 앱바는 상단에 위치했던 것. 이번에 신규로 추가되면서 바텀에도 앱바가 추가될 수 있다는 가능성을 제시.
- 모바일 디바이스에서만 가능
- 적어도 두가지 많으면 5가지의 기능을 가지고 있어야 한다. 한가지기능 X
- 플로팅액션버튼을 꼭 함께 가져가도록 한다.
엄지손가락으로 원핸들 컨트롤 할 수 있다는 가능성이 추가되었지만 상단바와의 충돌을 어떻게 할 것인가, 모바일 디바이스 온리라는 점에 있어서 웹과의 통일성은 어떻게 할 것인가, 모바일만 특별한 것이 말이되는 것인가 하는 고민이 필요하게 됨.
(2) Backdrop - 크게 정보를 컨트롤 할 수 있는 백레이어, 주정보를 보여주는 프론트레이어로 구성이 되어있다. 앞쪽에 컨텐츠가 있고 이 컨텐트를 조절할 수 있는것이 백에 들어가 있다는 새로운 형태를 제시.
(3) Extended FAB(Floating Action Button) - 기존에 Extended 가 아예 들어갈 수 없다는 점과 가장 차별화 됨. 논텍스트에 심볼아이콘이 실제로 이용하는데에 중요한 기능을 하는 버튼임에도 불구하고 사람들이 잘못쓰는 경우가 발생했던 점을 좀더 설명적으로 풀어보려고 했다.
New Google News & Material design
안태완 - Google
1. Google News
- 무수히 많은 플랫폼을 통해서, 무수히 많은 미디어들이 다양한 형태로 유저들에게 접해주고 있다. 장소도 너무나 많은 곳에서 접해지고 있음. 지금 이 순간에도 매순간순간 엄청난 양의 컨텐츠들이 나오고있는 현 상황. 가장 큰 문제는 접할 수 있는 많은 뉴스컨텐츠중에 믿을 수 있는 컨텐츠를 찾기가 힘들다. 58%의 사람들이 제대로 된 정보를 찾기 힘들다 / 57%의 사람들은 믿기가 힘들다 하며 / 33%의 사람들은 뉴스가 도움이 되지 않는다 생각함.
- 구글의 기본 모토는 단순한 정보의 전달이 아닌 '세상의 모든 정보를 모으고 정리해서 누구에게나 유용하게 이용될 수 있도록 하는 것' 이다.
- 이제는 Mobile First 에서 AI First로 가는 시대. 더 나아가 AI 를 통해서 Human Intelligent 를 (고급인력들을 서포트) 가능케하고자 함. 다시말해 구글뉴스의 기본소스는 세상에 많은 컨텐츠를 만드는 컨텐츠큐레이터들을 서포트해줄 수 있는 상황이 아니기에 구글이 가진 기술을 통해 훌륭한 저널리스트, 퍼블리셔들을 서포트하는 것.
1) Keep up with news you care about
- Top5 는 어떻게 나오나. 세상에서 가장 중요한, 우리가 알아야할 뉴스가 헤드라인으로 나오며, 네번째 다섯번째는 우리가 가장 관심을 갖는 컨텐츠, 관심을 갖는 것 중에서도 가장 중요한 뉴스를 보여줌.
- 단순히 뉴스아티클만 다루는 것이 아닌 다양한 종류의 미디어를 제공하고 있다.
(1) For you 에서는 지역의 뉴스도 다루고 있음. 우리가 속해있는 로컬뉴스를 보여주는 등 유저중심으로 가고자 노력했으며 기본 컴포넌트는 심플하게 디자인하려 노력함. 모든순서나 컨텐츠를 픽하는데 있어서는 AI 나 머신러닝으로 최적화하여 유저 경험을 제공하고 있다. 스크롤다운시 비디오가 오토플레이되고 클릭시 비디오모드로 보는 형태로 디자인 됨.
(2) Headline 은 원하는정보, 중요한것만 보고싶다 했을 때 선택할 수 있음.
(3) Newscasts 는 컨텐츠의 프리뷰개념. 단순한 아티클만 모아놓은 형태가 아닌 어떤 한 사건에 대해 다양한 컨텐츠를 빨리 볼 수 있도록 디자인함. 컨텐츠를 탭하면 딥 다이브 할 수 있음.
2) Understand the full story
- 깊게, 다방면으로 이해할 수 있도록 해주겠다는 이념.
(1) Full Coverage 이 토픽에 대해 더 알고싶다고 생각했을때 클릭하면 딥 다이브하는 것 뿐만 아니라 비디오, 아티클, 기자의 의견, 구글서치에서 사람들이 질문하고 답변하는 내용이나 트위터의 내용 등 실시간의 여러가지 뷰 관점을 제공한다. 스토리를 동시에 보여주고 이 사건이 어떻게 발전되어지고 있는지 히스토리도 보여줌. 어떤 사건에 대해 깊게 보는 동시에 똑같이 볼 수 있도록 하고 사건을 전반적으로 이해할 수 있도록 했다.
3) Enjoy and support the news sources you love
- 사용하는 유저만이 유저가 아닌 컨텐츠를 만드는 퍼블리셔들 까지도 유저라 생각. 모든 사람들이 쉽게 찾을 수 있도록 하는 것 또한 구글뉴스의 미션이다.
(1) Newsstand. 다양한 뉴스소스와 퍼블리셔들이 소개되어있는 페이지. 좋아하는 컨텐츠를 For you 할 수 있고 이러한 행동을 지속할 수록 사용자에게 맞는 내용이 잘 정리되어 나옴.
- 구글 어카운트를 통해 어디서든 구독하면 구글이 연결하여 컨텐츠들을 제공하겠다.
2. Material theme
4) Built with Google Material theme
- 오픈소스를 기반으로 적용가능한 디자인시스템으로 빠르고 높은수준의 디지털경험을 제공하는 것.
- 단순히 디자인시스템만 제공하는 것이 아니라 디자인시스템으로 구현이 가능한 폼을 전세게 모든사람들에게 제공하겠다 하는 것.
- 메테리얼디자인의 기본형태는 그대로 가져가되 좀더 플렉시블하게 만들어보는 것과 동시에 구글프로덕트도 이런 Theme중의 하나로 다른것과 차별화를 주겠다 하여 나옴. 좀더 각 브랜드를 브랜드에 맞게 최적화 시킬 수 있도록 함.
- 어떻게 Theme 됐나. 컨텐츠를 중심으로 한 디자인, 컬러를 미니멀하게 사용하기 시작, 형태를 가운데 형태로 가져가는 디자인, 구글의 타이포- 구글산스로 ui에 적용, 구글의 브랜드컬러가 들어간 액션버튼
- 메테리얼 디자인만 빌드업 된 것이 아니라 구글 웨더아이콘 또한 새로 빌드업함.
- 구글은 브랜드를 내세우는 것이 아니라 구글의 브랜드를 빼고 컨텐츠를 중심으로 하는 디자인을 진행했다. AI 머신러닝이 최적화 될 수 있는 디자인을 하고자 함.
고마운 분들께서 구글 I/O 내용을 서울에서 리뷰해주는 자리가 있어 참석하게 됐다. 수많은 개발자들 안에서 디자인 내용까지 대기한 몇시간, 행사당일의 분위기를 느낄 수 있는 세션과 새로운 머티리얼디자인, 구글뉴스의 내용을 차례로 들으니 기다린 몇시간에 대비해 너무나 훌쩍 시간이 지나가버렸었다.
본래 나조차도 디자인을 함에 있어 머티리얼가이드를 지키기 힘들었다고 해야할까, 잘 지키지 않게 되었기에 새로운 내용에서 어떤 것을 중점으로 생각해야할까 싶었는데 몇가지 내용을 듣고 느낀점은. 뉴 구글뉴스에서 말했듯 구글이 사용자를 기반으로 한 내용중심 서비스로 나아가고 있고 이미 아이덴티티를 잡아가고 있다는 것. 그 방향에서 무척 잘 해내가고 있다는 생각이 들었으며 앞으로의 모바일 서비스에서 무엇이 중요한가 했을때 중요한 예시를 해내가고 있다는 생각이 들었다. 사용자 기반으로 된 컨텐츠, 이것을 중심으로 생각하는 UX가 충분히 배울만한 점이라 생각했다. 머티리얼디자인에서는 테마기능 탑재를 통한 간편한 수정, 아이콘의 베리에이션이 돋보였으며 가이드를 충분히 따르지 않더라도 이 기능을 디자이너들이 사용하면 좀더 디자인하는데에 집중할 수 있는 시간을 가질 수 있게 해줄 것 같았다. 또한 갤러리의 업데이트에서는 디자이너에게 뿐만 아니라 개발자와의 협업에서도 좋은 두각을 나타낼 것 같았다. 제플린의 파워를 알고 있는 만큼 이것에 대해서는 직접 사용해봐야 그 효용성이 느껴질 것 같다. 돋보이는 내용 몇가지가 있었고 이러한 것을 토대로 더 깊이 생각해봐야겠다. :)
