포토샵의 활용성을 높혀주는 포토샵 플러그인 소개

단축키를 뛰어넘어 업무시간을 효율적으로 줄여주는 다양한 포토샵 플러그인을 소개해 드립니다. (편의를 도와주는 웹앱도 소개합니다.)

Jinho, Jeong
Mar 7, 2014 · 8 min read

포토샵의 스크립트 기능이 추가되면서 다양한 포토샵 플러그인을 추가할 수 있게 되었는데 이 기능들이 잘만 활용하면 꽤 효율적으로 업무시간을 단축시켜주리라 본다. (뜬금없지만 가이드 제작툴은 어시스터ps!)

포토샵을 이용하여 디자인을 하는 디자이너의 단순 노동엔 무엇이 있을까? 디자이너마다 다르겠지만, 팀작업의 효율을 높혀주기 위해 레이어 이름(그룹명)을 변경하거나하는 작업은 물론, 해당 레이어를 파일로 일일이 저장하거나. 등등. 귀찮게 생각하면 끝도 없지만, 귀찮은게 사실이다.

포토샵의 플러그인은 과거 사진 필터 위주(EyeCandy 등)의 플러그인이 주류를 이루었는데, 현재는 익스텐션 스크립트 기능으로 포토샵 패널로 끌어다 사용할 수 있다.

https://vimeo.com/79765446

http://glifo.uiparade.com/
Glifo는 포토샵에서 제작된 Shape 이미지를 Web Font로 변환시켜주는 툴이다. 즉, 각 디바이스를 대응하기 위해 매번 아이콘 사이즈를 리사이징을 하거나 하는 번거로움을 해소할 수 있다는 의미이다. 대박! (CS5부터 사용가능)


iOS 7 UI Kit Photoshop Action Set
플러그인은 아니지만, 유용하기에 링크. 액션으로 제공되는 액션 셋. iOS7의 템플릿을 제공한다. 액션의 좋은 점은 디자이너가 입맛에 맞추어 다시 가공할 수 있다는 점. (인디케이터 영역의 캐리어 부분을 일부 수정한다거나. ^^)


http://bounce.uiparade.com/
이 툴은 드리블을 미니브릿지 형태로 보여주며, 드리블을 띄워놓으면서 작업을 할 수 있다. 드리블 팬보이들에겐 반가운 툴.


http://www.flaticon.com/download-plugin
Flaticon 서비스에서 내놓은 포토샵 플러그인. 웹에서 제공하던 기능을 그대로 포토샵에서 사용할 수 있다. 패널이 추가되며, 패널 실행시 바로 키워드로 원하는 아이콘을 검색하여 바로 실무에 적용시킬 수 있다.


http://lorempicsum.com/
더미로 쓰일 이미지를 각 사이즈별로 사용할 수 있는 포토샵 플러그인. 썸네일 걱정없이 바로 불러다 사용할 수 있다. (CS 및 CC도 이용가능)


http://randomuser.me/extension/
이름 그대로 유저(샘플 이미지)의 이미지를 바로바로 추출해서 쓸 수 있는 툴인데, 바로바로 테스트해보기에는 유용하다.


http://skeuomorphism.it/
이 간단한 플러그인은 그라디언트가 먹힌 레이어를 평면 디자인용으로 한방에 정리해주는 툴이다. Fuck That! Make it flat!


http://guideguide.me/
가이드 플러그인. 설정된 px값을 기준으로 캔버스에 가이드를 생성해주는 역활을 한다. CS5부터 이용가능.


http://socialkit.madebysource.com/
소셜 미디어의 템플릿을 그대로 적용시킬 수 있는 UI Kit. 패널 실행 후 클릭해보면 바로 알 수 있듯이 매우 쉽고 빠르게 소셜 미디어 플랫폼에 들어갈 디자인을 테스팅해볼 수 있다. UI Kit 자체를 PSD로도 다운받을 수 있으니 여기를 클릭.


https://www.youtube.com/watch?v=0ZMs9S9TdNE

