클릭 편집과 AI 디자인 어시스턴트

완성된 필라테스 예약 사이트가 있습니다. 그런데 제목이 2퍼센트 아쉽고, 버튼이 조금 작고, 사진이 살짝 왼쪽으로 치우쳐 있습니다. 예전 같으면 개발자에게 목록을 적어 보내고 며칠을 기다렸겠죠. 이 코스가 끝나면 여러분이 그 자리에서 직접 고칩니다. 클릭하고, 끌고, 놓으면 끝입니다.

바이브캠퍼스의 편집은 두 개의 손을 줍니다. 하나는 클릭 편집. 요소를 직접 선택해 옮기고 바꾸는 정밀한 손입니다. 다른 하나는 AI 디자인 어시스턴트. 방향만 말하면 계획을 세워 전체를 바꿔 주는 큰 손입니다.

미리 말해 두면, 잘못 만져도 됩니다. 되돌리기가 항상 있으니까요. 이 코스에서는 마음껏 부수고 되돌리며 배웁니다.

빌드가 열린 상태에서 클릭해서 편집 버튼을 누르면 편집 모드가 켜집니다. 미리보기 위에 안내가 뜹니다. 클릭해서 선택, 더블클릭해서 입력, 우클릭으로 더보기. 이 세 동작이 편집의 전부입니다.

편집 모드에서는 미리보기가 캔버스로 변합니다. 마우스를 올리면 요소마다 테두리가 살짝 표시되어, 지금 무엇을 잡을 수 있는지 눈으로 알 수 있습니다. 사이트가 레고 블록처럼 만져지는 상태라고 생각하시면 됩니다.

다 고쳤으면 완료를 누르면 편집 모드가 닫히고 결과가 저장됩니다. 켜고, 만지고, 닫는다. 리듬은 이게 전부입니다.

고치고 싶은 글자를 더블클릭해 보세요. 그 자리가 바로 입력 상태로 바뀝니다. 제목, 버튼 문구, 가격, 소개글까지 화면에 보이는 텍스트는 전부 이렇게 그 자리에서 고칠 수 있습니다. 따로 편집 창을 열 필요가 없습니다.

한 번 클릭은 선택입니다. 선택된 요소에는 파란 테두리가 잡히고, 이 상태에서 옮기거나 크기를 바꾸거나 스타일을 다듬을 수 있습니다. 선택이 모든 편집의 출발점입니다.

원하는 요소가 아니라 그 부모(더 큰 덩어리)가 잡힐 때가 있습니다. 당황하지 말고 한 번 더 클릭해 보세요. 클릭할수록 더 안쪽의 요소로 선택이 좁혀집니다.

선택한 요소는 드래그로 옮길 수 있습니다. 사진을 잡아 오른쪽으로, 버튼을 잡아 중앙으로. 마우스에서 손을 떼는 곳이 새 자리가 됩니다.

선택 테두리의 모서리와 변에는 작은 점, 리사이즈 핸들이 붙어 있습니다. 이 핸들을 잡아 끌면 크기가 바뀝니다. 모서리 핸들은 가로세로를 함께, 변의 핸들은 한 방향만 조절합니다. 이미지는 비율이 깨지지 않게 모서리로 조절하는 것이 안전합니다.

옮기고 늘리는 것은 가장 직관적인 편집이지만, 가장 사고가 잦은 편집이기도 합니다. 한 번에 크게 바꾸지 말고 조금씩 움직이며 전체 균형을 보세요.

드래그가 감의 편집이라면 인스펙터는 정밀의 편집입니다. 요소를 선택하면 색상, 간격(안쪽 여백과 바깥 여백), 글꼴 크기와 굵기, 모서리 둥글기 같은 속성을 값으로 직접 조절할 수 있는 패널이 열립니다.

인스펙터가 빛나는 순간은 통일이 필요할 때입니다. 버튼 두 개의 크기가 미묘하게 다르다면, 눈대중 드래그 대신 두 요소의 값을 같은 숫자로 맞추면 완벽하게 통일됩니다. 프로 디자인의 비밀은 대단한 감각이 아니라 같은 숫자를 쓰는 규칙입니다.

색을 바꿀 때는 브랜드 컬러의 색상 코드를 직접 입력하세요. "대충 비슷한 파랑"이 쌓이면 사이트가 지저분해집니다. 정확한 코드 하나를 모든 곳에 쓰는 것이 일관성입니다.

여러 요소의 줄을 맞출 때는 정렬 도구를 쓰세요. 왼쪽 맞춤, 가운데 맞춤, 간격 균등 같은 정렬은 눈대중보다 언제나 정확합니다. 카드 세 장이 미묘하게 어긋나 있는 것과 자로 잰 듯 맞는 것의 차이는 방문자가 무의식중에 느낍니다.

선택한 요소는 키보드 방향키로도 움직일 수 있습니다. 마우스로는 어려운 1픽셀 단위의 미세 조정에 딱입니다. 크게는 드래그로, 마지막 한 끗은 방향키로. 이 조합이 손 편집의 완성형입니다.

삭제 키로 필요 없는 요소를 지울 수도 있습니다. 실수로 지웠다면 역시 되돌리기가 여러분 편입니다.

요소를 우클릭하면 그 요소를 대상으로 한 AI 액션 메뉴가 열립니다. 이 문단만 더 짧게, 이 섹션만 다시 디자인, 이 이미지 교체처럼, 전체가 아니라 지금 잡은 부분에만 AI를 부르는 기능입니다.

