Codex 실전 활용: 노코드(Zero-Code) 위챗 미니 프로그램 개발

최근에 인문학 전공 친구들이 Codex를 사용해 자신만의 제품을 개발하려는 시도가 많아졌습니다.

지난 두 편의 글에서는 Codex 사용법을 다루었고, 이번 글은 실전에 초점을 맞춰 Codex로 위챗 미니 프로그램을 만드는 방법을 소개합니다.

먼저 결과물을 살펴보겠습니다. 이번에 만든 것은 '한 페이지(One Page)'라는 독서 체크인 미니 프로그램입니다. 아래는 위챗 개발자 도구에서 실행 중인 인터페이스입니다.

아이디어에서 실제 사용 가능한 미니 프로그램까지의 전체 과정은 다음 단계로 나눌 수 있습니다.

Figma 프로토타입 디자인 → Codex 코드 생성 → 개발자 도구 시뮬레이션 → 모바일 미리보기 → 심사 및 출시.

Figma는 페이지 레이아웃과 버튼 연결을 결정하고, Codex는 디자인을 코드로 변환하며, 위챗 개발자 도구는 실행, 확인 및 휴대폰 미리보기를 담당합니다. 미니 프로그램 계정을 준비한 후 위챗 백엔드를 통해 심사 및 출시를 진행합니다.

1. Figma란 무엇이며, 왜 먼저 사용해야 할까요?

Figma는 앱, 웹사이트, 미니 프로그램 등의 페이지를 디자인하는 데 사용되는 인터페이스 디자인 및 협업 도구입니다. 디자이너는 레이아웃, 색상, 버튼을 구성하고, 제품 관리자는 운영 흐름을 논의하며, 개발자는 디자인 치수, 간격, 에셋을 확인하여 페이지를 구현합니다.

또한 클릭 가능한 제품 프로토타입을 만들 수 있습니다. 예를 들어, 홈페이지의 버튼을 다른 페이지에 연결하여 클릭 시 이동하도록 설정하면, 사전에 작동 흐름이 매끄러운지 테스트할 수 있습니다.

이것이 바로 이번에 Figma를 사용하는 목적입니다. 코드를 작성하기 전에 여러 페이지를 함께 확인하고 버튼 위치가 적절한지, 화면이 너무 복잡하지 않은지 논의할 수 있습니다.

예전에는 이 디자인 초안을 개발자에게 전달했지만, 이제는 확정된 초안을 Codex에 전달하여 코드를 작성할 수 있습니다. 디자이너는 익숙한 Figma에서 시작하고, Codex를 사용하는 사람은 먼저 초안을 생성한 후 Figma에서 조정할 수 있습니다.

'한 페이지'도 이렇게 만들어졌습니다. 먼저 책장, 기록, 통계의 세 가지 주요 페이지를 결정하고, 색상 구성과 레이아웃을 통일했습니다.

디자인 시연입니다. 배경은 크림색 흰색, 텍스트와 주요 버튼은 진한 파란색, 현재 작업을 강조하는 데는 연한 녹색을 사용했습니다. 홈페이지는 현재 읽고 있는 책을 가장 눈에 띄는 위치에 배치하고, 통계 정보는 별도 페이지에 배치하여 사용자가 앱을 열자마자 숫자에 압도되지 않도록 했습니다.

이 단계는 전체적인 효과를 확인하는 단계입니다. 색상, 글꼴 크기, 페이지 배열이 마음에 들면 다음 단계로 넘어갑니다.

2. Codex로 초안을 생성하고 Figma에서 프로토타입 완성하기

인터페이스를 직접 그릴 수 없더라도 명확한 요구사항으로 시작할 수 있습니다. 예를 들어, 이번에는 여백이 많고, 읽고 있는 책을 확인할 수 있으며, 진행 상황을 쉽게 기록하고 독서 기록을 검토할 수 있는 독서 일지를 원했습니다.

Codex에 요구사항과 시각적 방향을 함께 전달하세요.

