콘텐츠로 건너뛰기

Panolayer Studio · 아키텍처

무엇이 무엇을 호출하는지 확인하세요.

Panolayer는 repository의 서비스, 모듈, 함수, 호출자, 의존성을 매핑합니다. 이 맵은 소스에서 파싱되므로 동일한 코드는 항상 동일한 맵을 생성하며, agent와 검증 엔진도 이 맵을 기반으로 동작합니다.

Apple silicon에서 macOS 15 · 무료로 시작 · 신용카드 필요 없음

Architecture · from system to source

Panolayer architecture map with application groups, functions and their connected dependencies.

전체 캡처 · 스크롤하여 세부 정보 확인

서비스에 세 단계 깊이 들어와, 무엇이 이 서비스를 호출하는지 파악하는 중입니다.

파일 트리는 코드가 어디에 있는지 보여줄 뿐, 무엇이 코드에 의존하는지는 보여주지 않습니다. agent가 작성한 코드라면 더 어렵습니다. 팀에서 아무도 작성하지 않았고 diff는 2,000줄이었기 때문입니다. Panolayer를 사용하면 폴더가 아니라 무엇이 무엇을 호출하는지를 기준으로 코드를 탐색할 수 있습니다.

할 수 있는 작업

전체 시스템에서 한 줄까지

01

전체 시스템에서 시작

repository를 열고 서비스, 각 서비스의 내부, 연결 방식을 확인하세요.

Start at the repository

Start at the repository

The architecture diagram connects the repository to API Routes, Application Pages, Other, Shared Libraries and UI Components.

전체 캡처 · 스크롤하여 세부 정보 확인

02

필요한 부분까지 드릴다운

서비스에서 모듈로, 모듈에서 함수로 이동하세요. 다이어그램, 컬럼, 경로 뷰가 동일한 구조를 세 가지 방식으로 보여줍니다.

Open a function. Go straight to its source.

Open a function. Go straight to its source.

The recorded walkthrough opens the pick function from UserSwitcher in the architecture map, revealing its source, summary and verification results.

전체 캡처 · 스크롤하여 세부 정보 확인

03

모든 함수를 컨텍스트와 함께 확인

getPrice()를 열면 함수의 동작, 입력과 출력, 호출하는 곳, 의존 대상, 적용되는 규칙, 검증 상태를 확인할 수 있습니다.

Architecture · source and rules together

Architecture · source and rules together

Panolayer Studio source view showing a PATCH handler, its function summary, and a failed rule at line 65.

전체 캡처 · 스크롤하여 세부 정보 확인

04

변경이 미치는 범위 확인

getPrice()를 센트에서 달러로 바꾸면, 배포되기 전에 이 변경이 상품 페이지, 장바구니, 결제까지 미친다는 것을 맵이 보여줍니다.

Follow a component into its functions

Follow a component into its functions

The architecture map connects the UserSwitcher component to its pick function, alongside UserSwitcherProps and neighboring components.

전체 캡처 · 스크롤하여 세부 정보 확인

05

여러분의 agent도 같은 맵을 봅니다

agent는 MCP 도구를 통해 맵에 구조, 호출자, 의존성을 질의할 수 있으며, 검증 단계에서 이 맵을 기준으로 변경 사항을 확인합니다.

Panolayer Agent · answers grounded in your source

Panolayer Agent · answers grounded in your source

Panolayer Agent explains the posting workflow with references to the repository's routes, validation and data types.

전체 캡처 · 스크롤하여 세부 정보 확인

살아 있는 문서

코드를 따라가는 문서

코드베이스의 어느 부분이든 질문하면 아키텍처를 기반으로 작성된 문서를 받을 수 있으며, 문서의 내용은 소스와 연결됩니다. 코드가 변경되면 다시 생성하세요.

Living Documents 작동 방식

Living documents · source-linked context

A living document explaining a feature with links to source files and line numbers.

전체 캡처 · 스크롤하여 세부 정보 확인

문의

다른 문의가 있으신가요? 문의하기를 통해 알려주시면 답변해 드리겠습니다.

지도는 LLM으로 생성되나요?

아니요. 구조는 소스에서 파싱됩니다. 모델은 요청하면 쉬운 말로 설명을 추가할 수 있지만, 구조를 결정하지는 않습니다.

agent를 실행하지 않고도 지도를 사용할 수 있나요?

예. 낯선 코드를 탐색할 때 단독으로 작동합니다.

어떤 언어를 지원하나요?

TypeScript, JavaScript, Python, Go, Rust, Java 등 다양한 언어를 지원합니다. 동적 호출과 생성된 코드는 추적하기 어려우며 수동 확인이 필요할 수 있습니다. 전체 목록은 문서에서 확인하세요.

모노레포에서도 작동하나요?

예.

코드베이스에서 Panolayer를 사용해 보세요.

무료로 시작 · 신용카드 등록 불필요

Panolayer가 코드를 처리하는 방식

다음: 살아있는 문서