#01 디자인 가이드 문서

Published in

타임스프레드

2 min readJan 31, 2019

Comment
신입시절 포맷이 엉망인 ‘안드로이드 앱 디자인가이드 문서’를 pixel로 60장가량을 작업해 주었다.
당연히 협업하던 개발자님은 당황하셨고 dp로 다시 작업해주면 안되냐고 물었다.

이미지 파일로 개발자에게 전달하면 결과물이 미묘하게 달라져서 완성된다. 눈 대중으로 맞춰서 작업하는 경우가 많기 때문이다.

그래서 디자이너가 작업을 완료하면 작업물의 이미지 파일, 아이콘 파일과 함께 디자인가이드문서와 함께 전달한다.

디자인 가이드는 아래와 같이 구성이 이루어진다.

상세페이지에서는 Android의 경우 DP로 가이드 작업을 해줘야하고, iOS는 PT로 가이드 작업을 해줘야한다.

Android의 DP란?

dpi는 ‘Dot Per Inch’라는 뜻으로 1인치에 pixel 이 들어가는 양을 뜻한다.

다양한 디스플레이를 제공하면서 고정적인 단위로 개발을 하게 되면 큰 화면에서 너무 작게 보이거나, 작은화면에서 너무 크게보이는 현상이 생긴다.이것을 최소화하기 위해서 해상도 기준인 DP로 작업하게 되었다.

[ 고정적인 사이즈로 작업하면 생기는 이슈 ]

초반의 디스플레이는 160dp(mdpi)여서 1dp=1px 이었지만, 높은 해상도와 다양한 디스플레이 크기에 따라 1dp가 1px 에 2배가될수도 있고 3배가 될수도 있는 상황으로 바뀌게 되었습니다.

안드로이드의 DP와 개념이 거의 비슷합니다. iOS에서 밀도에 따라 디스플레이의 크기를 맞춰주는 단위입니다.

위의 단위들을 다 알아야하나요? 라고 질문하시면 몰라도 상관없습니다!

해당 사이즈에 맞게 Zeplin 이라는 좋은 협업 툴이 알아서 변환시켜주니까요!

단지 작업을 할때 가장 기본이 되는 개념이라 알고 가는 것과 모르고 가는 것의 차이가 크다고 생각합니다. 예를들면 xxdpi의 작업물을 xdpi로 변환시켜서 왜 단위가 이렇게 커지지 라는 상황을 방지할 수 있으니까요!