1독서 체크인을 위한 '한 페이지'라는 위챗 미니 프로그램을 만들고 싶습니다.
2먼저 책장 홈페이지, 독서 기록, 독서 통계의 세 페이지를 디자인해 주세요. 아직 기능 코드는 작성하지 마세요.
3
4시각적 스타일은 조용한 독서 일지와 같아야 합니다.
5크림색 흰색 배경, 진한 파란색 텍스트, 연한 녹색 주요 영역, 충분한 여백.
6홈페이지는 읽고 있는 책과 기록 시작점을 강조해야 합니다. 다른 페이지도 동일한 시각적 스타일을 유지해야 합니다.
7책 표지는 독창적인 기하학적 그래픽을 사용하고, 샘플 책은 가상의 내용을 사용하세요.
8
9먼저 세 페이지를 나란히 배치한 미리보기 이미지를 제공해 주세요.
10또한 텍스트, 그래픽, 버튼 그룹이 그대로 유지되어 Figma에서 추가 조정이 가능하도록 390×844 크기의 독립적인 SVG 파일 3개를 출력해 주세요. 주요 버튼은 개별적으로 이름을 지정해 주세요.

SVG 출력을 요청하면 디자인을 Figma에 넣을 수 있습니다. SVG는 벡터 그래픽 형식으로, 가져오면 개별적으로 선택하고 조정할 수 있는 텍스트, 그래픽, 그룹을 제공합니다.

초안을 얻은 후 만족할 때까지 수정합니다. 피드백은 "홈페이지 제목을 약간 줄여 주세요", "주요 버튼을 진한 파란색으로 통일해 주세요", "책 표지를 더 크게 만들어 주세요"와 같이 최대한 구체적으로 작성합니다. 세 페이지가 모두 만족스러우면 프로토타입 상호 작용을 처리합니다.

디자인을 Figma에 넣기

Figma 디자인 파일을 열고 왼쪽의 페이지 옆에 있는 "+"를 클릭하여 새 페이지를 만듭니다.

이 예에서는 SVG 콘텐츠를 복사하여 Figma 캔버스에 붙여넣어 가져오기를 완료합니다. 세 개의 아트보드 이름을 "01-책장 홈페이지", "02-독서 기록", "03-독서 통계"로 지정하고 가로로 배열합니다. 아트보드를 선택한 후 오른쪽 디자인 패널에서 너비와 높이를 확인합니다.

Figma를 처음 열면 다음 영역을 확인하세요. 왼쪽의 레이어 목록, 중앙의 캔버스, 오른쪽의 디자인 패널(모양), 프로토타입(상호 작용 설정). 텍스트나 버튼을 변경하려면 먼저 레이어 목록에서 선택합니다.

가져온 후에는 글꼴을 확인하는 것을 잊지 마세요. 환경에 따라 글꼴이 대체되어 제목 줄 바꿈과 텍스트 너비가 변경될 수 있습니다. 이번에는 디자인 초안과 미니 프로그램의 글꼴 렌더링이 달랐기 때문에 별도로 확인해야 했습니다.

버튼에 점프 기능 추가하기

홈페이지의 "계속 읽기" 카드를 예로 들어 보겠습니다. 카드를 선택하고 오른쪽 상단에서 프로토타입으로 전환한 후 상호 작용 옆의 "+"를 클릭합니다.

팝업되는 상호 작용 패널에서 다음 세 가지 옵션을 설정합니다.

• 트리거: "클릭 시"를 선택합니다.
• 작업: "이동"을 선택합니다.
• 대상: "02-독서 기록"(대상 아트보드)을 선택합니다.

기록 페이지의 저장 버튼은 홈페이지로 연결되고, 홈페이지의 통계 아이콘은 통계 페이지로 연결됩니다. 아래 이미지는 통계 항목의 설정을 보여줍니다.

오른쪽 상단의 삼각형 "프레젠테이션" 아이콘을 클릭하여 프로토타입 데모를 엽니다. 홈페이지에서 시작하여 페이지 간 경로를 테스트합니다.

Figma 프로토타입은 점프를 보여주며, 실제 입력, 저장 및 데이터 업데이트는 다음 단계에서 미니 프로그램 코드로 구현됩니다.

3. 디자인이 준비되었습니다. MCP는 어디에 사용하나요?

MCP는 Figma 디자인을 Codex에 전달하는 단계에서 사용됩니다. 연결되면 Codex는 선택한 아트보드의 디자인 구조, 스타일 및 에셋을 읽고 디자인 초안을 기반으로 구현을 계속할 수 있습니다.

Figma 사용법을 이미 알고 있고 초안이 준비되었다면 여기서 바로 시작할 수 있습니다. 구현하려는 아트보드를 선택하고 해당 아트보드의 노드 정보가 포함된 링크를 복사한 후 Figma 연결을 활성화하여 Codex에 전송합니다.

