> ## Documentation Index
> Fetch the complete documentation index at: https://docs.xkat.space/llms.txt
> Use this file to discover all available pages before exploring further.

# 에디터 + 라이브 프리뷰

> 브라우저 안 즉시 렌더링으로 하는 프론트엔드 실습.

프론트엔드 강의에서는 다이나믹 워크스페이스가 **에디터와 라이브 웹 프리뷰**를 짝지어,
변경 사항을 즉시 렌더링합니다.

## 작동 방식

<Steps>
  <Step title="마크업·스타일·컴포넌트 편집">
    에디터에서 HTML, CSS, 프레임워크 코드를 변경합니다.
  </Step>

  <Step title="즉시 렌더링 확인">
    라이브 프리뷰 패널이 실시간으로 갱신됩니다 — 저장 후 새로고침이 필요 없습니다.
  </Step>

  <Step title="빠르게 반복">
    실제 프론트엔드 작업처럼 짧은 피드백 루프로 수정하고 확인합니다.
  </Step>
</Steps>

## 안전한 샌드박스 렌더링

코드는 격리된 환경에서 렌더링되어, 브라우저에서 안전하게 실행되면서도 실제 페이지처럼
동작합니다.

<Tip>
  UI를 만드는데 뭔가 이상한가요? [AI 튜터](/ko/learn/ai-tutor)에게 코드를 점검하고
  수정을 제안하도록 요청하세요.
</Tip>

## 관련 문서

<CardGroup cols={2}>
  <Card title="백엔드 실습" icon="terminal" href="/ko/learn/workspace/editor-terminal">
    원격 컴파일을 갖춘 에디터 + 터미널.
  </Card>

  <Card title="무설치" icon="bolt" href="/ko/learn/workspace/zero-setup">
    설치가 필요 없는 이유.
  </Card>
</CardGroup>