BLOG ARTICLE 햄버거 | 1 ARTICLE FOUND

  1. 2013.05.31 안드로이드 사이드메뉴 UI

구글이 사이드메뉴를 공식적인 UI로 가져오면서, Google Earth 에 첫 적용을 했는데 (google shopper 도 있지만 국내에서 다운로드가 되지 않음), 구체적인 가이드가 아직 발표되지 않은 관계로 일일이 화면을 뜯어서 분석해보기로 한다.

image  image  image

왼쪽부터, 평상시, 눌렀을때, 펼쳐진 사이드메뉴.

 

image

사이드메뉴쪽 버튼을 눌렀을때 눌린 영역을 측정해보니 가로 97px, 세로 96px 로 나온다. xhdpi 환경에서 스크린캡쳐를 했기 때문에 대략 48dp 임을 알 수 있는데, 가로가 한 픽셀 차이나는 것은 잘 모르겠다.

image

저 문제의 햄버거 아이콘이 실존하는 것인지 알아보기 위해, apk 를 뜯어 이미지 리소스를 확인해본다. ic_drawer.png 라고 있다. 이 아이콘의 크기는 xhdpi 폴더에서 가로세로 32px. 즉 16dp 의 크기다.

image

구글어스의 캡쳐화면에 이미지 리소스를 갖다 얹어보면 딱 나온다. 앱아이콘이랑 살짝 부대낀다.

 

image

그리고 이것이 사이드메뉴가 펼쳐졌을때, 햄버거 아이콘이 왼쪽으로 스윽 빠진 모습. 이때의 가로폭은 21px 이 나오는데, 역시 딱 떨어지는 dp가 아니어서 아쉽다.

대략 16dp 에서 10dp로 뒷걸음질 하는 걸로 보고 6dp 만큼 애니메이션이 있다고 보면 될 거 같다.

 

image

앱아이콘과 크기 위치를 분석해보면, 앱아이콘은 32dp 수준으로 들어가고 우측에 4dp 정도 공간을 비워주는 듯 하다. 좌측 햄버거 아이콘이랑은 적당히 겹치는 양상. 그저 라이브러리가 있나보다 한다.

 

 

image

그리고 마지막으로 하나!
hdpi 폴더안에 들어있는 icon_dev.png 는 대체 무엇????? ㅎㅎㅎ

AND