app bars(top) 앱바 상단 가이드

내가 다시 컴퓨터 앞에 앉은 이유는 다음과 같다.

첫째는 정보전달

둘째는 내가 오늘 하루동안에 배웠고 느꼈던 것을 다시한번 정리하는 시간이다.

티스토리를 열고 글을 쓰는 작업이 결코 적은 시간을 들이는것이 아니기 때문에, 시간을 허투로 사용하지 않을 것이다. 정리를 하면서 보는 사람으로 하여금 이해가 되게 하고 나 또한 되새김질 할 것이다. 틀린 부분이 있다면 틀렸을 것이다. 나는 완벽하지 않기 때문이다. 따라서 어떤내용이건 '논리에 맞게' 피드백을 주면 수용할 것이고, '논리가 있더라도' 내가 이해할 수 없는 논리라면 수용하지 않을 것이다.

ux/ui 디자이너들아! 힘들내자

오늘은 abb bar에 대해 알아볼 것이다.

Abb bars: 상단(top)

위 그림은 내가 따로 디자인 한 것이 아니라, 구글 머터리얼디자인에 접속해보면 볼 수 있는 그림이다. 구글 머터리얼 디자인을 ui/ux 디자이너라면 반드시 꼭 한번은 정독을 해야한다고 생각을 한다. 그런데 일단 나부터가 정독을 하지 않고 그냥 훑는 정도로 봤다. 

이번주 주말에는 머터리얼디자인 사이트를 정말로(!) 한번은 정독을 해야겠다. 이거 일어나자마자 하고 다 못하면 절대 유튜브고, 노래 듣기고 아무거도 못하는걸로 나자신과의 약속을 세워야겠다. 예상일시는 11.15(일) 08:00~

위의 이미지 사이트의 링크는 아래와 같다.

material.io/components/app-bars-top#specs

Material Design

구글 머터리얼 가이드를 보면서 스펙을 따라서 디자인 가이드를 잡아보는 것은 아주 훌륭한 연습이 될 수 있다. 새삼 깨닳은 사실이고 이미 이전 포스팅에서도 언급을 했지만 ui/ux 디자인에는 이유가 없는 디자인이 없다. 내가 마음에 든다고 들지 않는다고 이해가 되지 않는다고 요소를 빼거나 더하거나 할 수없다. 왜냐하면 나는 이용자를 위해서 서비스를 사용하기 좋게 만드는 디자이너이다. 

ux/ui에는 규칙이 있다. 그러나 절대적은 아니다.

위의 이미지에 나오는 가이드를 캡쳐를 해서 xd나 스케치에 두고 편한 방법으로 작업을 하면된다.

작업을 하기에 앞서 몇가지 반드시 있어야 할 규칙에 대해 이야기 해보겠다.

1. 스테이터스바(상태표시줄)은 높이가 24이다. 이점은 기억을 해두면 좋다.

2. 모든 아이콘 크기 가이드는 24*24로 한다. 

3. 아이콘 사이는 최소 12px 즉 아이콘 두개의 간격은 12*2=24px 이어야한다.

여기서 내 포스팅을 유심히 보거나 강의를 들은 사람이라면 의문점이 생길 것이다. 24*24 상자 안에서 디자인 하라고..? 언제는 엄지손가락 크기가 50px 정도 되니까 가로세로 길이가 50px 로 디자인 하라면서...!!!!! 라고 생각을 했다면, 이제부터 설명하는 글을 10초만 읽어보자.

아이콘을 24*24로 생각을 하고 만들었을때 Touch area 48*48을 고려한다고 한다면 48-24(아이콘 가이드)=24 24/2=12(양쪽이 24이므로 한쪽만 생각하면 12), 12+12(붙어있는 아이콘의 한쪽여백)는 24.

이 부분이 이해가 되지 않는다면 어떤점이 이해가 되지 않는지 구체적으로 댓글로 남겨주길 바란다.​

그렇기 때문에 아이콘 사이는 최소 12px(24px)을 띄워야한다. 여백이 중요한 것이다. 아이콘이 무조건 크다고 잘 보이는 것이 아니기 때문에 24*24를 가이드로 잡고 아이콘을 만드는 것이다.

4. 상단 abb bar의 세로 길이는 56px이다.

 

---

사실 abb bar(bottom)도 함께 다루려 했으나 상단 앱바도 이야기 할 것이 많아 글이 길어져서 다음 포스팅으로 넘겨야겠다.

 

---

그리고 여담

아 오늘 드디어 XD 클라우드 문서 정리작업을 했다. 근데 진짜 큰 문제가 있었다.

첫째는, 만들어진 클라우드 문서를 어떻게 삭제를 해야할지 몰라서

"XD 클라우드 문서 삭제" 와 같은 키워드를 구글에다가 엄청 검색했다. ㅎ.. 근데 나같은 사람들이 많이 있었는지 연관검색어에도 그게 있더라. 구글이... 어도비가.... 클라우드 문서를 삭제할 수 있는 기능을 안 넣었으리라고는 상상을 못하겠는데 못찾아서 30여분간을 헤맸을것이다. 

둘째는, 파일명 수정을 반드시 파일에 들어가서 해야하나 싶어 일일이 파일을 열어 제목을 수정했다.

이또한 첫번째 문제와 같은 문제였고, 첫번째 문제가 해결되니 자연스럽게 해결이 되었다. 

혹시 나와같이 헤매는 사람이 있지 않을까 심히 걱정이 되어 다음포스팅은 'XD클라우드 문서 삭제' 방법에 대해 알아보도록 하겠다. 아주짧게.