서비스 기획·디자인/패스트캠퍼스 챌린지

구글 프로덕트 디자이너의 강의 (패스트캠퍼스 챌린지 1일차)

cogt 2021. 11. 1. 23:06

안녕하세요. 첫 티스토리 글을 올리게 된 cogt 입니다.

저는 패스트캠퍼스 수강료 100% 환급 챌린지에 도전하게 되었는데요, 마침 제가 지난달부터 구글 머테리얼 디자인과 디자인 시스템, UI UX 디자인을 공부하고 있던 차에 패스트캠퍼스에서 이렇게 좋은 기회를 제공해주셔서 바로 신청했어요. 제가 수강할 강의는 패스트캠퍼스의 실리콘밸리 시리즈 강의 중 하나인 '구글 Material Design 시스템을 활용한 Youtube for Learning 앱디자인프로젝트'입니다. 공부한 것들을 잘 정리하고 제것으로 만들어서, 티스토리에 재미있게 공유해볼게요.

 

오늘부터 더욱더 열심히 공부해서 11월 마지막 날에는 본 강의를 완강하는 것은 물론, 연사님이 알려주시는 모든 것들을 체화하는 것을 목표로! 열심히 달려보겠습니다.

 

 

구글 Material Design 시스템을 활용한 Youtube for Learning 앱디자인 프로젝트

해당 강의는 10시간 33분짜리 강의로 평생소장 가능, 아무때나 시청 가능한 강의입니다.

강의 평생 소장이 가능하다는 점과 가격이 합리적이라는 점은 제가 패스트캠퍼스를 계속해서 이용하고있는 가장 큰 이유 중 하나에요.

 

저는 디자인 전공생이지만, 대학에서 가르쳐주지 않는 부분들도 확실히 습득하고, 디자인 이론도 제대로 공부해보고 싶다는 갈증을 느껴 혼자서도 꾸준히 디자인 공부를 해오면서 콜로소, 클래스101, 탈잉 등 디자인 강의가 있는 거의 모든 온라인강의 서비스를 사용해봤는데요.

 

패스트캠퍼스는 날이 갈수록 강의 퀄리티가 높아지고 가격도 늘 합리적이라 이번이 벌써 7번째 강의 구매입니다!

타 사이트도 각각의 장단점이 있는데 그건 나중에 다른 카테고리에서 다뤄보도록 할게요.

(아 참, 패스트캠퍼스에서 하나 아쉬운 점은 도그냥 님의 서비스 기획 강의가 없어졌다는 점이에요. 이유는 모르겠지만,,)

 

잡설이 길었네요. 그럼 시작하겠습니다!

 

본 강의의 목표는 좋은 디자인에 대한 기준을 세우고, 좋은 디자이너가 되기 위해 무엇을 어떻게 배워야하는지 학습하는 것입니다.

더불어 기존 디자인 분석과 카피를 통해 디자인을 보는 눈을 키우고, 어떤 디자인이든 원하는 것을 만들어 낼 수 있는 능력을 키우는 것.

디자인 프로세스의 각 과정이 필요한 이유와 목적을 인지하고, 프로젝트에 맞게 나만의 디자인 프로세스를 설립하는 것까지가 주요 목표에요.

 

본 강의를 진행해주시는 '길버트 한' 강사님은 산업 공학을 전공하고, LG 전자에 UX디자이너로 첫 디자인 커리어를 밟고 이후에 카네기멜론 디자인 스쿨 인터렉션디자인과로 진학하여 석사 학위(master degree)를 따셨습니다. 이후엔 마이크로소프트, 디즈니를 거쳐 현재는 구글에 계십니다. 한국 LG 전자에서는 UX디자인의 기초를 쌓았다면 카네기멜론 디자인 스쿨을 졸업한 이후부터는 쭉 미국에서 활동하셨는데요. 마이크로소프트에서 UX designer로 일할 때에는 아무래도 외국 직장에 다니는 경험이 처음이기도 하고 한국과 다른 부분들이 많아 힘든 시기를 보내고 고초를 겪으셨다고 합니다. 이후엔 디즈니에서는 조금 더 재미있는 작업을 하고 싶어서 Park Experience and Product 팀에 들어가십니다. 그리고 구글에는 Google News로 입사하여 현재는 Google Assistant 팀에서 일을 하고 계십니다.

 

혹시 궁금하신 분들이 계실까봐 적어두자면, 연사님이 진행하신 주요 프로젝트는 이와 같습니다!

 

-GoogleAssistant/ Family Note 기능 런칭

-GoogleNews/ 구글뉴스 Web, iOS, Android UX 디자인

-GoogleNews/ 축구 토너먼트 비주얼라이제이션

