Press enter to see results or esc to cancel.

크기 표시를 초간단하게 해주는 포토샵 스크립트 Size Marks

웹사이트든 모바일 앱이든 기본적인 UI 디자인은 필수죠. UI 디자인을 실제로 구현하는 과정을 아주 간략화시키면 이런 식일 겁니다.

  1. UI를 러프하게 스케치하고 기능을 정의한다.
  2. 디자이너는 스케치한 디자인을 정교하게 그린다.
  3. 개발자는 실제로 웹사이트/앱에 기능을 구현한다.
  4. 2번과 3번의 결과를 잘 합치고 다듬는다.

이때, 2번이 먼저일 수도 있고, 3번이 먼저일 수도 있습니다. 때론 한 명이 이 작업을 모두 수행하기도 합니다. 하지만 어쨌든 저런 식으로 진행됩니다.

소통하려면 정확한 정보가 필요해

디자이너는 자신이 정교하게 그려낸 UI 요소들을 개발자가 화면에 제대로 표시하게 햐려면 각 요소의 크기나 거리, 여백, 간격 등을 정확하게 표시해야 합니다.1 디자인 문서든 UI 정의서든 이걸 분명하게 표시해 줘야죠.

그래서, 많은 디자이너가 이 정보를 노가다 기법(…)을 동원해 표시합니다. 하지만 시간도 오래 걸리고, 결과도 좀 별로입니다. 예를 들면 이런 식이죠.

매번 수작업으로 이런 작업을 하는 디자이너들이 많습니다.
매번 수작업으로 이런 작업을 하는 디자이너들이 많습니다.

이 작업을 요약해 보면 이런 식입니다.

  1. 펜슬 툴로 원하는 선을 표시한다.
  2. 마퀴 툴로 크기/길이를 잰다.
  3. 텍스트 툴로 숫자를 입력한다.
  4. 필요한 부분마다 이걸 반복한다.

이게 은근히 시간이 많이 걸립니다. 열심히 했는데, 알아보기 힘들어서 다시 해야 할 때도 있고요. 그런데 이걸 쉽게 해주는 툴이 있다면 어떨까요? 적어도 1~3번을 마우스 드래그 한 번과 단축키 입력 한 번으로 끝낼 수 있다면?

Size Marks가 쉽게 해준다

사이즈 마크(Size Marks)는 웹디자이너와 프론트 엔드 개발자를 위한 포토샵 스크립트입니다. 포토샵이 반드시 필요합니다.

마퀴 툴로 영역을 지정한 후 스크립트를 실행만 시키면 알아서 보조선을 그린 후 길이를 계산해서 표시해 줍니다. 아래의 예를 보죠.

Size Marks 제작자의 실행 예시 화면

어때요, 정말 쉽게 지정할 수 있습니다. 그럼 설정부터 어떻게 하는지 알아보죠.

설치 방법

배포 사이트에 가면 자세한 설명이 나와 있습니다. 영어가 되면 직접 확인하세요. 저는 귀찮은 분들을 위해 설명을 해드리겠습니다.

  • 배포 사이트에 가서 zip 파일을 내려받습니다. (Size-Marks.jsx-v1.0.zip)
  • 압축을 풀면 Size Marks.jsx라는 파일이 나옵니다.
  • 이 파일을 각각의 운영체제에 맞게 포토샵의 스크립트 폴더 안에 넣어줍니다.
    • 맥의 예: /Applications/[Photoshop]/Presets/Scripts/
    • 윈도우의 예: C:\[Program Files]\Adobe\[Photoshop]\Presets\Scripts
    • (포토샵 버전과 설치 위치에 따라 조금씩 다를 수 있습니다. 잘 찾으세요.)
  • 포토샵을 실행 중이었다면 종료하고 다시 실행합니다.
  • 포토샵 메뉴 File → Scripts 아래 보면 Size Marks 항목이 생긴 걸 확인할 수 있습니다.
  • 이 스크립트를 매번 메뉴를 열어서 실행할 수는 없으니 단축키를 지정해 둡니다.

이렇게 하면 기본 설정이 끝납니다. 저는 단축키를 Shift + Command(Ctrl) + 0 으로 정했습니다.2

Scripts 아래에 Size Marks가 생겼습니다.

이용 방법

이용 방법 역시 간단하게 적어봅니다.

  • 마퀴 툴(M)을 선택한 후에 영역을 지정합니다.
  • 지정한 단축키를 입력합니다.
  • 끝.

어때요, 쉽죠? 저도 해봤습니다. 아래의 동영상을 보세요.

동영상에서 저는 마퀴 툴을 이용해서 자리를 잡아주기만 했고, 보조선과 크기 표시는 스크립트 단축키를 눌러서 자동으로 한 것입니다.

이 스크립트의 실행 조건은 다음과 같습니다.

  • 마퀴 툴로 가로로 길게 지정하고 사이즈 마크를 실행하면 가로 선이 생깁니다. 이때, 선은 선택 영역 상단에 생깁니다.
  • 마퀴 툴을 세로로 길게 지정하고 사이즈 마크를 실행하면 세로 선이 생깁니다. 이때, 선은 선택 영역 좌측에 생깁니다.
  • 보조선과 길이를 표시하는 폰트의 색은 현재 선택된 전경색(foreground color)이 됩니다.
  • 표시한 보조선과 길이 표시는 투명도(opacity) 65%짜리 레이어 하나로 생성됩니다.

참고사항 / 마무리

보조선이 표시되는 방법을 변경할 수도 있긴 합니다. 현재 파일을 설치하면 pt와 px를 함께 표시해 주는데, px만 표시되게 할 수도 있고, 경우에 따라 보조선과 폰트의 투명도를 65%가 아닌 100%로 할 수도 있습니다. 단, 스크립트에 대해 알아야 수정이 가능합니다. .jsx 파일을 열어서 수정하시면 됩니다. 3

시중엔 좀 더 복잡한 방식으로, 무거운 스크립트나 액션들도 여럿 있지만, 손에 익히기가 좀 어려운 것들이 많습니다. 유료인 것들도 있고요.

반면에 이건 매우 간단하면서도 가려운 곳을 잘 긁어주는 스크립트입니다. 가볍기도 하고, 빠르기도 하고요. 게다가 무료입니다. 포토샵의 가이드라인(안내선) 기능과 함께 이용하면 편리할 것 같습니다. (^^)

사이즈 마크와 함께 우리 모두 편하고 빠른 개발 환경 유지해 보아요. :-)


  1. 기획자 역시 개발자가 자신이 의도한 기능을 제대로 구현하게 하려면 기획서에 어떤 요소가 어떻게 작동해야 하는지 상세하게 적어야 합니다.

  2. 스크립트 제작자는 Shift + Command(Ctrl) + P 가 좋을 것 같다고 했지만, 저는 이미 이 단축키를 다른 용도로 이용하고 있어서 다른 걸로 등록했습니다.

  3. 저도 pt는 빼고 px만 표시되게 수정했습니다.