weight로 모든 폰에 안정감 있는 디자인 적용하기

오늘 작성할 글의 주제는 안드로이드 스튜디오의 똑똑한 기능 중 하나인, weight에 대해서 써보려고 한다.

weight가 유용하게 쓰일 대표적인 모바일 화면에는 갤러리(사진)뷰나 하단에 4~5개의 탭바 등에 해당되는데, 대표적인 앱으로는 플립보드나 인스타그램이 있다.

 

weight 예시 : flipboard 앱

플립보드에서 weight가 적용될 수 있는 부분은 갤러리뷰와 상단 탭이다. 

이런 화면을 디자인했을 때, 개발자에게 어떻게 가이드를 해줘야 모든 폰에 아름답게 보일 수 있을까?

대부분의 디자이너는 개발 환경을 잘 모르기 때문에 가로값을 전달할 것이다.

PSD상에서 180px니까, 가로는 90dp입니다.  

대부분은 이렇게 전달할 것이다.

좌 : 90dp로 적용된 720 사이즈의 화면 / 우 : 90dp로 적용된 1240 사이즈의 화면

특정 수치를 전달하면 왼쪽처럼 디자인과 같은 사이즈의 모바일에서는 완벽한 뷰를 볼 수 있지만, 그것보다 큰 화면을 보거나 화면전환을 했을 때에는 오른쪽과 같은 비주얼이 나오게 될 것이다. (두둥;)

이미지 또한 마찬가지이다.

PSD상에서 180px니까, 가로는 90dp입니다. 라고 가이드를 전달했을 경우...

좌 : 90dp로 적용된 720 사이즈의 화면 / 우 : 90dp로 적용된 1240 사이즈의 화면

위처럼 포토샵에서 작업한 사이즈와 동일한 크기의 폰에서는 문제없이 보여집니다. 하지만, 이와 다른 화면일 경우에는 여백의 똥이 나타난다.

이런 경우에 해결할 수 있는 방법 중 하나가 weight이다.

각 가로값을 weight로 처리해주세요.

이 한 문장으로 우리는 모오오오든 디바이스에서 우리가 의도한 디자인을 확인할 수 있다.

위의 두 화면 모두 가로값을 수치로 적용하지 않고 weight로 처리하였다.

그 결과, 720기준으로 작업한 포토샵 화면임에도 불구하고 1240의 디바이스에서 원하는 화면을 볼 수 있었다.  

---

물론 개발자에게 디바이스에 맞게 동일한 비율로 화면에 채워달라고 해도 무관하다.

그래도. 살짝 아는 척(?)하면 개발 환경도 좀 아는 디자이너구나~라고 생각할 수 있고,

장황하게 설명하는 것보다 weight 한 마디로 설명하는 것이 개발자도 더 빠르게 이해할 수 있으므로,

이 정도는 알아두면 디자인 업무에 도움이 될 거라고 생각한다.!

FIN.