Web 담당자가 없는 소규모 기업이라도, 회사 소개를 중심으로 한 홈페이지라면 AI와 대화하며 직접 만들 수 있습니다.

하지만 AI에게 처음부터 "회사의 사이트를 만들어줘"라고만 부탁하면, 사실이 아닌 실적을 추가하거나, 페이지마다 디자인이 바뀌거나, 공개할 수 없는 구조를 선택하는 등의 실수를 하기 쉽습니다.

이 기사에서는 작은 B2B 서비스 회사를 예로 들어, 회사 정보 정리, 디자인 선택, Next.js를 이용한 제작, 공개 전 확인, MCP 설치, 24시간 프리뷰 URL로의 공개까지 순차적으로 진행합니다. 프로그래밍 지식은 전제로 하지 않습니다. AI에게 붙여넣을 문장을 중심으로 설명합니다.

이번에 만드는 것

첫 홈페이지는 다음 정보를 한 페이지에 정리합니다.

• 어떤 것을 제공하는 회사인가
• 누구의 어떤 문제를 해결하는가
• 주요 서비스
• 선택받는 이유
• 회사 개요
• 문의 방법

예약, 결제, 회원가입, 고객 데이터 저장은 만들지 않습니다. 필요하다면 외부 폼, 예약, 결제 서비스로 링크합니다. 회사 정보를 보여주는 부분을 정적 사이트 (Static Site)로 만들면, 공개할 파일을 확인하기 쉽고 서버나 데이터베이스 (Database) 관리도 필요 없습니다.

시작하기 전에 준비할 것

필요한 것은 파일을 읽고 쓸 수 있으며 MCP에 대응하는 AI 도구, Node.js와 npm을 사용할 수 있는 컴퓨터, 공개해도 좋은 회사 자료입니다. 게재할 사진이나 로고는 자사에서 권리를 확인할 수 있는 것만 준비합니다.

Node.js가 설치되어 있는지 모르는 경우에는, 먼저 AI에게 다음 확인을 요청하세요.

이 컴퓨터에서 Next.js 정적 사이트를 만들 수 있는지 확인해 주세요.
먼저 node --version과 npm --version을 조사하고, 결과를 이해하기 쉬운 일본어로 설명해 주세요.
부족한 경우에는 공식 입수처와 필요한 작업만 안내하고,
...

이 확인에는 회사 자료가 필요하지 않습니다. 고객 명부, 계약서, 견적서 등 공개하지 않을 자료는 사이트용 폴더에 넣지 마세요.

1. AI를 작업 안내역으로 만들기

먼저 평소 사용하는 AI 도구로 사이트용 폴더를 엽니다. 새로운 대화에 다음 문장을 보내세요.

저는 소규모 기업의 책임자이며, AI를 사용하여 일반 공개할 수 있는 기업 사이트를 만들고 싶습니다.
기술에 익숙하지 않은 이용자로 취급하여, 매번 하나의 작은 단계만 안내해 주세요.
각 단계에서는 준비할 것을 먼저 설명하고, 그 후에 복사할 수 있는 프롬프트 (Prompt)를 제시해 주세요.
...

여기서 "하나씩 진행하기", "사실을 지어내지 않기", "멋대로 공개하지 않기"의 3가지를 먼저 결정합니다.

2. 회사의 사실 관계 정리하기

AI가 문장을 다듬을 수는 있지만, 회사의 사실 관계를 결정할 수는 없습니다. 다음 표를 직접 채웁니다. 미확정 항목은 빈칸으로 두지 말고 "확인 필요"라고 적으세요.

표를 채웠다면 대괄호를 교체하여 AI에게 보냅니다.

저는 [업종] 회사의 책임자입니다. 회사명은 [회사명]이며,
주로 [대상 고객]에게 [제품 또는 서비스]를 제공하고 있습니다.
고객에게 자주 발생하는 문제는 [문제]이며, 경쟁사와의 차이점은 [차이]입니다.
...

AI의 구성안에 준비할 수 없는 사례나 설명할 수 없는 강점이 포함되어 있다면 삭제합니다. 페이지 수를 늘리는 것보다 1페이지의 내용을 올바르게 만드는 것이 우선입니다.

3. 디자인 방향을 하나 선택하기

백지 상태에서 "멋지게 해줘"라고 부탁하면 결과가 안정되지 않습니다. 이번에는 Web 사이트 제작 가이드의 프롬프트 툴박스 (Prompt Toolbox)에 수록된 "미니멀리즘 & 스위스 스타일"을 사용합니다. 여백, 글자의 크고 작음, 그리드 (Grid), 흑백을 기본으로 하기 때문에 B2B 서비스 설명을 정리하기 쉬운 방향입니다.

다음 이미지는 기사용으로 로컬 저장한 참고도입니다. 회사명, 문장, 수치, 화면을 복사하는 것이 아니라 여백, 글자의 계층, 색상 수, 구분 방식만을 참고합니다.

