AI 바이브코딩 #04 / 파이썬 Flask 외부접속→폴더구조→프로젝트 통째로 AI 개발

AI 바이브코딩 #04

코드 몰라도 웹서비스 만든다?
Flask 서버부터 프로젝트 통째로 AI에게 맡기는 법

앞에서는 Python과 Flask를 설치하고 작은 웹 프로그램을 실행해봤습니다. 이제부터는 한 단계 더 나갑니다. 내 PC에서만 보이던 Flask 웹페이지를 다른 PC에서도 접속하게 만들고, HTML·CSS·JavaScript·Python을 역할별로 나눈 뒤, 프로젝트 폴더 전체를 생성형 AI에게 맡겨 말로 수정하는 방식입니다.

말로 요구“검색 기능 넣어줘”
“화면 더 예쁘게”

→

AI가 파일 수정Python · HTML · CSS
JS · DB 구조

→

ZIP으로 받기프로젝트 통째로 실행
오류는 다시 AI에게

이번 글의 핵심

예전에는 파일 하나하나를 열어 코드를 직접 찾아 고쳤다면, 이제는 프로젝트 전체를 AI에게 보여주고 “이 기능을 이렇게 바꿔줘”라고 말한 뒤 수정된 전체 파일을 다시 받는 방식으로 개발할 수 있습니다. 다만 실제 업무용 프로그램에서는 백업, 테스트, 개인정보·보안, 권한 설정은 반드시 사람이 확인해야 합니다.

1. 먼저 Flask 웹서버를 다른 PC에서도 접속되게 해봅시다

Flask를 처음 실행하면 보통 127.0.0.1:5000으로 열립니다. 여기서 127.0.0.1은 “내 컴퓨터 자신”만 가리키기 때문에 다른 컴퓨터에서는 접속할 수 없습니다.

127.0.0.1

내 PC에서만 접속합니다.
개발 테스트용으로 가장 단순합니다.

0.0.0.0

내 PC의 사용 가능한 네트워크 인터페이스에서 요청을 받습니다.
같은 내부망의 다른 PC가 접속할 수 있게 만들 때 사용합니다.

가장 단순한 Flask 코드는 아래처럼 작성할 수 있습니다.

from flask import Flask

app = Flask(__name__)

@app.route("/")
def home():
    return "안녕하세요! Flask 웹서버입니다."

if __name__ == "__main__":
    app.run(
        host="0.0.0.0",
        port=5000,
        debug=False
    )

왜 5000번인가요?

포트는 컴퓨터 안에서 어떤 프로그램으로 연결할지 구분하는 번호입니다. Flask 개발서버는 예제에서 5000번 포트를 많이 사용하지만 반드시 5000이어야 하는 것은 아닙니다. 예를 들어 port=8000으로 바꾸면 주소도 http://IP주소:8000이 됩니다.

내 PC의 IP 주소 확인

Windows의 명령 프롬프트에서 다음 명령을 입력합니다.

ipconfig

예를 들어 내 PC의 IPv4 주소가 192.168.0.25라면, 같은 네트워크에 연결된 다른 PC의 브라우저에서 아래처럼 접속합니다.

http://192.168.0.25:5000

접속이 안 되면 확인할 것
① Flask가 실행 중인지
② IP 주소가 맞는지
③ 두 PC가 같은 내부망인지
④ Windows Defender 방화벽에서 5000번 TCP 인바운드가 차단되지 않았는지

중요: 0.0.0.0 = 인터넷에 자동 공개가 아닙니다

이 설정은 Flask가 외부 네트워크 인터페이스의 요청도 받도록 하는 것입니다. 집이나 사무실 밖 인터넷에서 접속하려면 공유기 포트포워딩, 공인 IP 또는 도메인, 방화벽, HTTPS, 운영용 WSGI 서버 등의 구성이 추가로 필요합니다. Flask 기본 개발서버를 인터넷에 그대로 공개하는 방식은 권장하지 않습니다.

여기까지를 그림으로 보면
Flask가 실행된 PC가 작은 웹서버가 되고, 같은 네트워크의 노트북·태블릿·휴대폰은 그 PC의 IP 주소 + 포트 번호로 접속합니다.

한 대의 PC에서 띄운 Flask 웹서버를 같은 내부망의 다른 기기들이 IP 주소와 포트로 접속하는 흐름입니다.

2. Windows에서 조금 더 안정적으로 띄우려면 Waitress

여러 사람이 내부망에서 접속하는 작은 업무도구라면 Flask의 기본 개발서버 대신 Waitress 같은 WSGI 서버를 붙이는 방법도 있습니다.

pip install waitress

waitress-serve --host=0.0.0.0 --port=5000 app:app

초보자 기준으로 구분하면

혼자 기능 확인: python app.py
같은 내부망에서 여러 명 테스트: Waitress 사용 고려
외부 인터넷 서비스: HTTPS·방화벽·리버스 프록시·운영환경까지 별도 설계

3. app.py 하나에 다 넣지 말고, 역할별로 나눠봅시다

처음에는 app.py 하나만 있어도 됩니다. 하지만 화면, 디자인, 동작, 데이터 저장 기능이 늘어나면 한 파일에 모든 코드를 넣는 순간 수정하기 어려워집니다. 그래서 웹개발에서는 보통 “서버 로직 / 화면 / 디자인 / 브라우저 동작 / 데이터”를 분리합니다.

my_web/ ├─ app.py ├─ requirements.txt ├─ templates/ │ └─ index.html ├─ static/ │ ├─ css/ │ │ └─ style.css │ ├─ js/ │ │ └─ app.js │ └─ images/ │ └─ logo.png └─ data/ └─ app.db

app.pyFlask 서버의 중심입니다. URL 요청을 받고, 계산하거나 DB를 조회한 뒤 HTML 화면으로 넘깁니다.

templates/index.html사용자가 실제 브라우저에서 보는 화면입니다. 입력창, 버튼, 표, 메뉴 등의 구조를 담당합니다.

static/css/style.css색상, 글꼴, 여백, 버튼 크기, 반응형 화면처럼 “보이는 디자인”을 담당합니다.

static/js/app.js버튼 클릭, 즉시 검색, 팝업, 비동기 요청처럼 브라우저에서 움직이는 기능을 담당합니다.

data/app.dbSQLite 데이터베이스 파일입니다. 사용자가 입력한 실제 업무 데이터를 저장할 수 있습니다.

requirements.txt이 프로젝트가 어떤 Python 패키지를 사용하는지 기록합니다. 다른 PC에서 같은 환경을 만들 때 중요합니다.

# requirements.txt 예시
Flask
waitress

역할을 나눠두면 AI에게 설명하기도 쉬워집니다

“화면만 고쳐줘”라고 하면 HTML/CSS 중심으로, “저장 방식을 바꿔줘”라고 하면 Python/DB 중심으로, “버튼 누르면 바로 검색되게 해줘”라고 하면 JavaScript와 Flask API를 함께 수정하도록 요청할 수 있습니다.

4. 실제로는 이렇게 연결됩니다

브라우저 접속→ Flask app.py→ DB 조회·처리→ HTML 화면 반환

예를 들어 사용자가 “업무 검색” 버튼을 누르면 JavaScript가 검색어를 Flask로 보내고, Flask는 SQLite에서 해당 자료를 찾은 뒤 결과를 HTML로 다시 보여주는 식입니다.

중요한 건 문법보다 “어디를 바꿔야 하는지”를 이해하는 것

초보자도 최소한 화면은 HTML/CSS, 브라우저 동작은 JavaScript, 서버 처리와 DB 연결은 Python/Flask 정도만 구분해도 AI에게 훨씬 정확한 수정 지시를 할 수 있습니다.

5. 이제부터가 진짜 바이브코딩 — 프로젝트를 통째로 AI에게 올립니다

예전 방식이라면 app.py를 열고 몇 번째 줄을 고쳐야 하는지 찾아야 했습니다. 하지만 생성형 AI를 이용하면 프로젝트 폴더 전체를 ZIP으로 묶어 올리고, 원하는 결과를 말로 설명할 수 있습니다.

그림처럼 이해하면 쉽습니다
프로젝트 폴더 안에는 Python·HTML·CSS·JavaScript·DB가 서로 연결되어 있습니다. 사용자는 “무엇을 바꿀지”를 말하고, AI는 그 요구사항에 맞춰 관련 파일들을 함께 수정하는 방식입니다.

Python·HTML·CSS·JavaScript·DB가 연결된 프로젝트 전체를 AI에게 맡겨 기능을 확장하는 바이브코딩 흐름입니다.

프로젝트 전체를 처음 분석시킬 때

이 ZIP 파일은 Python Flask로 만든 웹 프로젝트야.

먼저 전체 파일 구조와 각 파일의 역할을 분석해줘.

