Solana Explorer 딥다이브
— Solana 재단의 공식 블록체인 탐색기

1프로젝트 한줄 요약

이 레포가 무엇을 하는 물건인가.

Solana Explorer(저장소명 solana-foundation/explorer)는 Solana 재단이 운영하는 공식 블록 익스플로러다. 주소(지갑·프로그램·토큰 민트)를 넣으면 잔액·소유 토큰·거래 이력을, 트랜잭션 서명을 넣으면 그 거래가 호출한 명령들을, 슬롯 번호를 넣으면 블록 내용을 보여 준다. 누구나 회원가입 없이 온체인 데이터를 들여다볼 수 있는 read-only 조회 도구다.

차별점은 단순 표시가 아니라 "해석(inspect)"에 있다. 트랜잭션 한 건에는 System·Token·Serum·Mango·Pyth 같은 수십 종 프로그램의 명령이 섞여 들어가는데, Explorer는 각 프로그램의 IDL과 디코더를 동원해 "이건 토큰 전송", "이건 스왑"처럼 사람이 읽을 수 있는 카드로 변환한다. 그래서 코드 관점에서는 "온체인 바이트를 UI로 번역하는 거대한 파서 모음"이라고 봐도 된다.

2왜 주목받는가

트렌딩 이유 · 경쟁 대비 장점.

블록 익스플로러는 이미 Solscan·SolanaFM 등 상용 강자가 있다. 그런데도 이 레포가 주목받는 이유는 세 가지다. 첫째, Solana 재단의 공식 레퍼런스라 "Solana의 데이터를 어떻게 다뤄야 하는가"의 표준 구현으로 통한다. 둘째, 코드가 통째로 오픈소스(이 레포)라 web3 프론트엔드를 배우려는 사람에게 최고의 실전 교재다. 셋째, 기술 스택이 Next.js 16 + React 19 + @solana/kit로 매우 최신이라, "지금" 권장되는 방식이 코드에 그대로 담겨 있다.

3기술 스택 전체 지도

'온체인 번역기'를 떠받치는 기술들.

Solana Explorer는 파이썬 한 줄 없는 100% TypeScript 프론트엔드다. Next.js 16 App Router로 서버·클라이언트 렌더링을 함께 쓰고, 블록체인 접근은 레거시 web3.js와 신형 @solana/kit을 의도적으로 병행한다. 데이터 페칭은 SWR, 가벼운 상태는 Jotai, UI는 Radix/shadcn + Tailwind로 구성한 전형적인 모던 스택이다.

4아키텍처 심화 분석

주소 하나를 넣으면 화면까지 어떤 길을 거치는가.

사용자가 주소·서명·슬롯을 입력하면 대략 이렇게 흐른다: ① URL 라우팅 → ② 클러스터/RPC 결정 → ③ RPC 조회(SWR 캐시) → ④ 응답 검증(superstruct) → ⑤ 디코딩·파싱 → ⑥ 기능별 카드 렌더. 전체 그림 한 장:

핵심 설계 1 — 2단 RPC URL 치환 (utils/cluster.ts)

가장 영리한 부분. RPC URL을 그대로 쓰지 않고 배포 환경에서는 api를 explorer-api로 바꿔 자체 RPC 인스턴스로 보낸다. 또 브라우저용과 서버용 환경변수를 분리해, 클라이언트는 NEXT_PUBLIC_*_RPC_URL, 서버(SSR·API route)는 *_RPC_URL(public 접두사 없음)을 쓴다.

// RPC URL 결정의 핵심(요지)
const modifyUrl = (url) => {
  if (location.hostname === 'localhost') return url;   // 로컬: 공용 RPC 그대로
  return url.replace('api', 'explorer-api');          // 배포: 자체 RPC로
};
// clusterUrl(): 브라우저용  NEXT_PUBLIC_*_RPC_URL ?? modifyUrl(기본)
// serverClusterUrl(): SSR/API용     *_RPC_URL ?? modifyUrl(기본)

클러스터 enum은 MainnetBeta · Testnet · Devnet · Simd296 · Custom 5종인데, 특히 Simd296은 실험용 surfnet을 가리키는 별도 엔트리다. 표준 3종 외에 실험망과 커스텀까지 한 enum으로 다루는 게 포인트.

핵심 설계 2 — 클러스터 전환과 메타 적재 (providers/cluster.tsx)

ClusterProvider가 useReducer로 상태(cluster·customUrl·status·clusterInfo)를 들고, URL 쿼리스트링 ?cluster=devnet을 useSearchParams로 파싱한다. 클러스터가 바뀌면 @solana/kit의 createSolanaRpc로 연결한 뒤 4개 RPC를 동시에 호출해 네트워크 메타 정보를 한 번에 채운다.

const rpc = createSolanaRpc(transportUrl);
const [firstBlock, epochSchedule, epochInfo, genesisHash] =
  await Promise.all([
    rpc.getFirstAvailableBlock().send(),
    rpc.getEpochSchedule().send(),
    rpc.getEpochInfo().send(),
    rpc.getGenesisHash().send(),
  ]);

커스텀 URL은 아무 때나 허용하지 않는다 — localStorage의 enableCustomUrl 플래그가 켜졌거나 화이트리스트 도메인일 때만 받는다. 임의 RPC 주입을 막는 안전장치다.

핵심 설계 3 — 명령 디코딩 파이프라인 (utils/anchor.tsx)

트랜잭션 해석의 심장. Anchor의 BorshInstructionCoder·BorshEventCoder로 명령·이벤트를 디코딩하고, Anchor Self-CPI 태그(1d9acb512ea545e4)를 감지해 내부 호출을 구분한다. IDL이 있으면 codama가 그 IDL을 동적 파서로 변환해, 전용 카드가 없는 프로그램도 자동으로 풀어낸다.

핵심 설계 4 — 검증 계층(Verified Build · 토큰 배지)

Explorer는 "보여 주기"에 그치지 않고 진위 확인까지 한다. utils/verified-builds.tsx는 OSEC 레지스트리(verify.osec.io)로 온체인 프로그램 해시가 공개 소스와 일치하는지 대조해 Verified/NotVerified 배지를 단다. 토큰은 app/api/verification/*에서 Jupiter·RugCheck·CoinGecko·Bluprynt 4곳을 교차검증한다. 매일 cron 워크플로가 verified-programs.json을 자동 갱신해 PR을 연다.

5디렉토리 구조 해부

App Router + FSD에서 어디가 무슨 일을 하나.

6학습 포인트 (기술별)

이 레포에서 배울 만한 것 + 어디를 보면 되는지.

7시스템 요구사항

그냥 쓰려면 / 직접 빌드하려면 무엇이 필요한가.

8직접 해볼 수 있는 실습 과제

난이도별로 손에 익히는 단계.

git clone https://github.com/solana-foundation/explorer
cd explorer && pnpm install
pnpm dev   # http://localhost:3000

9관련 기술 심화 학습 로드맵

한 주씩 따라가는 계획.

10핵심 키워드 사전

본문에 나온 용어 빠른 참조.

11참고 링크

• GitHub: solana-foundation/explorer
• 실제 서비스: explorer.solana.com
• Solana 공식 문서: solana.com/docs
• @solana/kit: github.com/anza-xyz/kit
• Anchor 프레임워크: anchor-lang.com
• SWR: swr.vercel.app