화면 구성

Cocode IDE 창의 영역 — 사이드바, 상단 막대의 채팅 · 코드 전환과 프리뷰, 오른쪽 패널, 아래쪽 패널, 상태 표시줄, 메뉴와 단축키를 짚습니다.

일부 마지막 확인: 2026-10-08

Cocode IDE 창은 하나의 틀로 이루어져 있습니다. 왼쪽에 사이드바, 가운데에 작업 영역, 오른쪽과 아래쪽에 패널, 맨 아래에 상태 표시줄이 있고, 작업 영역 위에 상단 막대가 있습니다. 채팅 모드와 코드 모드는 이 틀을 두고 가운데와 오른쪽 패널의 내용을 바꿉니다. 채팅 모드에서는 아래쪽 패널이 계획을 실행하기 전까지 숨겨져 있고, 오른쪽 패널이 처음에 열려 있는지도 모드마다 다릅니다.

영역	위치	하는 일
사이드바	왼쪽	새 작업 · 검색 · 프로젝트 목록 · 대화 목록 · 설정
상단 막대	작업 영역 위	제목 · 채팅 \| 코드 전환 · 「프리뷰」 · 오른쪽 패널 여닫기
작업 영역	가운데	채팅 모드는 빌더 대화, 코드 모드는 편집기
오른쪽 패널	오른쪽	채팅 모드는 진행 상황 · 출력 · 컨텍스트, 코드 모드는 탐색기 · 소스 제어 · 작업
아래쪽 패널	아래	터미널 · 문제 · 검증 로그 · 디버그 로그
상태 표시줄	맨 아래	프로젝트 이름과 상태 칸

참고

이 쪽의 배지가 「일부」인 이유입니다. 프리뷰를 앱 안에 그리는 것은 macOS 와 Windows 이고, 시스템 메뉴와 그 메뉴의 단축키는 macOS 에만 있습니다. 또 「작업」 탭 · 「검증 로그」 · 상태 표시줄의 세 칸은 화면에 자리만 있고 아직 앱 기능에 연결되어 있지 않습니다. 해당하는 곳마다 본문에 밝혀 둡니다.

채팅 모드와 코드 모드

상단 막대의 「채팅」과 「코드」로 오갑니다. 처음에는 채팅 모드입니다.

채팅 모드: 가운데에 빌더 대화가 전체 화면으로 나옵니다. 요구를 말하고 조립 계획을 확인하는 곳입니다(채팅으로 프로젝트 만들기). 오른쪽 패널은 처음에 닫혀 있고, 계획을 확인하고 실행하면 열립니다.
코드 모드: 가운데에 편집기가 나옵니다. 오른쪽 패널은 처음부터 열려 있고 탐색기를 보여 줍니다.
두 화면은 함께 열려 있어서, 모드를 바꿔도 열어 둔 탭과 편집 중인 내용이 그대로 남습니다.

사이드바

위에서 아래로 다음이 있습니다.

사이드바 접기 / 펼치기 단추. 접으면 아이콘만 남는 좁은 줄(「새 작업」 · 「검색」 · 「채팅·작업」 · 「프로젝트」 · 「설정」)이 됩니다. 「채팅·작업」과 「프로젝트」 아이콘은 사이드바를 다시 펼칩니다.
「새 작업」: 새 대화를 시작하고 채팅 모드로 옮깁니다. 지금 대화가 비어 있으면 새로 만들지 않고 그 대화를 그대로 씁니다.
「검색」: 코드 모드로 옮겨 오른쪽 패널의 탐색기를 「내용」 찾기로 열고 입력칸에 초점을 줍니다.
「프로젝트」 목록: 프로젝트를 고르면 그 프로젝트가 열립니다. 제목 줄 오른쪽의 「프로젝트 추가」 단추로 프로젝트를 더하고, 줄에 마우스를 올리거나 선택하면 나오는 휴지통 단추(「<이름> 목록에서 제거」)로 목록에서 뺍니다. 목록이 비어 있으면 「추가한 프로젝트가 없습니다」가 보입니다. 자세한 내용은 프로젝트 관리에 있습니다.
「채팅·작업 · <프로젝트 이름>」 목록: 고른 프로젝트의 대화들입니다. 대화가 없으면 「아직 대화가 없습니다」가 보이고, 줄 오른쪽에는 대화 상태 라벨(「확인 대기」 등)이 붙고, 해당하는 상태가 없으면 붙지 않습니다.
맨 아래: 「코코드」 이름표와 톱니바퀴 「설정」 단추. 「코코드」는 모든 사용자에게 같은 고정 문구이고 로그인한 사용자의 이름이 아닙니다. 설정 화면은 설정에 있습니다.

