Firebase Studio는 개발 중에 애플리케이션을 미리 보고 테스트하는 여러 가지 방법을 제공합니다. 여기에는 App Prototyping agent를 사용하고 기본 제공 웹 미리보기 도구와 Firebase Studio 작업공간 내에서 사용할 수 있는 웹 및 Android 미리보기 도구를 활용하는 것이 포함됩니다.
미리보기 환경 사용 설정 및 구성
템플릿을 사용하거나 App Prototyping agent를 사용하여 앱을 생성하는 경우 미리보기가 이미 구성되어 있는 경우가 많습니다. 템플릿에 아직 미리보기가 설정되어 있지 않으면 프로젝트의 Nix 구성 파일에서 미리보기를 구성할 수 있습니다.
작업공간에서 .idx/dev.nix를 엽니다.
Firebase Studio는 새 작업공간을 만들 때 이 파일을 자동으로 생성하고 개발자가 선택한 템플릿에 따라 관련 미리보기 환경을 포함합니다. 파일이 Firebase Studio 코드 저장소에 없으면 파일을 만든 후 idx.previews 속성을 true로 설정합니다. 그런 다음, 다음 예시와 같이 구성 속성을 추가합니다.
{ pkgs,...}:{# NOTE: This is an excerpt of a complete Nix configuration example.# For more information about the dev.nix file in Firebase Studio, see# https://firebase.google.com/docs/studio/customize-workspace# Enable previews and customize configuration
idx.previews={enable=true;previews={# The following object sets web previewsweb={command=["npm""run""start""--""--port""$PORT""--host""0.0.0.0""--disable-host-check"];manager="web";# Optionally, specify a directory that contains your web app# cwd = "app/client";};# The following object sets Android previews# Note that this is supported only on Flutter workspacesandroid={manager="flutter";};};};}
명령어 팔레트(Cmd+Shift+P/Ctrl+Shift+P)에서 Firebase Studio: Hard restart 명령어를 실행합니다.
환경 구성 업데이트됨 알림에서 환경 다시 빌드를 클릭합니다.
dev.nix 파일을 수정한 후 환경을 다시 빌드하면 사용 설정한 항목에 따라 Android 및 웹 탭 중 하나 또는 둘 다를 보여주는 미리보기 패널이 작업공간에 표시됩니다.
앱 미리보기 사용
Firebase Studio는 미리보기 환경에 앱을 설치하는 Flutter 작업공간의 Chrome 및 Android 에뮬레이터에서 웹 미리보기를 제공합니다. 이를 사용하면 작업공간에서 직접 앱을 처음부터 끝까지 완전히 테스트할 수 있습니다.
웹 및 Android용 미리보기 새로고침
Firebase Studio는 기본 프레임워크(예: npm run start 및 flutter hot-reload)의 핫 리로드 기능을 연결하여 내부 개발 루프를 간소화합니다. Firebase Studio는 다음과 같은 유형의 새로고침을 제공합니다.
자동 핫 리로드: 파일을 저장할 때 핫 리로드가 자동으로 수행됩니다. 핫 모듈 교체(HMR)라고도 하는 핫 리로드는 페이지를 새로고침하지 않거나(웹 앱의 경우) 앱을 다시 시작하거나 재설치하지 않고도(에뮬레이터의 경우) 앱을 업데이트합니다. 이 방식은 앱의 실시간 상태를 보존하는 데 유용하지만 항상 의도한 대로 작동하지 않을 수 있습니다.
수동 전체 새로고침: 이 옵션은 페이지 새로고침(웹 앱의 경우) 또는 앱 다시 시작(에뮬레이터의 경우)과 같습니다. 대규모 코드 청크 리팩터링과 같이 소스 코드의 중요한 변경사항을 캡처할 때 전체 새로고침을 사용하는 것이 좋습니다.
수동 하드 리스타트: 이 옵션은 앱의 웹 서버를 중지하고 다시 시작하는 등 Firebase Studio의 미리보기 시스템을 완전히 다시 시작합니다.
모든 새로고침 옵션은 Firebase Studio 카테고리에서 미리보기 툴바나 명령어 팔레트(Mac의 경우 Cmd+Shift+P, ChromeOS, Windows, Linux의 경우 Ctrl+Shift+P)를 통해 사용 가능합니다.
미리보기 툴바를 사용하려면 다음 단계를 수행합니다.
새로고침 아이콘을 클릭하여 페이지를 새로고침합니다. 이렇게 하면 전체 새로고침이 강제로 적용됩니다.
다른 유형의 새로고침을 사용하려면 새로고침 아이콘 옆에 있는 화살표를 클릭하여 메뉴를 펼칩니다.
메뉴에서 원하는 새로고침 옵션(핫 리로드, 전체 리로드 또는 하드 리스타트)을 선택합니다.
웹 미리보기를 다른 사용자와 공유
액세스를 사용 설정한 후 미리보기로 연결되는 직접 링크를 공유하여 앱의 웹 미리보기를 다른 사용자와 공유해 의견을 얻을 수 있습니다.
웹 미리보기 툴바에서 주소 표시줄 오른쪽에 있는 미리보기 링크 공유 아이콘을 클릭하여 공유 메뉴를 엽니다.
다음 옵션 중 하나를 사용하여 다른 사용자가 작업공간에 액세스하도록 허용합니다.
미리보기를 공개로 전환: 작업공간 미리보기에 공개적으로 액세스할 수 있도록 설정합니다. 이렇게 하면 인터넷에 있는 모든 사용자가 작업공간이 활성 상태인 동안과 공개 액세스를 사용 중지할 때까지 작업공간에서 실행되는 미리보기 서버에 액세스할 수 있습니다.
작업공간 액세스 관리. 액세스 권한을 부여할 사용자와만 작업공간을 공유합니다.
미리보기 URL 복사를 선택하여 작업공간 미리보기의 직접 링크를 복사한 후 의견을 받고자 하는 사용자에게 보낼 수 있습니다. 표시되는 QR 코드를 사용하여 휴대기기에서 미리보기를 열 수도 있습니다.
자동 저장 및 핫 리로드 구성
기본적으로 Firebase Studio는 입력을 중지한 1초 후에 작업을 자동 저장하여 자동 핫 리로드를 트리거합니다. Firebase Studio가 다른 간격으로 작업을 저장하게 하려면 자동저장 설정을 변경합니다. 자동저장을 사용 중지할 수도 있습니다.
[null,null,["최종 업데이트: 2025-08-27(UTC)"],[],[],null,["Firebase Studio offers several ways to preview and test your\napplication during development. This includes using the App Prototyping agent\nand leveraging the built-in web previewer, and the web and Android\npreviewers available within Firebase Studio workspaces.\n\nEnable and configure your preview environment\n\nIf you use a [template](/docs/studio/get-started-template) or generate your app\nusing the App Prototyping agent, previews are\noften already configured for you. If previews aren't already set up in your\ntemplate, you can configure them in the project's Nix configuration file.\n\n1. From your workspace, open `.idx/dev.nix`.\n\n Firebase Studio automatically generates this file when you create a\n new workspace and includes any applicable preview environments based on\n the template you select. If the file isn't in your Firebase Studio\n code repository, create it and then set the `idx.previews` attribute to\n `true`. Then, add configuration attributes, as the following example shows: \n\n { pkgs, ... }: {\n\n # NOTE: This is an excerpt of a complete Nix configuration example.\n # For more information about the dev.nix file in Firebase Studio, see\n # https://firebase.google.com/docs/studio/customize-workspace\n\n # Enable previews and customize configuration\n idx.previews = {\n enable = true;\n previews = {\n # The following object sets web previews\n web = {\n command = [\n \"npm\"\n \"run\"\n \"start\"\n \"--\"\n \"--port\"\n \"$PORT\"\n \"--host\"\n \"0.0.0.0\"\n \"--disable-host-check\"\n ];\n manager = \"web\";\n # Optionally, specify a directory that contains your web app\n # cwd = \"app/client\";\n };\n # The following object sets Android previews\n # Note that this is supported only on Flutter workspaces\n android = {\n manager = \"flutter\";\n };\n };\n };\n }\n\n For a full list of Nix attributes in Firebase Studio, see [Nix +\n Firebase Studio](/docs/studio/customize-workspace#nix+fs).\n2. Rebuild your environment:\n\n - From the command palette (`Cmd+Shift+P`/`Ctrl+Shift+P`), run the **Firebase Studio: Hard restart** command.\n - From the **Environment config updated** notification, click **Rebuild environment**.\n\n When you rebuild the environment after modifying your `dev.nix` file,\n the preview panel appears in your workspace showing either or both of\n **Android** and **Web** tabs, depending on what you've enabled.\n\n| **Key Point:** You can preview your app in a separate browser tab by clicking the **Open in new window** icon in the preview window toolbar. This pop-out link is also useful for demoing your work in progress to a friend or colleague through [workspace sharing](/docs/studio/share-your-workspace). If you close a preview and want to re-open it, open the command palette and search for the appropriate preview command.\n\nUse app previews\n\nFirebase Studio offers web previews on Chrome and Android emulators in\nFlutter workspaces that install your app on the preview environment. This lets\nyou test your app fully, from end to end, directly from your workspace.\n\nRefresh previews for web and Android\n\nFirebase Studio hooks into the hot reload functionalities of the\nunderlying frameworks (like `npm run start` and `flutter hot-reload`) to\ngive you a streamlined inner development loop. Firebase Studio provides\nthe following types of reloads:\n\n- **Automatic Hot Reload** : Hot reloads are automatically performed when you\n save a file. Sometimes known as *Hot Module Replacement* (or HMR), a hot\n reload updates your app without reloading the page (for web apps) or without\n restarting or reinstalling the app (for emulators). This approach is\n useful for preserving your app's live state but might not always work as\n intended.\n\n- **Manual Full Reload**: This option is equivalent to a page refresh (for web\n apps) or an app restart (for emulators). We recommend using a full reload to\n capture significant changes to your source code, such as when refactoring\n large chunks of code.\n\n- **Manual Hard Restart** : This option performs a complete restart of\n Firebase Studio's preview system, which includes stopping and\n restarting your app's web server.\n\nAll reload options are available using either the preview toolbar or the command\npalette (`Cmd+Shift+P` on Mac or `Ctrl+Shift+P` on ChromeOS, Windows, or\nLinux), under the **Firebase Studio** category.\n\nTo use the preview toolbar, follow these steps:\n\n1. Click the **Reload** icon to refresh the page. This forces a full reload.\n For a different type of refresh, click the arrow next to the reload icon to\n expand the menu.\n\n2. Select the refresh option you want from the menu: **Hot Reload** , **Full\n Reload** , or **Hard Restart**.\n\nShare your web preview with others\n\nYou can share your app's web preview with others for feedback by enabling access\nand then sharing the direct link to the preview:\n\n1. In the web preview toolbar, click the\n **Share Preview Link** icon, to the right of the address bar to open\n the sharing menu.\n\n2. Allow others to access your workspace, using one of these options:\n\n - **Make preview public** : Make your workspace preview publicly\n accessible. This lets anyone on the Internet\n reach the preview server running on your workspace *while your workspace\n is active*, and until you turn off public access.\n\n - **Manage workspace access**. Share your workspace with just the people\n to which you want to give access.\n\n | **Warning:** Sharing your workspace lets other users make changes to your code and access other private information like authentication tokens saved on the workspace, so only share with those you trust. Learn more at [Share your workspace](/docs/studio/share-your-workspace).\n3. Select **Copy preview URL** to copy a direct link to the workspace preview,\n which you can then send to those you'd like to get feedback from. You can\n also use the QR code that appears to open your preview on your mobile\n device.\n\nConfigure autosave and hot reload\n\nBy default, Firebase Studio autosaves your work one second after you\nstop typing, triggering automatic hot reloads. If you want\nFirebase Studio to save your work at a different interval, change the\nautosave setting. You can also turn off autosave. \n\nConfigure autosave\n\n1. Open [Firebase Studio](https://studio.firebase.google.com/).\n2. Click the **Settings** icon.\n3. Search for **Files: Auto Save** and verify that the field is set to \\`afterDelay\\`.\n4. Search for **Files: Auto Save\n Delay**.\n5. Enter a new autosave delay interval, expressed in milliseconds. Changes to your work are now automatically saved based on the new autosave delay setting. \n\nTurn off autosave\n\n1. Open [Firebase Studio](/docs/studio/https/studio.firebase.google.com).\n2. Click the **Settings** icon.\n3. Search for **Files: Auto Save**.\n4. Click the drop-down and select **off**.\n\nPreview backend disconnected\n\nYou can safely disregard the \"Preview backend disconnected\" message.\n\nNext steps\n\n- [Publish with Firebase](/docs/studio/deploy-app).\n- [Monitor your app](/docs/studio/monitor)."]]
미리보기 링크 공유 아이콘을 클릭하여 공유 메뉴를 엽니다.