🔥 업무 생산성이 높아지는 레퍼런스 관리 편

지난 뉴스레터를 아직 보지 못하셨다면, 아래 링크를 통해 확인해주세요!

👀 오늘 소개할 서비스 4

1. 컬렉션과 섹션에 따라 레퍼런스를 관리할 수 있는, Substratum

업무 상황에 따라 조금씩 다를 순 있지만 레퍼런스를 찾고 정리하는 게, 이제는 업무의 주요 과정으로 자리 잡았어요. 문제는 어디에서 레퍼런스를 관리할 것인지에 대한 답이에요. 업무 성격에 따라 평소 참고자료를 얻기 위한 노하우 등을 찾아보면 그 방법 역시 다양하다는 것을 알 수 있는데요. 첫 번째는 무료 버전으로도 2명이 함께 레퍼런스를 수집하고 쉽게 공유하며, 관리할 수 있는 서비스를 소개할게요.

‘Substratum’은 ‘파일' 단위의 레퍼런스를 ‘누군가'와 함께 쉽게 관리할 수 있도록 도와주는 서비스입니다. 웹 버전(크롬 확장프로그램 포함) 또는 맥 전용 프로그램으로 사용하실 수 있습니다. 회원가입이 필요하며, 무료 버전으로도 500개의 파일 등록과 2명 이상이 함께 사용할 수 있습니다. 

회원가입 및 로그인 후 가장 먼저 할 수 있는 행동은 ‘컬렉션' 생성인데요. 왼쪽 아래 위치한 ‘새로운 컬렉션 생성' 버튼을 클릭하면 이름을 입력할 수 있으며 별다른 추가 과정 없이 만들 수 있어요. 컬렉션은 레퍼런스를 구분 짓는 대표적인 개념으로 프로덕트 디자인, 웹 디자인, 그래픽 영감 등 스스로가 필요한 텍스트를 입력해 활용할 수 있어요. 위 이미지 속 ‘커뮤니티’가 컬렉션이며, 컬렉션에는 ‘글쓰기’, ‘신고하기’ 등의 섹션을 추가해 기능 단위 등으로 레퍼런스를 수집하고 관리할 수 있죠.

등록된 파일 중 하나를 선택하면 상세 모습을 볼 수 있어요. 원본 비율 그대로 확인할 수 있고, 상단에는 해당 섹션에 담긴 파일의 전체 개수를 알 수 있어요. 화살표를 클릭해 자연스레 섹션에 담긴 전체 레퍼런스를 하나씩 확인할 수 있는 모습이기도 해요.

파일 뷰어 오른쪽에는 레퍼런스 공유, 이름 변경, 삭제 버튼이 차례로 자리 잡고 있어요. 컬렉션 - 섹션 - 특정 파일을 손쉽게 공유할 수 있어 링크를 문서에 삽입하거나 내부 채널에 전달하기 좋죠. 저는 개별 링크를 생성해 문서 내 참고 사례로 언급 시 자주 활용하고 있어요(컬렉션 단위의 공유도 가능). 파일을 업로드하면 파일명이 그대로 이름으로 사용되기에 나중에 다시 볼 때 헷갈리지 않도록 이름을 쉽게 변경할 수 있는 기능도 유용하죠.

Substratum 자세히 보기

2. 핀터레스트의 불편을 해결하기 위해 시작된, Savee

다음으로 소개할 서비스는 핀터레스트를 잘 사용하던 두 명의 사용자이자 친구가 기존 서비스의 불편을 해결하고자 만든 곳으로, 디자인과 관련된 다양한 영감을 더 직관적으로 수집하고 관리하는데 초점이 맞춰져 있어요. 두 명의 친구는 광고가 없는, 최소한의 화면으로 영감이 될 수 있는 콘텐츠를 탐색하고 수집할 수 있는 환경을 만들고자 했어요. 광고의 홍수, 지나치게 많은 기능 속에서 우리를 구하자는 의미로 ‘oh wait, save me’를 떠올렸고 그렇게 ‘savee’라는 이름의 서비스가 2016년 베타 버전으로 시작되었죠.

