AI 서비스 제작

비개발자가 Codex로 웹서비스를 만드는 전체 순서

필립2026년 8월 14일 8분

Codex에 ‘웹사이트를 만들어줘’라고 부탁하면 화면은 빠르게 생겨요. 하지만 실제 서비스는 화면 하나로 끝나지 않습니다. 어디서부터 무엇을 확인해야 하는지 전체 지도를 먼저 알아야 중간에 길을 잃지 않아요.

먼저 서비스의 한 문장을 정해요

코드를 만들기 전에 이 서비스가 누구의 어떤 문제를 해결하는지 한 문장으로 적어보세요. 기능을 길게 나열하는 것보다 ‘누가, 어떤 상황에서, 무엇을 할 수 있는 서비스인지’가 분명해야 Codex도 일관된 결과를 만들 수 있어요.

예를 들어 ‘전자책을 판매하는 사이트’보다 ‘처음 방문한 사람이 책을 이해하고, 로그인한 뒤 결제하고, 마이페이지에서 PDF를 읽는 사이트’가 더 좋은 출발점이에요. 사용자와 완료 조건이 함께 들어 있기 때문입니다.

폴더는 서비스에 필요한 파일을 모아두는 서랍이에요. 먼저 서비스 이름으로 폴더를 만들고 Codex가 그 폴더 안에서만 작업하도록 알려주세요. 기존 파일이 있다면 지우거나 덮어쓰기 전에 반드시 현재 상태를 확인하게 해야 해요.

첫 버전에서 모든 기능을 한꺼번에 만들 필요는 없어요. 방문자가 들어와 핵심 정보를 보고 다음 행동을 할 수 있는 가장 짧은 흐름부터 완성하세요. 판매 사이트라면 홈, 상품 상세, 로그인, 결제, 구매 후 열람이 기본 흐름입니다.

각 화면을 만든 뒤에는 데스크톱과 모바일에서 제목이 잘리지 않는지, 버튼을 누를 수 있는지, 뒤로 가기와 새로고침이 자연스럽게 동작하는지 확인해요. ‘예쁘게 만들어줘’보다 확인할 조건을 구체적으로 말하는 편이 훨씬 정확합니다.

화면에 보이는 이름이나 구매 내역이 새로고침할 때 사라진다면 아직 실제 데이터와 연결되지 않은 상태일 수 있어요. 데이터베이스는 회원, 주문, 후기처럼 계속 보관해야 하는 정보를 저장하는 공간입니다.

로그인은 단순히 버튼을 보여주는 일이 아니에요. 로그인하지 않은 사람의 접근을 막고, 구매한 사람에게만 책을 열어주며, 탈퇴했을 때 정보와 권한을 어떻게 처리할지도 함께 정해야 합니다. 개인정보는 꼭 필요한 것만 저장하고 운영 화면에도 과도하게 노출하지 않아요.

커밋은 현재 변경 내용을 하나의 복구 지점으로 저장하는 일이고, 푸시는 그 기록을 GitHub에 올리는 일이에요. 배포는 저장된 결과를 다른 사람이 접속할 수 있는 서버에 공개하는 과정입니다. 세 단어가 비슷해 보여도 하는 일은 서로 달라요.

작은 기능 하나가 완성되고 검수가 끝날 때마다 의미 있는 설명으로 커밋하세요. 오류가 생겼을 때 어느 지점부터 달라졌는지 찾기 쉬워지고, 다른 컴퓨터에서도 같은 작업을 이어갈 수 있어요.

Vercel 같은 배포 서비스는 GitHub의 코드를 받아 웹에서 접속할 수 있게 해줘요. 로컬 컴퓨터에서는 잘 보이던 기능도 운영 주소에서는 환경 변수, 도메인, 보안 설정 때문에 다르게 동작할 수 있습니다.

배포가 성공했다는 표시만 보고 끝내지 마세요. 운영 주소에서 로그인, 결제 직전 단계, PDF 권한, 이메일, 모바일 화면을 다시 확인해야 해요. 검색엔진에 공개할 페이지와 관리자처럼 숨겨야 할 페이지도 구분합니다.

서비스는 공개한 날부터 운영이 시작돼요. 결제와 환불 알림, 고객 문의 연락처, 장애 확인 방법, 데이터 백업과 복원 절차가 있어야 문제가 생겼을 때 당황하지 않습니다.

처음부터 거대한 서비스를 만들기보다 한 사람의 실제 사용 흐름을 끝까지 완성하고, 직접 사용해 본 뒤 다음 기능을 추가하세요. Codex는 빠르게 코드를 만드는 도구이지만 무엇을 만들고 어떤 상태를 완료로 볼지는 운영자가 결정해야 합니다.

요청에는 목표, 현재 상태, 바꾸면 안 되는 것, 완료 조건을 함께 넣어보세요. 아래 네 문장을 채우는 것만으로도 결과가 훨씬 안정적이에요.