화면 위에서 직접 고치기

말로 시키지 않고, 눈에 보이는 화면을 그대로 클릭하고 끌어서 고치는 방법이에요. 위치와 크기는 손이 빠르고, 내용과 구조는 말이 빠릅니다.

쉽게 말하면

진열대를 30cm 앞으로 빼고 싶을 때 인테리어 업자에게 전화하는 사장님은 없죠. 그냥 손으로 밀면 돼요. 반대로 "주방을 홀 반대편으로 옮기고 배관을 다시 깔아 주세요"는 손으로 못 해요. 사람을 불러야죠. 화면 고치기도 똑같아요. 밀면 되는 일은 손으로, 사람을 불러야 하는 일은 말로 합니다.

말로 시켰을 때
"가격을 3만원에서 3만 5천원으로 바꿔줘"

AI 요청 한 번을 쓰고, 결과가 다시 그려질 때까지 기다려요. 숫자 하나 바꾸는 일에는 과해요.

손으로 고쳤을 때
가격 글자를 더블클릭 → 3만 5천원 입력

화면 안에서 바로 처리돼요. AI를 부르지 않고, 고친 그대로 저장돼요.

바이브캠퍼스 스튜디오에서는 이 손 편집을 클릭해서 편집이라고 불러요. 미리보기 위쪽 도구 줄에 있어요. 스튜디오 화면이 낯설면 스튜디오 한 바퀴를 먼저 보고 오세요.

어느 쪽이 빠른가

기준은 하나예요. 눈으로 보고 손가락으로 가리킬 수 있으면 손이 빠르고, 문장으로 설명해야 하면 말이 빠릅니다.

고치고 싶은 것손으로말로
버튼을 조금 옮기기끌어서 놓으면 끝이에요"조금 왼쪽"이 몇 픽셀인지 설명이 안 돼요
사진 크기 줄이기모서리 손잡이를 끌어요굳이 요청까지 할 일이 아니에요
문구 한 줄 고치기더블클릭하고 바로 입력해요요청 한 번을 쓰게 돼요
색·여백·모서리 둥글기견본과 슬라이더로 눈으로 맞춰요감으로 말하면 원하는 값이 잘 안 나와요
없던 화면 한 장 추가손으로는 못 만들어요말로 시켜야 해요
예약·결제 같은 기능 붙이기손이 닿는 범위 밖이에요말로 시켜야 해요
문구 전체를 내 사업에 맞게한 줄씩 고치면 반나절이에요한 번에 맡기는 게 빨라요

한 줄로 외우기

위치·크기·색은 손. 내용·구조는 말. 이것만 기억해도 절반은 끝이에요. 헷갈리면 "이걸 전화로 설명할 수 있나"를 스스로 물어보세요. 설명이 길어지면 손으로 하는 게 맞아요.

화면 위에서 실제로 되는 것

클릭해서 편집을 켜면 미리보기가 편집판으로 바뀌어요. 웹사이트처럼 HTML로 만든 결과에서 열리고, 유료 요금제에서 풀리는 기능이에요.

  1. 1클릭하면 선택돼요. 테두리에 작은 손잡이 여덟 개가 붙고, 왼쪽 위에는 "제목" "사진" "버튼"처럼 무엇을 잡았는지 알려주는 이름표가 떠요.
  2. 2더블클릭하면 글자를 바로 입력해요. 워드에서 타자 치듯이 그 자리에서 고쳐요.
  3. 3모서리 손잡이를 끌면 크기가 바뀌어요. 여덟 방향 중 아무거나 잡아도 돼요.
  4. 4이름표를 잡고 끌면 자리를 옮겨요. 끌고 다니는 동안 얇은 삽입선이 나타나는데, 그 선이 "여기에 들어갑니다"라는 표시예요.
  5. 5오른쪽 클릭하면 메뉴가 열려요. 사진·영상 교체, 배경색, AI에게 맡기는 작업이 여기 있어요.

선택한 상태에서는 굵기·기울임·글자색·크기·정렬 도구가 뜨고, 여백·모서리 둥글기·그림자·투명도 같은 값은 슬라이더로 맞춰요. 화면 폭을 데스크톱·태블릿·모바일로 바꿔 가며 고칠 수도 있어요. 휴대폰 화면 이야기는 반응형(휴대폰 화면)에 따로 있어요.

손에 익으면 단축키가 훨씬 빨라요. Ctrl+D 는 복제, Ctrl+C 와 Ctrl+V 는 요소 복사와 붙여넣기, Ctrl+Shift+위아래 화살표는 순서 바꾸기, Esc 는 선택 해제예요. Shift 를 누른 채 클릭하면 여러 개를 한꺼번에 골라서 같이 지우거나 복제할 수 있어요.

