OpenClaw v2026.2 적용 | 본문은 기본 설치를 완료하고 브라우저로 OpenClaw를 관리하고 싶은 사용자를 대상으로 합니다.

TL;DR: Web UI는 http://127.0.0.1:18789에서 접속합니다. Chat(대화), Sessions(세션), Config(설정), Nodes(노드), Logs(로그), Skills(스킬) 페이지를 포함합니다. Canvas는 Agent 기반 시각화 작업 공간으로, 차트, 대시보드, 인터랙티브 UI를 만들 수 있습니다. 원격 접속: Tailscale Serve 또는 SSH 터널. 모바일 Canvas는 iOS/Android 앱에서 사용 가능합니다.

Web Control UI

Web UI 접속

Gateway를 시작한 후 브라우저에서 접속합니다:

http://127.0.0.1:18789

인터페이스 개요

flowchart LR
    subgraph WebUI["Web Control UI"]
        Chat[Chat 대화]
        Sessions[Sessions 세션]
        Config[Config 설정]
        Nodes[Nodes 노드]
        Logs[Logs 로그]
        Skills[Skills 스킬]
    end
    
    subgraph Features["기능"]
        F1[실시간 대화]
        F2[세션 관리]
        F3[설정 편집]
        F4[노드 제어]
        F5[로그 보기]
        F6[스킬 관리]
    end
    
    Chat --> F1
    Sessions --> F2
    Config --> F3
    Nodes --> F4
    Logs --> F5
    Skills --> F6

페이지 기능

Chat(대화)

Sessions(세션)

Config(설정)

Nodes(노드)

Logs(로그)

Skills(스킬)

Web UI 설정

{
  "web": {
    "enabled": true,
    "port": 18789,
    "bind": "loopback",
    "auth": {
      "mode": "password",
      "password": "your-secure-password"
    },
    "theme": "dark"
  }
}

원격 접속

방법 1: Tailscale

{
  "gateway": {
    "tailscale": {
      "mode": "serve"
    }
  }
}

Tailscale 네트워크로 접속:

https://your-tailnet-name.ts.net

방법 2: SSH 터널

# 로컬에서 SSH 터널 생성
ssh -L 18789:localhost:18789 user@remote-server

# 그 다음 접속
http://localhost:18789

방법 3: 리버스 프록시

Caddy 또는 Nginx 사용:

Caddyfile:

your-domain.com {
    reverse_proxy localhost:18789
}

Canvas 시각화 작업 공간

Canvas란?

Canvas는 Agent 기반 시각화 작업 공간입니다. Agent는 다음을 수행할 수 있습니다:

• 동적 차트 생성
• 인터랙티브 UI 구성
• 실시간 데이터 표시
• 대시보드 생성
• 외부 콘텐츠 임베드

Canvas 아키텍처

flowchart TB
    subgraph Agent["Agent"]
        PROMPT[요청 분석]
        GEN[A2UI 생성]
        EXEC[작업 실행]
    end
    
    subgraph Canvas["Canvas 런타임"]
        RENDER[렌더링 엔진]
        STATE[상태 관리]
        EVENT[이벤트 처리]
    end
    
    subgraph UI["사용자 인터페이스"]
        DISPLAY[Canvas 표시]
        INTERACT[사용자 상호작용]
    end
    
    Agent --> Canvas
    PROMPT --> GEN
    GEN --> RENDER
    RENDER --> DISPLAY
    DISPLAY --> INTERACT
    INTERACT --> EVENT
    EVENT --> EXEC

기본 사용

채팅에서 Canvas 사용

사용자: 간단한 할 일 앱 만들어줘

Agent: 할 일 Canvas 앱을 만들어 드리겠습니다...
[Canvas 컴포넌트 생성]

Canvas 명령

Canvas 컴포넌트

텍스트 컴포넌트

canvas.text({
  content: "Hello, World!",
  style: {
    fontSize: "24px",
    color: "#333",
    fontWeight: "bold"
  }
})

버튼 컴포넌트

canvas.button({
  label: "Click Me",
  onClick: () => {
    console.log("Button clicked!")
  },
  style: {
    background: "#3b82f6",
    color: "white"
  }
})

리스트 컴포넌트

canvas.list({
  items: ["Item 1", "Item 2", "Item 3"],
  onSelect: (item) => {
    console.log(`Selected: ${item}`)
  }
})

차트 컴포넌트

canvas.chart({
  type: "bar",
  data: {
    labels: ["Jan", "Feb", "Mar"],
    datasets: [{
      label: "Revenue",
      data: [100, 200, 150]
    }]
  }
})

폼 컴포넌트

canvas.form({
  fields: [
    { name: "username", type: "text", label: "Username" },
    { name: "email", type: "email", label: "Email" },
    { name: "submit", type: "submit", label: "Submit" }
  ],
  onSubmit: (data) => {
    console.log("Form submitted:", data)
  }
})

실전 예시

예시 1: 데이터 대시보드

