모든 디자인 영감을 구성하는 새로운 방법

제품 디자이너 및 디지털 아티스트와 같은 대부분의 창의적인 사람들은 Pinterest에 익숙합니다. 사람들은 무엇보다도 웹 사이트 디자인, 그림 및 건축에 대한 영감 보드를 구축하고 수집하는 데 사용합니다. Pinterest는 오랫동안 제 삶의 일부였으며 제 첫 번째 컬렉션은 2012년으로 거슬러 올라갑니다. 하지만 제 경력이 발전하고 제품 디자이너가 되면서 많은 측면이 저에게 적합하지 않기 때문에 도구는 저에게 덜 관련되었습니다. UI 디자이너 페르소나. Pinterest에 얽매이지 않고 내 디자인 무드보드와 리소스를 구성하기 위한 Eagle 이라는 도구의 숨겨진 보석을 발견했습니다. 이 게시물은 제가 Pinterest를 버리고 모든 전문 워크플로를 Eagle 앱으로 마이그레이션한 방법과 이유를 중심으로 합니다.

Pinterest가 제품 디자인과 관련이 없는 이유는 무엇입니까?

현재 저는 Fintech 모바일 및 웹 애플리케이션 디자인 작업을 하고 있습니다. 처음부터 시작하기 때문에 디자인 시스템을 설정하고, 대시보드 디자인을 위한 수백 가지 영감을 조사하고, 글꼴 옵션, 색상 팔레트, 아이콘 샘플, 웹사이트 디자인, 알림 톤 및 모바일 패턴을 조사해야 합니다. Pinterest에는 다양한 리소스 유형이 포함되어 있으므로 완전한 영감 목록을 작성하는 것은 불가능합니다. 위에서 언급한 각 작업을 수행하려면 특정 파일 형식을 이해하고 다양한 소스에서 영감을 얻을 수 있는 도구가 필요합니다.

여기에서 Pinterest는 영감을 수집하는 매우 간단한 도구이지만 색상, 글꼴, 오디오 및 벡터를 이해해야 하는 고급 사용 사례에서는 작동하지 않기 때문에 작동을 멈춥니다. 그래서 내 사용 사례에 더 적합한 도구인 Eagle 을 연구하고 찾기로 결정했습니다 .

시작하자!

툴링에 관한 한 Eagle 과 Pinterest는 모두 영감 수집 생태계에서 정당한 위치를 차지합니다. 내가 의미하는 바는 게시물의 끝에서 설명하겠습니다. 그러나 제품에 대한 디자인 무드보드를 구축하려면 Pinterest가 처리할 수 없는 고급 사용 사례를 처리할 수 있는 도구가 필요합니다. 빌드 및 마이그레이션 프로세스를 내가 왜, 그리고 어떻게 Eagle을 사용하는지 10가지 이유로 분류할 것입니다. 바라건대, 이러한 이유가 영감을 정리하기 위해 곧 출시될 이 도구를 탐색하도록 동기를 부여할 수 있기를 바랍니다.

01 • 빠른 영감 가져오기

내 영감의 대부분은 서로 통신하지 않는 Dribbble , Behance 및 Pinterest의 별도 폴더에 저장됩니다. 이로 인해 이러한 각 소스에서 Miro로 이미지를 수동으로 다운로드해야 합니다. 그러나 Miro는 수백 개의 이미지를 동시에 처리할 수 없기 때문에 시간이 지나면 성능이 저하됩니다. Eagle 애플리케이션은 위에서 설명한 흐름에서 가장 시급한 두 가지 문제를 해결하는 데 도움이 됩니다.

1. Pinterest, Behance 및 Dribbble 에서 이미지를 일괄 가져오기 하여 한 곳에 저장합니다. 이렇게 하면 시간이 절약되고 모든 영감을 한 곳에 보관할 수 있습니다.
2. 처리할 이미지 집합이 많은 경우 도구가 고장나지 않습니다. 사실 제가 광범위하게 사용하는 동안 그것을 위해 만들어진 것 같은 느낌이 듭니다.

Behance 와 같은 일부 사이트 는 사람들이 이미지를 다운로드하지 못하게 하는 마우스 오른쪽 클릭을 차단한다는 사실을 알고 계셨습니까? 다행스럽게도 Eagle-app은 이 JavaScript 제한을 뛰어 넘었습니다.

02 • 커뮤니티 의 리소스

약 5년 전 Sketch에서 이사했을 때 Figma 내 커뮤니티 지원은 지금까지도 다른 디자이너로부터 배우고, 동료 디자이너가 만든 무료 리소스를 다운로드하고, 직접 만날 수 없었던 사람들과 상호 작용하는 데 도움이 되는 하이라이트 기능이었습니다. 사람들이 Pinterest를 사용하는 이유는 단순히 다른 사람의 이미지를 고정하고 영감 보드를 구축할 수 있는 바로 이러한 이유 때문이라고 말할 수 있습니다. Eagle을 사용하면 영감뿐만 아니라 리소스 수집 을 위해 커뮤니티 에 관심을 돌릴 수 있습니다 . 예를 들어, 제품 디자인 UI 작업을 위한 글꼴, 아이콘, 일러스트레이션을 다운로드할 수 있습니다.

