What’s on our mind?

Collection of articles, design, site, and resources made by designers and publisher @Menu View

지난 2017년 동안 가장 있기 있는 디자인 툴에 대해서 소개하겠습니다. 적합한 디자인 툴의 사용은 생산성을 높일 수 있는 좋은 방법입니다.

Introduction

우리는 이미 가장 인기있고 현대적인 와이어프레임 및 프로토타입 툴을 사용하고 있습니다. 이제는 한단계 더 나아가 실제 디자인을 만드는데 도움이 되는 툴과 디자인 프로세스를 중심으로 살펴볼 때 입니다. 숙련된 디자이너 또는 초보 디자이너든 가장 중요한 건 자기한테 맞는 디자인을 툴을 사용하여 효율성을 높이는 것입니다.

Choice!

  • 만약 당신이 Mac OS를 사용하고 UI디자인에 관심이 많다면 Sketch를 추천합니다.
  • 만약 당신이 디자인과 프로토타입을 같이 하고 싶다면 Adobe XD를 추천합니다.
  • 만약 당신이 디자이너가 없어 실시간 협업 기능을 갖춘 프로그램을 찾는 다면 Figma를 추천합니다.
  • 만약 당신이 벡터 기반의 편집 플랫폼을 원한다면 Affinity Desinger 또는 Gravit Desinger를 추천합니다.



Sketch

맥용 전용 - 99$
스케치는 UI 디자이너에게 가장 인기 받는 프로그램입니다. 스케치는 UI/UI 디자이너를 염두해 만든 벡터 기반의 디자인 도구입니다. 기본적인 기능은 벡터 기반의 UI 선택 툴을 사용하면 그 외에 기능은 플러그인을 제공하고 있습니다.
스케치에서 가장 강력하고 시간을 줄일 수 있는 기능은 아이콘이나 기호를 만드는 능력입니다. 이러한 맞춤화된 기능은 일관된 스케치의 설계 시스템 때문입니다. 또한 44버전 이후부터는 반응형 웹 디자인 기능을 추가하고 있으며, 상위 박스를 조절하면 안에 내용들도 자연스럽게 조절됩니다.
장점
  • 사용자 중심의 UI
  • 심플하고 쉽다.
  • 확장가능한 플러그인 기능
  • 커뮤니케이션이 좋다
단점
  • 맥 전용 프로그램
  • 버그가 가끔 있다.
  • 충돌 현상이 있음



Adobe XD

윈도우10, 맥 - 한달에 9.99$
Adobe XD는 디자인과 프로토타입을 모두 처리하는 디자인 툴입니다. 현재 베타버전이 끝났으면, CC버전으로 사용할 수 있습니다. XD에는 사용자가 원하는 대로 구성할 수 있는 다양한 크기 및 설정이 가능합니다. XD는 정렬 및 부울 연산에 필요한 기본적인 유틸리티를 비롯하여 UI설계에 필요한 다기능 편집 도구 세트를 제공합니다. XD에서도 기호를 사용할 수 있지만, 각 객체의 속성을 변경하기 위해서는 깊게 파서 보아야 할 것입니다. 각 기호의 값을 편집할 수 있는 속성 패널에서 사용할 수 있는 상품 필드의 부족은 일부 사용자에게는 끌 수 있습니다.
장점
  • 디자인과 프로토타입이 가능함
  • 성능이 뛰어나고 가벼움
  • 매끈한 인터페이스 디자인
단점
  • 현재까지는 없음



Gravit Designer

Cross Platform(브라우저에서도 가능) - 무료
그래빗은, 이미 약속된 여러 기능을 고려할 때, 최근에 내가 발견한, 너무 좋아서 믿을 수 없는 벡터 기반의 디자인 툴이다. 하지만 잠시 후에, 저는 그것이 어디에 서 있는지 용케 느낄 수 있었고 꽤 인상 깊었어요. 시작하기 전에, 완전히 무료이며, 최신 브라우저나 기본 MacOS, Windows또는 Linux앱으로 실행할 수 있습니다. 이러한 웹 네이티브 가용성은 대개 성능 균형을 유지하지만, 작은 문서의 병목 현상을 알아차리지 못 했습니다.
기본 UI작업 공간 배열은 다양한 방식으로 스케치에 의해 영감을 받은 것으로 보이며, 자홍 색 색조로 눈에 띕니다. 저는 잠시 후에 좀 정신이 산란해 지기 시작했습니다. UI에 대한 이 이상한 색상 선택에 대한 회사의 브랜딩 결정은 이해할 수 있지만, 접근성과 사용자 환경에 어떤 영향을 미치는지 확신할 수 없습니다. 나중에 UI의 기본 색을 사용자 지정하는 옵션을 제공하기를 바랍니다.
장점
  • 무료
  • 모든 기기에서 지원 - 크로스 플랫폼
  • UI 디자이너를 위한 툴