‘Savee’는 웹과 모바일앱으로 사용할 수 있어요. 웹에서는 사용자들이 등록한 다양한 이미지 중심의 콘텐츠를 확인할 수 있고, 원하는 대상을 선택해 바로 ‘저장’할 수 있는 구성이죠. 눈에 띄는 기능은, 탐색 시 고정된 레이아웃이 아니라 사이즈와 여백을 설정할 수 있다는 점이에요. 웹에서는 한 화면에서 스크롤 없이 볼 수 있는 이미지가 많기에 각자 원하는조건에 따라 탐색할 수 있는 환경을 만들 수 있어요. 

검색을 통한 레퍼런스 수집도 가능해요. 검색 대상은 크게 두 가지로 하나는 이미지, 하나는 사용자예요. 소셜의 개념이 포함되어 있어서 특정 사용자를 팔로우하면 그 사람이 저장하거나 업로드한 이미지를 핀터레스트의 ‘보드’ 형태로 확인할 수 있죠. 제가 자주 사용하는 기능 중 하나는 ‘컬러로 검색하기’인데요. 원하는 컬러를 선택하면 그 컬러가 포함된 이미지를 빠르게 모아볼 수 있어요.

탐색 중 특정 이미지를 클릭하면 저장, 조회수 정보를 볼 수 있고 포함된 컬러값을 확인할 수 있는데요. 컬러 중 하나를 선택하면 검색 결과 화면으로 이동해 해당 컬러가 포함된 이미지만 모아볼 수 있어요. 상세화면에서도 생성한 보드에 이미지를 저장할 수 있고요.

저장한 이미지는 하나의 화면에서 모아볼 수 있고, 핀터레스트와 같이 보드를 만들어 관리할 수 있어요. 여기서 눈에 띄는 기능은 ‘임포트(import)’로 핀터레스트에 저장한 데이터를 가져올 수 있는 환경을 제공해요. 이미지를 직접 등록하는 것도 가능하죠. 또 크롬과 사파리 확장 프로그램을 지원해 웹서핑을 하다 발견한 이미지를 빠르게 저장할 수 있어요.

Savee 자세히 보기

3. 내 앨범 속 캡쳐된 레퍼런스를 위한, SOURCE

세 번째로 소개할 서비스는 레퍼런스 중에서도 특히, 앱 스크린샷 레퍼런스에 최적화된 서비스 ‘쏘스’입니다.

디자이너분들이라면 기존에 'WWIT'이나 'Mobbin'과 같이 앱 스크린샷을 제공하는 서비스에 익숙하신 분들이 많으실 텐데요! 쏘스는 내가 직접 앱 스크린샷을 저장하고, 빠르게 찾아볼 수 있게 정리할 수 있는 서비스입니다.

앞서 말한 서비스들에서 확인할 수 있는 스크린 사례들도 유용하지만, 가끔은 정말 필요한 ‘그’ 화면을 찾기 어려울 때가 분명히 있어요. 그럴 때 저는 다양한 서비스를 탐색하면서 열심히 캡처를 하는데, 그 이미지들은 다시 찾아보기가 어렵다 보니 결국엔 다시 잘 보지 않게 되더라고요. 저 같은 사람을 위한 서비스인 셈이죠!

사용 방법도 굉장히 직관적인데요. 간단한 가입을 거치면 바로 스크린샷을 업로드할 수 있어요. 폴더와 태그를 활용해 프로젝트마다 필요한 레퍼런스를 정리할 수 있게 되어있고요. 특정 부분에 메모를 남기고 싶은 경우 피그마처럼 PIN을 찍어 메모도 작성할 수 있는데, 이 점이 매우 편하더라고요! 아, 그리고 웹으로도 제공하고 있어 기기를 옮겨가며 저장하지 않아도 된다는 점도 좋았어요.

SOURSE 자세히 보기

4. 서비스 플로우까지 확인할 수 있는, MOBBIN

마지막으로 소개하려는 Mobbin은 아마 익히 들어보셨을텐데요. 해외 서비스들의 iOS와 안드로이드 화면을 살펴볼 수 있는 서비스입니다. 여기에 스크린샷을 저장하고 관리할 수 있는 기능이 있다는 사실, 알고 계셨나요?