// Agent가 생성한 Canvas 코드
canvas.render(`
  <Dashboard>
    <Header title="Sales Dashboard" />
    <Row>
      <Card title="Total Revenue" value="$125,430" trend="+12%" />
      <Card title="Active Users" value="3,245" trend="+5%" />
      <Card title="Conversion Rate" value="4.2%" trend="-1%" />
    </Row>
    <Row>
      <Chart type="line" data={revenueData} title="Revenue Trend" />
      <Chart type="bar" data={usersData} title="User Growth" />
    </Row>
  </Dashboard>
`)

예시 2: 인터랙티브 계산기

canvas.render(`
  <Calculator>
    <Display value={display} />
    <Keypad>
      <Button onClick={() => input('7')}>7</Button>
      <Button onClick={() => input('8')}>8</Button>
      <Button onClick={() => input('9')}>9</Button>
      <Button onClick={() => input('/')}>/</Button>
      // ... more buttons
    </Keypad>
  </Calculator>
`)

const state = { display: '0' }
function input(value) {
  state.display = calculate(state.display, value)
  canvas.update()
}

예시 3: 실시간 모니터링

canvas.render(`
  <Monitor>
    <Header title="System Monitor" />
    <Metrics>
      <Metric 
        label="CPU Usage" 
        value={cpuUsage} 
        threshold={80}
        unit="%"
      />
      <Metric 
        label="Memory" 
        value={memoryUsed} 
        threshold={90}
        unit="GB"
      />
      <Metric 
        label="Disk I/O" 
        value={diskIO} 
        unit="MB/s"
      />
    </Metrics>
    <Chart type="line" data={historyData} realtime />
  </Monitor>
`)

// 주기적 데이터 업데이트
setInterval(() => {
  cpuUsage = getCpuUsage()
  memoryUsed = getMemoryUsed()
  diskIO = getDiskIO()
  canvas.update()
}, 1000)

Canvas API

canvas.render(template)

Canvas 내용 렌더링.

canvas.render(`
  <Container>
    <Text>Hello</Text>
  </Container>
`)

canvas.update()

Canvas 상태 업데이트.

state.count++
canvas.update()

canvas.clear()

Canvas 비우기.

canvas.clear()

canvas.snapshot()

Canvas 스냅샷 가져오기.

const image = await canvas.snapshot()

canvas.eval(code)

Canvas 컨텍스트에서 코드 실행.

await canvas.eval(`
  document.getElementById('counter').innerText = '${count}'
`)

A2UI 컴포넌트 라이브러리

Canvas는 A2UI(Agent-to-UI) 컴포넌트 라이브러리를 사용합니다:

레이아웃 컴포넌트

데이터 표시

인터랙티브 컴포넌트

Canvas와 Agent 협업

Agent가 Canvas 생성

사용자: 프로젝트 진행 상황 추적 패널 만들어줘

Agent: 프로젝트 진행 상황 추적 Canvas를 만들어 드리겠습니다...

Agent는 다음을 수행합니다:

1. 요구사항 분석
2. 레이아웃 설계
3. Canvas 코드 생성
4. 인터페이스 렌더링

Canvas가 Agent 트리거

사용자가 Canvas와 상호작용할 때 Agent 작업을 트리거할 수 있습니다:

canvas.button({
  label: "Generate Report",
  onClick: async () => {
    await agent.send("월간 보고서 생성해줘")
  }
})

다양한 기기에서 Canvas 사용

macOS

Canvas는 독립 창으로 표시됩니다:

openclaw canvas show

iOS

Canvas는 iOS Node 앱에 통합됩니다:

• OpenClaw iOS 앱 열기
• Canvas 탭으로 전환

Android

Canvas는 Android Node 앱에 통합됩니다:

• OpenClaw Android 앱 열기
• Canvas 탭으로 전환

Web

Canvas는 Web UI에 표시됩니다:

• http://localhost:18789 열기
• Canvas 탭 클릭

Canvas 설정

{
  "canvas": {
    "enabled": true,
    "theme": "dark",
    "autoUpdate": true,
    "updateInterval": 1000,
    "maxComponents": 100,
    "persistState": true
  }
}

요약

Web Control UI와 Canvas로 OpenClaw는 단순 채팅 어시스턴트를 넘어 완전한 인터랙션 플랫폼이 됩니다:

• Web UI: 브라우저 제어 패널로 모든 것을 관리
• Canvas: Agent 기반 시각화 작업 공간
• A2UI: 풍부한 컴포넌트 라이브러리로 빠른 UI 구성
• 크로스 디바이스: macOS, iOS, Android, Web에서 동일한 경험

이 기능들로 Agent가 대시보드, 관리 인터페이스, 인터랙티브 도구를 만들 수 있어 AI 어시스턴트 활용 범위가 크게 넓어집니다.

본문 요약:

• Web Control UI 기능과 사용법 습득
• Canvas 기본 개념과 컴포넌트 학습
• A2UI 컴포넌트 라이브러리 이해
• Canvas와 Agent 협업 방식 학습
• 다기기 Canvas 사용법 습득

업데이트 기록:

• 2026-02-26: 초판 발행, OpenClaw v2026.2 기반

시리즈 네비게이션:

• ← 이전: Agent 페르소나 커스터마이징
• → 다음: 다중 Agent 라우팅과 세션 격리