안녕하세요. 요즘 바이브 코딩으로 "한 달에 앱 하나씩 만들어 보자"는 목표를 세우고 틈틈이 공부하고 있는 평범한 직장인입니다.

클리앙에 가입한 지는 꽤 오래됐는데, 이렇게 글을 쓰는 건 처음이네요.

기억이 나지않아 몰랐는데 17년도에 글을쓴적이 있네요
본의아니게 거짓말 한점 사과드립니다.

저는 개발을 제대로 해 본 적은 없고, 업무상 파워셸 스크립트를 조금 끄적이는 정도가 전부입니다. 

목표가 무색하게도 한 달에 하나는커녕, 두 달 동안 해당 맥북용 앱 하나에 매달려 버렸습니다. 

그래도 나름 완성도 있게 마무리한 것 같아 용기 내어 공유해 봅니다.

능력자분들이 보시기엔 많이 부족하겠지만, 너그럽게 봐주시면 감사하겠습니다.

제가 만든 건 AI 사용량(토큰)을 모니터링하는 맥용 앱입니다. 

특히 노치가 있는 맥북에 사용 할 수 있게 노치 설정을 넣었습니다.

화면 테두리에 선을 그리고, 사용할수록 그 선이 줄어드는 형태로 지금 얼마나 썼고 앞으로 얼마나 더 쓸 수 있는지를 곁눈질로 확인할 수 있게 만들었습니다. (사진을 확대하면 테두리에 선이 있습니다.)

참고로 선에 마우스 호버시 정보 표시 됩니다

해당 앱의 주요 기능 정리 (깃허브에 적은 내용을 긁어 왔습니다.)

• 화면 테두리 오버레이 — 잔여율만큼 색 띠가 채워지고, 쓸수록 앵커에서부터 깎인다.
• 멀티 AI — Claude(코랄) · Gemini(블루) · Codex(틸). 같은 레일에 겹치거나 AI별로 선을 나눠 표시.
• 화면 분할 — 메뉴바선/Dock선으로 화면을 나누고 원하는 영역(메뉴바만, Dock만 등)의 둘레를 감싼다. 경계선은 화면 위에서 직접 드래그로 조정.
• 세그먼트 배치 — 가로 4개(상단/메뉴바선/Dock선/하단) + 세로 좌우 각 3구간을 인터랙티브 다이어그램에서 클릭해 선택. 한 줄로 이어진 조합만 허용, 모양 프리셋 원클릭.
• 모서리 표현 — 영역별 모서리 곡률(경계 연결 토글), 가로선 끝 위/아래 둥글게, 스쿱(오목 감싸기) 모서리, 노치 감싸기(자동 감지).
• 겹침 렌더링 — 같은 모양끼리는 급한(잔여 최소) 띠가 맨 위, 부분 겹침은 실제 겹치는 구간만 굵기를 나눠 나란히. 굵기 전환은 수백 pt에 걸쳐 평활되어 눈치챌 수 없다.
• 메뉴바 — 잔여율 링 아이콘(기준 AI 선택) + 아이콘 옆 %(AI별) + 드롭다운 정보 카드(고대비, 라이트/다크 자동)에 5시간·주간·모델별 주간 잔여·리셋 카운트다운·소진 예측·24시간 미니 차트(호버 시 값 표시).
• 구독 플랜·모델별 사용량 — AI 이름 옆에 구독 플랜 뱃지(예: Claude Max (5x)), 그리고 5시간(현재 세션)·주간(모든 모델)·모델별 주간(예: Fable) 잔여를 함께 표시. 서버가 주는 항목만 자동 표시된다.
• 분석 대시보드 — 메뉴/설정의 "분석 보기"로 열림. 기간(1일·3일·주간·한달)별 AI별 소비 비중(도넛)·시간대별 사용 패턴·요약(누적/일평균/가장 활발한 시간). Claude·Gemini·Codex를 모두·일부·하나만 골라 볼 수 있다.
• 외형(라이트/다크/시스템) — 기기 설정을 따르거나 라이트·다크를 직접 선택. 메뉴·설정·호버 색이 테마에 맞게 바뀐다.
• AI 표시 순서 — 드롭다운·호버·메뉴바 % 표시 순서를 통일해서 조절.
• 알림 — 사용률 75/90/95% 도달 시 macOS 알림.
• 편의 — 로그인 탭(AI별 로그인/로그아웃), 자동 갱신 주기(1분~2시간+직접 입력), 프리셋 10개 + 기본 상태 저장, Mac 로그인 시 자동 실행, 한국어/English/日本語. 설정·분석 창이 열려 있는 동안엔 Dock 아이콘으로 다시 불러올 수 있다.
• 모든 설정은 저장되어 재시작해도 유지된다.

- 저는 Claude를 주로 써서 Claude를 기준으로 만들었고, Gemini와 GPT Codex도 함께 모니터링할 수 있습니다.

- 선이 경로가 겹치는 경우 남은 토큰이 적을 수록 자동으로 레이어상 가장 위에 배치되게 됩니다

- 참고로 Claude는 Max(5x), Gemini는 프로 버전, GPT는 무료로만 사용 중입니다

- 사용량은 전부 API 호출로 새로고침해서 반영하는 방식입니다.

- 특히 신경 쓴 부분은 맥북의 노치와 상단 테두리 곡률, 곡선과 직선 부분에서의 선 처리, 그리고 앱·브라우저 실행 시의 모서리 곡률까지 자연스럽게 반영되도록 한 점입니다.

- 분석 보기는 급하게 추가한 기능에 디바이스에 저장된 내용을 기반으로 내용이 보이다 보니 내용이 축적되지 않아 아직 문제여부를 확인하지 못했습니다.

부족한 앱이지만 한번 써 보시고, 보완하면 좋을 점이나 사용하면서 불편할 것 같은 부분이 있다면 편하게 말씀해 주시면 정말 감사하겠습니다. 바이브 코딩으로 만든 데다 코딩을 거의 모르다 보니 반영에는 시간이 좀 걸리겠지만, 하나씩 개선해 나가 보겠습니다.

아래는 제 블로그에 올린 해당 앱 설명과, 앱을 내려받을 수 있는 깃허브 링크입니다.

- 블로그: https://wwhalefe-log.vercel.app/usagemeter-macos-ai-usage-overlay120

- 깃허브(다운로드): https://github.com/WWhaleFe/usagemeter/releases/latest