---
title: "비주얼 에디터: 화면에서 바로 수정 | Briks"
url: https://briks.dev/ko/docs/visual-editor
description: "AI 홈페이지 제작 도구: 내 페이지를 클릭해 글, 링크, 사진, 디자인, 섹션, 페이지를 고치고 팀과 작업한 뒤 크레딧 사용 없이 게시해요."
last_updated: 2026-10-08
---

# 비주얼 에디터: 화면에서 바로 수정

Visual Editor는 디자인 도구처럼 패널 옆에 사이트의 실제 페이지를 열어요. 무엇이든 클릭해서 문구, 연결 위치, 이미지, 휴대폰·태블릿·데스크톱별 모양을 바꿀 수 있어요. 요소, 섹션, 페이지를 추가, 이동, 복사, 숨길 수 있고, 사이트 전체의 색과 글꼴도 정할 수 있어요. 변경 내용은 팀이 함께 쓰는 초안에 보관되다가 게시할 때 공개되며, 크레딧은 쓰지 않아요. 유료 요금제에 포함돼요.

읽는 데 10분 2026년 10월 8일 스튜디오 기준으로 확인함

## 열기

어디에

1. Projects
2. Your project
3. Visual Editor

**Visual Editor** 탭은 유료 요금제 워크스페이스에서 **Studio** 옆에 있어요. Free에서는 이 탭이 보이지 않아요. 편집기는 창 전체를 채우고, 왼쪽 위 화살표를 누르면 프로젝트로 돌아가요. 위쪽에는 이런 것들이 있어요.

| 막대에서 | 하는 일 |
| --- | --- |
| **Open layers** | **Layers** 를 열고 닫아요. 페이지를 섹션별로 보여 줘요. |
| **Pages** | 작업할 페이지를 고르고, 페이지를 추가, 이름 변경, 이동, 삭제해요. |
| **Add** | 요소나 섹션을 추가해요. A 키도 같은 일을 해요. |
| 실행 취소 및 다시 실행 화살표 | 변경 내용을 뒤로, 앞으로 이동해요. ⌘Z와 ⇧⌘Z도 같아요. |
| **Changes** | 게시를 기다리는 변경을 하나씩 보여 주고, 각 변경에 **Drop this change** 가 있어요. |
| **Comments** | 페이지 요소에 고정된 댓글이에요. |
| **History** | 사이트의 버전들이에요. 살펴보거나 복원할 수 있어요. |
| **Publish** | 예를 들어 **Publish 3 changes** 라고 표시돼요. 초안을 실제 사이트에 게시해요. |
| **Desktop**, **Tablet**, **Phone** | 페이지를 보는 너비예요: 1440, 834 또는 390픽셀. |
| **Use the page** | 클릭이 사이트에 닿게 해서 메뉴나 팝업을 열고 그 안에서 고를 수 있어요. P를 누르면 편집으로 돌아가요. |
| ⋯ 메뉴 | **Keyboard shortcuts** 와 **Discard draft**. |
| **Open the page** | 라이브 페이지를 새 탭에서 열어요. |

알아두면 좋아요

Visual Editor가 나오기 전에 게시한 사이트는 편집기가 읽을 수 있도록 한 번 다시 게시해야 해요. 페이지에 “This page has not answered the editor. Publish the site once, then open the editor again.”라고 나오면 스튜디오에서 한 번 게시한 뒤 편집기를 다시 여세요.

## 바꿀 대상 고르기

- 페이지에서 아무 곳이나 클릭하거나 **Layers** 에서 찾으세요. 행의 화살표를 열면 그 안에 든 요소가 보이고, 페이지에서 고르면 그곳까지 내려가는 길이 열려요.
- 패널 맨 위의 경로는 지금 선택한 것이 어디에 속하는지 알려 줘요. 단계를 클릭하면 그것을 대신 선택하고, Escape를 눌러도 돼요.
- Shift를 누르고 클릭하면 여러 개를 고를 수 있어요. 모양을 바꾸면 모두에 적용돼요.
- 목록의 카드처럼 같은 요소가 반복되면 모두 함께 강조되고, 모양을 바꾸면 전부 바뀌어요. 각 요소의 글은 따로 바꿔요.
- 무엇이든 마우스 오른쪽 버튼으로 클릭하거나 Shift+F10을 누르면 메뉴가 열려요.