영상이 멈춰도 놀라지 마세요

편집을 켜면 화면 안의 영상이 자동으로 멈춰요. 계속 재생되는 영상 위에서는 원하는 자리를 클릭하기가 어렵거든요. 편집을 닫으면 다시 재생돼요.

잘못 옮겼을 때 되돌리기

되돌리는 길이 세 개 있어요. 가까운 것부터 씁니다.

  1. 1Ctrl+Z. 편집기 안에서 방금 한 동작을 한 칸 되돌려요. 여러 번 누르면 계속 거슬러 올라가고, 되살리려면 Ctrl+Y 예요. 편집기 도구 줄에도 되돌리기·다시실행 버튼이 있어요.
  2. 2큰 영역을 지웠다면 화면 위에 뜨는 알림의 되돌리기. 화면의 3분의 1쯤을 덮는 큰 덩어리를 지우면, 되돌리기 링크가 달린 알림이 잠깐 떠요. 그 링크가 가장 빠른 길이에요.
  3. 3편집을 닫고 스튜디오의 되돌리기 버튼. 이번 편집을 통째로 없던 일로 하고 AI가 만들어 준 이전 판으로 돌아가고 싶을 때 써요.

두 되돌리기는 서로 다른 자예요

편집기 안의 Ctrl+Z 는 손동작 하나를 되돌려요. 촘촘한 자예요. 스튜디오의 되돌리기 버튼은 판 전체를 이전 버전으로 되돌려요. 성근 자예요. 손이 미끄러졌으면 앞의 것, 이번 작업 전체가 마음에 안 들면 뒤의 것이에요.

장면 1 · 끌었는데 제자리에서 살짝 밀리기만 한다

버튼을 아래 칸으로 옮기려고 끌었는데, 순서는 그대로고 위치만 조금 어긋났어요.

끌고 가는 동안 얇은 삽입선이 떴는지 보세요. 그 선이 뜬 자리에서 손을 떼야 순서가 바뀌어요. 선이 없는 자리에서 놓으면 편집기는 꽂을 자리를 못 찾았다고 보고, 대신 제자리 기준으로 조금 밀어 둡니다. 그게 "살짝 어긋난" 상태예요. Ctrl+Z 로 한 칸 되돌리고, 이번에는 선이 보일 때까지 천천히 끌어 보세요.

손으로 고친 뒤 다시 말로 시키면

결론부터 말할게요. 손으로 고친 판이 그대로 다음 요청의 출발점이 돼요. 손 편집은 저장되면서 지금의 코드 자체가 되니까요. 손댄 게 없던 일이 되지 않아요.

다만 AI 요청을 보내는 순간 편집기가 자동으로 닫혀요. AI가 새 결과를 써 넣는 동안 편집기가 옛 화면을 붙들고 있으면, 방금 나온 결과를 옛 화면으로 덮어써 버리기 때문이에요. 고장이 아니라 안전장치예요. 요청이 끝나면 다시 켜서 새 판 위에서 이어 고치면 돼요.

장면 2 · 두 시간 다듬은 뒤 새로 만들기를 눌렀다

손으로 두 시간 다듬어 놓고, 마음에 안 드는 부분이 있어서 새로 만들었어요. 다듬은 게 전부 사라졌어요.

이어서 고치기와 새로 만들기는 다른 길이에요. 이어서 고치면 지금 판을 출발점으로 삼지만, 새로 만들면 출발점 없이 처음부터 그려요. 손댄 걸 살리고 싶으면 "이 화면에서 가격표 부분만 바꿔줘"처럼 지금 판을 기준으로 부탁하세요. 요청 문장을 짜는 요령은 프롬프트에 정리돼 있어요.

저장은 알아서 돼요. 고칠 때마다 잠깐 뒤에 저장이 걸리고, 스튜디오에 저장 상태가 표시돼요. 편집을 닫을 때도 마지막 편집을 먼저 밀어 넣고 닫습니다. 바로 저장하고 싶으면 Ctrl+S 예요.

자주 묻는 것

