[한시적 무료] Pixel Perfect - 개발자 도구

이번 포스트는 [한시적 무료] Pixel Perfect - 개발자 도구 에 대해서 알아보도록 하겠습니다.

이번 소개는 개발자를 위한 개발자 도구입니다.

Pixel Perfect 라는 앱으로 맥 OS X 용이며, 만약 디자이너로 부터 전달받은 시안과 비교하여 pixel 조절이라던지 여백 조절등을 쉽게 할 수 있습니다.

영상

사용 방법

간단히 설명드리자면 원본(시안) 이미지가 존재하고 작업 결과물이 있습니다. 결과물을 보니 1px 정도 차이가 나고 자간의 차이가 나는 등의 문제가 발생될 수 있습니다.

이를 개발자가 찾기란 쉽지 않을 수 있는데요 이를 시안과 결과물을 서로 비교하여 쉽게 찾아내고 이를 수정할 수 있도록 가이드 해줄 수 있는 (마크업)개발자에게 꼭 필요한 어플이 아닐까 생각됩니다.

긴 설명 보다는 사용 방법과 영상을 통해 공유드리는것이 확실할것 같은데요.

함께 보시죠~

1. 우선 작업된 결과물이라고 가정하고 아래와 같은 제 블로그의 모습입니다.

2. 맥에 설치된 Pixel Perfect 의 앱을 실행시킵니다.

각 버튼에 대한 설명을 하면 Choose Image.. 버튼을 통해 이미지(시안) 을 선택할 수 있고,

그 옆의 alpha 값을 조절하여 화면에 올렸을때 뒷 배경과의 상태를 비교하는데 도움이 됩니다.

또한 One the Top 버튼을 통해 항상 상위에 존재하여 비교하는데 도움을 줄 수 있도록 합니다.

3. 이제 시안에 대한 이미지를 로드 합니다.

4. 로드한 이미지와 작업된 페이지와의 비교를 합니다.

잘 보시면 왼쪽 썸네일과 오른쪽 타이틀, 설명이 존재하는데 타이틀 부분이 맞지 않습니다.

즉, 다른 부분은 작업이 잘 된 상태이지만 타이틀 부분이 자간에 문제가 있는 상태이므로 자간을 수정하도록 합니다.

5. 자간 수정

크롬에 개발자 도구가 있으며 이를 통해 실제 코드 수정이 아닌 "letter-spacing" 속성을 통해 변경되는 과정을 보여드리기 위함임으로 이는 참고하시기 바랍니다.

결과

이와 같이 변경해야할 대상과 결과물을 서로 비교해 가며 원하는 모습으로 작업할 수 있으며,

실제 마크업 개발자 또는 앱 개발자에게도 많은 도움이 될 것이라고 생각됩니다.

추가로 동일한 GluePrint2 어플이 있는데 이는 다음 포스트에서 이어 설명하도록 하겠습니다.

다운로드 링크 : Link

이번 포스트는 [한시적 무료] Pixel Perfect - 개발자 도구 에 대해서 알아봤습니다.

관련글

• [무료] GluePrint2 - 개발자 도구

페이스북(@mobile), 트위터(@mobile_issue) 계정을 팔로우
하시면 실시간으로 정보를 제공 받을 수 있습니다.

로그인이 필요 없는 추천(하트) 으로도 블로그 주인에게 힘이 됩니다.
많은 응원과 격려 부탁 드려요.