02. 클로드 코드 상태 표시줄 설정하기 (feat. claude-dashboard)

개발 지식/ai

02. 클로드 코드 상태 표시줄 설정하기 (feat. claude-dashboard)

sisun 2026. 7. 5. 19:48

이전 글에서는 클로드 코드 설치하는 방법에 대해서 알아봤습니다.

https://dev-sisun.tistory.com/63

01. 클로드 코드 설치하기

사실 저는 Cursor IDE를 오랫동안 사용해왔던터라 Cladue Code 필요성을 느끼지 못했었습니다.Cursor의 핵심 기능인 자동 완성은 물론이거니와 기존 코드에 에이전트 모드를 통해서 원하는 방향대로 코

dev-sisun.tistory.com

본격적으로 클로드 코드를 시작하기에 앞서 즉각적으로 확인할 수 있는 비용 추적 환경을 구성하기 위해

이번 글에서는 클로드 코드를 터미널에 상태 표시줄을 설정하는 방법에 대해서 정리해보려고 합니다.

클로드에서 설명하는 상태 표시줄을 설정하는 이유는 다음과 같습니다.

작업 중 컨텍스트 윈도우 사용량을 모니터링하려는 경우
세션 비용을 추적해야 하는 경우
여러 세션에서 작업하고 이들을 구분해야 하는 경우
git 브랜치 및 상태를 항상 표시하려는 경우

사실 세션 비용 추적의 경우에는 /usage 명령어나 클로드 데스크탑 앱에서 확인을 해볼 수도 있지만, 실시간으로 확인하지 못하고 매번 직접 알아보기 위한 과정이 여간 불편한 게 아닐 겁니다.

그래서 비용 추적을 용이하게 하면서, 기타 정보들을 터미널에 바로 표시할 수 있도록 설정해봤습니다.

참고로 /statusline 명령어 사용시, 6.8k 토큰을 사용하게 됩니다.

큰 소모량은 아니지만 원하는 형태가 나올 때 까지 수정하는 비용이 비효율적이기 때문에 claude-dashboard 플러그인 사용을 추천합니다.

상태바 설정 방법은 2가지로 나눌 수 있습니다.

/statusline 명령어 사용하기 (비추)
1-1. 기본 설정
1-2. Claude Code Dos 예제대로 커스텀하기
/claude-dashboard 플러그인 사용하기 (권장)

차례대로 설정 방법에 대해 알아보겠습니다.

/stautsline으로 상태 표시줄 설정하기

1-1. 기본 설정

1. claude가 실행중인 화면에서 명령어 입력칸에 /stautsline을 입력해줍니다.

2. What would you like in stauts line? 이라고 질문하며 상태 표시줄에 무엇을 넣겠냐고 물어봅니다.

예시로 current directory(현재 파일 경로), git branch/status(git 브랜치 및 상태), model name(사용중인 모델 이름 ex.sonnet, opus), context remaining %(남은 컨텍스트량), 또는 something styled like your prompt (username + emoji + git branch) (프롬프트 스타일링) 등을 보여줍니다.

저는 current directory, git branch/status, model name, context remaining % 등을 표시하겠다고 입력했습니다.

3. 이후에 Do you want to proceed? 라고 나타나며 계속 진행할거냐고 물어봅니다.

모든 질문은 1. Yes로 선택해주면 됩니다.

4. 그리고 settings.json 파일을 수정할 건지 물어보는 질문도 나오는데 1. Yes를 선택해주면 됩니다.

5. 그리고 statusline-command.sh 파일 생성 후 수정에 대한 질문을 물어봅니다.

여기서 저기 코드가 적힌 부분 중 '수정 전'처럼 적힌 부분이 있다면 수정을 해줘야 합니다. 수정을 해주지 않으면 branch 글자가 제대로 표시되지 않는 문제가 밠갱하빈다.

수정 전

fi
    git_display=" \033[2m|\033[0m \033[2m\033[33m${branch}${dirty}\033[0m"

수정 후

  fi
    git_display=$(printf ' \033[2m|\033[0m \033[2m\033[33m%s%s\033[0m' "$branch" "$dirty")

수정 후 cmd + s(macOS 기준)로 파일을 저장해주고, 1.Yes 로 선택해줍니다.

