InteractiveJun 10, 2026

레이어드 아키텍처 익스플로러

컴포넌트 하나도 열어 보면 몇 겹의 책임이 쌓여 있다. 층을 띄워 두고 마우스를 올리면 그 층을 맡은 코드가 옆에 뜬다. 예시는 PDF 에디터의 네 개 층.

ReactCSS 3D Transformshiki

PDF Canvas

Layer 1/4PDF Canvas

PDFPageRenderer.tsx

const viewport = page.getViewport({ scale });
canvas.width = viewport.width * devicePixelRatio;
canvas.height = viewport.height * devicePixelRatio;

await page.render({
  canvasContext: ctx,
  viewport,
  transform: [dpr, 0, 0, dpr, 0, 0],
}).promise;

복잡한 컴포넌트를 글로만 설명하면 금세 장황해진다. PDF 에디터처럼 책임이 여러 겹일 땐, “렌더 → 파싱 → 오버레이 → 변환”을 눈으로 펼쳐 두는 편이 한눈에 들어온다. 각 층에 마우스를 올리면 그 층을 맡은 코드가 오른쪽에 뜬다.

3D 효과는 라이브러리 없이 CSS transform만 썼다. 스택 전체에 등각 회전(rotateX(55deg) rotateZ(-45deg))을 한 번 주고, 각 층을 translateZ로 띄워 평행한 종이처럼 쌓았다. 활성 층만 조금 더 밀어 올려 도드라지게 했고, 오른쪽 코드는 shiki로 하이라이트한다.

기울어진 면 위에 글씨를 얹으니 같이 비뚤어져 읽기 힘들었다. 그래서 층 이름은 왼쪽 위에 고정해 두고, 호버는 아래 평면 목록에서 받도록 옮겼다. 키보드 포커스로도 층을 넘길 수 있다. 보기 좋은 것과 실제로 쓸 만한 것 사이의 절충이다.