Angular Material

Angular Material

얘네는 사람 빼고 다 만들 기세다...

프론트엔드 개발자들의, 아니 모든 개발자들의 숙명과도 같은 신기술 습득에 빡씨게 채찍질을 하는 교관같은 하나의 단체가 있다. 이 곳에 들어가기 위해서는 나같은 미개한 개발자는 다시 태어나야할 수준이지만 그래도 정말정말정말 입사하고싶은 곳, 바로 구글이다.

2년전 즈음에 구글은 머티리얼(혹은 매터리얼) 디자인을 공개했다. 이들의 목표는 야심차게도(어쩌면 그게 당연하게 느껴지지만) 시각 언어의 창조이다.

Create a visual language that synthesizes classic principles of good design with the innovation and possibility of technology and science.

이런 귀여운 생각을 한덕에 나는 또 구글링을하며 이들의 철학과 원칙들을 찾아보았다. (아이 고마워라...)

Material is the metaphor

머티리얼은 은유다. 난 이게 무슨 의미인지 모르겠다. 그들에 따르면 잘짜여진 공간과 움직임의 체계를 통합한 가설(혹은 이론)이라고 설명하면서 이딴 문장을 써놓으니 못알아 먹는게 당연하지! 계속하자면 종이와 잉크에 관한 연구를 통하여 영감을 받았다고 한다. 계속 못알아 먹겠다. 아무튼 이 원칙을 내 나름대로 판단해보자면 머티리얼 디자인은 아날로그적인 재료를 가지고 지금껏 발전시켜온 디자인과 동작등을 조합한 것이라고 보여진다.

Bold, graphic, intentional

이건 또 무슨 소리인가... 머티리얼의 기본요소는 출력물에 기초한다. 이러한 출력물의 요소는 타이포그래피, 그리드, 공간, 비율, 색상과 이미지군의 시각요소를 다루는 가이드들에서 기초했다. 초창기 웹 디자이너들의 디자인들이 거의 모든 지면 디자인에서부터 출발했으니 당연한 이야기가 아닐까?!

Motion provides meaning

계속해서 이해할 수 없는 것들이 나온다. 동작은 의미를 제공한다라... 아마 여기에서는 동작은 (사용자의) 의도를 규정한다 정도로 이해해야 할 것 같다... 근데 도대체 문서 만드는 자식분이 어떤 놈사람이길래 이렇게 철학적으로 말할까....

아무튼 기본원칙을 찾아보았다. 그러면 다른것을 좀 훑어보도록 하겠다. What is material? 메뉴의 Enviroment를 보자.

근데 여기서 나오는 환경이라는 단어, Enviroment는 일반적인 환경이라는 뜻 보다는 구성을 의미하는 것 같다. 머티리얼 디자인의 3차원 환경(구성 혹은 구조)에는 빛과, 재료, 그림자를 포함한다. 즉 빛, 재료, 그림자로 구성되어 있다는 뜻이다. (이건 내 마음대로의 해석이니 그냥 그러려니 하길...)

옆의 이미지를 확인해 보자. 파란색 배경 안에는 하나의 박스 모양 물체와 그 위의 다른 원형 물체가 있다. 각각의 물체들은 저마다의 z-index를 가지고 있어서 서로 붙어있지 않다는 것을 알 수 있다. 지금 옆의 예시 이미지에는 눈에는 보이지 않지만 빛이 존재한다. 그 빛이 있기 때문에 해당 물체들은 그림자를 가질 수 있게된다. 머티리얼 디자인은 이와같이 빛과 물체(재료), 그림자로 구성되어 있다는 것을 잘 보여주는 예이다. (근데 일장기 모양이라 별로...)

이 외에도 머티리얼 디자인의 공식 사이트를 확인하면 컬러 팔레트라던지 레이아웃 반응형 디자인에 대한 명세와 설명등이 나온다. 뭐... 하나같이 읽어도 읽지않은듯한 글들이 무더기로 나오고 가끔 동영상과 이미지들이 나온다.

자세한 사항은 https://material.google.com/ 이곳에서 확인해보기 바란다. 여기에 나오는 글들은 오역과 발역 그리고 숨통조이는 의역들이 난무하기에 원래의 의도와는 많이 다르므로 꼭 방문해 확인하자.