AI 도구가 이미지를 읽을 수 있는 경우에는 이 이미지를 대화에 첨부한 후 다음 지시를 보냅니다. 읽을 수 없는 경우에는 문장만으로도 괜찮습니다.

첨부한 참고 이미지는 내용을 복사하지 말고 시각적 방향으로만 사용해 주세요.
미니멀한 기업용 랜딩 페이지 (Landing Page)를 설계해 주세요.
- 충분한 여백
...

기존 로고나 회사 색상이 있는 경우에는 AI의 제안보다 자사의 규칙을 우선합니다. 참고 이미지에 있는 가상의 수치나 서비스 설명은 사용하지 않습니다.

4. 정적 사이트로 만들 조건을 전달하기

이번에는 Next.js의 App Router를 사용하여 완성 후 정적 파일 (Static Files)을 생성합니다. 링크나 메뉴 등 브라우저 내에서 동작하는 작은 조작은 사용할 수 있습니다. 반면, 로그인, 데이터베이스, 독자적인 예약 관리 등 접속할 때마다 서버 처리 (Server Processing)가 필요한 기능은 넣지 않습니다.

디자인 규칙을 확인한 후, 다음 지시를 보냅니다.

Next.js App Router로 기업 사이트를 구축하고, output: 'export'로
순수한 정적 파일을 생성할 수 있도록 해주세요.
페이지, 이미지, 내비게이션, 브라우저 내의 작은 조작은 사용할 수 있습니다.
...

AI가 예약이나 문의를 위한 서버 기능을 만들려고 하면, 거기서 멈추게 하세요. "문의 버튼을 통해 기존의 외부 폼 (Form)으로 이동한다"와 같이, 회사가 관리할 수 있는 범위로 되돌리도록 요청합니다.

5. 홈페이지를 하나씩 구현하기

제약 사항 설명에 문제가 없다면, 홈페이지만 만드는 단계입니다.

방금 확인한 회사 정보와 디자인 규칙을 사용하여, 홈페이지만 구현해 주세요.
모든 페이지를 동시에 만들지 마세요.
홈(Home)에는 다음을 포함합니다.
...

표시된 페이지를 보고, 문장과 사실을 먼저 수정하십시오. 색상이나 움직임을 계속 조정하기 전에 확인하고 싶은 것은, "누구를 위한 회사이며, 무엇을 상담할 수 있는지"가 첫 화면에서 바로 보이는 것입니다.

필요하다면 "서비스", "회사 소개", "자주 묻는 질문 (FAQ)"을 하나씩 추가할 수 있습니다. 실제 자료가 없는 "도입 사례"나 "고객 리뷰"는 만들지 마세요.

6. AI의 확인과 본인의 확인을 분리하기

완성되면, AI에게 기술적인 면을 확인하게 합니다.

현재의 Next.js 정적 사이트를 공개 전에 확인해 주세요.
결과를 "AI가 확인 완료"와 "본인이 확인해야 할 사항"으로 나누어 주세요.
AI는 다음을 확인해 주세요.
...

Next.js의 정적 빌드 (Static Build)가 성공하면, 통상적으로 out 폴더가 생성됩니다. 이것이 공개 대상입니다. 소스 코드 폴더 전체를 공개하는 것이 아닙니다.

본인이 확인하는 항목은 AI의 "문제 없음"을 그대로 신뢰하지 말고, 직접 열어서 확인합니다.

• 회사명, 주소, 영업시간이 정확한가
• 전화, 이메일, 폼이 담당자에게 전달되는가
• "확인 필요"나 임시 문구가 남아 있지 않은가
• 가격, 자격, 실적을 증명할 수 있는가
• 사진, 로고, 고객명을 공개할 허가가 있는가
• 스마트폰에서 글자와 버튼을 읽을 수 있는가

7. Sakupa MCP를 설치하기

여기서부터는 필자가 개발 중인 Sakupa MCP를 공개 사례로 사용합니다. 정적인 공개 대상을 분석하고, 본인 확인 후에 24시간 프리뷰 URL을 만드는 MCP 서버입니다. 이 글에서는 유료 계약이나 독자 도메인 설정은 다루지 않습니다.

MCP에 대응하는 AI 도구에 다음 공식 설치용 프롬프트를 그대로 붙여넣습니다.

