MENU
DOC › IBIGENT Studio › MCP 사용방법 [ 홈페이지 제작방법 ]

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히어로의 핵심 제목·설명 문구메인문구
CTACall to Action사용자의 행동을 유도하는 요소링크버튼, 이동버튼
CTA 버튼CTA Button무료로 시작하기, 상담 신청 등의 핵심 버튼메인버튼
섹션Section페이지를 목적별로 나눈 영역단락, 칸, 블록
콘텐츠 섹션Content Section서비스·회사소개 등 콘텐츠 영역내용영역
피처 섹션Features Section주요 기능·장점을 소개하는 영역기능배너
카드Card이미지+제목+설명 등의 묶음박스, 사각박스
카드 그리드Card Grid여러 카드를 배열한 영역박스목록
배너Banner광고·프로모션·공지 등을 강조하는 영역모든 큰 이미지를 배너라고 부르는 것
프로모션 배너Promo Banner할인·이벤트·캠페인 안내이벤트 이미지
슬라이더Slider / Carousel여러 콘텐츠를 좌우 전환하는 UI롤링배너
탭Tabs같은 영역에서 콘텐츠를 전환선택메뉴
아코디언Accordion클릭하면 내용이 펼쳐지는 UI펼침메뉴
FAQFAQ자주 묻는 질문질문게시판
폼Form문의·신청·회원가입 입력 영역입력창
푸터Footer회사정보·약관·저작권 등의 최하단 영역하단바
사이드바Sidebar본문 좌/우의 보조 영역옆메뉴
브레드크럼Breadcrumb홈 > 서비스 > 요금제 같은 현재 위치 표시경로메뉴
모달Modal현재 화면 위에 뜨는 대화형 창팝업창
팝업Popup공지·광고 등을 별도 표시하는 요소모달과 구분 필요
플로팅 버튼Floating Button화면에 고정되어 따라다니는 상담 등의 버튼따라다니는 버튼
스티키 헤더Sticky Header스크롤해도 상단에 고정되는 헤더고정메뉴
AI 도구가 참고하는 상세 형식은 위 마크다운(.md) 원문 에 있습니다.
연결 방법: MCP 연결 (전체) · 제품 소개: IBIGENT Studio