macOS 메뉴 막대 아이콘 상태 구현하기

macOS 앱을 개발하다 보면 메뉴 막대 아이콘이 너무 정적으로 느껴질 때가 있습니다. 사용자는 지금 앱이 내 목소리를 듣고 있는지, 아니면 백그라운드에서 열심히 작업 중인지 아이콘만 보고는 바로 알기 어렵죠.

단순히 멈춰 있는 아이콘 대신, 앱의 상태를 직관적으로 보여줄 수 있는 애니메이션 상태 관리 방법을 정리해 드립니다.

필요한 것

• macOS 앱 소스 코드 (apps/macos)
• AppState 및 AppStateStore 접근 권한

빠른 시작

메뉴 막대 아이콘은 CritterIconRenderer.makeIcon을 통해 렌더링되며, 상황에 따라 네 가지 주요 상태를 가집니다. 5분 안에 핵심 상태를 연결하는 방법입니다.

1. 음성 트리거 반응 (Big Ears)

사용자의 웨이크 워드(Wake word)가 감지되면 아이콘의 귀가 1.9배 커지며 가독성을 위한 구멍이 생깁니다. 음성 파이프라인에 다음 코드를 연결하세요.

// 음성 감지 시작 시
AppState.triggerVoiceEars(ttl: nil)

// 1초 동안 정적이 감지되면 원래대로 복구
stopVoiceEars()

2. 작업 중 상태 표시 (Agent Running)

에이전트가 작업을 수행 중일 때는 다리가 빠르게 움직이는 애니메이션이 실행됩니다. AppStateStore를 사용하여 상태를 토글할 수 있습니다.

// 작업 시작 시 상태 변경
AppStateStore.shared.setWorking(true)

// 작업 완료 후 반드시 리셋 (defer 블록 권장)
defer {
    AppStateStore.shared.setWorking(false)
}

문제 해결

• 애니메이션이 멈추지 않고 계속 실행되나요?: 작업이 중단되거나 지연될 때 아이콘이 해당 상태에 갇히지 않도록 TTL(Time To Live)을 10초 미만으로 짧게 설정하세요. 반드시 defer 블록에서 상태를 리셋해야 합니다.
• 아이콘이 의도치 않게 깜빡거리나요?: CLI나 외부 브로커를 통해 상태를 변경하지 마세요. 불필요한 움직임을 방지하기 위해 앱 내부 신호만 사용해서 상태를 관리해야 합니다.

구현 중에 막히는 부분이 있다면 AI Setup Assistant에게 질문해 보세요.

다음 단계

• CritterIconRenderer를 활용한 커스텀 아이콘 드로잉
• AppStateStore를 통한 전역 상태 동기화 방법