Mobbin에는 매우 방대한 양의 스크린샷을 제공하고 있는데요. 그렇기 때문에 원하는 화면을 잘 찾을 수 있도록 OS, Apps, UI Element 등 다양한 카테고리를 제공해요. (UI element로 검색이나 필터 기능 등 일부 기능은 월 8달러의 유료 결제가 필요해요)

모빈에서 탐색 중에 마음에 드는 이미지를 발견했다면 좋아요를 누르거나, 컬렉션을 만들어 저장 및 관리할 수 있어요. 컬렉션에 직접 업로드도 가능하구요. 또 피그마 플러그인을 제공하고 있어서 하나씩 복사할 필요 없이 원하는 이미지들을 빠르게 불러올 수도 있답니다.

탐색 도중에 관심이 가는 화면이 있어 클릭해보니, 해당 화면을 기준으로 그 화면과 연관된 다른 화면들까지 함께 볼 수 있어요. 게다가 영상과 프로토타입도 제공해 직접 사용해가면서 파악할수도 있는데요! 디자인을 하다보면 플로우나 여정에 대한 이해도 중요하기 때문에, 이미지 레퍼런스와 더불어 플로우와 단계를 함께 확인할 수 있다는 건 정말 유용한 기능이라는 생각이 들었어요.

또 IA(정보 아키텍처)까지 확인할 수 있다는 점도 인상깊었는데요. 해당 기능은 유료지만, 검색창에서 제공하는 몇 가지의 서비스들은 무료로 제공되고 있었어요. (airbnb 등) 모빈은 마치 앱 레퍼런스 관리 툴이 이상적으로 제공해야 할 모든 기능을 갖추고 있는 것 같았는데요, 몇 년전까지만 해도 이렇게 발전할 줄 몰랐는데 개인적으로 매우 놀랐답니다. 이번 기회에 한 번 둘러보시는걸 추천드려요! 

Mobbin 자세히 보기

이런 서비스도 있어요!

마이크로카피는 국내 주요서비스의 문구 사례를 상황에 따라 살펴볼 수 있는 서비스예요. 작년 11월 베타로 오픈이 되었고 현재 가입/로그인 안내, 알림요청, 검색, 검색결과없음, 네트워크 오류 등 다섯 가지 카테고리와 서비스에 따른 사례를 확인할 수 있어요. 

화면 사례도 그렇지만, 문구는 사례를 찾아보기가 더 어렵고 귀찮은데요. 위 이미지와 같이 여행(서비스 카테고리), 검색(사례 카테고리) 등의 조건에 따라 문구를 빠르게 살펴볼 수 있고 검색 기능도 지원하기에 문구를 살펴보기 좋은 환경을 제공합니다. 

마이크로카피 자세히 보기

디자인 업무 효율을 높여주는 툴을 만들고 있으신가요? 

📮 광고 및 제휴 문의: https://tally.so/r/wa5WKE

💬 다음 뉴스레터는 6주 후 발행될 예정입니다.

'업무 생산성을 높이는 디자인 툴'을 소개하고 싶은 마음으로 뉴스레터를 시작했는데요. 첫 뉴슬레터에서 말씀드렸던 것처럼 다섯 개 정도를 테스트로 발행한 뒤 반응을 확인, 계속 발행할 지 여부를 결정하기로 했었어요. 다행히 많은 분들이 좋아해주셨고, 기존의 피드백과 이번 뉴스레터에서 남겨주신 피드백을 바탕으로 구성 등을 보완해 정식 뉴스레터로 발행할 예정입니다. 아래 링크를 통해 다음 뉴스레터에 반영되었으면 하는 점을 남겨주세요. 더 좋은 모습으로 찾아 올게요! 

링크를 통해 뉴스레터에 대한 의견을 남겨주세요. 꼭 소개 되었으면 하는 툴도 좋고, 다음에 꼭 다뤘으면 하는 주제도 좋아요! 

팁스터 뉴스레터의 공식 오픈채팅방에 참여해보세요!

팁스터 뉴스레터에서는 프로덕트와 관련된 다양한 주제의 콘텐츠를 발행하고 있어요!

멤버십 콘텐츠 중 '캠핑'편은 무료로 체험하실 수 있어요!