첫 번째 프로토타입(Prototype, 시제품) 단계에서 완벽한 설계를 목표로 할 필요는 전혀 없습니다.

AI 도구가 우수한 지금이야말로, 「처음에는 일부러 1개 파일에 전부 작성하여 폭속으로 구동시키고, 코드가 늘어나면 AI에게 분할시키기」라는 전략이 가장 효율적입니다.

이번에는 AI를 활용한 폭속 프로토타입 개발의 요령과, 나중에 코드를 깔끔하게 만드는 리팩터링 (Refactoring) 절차를 해설합니다.

아이디어를 검증할 때 가장 중요한 것은, 우선 작동할 때까지의 「스피드감」입니다.

실제로 구동해 보면 생각했던 것과 다른 점이 허다하게 발생합니다.

하나의 파일에 모든 코드를 채워 넣어 AI에게 작성하게 하는 것이 가장 빠르며, AI도 망설임 없이 기능합니다.

「우선 작동하는 것을 만든다」는 점을 중시하여, 클라이언트와의 미팅에서 궤도를 수정하는 것이 중요합니다.

1개 파일로 프로토타입 개발을 진행하다 보면, 기능이 늘어남에 따라 코드가 점점 길어집니다. 여기서 주의해야 할 점이 「1,000행의 벽」입니다.

프로토타입이 1,000행 이내에 들어오는 규모라면 문제는 없지만, 규모가 커지면 다음과 같은 문제가 발생합니다.

한 번에 읽어들이는 정보량이 많아져, AI가 중요한 부분을 놓치거나 이상한 코드를 생성하기 쉬워집니다.

※ 최근 모델들은 컨텍스트 (Context) 처리가 능숙해지고 있어, 향후에는 개선되어 가는 추세에 있습니다.

AI는 코드를 읽을 때마다 「토큰 (Token)」이라는 소비 단위를 사용합니다. 파일이 크면 약간의 수정만으로도 대량의 토큰을 소비하게 되어, 이용 요금이나 횟수 제한에 영향을 미칩니다.

코드가 늘어나기 시작하면, AI에게 의뢰하여 파일을 역할별로 분할하도록 합시다.

프롬프트 (Prompt) 예시:

이 파일에 모여 있는 코드를
기능별 모듈로 분할하여 리팩터링 (Refactoring) 해주세요.
동작이나 외부 동작은 일절 변경하지 말고, 유지보수성을 높이는 배치로 만들어 주세요.

AI는 기존 코드의 분리 작업에 능숙합니다. 예를 들어, 다음과 같이 깔끔하게 나누어 줍니다.

• main.js: 전체 실행 엔트리 포인트 (Entry Point)
• api.js: 외부 통신 처리
• ui.js: 화면 그리기 처리

이렇게 분할하면, AI가 다음 수정 시 「필요한 파일만」 읽으면 되므로 응답 정밀도가 올라가고 토큰 소비도 억제할 수 있습니다.

파일을 분할했다면, 한 가지 중요한 작업이 있습니다. 「어떤 파일이 무엇을 담당하고 있는가」의 목차(사양서)를 만들어 두는 것입니다.

프로젝트의 최상위 폴더에 README.md 나 STRUCTURE.md, SPECIFICATION.md 를 작성하여 다음과 같이 기재합니다.

• main.js: 앱의 기동 및 전체 라우팅 담당
• api.js: 백엔드 API와의 통신 담당
• ui.js: DOM 조작 및 화면 렌더링 담당

AI 도구 (Cursor나 GitHub Copilot 등)는 작업을 시작하기 전에 프로젝트 내의 설정이나 사양서를 검색합니다. 이 「역할 가이드」가 있으면, AI가 관계없는 파일을 실수로 수정하거나 동일한 함수를 중복해서 만드는 것을 억제할 수 있습니다.

프로토타입으로 작동하는 프로그램이 완성되어도, 그것은 「테스트를 위한 도구」일 뿐이며 그대로 출시하는 것이 아닙니다.

「동작」을 확인하기 위한 프로토타입과, 보안 및 품질을 담보한 본판용 코드는 별개입니다. 스스로 「작동한다는 확신」이 들었다면, 그 프로토타입을 사양서 삼아 다시 클린한 구조로 다시 작성합니다.

• 처음에는 1개 파일로 구현의 스피드감을 최우선으로 한다
• 1,000행을 넘으면 AI에게 파일 분할(리팩터링)을 시킨다
• 파일 역할을 사양서에 적어 AI를 서포트한다

머릿속에 있는 아이디어를 폭속으로 형상화할 수 있도록, 꼭 실천해 보세요!