앱 비주얼라이저

원문 보기 위키 갱신 2026.10.07

앱 비주얼라이저 (App Visualizer)

이 섹션은 프론트엔드 시스템에서 app-visualizer 플러그인을 설치하는 방법을 설명해요. 어떤 뷰를 사용할 수 있는지도 설명해요. 프론트엔드 시스템을 정상적으로 사용하는 동안이나 마이그레이션 중에 사용할 수 있어요.

출처: 문서

app-visualizer 플러그인은 문제 해결에 도움이 될 수 있어요. 앱의 확장 트리에 대한 시각적 개요를 제공해, 플러그인이 올바르게 설치되었는지 확인하고, 확장이 어떻게 연결되는지 살펴보고, 마이그레이션 중 문제를 식별하기 쉽게 만들어줘요.

기본 Backstage 앱 템플릿에는 이미 이 플러그인이 포함돼 있어요. 앱에 없다면 의존성으로 추가하세요.

yarn --cwd packages/app add @backstage/plugin-app-visualizer

앱에 통합되면 플러그인이 /visualizer 라우트를 제공해요. 앱 설정에 따라 사이드바에 Visualizer 항목으로 나타날 수도 있어요.

app-visualizer는 페이지 상단의 탭으로 접근할 수 있는 세 가지 뷰를 제공해요.

Tree — 전체 확장 트리를 대화형 계층 구조로 표시해요. 각 노드는 확장을 나타내며 ID, 속한 플러그인, 활성/비활성 여부를 보여줘요. 이는 마이그레이션 중 가장 유용한 뷰예요. 어떤 플러그인이 자동으로 감지되고 어떤 레거시 확장이 변환되었는지 확인할 수 있게 해주기 때문이에요. 노드를 확장해 자식 확장과 그 구성을 볼 수 있어요.
Detailed — 모든 확장을 추가 메타데이터와 함께 목록으로 보여줘요. 개별 확장 속성, 구성, 부착 지점을 검사하려면 이 뷰를 사용하세요. 구성 재정의를 디버깅하고 확장이 어떻게 해석되는지 이해하는 데 도움이 돼요.
Text — 확장 트리를 일반 텍스트로 렌더링해요. 앱 구조의 간결하고 읽기 쉬운 스냅샷을 제공하므로 도움을 요청할 때 GitHub 이슈나 Discord에 복사-붙여넣기 하기에 유용해요.

뷰의 예시는 Demo Site 또는 아래 스크린샷을 참고하세요.

트리 뷰의 예시:

상세 뷰의 예시: