디자인 벤치마킹 최강자 — Eagle

Dong-gri
guleum
Published in
6 min readDec 13, 2020

--

디자인 영감을 얻을 수 있는 다양한 사이트 (혹은 서비스)들이 존재하지만, 자체 스크랩 기능을 지원한다 해도 한두 곳만 이용하는 것이 아니므로 매번 불편했습니다.

Pinterest를 사용해도 결국은 로컬에 벤치마킹을…

그동안 가장 큰 대안이라고 생각한 벤치마킹 도구가 Pinterest이지만, 벤치마킹한 원본 사이즈를 얻는 방법이 불편하고 오랜 기간 사용해도 잘 익숙지 않아 주로 클라우드 동기화를 걸어놓고 로컬에 저장해놨습니다.

로컬의 단점인 저장만 하고 다시 보지 않는다는 점과 디렉터리로 분류하지만 시간이 갈수록 뒤죽박죽 해지고 큰 대안이 없어 그대로 사용하다 최근에 Eagle이라는 멋있는 도구를 발견해 지금까지 잘 사용하고 있는데요, 도메인이 .cool로 끝나는 것과 같이 쿨한 Eagle에 대해 소개해보려 합니다.

공식 홈페이지에 나와 있는 기능이 더 많지만, 제가 사용하면서 가장 만족했던 부분을 나열하자면…

다양한 포맷 지원

운영 디자인을 하면서 사용되는 일러스트나 모션이 들어간 애니메이션은 주로 Dribble에서 벤치마킹 하는데 Dribble은 트레픽 최적화를 위해 JPG나 PNG, GIF가 아닌 webm, webp, mp4 등을 사용합니다.

Pinterest에서 위 확장자를 지원하는지는 모르겠지만, OSX는 기본 미리 보기(스페이스 누르면 나오는)에서 지원하지 않아 xee 등의 별도 프로그램을 사용해야 하며, windows의 경우 코덱을 설치하면 기본 미리 보기에서 뜨는 거로 알고 있지만 기본 상태에서는 지원하지 않습니다.

다양한 포멧들을 지원해서 벤치마킹하기 수월한 Eagle (좌: PDF | 우: gif, mp4, mov를 지원하는 모습)

하지만 Eagle은 이러한 확장자들을 모두 지원하기 때문에 자료를 저장한 뒤 살펴보기가 수월합니다. 특히 PDF도 지원해서 기업 PPT나 브로슈어를 저장할 때 매우 유용합니다.

UI 인터렉션이나 애니메이션 벤치마킹 할때 장점이 극대화 되는 Eagle

특히 UI의 경우 인터렉션이나 애니메이션을 벤치마킹해야 하는 경우가 많은데, 특성상 화면을 녹화하거나 원본이 .mp4인 경우가 많아 관리하기가 어려웠는데 Eagle은 이러한 불편함을 한번에 해소시켜줍니다.

다양한 분류체계 지원

01. 이미지 태그 및 설명

우측 패널을 통해 태그와 설명, 사이트 주소등을 입력할 수 있습니다.

단순히 파일만을 저장하는 것만 아니라, 태그를 지정하고 이미지에 대한 설명 혹은 출처 등 다양한 정보를 넣을 수 있습니다. 이벤트 프로모션의 경우 목적이나 시즌에 따라 표현 방법이 비슷비슷한데 이를 태그로 묶으면 나중에 따로 모아보기가 매우 편리합니다.

02. 폴더 계층과 색상지정

하위계층을 여러개로 나눌 수 있고 색상을 지정할 수도 있습니다.

폴더 계층 또한 여러 개를 지원하고, 색상별로 구분할 수 있으며 주로 SASS 서비스를 벤치마킹할 때 서비스 이름으로 구분해 간단한 설명과 함께 몰아넣을 수 있어 Notion과 같은 별도의 서비스를 쓰지 않아도 돼서 좋았습니다.

03. 등급지정
이건 사용하다 단축키를 잘못 눌러 알게 된 기능인데, Adobe Lightroom과 같이 등급을 지정할 수 있어 벤치마킹한 자료마다 퀄리티 등을 따져 등급을 매길 수 있어 활용도가 높습니다.

유료 이미지 뷰어 뺨치는 편리함

마우스 휠 동작 시 확대/축소를 할지, 긴 이미지의 스크롤을 할지 등 가장 기본적이면서 필요한 기능을 제공합니다. 이미지 더블클릭 시 어디서 열지 등 세부적인 부분을 지정할 수 있으며 중복되는 리소스는 그대로 가져올지, 덮어씌울지 등을 선택할 수 있습니다.

한글화 지원

무엇보다 Eagle은 한글을 기본적으로 지원해서 편합니다!
xee를 유료로 사용하고 있지만 영문이라 기본적인것 빼고는 손댈 엄두가 안 나는데 이 녀석은 한글을 지원해서 익숙해지기 쉬웠습니다.

살짝 아쉬운 클라우드 동기화 지원

블랙프라이데이 할인도 안 하는 Eagle을 결제한 이유 중 하나는 클라우드 동기화가 되기 때문인데요, 회사와 개인 PC 두 디바이스에서 동일한 벤치 자료들을 보기를 원했습니다.
Eagle은 하나의 큰 디렉터리 안에 다뤄져 가장 큰 부모 디렉터리(라이브러리라고 불리는)를 클라우드 서비스별 동기화 디렉터리에 지정하면 됩니다.

집에서는 맨날 뱅글뱅글 돌고, 변경 내용이 생겼다 없어졌다 하지만 다운로드만 되고 업로드는 전혀 안됩니다.

저는 onedrive를 사용하는데, 회사 컴퓨터에서는 동기화가 제대로 되나 집에서는 다운로드만 되고 수정할 때에는 클라우드 업로드가 되지 않아 enpass와 같이 애플리케이션 내에서 직접 연동해서 관리하는 방식이었으면 좋지 않을까 하는 아쉬움이 있습니다.
혹시 한국어가 가능한 Eagle 관계자가 이 글을 본다면 참고해주시면 좋겠습니다.

다양한 브라우저, OS 플랫폼 지원

돈을 주고 사도 안 아까운 게, 일단 Windows와 macOS 둘 다 지원합니다.
또한 처럼 바로 이미지를 저장하고 스크린 캡처를 찍을 수 있는 브라우저 확장프로그램을 지원하는 데 대부분의 브라우저를 지원하고 있습니다.

좌: Pinterest Pin 우: Eagle 이미지 저장

이미지를 마우스 hover 하면 뜨는 pin 버튼을 눌러 저장하는 Pinterest은 사이트마다 Javascript의 충돌로 깨지거나, 원치않은 환경에서도 보여 불편하지만 Eagle은 이미지를 잡고 아래로 끄는 동작을 하면 쉽게 저장할 수 있어 웹서핑에 방해되지 않고 직관적 이어서 좋았습니다.

저처럼 Pinterest를 사용하기 불편한데, 로컬에서 벤치마킹을 관리하자니 다운받기만 하고 잘 보지 않으신 분이라면 Eagle을 사용해보시는 것을 적극적으로 추천합니다.

--

--