> ## Documentation Index > Fetch the complete documentation index at: https://docs.replit.com/llms.txt > Use this file to discover all available pages before exploring further. # Preview > Preview를 사용하여 웹 앱을 개발하면서 확인하고 상호작용하는 방법을 알아보세요. Preview는 웹 앱의 출력을 표시하고 브라우저 개발자 도구 및 디버깅 기능을 제공합니다. **Run** 버튼으로 웹 앱을 실행하면 Replit이 인터넷에서 접근 가능한 임시 URL을 할당합니다. Preview 도구는 브라우저에서 보는 것과 동일하게 페이지를 렌더링하며, 주요 브라우저에서 볼 수 있는 기능과 유사한 개발자 도구도 포함하고 있습니다. Preview는 Webview의 새로운 이름입니다. screenshot of the Preview tool ## 기능 Preview는 웹 앱을 원활하게 테스트하고 디버그할 수 있도록 다음 기능을 포함합니다: * **실시간 웹 보기**: 브라우저 탭을 벗어나지 않고 앱을 확인하고 상호작용하기 * **개발자 도구**: 내장 도구를 사용하여 문제를 빠르게 진단하기 * **반응형 테스트**: 다양한 모바일 기기 화면 크기로 앱 확인하기 ## 사용 방법 Preview 도구는 웹 앱을 실행할 때 자동으로 열립니다. **User Settings** 도구의 **Automatic Preview** 설정에서 이 동작을 전환할 수 있습니다. 다음 안내는 Preview를 여는 방법을 설명합니다. 왼쪽 **Tool dock**에서: 1. All tools icon **All tools**를 선택하여 Project Editor 도구 목록을 확인합니다. 2. Preview icon **Preview**를 선택합니다. **Search bar**에서: 1. 상단의 magnifying glass icon 돋보기를 선택하여 검색 도구를 엽니다. 2. "Preview"를 입력하여 도구를 찾고 결과에서 선택합니다. ## 주소 바 **Preview** 탭 상단의 주소 바에는 다음 도구들이 포함됩니다: * **뒤로 버튼**: 탐색 기록의 이전 페이지로 이동 * **앞으로 버튼**: 탐색 기록의 다음 페이지로 이동 * **앱 도메인**: `{...}.replit.dev`를 선택하여 Replit App의 임시 URL 정보 보기 * **주소 필드**: 현재 URL 경로를 확인하거나 새 경로 입력 ## 브라우저 도구 주소 바 오른쪽의 브라우저 도구는 다음 기능을 포함합니다: * **화면 크기**: 반응형 디자인을 테스트하기 위해 다양한 기기 화면 크기 프리셋에서 선택 * **Devtools**: [개발자 도구](#Developer_tools) 패널 전환 * **새 탭**: 웹 앱 URL을 새 브라우저 탭에서 열기 **모바일 앱을 개발 중인가요?** Preview 패널은 **iOS Simulator** 또는 **Android Emulator**에서의 Preview도 지원합니다. 자세한 내용은 [네이티브 모바일 앱](/references/artifact-types/building-mobile-apps#preview-on-a-simulator-or-emulator)을 참조하세요. ## 개발자 도구 Eruda 오픈 소스 프로젝트를 기반으로 한 개발자 도구는 다음 작업을 수행하는 데 도움이 됩니다: * 앱의 컨텍스트에서 JavaScript 콘솔 보기 및 상호작용 * DOM 요소 검사 * 네트워크 요청 모니터링 * 표시 및 동작 환경설정 구성 개발자 도구에 접근하려면 **Preview** 탭 상단의 wrench icon **Devtools** 버튼을 선택하여 전환하세요. 다음 섹션에서는 각 개발자 도구 탭에서 수행할 수 있는 작업을 설명합니다. ### Console **Console** 탭은 애플리케이션에서 생성된 JavaScript 로그를 표시합니다. 이 탭에서 다음 작업을 수행할 수 있습니다: * **출력 지우기**: clear icon 슬래시가 있는 원 아이콘을 선택하여 모든 콘솔 출력 제거. * **출력 필터링**: 유형별(전체, 정보, 경고, 오류)로 필터링된 콘솔 출력 보기. * **텍스트 일치 필터링**: filter icon 필터 아이콘을 선택하고 텍스트를 입력하여 일치하는 출력 표시. * **출력 복사**: copy icon 복사 버튼을 선택하여 선택한 콘솔 메시지 복사. * **JavaScript 코드 실행**: right arrow icon 오른쪽 꺾쇠 괄호를 선택하여 앱의 컨텍스트에서 JavaScript 코드 실행. 표현식을 입력하고 **Execute**를 선택하세요. ### Elements **Elements** 탭에서는 웹 페이지의 DOM 구조를 검사하고 수정할 수 있습니다. * **요소 세부 정보 보기**: DOM 요소 및 HTML 코드의 위치에 대한 세부 정보 보기 * **출력 복사**: copy icon 복사 버튼을 선택하여 선택한 콘솔 메시지 복사. select icon 화살표 선택을 사용하여 선택 모드를 전환하세요. 선택 모드로 진입한 후 웹 페이지에서 요소를 선택하면 해당 요소의 HTML과 CSS가 Elements 탭에 표시됩니다. ### Network **Network** 탭은 웹 페이지에서 시작된 요청을 모니터링합니다. 이 탭에서 다음 작업을 수행할 수 있습니다: * **요청 추적**: 앱에서 시작된 모든 네트워크 요청 보기. 요청을 선택하면 세부 정보를 볼 수 있습니다. * **필터링**: filter icon 깔때기 아이콘을 선택하고 텍스트를 입력하여 일치하는 결과 보기. 필터를 비워두면 초기화됩니다. * **복사**: copy icon 복사 버튼을 선택하여 저장소 정보 복사. ### Resources **Resources** 탭은 페이지에서 로드된 자산과 쿠키, 로컬 저장소 등의 브라우저 저장소를 표시합니다. 다음 자산 유형의 목록을 보고 새로 고칠 수 있습니다: * JavaScript 파일 * 스타일시트 * Iframe * 이미지 이 탭에서 다음 작업을 수행할 수 있습니다: * **저장소 보기**: 로컬 저장소, 세션 저장소, 쿠키 검토. * **필터링**: filter icon 깔때기 아이콘을 선택하고 텍스트를 입력하여 일치하는 결과 보기. 필터를 비워두면 초기화됩니다. * **지우기**: clear icon 지우기 버튼을 선택하여 해당 저장소 유형의 모든 데이터 삭제. * **선택 항목 삭제**: delete icon "X" 아이콘을 선택하여 저장소 항목 제거. * **복사**: copy icon 복사 버튼을 선택하여 저장소 정보 복사. ### Settings **Settings** 탭에서는 개발자 도구의 외관과 동작을 사용자 정의할 수 있습니다. 이 탭에는 다음에 대한 사용자 정의 옵션이 포함됩니다: * **도구 설정**: 각 도구 탭에 적용되는 옵션 사용자 정의 * **JavaScript 제어**: JavaScript 동작 옵션 지정 (예: 앱이 JavaScript 없이 어떻게 작동하는지 테스트하기 위해 비활성화) * **표시 환경설정**: 개발자 도구의 테마, 패널 크기, 투명도 및 기타 동작 변경