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

# 시각적 편집

> 인터페이스에서 직접 정밀한 디자인을 편집하세요.

Lumi의 시각적 편집 기능을 사용하면 페이지의 모든 요소를 선택하여 직접 수정할 수 있습니다. 텍스트 및 색상과 같은 속성을 즉시 업데이트하거나 프롬프트를 사용하여 기능과 레이아웃을 조정할 수 있습니다. 코드를 작성하거나 AI를 사용하지 않고 빠르고 구체적인 변경을 할 때 이상적인 도구입니다.

<Note>
  **참고:** 시각적 편집을 사용해도 크레딧이 소모되지 않습니다.
</Note>

<img src="https://mintcdn.com/blockdance/yVzLgDWOMQWyvNCE/images/VE.gif?s=c13d93006af083d7b1bad8f01ce4cebd" alt="VE Gi" width="1280" height="720" data-path="images/VE.gif" />

## 시각적 편집 사용 시점

시각적 편집은 다음과 같은 경우에 이상적입니다.

* 사이트의 정적 텍스트나 미디어 콘텐츠를 변경하고 싶을 때.
* 글꼴, 크기, 스타일을 포함한 타이포그래피를 업데이트하고 싶을 때.
* 텍스트, 버튼 또는 기타 요소의 색상을 수정하고 싶을 때.
* 특정 요소를 선택하고 프롬프트를 사용하여 시각적 모양이나 기능을 변경하고 싶을 때. 이러한 프롬프트는 일반 메시지와 마찬가지로 크레딧을 소모합니다.
* 프롬프트를 통해 사이트의 기존 이미지에 AI 기반 편집을 적용합니다. AI로 편집 기능은 일반 메시지와 마찬가지로 채팅 크레딧을 사용합니다.

  <img src="https://mintcdn.com/blockdance/Si-KBGUqnPsHTPfG/images/%E5%8F%AF%E8%A7%86%E5%8C%96%E7%BC%96%E8%BE%91.PNG?fit=max&auto=format&n=Si-KBGUqnPsHTPfG&q=85&s=9629b8803fd29e92b4e5002857ab40ca" alt="可视化编辑" width="1280" height="962" data-path="images/可视化编辑.PNG" />

## 시각적 편집 사용 방법

<Steps>
  <Step title="시각적 편집 찾기">
    이 도구는 입력 상자 또는 미리보기 모드의 상단 툴바에서 찾을 수 있습니다.

    <img src="https://mintcdn.com/blockdance/yVzLgDWOMQWyvNCE/images/20250911-184540.jpeg?fit=max&auto=format&n=yVzLgDWOMQWyvNCE&q=85&s=7d2c75ec60807782e3844a5afd94751d" alt="20250911 184540 Jpe" width="3840" height="1916" data-path="images/20250911-184540.jpeg" />
  </Step>

  <Step title="도구 활성화">
    버튼을 클릭하여 시각적 편집 모드로 들어갑니다.
  </Step>

  <Step title="요소 선택">
    수정하려는 항목(헤드라인, 버튼, 이미지 또는 배경 섹션) 위로 마우스를 가져가 클릭하여 선택합니다.

    <img src="https://mintcdn.com/blockdance/yVzLgDWOMQWyvNCE/images/20250911-184025.jpeg?fit=max&auto=format&n=yVzLgDWOMQWyvNCE&q=85&s=9637a2ab63470ab62b99069f401b6b07" alt="20250911 184025 Jpe" width="1905" height="1186" data-path="images/20250911-184025.jpeg" />
  </Step>

  <Step title="프롬프트 또는 직접 컨트롤을 통한 편집">
    요소가 선택되면 "이 헤딩을 굵게 만들어 줘"와 같은 명령을 입력하거나, 상황별 편집기를 사용하여 텍스트, 글꼴, 색상을 직접 변경합니다.

    <img src="https://mintcdn.com/blockdance/yVzLgDWOMQWyvNCE/images/20250911-183835.jpeg?fit=max&auto=format&n=yVzLgDWOMQWyvNCE&q=85&s=71158959d69d6ca9639c73ceb4bc5e0b" alt="20250911 183835 Jpe" width="1076" height="1344" data-path="images/20250911-183835.jpeg" />
  </Step>

  <Step title="적용 및 검토">
    "저장"을 클릭하여 변경 사항을 확인합니다. Lumi는 실시간 미리보기와 해당 코드를 즉시 업데이트합니다.
  </Step>
</Steps>