레이아웃 모드

1DevTool은 세 가지 다른 레이아웃 모드에서 패널을 배치할 수 있습니다. 각 모드는 다른 종류의 작업을 위해 설계되었습니다. 열려 있는 것을 잃지 않고 언제든지 전환할 수 있습니다 — 패널이 새 레이아웃에 맞게 재배치될 뿐입니다.

세 가지 레이아웃 모드

2×2 그리드

그리드 모드는 메인 영역을 네 개의 동일한 사분면으로 나눕니다. 각 사분면은 하나의 패널을 보유하여 한 번에 총 네 개의 패널을 볼 수 있습니다.

최적: 여러 AI Agent를 병렬로 실행. Claude Code가 하나의 터미널에서 프론트엔드를 작업하고, Codex가 다른 터미널에서 백엔드를 리팩토링하고, Browser 패널이 결과를 미리 볼 때 2×2 그리드로 모두를 동시에 볼 수 있습니다.

1DevTool을 처음 열 때 기본 레이아웃입니다. 병렬 Agent 작업이 앱이 설계된 목적이기 때문입니다.

컬럼 뷰

컬럼 뷰는 메인 영역을 두 개의 패널로 나란히 분할합니다 — 왼쪽 컬럼과 오른쪽 컬럼. 각 컬럼이 화면의 절반을 차지합니다.

최적: 집중된 두 패널 작업. 일반적인 설정은 왼쪽에 Terminal, 오른쪽에 Browser로 Agent에게 프롬프트를 입력하고 결과가 렌더링되는 것을 즉시 볼 수 있습니다. 또 다른 인기 있는 조합은 Terminal + Git으로 Agent가 변경 사항을 커밋하는 동안 diff를 검토할 수 있습니다.

전체화면

전체화면 모드는 단일 패널을 메인 영역 전체로 확장합니다. 다른 모든 패널이 숨겨집니다(여전히 실행 중).

최적: 깊은 집중. 긴 AI 출력을 읽거나, 자세한 프롬프트를 작성하거나, 복잡한 데이터베이스 결과를 검사할 때 전체화면은 모든 산만함을 제거합니다. 단축키를 다시 누르면 즉시 이전 레이아웃으로 돌아갑니다.

레이아웃 모드 전환

두 가지 방법이 있습니다:

1. 메인 영역 상단 툴바의 레이아웃 아이콘을 클릭합니다. 세 모드를 순서대로 순환합니다.
2. 키보드 단축키 Mac에서 Cmd+Shift+L 또는 Windows/Linux에서 Ctrl+Shift+L을 사용합니다.

두 방법 모두 패널이 포커스되어 있고 입력 중일 때도 언제든지 작동합니다.

팁: 레이아웃을 변경하지 않고 일시적으로 하나의 패널에 집중하려면 Cmd+Shift+F (Mac) 또는 Ctrl+Shift+F (Windows)를 눌러 활성 패널을 전체화면으로 확장한 후 다시 눌러 돌아오세요.

레이아웃 프리셋

패널을 좋아하는 방식으로 배열한 후 레이아웃 프리셋으로 저장하여 클릭 한 번으로 돌아올 수 있습니다.

프리셋을 저장하려면:

1. 원하는 방식으로 패널을 배열합니다.
2. 툴바의 레이아웃 아이콘을 클릭하여 레이아웃 메뉴를 엽니다.
3. Save as preset을 선택하고 이름을 지정합니다 (예: "Agent sprint" 또는 "Review mode").

저장된 프리셋이 레이아웃 메뉴 상단에 표시됩니다. 프리셋 이름을 클릭하면 어떤 패널 유형이 열려 있고 어디에 위치하는지 포함하여 해당 배열을 즉시 복원합니다.

프리셋은 프로젝트별로 저장되므로 서로 간섭하지 않고 다른 코드베이스에 대해 다른 배열을 가질 수 있습니다.