아... 끝을 맺으려고 보니 이 포스팅이 머티리얼 디자인에 대한 소개가 아님을 알아차렸다. 나란 새끼... 

자, 그럼 Angular Material(이하 am으로 퉁치겠다)을 알아보자.

What is Angular Material?

am은 AngularJS와 머티리얼 디자인을 사용하는 개발자를 위해 제공하는 프레임워크이다. am은 AngularJS답게 그에 맞는 지시자와 서비스, 기능 등을 제공한다.

사실 내가 처음부터 am을 찾아보고 사용하게 된 것은 아니다. am을 접하게 된 이유는 부트스트랩과 AngularJS의 조합이 마음에 들지 않아서이다. UI Bootstrap은 무언가 쓰기가 불편했다. 모바일 퍼스트 디자인이지만 약간 무겁게 느껴지기도 했고 (그렇다고 테스트를 해본것은 아니며 am이 더 빠르다는 의미도 아니다.) UI 자체가 오래봐서 그런지 질리기도 했다. 

am 공식사이트를 방문하면 버전 릴리즈 현황이나 구성 요소들의 데모, API 명세들을 제공한다. 일단 먼저 쑤욱 훑어보기를 바란다. 내가 처음 am을 사용하면서 신기방기했던것은 md-button이었다.

얼핏보면 부트스트랩이랑 색만 다른데 뭐가 신기하냐는 의문을 날릴지 모르겠지만 버튼을 직접 클릭해보면 조금 다르다는 것을 알수있다. 애니메이션이... 데모에서 볼수 없는 md-button의 설명은 DIRECTIVE 메뉴의 md-button에서 살펴볼 수 있다. 이 메뉴를 보면 잉크 리플(수면으로 퍼지는 효과)을 선택적으로 제공하는 버튼 지시자라고 명시하고 있다. 잉크는 머티리얼 디자인의 원칙인 은유에서 본적이 있을것이다. (그래서 뭐??) 그냥 그렇다고... 아무튼 나는 꽤나 신기했던 효과이다.

또 계속해서 데모를 훑어보면 그리드 리스트나 그리드 타일에 관해서도 확인할 수 있으며 사이드내비게이션, 툴바 등을 확인할 수 있을것이다. 기본적으로 am의 구조는 상단의 md-toolbar, 좌측의 md-sidenav, 콘텐츠 영역의 md-content로 구성되어있다. 물론 사이드내비게이션의 사용여부와 위치는 선택적인 것이다. 그럼 이제부터 따라하기 쉬운 간단한 예제를 만들어 보자.

먼저 선행되어야 할것은 관련 소스 내려받기다. (물론 이 중요한 것을 빼먹고 나한테 묻던 인간이 있었다. 그래서 명시했다.) 터미널을 열고 npm 혹은 bower에서 install angular-material --save를 실행한다. 그러면 현재 AngularJS에 맞게 디펜던시가 다운로드 되고 이제 그것을 이용해 개발을 시작하자. 'app'의 의존성에 'ngMaterial'을 추가해주면 끝.

위의 JSFiddle Result 항목을 보면 현재 마크업된 레이아웃을 확인할 수 있다. 잘빠진 3단 구성의 레이아웃이 완성됐다. 누구라도 개발환경만 갖춰져있다면 3분안에 완성할 수 있는 레이아웃이다. (빠르다!!! 개빠르다!!!)

HTML을 클릭해서 확인해보면 md-* 지시자들을 확인할 수 있다. 바로 위에서 설명했던 md-toolbar, md-sidenav, md-content를 확인할 수 있을것이다. 조금 더 자세하게 들여다 보자. 예제 파일을 만들어서 위의 코드를 복사해 자신의 파일을 만들어보자. 그리고 하나씩 지워보면서 기능에 대해 파악하겠다.

먼저 사이드내비게이션과 콘텐츠를 감싸고 있는 div의 flex를 지워보자. 그러면 사이드내비게이션과 콘텐츠의 높이가 잘리는 것을 확인할 수 있을것이다. 그러면 flex는 높이를 늘려주는 것인가?? 높이만 늘려주는 놈은 아니다. 이 녀석은 신기하게도 너비도 늘려준다.