### 마우스 오른쪽 버튼 메뉴

| 항목 | 하는 일 |
| --- | --- |
| **Edit text** | 페이지의 글자 위에 바로 입력하세요. |
| **Rewrite with AI** | **Rewrite**, **Shorter**, **Longer**, **Friendlier tone**, **More formal tone**, **Bolder tone**, 각각 최대 0.20 크레딧이에요. 새 문구를 보고 **Keep**, **Try again**, **Discard** 중에서 고르세요. |
| **Replace picture** 또는 **Replace video** | 미디어 라이브러리에서 다른 것을 고르세요. |
| **Alt text…**, **Link…**, **Style…** | 패널의 해당 부분을 열어요. |
| **Ask AI** | **New design for this section**, **Fix the layout**, **Ask about this…** 이 있어요. Ask AI와 빌더 를 참고하세요. |
| **Move up**, **Move down**, **Move out of its container**, **Move into the next container** | 옆에 있는 요소들 사이로, 또는 박스 안팎으로 옮기세요. |
| **Select parent**, **Select section** | 그것이 들어 있는 요소나 섹션 전체를 고르세요. |
| **Lock** | 실수로 페이지에서 선택되지 않도록 막아줘요. 같은 항목으로 다시 풀 수 있어요. |
| **Duplicate**, **Copy style**, **Paste style** | 복사하거나, 그 모양을 다른 요소에 적용해요. |
| **Show** | **Hide on phone**, **Hide on tablet** 또는 **Hide everywhere** 중에서 고를 수 있어요. |
| **Section** | **Quick edit section…**, **Add section above…**, **Add section below…**, **Move section up**, **Move section down**, **Duplicate section**, **Section background…** |
| **Comment**, **Check the page…** | 댓글을 고정하거나 페이지에 문제가 없는지 점검하세요. |
| **Delete** | 삭제해요. 섹션 전체에서는 **Remove from page** 로 표시돼요. |

적용할 수 없는 항목은 흐리게 표시되고 이유가 나와요. 글을 입력하는 동안 작은 바에 **Bold**, **Italic**, **Link**, **Line break** 가 나타나요.

## 글과 링크

1. 글자를 더블클릭하세요

   위치: Page

   페이지에서 글자 위에 바로 입력하세요. Enter를 누르면 유지되고, Escape를 누르면 원래대로 돌아가요. 패널의 **Content** 에서 입력할 수도 있어요.

2. 연결 위치 바꾸기

   위치: Link

   링크나 버튼은 사이트의 **Page**, **Section**, **Web address**, **Email**, **Phone** 번호, **File** 중 하나로 연결되고, **Open in a new tab** 도 할 수 있어요.

3. 각 너비에서 확인하기

   위치: Bar

   **Desktop**, **Tablet**, **Phone** 을 전환하면서 글이 어떻게 줄바꿈되는지 확인하세요.

이메일 주소나 이름처럼 사이트 정보에 저장해 둔 문구를 바꾸면 표시되는 모든 곳이 함께 바뀌고, 패널에 몇 군데인지 알려 줘요. 편집기는 구두점으로 쓴 대시에 대해 경고하고 쉼표를 제안해요. 문구가 두 줄로 넘어가는 버튼도 알려 줘요. 패널의 **Quick edit** 에서는 한 섹션의 모든 문구와 이미지를 하나의 양식으로 볼 수 있어요.

## 모양

패널에는 **Element**, **Motion**, **Quick edit**, **Site**, **Check** 다섯 개의 탭이 있어요. **Element** 아래의 **Look** 에는 **Layout**, **Space inside** 와 **Space outside**, **Text**, **Fill**, **Stroke**, **Effects** 가 있어요. 지금 보고 있는 너비에서 정한 값은 그대로 표시되고, 더 작은 너비에서 이어받은 값은 회색으로 표시돼요. 입력란 위에 마우스를 올리면 지우기 버튼이 보여요.

