Raycast Extension 개발하기

---

---

뭘 하는 거야?

Raycast라는 굉장히 유명한 생산성 도구가 있습니다. 기능이 너무 많고 편리해서 대표적인 기능 한 개만 꼽기도 어렵지만, 쉽게 얘기하면 컴퓨터에서 할 수 있는 모든 것을 쉽게 해 준다고 보면 됩니다. 예를 들자면...

• 이모지를 원하는 검색어 아무거나 써서 검색하면 적절한 이모지 바로 추천
• 원하는 모든 앱에 단축키 지정해서 바로 열기
• 단축키로 인터넷에서 이미지 바로 검색
• 단축키로 검색창 열어서 단위 쉽게 변환
• 등등...

 
자세한 건 Raycast의 공식 유튜브 계정에 잘 나와 있습니다.

Raycast

 
Raycast에서 기본으로 제공하는 기능도 상당히 편리하지만 Raycast의 정말 좋은 점은 Raycast가 닦아 놓은 좋은 기반 위에서 개발자가 쉽게 여러 기능을 추가할 수 있다는 겁니다. 이걸 Raycast Extension이라고 부릅니다.

예를 들자면 Youtube Extension을 설치하면...

• 단축키로 바로 창 열어서 검색
• 선택된 키워드로 바로 유튜브 검색

등을 할 수 있습니다. 

비슷하게 Raycast에는 Naver Extension도 있는데요. 저는 원래는 네이버를 잘 안 썼지만 최근 구글 검색 결과 수준이 떨어지기도 했고, AI로 웬만한 건 물어봐서 검색할 때는 주변 정보나 정부 정책 같은 한국에 한정적인 정보들이 많기 때문에 네이버를 많이 쓰게 됐습니다. 아무튼 그래서 Naver Extension을 깔았는데, 전반적으로 만족스러웠지만 다른 검색 Extension 들에는 있는 마우스로 선택된 단어를 바로 검색하는 기능이 없어서 아쉽던 중 모든 Raycast Extension은 Open Source라는 걸 알게 돼 직접 PR을 올리자고 다짐했습니다!

---

기본적인 구조

Raycast Extension은 Typescript와 React, 그리고 Raycast에서 제공하는 API를 사용해 만들 수 있습니다. UI는 Raycast API에서 제공하는 Action, ActionPanel, List 등을 사용하면 되고, 동작은 목적에 따라 Clipboard, Keyboard, Menu Bar Commands, Preferences 등을 사용하면 됩니다.
예를 들어 제가 만들고자 한 마우스로 선택된 단어를 바로 네이버에 검색하는 기능의 경우...

1. 마우스에 선택된 단어를 가져오기
2. 설정 확인해서 선택된 단어가 없으면 Clipboard (복붙 내역)에서 가장 최신 내역 확인하기
3. 2번도 없으면 에러 받기
4. 있으면 네이버 검색한 결과 열기

로 이루어 집니다.
제가 쓴 api를 나열해 보자면 아래와 같습니다.

getSelectedText	마우스로 선택된 단어 가져오기
Clipboard.readText()	Clipboard에서 가장 최신 내역 가져오기
open	특정 URL의 웹 페이지 열기
showToast	토스트에 메세지 보여주기

보시면 아시겠지만 Raycast Extension 개발은 전혀 어렵지 않습니다. (DX가 상당히 좋습니다.) 그냥 내가 원하는 기능을 떠올리고, 그 기능에 맞는 Raycast API를 찾아서 호출하고, 에러 처리 잘하면 끝납니다.
물론 TS에 관한 지식이나 JS의 Concurrency 관련 지식이 부족하면 헤맬 수 있긴 한데 그렇게 고급 개념을 쓰지는 않습니다.

제가 올린 전체 PR은 아래 링크에서 확인해 보실 수 있습니다! (별거 없긴 합니다...)

Update naver-search extension by jinkyumpark · Pull Request #20235 · raycast/extensions

---

PR 올리기

Publish an Extension | Raycast API

 
Raycast Extension을 새로 완성했거나 기존 Extension에 기능 추가가 완료 됐다면 PR을 올리는 과정은 아주 간단합니다. 그냥 명령어 한 줄 실행하면 됩니다.

npm run build

 
이렇게 하면 내 Github에 알아서 fork 하고, feature branch를 만들어서 PR을 올려 줍니다.

---

리뷰받아서 PR 다시 올리기?

How to change PRs you submitted to your raycast extension

열심히 개발해서 낸 PR이 아무 문제 없이 바로 Merge 되면 좋겠지만, 보통은 수정 사항 요구가 있고 이걸 대응해서 다시 PR을 올려야 합니다. 이때, 새로 PR을 만들어서 올려야 하는 게 아니라 기존 PR에 수정 사항을 push 하는 게 당연히 좋습니다. 이건 어떻게 할까요?

우선 npm run publish를 실행하면 내 개인 Github에 raycast-extension을 fork 하고, 거기에 branch를 만들고 이걸 원래 Repo에 merge 요청하는 PR을 올립니다. 이 말은 내 fork에 추가적인 수정 사항을 push 하기만 하면 PR에는 자동으로 반영된다는 겁니다.

근데 문제는 raycast-extension은 굉장히 큰 repo이기 때문에 전체를 pull 하는 건 굉장히 부담스럽습니다. 이건 git의 sparse-checkout이라는 기능을 활용하면 됩니다. 이 기능을 활용하면 내가 원하는 dir만 정해서 pull 할 수 있습니다.

1 - fork 된 Repo clone

우선 처음 PR을 올린 Repo가 아니라 내 Github에 fork된 Repo에 가서 이걸 clone 합니다. 당연히 전체를 clone 하면 너무 오래 걸리기 때문에 --filter:blob:none을 사용해서 일단 빈 Repo를 clone 하고, 나중에 sparse-checkout을 사용하겠습니다.

git clone --single-branch --branch 브렌치_이름 --filter=blob:none --sparse SSH_URL

 
브랜치_이름과 SSH_URL은 내 Github에 fork 된 Repo를 확인하면 됩니다.

 

2 - sparse-checkout 설정

다음으로 checkout 된 경로에 들어가 아래 명령어를 실행하면 sparse-checkout 모드가 됩니다.

git sparse-checkout init --cone

 

3 - sparse-checkout 설정

마지막으로 내가 필요한 directory를 sparse-checkout 해 주면 됩니다.

git sparse-checkout set 경로

저의 경우 extensions/extensions/naver-search가 필요해서 아래 명령어를 실행했습니다.

git sparse-checkout set extensions/extensions/naver-search

 

4- 작업하고 올리기

이제 여기에 수정 사항을 작업하고 올리기만 하면 됩니다. 내 Github에 fork된 내 repo이기 때문에 당연히 push, force-push 등 마음대로 할 수 있지만, 기존 Git Commit History를 건들면 안 되기 때문에 그냥 push 하시면 됩니다.

---

후기

Linux 커널 같은 찐개발자가 할 법한 오픈소스 활동은 아니지만, 나름 첫 오픈소스 활동을 마치니 굉장히 재밌고 새로운 경험이였습니다.

이번 년도의 목표가 아무도 안 쓰는 제품이나 토이 프로젝트는 그만 만들고 영향력있는 코딩을 하는 거였는데, 그 첫 걸음이 아닌가 싶습니다.

제가 Raycast를 굉장히 열심히 쓰는 유저인 만큼 이 외에도 아이디어가 많은데 시간 날 때 하나씩 PR을 올려 봐야 겠습니다!

---