손 편집과 AI 액션의 분업은 이렇습니다. 위치, 크기, 색, 문구처럼 답을 내가 아는 수정은 손으로. "이 소개글을 더 매력적으로"처럼 답을 만들어야 하는 수정은 AI에게. 잡은 요소에 정확히 적용되니 다른 부분이 바뀔 걱정이 없습니다.

AI 액션은 일반 편집 요금으로 크레딧이 소모됩니다. 실행 전에 예상 소모가 표시되니 확인하고 진행하면 됩니다.

이번에는 큰 손입니다. AI 디자인 어시스턴트는 Pro 기능으로, 부분 수정이 아니라 디자인 전체의 방향 전환을 맡습니다. "사이트 전체를 더 고급스럽게, 색은 네이비와 골드로"처럼 목표를 적거나, 준비된 방향 버튼(더 고급스럽게, 더 밝고 친근하게, 브랜드를 더 강하게, 더 깔끔하고 미니멀하게, 폰트 조합 변경, 새 컬러 테마)에서 고르면 됩니다.

특별한 점은 바로 바꾸지 않는다는 것입니다. 어시스턴트는 먼저 몇 가지를 물어보고, 답을 반영한 계획을 보여 줍니다. 어떤 색을 어디에, 어떤 폰트를 왜, 무엇을 유지할지가 적힌 계획서죠. 여러분이 계획을 읽고 승인하면 그때 변경이 적용됩니다.

유지하고 싶은 것을 미리 말할 수도 있습니다. "후기 섹션은 그대로 두고, 가격 섹션을 추가해줘"처럼요. 갈아엎기가 아니라 지휘하기에 가깝습니다.

도구를 배웠으니 기준을 배울 차례입니다. 첫째, 대비. 중요한 것과 아닌 것이 확실히 달라야 합니다. 배경과 글자의 명암, 큰 제목과 작은 본문. 대비가 약하면 아무것도 눈에 들어오지 않습니다.

둘째, 위계. 시선이 이동할 순서를 디자인이 정해 줘야 합니다. 제목, 소개, 행동 버튼 순으로 크기와 색의 강약을 주면 방문자는 설계된 길을 따라 읽습니다. 모두 강조하면 아무것도 강조되지 않습니다.

셋째, 여백. 초보의 디자인은 채우고, 프로의 디자인은 비웁니다. 요소 사이의 빈 공간은 낭비가 아니라 고급스러움의 재료입니다. 답답해 보이는 화면은 대부분 여백 부족이 범인입니다.

구조와 내용은 마음에 드는데 분위기를 완전히 바꾸고 싶을 때가 있습니다. 이럴 때 전체 리스타일을 씁니다. AI 디자인 어시스턴트에 "내용과 구조는 유지하고 스타일만 미니멀 모노톤으로 전부 바꿔줘"처럼 요청하면, 레이아웃과 문구는 남고 색, 글꼴, 질감이 통째로 갈아입혀집니다.

리스타일 전후를 비교하며 보는 것도 공부가 됩니다. 같은 내용이 톤 하나로 얼마나 다른 사업처럼 보이는지, 브랜드에서 스타일이 차지하는 비중을 몸으로 알게 됩니다.

리스타일 뒤에는 세부 점검이 필요합니다. 전체가 바뀌는 큰 작업이라, 일부 버튼 색이나 사진 톤이 새 스타일과 어긋날 수 있습니다. 클릭 편집으로 마무리 다듬기를 해 주는 것까지가 리스타일입니다.

이제 여러분의 빌드로 실전입니다. 스튜디오에서 내 작업물 하나를 열고 편집 모드를 켜세요. 없다면 아무 템플릿에서 하나 만들어 시작해도 됩니다.

목표는 완벽한 디자인이 아니라 세 가지 손동작을 몸에 붙이는 것입니다. 고치기 전과 후를 비교할 수 있게, 시작할 때 화면을 한 번 눈에 담아 두세요.

편집은 자동으로 저장됩니다. 화면의 자동저장 표시가 여러분 대신 저장 버튼을 눌러 주고 있으니, 저장을 잊어 작업을 날릴 걱정은 내려놓아도 됩니다.

마음에 안 드는 변경은 되돌리기로 한 단계씩 취소할 수 있습니다. 그리고 큰 변경 전에는 스스로 돌아올 지점을 만들어 두는 습관이 프로의 습관입니다. 지금 상태가 좋다면 저장을 확인하고 나서 다음 실험을 시작하세요.

이 안전망의 진짜 의미는 실험할 용기입니다. 언제든 돌아올 수 있다는 확신이 있어야 과감한 시도가 나오고, 과감한 시도에서 좋은 디자인이 나옵니다.

이제 여러분은 사이트를 보다가 아쉬운 곳이 눈에 띄면 그 자리에서 고치는 사람입니다. 클릭 편집이라는 정밀한 손, AI 액션이라는 부분 지원, 디자인 어시스턴트라는 전체 지휘까지 세 단계의 도구를 다룰 수 있으니까요.

대비, 위계, 여백. 이 세 단어는 도구보다 오래갈 자산입니다. 앞으로 어떤 화면을 만들든 이 기준으로 보는 눈이 함께 갑니다.

다음 코스는 믿을 수 있는 결과물입니다. 보기 좋게 다듬은 결과물의 내용을 세상에 내보내도 되는지 검증하는, 출시 전 마지막 관문을 배웁니다.