diff --git a/apps/blog/_posts/tool/mac-init.md b/apps/blog/_posts/tool/mac-init.md
deleted file mode 100644
index 308c9d05..00000000
--- a/apps/blog/_posts/tool/mac-init.md
+++ /dev/null
@@ -1,210 +0,0 @@
----
-title: '웹 개발자를 위한 Mac 개발 도구 추천 리스트'
-description: '유용한 맥 앱에서 VSCode 및 크롬 익스텐션까지'
-tags: ['mac', 'settings', 'extensions']
-coverImage: 'https://github.com/1ilsang/dev/assets/23524849/dbe32093-4f4b-4f4b-aa2c-a2b8574d85a0'
-date: '2023-12-24T03:54:08.256Z'
-ogImage:
- url: 'https://github.com/1ilsang/dev/assets/23524849/dbe32093-4f4b-4f4b-aa2c-a2b8574d85a0'
----
-
-
-
-최근 기기 변경을 하면서 맥 세팅을 처음부터 할 일이 있었다. 그때 꽤 고생한 기억이 있어 이번 기회에 유용했던 것들을 한번 정리해 보려고 한다.
-
-리스트를 만들고 나니 꽤나 많아서 조금 당황했지만 설정해 놓으면 패시브적으로 동작하는 것들 위주기 때문에 다 외우고 있지 않아도 된다.
-
-추천 리스트는 3가지로 분류되어 있다.
-
-1. 맥 앱
-2. VSCode 익스텐션
-3. 크롬 익스텐션
-
-웹 개발자의 가장 보편적인 환경이라 생각하고 필자도 위와 같이 작업하고 있기 때문에 크게 3가지로 분류했다. 직접 사용하면서 유용했던 것들을 모아놓았기 때문에 안정성 문제는 없을 것으로 생각된다.
-
-## 모아보기
-
-- [Mac Apps](#mac-apps)
- - [Chrome](#chrome)
- - [Homebrew](#homebrew)
-- [VSCode Extensions](#vscode-extensions)
-- [Chrome Extensions](#chrome-extensions)
-
-## Mac Apps
-
-### Chrome
-
-![chrome-cover](https://github.com/1ilsang/dev/assets/23524849/958e465c-dd1e-4693-ac79-67400c6441dc)
-
-소개 문구에서부터 포스가 장난 아니다. 테스팅 환경 때문이라도 필요한 웹 브라우저 크롬이다.
-
-글 말미에 정리된 [크롬 익스텐션 섹션](#chrome-extensions)을 통해 크롬이 얼마나 강력한지 후술하고자 한다.
-
-- [만약 크롬이 실행 되지 않는다면](https://support.google.com/chrome/thread/64580550?hl=ko&msgid=68816629)
-
-> [다운로드 링크](https://www.google.com/chrome)
-
-### Homebrew
-
-![homebrew](https://github.com/1ilsang/dev/assets/23524849/4135c0aa-fe1c-49db-aee1-a72b88cfeea6)
-
-`homebrew`는 CLI로 편리하게 앱을 설치할 수 있게 해준다.
-
-환경변수 및 패키지 폴더 구성 등을 자동으로 해주기 때문에 불쾌한 초기 설정을 벗어나게 해준다.
-
-많은 프로젝트에서 homebrew를 통한 설치 가이드를 제공하고 있을 정도로 대중적이니 꼭 설치하자.
-
-```sh
-# 터미널 설치
-$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
-```
-
-> [다운로드 링크](https://brew.sh/)
-
-### Oh Ny Zsh
-
-![cmd-example](https://github.com/1ilsang/dev/assets/23524849/44e5939d-e8bd-40ec-90bb-fae3e106443d)
-
-brew로 작업하다 보면 터미널이 참 못생겼다고 느낄 수 있다. 터미널을 위와 같이 원하는 정보가 노출되도록 설정할 수 있다.
-
-내가 사용하고 있는 테마는 [bullet-train](https://github.com/caiogondim/bullet-train.zsh) 커스텀 테마이다. 해당 테마는 현재 시간 및 작업 소요 시간, 성공 여부, 깃 상태 등 다양한 정보를 노출시켜 주므로 선택하게 되었다.
-
-```sh
-# 터미널 설치
-$ sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"
-```
-
-> [다운로드 링크](https://ohmyz.sh/#install)
-
-### Iterm2
-
-![iterm2-example](https://github.com/1ilsang/dev/assets/23524849/7b6b295f-ec11-4da8-bade-c475009b5ca4)
-
-기본 맥 터미널은 못생겼기 때문에 `iterm2`을 설치해 터미널을 더 예쁘게 커스텀 할 수 있다.
-
-`zsh`이 터미널의 내용을 관리한다면 터미널 창 자체로 디자인을 제공해 주는 역할은 `iterm2`이다.
-
-> 만약 커맨드라인에서 cmd + delete로 [한줄 삭제](https://stackoverflow.com/questions/15733312/iterm2-delete-line) 하고 싶다면
->
-> 환경 설정 > Profiles > Keys > Natural Text Editing으로 설정 한다.
-
-이 외에도 각 탭에서 창 기본 크기, 배경 설정 등 할 수 있다.
-
-> [다운로드 링크](https://iterm2.com/)
-
-### VSCode
-
-![vscode-logo](https://github.com/1ilsang/dev/assets/23524849/6e0c8145-53ab-4d40-9f97-edaf9d54ba91)
-
-VSCode에 너무 절여져 있어 다른 에디터는 이제 기억이 나지 않는다... 유용한 [익스텐션은 후술](#vscode-extensions)하겠다.
-
-> [다운로드 링크](https://code.visualstudio.com/)
-
-### NeoVim
-
-만약 vi 환경을 좋아한다면 설치하면 좋다. 기본적으로 `vim`은 한글 입력시 문제가 많다(조합 중인 문자 소실 등).
-
-`NeoVim`은 `vim`을 오픈소스화하여 기존의 문제들 해결하고 커뮤니티 자발적으로 다양한 플러그인을 개발/공유하고 있어 강력한 에디팅을 지원한다.
-
-```sh
-$ brew install neovim
-# 기본 vi를 neovim으로 변경하고자 한다면 alias를 변경한다.
-$ vi ~/.zshrc
-$ alias vi="nvim"
-```
-
-> [다운로드 링크](https://neovim.io/)
-
-### D2 Coding
-
-폰트는 d2 코딩이 가장 편하다고 느껴서 늘 사용하고 있다.
-
-모호할 수 있는 문자들이 `1ijIlO0tz아야저져쁆뼮뼯뗾` 기본적으로 잘 보인다(이 블로그 폰트도 D2coding이다).
-
-#### iterm2에 d2coding을 기본 폰트로 적용하기
-
-> Profiles > Text > Font > D2Coding
->
-> [그림으로 보기](https://github.com/1ilsang/dev/assets/23524849/a3aff63a-d3d7-43aa-84c1-68b10d46dadd)
-
-#### VSCode 기본 폰트로 적용하기
-
-> Setting(cmd + ,) > Font Family > D2Coding을 제일 앞에 적어준다.
->
-> [그림으로 보기](https://github.com/1ilsang/dev/assets/23524849/1eeb1e90-6a2c-4263-a8a4-f6a9ea860f98)
-
-상당히 개발자 친화적인 폰트라 생각한다.
-
-> [다운로드 링크](https://github.com/naver/d2codingfont)
-
-### Node.js
-
-"신"
-
-> [다운로드 링크](https://nodejs.org/en)
-
-### NVM
-
-프로젝트를 여러개 만들다 보면 노드 버전이 상이한 경우가 종종 생긴다. 이때 노드 버전을 어떻게 처리할까?
-
-답은 `nvm`을 통해 노드 버전을 프로젝트마다 변경하면 된다.
-
-```sh
-# Nvm 다운로드.
-$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
-# 터미널 실행시 자동으로 nvm을 사용하도록 설정.
-$ vi ~/.zshrc
-# 아래 내용을 zshrc 아무곳에 붙여넣는다.
-export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
-[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
-# 쉘 반영
-$ source ~/.zshrc
-```
-
-사용법은 아래와 같다.
-
-```sh
-# .nvmrc 파일이 존재하면 지정된 노드 버전으로 설정됨.
-$ nvm use
-# Node.js 20.10.0 버전 다운로드.
-$ nvm install 20.10.0
-# Node.js 20.10.0 버전 사용.
-$ nvm use 20.10.0
-```
-
-> [가이드 링크](https://github.com/nvm-sh/nvm/blob/master/README.md)
-
-### Docker
-
-두 번째 "신"
-
-> [다운로드 링크](https://www.docker.com/)
-
-### Calculator Pro
-
-
-
-
-
-
-맥 환경 특성상 전체화면 된 앱 위에 무엇을 겹치는 것이 불가능하다. 하지만 이 앱은 계산기를 전체화면 된 앱 위에 올려준다.
-
-알고리즘 풀 때 진짜 꿀이다.
-
-오른쪽 화면은 내가 쓰는 글로벌 숏컷이다. 껐다켰다하며 사용하기 편하다.
-
-> [다운로드 링크](https://apps.apple.com/kr/app/calculator-pro-topbar-app/id576215086)
-
-### GIPHY Capture
-
-간단하게 움짤(gif)을 따야 할 때 유용하게 쓸 수 있다.
-
-> [다운로드 링크](https://apps.apple.com/kr/app/giphy-capture-the-gif-maker/id668208984)
-
-### DeepL
-
-번역 퀄리티가 상당히 좋다. 또한 `cmd + c + c`로 빠르게 번역하기도 지원하기 때문에 숏컷 활용도 또한 뛰어나다.
-
-이후 다룰 크롬 익스텐션과 함께 사용하면 찰떡이다.
-
-> [다운로드 링크](https://www.deepl.com/ko/app/)
diff --git a/apps/blog/_posts/tool/mac/init.md b/apps/blog/_posts/tool/mac/init.md
new file mode 100644
index 00000000..5dd3ec08
--- /dev/null
+++ b/apps/blog/_posts/tool/mac/init.md
@@ -0,0 +1,339 @@
+---
+title: '웹 개발자를 위한 도구 추천 - 유용한 Mac 앱들'
+description: '생산성을 올려줄 유용한 맥 앱을 알아보자'
+tags: ['mac', 'settings']
+coverImage: 'https://github.com/1ilsang/dev/assets/23524849/dbe32093-4f4b-4f4b-aa2c-a2b8574d85a0'
+date: '2023-12-24T03:54:08.256Z'
+ogImage:
+ url: 'https://github.com/1ilsang/dev/assets/23524849/dbe32093-4f4b-4f4b-aa2c-a2b8574d85a0'
+---
+
+
+
+최근 기기 변경을 하면서 맥 세팅을 처음부터 할 일이 있었다. 그때 꽤 고생한 기억이 있어 이번 기회에 유용했던 것들을 한번 정리해 보려고 한다.
+
+웹 개발자를 위한 도구 추천 포스트는 3가지 시리즈로 연재 될 예정이다.
+
+1. 유용한 Mac 앱
+2. VSCode 익스텐션
+3. 크롬 익스텐션
+
+직접 사용하면서 유용했던 것들을 모아놓았기 때문에 안정성 문제는 없을 것으로 생각된다.
+
+## 모아보기
+
+- [Chrome](#chrome)
+- [Homebrew](#homebrew)
+- [Oh My Zsh](#oh-my-zsh)
+- [Iterm2](#iterm2)
+- [VSCode](#vscode)
+- [NeoVim](#neovim)
+- [D2Coding](#d2-coding)
+- [Node.js](#nodejs)
+- [NVM](#nvm)
+- [Docker](#docker)
+- [GIPHY Capture](#giphy-capture)
+- [DeepL](#deepl)
+- [ScreenHint](#screenhint)
+- [Quick Notes](#quick-notes)
+- [Calculator Pro](#calculator-pro)
+- [올ㅋ사전](#올ㅋ사전)
+- [Fig](#fig)
+- [Flycut](#flycut)
+- [ScreenBrush](#screenbrush)
+- [Keycastr](#keycastr)
+- [Ngrok](#ngrok)
+- [Hidden bar](#hidden-bar)
+- [Digital Color Meter](#digital-color-meter)
+
+## Chrome
+
+![chrome-cover](https://github.com/1ilsang/dev/assets/23524849/958e465c-dd1e-4693-ac79-67400c6441dc)
+
+소개 문구에서부터 포스가 장난 아니다. 테스팅 환경 때문이라도 필요한 웹 브라우저 크롬이다.
+
+다음에 연재할 크롬 익스텐션 섹션을 통해 크롬이 얼마나 강력한지 후술하고자 한다.
+
+- [만약 크롬이 실행 되지 않는다면](https://support.google.com/chrome/thread/64580550?hl=ko&msgid=68816629)
+
+> [다운로드 링크](https://www.google.com/chrome)
+
+## Homebrew
+
+![homebrew](https://github.com/1ilsang/dev/assets/23524849/4135c0aa-fe1c-49db-aee1-a72b88cfeea6)
+
+`homebrew`는 CLI로 편리하게 앱을 설치할 수 있게 해준다.
+
+환경변수 및 패키지 폴더 구성 등을 자동으로 해주기 때문에 불쾌한 초기 설정을 벗어나게 해준다.
+
+많은 프로젝트에서 homebrew를 통한 설치 가이드를 제공하고 있을 정도로 대중적이니 꼭 설치하자.
+
+```sh
+# 터미널 설치
+$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
+```
+
+> [다운로드 링크](https://brew.sh/)
+
+## Oh My Zsh
+
+![cmd-example](https://github.com/1ilsang/dev/assets/23524849/44e5939d-e8bd-40ec-90bb-fae3e106443d)
+
+brew로 작업하다 보면 터미널이 참 못생겼다고 느낄 수 있다. 터미널을 위와 같이 원하는 정보가 노출되도록 설정할 수 있다.
+
+내가 사용하고 있는 테마는 [bullet-train](https://github.com/caiogondim/bullet-train.zsh) 커스텀 테마이다. 해당 테마는 현재 시간 및 작업 소요 시간, 성공 여부, 깃 상태 등 다양한 정보를 노출시켜 주므로 선택하게 되었다.
+
+```sh
+# 터미널 설치
+$ sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"
+```
+
+> [다운로드 링크](https://ohmyz.sh/#install)
+
+## Iterm2
+
+![iterm2-example](https://github.com/1ilsang/dev/assets/23524849/7b6b295f-ec11-4da8-bade-c475009b5ca4)
+
+기본 맥 터미널은 못생겼기 때문에 `iterm2`을 설치해 터미널을 더 예쁘게 커스텀 할 수 있다.
+
+`zsh`이 터미널의 내용을 관리한다면 터미널 창 자체로 디자인을 제공해 주는 역할은 `iterm2`이다.
+
+> 만약 커맨드라인에서 cmd + delete로 [한줄 삭제](https://stackoverflow.com/questions/15733312/iterm2-delete-line) 하고 싶다면
+>
+> 환경 설정 > Profiles > Keys > Natural Text Editing으로 설정 한다.
+
+이 외에도 각 탭에서 창 기본 크기, 배경 설정 등 할 수 있다.
+
+> [다운로드 링크](https://iterm2.com/)
+
+## VSCode
+
+![vscode-logo](https://github.com/1ilsang/dev/assets/23524849/6e0c8145-53ab-4d40-9f97-edaf9d54ba91)
+
+VSCode에 너무 절여져 있어 다른 에디터는 이제 기억이 나지 않는다... 유용한 익스텐션은 다음 포스트로 연재하겠다.
+
+> [다운로드 링크](https://code.visualstudio.com/)
+
+## NeoVim
+
+만약 vi 환경을 좋아한다면 설치하면 좋다. 기본적으로 `vim`은 한글 입력시 문제가 많다(조합 중인 문자 소실 등).
+
+`NeoVim`은 `vim`을 오픈소스화하여 기존의 문제들 해결하고 커뮤니티 자발적으로 다양한 플러그인을 개발/공유하고 있어 강력한 에디팅을 지원한다.
+
+```sh
+$ brew install neovim
+# 기본 vi를 neovim으로 변경하고자 한다면 alias를 변경한다.
+$ vi ~/.zshrc
+$ alias vi="nvim"
+```
+
+> [다운로드 링크](https://neovim.io/)
+
+## D2 Coding
+
+폰트는 d2 코딩이 가장 편하다고 느껴서 늘 사용하고 있다.
+
+모호할 수 있는 문자들이 `1ijIlO0tz아야저져쁆뼮뼯뗾` 기본적으로 잘 보인다(이 블로그 폰트도 D2coding이다).
+
+### iterm2에 d2coding을 기본 폰트로 적용하기
+
+> Profiles > Text > Font > D2Coding
+>
+> [그림으로 보기](https://github.com/1ilsang/dev/assets/23524849/a3aff63a-d3d7-43aa-84c1-68b10d46dadd)
+
+### VSCode 기본 폰트로 적용하기
+
+> Setting(cmd + ,) > Font Family > D2Coding을 제일 앞에 적어준다.
+>
+> [그림으로 보기](https://github.com/1ilsang/dev/assets/23524849/1eeb1e90-6a2c-4263-a8a4-f6a9ea860f98)
+
+상당히 개발자 친화적인 폰트라 생각한다.
+
+> [다운로드 링크](https://github.com/naver/d2codingfont)
+
+## Node.js
+
+"신"
+
+> [다운로드 링크](https://nodejs.org/en)
+
+## NVM
+
+프로젝트를 여러개 만들다 보면 노드 버전이 상이한 경우가 종종 생긴다. 이때 노드 버전을 어떻게 처리할까?
+
+답은 `nvm`을 통해 노드 버전을 프로젝트마다 변경하면 된다.
+
+```sh
+# Nvm 다운로드.
+$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
+# 터미널 실행시 자동으로 nvm을 사용하도록 설정.
+$ vi ~/.zshrc
+# 아래 내용을 zshrc 아무곳에 붙여넣는다.
+export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
+[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
+# 쉘 반영
+$ source ~/.zshrc
+```
+
+사용법은 아래와 같다.
+
+```sh
+# .nvmrc 파일이 존재하면 지정된 노드 버전으로 설정됨.
+$ nvm use
+# Node.js 20.10.0 버전 다운로드.
+$ nvm install 20.10.0
+# Node.js 20.10.0 버전 사용.
+$ nvm use 20.10.0
+```
+
+> [가이드 링크](https://github.com/nvm-sh/nvm/blob/master/README.md)
+
+## Docker
+
+두 번째 "신"
+
+> [다운로드 링크](https://www.docker.com/)
+
+## GIPHY Capture
+
+![giphy example](https://media2.giphy.com/media/v1.Y2lkPTc5MGI3NjExZ2k4bHQ1ZjdpaGs4ZjVidjcxMnkyNjUwa29xdDJ3dWJ5MzcyYjd0ZyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/TehXbZX944qv5aoVg5/giphy.gif)
+
+간단하게 움짤(gif)을 따야 할 때 유용하게 쓸 수 있다.
+
+> [다운로드 링크](https://apps.apple.com/kr/app/giphy-capture-the-gif-maker/id668208984)
+
+## DeepL
+
+번역 퀄리티가 상당히 좋다. 또한 `cmd + c + c`로 빠르게 번역하기도 지원하기 때문에 숏컷 활용도 또한 뛰어나다.
+
+이후 다룰 크롬 익스텐션과 함께 사용하면 찰떡이다.
+
+> [다운로드 링크](https://www.deepl.com/ko/app/)
+
+## ScreenHint
+
+
+
+
+
+
+정말 추천하고 싶은 프로그램. 원하는 부분만 스크린샷으로 띄워 놓을 수 있다.
+
+맥 어플 전체화면시에도 올라가 있기 때문에 상당히 편리하다.
+
+> [다운로드 링크](https://apps.apple.com/kr/app/screenhint/id1566621533?mt=12)
+
+## Quick Notes
+
+![quick notes example](https://github.com/1ilsang/dev/assets/23524849/41f304d0-06db-47d6-b2dd-44df271c90f0)
+
+줌으로 미팅하거나 전체화면으로 열려있는 자료가 많아 잠깐잠깐 메모가 필요할 때 유용한 앱이다.
+
+유료라서 꼭 필요한 게 아니라면 크게 추천하고 싶진 않다.
+
+> [다운로드 링크](https://apps.apple.com/kr/app/quick-notes/id1260480179?mt=12)
+
+## Calculator Pro
+
+
+
+
+
+
+맥 환경 특성상 전체화면 된 앱 위에 무엇을 겹치는 것이 불가능하다. 하지만 이 앱은 계산기를 전체화면 된 앱 위에 올려준다.
+
+알고리즘 풀 때 진짜 꿀이다.
+
+오른쪽 화면은 내가 쓰는 글로벌 숏컷이다. 껐다켰다하며 사용하기 편하다.
+
+> [다운로드 링크](https://apps.apple.com/kr/app/calculator-pro-topbar-app/id576215086)
+
+## 올ㅋ사전
+
+
+
+
+
+
+특정 단어를 검색해야 할 때 화면 이동을 하는 건 너무 귀찮다. 단축키로 바로 열어서 찾는 것이 편리하다.
+
+> [다운로드 링크](https://apps.apple.com/kr/app/%EC%98%AC%E3%85%8B%EC%82%AC%EC%A0%84-%EB%A7%A5%EC%97%90%EC%84%9C-%EB%8B%A8%EC%B6%95%ED%82%A4%EB%A5%BC-%EB%88%84%EB%A5%B4%EB%A9%B4-%EC%98%81%EC%96%B4%EC%82%AC%EC%A0%84%EC%9D%B4-%EB%99%87/id1033453958?mt=12)
+
+## Fig
+
+![fig example](https://github.com/1ilsang/dev/assets/23524849/c6ad644a-c2c9-4315-b335-ba7a484bf595)
+
+CLI를 자주 사용한다면 정말 유용한 앱이다. 다음 명령어에 대한 힌트뿐만 아니라 해당 명령어의 기대 효과도 같이 알려준다.
+
+터미널의 효자 그 자체다.
+
+```sh
+$ brew install fig
+```
+
+> [다운로드 링크](https://fig.io/download)
+
+## Flycut
+
+![flycut example](https://github.com/1ilsang/dev/assets/23524849/0bcfab83-6bec-4cef-9e07-3b85a730f6ef)
+
+우리는 복/붙을 상당히 많이 한다. 만약 이전에 복사했던 내용을 다시 가져오고 싶다면 어떻게 하고 있는지 생각해 보자.
+
+별다른 수가 떠오르지 않는다면 이 앱을 추천한다. 이 앱은 이전에 복사했던 내용들을 기억하고 불러오는 것도 지원해 준다. 심지어 복사된 시간도 알려준다.
+
+> [다운로드 링크](https://apps.apple.com/kr/app/flycut-clipboard-manager/id442160987?mt=12)
+
+## ScreenBrush
+
+![screen brush example](https://github.com/1ilsang/dev/assets/23524849/62fd7619-78e6-4865-b198-e8ebbcb75b18)
+
+줌과 같은 화상 회의를 할 때나 전체 미팅 때 내 화면을 공유할 일이 많다면 강력히 추천한다.
+
+화면에 무엇인가 작성하거나 포인터가 필요할 때 예쁘게 시선을 잡아주는 효자 앱이다.
+
+> [다운로드 링크](https://apps.apple.com/kr/app/screenbrush/id1233965871?mt=12)
+
+## Keycastr
+
+![keycastr example](https://github.com/1ilsang/dev/assets/23524849/a5569525-3dd3-4997-96e0-73c1f318cfda)
+
+`ScreenBrush`와 함께 사용하면 빛나는 앱이다. 내가 어떤 키보드를 입력했는지 화면에 보여준다.
+
+```sh
+$ brew install --cask keycastr
+```
+
+> [다운로드 링크](https://github.com/keycastr/keycastr)
+
+## Ngrok
+
+![ngrok example](https://github.com/1ilsang/dev/assets/23524849/90215fda-ef9b-46e3-8379-1c52cfeee1af)
+
+배포 없이 로컬에서 작업한 나의 페이지를 다른 사람에게 보여주고 싶다면 어떻게 해야 할까?
+
+`ngrok`은 프록시 서버를 열어 내 로컬 포트로 접근하게 해준다. 서버 없이 빠르게 데모 페이지를 공유할 때 유용하다.
+
+```sh
+$ ngrok http 3000 # 3000번 포트로 http 통신을 허용한다.
+# 위의 이미지처럼 https://7421-1-235-243-130.ngrok-free.app URL이 생성(일회용 랜덤)된다.
+# 이후 해당 URL로 접근하면 localhost:3000으로 접속한 것과 같이 된다.
+# 이로써 정적 배포/서버 없이 누구에게나 열린 일회용 퍼블릭 URL을 가지게 되었다!
+```
+
+단, 사용하기 위해선 로그인 이후 인증 토큰을 넣어야 한다.
+
+> [다운로드 링크](https://ngrok.com/download)
+
+## Hidden bar
+
+![hidden bar example](https://github.com/1ilsang/dev/assets/23524849/de1f0c76-bbb7-4d56-a2e1-b9a250d3cf62)
+
+이쯤 되면 상단바가 상당히 늘어났다는 것을 확인할 수 있다. `Hidden bar`는 필요한 앱들만 상단바에 노출시켜 주는 앱이다.
+
+> [다운로드 링크](https://apps.apple.com/kr/app/hidden-bar/id1452453066?mt=12)
+
+## Digital Color Meter
+
+![example](https://github.com/1ilsang/dev/assets/23524849/9955b395-4547-40c4-a4c8-daa7eed3a46a)
+
+맥 자체 유용한 앱이다. CSS 작업을 하다 보면 스포이드가 필요한 순간이 있는데 유용하게 사용할 수 있다.