현재의 AI 도구에서 다음 설정을 사용하여 최신 버전의 Sakupa MCP를 설치하고 활성화해 주세요:
{
"mcpServers": {
...

설치가 완료된 후에는 AI 도구를 일단 종료했다가 재시작하십시오. 재시작하지 않으면 새로 추가한 MCP가 로드되지 않아 Sakupa 도구를 사용할 수 없는 경우가 있습니다.

재시작 후, 사이트의 프로젝트 폴더를 다시 열고 AI에게 다음과 같이 확인합니다.

Sakupa MCP가 연결되었는지, init, analyze, deploy를 사용할 수 있는지 확인해 주세요.
아직 사이트 초기화, 분석, 공개는 실행하지 마세요.
사용할 수 없는 경우, Sakupa의 MCP 설정이 로드되었는지 확인해 주세요.

3가지 도구를 사용할 수 있음을 확인할 때까지 다음 공개 작업으로 진행하지 않습니다. 단순히 터미널에서 npx를 실행하는 것만으로는 AI 도구의 MCP 설정에 등록되지 않습니다.

8. 공개하기 전에 MCP로 분석하기

재시작 후 사이트의 프로젝트 폴더를 다시 열고, Sakupa MCP의 연결을 확인한 상태에서 다음 지시를 보냅니다.

이 워크스페이스의 루트를 Sakupa 프로젝트로 초기화해 주세요.
다음으로, 공개 폴더를 out으로 하여 정적 사이트를 분석해 주세요.
아직 공개하지 마세요.
...

init은 현재 열려 있는 워크스페이스를 대상으로 하며, .sakupa/project.json을 만듭니다. 이 시점에서는 공개 URL을 만들지 않고, 클라우드로 파일을 보내지 않습니다. analyze 또한 읽기 전용이며, out이 정적 사이트로서 공개 가능한지를 확인합니다.

분석(Analysis)에서 에러가 발생했다고 해서 deploy를 반복해서는 안 됩니다. 먼저 AI에게 Sakupa의 help를 사용하게 하여 원인에 대한 설명을 요구하세요.

9. 확인 후 프리뷰 URL로 공개하기

분석 결과와 out의 내용에 문제가 없다면, 다음 지시로 넘어갑니다.

Sakupa에서, 공개 폴더(out)를 프리뷰 URL로 공개할 준비를 해주세요.
먼저, 외부로 전송할 파일, 공개 폴더, URL의 유효 시간을 설명해 주세요.
최초 공개에 필요한 확인 사항이 표시되면, 아직 계속하지 말고 나의 답변을 기다려 주세요.

최초의 deploy 시에는 24시간 동안 공개되는 URL을 생성해도 되는지 확인을 받게 됩니다. 내용을 읽고 공개해도 괜찮다면, AI에게 명확하게 "공개해도 좋다"라고 답변하세요. 그 확인 후에 한하여, MCP가 out만을 전송하여 프리뷰 URL을 발행합니다.

공개 후에는 해당 URL을 스마트폰과 PC에서 열어보세요. 사내의 다른 사람에게도 회사 정보와 문의처를 확인해 달라고 요청하면 오류를 발견하기 쉽습니다.

최초 공개 후에 생성되는 .sakupa/site.json은 해당 사이트를 업데이트하기 위한 관리 정보입니다. 웹상에 공개하거나 공개 리포지토리(Repository)에 넣지 마세요. AI에게 다음 내용이 .gitignore에 있는지 확인시킵니다.

.sakupa/

무료 프리뷰는 확인용 임시 URL입니다. 본 운영, 독자 도메인(Custom Domain), 지속 공개로 진행할지는 실물을 확인한 후 별도로 판단합니다.

자체 제작 범위를 넓히지 않는 것이 좋은 경우

다음 기능이 사업의 중심이라면, 회사 안내 사이트와는 별개의 시스템으로 생각해야 합니다.

• 고객별 로그인 및 권한 관리
• 신용카드 결제
• 고객 정보, 계약 정보, 진료 정보 저장
• 재고 및 주문의 실시간 연동
• 독자적인 예약枠(Slot) 관리
• 장애가 영업 중단으로 이어지는 기능

외부의 전용 서비스를 사용하거나 전문가를 포함하여 설계하세요. AI로 화면을 만들 수 있는 것과 회사가 안전하게 운영할 수 있는 것은 별개의 문제입니다.

소규모 기업의 첫 홈페이지에서는 기능의 많음보다 정확한 회사 정보, 읽기 쉬운 설명, 오류 없는 문의처가 중요합니다. 디자인 참고와 AI의 작업력을 빌리되, 사실 확인과 공개 판단은 회사 측에 남겨둡니다. 이러한 역할 분담이라면 대표자 스스로도 공개까지 진행할 수 있습니다.

참고 자료

• Next.js: Static Exports (2026년 8월 1일 확인)
• MDN: What is a web server? (2026년 8월 1일 확인)
• Sakupa 웹사이트 제작 가이드 (2026년 8월 1일 확인)
• Sakupa MCP 설치 및 공개 절차 (2026년 8월 1일 확인)
• Zenn 커뮤니티 가이드라인 (2026년 8월 1일 확인)

본문의 구성과 퇴고에는 생성 AI를 사용했습니다. 제품 사양, 프롬프트(Prompt), 공개 절차는 2026년 8월 1일 시점의 공식 자료와 구현을 통해 확인했습니다.

Discussion