본문 바로가기

Design Study/UI / UX

Useful tool "GuideGuide"


최근 웹 작업을 하면서 그리드에 대한 중요성을 인식하지 못하고 멋대로 했다는 점에 새삼 여태껏 뭘 배웠는지 다시 생각하게 됩니다.

계속 그리드에 대한 자료를 찾다보니 좋은 무료 툴이 있길래 소개하고자 합니다.





포토샵으로 웹 페이지나 다른 프린터물을 제작할 시에 Top, Bottom, Left, Right에 대한 마진 혹은 Column, mid point 등

매번 새로운 작업을 할 시에 먼저 그리드를 잡아주고 시작하는데요. 

그 시간을 줄일 수 있도록 포토샵 Extension. 플러그 인과 같은 프로그램을 무료로 GuideGuide에서 제공하고 있습니다.


http://www.guideguide.me/





설치 방법


1) 위의 웹 사이트에 들어가서 CS4나 CS5, 혹은 CS6 버전을 다운 받습니다 (하위버전의 프로그램은 지원을 하지 않나 봅니다)


2) Zip 파일을 Unzip하게 되면 .mxp 형식의 파일을 볼 수 있습니다. 

이 파일을 사용하려면 Adobe Extension Manager라는 프로그램을 실행해야 합니다. 

Adobe Extension Manager 프로그램은 Adobe 프로그램 패키지 설치할 때 포함 되는 프로그램 중에 하나입니다. 


3) Extension Manager 프로그램을 실행 후, 설치 (Install)을 클릭, Unzip된 .Mxp 파일을 실행하면 설치 완료 됩니다. 

그리고 컴퓨터를 재시작 하면 됩니다. 포토샵을 실행 하면 Window > Extensions 에서 프로그램을 찾을 수 있습니다.

 



설치를 하게 되면 아래와 같이 포토샵에서 새로운 패널을 확인할 수 있습니다.




사용법은 간편하기 때문에 금방 몇번 해보시면 익숙해지리라 생각됩니다. 원하는 마진 사이즈 (px나 %를 뒤에 적어줍니다)를 

설정 후 GG버튼을 클릭하면 현재 열려있는 파일에 그리드 라인이 생긴 것을 확인 할 수 있습니다.