조건:
- 기존 기능은 최대한 유지
- app.py, templates, static, DB 관련 파일의 연결관계를 먼저 확인
- 지금 당장 수정하지 말고 구조와 문제점부터 설명
- 이후 내가 기능을 말하면 필요한 파일만 수정
- 수정 후에는 실행 가능한 전체 프로젝트를 다시 제공

이렇게 하면 내가 코드를 줄 단위로 읽지 않아도 AI가 프로젝트 구조를 먼저 파악하고, 어떤 파일을 손봐야 할지 판단하도록 만들 수 있습니다.

한 파일씩 올리는 것보다 전체 프로젝트가 좋은 경우

HTML에서 버튼 이름을 바꿨는데 JavaScript가 예전 ID를 찾고 있거나, Flask 라우트 이름을 바꿨는데 HTML 링크가 그대로인 경우처럼 여러 파일이 서로 연결된 문제를 AI가 함께 확인할 수 있습니다.

6. “이 화면 이렇게 바꿔줘”라고 말하면 관련 파일을 같이 고치게 합니다

화면 디자인 수정 예시

현재 프로젝트 전체를 기준으로 수정해줘.

요구사항:
1. 메인 화면 상단에 오늘의 업무 건수를 카드로 표시
2. 검색창을 화면 상단으로 이동
3. 목록은 모바일에서도 잘 보이게 반응형으로 수정
4. 버튼 디자인을 더 단순하고 현대적으로 변경

주의:
- 기존 저장/수정/삭제 기능은 그대로 유지
- 필요하면 templates/index.html과 static/css/style.css를 같이 수정
- JavaScript 수정이 필요하면 static/js/app.js도 함께 수정
- 수정한 파일만 주지 말고 최종 프로젝트 전체를 ZIP으로 제공
- 실행 오류가 없는지 파일 연결관계를 마지막에 다시 확인

서버 로직 수정 예시

현재 프로젝트에 업무 상태값을 추가해줘.

상태:
- 예정
- 진행중
- 완료

요구사항:
- 신규 등록할 때 상태 선택
- 목록에서 상태별 색상 표시
- 상태 필터 검색 추가
- 기존 데이터가 깨지지 않게 DB 변경
- 필요한 Python, HTML, CSS, JS 파일을 모두 수정
- 최종 결과는 전체 프로젝트 ZIP으로 제공

핵심은 “어느 파일을 고쳐”보다 “무엇이 되게 해줘”

파일 구조를 AI가 이미 알고 있다면 사용자는 원하는 동작과 조건을 말하는 데 집중할 수 있습니다. AI가 HTML, CSS, JavaScript, Flask, SQLite 중 어떤 파일을 함께 수정해야 하는지 판단하게 만드는 것입니다.

7. 오류도 코드 찾지 말고 프로젝트와 로그를 같이 줍니다

실행하다 오류가 나면 “안 돼”라고만 하지 말고, 오류 메시지 + 현재 프로젝트 + 원래 기대한 동작을 같이 줍니다.

오류 수정 프롬프트

현재 ZIP 프로젝트를 실행했는데 아래 오류가 발생해.

[여기에 오류 메시지 전체 붙여넣기]

원래 기대한 동작:
- 저장 버튼을 누르면 목록에 바로 추가되어야 함
- 기존 검색과 삭제 기능은 정상 유지되어야 함

해줘야 할 것:
1. 오류 원인을 초보자도 이해할 수 있게 설명
2. 프로젝트 전체에서 관련 파일을 확인
3. 필요한 파일을 직접 수정
4. 다른 기능이 깨지지 않았는지 연결관계 확인
5. 실행 가능한 최종 프로젝트를 ZIP으로 다시 제공
6. 내가 확인할 테스트 순서를 5단계 이내로 알려줘

AI가 코드를 대신 보더라도 검증까지 대신 책임지는 것은 아닙니다

특히 로그인, 개인정보, 파일 업로드, 관리자 기능, 외부 인터넷 공개가 들어가면 권한·입력값 검증·비밀번호 저장·SQL 처리·디버그 모드·HTTPS·로그 같은 보안 요소를 별도로 확인해야 합니다.

8. 코드를 “안 보는 개발”이 아니라, 코드를 “AI에게 읽히는 개발”

여기서 중요한 변화가 있습니다. 사람이 모든 코드를 직접 작성하고 줄마다 확인하던 방식에서, 사람은 목적과 기능을 설명하고 AI가 여러 파일의 코드를 읽고 수정하게 하는 방식으로 중심이 이동합니다.

