MCP 사용방법 [ 홈페이지 제작방법 ]
연결이 끝났다면, 이제 말로 홈페이지를 바꿀 수 있습니다. 메뉴 이름과 순서, 게시판 만들기, 로고까지. 바뀌기 전에 편집 화면에서 확인하시고 [적용] 을 누르시면 반영됩니다.
AI 도구용 마크다운(.md) 원문 보기1. 편집 화면을 열어 두고 말씀하세요
비전트 AI 호스팅과 비전트 AI 빌더 호스팅 모두 코드가 필요 없습니다. 편집 화면을 열어 두시고 그대로 말씀하시면 됩니다.
맨 위 사진 두 장 자리 바꿔줘
편집 화면에 6자리 코드가 보이는 예전 빌더는 관리자 화면 [패치 받기] 후 코드 없이 됩니다. 그 전까지는 코드를 말 앞에 붙여 주세요(예: Z8QSSX 제품 소개 페이지 만들어줘).
2. 화면 만들기
편집 화면을 열어 두신 바로 그 자리에 만들어집니다. 어느 편집기를 열어 두셨는지에 따라 만들어지는 곳이 달라집니다.
| 열어 두신 편집기 | 만들어지는 곳 | 이렇게 말씀하시면 됩니다 |
|---|---|---|
| 빌더 · 메인 히어로 | 첫 화면 맨 위 | 카페 메인 히어로 만들어줘. 따뜻한 톤으로 |
| 빌더 · 서브 히어로 | 하위 페이지 맨 위 | 회사소개 서브 히어로 만들어줘 |
| 빌더 · 메인 컨텐츠 | 첫 화면 안의 섹션 하나 | 사업 소개 섹션 만들어줘 |
| 빌더 · 바디 컨텐츠 | 내용 페이지 하나 | 오시는 길 페이지 만들어줘 |
| 빌더 · 푸터 | 맨 아래 회사정보 | 푸터에 전화번호 넣어줘 |
| 비전트 AI 호스팅 | 홈페이지 전체 또는 일부 | 병원 홈페이지 만들어줘. 깔끔하게 |
부분 변경하기 도 됩니다. 편집 화면에서 고치고 싶은 부분을 먼저 누르신 뒤 이 부분 문구만 바꿔줘 처럼 말씀하시면 그 부분만 바뀝니다.
채팅창 「도구」 에서 전체 변경하기 · 부분 변경하기 를 고르실 수 있습니다.
3. 메뉴 · 게시판 · 로고 바꾸기
이용 중이신 제품에 맞춰 보시면 됩니다.
빌더 (스마트빌더)
메뉴마다 페이지와 게시판을 두는 홈페이지입니다.
| 하고 싶은 일 | 이렇게 말씀하시면 됩니다 |
|---|---|
| 게시판 만들기 | 고객센터에 포토갤러리 만들어줘 |
| 게시판 만들기 | 고객지원에 상담게시판 만들어줘 |
| 메뉴 이름 바꾸기 | 자료실을 공지사항으로 바꿔줘 |
| 메뉴 감추기 | 자료실 안 보이게 해줘 |
| 메뉴 다시 보이기 | 자료실 다시 보이게 해줘 |
| 메뉴 순서 | 회사소개를 앞으로 옮겨줘 |
| 로고 글자 | 로고를 이노건설로 바꿔줘 |
| 로고 모양 | 로고 조금 크게, 진하게 해줘 |
| 로고 글꼴 | 로고 글꼴 부드러운 걸로 바꿔줘 |
| 로고 그림 | 로고 그림 바꿀래 |
| 서브메뉴 페이지 추가 | 회사소개 아래에 찾아오시는 길 페이지 만들어줘 |
| 서브메뉴 이름 바꾸기 | 회사소개 밑에 연혁을 회사연혁으로 바꿔줘 |
| 푸터 회사정보 | 푸터 전화번호를 02-123-4567 로 바꿔줘 |
| 블로그 글 | 신제품 출시 소식으로 블로그 글 초안 써줘 |
| 새 홈페이지 만들기 | 회사 소개 자료로 홈페이지 새로 만들어줘 |
| 내용페이지 추가 | 이 자료로 대표 인사말 페이지 만들어줘 |
만들 수 있는 게시판 — 게시판 · 포토갤러리 · 견적문의 · 온라인상담 · FAQ · 연혁 · 주요일정. 바꾸면 사이트에 바로 반영되고 편집 화면에 [되돌리기] 가 뜹니다. 블로그 글은 초안으로 저장됩니다. 새 홈페이지와 내용페이지는 AI 가 정리한 자료가 「새 홈페이지 제작」·「내용페이지 추가」 창에 채워지고, 확인하신 뒤 [다음] 을 누르시면 아이비전트 디자인으로 만들어집니다. 새 홈페이지를 만들어도 기존 게시판과 글은 그대로 남습니다. 내용페이지 추가는 내용페이지 편집 화면을 열어 두셔야 합니다.
비전트 AI 호스팅
한 페이지 안에서 내려가며 보는 홈페이지와, 메뉴 아래에 하위 페이지를 두는 홈페이지가 있습니다.
| 하고 싶은 일 | 이렇게 말씀하시면 됩니다 |
|---|---|
| 화면 읽기 | 지금 편집 화면에 뭐가 있는지 정리해줘 |
| 문구 고치기 | 첫 화면 큰 제목을 봄맞이 할인으로 바꿔줘 |
| 선택한 부분 | 고른 문장만 초록색으로 해줘 |
| 사진 바꾸기 | 두 번째 섹션 사진을 밝은 매장 사진으로 바꿔줘 |
| 섹션 추가 | 요금표 섹션 만들어서 후기 아래에 넣어줘 |
| 메뉴 보기 | 상단 메뉴 목록 보여줘 |
| 메뉴 추가 | 메뉴에 요금안내 추가해서 요금표로 연결해줘 |
| 메뉴 이름 바꾸기 | 서비스를 하는 일로 바꿔줘 |
| 메뉴 순서 | 후기를 요금안내 앞으로 옮겨줘 |
| 메뉴 정리 | 이벤트 메뉴 빼줘 |
| 하위 메뉴 추가 | 진료 안내 메뉴 아래에 임플란트 페이지 추가해줘 |
| 내용페이지 추가 | 원장 약력 자료로 의료진 소개 페이지 채워줘 |
| 로고 글자 | 로고를 하늘치과로 바꿔줘 |
| 로고 모양 | 로고 글자 조금 작게, 남색으로 해줘 |
| 로고 글꼴 | 로고 글꼴 또렷한 고딕으로 바꿔줘 |
| 로고 그림 | 로고를 그림 파일로 넣을래 |
| 푸터 글자 | 푸터 주소를 새 사무실 주소로 바꿔줘 |
하위 메뉴 추가와 내용페이지 추가는 메뉴 아래에 하위 페이지를 두는 홈페이지에서 됩니다. 상담·문의는 편집 화면의 「문의 접수」를 켜면 받을 수 있습니다.
4. 바로 반영되고, [되돌리기] 로 되돌립니다
편집 화면의 한 부분을 고치면 누를 필요 없이 편집 화면에 바로 반영되고, 아래에 [되돌리기] 알림이 뜹니다. 편집 화면 내용은 저장하셔야 실제 사이트에 반영됩니다.
빌더의 메뉴 · 서브메뉴 · 페이지 · 로고 · 푸터 회사정보는 사이트에 바로 반영되고 [되돌리기] 알림이 뜹니다. 블로그 글은 초안으로 저장됩니다.
비전트 AI 호스팅의 상단 메뉴와, 코드가 보이는 예전 빌더는 채팅창에 바뀔 내용이 먼저 나오고 [적용] 을 누르시면 반영됩니다.
로고 그림을 바꾸실 때는 「내 로고 불러오기」 가 뜹니다. 가지고 계신 파일을 고르시면 원본 비율 그대로 넣어 드립니다.
JPG · PNG · WEBP · GIF · 5MB 이하 (배경이 투명한 PNG 를 권합니다)
5. 홈페이지 용어 (참고)
홈페이지를 만들 때 쓰는 표준 용어입니다. AI 에게 말씀하실 때 이 말을 쓰시면 더 정확하게 알아듣습니다.
| 권장 용어 | 영문 | 정확한 의미 | 피하는 게 좋은 표현 |
|---|---|---|---|
| 헤더 | Header | 로고·메뉴·로그인 등이 있는 최상단 영역 | 상단바, 상단영역 |
| 내비게이션 | Navigation / Nav | 주요 메뉴 체계 | 메뉴바, 상단메뉴바 |
| 히어로 섹션 | Hero Section | 첫 화면의 가장 핵심적인 대형 영역 | 메인이미지, 대문, 메인배너 |
| 히어로 이미지 | Hero Image | 히어로 영역의 대표 이미지 | 메인배너 이미지 |
| 히어로 카피 | Hero Copy | 히어로의 핵심 제목·설명 문구 | 메인문구 |
| CTA | Call to Action | 사용자의 행동을 유도하는 요소 | 링크버튼, 이동버튼 |
| CTA 버튼 | CTA Button | 무료로 시작하기, 상담 신청 등의 핵심 버튼 | 메인버튼 |
| 섹션 | Section | 페이지를 목적별로 나눈 영역 | 단락, 칸, 블록 |
| 콘텐츠 섹션 | Content Section | 서비스·회사소개 등 콘텐츠 영역 | 내용영역 |
| 피처 섹션 | Features Section | 주요 기능·장점을 소개하는 영역 | 기능배너 |
| 카드 | Card | 이미지+제목+설명 등의 묶음 | 박스, 사각박스 |
| 카드 그리드 | Card Grid | 여러 카드를 배열한 영역 | 박스목록 |
| 배너 | Banner | 광고·프로모션·공지 등을 강조하는 영역 | 모든 큰 이미지를 배너라고 부르는 것 |
| 프로모션 배너 | Promo Banner | 할인·이벤트·캠페인 안내 | 이벤트 이미지 |
| 슬라이더 | Slider / Carousel | 여러 콘텐츠를 좌우 전환하는 UI | 롤링배너 |
| 탭 | Tabs | 같은 영역에서 콘텐츠를 전환 | 선택메뉴 |
| 아코디언 | Accordion | 클릭하면 내용이 펼쳐지는 UI | 펼침메뉴 |
| FAQ | FAQ | 자주 묻는 질문 | 질문게시판 |
| 폼 | Form | 문의·신청·회원가입 입력 영역 | 입력창 |
| 푸터 | Footer | 회사정보·약관·저작권 등의 최하단 영역 | 하단바 |
| 사이드바 | Sidebar | 본문 좌/우의 보조 영역 | 옆메뉴 |
| 브레드크럼 | Breadcrumb | 홈 > 서비스 > 요금제 같은 현재 위치 표시 | 경로메뉴 |
| 모달 | Modal | 현재 화면 위에 뜨는 대화형 창 | 팝업창 |
| 팝업 | Popup | 공지·광고 등을 별도 표시하는 요소 | 모달과 구분 필요 |
| 플로팅 버튼 | Floating Button | 화면에 고정되어 따라다니는 상담 등의 버튼 | 따라다니는 버튼 |
| 스티키 헤더 | Sticky Header | 스크롤해도 상단에 고정되는 헤더 | 고정메뉴 |
