본문 바로가기

할인정보

[일시무료] 목업 이미지를 앱의 실제 인터페이스와 비교할 수 있는 개발 보조도구 'Pixel Perfect'


Pixel Perfect (4.99달러 → 무료)

요즘 소프트웨어를 개발하기 전에 목업을 만들어 전체적인 디자인과 그래픽 인터페이스를 미리 구현해보는 작업이 꽤 보편화돼 있습니다.

이상적인 크기와 형태로 앱의 설계도를 만들어 놓으면 나중에 앱을 개발할 때 적지 않은 시행착오를 줄일 수 있기 때문이죠. 하지만 눈짐작만으로는 목업을 따라하는데 한계가 있기 때문에 막상 앱을 만들기 시작하면 스위치나 버튼 등의 UI 요소가 의도한 대로 나오지 않거나, 미묘하게 위치가 어긋날 때가 있습니다.

목업과 디자인이 100% 일치하는 앱을 만들고 싶은 '치밀한' 개발자라면 오늘 맥 앱스토어에 무료로 풀린 'Pixel Perfect'가 큰 도움이 될 지도 모르겠습니다.

Pixel Perfect는 포토샵이나 스케치 등에서 만든 목업 사진을 불러와 Xcode 등에서 개발 중인 앱의 실제 인터페이스와 비교할 수 있는 앱입니다. 목업 사진을 화면에 반투명한 레이어로 띄워주는 단순한 기능을 가지고 있는데요, iOS 시뮬레이터 위에 포개놓으면 어떤 부분이 얼마나 차이나는지 픽셀 단위로 아주 세밀하게 비교할 수 있게 됩니다.

사용 방법은 굉장히 간단합니다.

앱으로 목업 사진을 불러온 다음, 레이어의 투명도를 조절하고 앱의 실제 인터페이스와 겹치게 놓아주면 끝입니다. 그리고 Xcdoe 인터페이스 빌더에서 UI를  적당히 수정하면 되는 식이죠.

반투명 레이어는 레이어 위에 있는 도구 막대를 드래그 하거나 키보드 방향 키와 shift 키를 조합해 1픽셀 또는 10픽셀 단위로 위치를 옮길 수 있습니다. 레이어 위에 있는 도구 막대가 거슬린다 싶을 때는 option 키를 누른 상태에서 드래그 하여 적당한 곳에 치워둘 수 있게 했습니다. 그밖에 특정 응용 프로그램을 사용할 때만 레이어를 표시하는 기능 편의기능이 마련돼 있습니다.

원리는 단순하지만 사실 이보다 UI를 비교하는데 효과적인 방법이 있을까 싶습니다. 필수 도구는 아니지만 꼼꼼함을 추구하는 개발자라면 하나쯤 가지도 있어도 좋을 유용한 프로그램이 될 듯합니다. 유료로 전환하기 전에 미리 받아두시기 바랍니다.

View in Mac App Store $0.00



참조
Pixel Perfect 공식 웹사이트

관련 글
개발자를 위한 맥용 노트 관리 앱 'Quiver'
개발자에게 유용한 두 가지 개발 보조도구 2종
개발자에게 추천하는 OS X 훑어보기(QuickLook) 플러그인 6종
맥용 플로팅 이미지 캡처 소프트웨어 4종 비교... ScreenFloat, GrabIt, SnappyApp, Mapture