업무의 효율을 높여주는 'Raycast'
레이케스트의 활용법과 직관적인 디자인에 대하여
평소에 당연하다고 생각했던 과정이 비효율적이라고 생각한 적이 있나요? 예를 들어 강남역 맛집을 찾기 위해 크롬을 열고 네이버를 접속하여 검색창을 클릭하고 강남역 맛집을 타이핑하는 간단하면서도 일상적인 과정이 아닌 강남역 맛집만 치면 알아서 크롬을 열어주고 네이버를 접속해 강남역 맛집 리스트를 보여준다면 어떨 것 같나요?
이런 과정을 상상 속이 아닌 현실에서 실현 가능한 프로그램이 오늘 소개해드리는 Raycast라는 프로그램입니다. 저도 Alfred를 사용해오다 해외에서 하도 핫하다길래 최근에 처음 사용해봤는데 마치 스케치에서 피그마를 처음 접했을 때의 감정을 느낄 수 있었습니다.
특히 디자인 측면에서 심플하고 직관적으로 설계가 되었다는 평을 많이 받고 있습니다. 그래서 Raycast는 무엇이고 어떻게 생산성 문제를 해결하는지와 좋은 UX 디자인 사례에 대해 소개해드리겠습니다.
Raycast란?
Raycast는 빠르고 확장 가능한 강력한 생산성 프로그램으로 맥의 스팟라이트와 비슷한 앱이라고 생각하시면 됩니다. Alfred 보다 주목받는 이유는 대부분의 기능들이 무료라는 점과 스토어(확장 프로그램)를 통해 Arc, Figma, Notion, OpenAI 등 최근 핫한 다양한 앱들을 지원하고 있기 때문입니다.
다운로드 및 설치는 하단의 공홈 링크를 통해서 가능하고 앱 실행과 검색 같은 기본적인 기능은 튜토리얼로 충분히 이해 가능하니 하단의 튜토리얼 사이트 링크를 통해 확인해주시고 이번에는 다소 어려울 수 있는 Quick Link와 Store 기능의 실사용 예시로 설명드리도록 하겠습니다.
Quick Link
Qcuik Link는 초반부에 설명드린 것처럼 강남역 맛집을 네이버에서 검색한다고 가정할 때 검색까지 가는 과정을 비약적으로 줄여주는 기능입니다. 미리 만들어진 프리셋을 사용할 수도 있지만 많이 사용하실 네이버 검색 예시로 설명드리겠습니다.
일단 하단의 이미지처럼 Setting > Extentsions를 들어가서 Quicklinks를 클릭하고 프리셋을 사용하고 싶으면 Find in Library를 클릭하면 되고 저희는 Create New Quicklink를 클릭해주시면 됩니다.
그러면 하단의 링크 화면이 나오는데 Name은 원하시는 대로 설정해주시면 됩니다. 그리고 만약 크롬이 아닌 사파리로 실행하고 싶으신 분은 Open with를 사파리로 선택해주시면 됩니다.
이제 Link 부분을 설정해줘야 하는데 뭔가 복잡한 문자가 나오는데 별거 없습니다. 크롬을 여시고 네이버에서 강남역을 검색하고 주소창을 클릭하고 복사해주시면 됩니다.
하단의 이미지처럼 복사한 주소를 Link창에 입력하고 주소를 보면 입력한 검색어와 일치하는 부분이 있을 것입니다. 이 부분을 입력한 '강남역' 텍스트를 {검색}으로 변경해주시고 엔터를 누르시면 됩니다.
(크롬에서 이상하게 복사되시는 분은 노션에 붙여 넣었다가 다시 복붙 하시면 되고, 사파리는 '설정 > 스마트 필트 > 전체 웹 사이트 주소 보기'를 설정해주시면 됩니다)
그러면 하단의 이미지처럼 네이버 검색이라는 옵션이 생성되었는데 마지막으로 Alias(별명) 칸에 네이버라고 입력하시고 Hotkey를 사용하고 싶은 분들은 핫키를 설정해주시면 됩니다.
모든 설정이 끝났으니 하단의 이미지처럼 단축키로 Raycast를 실행하고 설정한 네이버(설정한 별명)를 입력한 후 스페이스바를 누르면 쿼리창(검색할 텍스트)으로 커서가 들어가는데 거기에 강남역 맛집을 입력하시면 알아서 크롬을 열어주고 알아서 네이버를 접속한 뒤 강남역 맛집을 검색한 화면이 나올 것입니다.
또한 만약 핫키를 설정하셨다면 텍스트를 통해서도 검색이 가능합니다. 원하는 텍스트를 드래그한 후 설정한 핫키를 클릭해주시면 텍스트를 입력하는 과정도 없이 네이버 검색이 가능합니다. 사실 이 기능은 Alfred에서는 기본 세팅이 되어 있는데 네이버가 아닌 다음이나 네이버 지도 같은 옵션도 설정하시려면 원리를 아는 게 추후 다양하게 활용하시는데 도움이 될 것이라 생각합니다.
스토어 확장 프로그램
이 기능은 크롬의 확장 프로그램과 비슷하다고 생각하시면 됩니다. 구글 번역기와 Notion 등 다양한 앱들을 지원하고 있고 설치 또한 간단하니 자주 사용하는 앱을 설치해보시면 됩니다. 이번에는 피그마의 확장 프로그램이 조금 복잡할 수 있어서 피그마 프로그램 예시로 설명드리겠습니다.
공홈 스토어에서 피그마를 검색 후 설치하셨다면 Personal Access Token과 Team ID를 입력하라는 창이 뜹니다. 피그마는 외부 프로그램에 액세스를 할 때는 토큰을 설정해야 하는데 피그마 API 제한으로 개인 Draft의 리스트는 노출이 안되고 Team 리스트만 노출됩니다.
Personal Access Token은 피그마의 진입 화면에서 우측 상단의 프로필의 Setting을 클릭하면 하단의 이미지 같은 창이 실행되는데 여기서 원하는 Token 이름을 입력하시면 일련의 문자들이 나오는데 이걸 복사해서 붙여 넣어주시면 됩니다.
다음은 Team ID를 입력해야 하는데 브라우저를 통해서 피그마를 접속하시고 자신의 Team을 클릭해주면 주소창이 아래 이미지와 같이 표시될 것입니다. 그러면 주소창에 /team/ 옆에 있는 숫자를 Team ID에 넣어주시면 됩니다.
이제 Raycast에서 figma를 입력하고 Search Files (figma)를 선택하면 아래와 같이 피그마를 접속하지 않아도 피그마 내의 파일 리스트가 노출되고 클릭 시 해당 파일로 바로 실행할 수 있습니다.
피그마가 좀 복잡하다고 느끼실 수 있는데 구글 번역이나 Arc, Youtube, Notion 같은 앱들은 별도의 설정 없이 간단하게 바로 실행 가능하니 너무 걱정 안 하셔도 됩니다.
직관적인 디자인
해외에서 Raycast가 각광받고 있는 이유는 대부분의 기능이 무료라는 점도 있지만 Alfred보다 직관적이고 심플한 디자인을 말하고 있습니다. 특히 Quick Link의 쿼리를 표현하는 즉 조건값을 입력하는 부분에서 디자인 퀄리티 차이를 느낄 수 있습니다.
하단의 이미지는 네이버라는 '명령어'를 입력한 화면인데 Raycast는 명령어와 쿼리를 명확하게 구분해주는 반면 Alfred는 이를 단순히 띄어쓰기로만 구분해 사용자가 지금 쿼리를 입력해야 하는 단계인지 명령어를 입력해야 하는 단계인지 명확하게 구분이 힘든 점이 있습니다. 또한 입력한 쿼리의 힌트를 Palceholder로 표현하고 있는 부분도 사용자를 배려한 디자인이라고 느낄 수 있었습니다.
이는 검색어(쿼리)를 입력하면 하단의 이미지처럼 더욱 차이가 나고 있습니다. Raycast는 명령어와 검색어가 시각적으로 명확하게 구분이 되어 내가 네이버에서 강남역을 검색한다라는 것을 명확하게 인식하는 반면 Alfred는 네이버 강남역을 검색하는 건지 강남역을 검색하는 건지 사용자에게 혼동을 주고 있습니다.
이는 위계를 시각적으로 명확하게 표현하는 방법의 차이라고 느낄 수 있었습니다. 검색어(쿼리)는 명령어의 하위 조건 요소이므로 위계가 명확하게 다릅니다. 이를 Raycast는 박스 형태로 잘 풀어낸 반면 Aflred는 시각적으로 차이를 주지 못해 두 요소를 명확하게 구분하기 힘들지 않나라는 생각을 하였습니다.
또한 커서가 쿼리 창으로 넘어가는 모션 또한 사용자에게 상태 값을 직관적 전달하는 좋은 요소라고 생각하였는데 이러한 디자인 퀄리티의 차이가 많은 이용자들이 Raycast를 극찬하는 이유 중 하나이지 않을까?라는 생각을 하였습니다.
스케치에서 피그마로 에버노트에서 노션으로 트렌드가 넘어갔을 때도 이런 사소한 차이에서 결과가 뒤집였다고 생각합니다. 저는 Raycast 또한 피그마와 노션 같은 행보를 보여줄 수 있을 것이라 기대하며 여러분도 한번 생산성 앱인 Raycast를 직접 사용해 보시는 것을 추천드립니다.