-GoogleNews/ Google News Widget 디자인

-Disney/ 디즈니 리조트 디지털 키 디자인 리드

-Disney/ 상하이 디즈니랜드 모바일앱 음식 주문 UX 디자인

-Microsoft/ Web App Launcher 디자인

-Microsoft/ Microsoft word에서 Researcher 기능 디자인

 

 

본 강의에서는 이론 강의/ 실습 강의/ 마무리로 연결되는 커리큘럼에 따라 

 

첫째, 디자이너에게 필요한 디자인 이론, 그래픽디자인, 정적인 디자인, 동적인 디자인에 대한 역량을 키울 수 있는 방법을 학습합니다. 

정적인 디자인은 Figma(피그마)를 통해 만들고, 동적인 디자인은 Protopie(프로토파이)로 만듭니다.

 

둘째, 기존 디자인을 분석해보고, 잘 된 디자인을 피그마, 프로토파이를 활용해서 카피해 봄으로써 기본적인 UI컴포넌트 시스템에 대해 이해합니다.

 

마지막으로 Youtube for Learning이라는 주제를 가지고 문제 정의부터 스크린제작, 디자인 시스템 제작, 프로토타이핑,사용성 테스트까지 하나의 프로젝트를 완성해봅니다. 


01. Introduction

02. 기존의 디자이너의 정의를 벗어나 새롭게 디자이너 정의하기 

저는 오늘 이 두 챕터를 들은 뒤 정리한 간단한 강의 요약과 소감을 기록해보겠습니다.

 

 

01. Introduction

강사님의 자기소개 시간입니다. 강사님은 여러 회사를 거치면서 디자인의 core knowledge는 변하지 않는다는 생각이 든다고 하셨습니다. 그래서 본 강의에서 연사님이 여러 가지 회사들을 겪으면서 회사와 상관없이 쓰일 수 있는 core design skill은 무엇일까를 담아내려 하셨다고 합니다. 

 

디자인 툴에 대한 간략한 설명도 해주셨습니다. 2020 UX tool 사용자 수 조사 결과 Figma가 월등히 많고 다음에 Sketch, Adobe XD 등이 있었습니다.

 

본 강의에서 얻을 수 있는 것은 디자이너의 마인드셋현장에서 써먹을 수 있는 디자인 스킬입니다. 그리고 강의 후에 무엇을 공부하고 배워야 할지에 대한 자신만의 커리큘럼도 얻을 수 있습니다. 본 강의를 통해 제가 UX designer의 역량과 저만의 강점을 어떻게 키우고 다듬어나갈 수 있을지에 대한 답을 찾을 수 있을 것 같아서 무척 설렙니다!

 

툴은 피그마와 프로토파이를 사용한다고 합니다. 피그마는 여러 명이 함께 디자인할 수 있어서 편하고, 디자인 시스템을 염두에 둔 툴입니다. 또한 웹 베이스의 빠른 퍼포먼스가 가능하다는 장점이 있죠. 그리고 프로토파이는 대부분의 원하는 프로토타입을 만들 수 있고, 구현 가능한 인터렉션에 비해서 쉬운 난이도입니다.

 

 

02. 기존의 디자이너의 정의를 벗어나 새롭게 디자이너 정의하기 

 

01. 과학,엔지니어링,디자인의 차이점

디자이너는 경험을 프레이밍하는 사람입니다. 

Designer, Frame the experience.

 

각기 다른 경험을 프레이밍하기 위한 것이 디자인인 겁니다.

휴대폰에 있는 앱을 아무거나 켜보고 그 앱의 의도가 무엇인지 파악해보고 거기서 프레이밍 되어있는 경험은 무엇일까 한번 생각해보세요. 그런 사소한 시작이 UX 디자이너의 역량을 키우는 데 큰 도움이 될 겁니다.

 

02. 디자인의 의도는 무엇인가?

디자인은 경험을 프레이밍하기 위한 것이다. 그럼 이제 디자인의 의도가 무엇인지 먼저 알아볼까요? 현실적인 디자인 예제를 보면서 디자인 의도를 생각해보니 UI적인 부분도 함께 생각해볼 수 있어서 좋았습니다. 마켓컬리, 지메일, 유튜브의 메인페이지를 확인해봅시다.

마켓컬리의 메인페이지

-> 이 페이지가 주는 의도는?배너가 화면의 절반을 차지하고 있고 아래에 이 상품 어때요?라는 캐러셀이 있죠.마켓컬리가 미는 상품들을 사용자들이 고를 수 있도록 도와주고싶다는 마음에서 의도된 디자인인 겁니다.

지메일의 메인페이지