| 이런 걸 원해요 | 이렇게 해요 |
| --- | --- |
| 휴대폰에서만 제목을 작게 | **Phone** 으로 바꾼 뒤 **Text** 에서 더 작은 **Size** 를 고르세요. 태블릿과 데스크톱은 그대로예요. |
| 휴대폰에서 숨겨진 것 | 마우스 오른쪽 버튼으로 클릭해 **Show** 를 고른 다음 **Hide on phone** 을 선택하세요. |
| 사이트 고유의 색 | **Fill** 에서 색 견본을 클릭하세요. 각 색은 사이트에 실제로 칠해지는 모습 그대로 보이고, 패널이 배경 위에서 글이 얼마나 잘 읽히는지 알려줘요. |
| 안쪽 여백 늘리기 | 페이지에서 초록색 핸들을 끌거나 **Space inside** 에서 설정하세요. 그곳의 프레임 버튼을 누르면 각 면을 따로 정할 수 있어요. |
| 호버할 때의 변화 | 룩 맨 위에서 **On hover** 를 고른 다음 설정하세요. 페이지에서 마우스를 올려 보면 확인할 수 있어요. |
| 움직이는 요소 | **Motion** 에서 **Fade**, **Rise**, **Slide from the left** 같은 **Entrance** 를 고르고, **Time** 과 **Wait** 를 정한 다음 **Play** 를 누르면 한 번 미리 볼 수 있어요. |

색상은 사이트 자체의 역할에 따라 정해지고 따로 정한 색이 없어서, 사이트 전체가 함께 맞춰져요. 패널에서 설정하지 않은 클래스는 그대로 유지되며 **Kept as written** 아래에 표시돼요.

**Site** 탭은 모든 섹션이 따르는 설정을 정해요: **Colours**, 제목과 본문용 **Type**, **Text styles**, **Buttons**, **Boxes**, 그리고 **Page** 아래의 모드, 모서리, 너비, 리듬이에요. 설정 옆의 ×를 누르면 사이트 고유의 디자인으로 돌아가요.

## 추가하고 배치하기

- **Add** 에는 **Section**, **Text**, **Heading**, **Button**, **Picture**, **Video**, **Icon**, **Divider**, **Form**, **Embed** 가 있어요. 하나를 클릭하면 고른 위치에 추가되고, 놓을 위치로 끌어다 놓을 수도 있어요.
- **Embed** 는 다른 웹사이트의 페이지를 보여 줘요. Google, YouTube, Vimeo, Spotify, SoundCloud, Calendly의 지도와 플레이어는 모든 사이트에서 작동하고, 그 밖의 웹사이트는 먼저 **Settings**, **Preferences**, **Allowed websites** 에서 추가해야 해요.
- 두 섹션 사이의 **+ Add section** 에서는 **Designed** (무료, Briks가 사이트 색상으로 만드는 섹션), **Blank** (무료), **Generate with AI** (약 5 크레딧) 중에서 고를 수 있어요. 입력한 내용은 변경 요청으로 빌더에 전달돼요.
- **Element** 탭의 **Picture** 는 **Replace from your media** 로 이미지를 바꾸고, **Alt text** 를 설정하고(**Decorative, nothing to read aloud** 로 표시할 수도 있어요), 이미지를 자르고, 너비별로 화면에 남길 지점을 정해요. **Section background…** 는 섹션 뒤에 색, 그라데이션, 이미지 또는 동영상을 깔아요.
- 사진 교체는 초안에 포함되어 다른 변경과 함께 라이브로 반영돼요.
- **Layers** 에서 홈페이지의 섹션 행은 섹션을 위아래로 옮기고, 복사하고, 숨길 수 있어요. 숨긴 섹션은 **Hidden from this page** 아래에 나열되어 다시 보이게 할 수 있어요. 다른 페이지에서는 섹션 행으로 섹션을 옮기거나 페이지에서 뺄 수 있어요. **Rename** 은 레이어에 직접 정한 이름을 붙여요. 이 이름은 편집기에서만 쓰이고 게시되지 않아요.

## 페이지

**Pages** 에는 사이트의 페이지가 나열돼요. **Add page** 로 **Blank page** 또는 **Copy of a page** 를 시작하고, **Title** 과 **Address** 를 정해요. 각 페이지의 메뉴에는 **Search and share** (**Search title**, **Search description**, **Hide from search engines**, **Share picture**), **Rename**, **Duplicate**, **Move up**, **Move down**, **Hide from menu**, **Delete** 가 있어요. 페이지를 삭제하면 그 페이지로 오던 링크를 어디로 보낼지 물어봐요. 페이지 변경도 다른 변경처럼 초안에서 대기해요.