상단 막대

제목: <프로젝트 이름> / <대화 제목> 꼴입니다. 채팅 모드에서는 고른 대화의 제목(첫 요구, 없으면 「새 작업」)이, 코드 모드에서는 「편집기」가 뒤에 옵니다. 열린 프로젝트가 없으면 「새 작업」이나 「편집기」만 나옵니다.
채팅 | 코드 전환: 지금 모드가 눌린 모양으로 보입니다.
「프리뷰」: 프리뷰 패널을 열고(창이 넓으면 오른쪽에, 좁으면 아래에 나눠 표시합니다), 다시 누르면 접습니다. 패널에서 프리뷰할 앱을 고르고 「프리뷰 실행」을 누르면, 그 앱을 내 컴퓨터에서 웹 서버로 실행해 앱 안에서 보여 줍니다. 프리뷰를 앱 안에 그리는 것은 macOS 와 Windows 뿐이고, Linux 에서는 「이 플랫폼은 내부 WebView를 지원하지 않습니다」와 주소만 나옵니다. 프리뷰와 「▶」 실행의 사용법은 실행과 프리뷰에 있습니다.
맨 오른쪽의 아이콘 단추: 오른쪽 패널을 열고 닫습니다. 채팅 모드와 코드 모드가 각자 열림 상태를 따로 기억하고, 프로젝트를 바꾸면 처음 상태로 돌아갑니다.

오른쪽 패널

채팅 모드에서는 프로젝트가 열려 있으면 세 구역이 위에서 아래로 있고, 열려 있지 않으면 「진행 상황」 안내만 보입니다.

「진행 상황」: 확인한 계획의 단계별 진행입니다(실행 결과와 게시). 실행하기 전에는 「계획을 확인하고 실행하면 단계별 진행이 여기에 표시됩니다」가 보입니다. 열린 프로젝트가 없으면 「프로젝트를 열고 계획을 실행하면 진행이 여기에 표시됩니다」가 보입니다.
「출력」: cob 가 단계마다 보낸 실행 기록입니다. 아직 없으면 「아직 출력이 없습니다」가 보입니다.
「컨텍스트」: 「생성 위치」와 「샌드박스」는 늘 보이고, 조립 계획이 나온 뒤에는 「공급자」가, 계획에 레시피가 있으면 「레시피」도 보입니다. 샌드박스 줄에는 이 프로젝트를 연 뒤 빌더의 정책 프록시가 막은 호스트가 나오고, 없으면 「막은 호스트 없음」입니다. 채팅 안에 AI 가 붙이는 「맥락 제안」 패널과는 다른 칸입니다(맥락 제안).

코드 모드에서는 아이콘으로 된 세 탭이 있습니다. 이름은 마우스를 올리면 보입니다. 탭마다의 사용법은 코드 모드에 있습니다.

