모르는 분들께는 도움이 될만한 친절하고 간단한 Tip입니다. ㅎㅎ


ux ui 디자인 하시는 분들이라면 이미지 슬라이스하고 좌표값 넘기는 과정이 있습니다.

회사에 따라 전용 툴을 사용하기도 하므로 모두 해당되는건 아니지만 일반적으론 그렇습니다.

또 개발자분의 스타일이나 역량에 따라 그냥 슬라이스까지 해서 넘기는 경우도 있지만 

내 디자인을 의도대로 화면에 출력하기 위해서는 디자이너가 좌표값을 잡아주는게 좋다고 생각합니다.

(웹 작업 (반응형웹,웹앱...etc.) 에서는 이 과정이 필요가 없거나 사이즈, 간격에 대한 가이드로 조금 다르죠.)


이전에는 상단이었는데 모바일 uxd를 시작하며 죄측 하단을 좌표 기준점으로 잡고 있습니다. (xcode,cocos2d 등...)


▼ 포토샵에서는 기본적으로 좌측 상단이 0.0 기준점으로 설정되어있는데요.



▼ Ruler의 모서리부분, 동그라미 표시한 곳에서 끌어당겨 원하는 곳을 기준점으로 옮겨놓을 수 있습니다. 



▼ 각 오브젝트별로 Ctrl+T (free transform)을 하면 Info창에서 쉽게 좌표값을 얻을 수 있습니다.



▼ 출력 요소마다 좌표값과 상세 정보를 표기해줍니다. 샘플이미지라 상세정보는 생략했습니다. 

이렇게 화면 위에 좌표값을 올려 주기도 하며 경우에 따라 가이드 문서로 작성하기도 합니다.


Posted by rantaworks