로컬 앱 미리보기

임베디드 브라우저의 가장 일반적인 사용법은 로컬에서 실행 중인 앱을 미리 보는 것입니다. 아무것도 없는 상태에서 워크스페이스에 보이는 실행 중인 앱까지 가는 방법을 안내합니다.

단계별 설정

1단계: 터미널에서 개발 서버를 시작합니다.

1DevTool에서 터미널을 열고 개발 서버를 시작합니다. 명령어는 기술 스택에 따라 다릅니다:

• React / Next.js / Vite: npm run dev
• Django: python manage.py runserver
• Rails: rails server
• Rust (웹 프레임워크 사용): cargo run
• Go: go run main.go

서버가 로컬 URL을 출력할 때까지 기다립니다 — 일반적으로 http://localhost:3000, http://localhost:8000 또는 http://localhost:8080 같은 형태입니다.

2단계: 브라우저 패널을 엽니다.

패널 툴바에서 Browser 아이콘을 클릭하거나 Add Panel 메뉴에서 엽니다. 빈 주소 표시줄이 있는 브라우저 패널이 나타납니다.

3단계: 로컬 URL로 이동합니다.

주소 표시줄을 클릭하고 개발 서버가 실행 중인 URL(예: http://localhost:3000)을 입력한 후 Enter를 누릅니다. 앱이 패널에 로드됩니다.

4단계: 필요할 때 새로고침합니다.

Cmd+R (macOS) 또는 Ctrl+R (Windows/Linux)을 눌러 페이지를 새로고침합니다. Vite나 Next.js처럼 개발 서버가 HMR을 지원한다면, 파일이 변경될 때 페이지가 자동으로 업데이트되므로 수동 새로고침이 필요 없습니다.

5단계: 레이아웃을 테스트하기 위해 크기를 조정합니다.

패널 구분선을 드래그하여 브라우저 패널을 더 좁거나 넓게 만듭니다. 별도의 반응형 테스트 도구를 설정하지 않고도 앱이 다른 너비에서 어떻게 보이는지 빠르게 확인할 수 있는 방법입니다.

반응형 레이아웃 테스트

패널 구분선을 드래그하여 브라우저를 좁게 만들고 모바일 레이아웃을 확인하세요. 더 정확한 반응형 테스트를 위해 1DevTool에는 Mobile Simulator가 포함되어 있습니다: 브라우저 패널 헤더에서 전화 아이콘을 클릭하여 표준 모바일 브레이크포인트(iPhone 375px, 태블릿 768px 등)에서 앱을 미리 봅니다.

Mobile Simulator에서는 장치 방향을 세로와 가로 사이에서 토글할 수 있으므로, 물리적 장치 없이도 두 모드에서 레이아웃이 작동하는지 확인할 수 있습니다.

AI Agent와 함께 사용하기

임베디드 브라우저는 AI Agent와 함께 작업할 때 진가를 발휘합니다. 거의 모든 컨텍스트 전환을 제거하는 워크플로우입니다:

1. Claude Code 터미널을 열고 작업을 제공합니다: "이메일과 비밀번호 필드를 검증하는 폼이 있는 로그인 페이지를 만드세요."
2. Claude가 코드를 작성하는 동안 터미널을 확인합니다.
3. Claude가 완료되었다고 보고하면 브라우저 패널에서 Cmd+R을 눌러 새로고침합니다.
4. 로그인 페이지가 패널에 나타납니다. 잘못된 부분이 있다면, 앱을 전환하지 않고 Claude에게 설명합니다: "제출 버튼이 비밀번호 필드에 너무 가깝습니다. 간격을 더 주세요."
5. Claude가 수정합니다. 새로고침. 반복.

이 루프 — 터미널에서 코드, 브라우저에서 검증, 수정 사항 설명 — 터미널 창, 코드 에디터, 브라우저 탭 사이를 전환하는 것보다 훨씬 빠릅니다.

팁: 브라우저 패널과 터미널을 나란히 배치하여 Agent가 작업하는 것을 보고 결과를 한눈에 확인할 수 있게 하세요. 핫 리로드가 있는 프로젝트라면 새로고침을 누를 필요조차 없습니다.