「탐색기」: 프로젝트의 파일 트리입니다. 위의 찾기 입력은 「이름」과 「내용」 두 가지로 읽습니다. 「이름」은 파일을 이름으로 찾고, 「내용」은 파일 안의 글을 찾습니다. 탭에 마우스를 올리면 나오는 설명에 「⌘⇧E」가 보이지만 그 단축키는 macOS 시스템 메뉴의 「탐색 보기」에만 있습니다.
「소스 제어」: git 작업 트리의 변경 목록입니다(변경이 있으면 탭에 개수가 붙고, 99개가 넘으면 「99+」로 보입니다). 탭을 고를 때마다 다시 읽습니다. git 저장소가 아니면 「git 저장소가 아닙니다」, 변경이 없으면 「변경 사항 없음」이 보입니다.
「작업」: 에이전트에게 맡긴 작업을 검토하는 자리입니다. 지금은 앱에서 그런 작업을 만들 수 없어서 항상 「선택된 작업이 없습니다」(「위임 목록에서 작업을 고르면 여기에 표시됩니다」)만 보입니다. 이 자리는 준비 중인 기능에서 설명합니다.

아래쪽 패널

탭이 네 개 있습니다. 채팅 모드에서는 계획을 실행하기 전까지 이 패널이 숨겨져 있고, 계획을 실행하면 「디버그 로그」 탭이 열린 채로 나타납니다. 한 번 나타나면 프로젝트를 바꾸기 전까지는 새 대화를 시작해도 남아 있습니다.

「터미널」: 앱 안에서 쓰는 셸입니다. 앱이 터미널을 저절로 띄우지는 않습니다. 세션이 없으면 「터미널 없음」과 「새 터미널」 단추가 보이고, 위쪽 탭 줄의 「+ 새 터미널」로도 세션을 더할 수 있습니다.
「문제」: Dart 언어 서버가 알려 준 진단 목록입니다. 오류나 경고가 있으면 탭 이름에 그 개수가 붙습니다(예: 「문제 3」). 정보와 힌트는 세지 않습니다.
「검증 로그」: 작업의 자가 검증 로그를 보여 줄 자리입니다. 「작업」 탭과 같은 이유로 지금은 「선택된 작업 없음」만 보입니다. 계획 실행의 「검증」 단계 출력은 여기가 아니라 「디버그 로그」에 나옵니다. 아래쪽 패널의 사용법은 코드 모드에 있습니다.
「디버그 로그」: 확인한 계획을 실행하는 동안 cob 가 낸 출력입니다. 본문 검색과 단계 · 출처 필터가 있습니다. 실행 전에는 「계획을 실행하면 CLI 로그가 여기에 표시됩니다」가, 열린 프로젝트가 없으면 「프로젝트를 열면 실행 로그를 확인할 수 있습니다」가 보입니다.

상태 표시줄

맨 아래 한 줄에 왼쪽부터 다음 칸이 있습니다. 칸 사이는 세로 구분선으로 나뉩니다.

프로젝트 이름(열린 프로젝트가 없으면 「cocode」)
작업 수: 「실행중 0」 · 「사람승인대기 0」 · 「실패 0」
「잠금 0」
「되돌림 보존: 정책 미확정」
상황에 따라 더해지는 칸: 「Dart LS 시작 중 / 실행 중 / 없음 / 종료됨」(프로젝트를 열었을 때), 안내 문구, 「저장됨」 또는 「저장 실패」

참고

2~4번 칸은 아직 앱 기능에 연결되어 있지 않습니다. 작업 수와 잠금은 항상 0이고 되돌림 보존은 항상 「정책 미확정」입니다. 이 값들은 변하지 않으니 지금은 참고하지 않아도 됩니다. 여기서 「작업」은 사이드바의 대화(「새 작업」)가 아니라 에이전트에게 맡긴 작업을 뜻합니다. 이 기능들은 준비 중인 기능에서 설명합니다.

메뉴와 단축키

macOS

창 안에 메뉴 줄을 따로 두지 않고, 화면 맨 위 시스템 메뉴 줄에 Cocode IDE 의 항목을 더합니다. 「File」 · 「View」 · 「Run」 메뉴에 아래 항목이 들어가고(이름이 같은 시스템 메뉴가 있으면 거기에 덧붙습니다), 「Edit」는 macOS 의 표준 메뉴를 그대로 씁니다. 메뉴 항목에 붙은 아래 단축키는 macOS 시스템 메뉴에만 있습니다. 「폴더 열기…」를 뺀 항목은 프로젝트가 열려 있을 때만 쓸 수 있고, 「실행」 항목은 실행할 대상이 있을 때만 쓸 수 있습니다.

