프로젝트 사이드바
개요
프로젝트 사이드바는 프로젝트 워크스페이스의 중앙 탐색 허브입니다. 파일 관리와 버전 관리부터 AI 채팅 세션, 작업 추적, 배포 등에 이르기까지 작업 중 필요한 모든 주요 도구와 패널에 빠르게 접근할 수 있습니다. 모든 패널은 슬라이드 아웃 오버레이로 열리므로 현재 뷰를 떠나지 않고 도구 간 전환할 수 있습니다.
사이드바는 프로젝트 워크스페이스의 오른쪽 가장자리를 따라 실행되며 각 패널의 아이콘 버튼을 포함합니다. 아이콘을 클릭하면 해당 패널의 오버레이가 열리고, 다시 클릭하거나 Escape를 누르면 닫힙니다. 사이드바는 항상 표시되며 프로젝트 도구와 상호작용하는 주요 방법입니다.
사용 가능한 패널
사이드바에는 다음 패널이 포함되어 있으며, 각각 아래 섹션에서 자세히 설명됩니다:
즐겨찾기
가장 많이 사용하는 프로젝트 파일에 별표를 붙이고 정리하여 즉시 접근합니다.
채팅
AI 채팅 그룹, 에이전트 세션, 대화 기록을 관리합니다.
GitHub
저장소 상태, 브랜치, 커밋을 보고 풀 리퀘스트를 관리합니다.
작업
프로젝트 작업을 추적하고, 우선순위를 할당하며, 워크플로우를 관리합니다.
배포
구성된 호스팅 제공자에 대한 배포를 모니터링하고 트리거합니다.
히스토리 캘린더
캘린더 타임라인에서 프로젝트 활동과 파일 변경 사항을 탐색합니다.
빌드
프로젝트 빌드의 빌드 로그, 상태, 출력을 봅니다.
파일 트리
파일 트리 표시 설정과 항목 수준 작업을 관리합니다.
프롬프트 박스
AI 에이전트에 지시사항을 전송하기 위한 빠른 접근 프롬프트 입력.
블록 그룹 라이브러리
라이브러리에서 재사용 가능한 컴포넌트 블록을 탐색하고 관리합니다.
체크된 파일
일괄 작업을 위해 현재 선택된 파일을 보고 관리합니다.
검색
전체 프로젝트에서 파일, 코드, 콘텐츠를 검색합니다.
파일 숨기기
파일 트리에서 숨겨지는 파일과 폴더를 구성합니다.
즐겨찾기 패널
개요
즐겨찾기 패널은 가장 많이 사용하는 프로젝트 파일에 별표를 붙이고 정리하여 빠르게 접근할 수 있는 사이드바 오버레이입니다. 매번 파일 트리를 탐색하는 대신 중요한 파일을 즐겨찾기로 표시하고 즉시 찾을 수 있습니다.
기능
별표 토글
파일의 별표 아이콘을 클릭하여 즐겨찾기에 추가하거나 제거합니다. 별표 표시된 파일은 빠른 접근을 위해 즐겨찾기 패널에 나타납니다.
그룹 정리
즐겨찾기 파일을 커스텀 그룹으로 정리합니다. 그룹은 로컬에 저장되므로 세션 간에 유지됩니다.
다중 파일 선택
여러 즐겨찾기 파일을 한 번에 선택하고 모두 작업에 추가하는 등의 일괄 작업을 수행합니다.
작업에 추가
하나 이상의 즐겨찾기 파일을 선택하고 한 번의 클릭으로 작업에 직접 추가하여 워크플로우를 간소화합니다.
즐겨찾기 카운터
즐겨찾기 파일의 총 수를 표시하는 배지로 저장된 파일 수를 항상 알 수 있습니다.
채팅 패널
개요
채팅 패널은 AI 채팅 그룹과 에이전트 세션을 관리하기 위한 사이드바 오버레이입니다. 채팅 대화를 탐색, 생성, 편집, 삭제하고 CLI, SDK, ACP 세션 로그를 볼 수 있는 중앙 장소를 제공합니다.
탭
채팅
AI 채팅 그룹을 탐색하고 관리합니다. 새 그룹을 만들고, 이름을 바꾸고, 기존 그룹을 검색하거나, 더 이상 필요 없는 대화를 삭제합니다.
CLI
Claude Code, Gemini CLI, Codex CLI 같은 CLI 기반 에이전트의 세션 로그를 봅니다. 각 세션은 브랜드 로고와 함께 에이전트 유형을 표시합니다.
SDK
Claude SDK, Gemini SDK, OpenAI SDK 통합을 포함한 SDK 기반 에이전트의 세션 로그를 봅니다.
ACP
ACP (Agent Communication Protocol) 에이전트의 구성 및 실행 기록과 함께 세션 로그를 봅니다.
기능
채팅 그룹 CRUD
채팅 그룹을 생성, 이름 변경, 검색, 삭제합니다. 각 그룹은 컨텍스트와 함께 전체 대화 스레드를 보유할 수 있습니다.
페이지네이션
세션은 한 번에 50개 항목을 로드하며 큰 기록의 경우 "더 보기" 버튼이 있습니다.
다중 선택
세션 전체에서 범위 선택을 위해 Shift+Click을 사용합니다. 선택한 항목에 대해 일괄 삭제 또는 기타 작업을 수행합니다.
컨텍스트 메뉴
세션을 마우스 오른쪽 클릭하여 삭제 또는 상세 로그 보기 같은 빠른 작업에 접근합니다.
에이전트 식별
각 세션은 사용된 AI 에이전트(Claude Code, Gemini, Codex, ACP)의 브랜드 로고를 표시하여 한눈에 식별할 수 있습니다.
작업 패널
개요
작업 패널은 프로젝트 수준의 작업을 생성하고 관리하기 위한 사이드바 오버레이입니다. 각 작업에는 이름, 프롬프트 또는 지시사항, 컨텍스트를 위한 프로젝트 파일 선택이 포함될 수 있습니다. 작업을 통해 작업 항목을 정리하고 AI 에이전트에 직접 전달할 수 있습니다.
기능
작업 생성
이름, 프롬프트/지시 텍스트, 선택된 프로젝트 파일로 작업을 생성합니다. 작업은 현재 프로젝트에 범위가 지정됩니다.
파일 트리 통합
크기 조절 가능한 파일 트리 패널을 통해 작업의 컨텍스트로 첨부할 프로젝트 파일을 탐색하고 선택합니다.
다중 파일 선택
작업에 포함할 여러 파일을 선택합니다. 선택된 파일 목록은 개별 항목을 제거하는 옵션과 함께 모든 선택된 파일을 보여줍니다.
컨텍스트 메뉴
작업 파일 트리의 파일을 마우스 오른쪽 클릭하여 작업에 추가 또는 제거 같은 빠른 작업을 수행합니다.
파일 감시기
통합 파일 감시기가 프로젝트 파일의 변경 사항을 자동으로 감지하여 작업 컨텍스트를 최신 상태로 유지합니다.
토스트 알림
성공적인 저장, 오류, 정보 메시지에 대한 토스트 알림을 통한 시각적 피드백.
배포 패널
개요
배포 패널은 다양한 호스팅 플랫폼에 프로젝트를 배포하기 위한 사이드바 오버레이입니다. 사용 가능한 플랫폼은 프로젝트 유형에 따라 변경되어 스택에 맞는 배포 옵션을 제공합니다.
프로젝트 유형별 플랫폼 지원
프론트엔드 / 웹 앱
정적 사이트, SPA, SSR 애플리케이션을 배포합니다.
백엔드 / Python / API 프로젝트
서버 사이드 애플리케이션과 API를 배포합니다.
WordPress 프로젝트
Headless WordPress CMS 설정을 배포합니다.
기능
배포 CRUD
배포를 생성, 조회, 업데이트, 삭제합니다. 각 배포는 플랫폼, 브랜치, git 저장소 구성을 추적합니다.
자동 감지
프로젝트에 연결된 기존 배포가 패널을 열면 자동으로 감지되어 나열됩니다.
API 키 관리
각 배포 플랫폼의 API 키를 관리합니다. 키는 안전하게 저장되고 특정 배포와 연결됩니다.
플랫폼별 설정
각 배포에 대해 배포 브랜치, git 저장소, 환경 변수, 플랫폼별 옵션을 구성합니다.
활성 배포 표시기
현재 활성 배포가 강조 표시되어 어떤 배포가 라이브인지 한눈에 볼 수 있습니다.
컨텍스트 메뉴
배포를 마우스 오른쪽 클릭하여 삭제 및 상태 새로고침을 포함한 빠른 작업에 접근합니다.
히스토리 캘린더 패널
개요
히스토리 캘린더 패널은 프로젝트 기록의 캘린더 기반 뷰를 제공하는 사이드바 오버레이입니다. 날짜별로 항목을 탐색하고, 내부 및 외부 컨텍스트 기록을 보고, 특정 날짜와 연결된 과거 AI 상호작용을 검토합니다.
기능
인터랙티브 캘린더
시각적 캘린더 선택기로 월과 연도를 탐색합니다. 기록 항목이 있는 날짜가 강조 표시되어 활동을 한눈에 확인할 수 있습니다.
월/연 선택기
한 번에 한 달씩 스크롤하는 대신 원하는 월과 연도로 빠르게 이동합니다.
히스토리 탭
"GitHub"과 "Internal" 탭 간 전환하여 다른 유형의 기록을 봅니다 — git 커밋 및 이벤트 대 내부 AI 컨텍스트 항목.
항목 뷰어
강조 표시된 날짜를 클릭하여 해당 날짜의 모든 기록 항목을 봅니다. 개별 항목을 클릭하여 전체 세부 정보를 봅니다.
컨텍스트 메뉴
항목을 마우스 오른쪽 클릭하여 세부 정보 보기 또는 특정 기록 항목 삭제 같은 빠른 작업에 접근합니다.
확인 후 삭제
실수로 삭제하는 것을 방지하기 위해 확인 단계와 함께 기록 항목을 제거합니다.
Notifications
토스트 스타일 알림이 패널 내에서 성공적인 작업, 오류, 정보 메시지를 확인합니다.
파일 트리 항목
개요
파일 트리는 프로젝트 사이드바의 주요 파일 브라우저입니다. 프로젝트의 디렉토리 구조를 재귀적이고 확장 가능한 트리 뷰로 표시합니다. 각 파일과 폴더는 유형별 아이콘으로 렌더링되며 풍부한 상호작용을 지원합니다.
기능
재귀 트리 뷰
폴더를 확장하고 축소하여 내용을 표시합니다. 트리는 성능 유지를 위해 구성 가능한 깊이 제한으로 깊은 중첩을 지원합니다.
파일 유형 아이콘
각 파일은 유형에 맞는 아이콘을 표시합니다 (예: TypeScript, JavaScript, JSON, CSS, 이미지). 폴더는 열림/닫힘 아이콘이 구별됩니다.
드래그 앤 드롭
파일과 폴더를 트리 내 새 위치로 드래그하여 이동합니다. 드래그하면 드롭 대상이 강조 표시됩니다.
파일 선택
파일을 클릭하여 선택하고 엽니다. Shift+Click으로 범위 선택과 함께 다중 파일 선택을 위해 체크박스를 사용합니다.
컨텍스트 메뉴
파일이나 폴더를 마우스 오른쪽 클릭하여 빠른 작업: 콘텐츠 복사, 작업에 추가, 편집기에서 생성/편집, 리팩토링, 삭제, 숨기기, 즐겨찾기 토글, 다운로드.
자동 새로고침
폴더의 파일 시스템 변경 사항을 감시하고 파일이 추가, 제거, 수정되면 자동으로 새로고침합니다.
검색 강조
검색 시 일치하는 파일 이름이 트리 내에서 강조 표시되어 결과를 빠르게 찾을 수 있습니다.
즐겨찾기 토글
각 파일의 별표 아이콘으로 즉각적인 시각적 피드백과 함께 즐겨찾기에 추가하거나 제거합니다.
제공자 전환
여러 개가 감지되면 프로젝트 내 다른 소스 루트 또는 제공자 경로 간 전환합니다.
프롬프트 박스
개요
프롬프트 박스는 파일 트리 상단에 위치하며 일반적인 파일 작업을 위한 빠른 접근 작업 버튼을 제공합니다. 파일 콘텐츠 복사, 선택한 파일로 작업 생성, 파일 트리 표시 관리 도구가 포함됩니다.
작업
복사
현재 선택된 파일의 콘텐츠를 클립보드에 복사합니다. AI 채팅이나 다른 편집기에 붙여넣을 코드를 빠르게 가져오는 데 유용합니다.
작업에 추가
선택한 파일로 새 작업을 생성합니다. 선택한 파일이 컨텍스트로 미리 첨부된 상태로 작업 패널이 열려, 작업 이름과 AI 에이전트가 작업할 프롬프트를 정의할 수 있습니다.
블록 그룹 라이브러리
개요
블록 그룹 라이브러리는 프롬프트 바(퍼즐 아이콘)에서 접근 가능한 모달로, AI 대화나 작업에 컨텍스트로 포함할 재사용 가능한 UI 컴포넌트와 블록을 탐색, 검색, 선택할 수 있습니다. 컴포넌트는 그룹별로 정리되며 빠른 접근을 위해 즐겨찾기할 수 있습니다.
기능
컴포넌트 탐색
그룹 이름별로 정리된 사용 가능한 모든 컴포넌트와 블록을 탐색합니다. 각 컴포넌트는 지연 로드된 미리보기 썸네일을 표시합니다.
검색 및 필터
이름이나 설명으로 컴포넌트를 검색하여 필요한 것을 빠르게 찾습니다. 카테고리 또는 그룹별로 필터링합니다.
지연 로드 미리보기
부드러운 스크롤 성능을 위해 300px 프리로드 버퍼를 가진 IntersectionObserver를 사용하여 컴포넌트 미리보기가 필요 시 로드됩니다.
컴포넌트 즐겨찾기
자주 사용하는 컴포넌트에 별표를 붙여 빠른 접근을 위해 라이브러리 상단에 고정합니다.
상세 보기
컴포넌트를 클릭하여 전체 미리보기, 설명, 메타데이터를 보여주는 상세 모달을 엽니다.
컨텍스트 선택
AI 채팅이나 작업에 컨텍스트로 포함할 하나 이상의 컴포넌트를 선택합니다. 카운터가 현재 선택된 수를 표시합니다.
체크된 파일
개요
체크된 파일 탭(프롬프트 바의 체크박스 아이콘)은 파일 트리에서 현재 선택/체크된 모든 파일을 표시합니다. 선택한 컨텍스트 — 파일, 컴포넌트, 프로젝트 — 의 통합 뷰를 제공하여 AI 에이전트에 전송될 내용을 검토하고 관리할 수 있습니다.
기능
선택된 파일 목록
알파벳순으로 정렬된 목록에서 체크된 모든 파일을 봅니다. 각 파일은 프로젝트 루트 기준 상대 경로를 표시합니다.
컴포넌트 선택 표시
블록 그룹 라이브러리에서 체크된 파일과 함께 현재 선택된 컴포넌트를 봅니다.
프로젝트 그룹화
여러 선택된 프로젝트의 파일이 포함되면 각 프로젝트 이름 아래에 그룹화됩니다.
개별 파일 제거
파일을 클릭하여 컨텍스트에서 선택 해제합니다. 더블 클릭은 실수로 빠르게 토글하는 것을 방지하기 위한 쿨다운과 함께 선택 해제를 트리거합니다.
모두 지우기
"모두 지우기" 버튼으로 체크된 모든 파일을 한 번에 선택 해제하여 새로 시작합니다.
검색
개요
검색 기능(프롬프트 바의 돋보기 아이콘)은 파일 트리 내에서 실시간 파일 이름 필터링을 제공합니다. 입력하면 트리가 즉시 업데이트되어 일치하는 파일만 표시하며, 일치하는 용어가 강조 표시됩니다.
기능
실시간 필터링
입력하는 대로 파일 트리가 필터링됩니다. 쿼리와 이름이 일치하는 파일만 표시되어 대규모 프로젝트에서 특정 파일을 빠르게 찾을 수 있습니다.
일치 항목 강조
파일 이름의 일치하는 부분이 뚜렷한 스타일로 시각적으로 강조 표시되어 각 결과가 일치하는 이유를 쉽게 확인할 수 있습니다.
폴더 자동 확장
검색 쿼리가 접힌 폴더 안의 파일과 일치하면 해당 폴더가 자동으로 확장되어 일치하는 결과를 표시합니다.
숨겨진 파일 필터링
검색은 숨겨진 파일 설정을 준수합니다 — 숨기기로 선택한 파일은 검색 결과에 나타나지 않습니다.
파일 숨기기
개요
파일 숨기기 기능(프롬프트 바의 눈 아이콘)을 통해 파일 트리에서 파일과 폴더의 가시성을 토글합니다. 숨겨진 파일은 트리 뷰와 검색 결과에서 필터링되어 워크스페이스를 깔끔하게 유지하고 중요한 파일에 집중합니다.
기능
눈 토글
프롬프트 바의 눈 열기/닫기 아이콘을 클릭하여 숨겨진 파일의 가시성을 토글합니다. 눈이 닫혀 있으면 숨겨진 파일이 필터링됩니다.
경로 기반 숨기기
경로 패턴으로 파일을 숨깁니다. 특정 파일, 전체 폴더, 패턴과 일치하는 파일 그룹을 숨길 수 있습니다.
영구 상태
숨겨진 파일 설정이 세션 간에 유지되므로 프로젝트를 열 때마다 동일한 파일을 다시 숨길 필요가 없습니다.
컨텍스트 메뉴 통합
트리에서 파일이나 폴더를 마우스 오른쪽 클릭하고 "숨기기"를 선택하여 숨겨진 파일 목록에 빠르게 추가합니다.