지난 뉴스레터를 아직 보지 못하셨다면, 링크를 통해 확인해주세요!
👀 오늘 소개할 서비스 4
- 컬렉션과 섹션에 따라 레퍼런스를 관리할 수 있는, Substratum
- 핀터레스트의 불편을 해결하기 위해 시작된, Savee
- 내 앨범 속 캡쳐된 레퍼런스를 위한, SOURCE
- 서비스 플로우까지 확인할 수 있는, MOBBIN
1. 컬렉션과 섹션에 따라 레퍼런스를 관리할 수 있는, Substratum
업무 상황에 따라 조금씩 다를 순 있지만 레퍼런스를 찾고 정리하는 게, 이제는 업무의 주요 과정으로 자리 잡았어요. 문제는 어디에서 레퍼런스를 관리할 것인지에 대한 답이에요. 업무 성격에 따라 평소 참고자료를 얻기 위한 노하우 등을 찾아보면 그 방법 역시 다양하다는 것을 알 수 있는데요. 첫 번째는 무료 버전으로도 2명이 함께 레퍼런스를 수집하고 쉽게 공유하며, 관리할 수 있는 서비스를 소개할게요.
‘Substratum’은 ‘파일' 단위의 레퍼런스를 ‘누군가'와 함께 쉽게 관리할 수 있도록 도와주는 서비스입니다. 웹 버전(크롬 확장프로그램 포함) 또는 맥 전용 프로그램으로 사용하실 수 있습니다. 회원가입이 필요하며, 무료 버전으로도 500개의 파일 등록과 2명 이상이 함께 사용할 수 있습니다.
회원가입 및 로그인 후 가장 먼저 할 수 있는 행동은 ‘컬렉션' 생성인데요. 왼쪽 아래 위치한 ‘새로운 컬렉션 생성' 버튼을 클릭하면 이름을 입력할 수 있으며 별다른 추가 과정 없이 만들 수 있어요. 컬렉션은 레퍼런스를 구분 짓는 대표적인 개념으로 프로덕트 디자인, 웹 디자인, 그래픽 영감 등 스스로가 필요한 텍스트를 입력해 활용할 수 있어요. 위 이미지 속 ‘커뮤니티’가 컬렉션이며, 컬렉션에는 ‘글쓰기’, ‘신고하기’ 등의 섹션을 추가해 기능 단위 등으로 레퍼런스를 수집하고 관리할 수 있죠.
등록된 파일 중 하나를 선택하면 상세 모습을 볼 수 있어요. 원본 비율 그대로 확인할 수 있고, 상단에는 해당 섹션에 담긴 파일의 전체 개수를 알 수 있어요. 화살표를 클릭해 자연스레 섹션에 담긴 전체 레퍼런스를 하나씩 확인할 수 있는 모습이기도 해요.
파일 뷰어 오른쪽에는 레퍼런스 공유, 이름 변경, 삭제 버튼이 차례로 자리 잡고 있어요. 컬렉션 - 섹션 - 특정 파일을 손쉽게 공유할 수 있어 링크를 문서에 삽입하거나 내부 채널에 전달하기 좋죠. 저는 개별 링크를 생성해 문서 내 참고 사례로 언급 시 자주 활용하고 있어요(컬렉션 단위의 공유도 가능). 파일을 업로드하면 파일명이 그대로 이름으로 사용되기에 나중에 다시 볼 때 헷갈리지 않도록 이름을 쉽게 변경할 수 있는 기능도 유용하죠.
- 사용 방법이 어렵지 않고, 손쉽게 컬렉션과 섹션에 따라 레퍼런스를 정리할 수 있어요.
- 무료로도 2개의 컬렉션과 500개의 레퍼런스를 등록할 수 있어 충분한 경험이 가능해요.
- 최근에 크롬 확장 프로그램이 추가되어 웹상에서 쉽게 컬렉션 - 섹션에 따라 저장할 수 있어요
추천 대상 : 명확한 구분에 따라 레퍼런스를 정리하고 손쉽게 공유하고 싶은 분 (자세히 보기)
2. 핀터레스트의 불편을 해결하기 위해 시작된, Savee
다음으로 소개할 서비스는 핀터레스트를 잘 사용하던 두 명의 사용자이자 친구가 기존 서비스의 불편을 해결하고자 만든 곳으로, 디자인과 관련된 다양한 영감을 더 직관적으로 수집하고 관리하는데 초점이 맞춰져 있어요. 두 명의 친구는 광고가 없는, 최소한의 화면으로 영감이 될 수 있는 콘텐츠를 탐색하고 수집할 수 있는 환경을 만들고자 했어요. 광고의 홍수, 지나치게 많은 기능 속에서 우리를 구하자는 의미로 ‘oh wait, save me’를 떠올렸고 그렇게 ‘savee’라는 이름의 서비스가 2016년 베타 버전으로 시작되었죠.
‘Savee’는 웹과 모바일앱으로 사용할 수 있어요. 웹에서는 사용자들이 등록한 다양한 이미지 중심의 콘텐츠를 확인할 수 있고, 원하는 대상을 선택해 바로 ‘저장’할 수 있는 구성이죠. 눈에 띄는 기능은, 탐색 시 고정된 레이아웃이 아니라 사이즈와 여백을 설정할 수 있다는 점이에요. 웹에서는 한 화면에서 스크롤 없이 볼 수 있는 이미지가 많기에 각자 원하는조건에 따라 탐색할 수 있는 환경을 만들 수 있어요.
검색을 통한 레퍼런스 수집도 가능해요. 검색 대상은 크게 두 가지로 하나는 이미지, 하나는 사용자예요. 소셜의 개념이 포함되어 있어서 특정 사용자를 팔로우하면 그 사람이 저장하거나 업로드한 이미지를 핀터레스트의 ‘보드’ 형태로 확인할 수 있죠. 제가 자주 사용하는 기능 중 하나는 ‘컬러로 검색하기’인데요. 원하는 컬러를 선택하면 그 컬러가 포함된 이미지를 빠르게 모아볼 수 있어요.
탐색 중 특정 이미지를 클릭하면 저장, 조회수 정보를 볼 수 있고 포함된 컬러값을 확인할 수 있는데요. 컬러 중 하나를 선택하면 검색 결과 화면으로 이동해 해당 컬러가 포함된 이미지만 모아볼 수 있어요. 상세화면에서도 생성한 보드에 이미지를 저장할 수 있고요.
저장한 이미지는 하나의 화면에서 모아볼 수 있고, 핀터레스트와 같이 보드를 만들어 관리할 수 있어요. 여기서 눈에 띄는 기능은 ‘임포트(import)’로 핀터레스트에 저장한 데이터를 가져올 수 있는 환경을 제공해요. 이미지를 직접 등록하는 것도 가능하죠. 또 크롬과 사파리 확장 프로그램을 지원해 웹서핑을 하다 발견한 이미지를 빠르게 저장할 수 있어요.
- 앱과 웹에서 모두 사용할 수 있는 환경을 제공해요.
- 핀터레스트에 저장된 핀을 불러올 수 있어요.
- 광고 없이 기능 단위의 유료 계정을 지원해 레퍼런스 수집 및 관리에 집중할 수 있어요.
- 컬러로 검색, 레이아웃 설정 등 조건에 맞는 레퍼런스 수집이 가능해요.
추천 대상 : 깔끔하고 세련된 인터페이스를 바탕으로 이미지 레퍼런스 수집에 집중하고 싶은분 (자세히 보기)
3. 내 앨범 속 캡쳐된 레퍼런스를 위한, SOURCE
세 번째로 소개할 서비스는 레퍼런스 중에서도 특히, 앱 스크린샷 레퍼런스에 최적화된 서비스 ‘쏘스’입니다.
디자이너분들이라면 기존에 'WWIT'이나 'Mobbin'과 같이 앱 스크린샷을 제공하는 서비스에 익숙하신 분들이 많으실 텐데요! 쏘스는 내가 직접 앱 스크린샷을 저장하고, 빠르게 찾아볼 수 있게 정리할 수 있는 서비스입니다.
앞서 말한 서비스들에서 확인할 수 있는 스크린 사례들도 유용하지만, 가끔은 정말 필요한 ‘그’ 화면을 찾기 어려울 때가 분명히 있어요. 그럴 때 저는 다양한 서비스를 탐색하면서 열심히 캡처를 하는데, 그 이미지들은 다시 찾아보기가 어렵다 보니 결국엔 다시 잘 보지 않게 되더라고요. 저 같은 사람을 위한 서비스인 셈이죠!
사용 방법도 굉장히 직관적인데요. 간단한 가입을 거치면 바로 스크린샷을 업로드할 수 있어요. 폴더와 태그를 활용해 프로젝트마다 필요한 레퍼런스를 정리할 수 있게 되어있고요. 특정 부분에 메모를 남기고 싶은 경우 피그마처럼 PIN을 찍어 메모도 작성할 수 있는데, 이 점이 매우 편하더라고요! 아, 그리고 웹으로도 제공하고 있어 기기를 옮겨가며 저장하지 않아도 된다는 점도 좋았어요.
추천 대상 : WWIT, Mobbin 등에 없는 다양한 서비스 스크린샷을 직접 관리하고 싶으신 분 (자세히 보기)
4. 서비스 플로우까지 확인할 수 있는, MOBBIN
마지막으로 소개하려는 Mobbin은 아마 익히 들어보셨을텐데요. 해외 서비스들의 iOS와 안드로이드 화면을 살펴볼 수 있는 서비스입니다. 여기에 스크린샷을 저장하고 관리할 수 있는 기능이 있다는 사실, 알고 계셨나요?
Mobbin에는 매우 방대한 양의 스크린샷을 제공하고 있는데요. 그렇기 때문에 원하는 화면을 잘 찾을 수 있도록 OS, Apps, UI Element 등 다양한 카테고리를 제공해요. (UI element로 검색이나 필터 기능 등 일부 기능은 월 8달러의 유료 결제가 필요해요)
모빈에서 탐색 중에 마음에 드는 이미지를 발견했다면 좋아요를 누르거나, 컬렉션을 만들어 저장 및 관리할 수 있어요. 컬렉션에 직접 업로드도 가능하구요. 또 피그마 플러그인을 제공하고 있어서 하나씩 복사할 필요 없이 원하는 이미지들을 빠르게 불러올 수도 있답니다.
탐색 도중에 관심이 가는 화면이 있어 클릭해보니, 해당 화면을 기준으로 그 화면과 연관된 다른 화면들까지 함께 볼 수 있어요. 게다가 영상과 프로토타입도 제공해 직접 사용해가면서 파악할수도 있는데요! 디자인을 하다보면 플로우나 여정에 대한 이해도 중요하기 때문에, 이미지 레퍼런스와 더불어 플로우와 단계를 함께 확인할 수 있다는 건 정말 유용한 기능이라는 생각이 들었어요.
또 IA(정보 아키텍처)까지 확인할 수 있다는 점도 인상깊었는데요. 해당 기능은 유료지만, 검색창에서 제공하는 몇 가지의 서비스들은 무료로 제공되고 있었어요. (airbnb 등) 모빈은 마치 앱 레퍼런스 관리 툴이 이상적으로 제공해야 할 모든 기능을 갖추고 있는 것 같았는데요, 몇 년전까지만 해도 이렇게 발전할 줄 몰랐는데 개인적으로 매우 놀랐답니다. 이번 기회에 한 번 둘러보시는걸 추천드려요!
추천 대상 : 스크린샷에 플로우까지 함께 확인하고 싶으신 분 (자세히 보기)
팁스터 뉴스레터에서는 프로덕트와 관련된 다양한 주제의 콘텐츠를 발행합니다.
(1) 서비스의 업데이트 전/후와 실무자의 코멘트가 담긴 '업데이트 소식'
(2) 다양한 메이커의 실무에 대한 노하우가 담긴 '메이커들의 커피챗'
(3) 서비스의 문제해결 방법을 산업을 중심으로 살펴보는 ‘멤버십’
(4) 디자인 업무 효율을 높이는 다양한 툴에 대한 이야기
#지식토스트