## 함께 작업하기

- **하나의 공유 초안.** 변경 사항은 하나 할 때마다 잠시 후 프로젝트 초안에 저장돼요. 그래서 새로고침, 닫은 탭, 다른 기기에서도 남아 있고, 편집기를 여는 모두에게 보여요. 바에는 **Draft saved · not live yet** 와 함께 시간과 저장한 사람이 나와요. 편집기를 연 뒤 다른 사람이 초안을 바꿨다면, 계속하기 전에 **Reload** 하라는 바가 나타나요.
- **함께 있는 사람.** 편집기를 열어 둔 다른 사람들의 얼굴이 바에 나와요. 하나에 마우스를 올리면 그 사람이 있는 페이지와 요소를 볼 수 있고, 그 사람이 고른 요소는 그 사람의 색으로 윤곽이 그려져요. 잠기는 것은 없어요.
- **Comments.** 요소를 선택하고 C를 누르거나, 오른쪽 클릭 후 **Comment** 를 고르세요. @를 입력하면 사람을 지정할 수 있어요. 댓글은 최대 2,000자까지 쓸 수 있고 요소에 고정되며, **Reply**, **Resolve**, **Open again** 을 쓸 수 있어요. 워크스페이스의 모든 사람이 댓글을 달 수 있고 Viewer도 포함돼요. 해결 처리는 Editor, Admin, Owner만 할 수 있어요. 알림 벨로 모두에게 알려 주고, 지정된 사람은 Briks 봇과의 채팅에서도 알림을 받아요.

Viewer는 에디터를 열어 사이트를 둘러보고 댓글을 남길 수 있어요. 페이지에는 "You can look through this site here. Your role in this workspace can't change it."라고 표시돼요.

## Ask AI와 빌더

새 요소나 다른 레이아웃처럼 패널에서 할 수 없는 일은 오른쪽 클릭 메뉴의 **Ask AI** 나 **Element** 탭 맨 아래의 **Ask the builder** 로 요청하세요. 입력한 내용이 선택한 요소에 대한 일반 변경으로 빌더에 전달되고, 크레딧이 들어요:

- **New design for this section** 과 **Fix the layout** 은 보내기 전에, 작업에 보통 드는 크레딧과 내 잔액을 함께 보여줘요. 예를 들면 **Design it for about 5 credits** 예요. 변경은 스튜디오 메시지와 똑같이 빌드되고 게시되며, **Versions** 에서 되돌릴 수 있어요.
- **Ask about this…** 는 여기 있는 요소에 대한 질문에 무료로 답해요. 아무것도 빌드하지 않아요.
- 먼저 초안을 게시하거나 버려 주세요. 빌더는 게시된 사이트를 기준으로 작업하기 때문에, 보내기 전에 편집기가 이를 요청해요.
- **Picture** 의 **Write alt text** 는 사진 설명이 이미 저장되어 있으면 무료이고, 없으면 최대 0.10 크레딧이 들어요. **Use this** 를 누르면 그대로 유지돼요.

**Check** 탭은 지금 보고 있는 너비에서 페이지를 살펴서 대체 텍스트가 없는 이미지, 읽기 어려운 글, 순서가 맞지 않는 제목, 읽는 순서, 이름이 없는 링크와 버튼을 찾아요. 점검은 무료이고, **Uses credits** 가 붙은 수정은 빌더로 넘어가요.

## 게시하거나 마음을 바꾸거나

