라벨이 디자인가이드인 게시물 표시

[앱 디자인] 디자인 가이드 작업에 유용한 툴 + 소개

이미지
*이 문서는 지속적으로 업데이트 될 예정입니다

Assistor PS
http://wit-web.azurewebsites.net/ko/assistor/product

제품소개영상


GUI 디자인 일을 잠깐 배운 친구에게 추천받은 툴인데 아주 유용하지만 약간 느려서 나중에는 그냥 이걸 안쓰고 파워포인트로 디자인가이드 작업을 하게 되었다는;; (치수 기입을;;;)
그러나 작정하고 쓰면 아주 유용한 툴입니다.

사용법도 간단한데, 설치하고 나서 포토샵과 함께 켜두고
포토샵에서 수치를 알아야 하는 레이어 선택 + Assistor PS 의 버튼 선택하면 알아서 간격, 크기 등을 재서 포토샵 레이어 위에 기입해줍니다. 그걸 복사해서 디자인 가이드 문서에 붙여넣기 하면 끝!

...인데, 레이어를 처음부터 매우 정확하고 정교하게 간격이나 위치 조정을 해서 작업하지 않으면 시안 잡고 나서 가이드 작업 할때 다시 위치 조정을 일일이 해야 하는 치명적인 단점이 있습니다. 처음부터 레이어 정리를 잘하세요! ㅠㅠ (저는 그래서 레이어 정리 다시하느니 PPT 로 쓰게 되었습니다;;)

레이어 정리를 못한 채로 AssistorPS 를 사용하면 아래처럼 됩니다. 수치가 0 으로 끝나는게 거의 없죠;; 이러면 개발자들이 해상도별 좌표 계산 같은걸 할 때 문제가 많습니다.


디자인가이드 작업용 툴 대세는 스케치 + 제플린 이런 것 같지만 스케치는 아직도 맥에서만 쓸 수 있다는 치명적인 단점(?)이 있고, 그 비슷한 제품으로 Adobe에서 내놓은 XD 도 맥/윈도우용으로 출시되었는데 스케치처럼 디자인가이드가 자동으로 나오거나 할 만큼 매력적인 툴은 아닌 것 같더라구요. 써 보게 되면 후기를 올리겠습니다 ^ㅁ^



*그 밖에 디자인 가이드 작업할 때 유용한 추천 링크

바이널 X 블로그

GUI 디자이너가 알아야 할 GUI 가이드라인 문서 작업의 기본 원칙 http://bit.ly/2eWsRmG
GUI 디자이너가 알아야 할 GUI 가이드라인 문서 작업의 기본 원칙2 http://bit.ly/2eWQ0Fx


디자인 가이드 …

[앱 디자인] 디자인 가이드 만들기 - 아이폰

이미지
*아이프렌즈펫 앱 디자인 가이드 경험을 공유합니다. 이게 처음 작업한 앱 디자인 가이드라서 미흡한 점이 많을 수도 있는데 문제가 있는 부분이 있다면 댓글로 알려주시면 반영하겠습니다 ^^

*아이폰 앱 가이드 작업의 특징

디자인 가이드 작업은 기준 해상도 하나를 정해서 그 수치값으로,
이미지 작업은 고객/개발자와 협의한 모든 해상도를 지원하는 방향으로 작업하면 됩니다.

아이폰 해상도를 먼저 보면


위에 point 가 실제 폰에서의 크기라면 render at 사이즈는 디자이너가 포토샵에서 작업해야 할 픽셀 단위 사이즈라고 보시면 됩니다.

아이프렌즈펫은 일단 기준 해상도를 iPhone6 으로 잡고 가기로 했습니다. 그래서 포토샵에서 작업할때는 750 x 1334 사이즈로 작업해서 해당 작업물로 좌표값, 크기 등을 계산해서 개발자님께 넘겼구요

만약 iPhone5 를 기준 해상도로 잡았다면 640 x 1136 을 기준으로 포토샵 화면 작업을 해서 넘기시면 됩니다. 그러면 개발자는 디자이너가 계산해 넘긴 수치값의 1/2 을 곱하거나 1.5 배 하는 등 계산을 해서 작업을 하게 됩니다.


여기서 알 수 있는 사실은, 포토샵에서 드리는 수치가 최종값이 아니기 때문에 가급적 모든 수치가 짝수가 되고, 맞아 떨어지는게 좋습니다. 그래야 개발자가 나누고 곱해도 소수점이 나오지 않기 때문이죠. 그래서 아이프렌즈펫 작업을 할때는 한 이미지로 여러 해상도를 지원해야 하기 때문에 가급적 6의 배수로 크기를 계산한 작업물을 드렸습니다.


*좌표



아이폰은 절대 좌표로 작업합니다. 그러니까 상단 Status Bar 밑에 0,0 찍어놓은 저 곳을 기준으로 절대 좌표를 계산해서 가이드를 만들면 개발자가 그곳을 기준으로 위치를 계산해 넣습니다. 이것도 개발자마다 다를 수 있으니 작업 전에 좌표 기준을 어디로 할지 한번 확인해 보시는 게 좋을 것 같구요.
아이프렌즈펫의 경우 아이폰은 750 하나만으로 작업하고, 그 외에는 자동으로 이미지 사이즈나 위치가 조정되는 방향으로 했습니다. 아마 이건 앱마다 상황이…