editor shell 만들기

이제 강의에서 만든 조각들을 하나의 앱 형태로 묶습니다. editor shell은 캔버스, toolbar, layer panel, inspector, status bar를 담는 바깥 구조입니다.

여기서 중요한 것은 UI를 예쁘게 배치하는 것보다 책임을 나누는 것입니다.

shell의 최소 HTML/CSS 구조

capstone에서는 먼저 renderer보다 바깥 shell을 고정합니다. canvas가 어디에 붙고, overlay와 panels가 어디에 붙는지 명확해야 합니다.

<main class="editor-shell">
  <header class="toolbar"></header>
  <aside class="tool-rail"></aside>
  <section class="canvas-pane">
    <canvas class="gpu-canvas"></canvas>
    <div class="dom-overlay"></div>
  </section>
  <aside class="inspector"></aside>
  <footer class="status-bar"></footer>
</main>

.editor-shell {
  height: 100vh;
  display: grid;
  grid-template:
    "toolbar toolbar toolbar" 48px
    "tools canvas inspector" 1fr
    "status status status" 28px /
    56px 1fr 280px;
}

.canvas-pane {
  position: relative;
  overflow: hidden;
}

.gpu-canvas,
.dom-overlay {
  position: absolute;
  inset: 0;
}

dom-overlay는 text editing이나 accessibility proxy처럼 브라우저 레이어가 필요한 기능을 올리는 곳입니다.

capstone 파일 구조를 먼저 고정한다

작은 editor라도 책임을 나누지 않으면 tool, renderer, UI가 서로 직접 상태를 만지게 됩니다. capstone은 아래 모듈 구조로 조립합니다.

src/
  core/document.ts      scene document, node update, traversal
  core/commands.ts      command apply, undo, redo
  core/editor-core.ts   dispatch, snapshot, history
  tools/pointer.ts      clientToCanvas, screenToWorld
  tools/select-tool.ts  hover, hit test, marquee
  tools/transform.ts    move, resize, rotate, snapping
  renderer/webgl.ts     WebGL backend
  renderer/snapshot.ts  drawList, world matrix cache
  ui/panels.ts          toolbar, layer panel, inspector
  persistence/json.ts   export/import document

이 구조에서 core는 DOM과 WebGL을 import하지 않습니다. renderer와 UI가 core를 바라보는 방향만 허용합니다.

ui/tools -> core -> snapshot -> renderer

shell은 앱의 레이아웃이다

editor shell은 문서 모델을 직접 바꾸는 핵심 로직이 아닙니다. 사용자가 도구와 패널을 볼 수 있게 배치하는 앱 프레임입니다.

top toolbar
left tool rail
center canvas surface
right inspector
bottom status/readout

Canvas surface는 renderer와 input system이 붙는 중심 영역입니다.

shell은 editor core를 주입받는다

shell이 scene graph를 직접 소유하면 금방 엉킵니다. shell은 editor core의 상태를 읽고, 사용자 명령을 core에 전달합니다.

UI event
-> editor action
-> core updates state
-> renderer redraws
-> panels reflect state

이 흐름을 유지하면 UI를 바꿔도 core는 유지됩니다.

layout은 좌표계와 분리한다

toolbar와 inspector는 DOM layout입니다. 캔버스 안의 world/screen 좌표와 섞으면 안 됩니다.

app layout coordinates
canvas screen coordinates
document world coordinates

이 세 좌표계를 분리해두면 resize, panel collapse, fullscreen mode를 다루기 쉽습니다.

오늘의 핵심

editor shell은 편집기의 앱 구조입니다.

shell owns layout
core owns document state
renderer owns pixels

이 경계를 지키면 capstone을 작은 부품으로 조립할 수 있습니다.