- 게시하기 전에는 아무것도 라이브로 나가지 않아요. 초안에는 변경을 최대 300개까지 담을 수 있어요.
- **Publish** 는 변경 사항을 사이트 코드에 반영해 새 버전으로 게시해요. 보통 30초 정도 걸리고 크레딧은 쓰지 않아요. 게시하면 초안이 비워져요.
- 변경을 할 수 없으면 아무것도 게시되지 않고, 편집기가 어떤 것이 왜 안 되는지 알려 줘요.
- **Changes** 의 **Drop this change** 는 변경 하나를 없애요. ⋯ 메뉴의 **Discard draft** 는 사이트를 편집하는 모든 사람의 변경을 한꺼번에 버리고, 먼저 물어봐요.
- **History** 는 사이트의 버전 목록이에요. **Preview** 는 게시된 당시 모습을 보여주고, **Restore** 는 그 버전을 다시 라이브로 돌려요. 초안은 그대로 남아요. [버전, 실행 취소, 다시 실행](https://briks.dev/ko/docs/versions) 을 참고하세요.

## 키보드 단축키

| 키 | 하는 일 |
| --- | --- |
| Escape | 요소가 들어갈 곳을 고르거나, 입력한 글을 되돌려요. |
| 아래, 왼쪽, 오른쪽 화살표 | 안에 있는 첫 번째 요소나 바로 옆의 요소를 고르세요. |
| Enter 또는 더블클릭 | 요소에 들어갈 글을 입력해요. |
| ⌘B, ⌘I, ⌘K | 입력하면서 굵게, 기울임, 링크를 적용해요. |
| Alt와 위 또는 아래 화살표 | 이것이나 이 목록 항목을 옮겨요. |
| ⌘D, Backspace | 복제하거나 삭제해요. |
| ⌘Alt+C, ⌘Alt+V | 스타일을 복사하거나 붙여 넣어요. |
| A, C, P | 추가하거나, 댓글을 달거나, 페이지를 사용해 보세요. |
| ? | 모든 단축키를 보여줘요. |

Windows에서는 ⌘ 대신 Ctrl을 써요.

### 비주얼 에디터는 크레딧을 쓰나요?

여기서 하는 수정과 게시에는 크레딧이 들지 않아요. AI 항목만 들어요. 문구 다시 쓰기(최대 0.20 크레딧), 아직 저장되지 않은 대체 텍스트 작성(최대 0.10 크레딧), 그리고 빌더로 보내는 모든 요청이에요. 빌더로 보낸 요청은 수정으로 계산돼요.

### 누가 사용할 수 있나요?

유료 플랜 워크스페이스의 모든 사람이에요. Owner, Admin, Editor는 변경하고 게시할 수 있고, Viewer는 둘러보고 댓글을 남겨요.

### 왜 일부 글은 입력할 수 없나요?

이 글은 사이트 코드에서 계산되거나 다른 요소 사이에 들어 있어요. 각 부분을 따로 고르거나 빌더에게 요청하세요.

### 두 명이 동시에 편집할 수 있나요?

네. 초안 하나를 함께 쓰고, 바에서 서로를 볼 수 있어요. 내가 편집기를 연 뒤에 다른 사람이 초안을 바꾸면 편집기가 새로고침하라고 안내해요.

## 다음 글 읽기

- [프로젝트에서 작업하기 **수정 요청하는 방법** Briks에 글로 요청해 사이트를 바꾸는 방법: 말하는 법, 사진 추가, 변경 내용과 비용, 내부 페이지, 대기 요청, 잘못된 결과 고치기.](https://briks.dev/ko/docs/making-changes)
- [프로젝트에서 작업하기 **버전, 실행 취소, 다시 실행** 모든 제작과 변경이 사이트 버전으로 저장돼요. 변경을 취소하거나 다시 적용하고, 이전 버전을 그대로 되살려 게시해요. 크레딧은 묶이지 않아요.](https://briks.dev/ko/docs/versions)
- [사이트 기능 **미디어 라이브러리** 사진과 영상을 워크스페이스 미디어 라이브러리에 한 번 올리고, 프롬프트 상자에서 어느 프로젝트에든 넣으세요. 사진 교체는 무료예요.](https://briks.dev/ko/docs/media-library)
- [시작하기 **크레딧과 요금제** Briks 크레딧 안내: 50과 5 크레딧 보류, 작업량만큼 차감, 견적, 대기하는 제작, 0이 되면 생기는 일, 플랜별 포함량.](https://briks.dev/ko/docs/credits-and-plans)

아직 해결되지 않았나요?

프로젝트 이름과 기대했던 내용을 적어 [hello@briks.dev](mailto:hello@briks.dev) 로 보내 주세요. 스크린샷이 있으면 도움이 돼요.