AI Studio로 Web App만들기

AI 신에서 요즘 가장 핫한 이슈는 바이브코딩과 MCP가 아닐까 싶다.
이제 누구나 개발자가 될 수 있는 세상이 되었다.
특히나 자바스크립트 기반의 웹앱은 한두 문장이면 바로 만들 수 있다.

Google의 AI studio를 켜고 바로 시도해보자.

실수령액을 확인하는 연봉계산기를 만들어줘. 한국 기준이고 최신 2026년 세금, 연금, 건강보험 반영한 매우 정확한 방식으로 만들어줘.

나는 새해가 다가오기도 하니 많은 직장인들이 궁금해하는 연봉실수령액 계산기를 만들기위해 프롬프트를 입력했다. 1분도 안 걸려서 웹앱이 만들어졌다.

개싱기…
너무 재밌다!

마침 이사가려고 대출을 받게 되었는데 이자계산기를 검색해서 찾아보다가 맘에 드는 UI가 없어서 직접 만들어보기로 했다. 아래는 프롬프트다.

전세대출이자계산기, 간단한 입력과 선택, 상환방식에 따른 전체 이자, 매월이자, 전체기간 리스트 및 이자 등을 효과적으로 보여준다. 월별 상환 일정을 계산 결과 요약 안에 넣어준다.

ㅁㅊ. 맘에든다. 27초 만에 만들어낸다.
이걸 쌩으로 코드짜려면 못해도 하루종일 걸릴듯.

웹사이트에 적용해보자.

git을 활용해도 되지만 난 일단 dist 파일 생성해서 호스팅서버에 집어넣고 싶었다.

  1. nodejs 설치
  2. aistudio에서 앱 다운로드 및 압축해제 (폴더위치 쉽게, 폴더명 쉽게)
  3. 윈도우 > cmd > 압축 푼 폴더로 이동
  4. npm install (라이브러리 설치)
  5. npm run build (dist 폴더생성)
  6. FTP 접속 및 업로드

좀 복잡하지만 맘이 편하다.
여러가지 앱을 만들고 포스팅해봐야지.

데이터베이스가 궁금해서 firebase도 이용해봐야겠다.