GUI 사용법

cppx는 CLI뿐 아니라 Electron 기반 GUI도 제공합니다. 코드를 직접 치지 않고도 프로젝트 관리, 빌드 실행, 로그 확인을 모두 할 수 있습니다.

GUI 실행하기

cd packages
npm install
npm run dev

실행하면 Electron 앱 창이 열리며, 상단에 현재 작업 경로와 선택된 프리셋이 표시됩니다.

탭 구성

GUI는 세 개의 탭으로 구성되어 있습니다.

탐색 탭

프로젝트를 탐색하고 설정하는 공간입니다.

• 작업 폴더 선택 — 경로를 직접 입력하거나 찾아보기 버튼으로 폴더를 선택합니다
• 프로젝트 초기화 — 프로젝트 이름을 입력하고 Init 버튼을 누르면 cppx init이 실행됩니다
• CMake 설정 편집 — compile_definitions, compile_options, include_directories, link_libraries를 UI에서 수정할 수 있습니다. config 불러오기로 현재 값을 가져오고, config 저장으로 config.toml에 반영합니다
• 의존성 관리 — 패키지명을 입력하고 Add 버튼으로 vcpkg 의존성을 추가합니다. 현재 등록된 의존성은 Badge 목록으로 확인할 수 있습니다

빌드 탭

빌드, 실행, 테스트, 패키징을 수행하는 공간입니다.

• 프리셋 선택 — debug-x64 또는 release-x64를 드롭다운에서 선택합니다
• 액션 버튼 — Build, Run, Test, Pack 네 가지 버튼으로 해당 작업을 실행합니다
• 툴체인 상태 — CMake, Ninja, vcpkg, C++ 컴파일러 각각의 설치 여부가 Badge로 표시됩니다
  • 준비됨 — 설치 완료
  • 누락 — 설치 필요
• 도구 설치 — 누락된 도구가 있다면 설치/업데이트 버튼으로 바로 설치합니다. 진행률은 프로그레스 바로 확인할 수 있습니다
• 컴파일러 선택 — MSVC가 감지되면 설치된 인스턴스 목록에서 원하는 버전을 고르거나, MinGW를 대신 설치하도록 선택할 수 있습니다

로그 탭

명령 실행 과정에서 발생하는 로그를 실시간으로 확인합니다.

• child_process.spawn의 stdout/stderr가 실시간으로 스트리밍됩니다
• 로그 레벨에 따라 색상이 구분됩니다

레벨	색상
error	빨간색
warn	주황색
success	초록색
stdout	회색
info	기본색

• 최대 5,000건까지 보관되며, 지우기 버튼으로 초기화할 수 있습니다
• 새 로그가 추가되면 자동으로 하단으로 스크롤됩니다

상태 알림

명령 실행이 끝나면 화면 하단에 결과 알림(Toast)이 표시됩니다. 성공이면 초록색, 오류면 빨간색으로 나타나며 잠시 후 자동으로 사라집니다.

CLI와 GUI는 같은 엔진입니다

GUI에서 버튼을 클릭하면 내부적으로 CLI와 동일한 CppxService.execute()가 호출됩니다. 결과가 다를 일이 없으므로, 상황에 따라 편한 쪽을 사용하면 됩니다.

Busy 상태

명령이 실행 중일 때는 다른 명령을 동시에 실행할 수 없습니다. 현재 작업이 끝날 때까지 버튼이 비활성화되며, 완료 후 다시 사용할 수 있습니다.