1사람무엇을 만들지, 어떤 화면과 기능이 필요한지 결정합니다.

2AI프로젝트 구조를 읽고 필요한 파일을 찾아 코드를 작성·수정합니다.

3사람실제로 실행해보고 결과, 오류, 보안, 업무 적합성을 판단합니다.

그래서 창의적인 사람이 유리해집니다

“무슨 코드를 써야 하지?”보다 “이 업무를 어떻게 더 편하게 만들까?”, “사용자가 어떤 버튼을 누르면 좋을까?”, “반복되는 일을 어디까지 자동화할까?”를 생각하는 능력이 더 중요해집니다.

9. 초보자가 AI에게 프로젝트를 맡길 때 가장 좋은 작업 순서

① 프로젝트 백업→ ② ZIP으로 업로드→ ③ 원하는 결과 설명→ ④ 전체 ZIP 받기

⑤ 별도 폴더에서 실행→ ⑥ 기능 테스트→ ⑦ 오류·수정사항 전달→ ⑧ 다시 전체본 받기

특히 좋은 요청 방식
“기존 기능은 유지해줘”
“수정이 필요한 파일은 알아서 판단해줘”
“수정 파일 일부가 아니라 프로젝트 전체를 다시 줘”
“실행 전에 import, 경로, HTML/JS 연결을 점검해줘”
“DB 구조가 바뀌면 기존 데이터 영향도 설명해줘”

10. 이것 하나만 복사해도 됩니다 — 프로젝트 통째로 수정 프롬프트

만능형 프롬프트

나는 코딩 초보자야.
첨부한 ZIP은 현재 정상 실행 중인 Python Flask 웹 프로젝트야.

내가 원하는 변경사항:
[여기에 원하는 기능을 말로 적기]

작업 원칙:
1. 먼저 전체 폴더 구조와 파일 연결관계를 파악
2. 기존 정상 기능은 최대한 유지
3. HTML/CSS/JavaScript/Python/DB 중 필요한 파일은 알아서 함께 수정
4. 파일 경로와 import, Flask route, template, static 연결 오류 확인
5. 보안상 위험한 설정이 생기면 알려주기
6. 수정 후 실행 가능한 프로젝트 전체를 하나의 ZIP으로 제공
7. 내가 코드를 직접 고치지 않아도 되도록 완성본 기준으로 작업
8. 마지막에 실행 방법과 테스트할 항목만 간단히 알려주기

이게 바이브코딩의 재미입니다

“게시판 만들어줘”, “검색 붙여줘”, “보고서 버튼 만들어줘”, “엑셀 내려받게 해줘”, “화면을 모바일에 맞춰줘”처럼 기능을 자연어로 설명하고, AI가 프로젝트 전체의 코드를 연결해서 수정하게 만드는 것. 코딩 문법을 전부 외우지 않아도 아이디어를 실제 프로그램으로 빠르게 시험해볼 수 있습니다.

마치며 — 이제 코딩보다 “무엇을 만들지”를 먼저 생각해보세요

Python과 Flask를 설치하고 웹페이지 하나를 띄우는 것은 출발점입니다. 그 다음부터는 서버를 내부망에서 공유하고, 파일을 역할별로 나누고, 프로젝트 전체를 AI에게 보여주면서 기능을 계속 발전시킬 수 있습니다.

완전히 코드를 모른 채 운영 시스템을 방치하는 것은 위험하지만, 초기 아이디어를 빠르게 구현하고 반복 업무를 도구로 바꾸는 단계에서는 “말로 설명 → AI가 수정 → 내가 실행하고 판단”이라는 방식이 개발의 진입장벽을 크게 낮춰줍니다.

한 문장으로 정리

코드를 전부 읽는 사람이 아니라, 만들고 싶은 것을 정확히 설명하고 결과를 판단할 수 있는 사람도 웹개발을 시작할 수 있는 시대입니다.

 

실전 메모

내부 업무용 웹도구를 만들 때는 처음부터 외부 인터넷 공개를 목표로 하기보다 내 PC 테스트 → 같은 내부망 테스트 → 권한·보안 점검 → 운영환경 구성 순서로 확장하는 편이 안전합니다.

AI바이브코딩 Python Flask 웹서버 외부접속 ChatGPT코딩 웹개발 업무자동화 SQLite 초보자코딩