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

#열기

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

#바꿀 대상 고르기

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

마우스 오른쪽 버튼 메뉴

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

#글과 링크

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

#모양

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

색상은 사이트 자체의 역할에 따라 정해지고 따로 정한 색이 없어서, 사이트 전체가 함께 맞춰져요. 패널에서 설정하지 않은 클래스는 그대로 유지되며 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는 그 버전을 다시 라이브로 돌려요. 초안은 그대로 남아요. 버전, 실행 취소, 다시 실행을 참고하세요.

#키보드 단축키