Home 디자인 이번주에 만난 매력적인 디자인툴 4

이번주에 만난 매력적인 디자인툴 4

911

 

디자인을 계속 공부해야만 하는 이유

여전히 디자인은 기획자인 제게 어려운 분야이지만, 꾸준히 관심을 갖고 공부를 하고 싶은 분야이기도 합니다. 디자인도 세부적으로, 단계적으로 접근해야할 다양한 분야가 존재하지만요. 디자인은 디자이너가 하면 되지, 라는 아주 단순 무식한 생각을 바꾸게 된 계기는 ‘창업’이었습니다. 디자이너와 직접적으로 부딪히며 일을 해본 것은 처음이었고, 이로 인해 디자이너를 잘 이해하지 못한 저는 결국 디자이너의 ‘부재’라는 상황을 맞이해야만 했습니다. 그때, 급하게 속성으로 인디자인 등의 디자인 툴을 배우며 매거진을 직접 제작해보기도 하고, 박스가 포함된 패키지 디자인을 하며 조금씩 기획자의 시각이 아닌 디자이너의 시각에서 프로젝트를 바라보는 방법을 배울 수 있었습니다. 결정적으로 네이버에서 진행하는 UXDP에 참여하며 단순 분류인 ‘디자이너’라는 개념이 아니라 UX/UI 디자인, BX 디자인, GUI 디자인 등의 개념과 역할을 이해할 수 있었죠. 지금도 저는 디자이너와 일을 하고 있고, 앞으로도 디자이너와 일을 할 수 밖에 없기에 – 공부를 계속 하고 있습니다. 다양한 툴을 활용해보는 것 역시 그 과정의 일부라고 할 수 있을 것 같네요 🙂 지난 콘텐츠들을 살펴보니 디자인 툴을 소개하는 것은 정말 오랜만인 것 같습니다. 

 

첫 번째, Lottie

 

오늘 첫 번째로 소개드릴 디자인 관련 툴은 ‘Airbnb’가 공개한 ‘Lottie’입니다. ‘Adobe’의 ‘After Effects’를 활용한 애니메이션을 실시간으로 랜더링 해주는 툴으로,  iOS와 Android는 물론 React Native에서 활용가능한 애니메이션 라이브러리를 제공해줍니다. 최근 신규 유저를 위한 온보딩 과정 중, 튜토리얼이나 스플래시에서 애니메이션을 활용하는 경우가 많아지고 있는데요! 보통은 화면 크기에 맞는 여러 이미지와 함께 수많은 코드를 작성해야 하는데, ‘Lottie’를 활용하면 오픈 소스를 활용하여 풍부한 애니메이션을 쉽게 적용할 수 있습니다. ‘Lottie’에서 제공하는 라이브러리의 경우 ‘bodymovin’이라고 불리는 ‘After Effects’에 의해 출력된 ‘Json‘을 기반으로 구성되어 있으며, ‘shape layers, masks, alpha mattes, trim paths, dash patterns’ 등의 기능을 지원하고 있습니다. 아직은 초기 단계라 많은 기능을 제공하지 않지만, ‘Airbnb’가 밝힌 ‘Lottie’의 목표는 가능한 한 많은 ‘After Effects’ 기능을 지원하여 단순히 특정 아이콘을 위한 애니메이션이 아닌 그 이상의 것을 만들고 적용할 수 있는 것이라고 합니다. 지금도 마음에 쏙 들지만, 앞으로가 더욱 기대되는 툴이 아닐까 싶네요!

 

두 번째, WebGradients

 

두 번째로 소개드릴 서비스는 ‘WebGradients’로, 웹 또는 모바일 디자인에서 사용할 수 있는 배경(그라디언트) 180개를 제공해줍니다. 원하는 배경을 선택하면 자세한 내용을 살펴볼 수 있으며, PNG 파일로 다운로드는 물론, CSS 코드를 복사하여 바로 적용을 해보는 것도 가능하죠. 또한 PSD와 스케치 형태(유로)로 180개의 배경을 한꺼번에 다운로드 받아 디자인 작업 및 과정에서 사용할 수도 있습니다. 180개를 모두 사용해보고 싶을만큼 퀄리티가 좋아 저도 한 번씩 들어가 확인해보고 테스트를 해보고 있네요 🙂

 

세 번째, Mockuuups

앱을 소개하는데 있어 다양한 목업을 활용하는 것은 정말 중요한 요소 중 하나지만 적합한 목업을 찾고, 거기에 맞춰 앱 또는 서비스 화면을 등록하는 것이 그리 쉬운 일은 아닙니다. 그렇게 알게된  ‘Mockuuups’의 경우 윈도우 또는 맥에서 사용가능한 서비스로 다양한 목업에 원하는 이미지를 바로 삽입해 한 눈에 확인이 가능하며, 바로 다운로드를 할 수 있도록 도와주는 아주 유용한 툴입니다. 무료로도 사용 가능하지만, 월 5달러를 결제할 경우 프리미엄 콜렉션이라는 이름으로 제공되는 색다른 목업을 제공해주며 포토샵과 스케치로 불러와 작업을 할 수 있습니다.  

 

네 번째, Httpster

오늘 마지막으로 소개드릴 서비스는 ‘Httpster’입니다. 월 별로 인상적인 웹사이트를 소개해주는 곳으로, 쉽게 접할 수 없는 인상적이고 색다른 곳만을 큐레이션 해주기에 한 번씩 들어가 구경하기에 더없이 좋은 곳이기도 하죠. 리스트 중, 원하는 디자인을 선택하면 상세 정보를 볼 수 있으며 해당 웹사이트로 바로 이동해 실제 모습을 확인해볼 수도 있습니다. 자체 웹디자인도 정말 재미있는데요! 오른쪽 사이드에 눈금으로 월을 표시하고 있으며, 사이드 메뉴를 선택하면 컬러풀하게 정렬된 태그를 확인할 수도 있습니다 🙂

 

8 COMMENTS

Comments are closed.