03 • 이미지 태깅 및 필터링

내 무드보드에서 엄청난 양의 영감을 수집한 후 이미지를 정렬하는 것은 악몽입니다. Eagle을 사용하면 모든 리소스에 여러 키워드로 태그를 지정할 수 있으므로 이전보다 더 빠르게 가장 관련성 높은 이미지에 도달할 수 있습니다. 예를 들어 Revolut에서 스냅샷을 수집해야 합니다. 스냅샷은 다음과 같이 분류할 수 있습니다.

1. 마케팅/프로모션 캠페인
2. 웹사이트 접기
3. 앱 패턴
4. App Store 및 Play 스토어 이미지

04 • 컬러 팔레트로 사냥하기

Eagle에서 Fintech 무드보드를 만들 때 파란색이 같거나 비슷한 사냥 이미지가 매우 유용했습니다. 핀테크 지갑 앱 세계에서 파란색은 과도하게 사용된 색상이며, 제가 영감을 얻은 수많은 앱이 파란색을 사용했습니다. 비슷한 색조의 파란색을 가진 모든 이미지를 찾는 데 오랜 시간이 걸렸을 것입니다. Eagle은 각 이미지를 필터에 사용할 수 있는 6색 팔레트로 분해하기 때문에 색상을 사용하여 이미지를 구분할 수 있습니다.

Eagle의 색상 팔레트 기능은 각 색상에 대한 HEX, RGB, HSL 및 CMYK 값을 캡처하여 다른 디자인 도구에서 나중에 사용할 수 있도록 클립보드에 복사할 수 있습니다.

05 • 90가지 파일 형식 지원

내 Eagle 라이브러리에 다양한 리소스와 자산을 저장했는데 이 도구가 지원하는 다양한 파일 유형을 보고 놀랐습니다. 모든 유형의 이미지, 3D 개체 기반 자산, Fig/PSD/Ai와 같은 도구 기반 파일, 비디오, 오디오, 글꼴, 이미지-RAW 및 XLS 및 DOC와 같은 문서 기반 형식을 포함하는 90개의 파일 유형 을 처리할 수 있습니다 . . 예를 들어 Figma는 현재 Adobe 소유이지만 AI, EPS 또는 PDF 자산과 같은 Adobe 벡터 자산을 Figma에서 단순히 열고 미리 볼 수는 없습니다. 다양한 파일 형식을 지원하는 통합 솔루션은 모든 크리에이티브에서 타의 추종을 불허합니다.

06 • 라이브 링크 저장

랜딩 페이지를 디자인할 때 웹 링크 저장 이 중요해집니다. 특정 섹션의 스냅샷은 잘리지 않는 일반적인 솔루션입니다. 일반적으로 라이브 링크 저장과 웹사이트 스냅샷이 모두 필요합니다. Chrome 플러그인 기반 도구 — FireShot 은 전체 웹사이트를 캡처할 수 있는 훌륭한 옵션이며 Eagle 과 결합 하면 웹사이트의 실제 URL도 저장할 수 있습니다. Eagle의 URL 저장의 가장 좋은 점은 도구 내에서 웹 사이트를 여는 것입니다. 이는 산만함을 줄이고 작업 흐름을 유지하는 데 탁월합니다.

07 • 중첩 폴더 관리

유사한 소스에서 이미지를 수집하면서 한 폴더를 다른 폴더와 연결하여 부모-자식 관계를 만드는 것은 정보 계층 및 관리에 좋습니다. 불행히도 Pinterest는 보드 중첩을 지원하지 않지만 Eagle은 지원합니다. 내 사용 사례의 경우 긴 앱 미리보기 목록을 캡처한 각 앱에 대한 개별 폴더를 가지고 있는 동시에 모든 Playstore 및 Appstore 이미지를 별도로 분리해야 했습니다. 사용자가 Eagle 앱을 사용하여 수행할 수 있는 모든 폴더 작업을 설명 하는 매력적인 지원 링크 를 찾았습니다 .

08 • 중복 찾기

모든 디자이너는 때로는 고의로 그리고 종종 실수로 여러 보드에 동일한 이미지를 두 번 추가하게 되는 이 문제에 직면했을 것입니다. 실습 중간에 저는 전체 라이브러리를 스캔하여 서로 다른 폴더에서 서로 동일한 사본인 67개의 이미지를 찾기로 결정했습니다. 관련 없는 중복 항목을 수동으로 삭제하고 나중에 삭제하지 않도록 메모와 함께 일부를 보관하는 발견을 게시하는 데 15분을 보냈습니다.

09 • 클립보드 또는 드래그 앤 드롭으로 작업

