Tag: Zeplin

  • 2018년 디자인 툴 조사

    미국 유타에서 UX 매니저로 일하고 있는 Taylor Palmer(https://twitter.com/_taylorpalmer)가 진행한 조사이며, 전 세계 대상 약 2800여 명 디자이너들에 관한 설문 결과이다. 설문에서 정의하는 디자인 툴은 UX Design 관련 툴들이며, 응답자의 절대다수 또한 디지털 디자인 (웹/앱 디자인) 쪽에서 일하는 디자이너들이다.

    총 11개 분야로 설문이 진행되었으며, 분야별로 가장 많이 사용하고 있는 툴에 대해 간접적으로 파악할 수 있는 결과라고 생각된다. 본 데이터는 국내에서의 현황과는 상이하지 않을 수 있음을 참고 바란다.

    모든 익명화 된 데이터는 여기에서 다운로드할 수 있다.

    각 분야에서 최다 투표를 획득한 툴은 다음과 같다.

    1. 브레인스토밍 툴(Brainstorming & Ideation Tools): Paper / Whiteboard
    2. 유저 플로우 툴(User Flow & Site Map Tools): Sketch (https://sketchapp.com/)
    3. 와이어프레이밍 툴(Wireframing Tools): Sketch
    4. UI 디자인 툴(UI Design Tools): Sketch
    5. 프로토타이핑 툴(Prototyping Tools): InVision(classic) (https://www.invisionapp.com/)
    6. 핸드오프 툴(Handoff Tools): Zeplin (https://zeplin.io/)
    7. 디자인 시스템 툴(Design System Tools): Sketch
    8. 모니터링 툴(Experience Monitoring Tools): Hotjar (https://www.hotjar.com/)
    9. 파일 관리(File Management Tools): Google Drive (https://www.google.com/drive/)

    스케치가 많은 부분에서 1위를 차지했지만, 피그마(https://www.figma.com/)의 약진이 돋보이는 결과였으며, 많은 분야에서 스케치 다음가는 순위를 보였다. Adobe XD는 피그마(Figma)보다 비슷하거나 낮은 투표를 기록했다. (프로토타이핑 툴 분야 제외)

    더 자세한 정보는 아래 링크로 확인 바란다.

    슬라이드 자료

    원문보기
  • Zeplin integration

    Zeplin integration

    제플린(Zeplin)은 공동 작업을 위한 웹과 데스크톱을 모두 지원하는 프로그램이다. 스케치(Sketch), 어도비 XD CC, Photoshop CC, 피그마(Figma) 등과 연동하여 자동으로 작업한 결과물을 Asset 생성, 좌표값, Color Palette를 스타일 가이드로 생성해 준다.

    과거 Assistor PS를 사용하여 추출된 소스를 ppt에 정리하여 디자인 가이드 ppt 문서와 이미지 파일 asset을 개발자에게 넘겨줬었는데 몇 년 전 제플린이라는 프로그램이 나오면서 이제 제플린을 이용한 가이드를 요구하는 곳이 하나둘씩 늘어나는 추세다.

    제플린은 가이드를 생성하고 요소의 크기를 확인하는 이 모든 과정을 자동화하여 시간과 노력을 절약해준다.

    그러면 제플린에 인터그레이션 가능한 앱들이 무엇이 있는지 자세히 알아보도록 하자.

    Sketch integration

    Sketch App Icon

    Sketch 디자인에서 Zeplin으로 아트 보드를 내보내는 것은 아주 간단하다. 디자인 결과물을 내보낼 수 있으려면 데스크톱 응용 프로그램을 다운로드해야 한다. 스케치 파일에서 레이어 / 아트보드를 선택하고 ^⌘E을 누르거나 상단의 “플러그인> Zeplin> 선택된 아트보드 내보내기… “메뉴를 사용하여 내보내기 프로세스를 시작하면 된다.

    Adobe XD CC integration

    Adobe XD CC

    얼마 전 Zeplin의 새로운 Adobe XD CC 인터그레이션을 시작했다. 그 이후로 수십만 건의 디자인이 Adobe XD에서 Zeplin으로 내 보내졌다고 한다. 프로토타이핑 링크 및 그리드 내보내기와 같은 기능을 추가하여 인터그레이션 기능이 개선이 되었다고 한다. 현재 Mac/Windows 모두 지원하고 있다.

    Adobe Photoshop CC integration

    Adobe Photoshop CC

    Zeplin에 포토샵 아트보드 내보내기는 매우 간단하다. 디자인을 내보낼 수 있으려면 데스크톱 응용 프로그램을 다운로드해야 한다.

    Zeplin은 데스크톱 응용 프로그램을 설치할 때 플러그인을 자동으로 설치하며, 포토샵 메뉴의 상단 “윈도우 > 확장”에서 플러그인을 활성화해야 한다.

    Figma integration

    Figma App
  • 협업을 위한 툴 소개

    협업을 위한 툴 소개

    협업은 구글 드라이브의 핵심인 만큼, 여러 팀 중심의 협업 툴이 드라이브를 통합한 것은 놀라운 일이 아니다. 이 툴의 사용자 대다수가 이미 드라이브를 이용해 문서와 스프레드시트를 생성하고 파일을 저장하고 있기 때문이다. 구글 계정을 강력한 협업 앱 중 하나에 연결해두면, 프로젝트에 파일을 쉽게 추가하고, 작업에 연결하며, 팀원들과 공유할 수 있다.

    Trello

    트렐로(Trello)

    트렐로는 웹 기반의 프로젝트 및 작업 관리 툴이다. 프로젝트를 목록으로 나열하고, ‘카드’라고 불리는 각 아이템에는 첨부파일, 체크리스트, 이미지, 마감일자, 토론 메모 등이 포함된다. 카드는 드래그 앤 드롭으로 이 목록에서 저 목록으로 옮길 수 있다.

    트렐로의 인터페이스는 시각적으로 사고하는 사람에게 이상적이며, 업무용 팀, 개인 플래너, GTD 시스템으로 유연하게 활용할 수 있다.

    구글 드라이브에서 바로 트렐로 계정에 파일을 추가할 수 있다. 카드를 열고 ‘파일 첨부(Attach File)’을 클릭한 다음 구글 드라이브를 선택한다. 첨부할 파일을 골라 ‘선택(Select)’를 클릭하면 업로드된다.

    Slack

    슬랙

    일반적으로 팀은 여러 개의 협업 툴을 사용한다. 빠른 메시지 전달을 위한 메신저, 더 내용과 파일을 전달하기 위한 이메일 등이다. 이 경우 커뮤니케이션이 너무 복잡해질 공산이 있다.

    슬랙은 이러한 모든 커뮤니케이션을 한 데 묶은 툴이다. 대화는 채널에 정리되며, 사용자는 프로젝트, 부서, 그리고 팀별로 공개 혹은 비공개로 채널을 생성할 수 있다. 다른 팀 사람들과 공유할 파일도 첨부할 수 있다.

    Asana

    슬랙의 많은 강점 중 하나는 구글 드라이브를 포함한 다양한 서드파티 앱과의 통합이다. 드라이브 파일을 팀원들에게 공유하려면, 메시지에 링크를 복사해서 넣으면 된다. 썸네일 미리 보기도 생성된다. 파일은 드라이브의 원래 공유 설정에 따라 공유되며, 파일이 수정되면 자동으로 동기화된다. 무엇보다 첨부된 파일을 슬랙에서 검색할 수 있다는 점이 좋다.

    아사나(Asana)

    아사나는 팀 작업 추적기로 시작해서 완전한 기능을 갖춘 프로젝트 관리 툴로 발전했다. 프로젝트를 작은 작업으로 나눠서 협업자들에게 할당하고, 팀원들과 커뮤니케이션하고 목표나 마감일 등을 추적할 수 있다.

    Zeplin

    물론, 아사나에 프로젝트 파일을 업로드할 수도 있다. 아사나의 작업 관리 창에서 클립 모양 아이콘을 클릭하고, ‘구글 드라이브에서 파일 첨부(Attach From Google Drive)를 클릭하고 파일을 선택한다. 그러면, 구글 드라이브 아이콘과 함께 첨부된다.

    제플린(Zeplin)

    제플린은 디자인 가이드라인 문서를 쉽게 도와주는 플러그인이다. 디자인 가이드라인 작업을 포토샵으로 사용해본 디자이너라면 저게 얼마나 대단한 도구인지 공감할 것이다.

    단점으로는 PDF로 출력이 안되고, 웹 기반 서비스라 인터넷이 연결되어 있어야 사용할 수 있는 제약이 존재하지만 인터넷 강국인 우리나라에서 큰 제약으로 느껴지진 않는다.