작업 목록으로

SpotifyNotch

macOS

Mac 화면 위쪽에서 Spotify의 재생 정보를 확인하고 제어하는 작은 앱입니다. 앨범 이미지와 곡 정보, 재생 진행 상태를 보여주며, 화면을 펼쳐 재생 위치를 바꿀 수 있습니다.

노트북 화면 위의 작은 음악 재생 창과 헤드폰을 그린 일러스트

작은 화면에서 신경 쓴 것

앱과 웹 플레이어 사이의 전환

Spotify 앱과 Chrome·Safari의 웹 플레이어에서 재생 정보를 읽습니다. 현재 재생 중인 소스와 직전에 확인한 상태를 함께 보고, 잠깐의 상태 변화에 표시가 앱과 웹 사이를 오가지 않도록 전환 조건을 두었습니다.

여러 브라우저 탭 중 실제로 음악을 재생하는 탭으로 돌아가는 동작도 함께 다뤘습니다.

디스플레이가 달라져도

노치가 있는 내장 화면뿐 아니라 외부 모니터와 노치가 없는 화면에서도 상단 위치를 계산합니다. 설정창을 열고 닫거나 다른 앱과 함께 사용할 때 재생 화면과 입력 반응이 유지되는지도 살폈습니다.

설계와 구현실행 경계 · 재생 소스 선택 · 다중 디스플레이

구성과 데이터 흐름

Spotify 앱·웹 플레이어 → 상태 수집과 소스 선택 → 화면 모델 → AppKit 오버레이

재생 정보를 읽는 SpotifyFetcher, 화면 상태를 갱신하는 WindowManager, 창을 배치하는 NotchWindow로 책임을 나눴습니다. 외부 앱 조회는 백그라운드에서 실행하고, 화면 모델과 창의 변경은 MainActor에서 처리합니다.

늦게 돌아온 응답 다루기

이전 조회가 진행 중이면 새 조회를 겹쳐 시작하지 않습니다. 응답이 오래 걸리면 다음 조회를 허용하되, 조회마다 부여한 순번으로 늦게 도착한 결과가 최신 화면을 덮어쓰지 않도록 했습니다. 외부 앱의 자동화 응답 속도에 화면 갱신 전체가 묶이지 않게 한 선택입니다.

앱 이름보다 실제 재생 상태를 기준으로

앱과 브라우저의 결과를 같은 재생 스냅샷으로 바꾸고, 현재 재생 중인 소스와 직전에 확인한 상태를 비교합니다. 소스 전환에는 짧은 대기 조건을 두고, 브라우저의 프로세스·창·탭 식별자를 함께 보관해 음악을 읽어 온 탭으로 돌아갑니다.

화면별 좌표와 제약

디스플레이 식별자, 내장 화면 여부, 노치의 안전 영역을 바탕으로 표시 대상을 고릅니다. 창 위치는 선택한 화면의 절대 좌표에서 계산하므로, 외부 모니터가 주 화면의 왼쪽이나 위에 놓인 경우도 같은 배치 규칙을 사용할 수 있습니다.

검증과 남은 범위

재생 소스 전환, 브라우저 탭 활성화, 설정창의 키보드·포인터 입력을 확인하는 스크립트와 회귀 체크리스트를 두었습니다. 탭 제목만 읽는 대체 경로에서는 정확한 재생 상태와 진행 시간을 알 수 없습니다.

지금까지와 다음 단계

핵심 재생 화면과 제어, 네이티브 설정창, 배포 파일을 만드는 과정을 구현했습니다. 권한 요청과 재생 소스의 준비 상태를 안내하는 부분은 더 다듬을 필요가 있습니다.

웹 데모에서 화면의 모습과 조작을 살펴볼 수 있습니다. 실제 Mac의 Spotify 연동은 네이티브 앱에서 동작합니다.

SpotifyNotch 웹 데모 보기

Swift, AppKit, AppleScript를 사용합니다.

프로젝트 회고 · 비공개