Photoshop cc
모바일 (UI/UX) 디자이너에게 필수 기능
안녕하세요. cwhboy 입니다.
최근 UI/UX 대한 고민이 참 많은 시기인 듯합니다.
세상에서는 사용자의 편의성, 사용성을 고려한 디자인을 원하지만
Photoshop cs6 만으로 이를 표현하기란 답답함이 참 많은 상황입니다.
_
Photoshop cs6의 답답함
1. 유저의 사용성(Flow) 예측 고려한 디자인을 표현하기 힘들다.
2. 많은 페이지를 관리하기가 힘들다.
3. 모바일 해상도가 커지고 있어 작업 환경이 상당히 무겁다.
4. 모니터로 모바일 환경을 예측하며 디자인해야 한다.
5. 단순 작업을 정말 많이 해야 한다.
6. 개발자와 소통은 많아지고 있는데 다른 언어로 이야기한다.
(ex. 디자이너는 @2x 이야기하고 개발자는 @1x로 이야기한다.)
이러한 답답한 상황이다 보니
오랜 시간을 독주하던 포토샵을 대체하기 위한 프로그램들이 속속 출시하고 자리를 잡아가는 모습입니다.
대표적인 프로그램으로는
목업 툴 (발사믹) > 디자인 툴 (Sketch) > 프로토타입 툴 (Framer) > 협업 툴 (Invision) 이 있겠죠.
저도 이러한 답답함을 해결할 수 있는 방법을 찾기 위해 이러 저런 공부를 하던 중...
최근 Photoshop cc에서 생각보다 많은 변화가 생겼다는 점을 발견하게 되었습니다.
사용해 보니 "어라! 생각보다 괜찮은데!"라는 생각을 하게 되어
많은 분들과 공유하고 싶어 글을 쓰게 되었습니다.
#미러링 기능
미러링은 포토샵 화면을 실시간으로 모바일 화면에 보여 주는 기능입니다.
모니터에서 보는 느낌과 모바일 환경에서 보는 느낌은 생각보다 큰 차이가 있기 때문에
수시로 이미지를 모바일로 전송 후 확인하곤 했는데
실시간으로 반영되는 기능으로 보다 정밀한 작업이 가능하게 되었습니다.
(현제 아이폰만 지원)
#artboard
artboard 기능은 간단히 말하면 페이지 기능입니다.
인디자인, 일러스터, Sketh에서 구현되던 페이지 기능과 비슷하다고 생각하시면 됩니다.
모바일 환경에서는 하나의 페이지 완성도도 중요하지만
페이지와 페이지간의 연결성, 이동성, 사용성을 함께 고려해야 하기 때문에
artboard 기능을 사용하면 페이지간의 흐름(Flow)을 상상할 수 있어 보다 사용성을 고려한 디자인이 가능합니다.
artboard + 미러링 기능을 함께 사용하면
간단히 페이지 이동성에 대한 느낌도 확인할 수 있습니다.
#링크 이미지, 링크 스마트오브젝트
이 기능은 정말 기다려 왔던 기능인데 cc에서 드디어 추가가 되었습니다.
이제 Sketch, 인디자인과 처럼 가볍고 편리하게 파일 관리가 가능하게 된 거죠 ㅠㅠ
이미지와 스마트 오브젝트를 사용하다 보면 500MB 쉽게 넘어가죠 ㅠㅠ
그럼 컴퓨터는 힘들어하고 가끔 파란 화면도 보여주곤 하죠.... 악!!ㅠㅠ
일반적인 psd방식은
다양한 이미지를 하나의 psd에 넣어 관리 하지만
링크 방식 기능이란
하나의 psd파일에 이미지(psd,jpg,png)를 링크 방식으로 불러와
따로따로 이미지(psd,jpg,png)를 편집 관리할 수 있는 방식입니다.
원본을 수정하면 그 원본을 사용한 모든 페이지에 적용이 되기 때문에
최종본 관리도 쉬워져 협업 작업도 더 강력해졌습니다.
_
링크 타입의 장점
1. 파일들을 따로 관리하여 가벼운 환경을 만들어 준다.
2. 최종본 관리가 쉽다.
3. 공동 작업이 보다 원활하게 가능하다.
4. 용량이 작아져 artboard 기능을 사용할 수 있게 되었다.
5. ex : 로고를 수정하면 모든 파일에 로고가 동시에 수정된다.
#이미지 출력하기 @1x @2x @3x
@3x 의미를 아시는 분이라면 이 기능이 궁금하실 거예요.
개발자에게 최종 이미지를 전달하기 위해
ios의 경우 @1x @2x @3x = 3가지 이미지를 전달하게 되죠.
쉬운 작업으로 보이지만 생각보다 까다로운 작업 과정입니다.
겨우 이미지 3장이라고 생각할 수 있지만
3장씩 50장의 이미지면 150번의 작업을 반복해야 하는 것이죠 ㅠㅠ
단순 작업 같지만 파일 이름도 신경 써야 하기 때문에 생각보다 집중하고 오래 걸리는 작업이다.
Photoshop cc에서는 Expoart As (Ctrl + Alt + Shift + w)
기능으로 이미지를 간단하게 저장이 가능하게 되었습니다.
아이폰의 @1x @2x @3x 뿐만 아니라
Aos 0.7% 같은 비율도 설정할 수 있어 쉽고 빠른 작업이 가능하게 되었습니다.
뿐만 아니라 png 용량을 줄이기 위해 별도의 소프트웨어나 tinypng 사이트 등을 이용해야 했지만
Smaller File (8-bit) 기능으로 빠른 작업이 가능하게 되었습니다.
약 60%~70% 용량 효율을 보여주네요.
Quick Export As
Quick Export 기능은
Export As 값을 미리 설정해둔 값으로 바로 저장해 주는 기능입니다.
실행 1 : 레이어 > 마우스 오른쪽 > Quick Export as (PNG, PNG-8, JPG, GIF, SVG)
실행 2 : File > Export > Quick Export as (PNG, PNG-8, JPG, GIF, SVG)
설정 : Edit > Preferences > Export
Quick Export as (PNG, PNG-8, JPG, GIF, SVG)
as 뒤에 나와 있는 확장자로 세팅이 되어 있다는 뜻이다.
조금 아쉬운 점은
설정이 하나만 가능한 점과
이미지 사이즈 설정은 세팅이 안 되는 점이네요.
#Design Space (Preview) 모드 (cc 2016에서만 사용 가능)
사이즈와 위치를 조절하려면 (Ctrl + T)를 이용해서 마우스로 조절하는데
조절이 자유롭다는 강점을 가지고 있지만 수치적인 작업을 하기에는 정확도가 아쉬운 점이 많죠.
Design Space 기능을 사용하면 사이즈와 좌표(x, y)를 입력하는 방식으로 조절이 가능해
보다 정확한 설정이 가능합니다.
아직 안정성과 최적화가 진해중? 인지 버그가 많고 버벅거리는 모습이 보이네요.
그냥 info에서 사용할 수 있으면 정말 좋을 텐데 아쉽네요.
※ cc 2017 버전에서 기능이 삭제되었습니다. (먼가 문제가 많았던 걸까요?)
xd를 권장하는 듯한데 아직 xd의 호환성이 너무나 떨어지네요.
#Search 기능 (Ctrl + T) 추가 (cc 2017에서 추가)
맥 OS/윈도 10 사용자라면 익숙한 기능일 텐데요.
기능, 파일, 레이어, 이미지 등을 빠르게 실행/검색할 수 있는 기능입니다.
키보드를 주로 사용하는 개발자에게는 정말 편리한 기능이죠.
마우스를 주로 사용하는 포토샵에서
마우스를 사용하다 키보드를 두드리는 게 조금 어색하긴 한데 저는 나름 괜찮은 거 같아요.
아쉬운 점은
-다른 창의 레이어 검색이 안되고
-클라우드에 저장된 이미지/파일은 검색이 안된다는 거죠.
위의 두 가지 기능만 더 추가된다면 정말 강력한 기능으로 자리 잡을 듯 보입니다.
#가이드 이제 그만 하자!!
이번에 소개할 기능은 Photoshop cc 자체 기능은 아니고
Sketch에서 사용할 수 있었던 Zeplin이라는 플러그인입니다.
간단하게 설명하면 가이드 자동 생성 플러그인입니다.
Photoshop에서 작업한 이미지를 웹 환경 기반으로 분석하여
좌표값, 폰트명, 사이즈, 간격 등을 웹 환경 수치로 보여주는 기능을 가지고 있습니다.
생각보다 상당히 만족스러운 결과물을 보여주네요.
가이드 작업은 타 부서팀과 연결되는 작업 과정이기 때문에 신경이 많이 쓰이는 작업입니다.
이미지를 ppt로 옮겨, 라인을 넣고, 표 만들고, 번호를 넣고, 수치를 넣고, 글을 적고, 확인하고
실무에서는 디자인하는 시간만큼 가이드 시간이 걸린다는 말이 있죠 ㅠㅠ
( https://zeplin.io/ 다운받아 설치 후 사용이 가능합니다. )
다음 시간에서는
기능별로 보다 실무 적인 작업 과정을 알아보도록 하겠습니다.
감사합니다.