md-content의 flex를 지워보자. 그러면 너비가 줄어드는 것을 확인할 수 있을것이다. 오호라... 너비나 높이를 늘려준다라... 또 하나의 flex가 있다. 툴바 안, span의 flex를 지워보자. 그러면 이번에는 끝에 있던 '메뉴영역'이 왼쪽으로 달려나올 것이다.

이것은 am에서 제공하는 공식적인 offset 먹이는 방법 중 하나다. 물론 다른 방식의 offset들도 존재하지만 float을 주거나 css를 수정해서 강제적으로 위치를 조정하는 것 보다 이렇게 사용하기를 권장한다.

layout은 무엇일까?? layout은 일종의 레이아웃 컨테이너 역할을 하는 녀석이다. 여기에 row 값을 주면 이 컨테이너는 행이 되어 한줄에 하위 요소들을 정렬시켜 주고 column 값을 매기면 열이되어 감싸주게 된다. body 엘리먼트의 layout이 바로 이런역할을 해주어 하위 요소 전체를 열로 만들어준다.

그런데 코드를 이리보고 저리보면 갑자기 의문이 들것이다. css에는 md-toolbar에 관한것이 아무것도 없는데(사실, css는 하나도 건들지 않았다) 왜 저런 푸르딩딩한 색상이 입혀져있는 것인가?? 저거 못바꾸는거야?? 뭐 이런 생각들. 누누이 얘기하지만 내가 그렇게 생각했었기 때문에 전혀 문제될 것 없다. 멍청하면 나처럼 부지런해지니까.

머티리얼 디자인으로 다시 돌아가서 색상 메뉴를 확인해보면 현재 am에서 사용하고 있는 컬러 팔레트를 확인할 수 있다. 19가지의 컬러 팔레트 중 테마를 하나 선정하여 고를 수 있다. 그렇다. 19가지 밖에는 없는것이다. 지쟈스... 뭐 이렇게 제한을 걸어둔것인가... 그러면 이제 css 떡칠을 해야할 것인지 고민에 빠질것이다. 물론 나 역시도 초반에 그런 ㅂㅅ짓을 시전할 뻔 했다.

다행히도 am은 $mdThemingProvider 서비스를 제공한다. 이 서비스는 19가지의 컬러팔레트의 기본 세팅을 바꿀 수 있으며 추가할 수도 있게 만들어준다. 오호 멋지다. (근데 처음부터 이렇게 안만들었으면 더 좋았을 수도...) 그런데 명세를 보면 볼수록 더 미궁에 빠지기 시작한다. 도대체 색상을 어떻게 추출해야되는 것인가?!

아니 몇개나 해야되는건데?? 왜 이따위로!!!!!

그렇게 좌절하다가 찾았다.

https://angular-md-color.com/#/ 이곳에 가서 원하는 색상을 추가하면 그것에 맞게끔 팔레트를 생성해주며 심지어 코드까지 제공한다. 색상의 디폴트는 500이니 필요에 따라서 수정하여 사용하면 되겠다. 기존의 색상으로 교체해 사용하길 원한다면 $mdThemingProvider 서비스에서 팔레트 이름을 선택하면된다. 표기법은 명세에 자세히 나와있으니 참고하면 되겠다.

뭐... 간략하게나마 Angular Material에 대해서 알아보았다. 아직은 상용 어플리케이션 개발에 다른 커스터마이징 없이 바로 적용하기에는 무리가 따르는 부분이 많다. md-data-table 같이 15년도 여름에 나왔어야 할 부분이 아직 나오지 않은 것처럼 여러가지가 미비하고 시각적인 부분 역시도 조금은 과하다 싶은 여백과 높이값 등의 문제들이 존재한다. 하지만 UI Bootstrap에 조금 지쳐있던 나로서는 사용하기에 무리가 없다고 판단했기에 현재 am을 즐겨 사용하고있다. 이 외에도 AngularJS 자체의 IE 호환성 문제가 있기에 사용과 적용에 앞서서 신중한 고민과 논의가 필요할 것 같다.