-> 사용자에게 가장 중요한 이메일을 보여주고싶다는 게 의도입니다.그리고 첨부파일 중간중간에 칩이 있어서 첨부파일을 쉽게 확인할 수 있게 해주는 부분이 있고요,오른쪽 아래에 새 이메일을 작성할 수 있도록 도와주는 버튼이 있습니다.


그런데 지메일에서의 네비게이션 스트럭쳐는 상단 좌측에 햄버거메뉴를 네비게이션 스트럭쳐로 가지고 있습니다. 반면, 마켓컬리와 유튜브 페이지 같은 경우에는 하단에 네비게이션 스트럭쳐가 있고요.

마켓컬리나 유튜브 같은 경우에는 내가 주문하고싶은 상품이나 내가 보고싶은 비디오를 고르는 것인데 메인페이지에 그게 없을 가능성이 많기 때문에 하단에 네비게이션 스트럭쳐가 있는 거고요. 지메일은 하단 네비게이션을 쓸 필요가 없었던 이유가 인박스(내가 받은 이메일들)가 있는데 이거 외의 다른 것은 보고싶은 게 없었기 때문입니다. 

 

디자인 의도에 따라 UI component를 고르는 것이 상당히 중요하다는 거죠!

어떤 디자인 의도를 갖고 있느냐에 따라 네비게이션 메뉴도 다르게 선택되어있어요.

그러니 항상 디자인을 보면서 그 페이지에서 의도한 바는 무엇일까 추측해보는 습관을 들이는 것이 좋습니다. 

  • 햄버거 메뉴: 햄버거 버튼(hamburger button)은 햄버거와 우연히 닮은 데에서 비롯된 이름으로, 그래픽 사용자 인터페이스(GUI)의 상위 모퉁이에 보통 위치하는 버튼의 하나이다. 구글 머테리얼 디자인 시스템에서의 정식 명칭은 'Nav Drawer' 네비게이션 drawer이다.

 

유튜브의 메인페이지

-> 사용자에게 맞는 영상을 추천해서 보여주고싶다는 게 의도입니다.

하단의 네비게이션 바를 통해서 유저는 더욱 편하게 다른 카테고리로 이동할 수 있습니다. 

 

03. 디자인의 영향은 무엇인가?

디자인은 우리의 삶의 질을 향상시켜주고 회사의 성공을 만들어냅니다. 그러나 그게 윤리적으로 올바른 디자인인지를 항상 반추해봐야 합니다. 예를 들어, 3D 모델링 툴이 만들어졌죠. 3D 프린터가 상용화되었습니다. 그런데 문제는 그 3D 프린터기로 총기를 만들어내는 사람들이 있다는 겁니다. 이 경우엔 총기가 메탈이 아니기 때문에 공항에서 총기로 인식되지 못합니다. 이렇게 하나하나의 디자인이 큰 파장을 낳을 수 있으니 우리는 디자인할 때 영향력에 대해 계속 생각해봐야겠죠?!

 

04. 어떤 가치를 기준으로 디자인했는가?

디자이너의 정의에 맞게, 디자이너는 유저가 context(맥락)에 맞는 경험을 framing 프레이밍 할 수 있게 디자인해야합니다.

 

Product are vivid argument about how we should live our lives.

모든 제품들은 디자인 의도가 있고, 가치적인 것에 기반되어 디자인되기 때문에 이런 제품들은 우리가 어떤 삶을 살아야되는가에 대한 논제를 던지는 화두가 된다.
- Paul Richard Buchanan


디자이너는 항상 깨어있어야한다.


우리가 사용하는 모든 것들은 다 디자인된 것이고, 그 디자인에는 가치와 영향과 목적이 항상 들어가있습니다. 그렇기 때문에 디자인을 사용할 때 깨어있고 남들보다 더 자세히 봄으로써 디자이너가 전달하는 좋은 삶은 무엇인가를 한번쯤 생각해봅시다.

 

Part 1, 2 전체 필기본

Part 1, 2 강의 마쳤습니다.

강사님이 디자인의 핵심부터 강의를 해주셔서 디자이너로서 가져야할 태도에 대해 고찰해보게 되었던 것 같아요.

벌써부터 유익한 강의인 것 같아 기분이 좋습니다. 앞으로도 꾸준히 더 열심히 공부해야겠어요.

모두들 파이팅입니다!

 


#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기

#구글MaterialDesign시스템을활용한YoutubeforLearning디자인프로젝트

https://bit.ly/3FVdhDa

 

수강료 100% 환급 챌린지 | 패스트캠퍼스

딱 5일간 진행되는 환급챌린지로 수강료 100% 환급받으세요! 더 늦기전에 자기계발 막차 탑승!

fastcampus.co.kr

 

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.