> ## 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를 여는 방법을 안내합니다. 좌측 **도구 도크**에서: 1. All tools icon **All tools**를 선택해 Project Editor 도구 목록을 확인하세요. 2. Preview icon **Preview**를 선택하세요. **검색창**에서: 1. 상단의 magnifying glass icon 돋보기를 선택해 검색 도구를 여세요 2. "Preview"를 입력해 도구를 찾고 검색 결과에서 선택하세요. ## 주소창 **Preview** 탭 상단의 주소창에는 다음 도구가 포함되어 있습니다. * **뒤로 가기 버튼**: 탐색 기록에서 이전 페이지로 이동 * **앞으로 가기 버튼**: 탐색 기록에서 다음 페이지로 이동 * **앱 도메인**: `{...}.replit.dev`를 선택해 Replit App의 임시 URL 정보 확인 * **주소 필드**: 현재 URL 경로 확인 또는 새 경로 입력 ## 브라우저 도구 주소창 우측의 브라우저 도구에는 다음 기능이 포함되어 있습니다. * **화면 크기**: 다양한 기기 화면 크기 프리셋을 선택해 반응형 디자인 테스트 * **Devtools**: [개발자 도구](#Developer_tools) 패널 켜고 끄기 * **새 탭**: 웹 앱 URL을 새 브라우저 탭에서 열기 **모바일 앱을 빌드하시나요?** Preview 패널은 **iOS Simulator** 또는 **Android Emulator**에서의 프리뷰도 지원합니다. 자세한 내용은 [Native Mobile Apps](/ko/features/artifact-types/building-mobile-apps#preview-on-a-simulator-or-emulator)를 참고하세요. ## 개발자 도구 Eruda 오픈 소스 프로젝트로 구동되는 개발자 도구는 다음 작업을 수행하는 데 도움이 됩니다. * 앱 컨텍스트에서 JavaScript 콘솔을 보고 상호작용하기 * DOM 요소 검사하기 * 네트워크 요청 모니터링하기 * 표시 및 동작 환경설정 구성하기 개발자 도구에 접근하려면 **Preview** 탭 상단의 wrench icon **Devtools** 버튼을 선택해 켜고 끄세요. 다음 섹션에서는 각 개발자 도구 탭에서 수행할 수 있는 작업을 설명합니다. ### Console **Console** 탭은 애플리케이션에서 생성된 JavaScript 로그를 표시합니다. 이 탭에서는 다음 작업을 수행할 수 있습니다. * **출력 지우기**: clear icon 사선이 그어진 원 아이콘을 선택해 모든 콘솔 출력 제거. * **출력 필터링**: 유형별로(All, Info, Warning, Error) 필터링된 콘솔 출력 보기. * **일치하는 텍스트 필터링**: 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 없이 어떻게 동작하는지 테스트하기 위해 꺼두기 * **표시 환경설정**: 개발자 도구의 테마, 패널 크기, 투명도, 기타 동작 변경