██████╗██╗████████╗████████╗ ██████╗ ██████╗ ██████╗ ██████╗ ███████╗ ██╔════╝██║╚══██╔══╝╚══██╔══╝██╔═══██╗ ██╔════╝██╔═══██╗██╔══██╗██╔════╝ ██║ ██║ ██║ ██║ ██║ ██║ ██║ ██║ ██║██║ ██║█████╗ ██║ ██║ ██║ ██║ ██║ ██║ ██║ ██║ ██║██║ ██║██╔══╝ ╚██████╗██║ ██║ ██║ ╚██████╔╝ ╚██████╗╚██████╔╝██████╔╝███████╗ ╚═════╝╚═╝ ╚═╝ ╚═╝ ╚═════╝ ╚═════╝ ╚═════╝ ╚═════╝ ╚══════╝
Citto Code는 Claude Code CLI를 터미널 대신 앱 화면으로 사용할 수 있게 만든 데스크톱 앱입니다.
복잡한 명령어를 외우지 않아도, 프로젝트 폴더를 열고 채팅하듯 요청하면 코드 설명, 수정, 파일 탐색, Git 확인 같은 작업을 한 곳에서 진행할 수 있습니다.
Citto는 어떤 "변신하는 포켓몬 🟣"과 어떤 "AI 코딩 어시스턴트 🤖"에서 영감을 받았습니다.
영문 소개는 docs/en/README.md에서 볼 수 있습니다.
개발자에게도 TUI는 취향을 타지만, 비개발자에게는 더 진입장벽이 높습니다. 그래서 Claude Code CLI를 터미널 대신 조금 더 쉽게 사용할 수 있는 데스크톱 UI를 만들었습니다.
이 앱은 특히 Bedrock 형태로 Claude Code를 사용할 수 있지만, 공식 Claude 데스크톱 앱을 쓰기 어렵거나 CLI/TUI가 부담스러운 사용자에게 맞춰져 있습니다.
다만 이 앱은 공식 제품을 대체하려는 목적이 아닙니다. 가능하다면 Claude 공식 데스크톱 앱을 우선 사용하는 것을 권장합니다. Citto Code는 Claude Code CLI를 더 쉽게 다루기 위한 보완 도구에 가깝습니다.
아래는 실제 사용 화면 예시입니다.
문서 작성 기준 확인된 사용 환경:
- Node.js
22.21.1 - npm
10.9.4 - Claude Code CLI
2.1.71
- 터미널보다 앱 화면이 더 편한 분
- 프로젝트별로 대화를 나누고, 수정 전 확인을 받고, 변경 파일을 눈으로 보고 싶은 분
- 프로젝트 폴더를 열고 세션별로 작업 시작
- 세션 기준 / 프로젝트 기준으로 사이드바 정리
- 퀵패널에서 최근 프로젝트를 골라 바로 새 작업 시작
- 트레이 아이콘과 단축키로 퀵패널 빠르게 열기
- 예약 작업으로 Claude 세션 자동 실행
- 파일을 첨부하거나 파일 내용을 불러와서 질문
- 자연어로 코드 설명, 버그 찾기, 기능 추가 요청
- 입력창 상단에서 서브에이전트 실행 현황을 보고, 상세 팝업과 실시간 스트리밍 결과 확인
- 실행 가능한 HTML 결과를 채팅 안에서 바로 미리보기
- 수정 전 권한 확인, 자동 편집 허용, 플랜 모드 전환
- 내장 Skill, 사용자 Skill, 플러그인 Skill을 설정과 슬래시 명령에서 함께 사용
- Claude / Ollama 모델 선택
- 변경 파일과 Git diff 확인, 브랜치 전환, 커밋/푸시/풀, 외부 브랜치 변경 자동 감지
- Git 패널에서
.md파일 마크다운 미리보기 - MCP, Skill, Agent, 환경변수 설정 관리
- 기본 프로젝트 폴더, 11개 테마, 알림, 단축키 설정
- 가능하면 Node.js
22.x와 npm10.x를 사용하세요. - Claude Code CLI가 설치되어 있고 로그인까지 끝나 있어야 합니다.
- 터미널이나 PowerShell에서
claude --version이 정상 동작해야 합니다.
앱은 Claude Code CLI를 직접 포함하지 않습니다. Claude CLI가 없으면 앱 실행 시 설치 안내가 표시됩니다.
프로젝트를 내려받은 뒤, 해당 폴더에서 터미널을 열고 아래 순서대로 실행하면 됩니다.
npm install
npm run install:mac설치가 끝나면:
/Applications에 쓸 수 있으면 그 위치에 설치됩니다.- 권한이 없으면
~/Applications에 설치됩니다. - 앱 이름은
Citto Code입니다.
처음 실행할 때 macOS 보안 경고가 나오면, 시스템 설정에서 실행을 허용해야 할 수 있습니다.
macOS 배포용 설치파일 .dmg를 만들려면 아래 명령을 실행하세요.
npm run pack:mac생성된 설치파일은 dist/ 아래의 Citto Code-버전.dmg 형식으로 만들어집니다.
프로젝트를 내려받은 뒤, 해당 폴더에서 PowerShell을 열고 아래 순서대로 실행하면 됩니다.
npm install
npm run install:win설치가 끝나면:
%LOCALAPPDATA%\Programs\Citto Code에 설치됩니다.- 바탕화면과 시작 메뉴에 바로가기가 생성됩니다.
회사 PC 정책에 따라 Windows SmartScreen 경고가 나올 수 있습니다.
윈도우 배포용 설치파일 .exe를 만들려면 아래 명령을 실행하세요.
npm run pack:win생성된 인스톨러는 dist/ 아래의 Citto Code-Setup-버전.exe 형식으로 만들어집니다.
Citto Code를 실행합니다.- 새 세션을 열면 프로젝트 폴더를 선택할 수 있고, 선택하지 않으면 기본 프로젝트 폴더에서 바로 시작합니다.
- 이미 열린 세션에서 다른 폴더로 작업하고 싶으면 앱 안에서
프로젝트 폴더 선택을 누르면 됩니다. - 설정에서 기본 프로젝트 폴더를 원하는 위치로 바꿀 수 있습니다.
- 퀵패널은 macOS 기본
Option+Space, Windows 기본Alt+Space로 열 수 있고, 트레이 아이콘 좌클릭으로도 토글할 수 있습니다. - 설정의 Skill 탭에서는 내장 Skill과 사용자 Skill뿐 아니라 플러그인 Skill도 함께 볼 수 있습니다.
- 사이드바의
Schedule beta에서 예약 작업을 만들면 정해진 시각에 새 Claude 세션이 자동으로 열립니다.
Manual,Hourly,Daily,Weekdays,Weekly빈도를 지원합니다.- 제외 요일과 Quiet Hours를 설정하면 해당 시간은 자동으로 건너뛰고 다음 가능한 시각으로 연기합니다.
- 실행 기록은 최근 24회까지 보관되며, 기록을 클릭하면 해당 세션을 다시 열 수 있습니다.
- 앱이 켜져 있어야 자동 실행됩니다.
- 앱 재시작이나 절전 복귀 후 놓친 실행은 따라잡거나, 너무 오래 지난 경우 다음 예약으로 넘깁니다.
- 정밀 타이머, 60초 폴백, 절전 복귀가 겹쳐도 같은 태스크는 한 번만 실행되도록 중복 실행을 막습니다.
- 입력창 상단에 서브에이전트 상태바가 추가되어 실행 현황을 바로 볼 수 있고, 클릭하면 프롬프트와 결과를 상세 모달에서 확인할 수 있습니다.
- 서브에이전트 응답은 실행 중에도 실시간 텍스트로 이어서 표시되고, 완료 후에는 마크다운 말풍선 형태로 읽을 수 있습니다.
- 터미널 등 앱 밖에서 브랜치를 바꿔도
.git/HEAD감지로 Git 패널과 커밋 로그가 자동으로 즉시 갱신됩니다. - HTML 미리보기는 상대 경로 파일도 현재 세션 폴더 기준으로 올바르게 열리고, 권한 승인 직후 다시 튀어나오는 문제가 수정되었습니다.
- 예약 작업은 정밀 타이머, 60초 폴백, 절전 복귀가 겹쳐도 같은 태스크가 중복 실행되지 않도록 보호됩니다.
- Windows 빌드는 전용
.ico아이콘에 더해tray-icon.png기반 트레이 아이콘을 함께 사용합니다.
- 새 테마
Aurora,Sakura,Mint,Lavender가 추가되었습니다. - 새 4개 테마는 채팅 배경과 사용자 말풍선 색이 일반 테마와 다르게 보입니다.
- 우측 패널은 더 넓게 확장할 수 있습니다.
- Windows에서는 전용
.ico아이콘과 컬러 트레이 아이콘을 사용합니다.
Claude Code CLI가 설치되어 있지 않거나, PATH에 잡혀 있지 않은 경우입니다.
터미널에서 아래 명령이 되는지 먼저 확인하세요.
claude --version안 된다면 which 명령으로 설치 위치를 찾아보세요.
which claude- macOS: 보안 경고 때문에 첫 실행이 막힐 수 있습니다.
- Windows: 회사 보안 정책 또는 SmartScreen 때문에 확인 창이 뜰 수 있습니다.