Q. 편집을 켰는데 아무 반응이 없어요
편집기는 미리보기 화면 안에서 켜져요. 빌드가 무거우면 뜨는 데 몇 초 걸릴 수 있어요. 끝내 못 켜지면 스튜디오가 안내 문구를 띄우고 편집을 스스로 꺼요. 그때는 다시 시도하거나, 빌드를 한 번 새로 만들어 보세요.
Q. 손으로 고칠 때마다 AI 요청이 나가나요?
아니에요. 클릭·드래그·글자 입력·색 바꾸기는 화면 안에서 바로 처리돼요. AI에게 가는 건 오른쪽 클릭 메뉴에서 AI 작업을 골랐을 때예요. 다만 클릭해서 편집 기능 자체는 유료 요금제에서 열려요.
Q. 저장 버튼을 눌러야 하나요?
누르지 않아도 돼요. 고친 뒤 잠깐 지나면 저장돼요. 급하면 Ctrl+S 로 바로 저장할 수 있고, 편집을 닫을 때도 마지막 편집이 먼저 저장돼요.
Q. 사진을 제 가게 사진으로 바꾸려면요?
바꿀 사진에 오른쪽 클릭하고 이미지 교체를 고르면 돼요. 너무 큰 사진은 알맞게 줄여서 넣어 줘요. 사진 용량 이야기는 사진 가볍게 만들기에 있어요.
Q. 여러 개를 한꺼번에 옮기거나 지울 수 있나요?
Shift 를 누른 채로 여러 개를 클릭하면 함께 선택돼요. 그 상태에서 복제하거나 지울 수 있어요. 하나만 다시 남기려면 Esc 로 선택을 풀고 다시 고르면 돼요.
Q. 실수로 큰 영역을 지워 버렸어요
화면에 뜬 알림의 되돌리기를 먼저 눌러 보세요. 알림이 사라졌으면 Ctrl+Z, 그것도 지났으면 편집을 닫고 스튜디오의 되돌리기예요. 더 앞으로 돌아가야 하면 백업과 되돌리기를 참고하세요.

확인해 보세요

가격표의 숫자 하나만 바꾸려고 해요. 가장 빠른 길은?

하나 더

요소를 끌었는데 얇은 삽입선이 안 뜬 자리에서 손을 뗐어요. 어떻게 될까요?

직접 해보기

클릭해서 편집을 한 번 켜 보세요

만든 화면을 미리보기로 열고 위쪽 도구 줄에서 클릭해서 편집을 누르면 돼요. 글자 하나만 더블클릭해 고쳐 보면 감이 바로 와요. 마음에 안 들면 Ctrl+Z 로 되돌리면 됩니다.

스튜디오 열기

더 깊이 (안 읽어도 괜찮아요)

손으로 고친 건 어떻게 남나요 · 옮긴 자리·바꾼 색·키운 크기는 그 요소에 붙는 스타일 값으로 남아요. 저장할 때 편집기가 화면에 띄웠던 손잡이·이름표·안내 표시는 전부 걷어내고, 사장님 눈에 실제로 보이는 결과만 남겨서 저장해요. 그래서 내 것을 가지고 나가기로 코드를 받아 가도 편집기 흔적은 따라가지 않아요.

끌어놓기가 두 가지로 갈리는 이유 · 화면은 문서처럼 위에서 아래로 흐르는 구조예요. 그래서 원래 방식은 "흐름 안에서 자리 바꾸기"이고, 삽입선이 그 자리를 미리 보여줘요. 흐름 밖 아무 데나 놓으면 그 구조가 깨지니까, 편집기는 대신 제자리 기준 미세 이동으로 처리해요. 이 미세 이동은 픽셀이 아니라 비율로 기록돼서, 보는 사람 화면 폭이 달라져도 덜 틀어져요.

왜 되돌리기를 두 겹으로 뒀나 · 편집기 안 되돌리기는 손동작 단위라 촘촘하지만 편집기를 닫으면 사라져요. 스튜디오 되돌리기는 판 단위라 성글지만 AI 빌드 이전까지 거슬러 갈 수 있어요. 촘촘한 자 하나로 모든 걸 하려면 기록이 너무 커지고, 성근 자 하나만 두면 오타 한 번에 판을 통째로 되돌려야 해요. 그래서 둘 다 들고 있어요.

이것만 기억하세요

  • ·위치·크기·색은 손이 빠르고, 내용·구조는 말이 빠릅니다
  • ·클릭은 선택, 더블클릭은 글자 입력, 오른쪽 클릭은 메뉴예요
  • ·끌 때는 얇은 삽입선이 뜬 자리에서 손을 떼요
  • ·되돌리기는 Ctrl+Z, 큰 삭제는 알림의 되돌리기, 판 전체는 스튜디오 되돌리기
  • ·손으로 고친 판이 그대로 다음 AI 요청의 출발점이 돼요
VibeCampus新規ビルド