6. 아마 중간에 계속 Do you want to proceed? 질문이 나타났을 겁니다. 모두 Yes로 해주면 됩니다.

설정이 완료되면 아래와 같이 하단에 현재 디렉토리, git 브랜치명, 모델 이름, 남은 컨텍스트가 보여집니다.

이러고 나서 사용한 토큰량을 확인해보니 총 6.8k였습니다.

첫 클로드 코드 사용이었는데 이렇게 설정으로 토큰을 태우니 다소 아깝다는 생각이 들었습니다. 또한 자동 구성으로는 예쁘게 만들어지지도 않았습니다.

1-2. Claude Code Docs 예제대로 커스텀하기

1. 이왕 이렇게 토큰 태운거 혹시 클로드 코드 Dos 예제대로 설정해달라고 하면 되는지 시험해보기로 했습니다.

(예제 속 상태 표시줄이 제 취향이었기 때문입니다😊)

명령은 다음과 같이 했습니다.

https://code.claude.com/docs/ko/statusline#display-multiple-lines 에 나와 있는대로 현재 상태 표시줄을 설정해줘.

결과물은 아래처럼 나왔습니다.

아마도 2번에서 제가 요청했던 내역들(current directory, git branch/status, model name, context remaining %)만 표시해준 것 같아요.

이렇게 요청을 한 뒤에 토큰 사용량은 다음과 같이 변했습니다. 이전 6.8k에서 13.6k를 소모했네요.

2. 하지만 제가 원하는 결과가 아니기 때문에 추가적으로 코드 수정 요청을 해봅니다.

예제 코드를 복사해서 그대로 해달라고 요청했습니다.

예제 코드

#!/bin/bash
input=$(cat)

MODEL=$(echo "$input" | jq -r '.model.display_name')
DIR=$(echo "$input" | jq -r '.workspace.current_dir')
COST=$(echo "$input" | jq -r '.cost.total_cost_usd // 0')
PCT=$(echo "$input" | jq -r '.context_window.used_percentage // 0' | cut -d. -f1)
DURATION_MS=$(echo "$input" | jq -r '.cost.total_duration_ms // 0')

CYAN='\033[36m'; GREEN='\033[32m'; YELLOW='\033[33m'; RED='\033[31m'; RESET='\033[0m'

# 컨텍스트 사용량에 따라 막대 색상 선택
if [ "$PCT" -ge 90 ]; then BAR_COLOR="$RED"
elif [ "$PCT" -ge 70 ]; then BAR_COLOR="$YELLOW"
else BAR_COLOR="$GREEN"; fi

FILLED=$((PCT / 10)); EMPTY=$((10 - FILLED))
printf -v FILL "%${FILLED}s"; printf -v PAD "%${EMPTY}s"
BAR="${FILL// /█}${PAD// /░}"

MINS=$((DURATION_MS / 60000)); SECS=$(((DURATION_MS % 60000) / 1000))

BRANCH=""
git rev-parse --git-dir > /dev/null 2>&1 && BRANCH=" | 🌿 $(git branch --show-current 2>/dev/null)"

echo -e "${CYAN}[$MODEL]${RESET} 📁 ${DIR##*/}$BRANCH"
COST_FMT=$(printf '$%.2f' "$COST")
echo -e "${BAR_COLOR}${BAR}${RESET} ${PCT}% | ${YELLOW}${COST_FMT}${RESET} | ⏱️ ${MINS}m ${SECS}s"

예제 코드를 그대로 붙여서 요청했으니 당연하게도 제가 원하는 결과가 나왔습니다.

아무래도 코드 변경만 간단하게 하다보니 이전 20.4k에서 2.8k이라는 적은 토큰량으로 변경했습니다.

/claude-dashboard 플러그인 사용하기

지금까지는 claude code에서 알려주는 방식대로 상태 표시줄을 설정했지만, 이번에는 claude-dashboard 플러그인을 통해 편하게 설정해보려고 합니다.

https://github.com/uppinote20/claude-dashboard

GitHub - uppinote20/claude-dashboard: Comprehensive status line plugin for Claude Code with context usage, API rate limits, and

Comprehensive status line plugin for Claude Code with context usage, API rate limits, and cost tracking - uppinote20/claude-dashboard

github.com