http://css3ps.com/
선택된 레이어를 CSS값으로 뽑아서 활용하게 해주는 툴. 마크업쪽과 소통하기에 무지 편리한 툴이다.


http://www.divine-project.com/
PSD를 WordPress 테마로 변경해주는 툴. 기업 블로그로 WordPress를 이용하는 기업이라면 필수아이템이 아닐까 싶다.


http://blog.kam88.com/en/group-layer-renaming-script.html
그룹레이어의 이름을 쉽게 변경시켜주는 스크립트.


https://github.com/kynd/photoshopScripts/tree/master/Android%20DIP%20Calc
안드로이드 dp값을 계산해주는 스크립트.


http://www.cutandslice.me/
각 파트 이미지를 쪼개서 자동저장해주는 툴. 레이어앞에 간단한 기호를 삽입함으로써 다양한 저장옵션을 제공한다.


http://www.webink.com/webfontplugin/
디자인에 사용된 폰트를 직접 Web Font로 Preview 할 수 있는 툴. 사용법은 아주 간단. 선택된 텍스트 레이어에 해당 플러그인의 웹폰트 리스트를 클릭하면 바로 적용된다. Google Web Fonts를 기반으로 제공.


http://blog.kam88.com/en/transform-each-20.html
선택된 레이어의 리사이즈를 조금 더 편하게 할 수 있는 툴이다.


https://github.com/RayPS/2xScaler
무조건 2배로 뻥튀기 시켜준다. 레티나 대응을 위한 디자이너들에겐 편리.


포토샵 플러그인만 있는게 아니다! 웹툴도 있다!

포토샵을 이용해서 다양한 툴이 존재하지만, 플러그인을 굳이 인스톨 할 필요가 없고, 바로 웹에서 필요한 작업을 수행할 수 있도록 해주는 서비스들이 속속 등장하기 시작했다.

http://makeappicon.com/
각 디바이스별 아이콘 제작시 각 디바이스에 대응하는 아이콘을 만들어줘야 하는데, 그런 작업을 한방에 해결해주는 웹사이트. 결과물이 생각보다 놀랍다.


http://www.psdvalidator.com/
PSD 유효성을 검사해주는 웹서비스. 30메가까지 업로드 할 수 있다는 것이 단점이지만, 제작한 PSD가 얼마만큼 현업에 알기쉽게 제작되어 있는지 검사해볼 수 있다.


http://hangul.thefron.me/
한글입숨. 한글이 나오는 Lorem Ipsum 사이트.

그렇습니다. 여러분들이 익히 알고 계시는 그 Adobe에서 내놓은 서비스입니다. 우선, PSD를 업로드 후 분석을 해주는데요. 이후 레이어별로 폰트(심지어 텍스트 카피도 됨), 여백, 각 오브젝트를 외부로 추출해주고 CSS코드도 알려줍니다. 이걸 포토샵에서 직접 지원해준다면 정말 편리할텐데. 하는 마음은 있습니다만, 이 사이트를 이용하는 것만으로도 가슴이 두근두근 하네요.


디자이너가 직접 문제를 해결하는 세상.

해외에는 디자이너가 스페셜 리스트이면서도 코딩을 할 줄 아는 디자이너가 의외로 많다. 그런 디자이너들이 본인 스스로 불편하다고 느꼈던 부분을 세상에 공개하고 있고 앞으로도 이런 움직임은 꾸준히 나올 것 같다. (한국의 어시스터 역시 이러한 고민끝에 나온 서비스라고 생각된다.)

또한 이 글에 소개되지 않은 플러그인도 많은데 (주로 유료가 많음) 꼭 소개했으면 좋겠을 툴이 있다면 제보 부탁드립니다!

이상, 정리 끝!

Korean Design Posts

한국어(한국인들의) 디자인 관련 포스트 모음

    Jinho, Jeong

    Written by

    Product Deisnger / BUILD CDO / Loves to try new things.

    Korean Design Posts

    한국어(한국인들의) 디자인 관련 포스트 모음

    Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
    Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
    Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade