가장 간단한 위챗 미니 프로그램 만들기

1. 위챗 미니 프로그램과 미니 프로그램 개발이란

이 튜토리얼에서는 하나의 완전한 사이클을 완성할 것입니다: 머릿속의 아이디어에서 위챗 안에서 QR 코드로 검색하고 열 수 있는 실제 미니 프로그램까지.

개발을 시작하기 전에 두 가지 기본적인 이해가 필요합니다.

첫째는 본질입니다: 위챗 미니 프로그램은 정확히 무엇인가? 일반 앱이나 웹사이트와 어떻게 다른가? 왜 그렇게 많은 제품이 이 형식을 선택하는가? 핵심 논리를 이해해야 아이디어가 미니 프로그램에 적합한지 판단할 수 있습니다.

둘째는 경로입니다: "미니 프로그램을 만들고 싶다"고 말할 때, 제로부터 런칭까지의 전체 경로는 어떻게 되는가? 그 경로의 핵심 노드는 무엇인가 - 아이디어 구상 시 고려할 점, 환경 설정 방법, AI 보조 개발이 효율성을 어떻게 높이는지, 시뮬레이터 디버깅에서의 함정, 테스트 계정과 정식 배포 각각이 해결하는 문제. 먼저 이 과정을 머릿속으로 실행해 보면, 구현 단계에서 길을 잃지 않을 것입니다.

이 두 가지 질문이 명확해지면 본격적인 개발에 들어갈 수 있습니다. 첫 번째 질문부터 시작해 보겠습니다: 위챗 미니 프로그램은 정확히 무엇인가?

1.1 위챗 미니 프로그램

위챗 미니 프로그램은 위챗 안에 사는 앱으로 볼 수 있습니다. 앱 스토어에서 검색하거나 다운로드, 설치할 필요가 없습니다. 사용자는 위챗에서 이름으로 검색하거나 QR 코드를 스캔하거나 공유 카드를 열어 즉시 사용할 수 있습니다. 사용 후에는 그냥 닫기만 하면 됩니다. 휴대폰 홈 화면이나 저장 공간을 영구적으로 차지하지 않습니다.

일반 사용자에게 미니 프로그램은 많은 "작은 작업"을 해결합니다: 배송 조회, 커피 주문, 주문 확인, 간단한 게임. 빠른 시작과 위챗 내의 통합된 진입점이 가장 큰 경험적 특징입니다.

기업과 개발자에게 미니 프로그램은 검색 및 공유 가능한 "작은 앱 형식"입니다. 위챗 공식 플랫폼에 등록하고 설정을 완료하며 심사를 통과하면, 미니 프로그램을 모든 위챗 사용자에게 공개할 수 있습니다. 전통적인 앱에 비해 첫 번째 사용자 그룹을 확보하기 쉬운데, 사람들이 이미 위챗에서 많은 작업을 하는 데 익숙해져 있기 때문입니다.

이 튜토리얼에서는 복잡한 비즈니스 시스템을 구축하지 않겠습니다. 클래식 예제를 선택합니다: 스네이크 게임. 작고 논리가 명확하지만, 미니 프로그램이 갖춰야 할 완전한 요소를 포함합니다: 여러 페이지, 간단한 인터랙션, 상태 변화, 점수 기록 등. 첫 번째 프로젝트로 완벽합니다.

1.2 위챗 미니 프로그램 개발

"미니 프로그램이란 무엇인가"를 이해한 후 다음 질문은: 개발한다는 것은 실제로 무엇을 의미하는가?

명확한 목표(예: 언제든 플레이할 수 있는 스네이크 게임)가 필요하고, 사용자가 볼 인터페이스를 디자인하고, 다양한 동작에서 발생해야 할 일을 정의하고, 마지막으로 배포합니다.

전통적인 개발에서는 프로그래머가 모든 단계를 주도하고 많은 코드를 작성합니다. AI 보조 개발에서는 이를 더 명확하게 나눌 수 있습니다: 원하는 것을 설명하면 AI가 대부분의 구현 세부 사항을 처리합니다. 이는 초보자에게 가장 중요한 기술이 구문을 암기하는 것이 아니라, 요구 사항을 명확히 설명하고 AI의 출력을 이해하는 것임을 의미합니다.

1.3 위챗 미니 프로그램을 개발하는 여러 가지 방법

실제 프로젝트에서는 다양한 기술 경로를 사용합니다. 처음부터 너무 많은 용어로 혼란스럽지 않도록, 대략적인 분류만 하겠습니다.

첫 번째 방법은 공식 네이티브 기능을 직접 사용하는 것입니다. 위챗 개발자 도구에서 프로젝트를 생성하면 페이지 구조, 스타일, 논리를 설명하는 고정된 파일 유형을 볼 수 있습니다. 이 방법은 공식 문서와 가깝고 강력한 제어력을 제공하지만, 처음 프론트엔드를 배우는 사람에게는 학습 곡선이 조금 가파릅니다.

두 번째 방법은 uni-app과 같은 크로스 플랫폼 프레임워크를 사용하는 것입니다. 주로 로컬에서 웹과 유사한 코드(예: .vue 파일)를 작성하면, 프레임워크가 이 코드를 위챗 미니 프로그램에서 실행할 수 있는 형식으로 변환합니다. 장점은 통합된 구조입니다. 나중에 다른 플랫폼(예: H5 또는 앱)에 배포할 때 변경 사항이 상대적으로 적습니다.

이 두 가지 방법을 바탕으로, 이 튜토리얼은 AI 보조 도구를 사용한 미니 프로그램 SOP에 초점을 맞춥니다. 예를 들어, 전체 프로젝트를 Trae에서 열고 내장 AI에게 직접 "이 파일에 제목과 버튼이 있는 홈페이지를 추가해 줘" 또는 "스네이크와 점수를 표시하는 게임 페이지를 만들어 줘"라고 말합니다. AI는 현재 프로젝트 컨텍스트를 기반으로 새 코드 조각을 생성하거나 기존 코드를 수정/리팩토링합니다.

이 세 가지 방법은 상호 배타적이지 않습니다. uni-app 프로젝트에서 빌드하면서 Trae AI를 사용하여 대부분의 코딩 작업을 수행할 수 있습니다. 핵심은 하나의 방법을 선택하는 것이 아니라, 현재 어디에 있는지, 어떤 도구를 사용할 수 있는지 아는 것입니다.

1.4 이 글에서 다루는 위챗 미니 프로그램 단계 (개요)

이 튜토리얼은 환경 설정부터 최종 제품까지의 흐름을 따릅니다. 스네이크 예제와 Trae 바이브코딩 스타일을 중심으로, 과정을 재사용 가능한 경로로 나눕니다. 이후 장에서 다음 단계를 거치게 됩니다:

1. 개념적 기초 구축: 미니 프로그램이 무엇인지, 일반적인 개발 방법은 무엇인지, 이 스네이크 미니 프로그램은 누구를 위한 것이고 어떤 시나리오에서 사용되는지 이해
2. 환경 준비: 미니 프로그램 계정 등록, HBuilderX, Trae, 위챗 개발자 도구 설치, HBuilderX로 기본 프로젝트 스켈레톤을 생성하여 위챗 개발자 도구에서 실행하고 가장 간단한 페이지 먼저 표시
3. 본격적인 개발 진입: Trae에서 프로젝트를 열고, 바이브코딩 대화를 통해 AI와 함께 홈페이지와 게임 페이지 레이아웃을 단계별로 생성하고, 스네이크 이동, 먹이 먹기, 게임 오버 등 핵심 게임플레이 구현
4. 핵심 기능이 실행된 후, AI를 "디버깅 및 리팩토링 파트너"로 사용: 버그를 진단하고, 코드가 복잡해지면 구조를 정리하며, 시작/일시정지, 최고 점수 기록, UI 폴리싱 등 세부 사항을 점진적으로 추가
5. 배포 진입: 프로젝트를 위챗에서 인식 가능한 버전으로 빌드, 위챗 개발자 도구에서 실제 기기 미리보기 및 테스트, 테스트 계정과 체험판으로 먼저 런칭하여 프로세스를 검증한 후, 등록 및 심사를 완료하여 정식 배포하여 다른 사람들이 미니 프로그램을 검색하고 플레이할 수 있게 함

이 섹션은 전체 지도만 그리며, 아직 명령이나 코드 세부 사항을 다루지 않습니다. 지금은 이 5단계를 기억하세요: 이해 -> 환경 설정 -> 바이브코딩 개발 -> 디버깅 및 폴리싱 -> 빌드 및 배포. 이후 장에서 각 단계를 확대하여, 무엇을 준비해야 하는지, AI에게 무엇이라고 말해야 하는지, 각 단계에서 화면에서 어떤 결과를 봐야 하는지 보여줄 것입니다.

2. 환경 준비

코드 한 줄을 작성하기 전에 먼저 환경을 준비합시다. 이 부분의 목표는 도구를 어디서 다운로드하는지, 왜 실행되지 않는지에 더 이상 막히지 않도록 하여, AI 대화와 요구 사항 구현에 바로 집중할 수 있게 하는 것입니다.

브라우저를 열고, 파일을 다운로드하고, 설치 프로그램을 더블클릭할 수 있다면 이 섹션을 완료할 수 있습니다.

2.1 이 튜토리얼에서 사용하는 세 가지 도구

스네이크 미니 프로그램 개발을 위해 세 가지 도구를 함께 사용하며, 각각 다른 역할을 담당합니다:

1. 첫 번째는 Trae입니다. AI가 통합된 코드 편집기로 생각하면 됩니다. 일반 IDE처럼 프로젝트 파일을 열 수 있고, 자연어로 AI와 채팅하여 코드를 생성, 수정, 설명할 수도 있습니다. 이 튜토리얼에서 대부분의 "AI로 미니 프로그램 만들기" 작업은 Trae에서 이루어집니다. https://www.trae.cn 에서 최신 버전을 다운로드하세요.
2. 두 번째는 HBuilderX입니다. Vue와 uni-app에 대한 강력한 지원을 제공하며, 즉시 사용할 수 있는 미니 프로그램 템플릿을 제공합니다. 이를 사용하여 기본 미니 프로그램 프로젝트를 "원클릭 생성"합니다 - Trae + AI에 넘기기 전의 기초 작업입니다. https://www.dcloud.io/hbuilderx.html 에서 다운로드하세요.
3. 세 번째는 위챗 개발자 도구입니다. 미니 프로그램을 개발하고 미리보기하는 공식 도구입니다. 데스크톱에서 프로젝트를 실행하고 모바일에서 실제 기기 디버깅을 지원합니다. https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 에서 다운로드하세요.

요약하면: HBuilderX가 기본 프로젝트를 빠르게 생성하고, Trae가 AI와 함께 코딩을 도우며, 위챗 개발자 도구가 실제 실행되는 미니 프로그램을 보여줍니다.

2.2 위챗 공식 플랫폼 계정 등록 및 AppID 받기

도구가 준비되어도 미니 프로그램 정체성이 필요하며, 이는 위챗 공식 플랫폼에서 생성됩니다. 미니 프로그램을 등록한 적이 없다면 다음 순서를 따르세요:

1. 브라우저에서 https://mp.weixin.qq.com을 입력하고, 위챗 공식 플랫폼을 열고 위챗으로 QR 코드를 스캔하여 로그인합니다.

2. 홈페이지에서 "미니 프로그램"을 선택하고 이메일, 전화번호, 실체 유형(개인 또는 기업)을 포함한 등록 안내를 완료합니다.
3. 등록에 성공하면 백엔드에 들어가 "개발 관리" 또는 "개발 설정"을 찾으면, AppID라는 고유 ID가 보입니다. 이것이 미니 프로그램의 정체성이며, 나중에 프로젝트 설정에 사용됩니다.

AppID를 쉽게 찾을 수 있는 곳에 저장하는 것이 좋습니다. 이후 섹션에서 이 값을 입력하여 로컬 프로젝트를 온라인 미니 프로그램에 매핑할 것입니다.

2.3 위챗 개발자 도구 설치

다음으로 미니 프로그램을 실제로 실행하고 미리보기할 장소가 필요합니다. 위챗 개발자 도구가 바로 그것입니다.

1. 다운로드 페이지 https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 를 방문합니다. 이 페이지에서 다양한 운영 체제용 버전을 볼 수 있습니다. 보통 시스템에 맞는 안정 버전을 선택합니다(예: Windows 64비트 또는 macOS).
2. 다운로드 후 설치 프로그램을 더블클릭하고 마법사를 따라 진행합니다. 확실하지 않으면 기본 옵션을 유지하세요.
3. 설치 후 데스크톱이나 시작 메뉴에서 위챗 개발자 도구를 실행합니다. 첫 실행 시 QR 코드가 표시되며 위챗으로 스캔하라는 메시지가 나옵니다. 스캔하고 인증하면 메인 인터페이스에 들어갑니다.

나중에 Trae에서 프로젝트 파일이 준비되면, 빌드된 미니 프로그램을 위챗 개발자 도구로 가져와서 실제 실행 결과를 확인할 것입니다.

2.4 Trae 및 HBuilderX 준비

마지막으로 실제 코딩에 사용할 두 가지 도구를 설치합니다: Trae와 HBuilderX.

Trae를 먼저 설치할 수 있습니다. 브라우저에서 https://www.trae.cn 을 방문하여 OS에 맞는 버전을 다운로드합니다. 설치는 일반 소프트웨어와 같습니다: 설치 프로그램을 더블클릭하고 안내를 따릅니다. 설치 후 로컬 폴더를 열고, 코드를 검사하고, AI와 채팅할 수 있는 IDE를 얻습니다. 이후 모든 바이브코딩 단계가 여기서 이루어집니다.

그다음 HBuilderX를 설치합니다. https://www.dcloud.io/hbuilderx.html 을 방문하여 OS 패키지를 다운로드합니다. HBuilderX는 가볍고 빠르게 시작됩니다. 설치 후 인터페이스를 잠깐 살펴볼 수 있지만, 지금은 심층 기능 학습이 필요하지 않습니다. 이후 장에서 uni-app 미니 프로그램 템플릿을 생성하여 프로젝트 시작점으로 사용할 것입니다.

이 섹션을 마치면 환경이 완료됩니다: 미니 프로그램 계정 + AppID, 실행 미리보기 도구, AI 코딩 IDE가 준비되었습니다. 다음으로 첫 번째 프로젝트 스켈레톤 생성부터 시작하여 이 도구들이 실제로 실행되게 만들 것입니다.

2.5 기본 파일 준비

1. "새 프로젝트"를 클릭합니다.

2. 기본 템플릿을 선택하고, 미니 프로그램 이름을 설정하고, 저장 경로를 선택한 후 오른쪽 하단의 생성 버튼을 클릭합니다:

3. 생성 성공 화면이 나타납니다:

4. 그다음 파일 시스템에서 이 폴더를 찾아 Trae에서 열면 기본 파일이 모두 준비된 것을 볼 수 있습니다:

3. 미니 프로그램 개발

앞의 두 부분에서 "미니 프로그램이란 무엇인가"와 "도구 및 환경을 어떻게 설정하는가"를 이미 명확히 했습니다. 이 섹션부터 실습에 들어갑니다: 개념만이 아니라, AI가 실제로 스네이크 미니 프로그램을 처음부터 만드는 것을 도와줄 것입니다.

이 섹션에서는 개발 단계의 완전한 SOP를 거치게 되며, 대략 다음을 포함합니다:

1. Trae에서 현재 프로젝트를 열고 AI에게 첫 번째 완전한 지시를 주어, 현재 스켈레톤을 기반으로 실행 가능한 스네이크 버전을 디자인하고 구현하게 합니다.
2. Trae가 "예제 코드"만 출력하는 것이 아니라 실제 프로젝트 파일을 직접 수정하게 하고, 필요할 때 롤백을 사용하여 이전 상태를 복원하는 방법을 배웁니다.
3. HBuilderX와 위챗 개발자 도구로 돌아가서, 미니 프로그램 시뮬레이터에서 실행하고, 시뮬레이터에서 이 버전을 플레이하여 "코드 관점"에서 "사용자 관점"으로 전환합니다.
4. 플레이 결과를 바탕으로 자연어로 계속 수정을 제안하고, AI가 컨트롤을 버튼 기반에서 조이스틱 기반으로 반복하게 하며, "문제 발견 -> 문제 설명 -> AI 수정 -> 다시 검증"의 전체 사이클을 경험합니다.

개발 전에 모든 페이지와 버튼을 디자인할 수도 있습니다. 하지만 완전한 초보자에게 인터페이스와 인터랙션 디자인 자체도 새로운 영역입니다(나중에 AI 보조 디자인도 보여줄 것입니다). 따라서 이번에는 의도적으로 다른 방식을 사용합니다: 먼저 시작 - AI가 실행 가능한 버전을 생성하게 하고, 효과를 보고 자연어로 대화하면서 점진적으로 다듬습니다.

3.1 한 번에 요구 사항 명확히 설명하기: Trae에 첫 "마스터 프롬프트" 주기

Trae에서 준비된 미니 프로그램 프로젝트를 연 후, 특정 줄을 편집하려고 서두르지 않았습니다. 대신 내장 AI 어시스턴트에게 말했습니다:

AI에게 명령을 내렸습니다: 현재 프레임워크를 기반으로 스네이크 미니 프로그램을 만들어 줘. 이 미니 프로그램을 디자인하고 프롬프트를 작성해 줘.

즉, "한 함수씩 단계별로 작성해 줘"라고 요청하지 않았습니다. 먼저 완전한 목표를 던지고 AI가 계획을 세우게 했으며, AI는 계획할 뿐만 아니라 첫 번째 구현을 직접 실행했습니다.

이 지시를 받은 후, Trae는 현재 프로젝트 구조를 읽고, 어디에 페이지를 추가하고 어디에 논리를 추가할지 결정하며, 프로젝트 파일/코드를 직접 수정합니다. 코드를 직접 작성하거나 폴더를 수동으로 생성/수정할 필요가 없습니다.

3.2 AI가 실제 코드를 자동으로 수정하게 하기, 수동 코딩이 아님

Trae에서 이 지시를 실행하면 AI는 "프로젝트 편집" 흐름에 들어갑니다. 이 과정에서 핵심 포인트를 관찰할 수 있습니다:

1. 채팅 영역에서 자신의 생각을 설명합니다(예: 어느 디렉토리에 페이지를 추가할지, 게임 논리를 어떻게 구성할지).

2. "예제 코드"만 제공하는 것이 아니라 실제 프로젝트 파일을 직접 편집합니다.
3. 완료 후, Trae는 어떤 파일이 변경되었고 무엇이 이루어졌는지 요약하여 알려줍니다.

이 라운드에 만족하지 않거나(또는 문제가 있다고 생각하면) 당황할 필요가 없습니다. Trae는 채팅 상자 왼쪽 상단에 롤백을 제공합니다. 원클릭으로 이 지시 이전의 프로젝트 상태로 복원할 수 있습니다 - 안전한 실행 취소 키와 같습니다.

3.3 HBuilderX와 위챗 개발자 도구에서 효과 확인

AI가 첫 번째 개발 라운드를 완료하면 코드가 프로젝트에 작성되었지만, 아직 실제 플레이어 측면의 효과를 보지 못했습니다. 다음으로 실행해야 합니다.

구체적인 작업: HBuilderX로 돌아가서 상단 메뉴 "실행"을 찾고, "미니 프로그램 시뮬레이터로 실행" -> "위챗 개발자 도구"를 선택합니다. 이렇게 하면 프로젝트 빌드가 트리거되고 결과가 위챗 개발자 도구에서 열립니다.

하단의 출력 패널에 빌드 과정이 표시됩니다. 최종 상태가 "준비 완료"이고 오류가 없으면 빌드가 성공한 것입니다. 그다음 위챗 개발자 도구로 전환하여 이 버전의 UI와 기능을 확인합니다.

대부분의 경우 HBuilderX가 자동으로 위챗 개발자 도구를 열고 업데이트된 미니 프로그램을 바로 볼 수 있습니다. 자동으로 열리지 않으면 다음과 같이 합니다:

1. 먼저 HBuilderX에서 현재 실행을 중지합니다.
2. 위챗 개발자 도구를 수동으로 실행하고 열어둡니다.
3. HBuilderX로 돌아가서 "실행 -> 미니 프로그램 시뮬레이터로 실행 -> 위챗 개발자 도구"를 다시 클릭합니다.

그다음 위챗 개발자 도구에서 바이브코딩 미니 프로그램을 볼 수 있습니다:

3.4 자연어로 만족할 때까지 반복 조정

이 실습에서 AI는 처음에 버튼으로 제어되는 스네이크를 생성했습니다: 화면에 네 개의 방향 버튼이 있고, 클릭하면 스네이크의 방향이 바뀝니다. 충분히 플레이할 수 있지만, 개인적으로 조이스틱 제어를 선호합니다. 조정 요청(기능뿐만 아니라 UI 디자인과 레이아웃도 포함, 경험이 쌓이면 외부 모델 API나 데이터베이스를 통합하도록 AI에게 요청할 수도 있음)에 대해서도 다시: 자연어로 요구 사항을 설명하기만 하면 됩니다.

이것이 바이브코딩의 핵심 장점입니다: 이벤트 바인딩이나 좌표 논리를 위해 코드를 파고들 필요가 없습니다. 원하는 것을 AI에게 직접 말하면 됩니다. 예를 들어, Trae 채팅에서 다음과 같이 작성할 수 있습니다:

버튼을 조이스틱 제어로 교체해 줘. 사용자가 조이스틱을 놓으면 스네이크는 다음 조이스틱 동작이 있을 때까지 현재 방향으로 계속 이동해야 해.

요구 사항이 명확하면 AI가 자동으로 대상 파일을 찾아 컨트롤 스타일, 인터랙션 바인딩, 방향 처리 논리를 수정합니다.

수정 후 위챗 개발자 도구로 돌아가서 확인합니다. 변경 사항이 즉시 보이지 않으면, 개발자 도구에서 "실행"을 클릭하거나 미리보기 창을 새로고침하여 최신 빌드를 적용합니다. 그래도 업데이트되지 않으면, HBuilderX에서 실행을 중지하고 시뮬레이터로 다시 실행한 후 업데이트된 미니 프로그램을 볼 수 있습니다:

3.5 문제가 발생하면: 자연어로 계속 소통

AI가 생성한 버전은 항상 처음부터 완벽하지는 않습니다. 다음과 같은 상황이 발생할 수 있습니다:

• 런타임 오류로 앱이 열리지 않음
• 기능은 대부분 맞지만, 세부 사항이 기대와 다름
• UI는 사용 가능하지만 시각적으로 아름답지 않거나 편리하지 않음

이런 순간에 무작정 직접 코드를 편집할 필요가 없습니다. 자연어로 Trae AI 어시스턴트에게 문제를 직접 설명하세요. 예를 들어:

"조이스틱 제어가 작동하는데, 스네이크가 가끔 갑자기 멈춰. 현재 구현을 확인해 줘." 또는: "게임은 플레이할 수 있는데, 인터페이스가 복잡해 보여. 모바일에서 세로 간격을 더 넓히고 싶어. 레이아웃을 조정해 줘."

AI는 현재 프로젝트 컨텍스트와 사용자의 설명을 사용하여 코드 변경 사항을 직접 제공하고 적용합니다. 결과가 더 나빠지거나 방향이 잘못되면, 여전히 이전 안정 버전으로 롤백하고 다른 표현으로 시도할 수 있습니다.

여러 라운드를 거쳐 "대략적인 첫 버전"에서 사용자의 취향에 더 가까운 조이스틱 기반 스네이크로 다듬을 수 있습니다. 예를 들어, 스타일 참조 이미지를 제공하고 AI에게 그에 맞게 UI 스타일을 조정하라고 요청했습니다:

3.6 최종 결과 및 섹션 요약

자연어 설명 -> AI 수정 -> 위챗 개발자 도구에서 미리보기 -> 계속 미세 조정의 여러 라운드를 거쳐, 마침내 다음 결과를 얻었습니다:

• 완전한 게임 페이지
• 스네이크가 부드럽게 움직이고 먹이를 먹음
• 조이스틱 제어 지원
• 미니 프로그램 시뮬레이터에서 올바르게 실행

최종 제품 예시:

이 섹션에서는 완전한 사이클을 보았습니다:

1. Trae에서 하나의 명확한 지시로 AI가 첫 번째 스네이크 미니 프로그램 버전을 구축
2. HBuilderX + 위챗 개발자 도구로 사용자 관점에서 실제 효과 검증
3. 자연어로 계속 수정을 제안하고, AI가 기능과 UI 최적화를 처리
4. 문제가 발생하면 롤백 + 재실행으로 프로세스를 안전하게 유지

다음으로 같은 리듬으로 자신의 아이디어를 사용할 수 있습니다: 스네이크에 국한되지 않고, 유틸리티 미니 프로그램, 이벤트 페이지, 또는 실제 비즈니스 프로토타입도 가능합니다. 주요 작업은 명확하게 생각하고 명확하게 설명하는 것입니다. 나머지는 AI와 도구가 처리합니다.

4. 미니 프로그램 배포

앞의 세 장에서 환경 설정 -> AI 보조 개발 -> 로컬 시뮬레이터에서 스네이크 실행의 전체 흐름을 완료했습니다.

이 장부터 핵심 질문은: 이 작업을 위챗에 실제로 배포하여, 장난감이 아닌 사용 가능한 미니 프로그램으로 만들려면 어떻게 해야 하는가?

난이도를 줄이기 위해 먼저 최단 사이클을 밟겠습니다: 본인과 몇 명의 팀원만을 위한 테스트/체험판으로만 배포합니다. 기능과 경험이 안정화된 후 정식 공개 배포로 진행합니다.

이 장은 먼저 4.1을 다루어 체험판 런칭의 최단 경로를 완성합니다. 모든 사용자를 위한 정식 배포는 4.2에서 설명합니다.

4.1 최단 SOP - 체험판으로 런칭

이 하위 섹션의 목표는 단 하나입니다: 위챗에서 체험판으로 스네이크 미니 프로그램을 열 수 있게 하는 것.

전체 흐름은 네 가지 작업입니다:

1. 위챗 공식 플랫폼에서 AppID를 찾고 확인
2. 프로젝트에 이 AppID를 설정
3. 위챗 개발자 도구에서 현재 버전을 업로드
4. 공식 플랫폼으로 돌아가서 이 업로드된 버전을 "체험판"으로 설정

이 순서대로 진행하겠습니다.

4.1.1 위챗 공식 플랫폼에서 AppID 확인

첫 번째 단계: 위챗 공식 플랫폼에서 미니 프로그램 AppID를 확인합니다.

2장 환경 설정에서 이미 한 번 했습니다. 여기서 실제로 사용합니다.

1. https://mp.weixin.qq.com을 방문하여 미니 프로그램 백엔드에 로그인합니다.
2. 왼쪽 메뉴에서 "개발 관리"를 찾고 "개발 설정"에 들어갑니다.
3. 상단에서 "개발자 ID" 영역을 찾습니다. "AppID(미니 프로그램 ID)"라는 줄이 있습니다 - 이것이 고유 ID입니다.

이 ID는 프로젝트 설정과 정확히 일치해야 합니다. 그렇지 않으면 위챗이 다른 앱 정체성으로 인식하고 미리보기/배포가 실패합니다.

4.1.2 프로젝트에 AppID 입력

두 번째 단계: 이 AppID를 프로젝트 설정에 기록하여 로컬 빌드가 공식 미니 프로그램 계정에 매핑되도록 합니다.

프로젝트가 uni-app 템플릿을 사용하는 경우 다음과 같이 합니다:

1. HBuilderX를 열고 스네이크 프로젝트를 로드합니다.
2. 파일 트리에서 manifest.json을 찾아 엽니다.
3. "위챗 미니 프로그램 설정"으로 스크롤하면 "위챗 미니 프로그램 AppID"와 같은 입력란이 보입니다.
4. 공식 플랫폼에서 복사한 AppID를 정확히 붙여넣고 파일을 저장합니다.

이제 로컬 프로젝트가 이 미니 프로그램 정체성을 등록했습니다. 다음으로 위챗 개발자 도구에서 업로드할 때 이 AppID에 기록됩니다.

4.1.3 위챗 개발자 도구에서 버전 업로드

이미 프로젝트를 위챗 개발자 도구로 실행하여 시뮬레이터를 미리 본 상태입니다.

이제: "현재 코드를 버전으로 패키징하여 서버에 업로드"합니다.

단계:

1. 위챗 개발자 도구의 오른쪽 상단 도구 모음에서 "업로드"를 클릭합니다.
2. 팝업에서 두 가지 핵심 필드를 작성합니다:
   1. 버전 번호: 예: 1.0.0(숫자와 점만)
   2. 프로젝트 노트: 간단한 설명, 예: "핵심 게임플레이 완료"
3. 확인하고 "업로드"를 클릭합니다. 출력 패널에 빌드 과정이 표시됩니다. 모든 단계가 녹색이 되고 업로드가 완료되면, 이 버전이 위챗 서버에 성공적으로 제출된 것입니다.

4.1.4 백엔드에서 업로드된 버전을 체험판으로 설정

업로드는 코드를 위챗 측에 보내기만 합니다. 시스템에 "이것이 체험판"이라고 알려야 합니다.

마지막 단계: 공식 플랫폼 백엔드로 돌아가 사이클을 완성합니다.

1. https://mp.weixin.qq.com을 열고 미니 프로그램 백엔드에 들어갑니다.

2. 왼쪽 메뉴에서 "관리" -> "버전 관리"를 찾습니다.

3. "개발 버전" 섹션에서 업로드된 버전을 볼 수 있습니다: 버전 1.0.0, 노트, 방금 업로드한 타임스탬프.

4. 이 행의 오른쪽에서 드롭다운/작업 버튼을 사용하여 "체험판으로 설정"을 선택하고 작업을 확인합니다. 이 단계 전에 홈페이지/카테고리 설정에서 메인 카테고리가 설정되어 있는지 확인하세요.

   

   

완료 후 이 버전이 미니 프로그램 "체험판"이 됩니다. 백엔드에서 체험 QR 코드를 생성하거나, 자신/팀을 체험 멤버로 추가한 후 위챗에서 스캔하여 실제 기기 테스트를 할 수 있습니다.

이 시점에서 로컬 프로젝트에서 테스트 런칭까지의 최단 사이클을 완료했습니다:

모든 위챗 사용자에게 즉시 공개할 필요는 없습니다. 안전한 범위 내에서 실제 위챗 환경에서 실제 미니 프로그램을 먼저 실행하는 것입니다. 기능 테스트, 피드백 수집, 반복에 충분합니다.

4.2 미니 프로그램 정식 런칭

체험판이 잘 실행된 후, 자신의 위챗에서 이 스네이크 미니 프로그램을 이미 플레이할 수 있습니다. 다음 단계는 제한된 체험 사용자에서 완전히 공개된 위챗 미니 프로그램으로 전환하는 것입니다.

단계별로 나눕니다: 기본 정보 완성, 카테고리 선택, 등록 완료, 심사 제출. 이 순서를 따르세요:

4.2.1 미니 프로그램 배포 흐름 진입

먼저 위챗 공식 플랫폼 백엔드로 돌아가 로그인합니다. 왼쪽 내비게이션에서 "버전 관리 / 배포" 관련 항목을 찾습니다(UI는 시간에 따라 약간 다를 수 있음). "미니 프로그램 배포 흐름"을 찾을 수 있습니다.

들어가면 상단 영역에 진행률 표시줄이 표시됩니다. 아래에 다음과 같은 단계가 나열됩니다:

1. 미니 프로그램 정보
2. 미니 프로그램 카테고리
3. 운영 정보 / 등록
4. 위챗 인증(실체 유형에 따라)

처음에는 진행률이 0%입니다. 각 단계가 완료되면 시스템이 자동으로 업데이트합니다.

4.2.2 기본 미니 프로그램 정보 작성

첫 번째 단계는 미니 프로그램 "명함"을 완성하는 것으로, 사용자가 위챗에서 처음 보는 내용입니다.

"미니 프로그램 정보" 페이지에서 보통 다음을 작성/확인합니다:

1. 미니 프로그램 이름 검색 결과와 앱 헤더에 표시됩니다. 길이 제한과 명명 규칙이 있습니다. 기능을 설명하고 기억하기 쉬운 이름을 선택하세요.
2. 설명 / 소개 한두 문장으로 이 미니 프로그램이 무엇을 하는지 설명합니다(예: "AI 보조 코딩으로 개발된 스네이크 게임으로, 빠른 캐주얼 플레이에 적합합니다.") 설명은 실제 기능과 일치하게 작성하고 과장된 마케팅 문구를 피하세요.
3. 아이콘 및 스크린샷
   1. 아이콘은 보통 PNG/JPG를 지원하는 정사각형 이미지가 필요하며 크기/픽셀 제한이 있습니다(페이지 규칙 확인). 단순하고 대비가 높은 아이콘을 사용하세요.
   2. 홈페이지, 게임 페이지, 설정 페이지 등 여러 스크린샷을 업로드합니다. 사용자가 내용을 이해하는 데 도움이 됩니다.
4. 기타 필수 항목 태그 및 서비스 지역 등, 안내에 따라 작성합니다. 단 하나의 원칙: 모든 정보는 스네이크 미니 프로그램의 실제 기능과 일치해야 합니다.

모든 필드를 완성한 후 저장 또는 다음을 클릭합니다. 배포 흐름의 첫 단계가 완료되었습니다.

4.2.3 미니 프로그램 서비스 카테고리 선택

기본 정보 후, 마법사가 "미니 프로그램 카테고리"로 안내합니다. 카테고리는 앱의 위챗 내 분류로, 심사 경로와 이후 표시/운영에 영향을 미칩니다.

이 페이지에서 "카테고리 추가"가 보입니다. 클릭하고 시스템 카테고리 트리에서 적절한 카테고리를 선택합니다:

1. 최상위 카테고리로 "교육"을 선택합니다;
2. 그다음 "교육 도구 / 학습 보조"와 같은 더 구체적인 하위 카테고리를 선택합니다. 이 예에서는 바이브코딩 학습 보조로 교육 도구를 선택했습니다.

자신의 프로젝트에서는 실제 용도에 가장 가까운 카테고리를 선택하면 됩니다.

카테고리를 확인한 후 저장을 클릭합니다. 페이지에 "카테고리가 성공적으로 생성되었습니다"가 표시되고 새 항목이 보이면 이 단계가 완료된 것입니다.

4.2.4 등록 정보 완성

다음으로 배포 흐름이 "운영 정보 / 등록"을 요청합니다. 이는 미니 프로그램 뒤의 책임 있는 실체를 확인하는 것입니다.

개인 실체 예시에서 흐름은 보통 다음을 포함합니다:

1. 등록 유형 선택 "개인" 또는 "기업" 등 유형 중에서 선택하며, 등록 실체와 일치해야 합니다.
2. 실체 정보 작성 이름, 신분증 유형, 신분증 번호 등을 포함합니다. 등록 정보와 일치해야 하며, 그렇지 않으면 심사에서 거부될 수 있습니다.
3. 증빙 서류 업로드 보통 신분증 사진이나 기타 증명 파일이 필요하며, 페이지에 구체적인 형식/크기/선명도 요구 사항이 표시됩니다. 명확한 파일을 준비하여 업로드하세요.

제출 후 시스템은 "심사 중"에 들어가며 "정보가 제출되었습니다. 기다려 주세요"와 같은 메시지가 표시됩니다. 시간이 걸릴 수 있습니다. 언제든지 백엔드에서 진행 상황을 확인할 수 있습니다.

4.2.5 심사 제출 및 정식 배포 대기

"미니 프로그램 정보," "카테고리," "운영 정보/등록"이 모두 완료되면, 마지막 작업을 합니다: 심사를 제출합니다.

1. 배포 흐름 개요 페이지로 돌아가서 모든 항목이 완료로 표시되고 진행률이 100%에 가까운지 확인합니다.
2. "심사 제출"(또는 유사한 버튼)을 클릭하여 현재 개발 버전을 위챗 심사 팀에 제출합니다.
3. "버전 관리"에서 이 버전의 상태가 "심사 중"으로 변경됩니다. 승인 후 "배포 완료" 또는 "런칭 가능" 상태가 됩니다.

등록 심사가 실패하면 개발자가 실패 부분을 지정하는 전화를 받을 수 있습니다.

등록의 경우 공업정보화부에서 인증 코드와 인증 링크를 받을 수 있습니다. 링크를 열고 코드 + 개인 정보를 입력합니다(인증은 1일 유효). 등록이 통과되면 등록 번호와 함께 이메일과 SMS 통지를 받습니다. 위챗 인증: 개인은 보통 30위안, 기업은 약 300위안을 지불합니다. 승인 결과와 관계없이 비용은 환불되지 않습니다. 인증 통지와 확인 전화를 받을 수 있습니다.

심사를 제출할 때 운영 비디오/스크린샷을 업로드하고 필수 정보를 작성합니다. 그다음 "배포 제출"을 클릭하여 정식 런칭합니다.

5. 요약

이제 0에서 1까지의 완전한 미니 프로그램 개발 사이클을 완료했습니다: 미니 프로그램 이해부터, Trae, HBuilderX, 위챗 개발자 도구 설치까지; AI에게 아이디어를 주고 코드에서 "벽돌을 나르게" 하고, 시뮬레이터에서 첫 번째 스네이크 버전을 플레이하는 것까지; 체험판으로 패키징하고, 등록/심사를 완료하여 위챗에서 실제로 사용할 수 있게 만드는 것까지 - 전체 체인을 직접 경험했습니다.

더 중요한 것은, 이것을 구문을 암기해서 달성한 것이 아니라는 점입니다. 요구 사항을 명확히 표현하고 AI와 효과적으로 소통하여 달성했습니다. 이미 경험했을 것입니다: 자연어 지시 하나로 AI가 개발 요구를 매우 효과적으로 충족할 수 있습니다. 이 능력은 스네이크에만 국한되지 않습니다. 나중에 구축하고 싶은 모든 미니 프로그램으로 전이할 수 있습니다 - 도구, 이벤트 페이지, 교육 앱, 또는 실제 업무 프로젝트.

일반적인 SOP로 요약하면 다섯 단계입니다: 작은 요구 사항 하나 명확히 하기 -> Trae에서 프로젝트 스켈레톤 구축 -> 바이브코딩 + AI로 첫 버전 생성 -> 위챗 개발자 도구에서 반복 플레이 테스트 및 개선 -> 업로드, 등록, 심사, 런칭. 이 다섯 단계를 반복할 때마다, 열고 공유할 수 있는 또 하나의 실제 미니 프로그램과, "AI를 사용해 아이디어를 제품으로 바꿀 수 있다"는 자신감이 한 층 더 쌓입니다.

다음으로 이 스네이크 앱을 계속 다듬거나, 닫고 자신의 아이디어로 빈 프로젝트를 시작할 수 있습니다. 무엇을 만들든 한 가지를 기억하세요: 더 이상 "무언가를 만들고 싶다"는 사람이 아닙니다. 이미 전체 워크플로우를 실행해 본 바이브코딩 개발자입니다. 나머지는 이 능력이 습관이 될 때까지 반복하는 것입니다.

참고 자료:

• https://zhuanlan.zhihu.com/p/1889401120939567074
• https://blog.csdn.net/2401_87407347/article/details/155193007