claude-dashboard 제작자는 다음과 같이 소개합니다.

Claude Code용 종합 상태 표시줄 플러그인 — Claude, Codex, Gemini 및 z.ai CLI 전반에 걸친 통합 사용 현황 모니터링 기능을 제공하며, 컨텍스트, 사용량 제한, 비용 추적 및 모듈형 위젯 시스템을 지원합니다.

클로드 코드 및 node.js 최소 요구 사양은 Claude Code v1.0.80+ / Node.js 18+ 입니다.

혹시 설치가 제대로 되지 않는다면 버전 확인을 먼저 해주세요!

설치하기

1. 클로드 코드 터미널에 아래 명령어를 차례대로 하나씩 실행해줍니다.

/plugin marketplace add uppinote20/claude-dashboard
/plugin install claude-dashboard
/claude-dashboard:setup

1-1. 먼저 첫번째 줄의 명령어는 marketplace에 claude-dashboard를 등록하는 것입니다.

/plugin marketplace add uppinote20/claude-dashboard

1-2. 그리고 두번째 줄의 명령어를 입력해서 실행시키면 claude-dashboard가 설치됩니다.

/plugin install claude-dashboard

이 때, Install for you(user scope)를 선택해주면 됩니다.

참고로 각 항목이 의미하는 바는 다음과 같습니다. (출처: Claude)

Local Scope(로컬): 현재 작업 중인 프로젝트에서만, 그리고 본인만 사용 가능
Project Scope(프로젝트): .mcp.json 등의 설정 파일에 저장되어, 해당 프로젝트를 공유하는 팀원 전체가 사용 가능
User Scope(사용자, "Install for you"): 특정 프로젝트에 종속되지 않고, 내 컴퓨터의 모든 프로젝트에서 사용 가능. 다른 사람과는 공유되지 않음 (예전 버전에서는 "global"이라고 불렸습니다)

1-3. 마지막으로 세번째 명령어를 입력해주면 초기 설정이 진행됩니다.

/claude-dashboard:setup

🛠️ Unknown command: /claude-dashboard:setup 에러가 발생하는 경우

만약 /claude-dashboard:setup 실행시 위 문구가 보인다면, /reload-plugins 를 실행하여 리로드해준 후 다시 명령어를 실행시켜주면 됩니다.

2. 1-3 명령어를 실행하고 나면, display mode, language, plan, theme 등을 설정할 수 있습니다.

각 항목이 의미하는 내용은 다음과 같습니다.

Display mode: 어떻게 상태바에 보여줄지 선택하는 단계

- compact (1줄로 표현): 모델, 컨텍스트 진행률 표시줄, 비용, 사용량 한도(5시간/7일) 또는 z.ai 사용량(제공업체별로 상호 배타적)
- normal (2줄로 표현): 프로젝트 정보, 세션 ID, 세션 시간, 소진율, 할 일 진행 상황을 추가

- detailed (6줄로 표현): 소진 시간, 구성 항목 수, 도구/에이전트 상태, 캐시 적중률, 성능 배지, 토큰 내역, 예측, 예산, Codex/Gemini 사용량 추가

- custom: 각 행에 표시될 위젯을 선택 후, 레이아웃과 순서를 자유롭게 제어 가능

Language: 언어 선택

- auto: 자동 (시스템 설정 언어 탐지)

- en: 영어

- ko: 한글

- Type something: 기타 언어 입력

Plan: 구독중인 클로드 plan

- max : 5시간 및 7일 요금 한도를 모두 표시

- pro: 5시간 요금 한도 표시

- Type something: 기타 입력

Theme: 테마 설정

- default: 표준 다크 터미널 색상 구성
- minimal: 색상 및 이모티콘을 최소화한, 심플하고 절제된 스타일
- catppuccin: 모카(어두운) 또는 라떼(밝은) — 다음 단계에서 선택하라는 메시지가 표시됨.
- other dark theme: 기타 어두운 테마로, 드라큘라 / 그루브박스 / 노르드 / 도쿄나이트 / 솔라라이즈드 — 다음 단계에서 선택함.
- Type something: 기타 입력

각각 원하는 항목을 방향키로 선택한 후 enter를 눌러줍니다. 저는 아래와 같이 선택해줬습니다.