단점
  • 가끔 버그 발생
  • 스케치의 가져오기 기능이 안됨
  • 불필요한 기능들이 있음



Affinity Designer

윈도우, 맥 - 49.99$
어피니티 디자이너는 2014년 말 SerifLabs에서 출시한 강력한 벡터 기반 설계 툴입니다. 일부 대안 제품에 비해 저렴한 가격대로 제공되며, 2016년 11월부터 기본 Windows앱으로 제공될 예정입니다. 즉시 사용자가 원하는 대로 사용자 지정하고 이동할 수 있는 도구 모음과 패널 및 사용자 지정할 수 있는 미리 설정된 모든 도구가 포함된 현대적이고 직관적인 UI와 함께 제공됩니다. 각 개인 설정은 특정 태스크 집합을 처리하기 위해 레이아웃을 업데이트합니다. 그리기 Personalization은 벡터 그리기를 설정하여 벡터 그리기를 위한 올바른 도구에 액세스 할 수 있도록 설정합니다.
기호는 어피니티 디자이너에서도 사용할 수 있지만, 스케치에 사용된 기호만큼 강력하지는 않습니다. 기호를 만들고 중첩시킬 수는 있지만 사이드 패널에서 값을 변경하는 것만큼 쉽게 개별 기호 속성을 처리할 수 있는 유연성이 없습니다. 예를 들어 디자인 전체에 반복되는 버튼 기호가 있는 경우 한 인스턴스의 값(예:배경 색)을 변경하면 다른 인스턴스도 업데이트되지만 이 기호 내부에서 직접 텍스트 계층 값을 편집할 수 없습니다.
장점
  • 크래스 플랫폼 - 윈도우, 맥 사용 가능
  • 모든 기기에서 지원 - 크로스 플랫폼
  • UI 디자이너
단점
  • 가끔 버그 발생
  • 스케치의 가져오기 기능이 안됨
  • 불필요한 기능들이 있음



Figma

크로스 플랫폼(브라우저에서 가능) - 개인은 무료, 팀은 한달에 12$
Figma는 디자이너들을 위한 GoogleDocs라 불리는 강력한 웹 기반 디자인 도구로, 프리랜서들과 팀들을 위한 무료 및 유료 계획과 함께 제공됩니다. 보통은 브라우저 기반 툴에 대해 회의적입니다. 브라우저 기반 툴은 대개 전체 제품을 사용할 수 없게 만드는 일부 세부 정보를 처리하는 데 대개 상당히 서투릅니다. 하지만 Figma는 이 경우에 제가 틀렸다는 것을 보여 주었고, 어떤 웹 기반 디자인 생성 앱이 얼마나 가능한지에 대해 제게 깊은 인상을 주었습니다. 기호는 Figma의 구성 요소라고 하며, 이 결정은 현대적인 프런트 엔드 웹 개발 동향과 기술에 따라 결정된다고 생각한다. 또한 다른 팀원들이 사용할 수 있도록 구성 요소를 게시할 수도 있으며, 이를 위해서는 팀에 대한 유료 가입이 필요합니다.
또한 기본적인 모양과 펜 도구를 사용하여 변환 속성을 정렬하고 변경할 수 있는 광범위한 속성 관리자를 사용할 수 있습니다. 또한 Blandicator에 의해 영감을 받은 Bleadingmode는 다양한 레이어 스타일을 포함하고 있습니다(현재는 드롭 및 내부 쉐도우, 백그라운드 및 레이어 흐림 효과).
장점
  • 무료
  • 실시간 협업 가능
단점
  • 가끔 버그 발생
  • export 기능 한계



Photoshop

윈도우, 맥 - 한달에 9.99$
포토샵은 꽤 오랫동안 우리와 함께 해 왔고 비록 UI디자인을 염두에 두고 만들어져 있는 것은 아니지만, 여전히 이 일을 해내는데 성공했어요. 몇년 동안, 그것은 단지 일러스트레이터, 불꽃 놀이(중단된 것)또는 기가 꺾인 것을 제외하고는 다른 대안이 없기 때문에 UI디자이너들을 위한 객관적인 도구가 되었다. 사실, 여전히 대안적인 도구로 바꾸지 않은 대다수의 디자이너들이 여전히 존재한다.
포토샵의 문제점은 대부분의 사용자들이 단순히 사용하지 않거나 심지어는 알고 있는 것에 영향을 미치지 않는 수많은 도구들로 가득 차 있다는 것입니다. 만약 여러분이 몇분 동안이나 몇분 동안 푸른 색의 블루 로딩 스크린을 경험했다면, 여러분은 제가 무슨 말을 하고 있는지 정확히 알고 있을 거예요.
장점
  • 다양한 툴고 기능을 제공
  • 컨트롤 하기 쉽다
단점
  • 무겁다
  • 버그가 항상 발생