1Figma MCP를 통해 이 아트보드의 디자인 컨텍스트와 스크린샷을 읽어 주세요.
2먼저 읽은 페이지 구조, 글꼴 크기, 색상, 간격 및 에셋을 설명해 주세요.
3읽을 수 없는 부분이 있으면 명확히 알려 주세요. 추측하지 마세요.
4
5다음으로 WXML, WXSS, JavaScript 및 JSON을 사용하여 네이티브 위챗 미니 프로그램을 만들겠습니다.
6이 기술 스택에 따라 구현하고 프로젝트의 기존 스타일과 에셋을 재사용하세요.
7먼저 홈페이지를 완성하고 확인 후 다른 페이지를 계속 진행하세요.

"네이티브 위챗 미니 프로그램"을 지정해야 합니다. Figma에서 제공하는 디자인 정보는 대상 플랫폼에 따라 구현되어야 하며, 미니 프로그램에 웹 코드를 단순히 사용할 수 없습니다.

이 예에서는 SVG를 통해 디자인을 Figma로 가져왔고, 코드는 동일한 디자인 파일과 에셋을 따릅니다. MCP는 Figma 디자인 초안이 이미 존재할 때 격차를 해소하는 방법입니다. 어떤 방법을 사용하든 Codex에 전달하는 것은 확정된 디자인이어야 합니다.

4. 디자인을 미니 프로그램으로 코딩하기

Codex에서 프로젝트 폴더를 열고 디자인 파일과 책 표지 에셋을 배치하면 구현을 시작할 수 있습니다.

이 단계에서는 기술을 지정하는 것 외에도 받고자 하는 것이 무엇인지 명확히 밝혀야 합니다. 즉, 위챗 개발자 도구에 직접 가져올 수 있는 프로젝트여야 합니다.

1확정된 '한 페이지' 디자인을 기반으로 네이티브 위챗 미니 프로그램을 완성해 주세요.
2
3WXML, WXSS, JavaScript 및 JSON을 사용하세요.
4코드는 miniprogram 폴더에 배치하고 app.json 및 project.config.json을 제공하여 위챗 개발자 도구에 직접 가져올 수 있도록 하세요.
5
6책장, 독서 기록, 통계 및 책 추가 페이지를 구현하세요.
7확정된 색상 구성, 레이아웃 및 독창적인 책 표지 에셋을 따르세요.
8지금은 wx.setStorageSync를 사용하여 데이터를 로컬에 저장하고, 다시 열 때 읽어오세요.
9입력 유효성 검사, 빈 상태 및 저장 실패 프롬프트를 추가하세요.
10
11완료되면 코드를 확인하고 어떤 디렉토리를 가져와야 하는지, 어떻게 컴파일해야 하는지 알려 주세요.
12제가 구성해야 할 항목이 있으면 별도로 나열해 주세요.

Codex가 생성한 프로젝트에서 WXML은 페이지 구조를, WXSS는 스타일을, JavaScript는 클릭 및 저장을, JSON은 페이지 경로를 구성합니다. 각 파일의 역할을 이해하면 전달된 디렉토리를 이해할 수 있습니다.

여기서 압도당하지 마세요. Codex가 해결해 줄 것입니다. 코드를 이해할 필요 없이 프롬프트를 복사하고 디자인 초안을 넣고 자신의 이름으로 변경하기만 하면 됩니다.

5. 위챗 개발자 도구에 넣고 실행 확인하기

위챗 개발자 도구를 설치하고 로그인한 후 "프로젝트" 메뉴에서 "프로젝트 가져오기"를 선택하고 Codex가 생성한 miniprogram 폴더를 찾습니다.

프로젝트 이름은 원하는 대로 지정할 수 있습니다. AppID는 이 미니 프로그램의 식별자입니다. 로컬 학습을 위해 도구에서 제공하는 테스트 계정을 사용할 수 있지만, 출시를 준비할 때는 자신의 미니 프로그램 AppID로 전환해야 합니다. 이 예에서는 백엔드에 "클라우드 서비스 사용 안 함"을 선택합니다.

"만들기"를 클릭하고 프로젝트에 들어가 컴파일이 완료될 때까지 기다립니다. 오른쪽 시뮬레이터에 페이지가 표시되면 마우스로 직접 조작할 수 있습니다. Codex가 코드를 수정한 후 다시 컴파일하여 결과를 확인합니다.

여기서는 주로 세 가지를 확인합니다. 페이지가 어긋나지 않는지, 버튼이 올바른 페이지로 연결되는지, 입력한 내용이 저장되는지입니다. 또한 시뮬레이터의 화면 크기를 전환하여 긴 제목, 입력 상자 및 하단 탐색이 비좁지 않은지 확인합니다.

문제가 발생하면 오류 텍스트나 스크린샷을 Codex에 보내고, 방금 수행한 작업과 예상한 결과를 함께 보냅니다. 예를 들어:

1위챗 개발자 도구의 오류 스크린샷입니다.
2홈페이지에서 기록 페이지로 들어갈 때 책 표지가 표시되지 않습니다.
3이미지 경로와 페이지 로딩 시점을 확인해 주세요. 기존 레이아웃을 유지하면서 수정해 주세요.

이 경우 실제로 이미지 로딩 문제가 발생했습니다. 페이지 데이터가 준비되기 전에 코드가 이미지 주소를 연결하기 시작하여 경로에 책 표지 이름이 누락되었습니다. 데이터가 준비될 때까지 기다린 후 이미지를 표시하도록 코드에 지시하여 문제를 해결했습니다.

유사한 문제는 코드를 처음부터 공부할 필요가 없지만, 문제가 발생한 위치를 명확히 설명해야 합니다. 수정 후 시뮬레이터로 돌아가 작업을 반복하고 정상으로 돌아왔는지 확인합니다.

6. 컴퓨터 시뮬레이터에서 모바일 미리보기 및 출시까지

컴퓨터에서 실행되면 휴대폰에서 확인합니다.

적절한 권한이 있는 AppID를 사용하여 개발자 도구 상단의 "미리보기"를 클릭하고 QR 코드가 생성될 때까지 기다린 후 권한이 있는 위챗 계정으로 스캔합니다. 휴대폰의 글꼴 크기, 키보드가 나타날 때 입력 영역을 가리는지, 하단 버튼이 쉽게 닿는지에 중점을 둡니다.

이 예에서는 데이터가 로컬에 저장되므로 시뮬레이터의 기록이 휴대폰에 자동으로 동기화되지 않습니다. 휴대폰에서 테스트 콘텐츠를 다시 입력해야 합니다. 향후 여러 기기에서 데이터를 유지하려면 클라우드 동기화 또는 백업 기능을 추가할 수 있습니다.

친구들이 사용해 볼 준비가 되면 개발자 도구 상단의 "업로드"를 클릭한 다음 위챗 공식 계정 플랫폼의 미니 프로그램 백엔드로 이동합니다. 버전 관리로 이동하여 해당 개발 버전을 찾아 체험판으로 설정하고 체험 멤버를 추가합니다. 체험 멤버는 적절한 권한이 필요합니다.

사용 가능하다고 확인되면 백엔드에서 심사를 제출하고 승인 후 출시합니다. 백엔드 요구 사항에 따라 계정 정보와 서비스 카테고리를 입력합니다. 이러한 계정 작업을 완료하기 위해 Codex가 필요하지는 않습니다.

이 예는 개발자 도구에서 실행 가능한 단계에 도달했습니다. 독자는 자신의 미니 프로그램 계정을 사용하여 모바일 미리보기, 업로드 및 심사 제출을 진행할 수 있습니다.

전체 프로세스 연결하기

먼저 Figma를 사용하여 페이지와 버튼 점프를 결정하고 디자인이 만족스러울 때까지 조정합니다. 그런 다음 디자인 파일이나 아트보드 링크를 Codex에 전달하여 위챗 미니 프로그램으로 코딩합니다. 그런 다음 개발자 도구로 가져와 시뮬레이션, 실행 및 오류를 확인합니다. 마지막으로 휴대폰에서 미리보기하고 확인 후 업로드, 심사 및 출시합니다.

앞으로 체크인 도구, 레시피 앱 또는 기타 작은 유틸리티를 만들 때도 이 워크플로를 따를 수 있습니다. 디자인이 마음에 들지 않으면 Figma로 돌아가 조정하고, 기능에 문제가 있으면 특정 작업과 오류를 Codex에 전달한 후 개발자 도구에서 수정 결과를 확인합니다.

저는 Miles입니다. 빅테크 기업에서 FDE로 전향한 AI 알고리즘 전문가로, 알고리즘 연구 개발, 최적화 및 배포, 기업 교육을 담당했습니다. 저를 팔로우하세요 @miles_mazy 함께 성장하고 함께 돈을 벌어요.