임베디드 브라우저 — 개요

임베디드 브라우저는 1DevTool에 도킹 가능한 패널로 내장된 완전한 Chromium 웹뷰입니다. 터미널에서 개발 서버를 실행하고 브라우저 패널에서 앱을 볼 수 있습니다 — 같은 창에서 동시에 모두 볼 수 있습니다. 더 이상 터미널과 Chrome 사이에서 Alt-Tab이나 Cmd-Tab을 누를 필요가 없습니다.

왜 중요한가

임베디드 브라우저가 없는 일반적인 개발 루프는 이렇습니다: 코드 편집 → 터미널로 전환 → 서버 실행 → Chrome으로 전환 → 페이지 새로고침 → 깨진 부분 발견 → 터미널로 돌아가기 → 반복. 모든 컨텍스트 전환은 시간을 소비하고 집중력을 깨뜨립니다.

임베디드 브라우저 패널을 사용하면 루프가 이렇게 됩니다: 코드 편집 → 터미널 확인 → 브라우저 패널 훑어보기. 모든 것이 한 번에 보입니다. AI Agent가 기능을 만들어 줄 때, 터미널에서 코딩하는 것을 보고 키보드를 건드리지 않고 브라우저 패널에 결과가 나타나는 것을 볼 수 있습니다.

임베디드 브라우저가 지원하는 것

브라우저 패널은 실제 Chromium 엔진을 사용하므로 Chrome과 정확히 동일하게 동작합니다:

• JavaScript — 최신 ES2020+ 기능을 포함하여 완전히 실행됩니다
• 로컬 스토리지 및 쿠키 — 페이지 로드 간에 유지되므로 로그인 세션과 환경설정이 작동합니다
• WebSocket — Vite와 Next.js 같은 개발 서버에서 라이브 리로드와 HMR이 예상대로 작동합니다
• CSS 및 애니메이션 — 브라우저와 정확히 동일하게 렌더링합니다

이것은 단순화된 미리보기 엔진이 아닙니다. Chrome에서 작동하는 앱은 임베디드 브라우저 패널에서도 작동합니다.

브라우저 패널 열기

패널 툴바에서 Browser 아이콘을 클릭하세요. 브라우저 패널이 열리고 상단에 주소 표시줄이 표시됩니다. URL을 입력하고 Enter를 눌러 이동합니다.

또는 Add Panel 메뉴를 사용하여 워크스페이스 레이아웃의 어느 영역에나 브라우저를 추가할 수 있습니다.

레이아웃에서의 위치 지정

브라우저 패널은 워크스페이스의 어디에나 배치할 수 있습니다. 일반적인 레이아웃:

• 터미널과 나란히 — 터미널은 왼쪽, 브라우저는 오른쪽. AI Agent가 UI를 실시간으로 구축하는 것을 보는 데 적합합니다.
• 하단 패널 — 터미널 아래에 브라우저. 에디터와 터미널에 더 많은 수직 공간을 주면서 브라우저를 접근 가능하게 유지합니다.
• 플로팅 패널 — 브라우저 패널을 드래그하여 워크스페이스 위에 별도의 오버레이로 플로팅합니다.

패널 사이의 구분선을 드래그하여 모든 패널의 크기를 조정할 수 있습니다. 읽기 위해 브라우저를 넓게 만들거나, 반응형 동작을 빠르게 확인하기 위해 좁게 만드세요.