메뉴	항목	단축키
File	폴더 열기…	`⌘` `O`
File	저장	`⌘` `S`
File	모두 저장	`⌥` `⌘` `S`
File	탭 닫기	`⌘` `W`
File	워크스페이스 닫기	없음
View	오른쪽으로 분할	`⌘` 와 백슬래시 키
View	탐색 보기	`⇧` `⌘` `E`
View	검색 보기	없음
View	워크스페이스 검색	`⇧` `⌘` `F`
View	문제 보기	없음
View	터미널 보기	`⌃` 와 백틱 키
Run	실행 (또는 「실행: `<이름>`」)	`⌘` `R`
Run	▶ `<실행 대상 이름>`	없음
Run	다시 실행	`⇧` `⌘` `R`
Run	중지	`⌘` 와 마침표 키
Run	새 터미널	`⌃` `⇧` 와 백틱 키
Run	세션 탭 닫기	없음

이 표는 메뉴 항목의 단축키만 다룹니다. macOS 와 Windows 의 편집기는 편집기 안에서 ⌘(Windows 는 Ctrl) + S 로 저장하는 단축키를 따로 갖습니다.

Windows · Linux

창 안쪽에 메뉴 줄이 있습니다(「File」 · 「Edit」 · 「View」 · 「Delegate」 · 「Run」 · 「Help」). macOS 의 시스템 메뉴와 달리 임시 표기이고 항목 구성도 다릅니다.

항목 이름이 「«폴더 열기…»」처럼 «» 로 묶여 있습니다. 문구가 확정되기 전의 자리표시입니다. Run 메뉴의 「«실행: <이름>»」 · 「«중지: <이름>»」에는 <이름> 이 글자 그대로 보입니다.
메뉴 항목에는 단축키가 붙어 있지 않습니다. 위 표의 단축키는 macOS 시스템 메뉴의 것입니다. 편집기 안에서는 Windows 의 편집기가 Ctrl + S 로 저장하는 단축키를 따로 갖고, Linux 의 편집기에는 저장 단축키가 없어 메뉴의 「«저장»」을 씁니다.
「File」에는 「«폴더 열기…»」 · 「«저장»」 · 「«모두 저장»」 · 「«탭 닫기»」 · 「«워크스페이스 닫기»」 · 「«종료»」가 있습니다.
「View」에는 「«오른쪽으로 분할»」 · 「«탐색 보기»」 · 「«검색 보기»」 · 「«문제 보기»」 · 「«터미널 보기»」 · 「«워크스페이스 검색»」이 있습니다.
「Run」에는 「«실행: <이름>»」 · 「«중지: <이름>»」 · 「«새 터미널»」이 있습니다. macOS 메뉴에 있는 「다시 실행」 · 「세션 탭 닫기」 · 「▶ 실행 대상」은 없습니다.
「Edit」의 「«실행 취소»」 · 「«다시 실행»」 · 「«찾기»」 · 「«바꾸기»」는 눌러도 동작하지 않는 비활성 항목입니다.
「Delegate」와 「Help」는 항목이 없는 빈 메뉴입니다.
이름이 같은 항목(폴더 열기 · 저장 · 탭 닫기 · 탐색 보기 · 실행 …)은 macOS 메뉴와 같은 명령을 부릅니다. 다만 프로젝트가 열려 있는지와 상관없이 항목이 눌러지는 모양으로 보입니다(macOS 메뉴는 프로젝트가 없으면 항목을 쓸 수 없게 막습니다).

참고

메뉴의 「워크스페이스」는 지금 열려 있는 프로젝트를 가리킵니다. 「워크스페이스 닫기」는 열린 프로젝트를 닫고 빈 화면으로 돌아갑니다.

다음 단계

프로젝트를 추가하고 전환하고 제거하는 방법은 프로젝트 관리로 이어서 보세요. 만든 프로젝트를 고치고 돌리는 길은 코드 모드와 실행에 있습니다.