내 경험에서 이미 수집한 것처럼 잘 설계된 무드보드를 설정하는 것은 어려운 작업입니다. 이미지 이름, 설명 및 기타 값을 채우는 데 많은 작업이 필요하며 이는 매우 평범하다고 ​​생각합니다. 저는 보통 여러 소스에서 스크린샷을 찍은 다음 해당 스크린샷을 논리적 폴더 구조로 구성하는 데 2~3시간을 소비합니다. 스크린샷의 수는 200개 이상이 될 수 있으므로 끌어서 놓기 기능이 유용합니다. Pinterest와 달리 정리되지 않은 200개 이상의 이미지를 Eagle에 끌어다 놓고 그대로 유지하거나 필요할 때 나중에 정리하도록 선택할 수 있습니다. 이 앱은 각 파일의 이름을 지정하도록 강요하지 않습니다. 나는 일반적으로 범주화 및 대량 이름 변경 을 끝냅니다.10분 이내에 태그를 지정합니다. 또한 Figma 또는 Confluence와 같은 도구를 다룰 때 제 클립보드에서 직접 이미지를 복사하여 붙여넣을 수 있습니다.

10 • 디자인 시스템 무드 보드에 적합

결국 위에서 언급한 Eagle은 제품 디자인 무드보드를 만드는 데 아주 좋습니다. 다음은 수집 단계에서 내 무드보드 폴더 구조의 모습입니다.

나는 결국 모바일과 웹 영감을 훨씬 더 많이 수집하게 되었습니다. 전체 번들은 연간 핀테크 보고서, 색상 팔레트, 앱 흐름, 디자인 패턴, Playstore/AppStore 스크린샷, 알림음, 로고, 아이콘, 일러스트레이션 및 실제 웹사이트 URL 모음으로 구성되었습니다.

한 가지가 더 있습니다…

내가 Eagle로 달성할 수 있는 모든 훌륭한 일에도 불구하고 개선할 수 있다고 생각하는 한 가지 핵심 사항이 있습니다. Eagle은 주로 로컬에 설치된 클라이언트 기반 도구입니다. 즉, 모바일 장치에서 내 이미지를 탐색할 수 없고 iPad와 같은 온라인 전용 장치에서 내 영감에 액세스할 수 없습니다. 여전히 전체 라이브러리를 Google Drive 또는 Dropbox에 백업할 수 있지만 노트북에 액세스할 수 없으면 볼 수 없습니다. 이것이 딜 브레이커는 아니지만 이상적이지는 않습니다. 저는 새로운 프로젝트를 시작할 때 온/오프로 많은 영감을 수집하는 데 집착하는 경우가 많습니다. 즉, 출퇴근과 같은 활동을 하면서 이미지를 수집하는 경향이 있습니다.

향후 버전의 Eagle이 모바일 기반 경험을 지원할 수 있기를 바랍니다. 대용량 파일 형식을 처리할 때 해결하기가 특히 까다로울 수 있지만 온라인 버전에서 PNG, JPEG, WEBP, GIF, MP3 및 MP4 리소스만 표시하는 한 가지 방법과 기타 복잡한 파일 형식은 미리 보기에서 차단할 수 있습니다. 이 솔루션은 방대한 이미지 기반 컬렉션 세트를 다룰 수 있습니다.

이 문제에 대한 즉각적인 해결책으로 Pinterest 또는 Behance 와 같은 모바일 지원 도구를 계속 사용하여 이동 중에 아이디어와 솔루션을 캡처하고 있습니다. 나중에 전체 클라우드 리포지토리를 Eagle로 가져와 모든 아이디어를 통합할 수 있습니다.

엔딩 노트

하루가 끝나면 Eagle은 다른 도구와 같은 도구입니다. 형편없는 아이디어를 걸러내거나 멋진 앱을 자동으로 만드는 데 도움이 되지 않습니다. 그것이 하는 일은 워크플로우를 향상시켜 생산성을 높이고 실행 속도를 향상시키는 것입니다. 정리를 위해 다양한 워크플로와 도구 사이를 오가며 내 아이디어와 정보를 체계적으로 소비하는 데 엄청난 시간과 노력을 절약했습니다. 나는 그것을 염두에 두고 탐색을 시작했고 Eagle 앱 을 사용하여 정확히 그것을 달성했습니다 . 복잡한 자산 집합을 구성하고 리소스에 대해 수많은 실제 작업을 수행하는 데 도움이 되는 놀라운 도구를 찾고 있다면 더 이상 찾을 필요가 없습니다.

이것으로 짧지만 통찰력 있는 읽기의 끝입니다. 끝까지 해주셔서 감사합니다. 나는 당신이 그것으로부터 뭔가를 얻었기를 바랍니다.

‍ LinkedIn , Twitter , Figma , Dribbble 및 Substack 에서 내 콘텐츠 구절에 참여 하거나 내 DM 에 슬라이드 하세요 . 생각과 피드백을 댓글로 남기거나 대화를 시작하세요!