2019. 11. 8. 07:50ㆍUI 가벼운 이야기
|
※ 2019 UX London 후기 1편 - [해외교육] 2019 UX LONDON 후기 (1/2) |
2019 UX LONDON 후기 1편에 이어, 2편에서는 Day 2의 오후 워크숍으로 참석했던 <Building Design Systems with Google's Material Design>에 대해 공유합니다.
Building Design System with Google's Material Design
머티리얼 디자인은 가장 인기 있는 디자인 시스템 중 하나로, 2014년 출시 이후 계속해서 변화하는 기술과 디자인 트렌드를 따라 적응하고 진화하고 있으며, 오픈 소스코드를 제공하여 구글 팀 뿐만 아니라 많은 안드로이드 및 웹 애플리케이션 제작자들이 사용하고 있습니다. 구글은 이번 워크숍이 참여자들로 하여금 기존 브랜드를 머티리얼로 표현하거나 완전히 새로운 자신만의 디자인 시스템을 구축해볼 수 있는 기회가 되기를 기대하였습니다.
워크숍은 디자인 시스템이 지닌 가치에 대해 이야기를 나누는 시간과, 실제 코드를 활용하여 레이아웃과 타이포그래피 등과 같은 서브 시스템을 커스터마이징하는 실습을 통해 머티리얼 디자인의 원리와 해당 애플리케이션의 기능을 익히는 시간으로 구성되었으며, 3명의 현 구글 디자이너들이 진행해주었습니다.
디자인 시스템의 가치
구글은 팀 내에서 디자인 시스템의 가치에 대해 논의할 때, 다음과 같은 측면들만 주로 언급되는 것을 발견했습니다. 작업 속도와 효율성 또는 명확성과 같은 업무 프로세스에 관련된 것과, 제품의 일관성 및 사용성에 대한 것인데요. 그러나 구글이 이 주제에 대해 구체적으로 연구를 진행한 결과, 앞서 말한 프로세스나 프로덕트에 관한 것 이외에, 똑같이 중요하다고 판단되는 두 가지의 측면에 대해서 추가적으로 발견할 수 있었습니다. 해당 연구의 참여자들 중 한 사람은 머티리얼 디자인을 채택한 후로 팀은 결정을 내리고 토론하는데 소모하는 시간을 꽤나 줄일 수 있었고, 이것은 팀 내 상호작용을 더 즐겁게 만들어 주었다고 했습니다. 또한 디자인 시스템은 개별 업무가 비즈니스 목표와 일치하도록 보장함으로써, 동료들은 서로의 업무를 인정하고 제품을 함께 유지하며 앞으로 나아갈 수 있도록 합니다. 이처럼 좋은 디자인 시스템을 갖는 것은 팀 내에서 혼란과 논쟁을 줄이고 더 많은 생산성과 신뢰성을 야기할 수 있으며, 따라서 팀의 건강과 직업 만족도를 증가시킨다고 했습니다.
글리치를 이용한 실습 활동
실습은 Glitch라는 웹 애플리케이션을 이용하여 진행되었는데, 글리치는 JavaScript 및 Node.Js를 이용하여 간단한 웹 사이트를 만들 수 있는 온라인 통합 개발 환경(IDE)입니다. 사용자가 사이트의 소스 코드를 보거나 유용한 방법으로 리믹스할 수 있으며, 즉각적인 호스팅과 자동 배포가 가능하고 커뮤니티 멤버들끼리 실시간으로 도움을 주고 받는 등 친절하고 접근하기 쉬운 커뮤니티가 되는 것을 목표로 합니다. 구글 내부에서도 협업을 위한 용도로 글리치를 많이 이용하고 있다고 합니다.
구글처럼 몇 개의 인기 있는 회사들이 글리치를 이용한 프로젝트를 공유하여 사용자들이 그들의 API를 사용할 수 있도록 하고 있는데요. 글리치에서 이것을 플랫폼 스타터로 제공하여 초보 사용자들의 접근성을 높이고 있습니다. 실습 또한 플랫폼 스타터에 있는 'Material Design'의 'material-101'을 활용하여 진행되었습니다.
'material-101'은 머티리얼 디자인의 4가지 중요한 측면인 레이아웃, 컬러, 타이포그래피, 모양에 대한 코드 사용을 살펴보고 커스터마이징 해보는 베이직 레슨입니다. 글리치 코드 편집기에서 코드값을 변경하며 디자인을 커스터마이징 하는데, 어떤 코드를 복사하여 어디에 붙이라는 것과 같은 친절하고 상세한 가이드라인을 단계별로 제공하고 있습니다. 기본적으로 각 테마는 머티리얼의 기준 디폴트 값으로 시작하는데, 코드값 변경 시 머티리얼 컴포넌트의 모양과 동작에 미치는 영향에 대해 모바일 뷰로 빠르게 확인할 수 있습니다.
대부분의 액티비티는 my-theme.scss 파일에서 진행되었습니다. 레이아웃에서 그리드와 칼럼 개수를 조정하고 그 사이 여백 조절하기, 메인과 서브 컬러 바꾸기, 새로운 폰트 적용하기, 컴포넌트 쉐입 바꾸기 등을 진행하였는데, 제공된 가이드라인을 따라하는 것만으로는 컴포넌트들을 세밀하게 커스터마이징 할 수 없어 아쉬운 부분이 있었습니다. (코딩에 대한 지식이 조금이라도 있었다면 얼마나 좋았을까요.)
마치며
직무 특성상 개발 지식이나 경험이 부족했기 때문에 실제 코드를 이용하는 실습 활동이 걱정되었는데, All experience levels를 대상으로 진행된 만큼 다행히 가벼운 액티비티였고 문제 발생 시에도 진행자들의 친절한 도움을 받으며 잘 따라갈 수 있었습니다. 이번 워크숍을 통해 디자인 시스템에 대한 이해도를 높이고, 유연한 설계 및 디자인이 가능한 머티리얼의 활용성과 가능성에 대해 알 수 있는 동시에 코딩에 대해서도 흥미를 가질 수 있는 매우 유익하고 즐거운 시간이었습니다. (코딩 공부가 선행되어야 하겠지만..) 다른 스타터들의 오픈 소스 코드를 리믹스하여 새로운 제품을 만들어보거나, 프로젝트 내에서 글리치를 새로운 협업 툴로 이용해보아도 좋겠다는 생각이 들었습니다.
해당 액티비티는 누구나 접근할 수 있는 메뉴와 상세한 가이드라인을 제공하고 있기 때문에 관심이 있는 분은 글리치 웹 사이트에서 따라 해보는 것을 추천드립니다.
참고 자료 및 이미지 출처