디자이너로 프로젝트를 진행하다 보면, 개발을 위해 가이드를 제작해야 하는 경우가 종종 있습니다. 1년 차에 가이드 작업을 진행할 때 관련 정보를 쉽게 찾을 수 없어서 고생했던 경험이 기억나네요. 요즘은 제플린이 많이 상용화되어 ppt 가이드를 제작하는 일은 거의 없는 것 같아요.
그래도 프로젝트 보안 문제로 제플린 사용이 불가한 경우가 종종 있기에, 제플린보단 못하지만, ppt 보단 나은 스케치 플러그인 툴을 공유하고자 합니다.

Sketch 가이드라인 플러그인 MeaXure (구 Measure)

Measure라는 이름으로 보급되다가, 스케치 버전에 맞춰 업데이트되면서 이름이 바뀐 것 같아요.
툴에 대한 내용을 공유하기에 앞서 일단 플러그인 설치를 해볼까요?
아래 링크에서 다운로드한 뒤 압축을 해제하고 스케치 메저 플러그인을 더블클릭하면 플러그인 설치가 완료됩니다.
https://github.com/qjebbs/sketch-meaxure

플러그인 설치가 완료되면 스케치를 열어 플러그인 > Sketch MeaXure > Toolbar의 경로로 MeaXure 툴바를 열어볼까요?

MeaXure와 제플린의 가장 다른 점이라면, 제플린과 같이 마우스 호버 시에 가이드 수치를 노출해주는 것을 포함하여 MeaXure는 스케치 내에 가이드를 물리적인 레이어로 생성시킬 수 있습니다. 자동으로 측정해주었을 뿐 스케치 레이어이기에 위치 조정, 수치 값 조정 등 가이드를 수정하는 일도 가능합니다.

MeaXure툴바의 구성은 크게 5 부분으로 나눠집니다. 너비나 높이, 간격, 속성 등 MeaXure가 자동으로 표기해주는 요소끼리 묶여 구성 되어지는데요.

좌측 모서리를 기준으로 X축과 Y축을 표시해줍니다. 선택된 개체의 면적만큼 영역을 생성시킵니다.

오브젝트의 너비를 상단/중앙/하단에 표시합니다. 오브젝트의 높이를 좌측/중앙/우측에 표시합니다.

오브젝트 간의 좌우 여백/ 상하 여백을 표시해줍니다. 오브젝트와 좌우 상하 아트보드의 사이를 표시해줍니다.

오브젝트의 속성을 좌우 상하에 표시해줍니다.(속성은 옵션 창에서 선택한 것만 표시됨) 메모의 경우 (4번 첫째줄 가장 오른쪽) 선택된 텍스트를 메모 스타일로 바꿔줍니다. 이렇게 형성된 메모 레이어의 경우 스케치에서는 메모창처럼 보이지만 추후 추출된 가이드에서는 메모 숫자로 노출되며, 마우스 호버 시 내용이 노출됩니다. (숫자 마크는 좌측 상단을 기준으로 형성되네요)

순서대로 MeaXure로 생성된 레이어 숨김 / 잠금 / 전체 지움 MeaXure가이드 내보내기 / 설정 (설정창에서는 MeaXure가 자동으로 표시하는 값의 종류를 정할 수 있음 Pixel /Point , Color Hex / RGB 등)

5번의 영역은 생각보다 잘 이용하면 편한 기능입니다.

개발 가이드가 물리적으로 표시되기에, 디자인 수정이나 png추출 등 가이드 작업이 아닌 경우에는 레이어 눈을 숨김으로써 작업을 편하게 할 수 있고, 최종 산출물 정리 시 가이드를 제거한 스케치 파일이 필요할 경우에도 한 번에 가이드를 제거할 수 있습니다.
설정의 경우 가이드 작업 전에 해상도나 컬러 값, 수치 값 등을 작업에 맞게 설정하시는 것을 추천드립니다. 보통 이렇게 제작되는 가이드는 퍼블리셔 또는 앱 개발자를 위한 경우가 많기 때문에, 저장된 값으로 1~3번의 값이 표시되니까요.

마지막으로 이렇게 생성된 가이드를 공유하는 것은 가이드 내보내기를 통해 가능한데요.
내보낼 가이드를 Export창에서 선택하고 추출하면 가이드 폴더가 형성됩니다.
폴더의 구성은 일반 모드와 advanced 모드가 다릅니다. 일반 모드의 경우 가이드를 확인할 수 있는 로컬의 html 파일만 생성되며, advanced의 경우 스케치상에서 슬라이스 된 오브젝트를 asset폴더에, 선택된 레이어들의 png파일을 preview폴더에 추출해줍니다.

폴더에 생성된 html 파일들은 로컬 파일이어서 인터넷이 연결되지 않은 환경에서도 확인이 가능합니다.
일반 모드에서는 각 페이지가 해당 페이지 이름으로 형성이 되며, acvanced모드에서는 Index.html 파일이 생성되고, links폴더에 각 페이지 이름으로 형성됩니다. 각 페이지 이름의 파일은 일종의 해당화면 바로가기 파일이며, index 파일은 가장 최상위의 화면이 디폴트로 열립니다.

index.html 파일을 열면 브라우저에 다음과 같이 실행이 됩니다. 다른 화면도 좌측에 표시되지만, 디폴트는 최상위의 화면으로 열립니다. MeaXure로 가이드를. 표시해준 부분들이 디폴트로 노출됩니다. 마우스를 클릭하면, 툴바 가이드로 잡지 않은 부분의 값을 화면 위와 우측의 properties 화면에 노출시켜줍니다.

숫자 1로 표시된 메모 또한 마우스 호버로 내용 확인이 가능합니다. 가이드를 물리적인 레이어로 생성하지 않더라도 어느 정도의 화면 가이드는 제플린과 동일하게 사용 가능합니다.

다만 오프라인의 로컬 파일로써 구성되기에 한계도 명확합니다. 스케치 심벌의 교체와 상관없이 화면 내의 명칭을 들고 오는 점이나, 실시간으로 업데이트가 적용되는 인터넷이 아니기에, 로컬 파일이 업데이트되어도 공유폴더를 새로고침 하지 않으면 업데이트가 적용되지 않습니다. 보통은 공유폴더에서 로컬로 다운로드 받아 확인하는 경우가 많아서 정해진 업데이트 시기를 지키거나, 업데이트 시에 명확하게 공지하는 것이 중요합니다. (로컬로 다운로드하여 사용하는 이유는 주로 공유폴더의 속도 문제가 많습니다.)

장단점이 있는 MeaXure지만, 모든 수치를 표기해야 하는 ppt가이드에 비하면 필요한 부분만을 가이드하고 메모함으로써 간편하게 대응할 수 있으니 제플린을 대체하는 용으로 부족함이 없을 듯합니다.
이상으로 제플린을 사용할 수 없을 때 유용한 가이드 플러그인 MeaXure에 대한 소개를 마칩니다.

– 가치디자인그룹 조현경

스캐치 입문과 협업 그리고 개발가이드
https://blog.rightbrain.co.kr/?p=9567

스케치 라이브러리 구축 프로세스
https://blog.rightbrain.co.kr/?p=10375

스캐치 뉴비를 위한 10가지 팁
https://blog.rightbrain.co.kr/?p=8468