AI로 프로그램을 만든다고 해도, 결과물을 직접 실행해볼 환경은 필요하다.
이번 글에서는 복잡한 개발 환경이 아니라, 초보자도 따라 할 수 있는 가장 단순한 방식으로 웹앱 개발 환경을 구축해보려고 한다.
오늘 사용할 도구는 다음과 같다.
- VS Code
- HTML 파일
- Live Server
- 크롬 브라우저
VS Code는 무료 코드 편집기이고, 공식 문서에서도 Windows, macOS, Linux에 설치해서 사용할 수 있다고 안내하고 있다.
Live Server는 VS Code에서 HTML 파일을 브라우저로 바로 실행하고, 저장할 때 자동 새로고침을 도와주는 확장 프로그램이다.
1. VS Code 설치하기
먼저 구글에서 VS Code 다운로드를 검색한다.
공식 사이트에 접속한 뒤, 내 컴퓨터에 맞는 버전을 다운로드한다.
Windows 사용자는 보통 Download for Windows 버튼을 누르면 된다.
설치 파일을 실행한 뒤에는 기본 설정 그대로 설치해도 된다.
설치가 끝나면 바탕화면이나 시작 메뉴에서 Visual Studio Code를 실행한다.
2. 작업 폴더 만들기
이제 프로그램 파일을 저장할 폴더를 만든다.
예를 들어 바탕화면에 다음 이름으로 폴더를 만든다.
ai-routine-app이 폴더 안에 앞으로 만들 웹앱 파일을 저장할 것이다.
3. VS Code에서 폴더 열기
VS Code를 실행한 뒤,
File → Open Folder를 클릭한다.
아까 만든 ai-routine-app 폴더를 선택한다.
그러면 VS Code 왼쪽에 폴더 이름이 보인다.
4. index.html 파일 만들기
왼쪽 파일 탐색기 영역에서 새 파일 만들기 버튼을 누른다.
파일 이름은 다음처럼 입력한다.
index.html웹앱의 첫 화면은 보통 index.html 파일에서 시작한다.
5. 테스트용 코드 붙여넣기
이제 index.html 파일 안에 아래 코드를 붙여넣는다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>AI 하루 루틴 자동 생성기</title>
<style>
body {
font-family: Arial, sans-serif;
background: #f4f6f8;
padding: 40px;
}
.box {
max-width: 600px;
margin: 0 auto;
background: white;
padding: 30px;
border-radius: 16px;
box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}
input, button {
width: 100%;
padding: 12px;
margin-top: 10px;
font-size: 16px;
}
button {
background: #2563eb;
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
}
#result {
margin-top: 20px;
padding: 20px;
background: #eef2ff;
border-radius: 12px;
line-height: 1.8;
white-space: pre-line;
}
</style>
</head>
<body>
<div class="box">
<h1>AI 하루 루틴 자동 생성기</h1>
<p>기상 시간과 오늘의 목표를 입력하면 간단한 하루 루틴을 만들어줍니다.</p>
<input id="wakeTime" placeholder="기상 시간 예: 오전 7시">
<input id="goal" placeholder="오늘의 목표 예: 블로그 글쓰기, 운동, AI 공부">
<button onclick="makeRoutine()">루틴 생성하기</button>
<div id="result">결과가 여기에 표시됩니다.</div>
</div>
<script>
function makeRoutine() {
const wakeTime = document.getElementById("wakeTime").value;
const goal = document.getElementById("goal").value;
const result = `
[오늘의 하루 루틴]
기상 시간: ${wakeTime || "미입력"}
오늘의 목표: ${goal || "미입력"}
1. 기상 후 물 한 잔 마시기
2. 가벼운 스트레칭 또는 산책
3. 오전 집중 시간에 가장 중요한 일 처리하기
4. 점심 식사 후 짧은 휴식
5. 오후에는 보조 작업 또는 공부 진행
6. 저녁에는 운동 또는 정리 시간 갖기
7. 자기 전 오늘 한 일 기록하기
오늘은 "${goal || "목표"}"를 중심으로 하루를 보내보세요.
`;
document.getElementById("result").innerText = result;
}
</script>
</body>
</html>6. Live Server 설치하기
이제 만든 HTML 파일을 브라우저에서 쉽게 실행하기 위해 Live Server를 설치한다.
VS Code 왼쪽 메뉴에서 네모 모양의 Extensions 아이콘을 클릭한다.
검색창에 다음을 입력한다.
Live Server확장 프로그램을 설치하면 된다. VS Code 공식 문서에서도 확장 프로그램을 통해 필요한 기능을 추가할 수 있다고 설명하고 있다.
7. Live Server로 실행하기
index.html 파일을 연 상태에서 마우스 오른쪽 버튼을 클릭한다.
그리고 다음 메뉴를 선택한다.
Open with Live Server그러면 크롬 브라우저가 열리면서 내가 만든 웹앱 화면이 나온다.
화면에 기상 시간과 오늘의 목표를 입력하고 루틴 생성하기 버튼을 누르면 결과가 표시된다.
8. 크롬에서 결과 확인하기
브라우저에서 직접 입력해본다.
예를 들어:
기상 시간: 오전 7시
오늘의 목표: 블로그 글쓰기, 운동, AI 공부이렇게 입력하면 하루 루틴이 자동으로 만들어진다.
아직은 단순한 프로그램이지만, 중요한 건 내가 직접 만든 웹앱이 브라우저에서 실행되었다는 점이다.
9. 캡처해서 블로그에 업로드하기
마지막으로 실행 결과 화면을 캡처한다.
Windows 기준으로는 다음 방법을 사용할 수 있다.
윈도우키 + Shift + S화면 일부를 캡처한 뒤 블로그 글 중간에 넣으면 된다.
블로그에 올릴 때는 다음 순서로 이미지를 넣으면 좋다.
- VS Code에서 index.html 파일 만든 화면
- 코드 붙여넣은 화면
- Live Server 실행 메뉴 화면
- 크롬에서 웹앱이 실행된 화면
- 루틴 생성 결과 화면
마무리
이번 글에서는 AI를 활용해서 웹앱을 만들기 전, 가장 기본적인 개발 환경을 구축해보았다.
오늘 만든 것은 아주 간단한 하루 루틴 자동 생성기다.
하지만 이 과정을 통해 중요한 흐름을 익힐 수 있었다.
아이디어 생각하기
→ AI에게 코드 요청하기
→ VS Code에 붙여넣기
→ Live Server로 실행하기
→ 브라우저에서 결과 확인하기
→ 캡처해서 블로그에 기록하기앞으로는 이 기본 환경을 바탕으로 식단 자동 생성기, 운동 루틴 생성기, 블로그 글 초안 생성기 같은 프로그램도 하나씩 만들어볼 예정이다.
완벽한 프로그램보다 중요한 것은 직접 실행해보고 기록하는 것이다.
'코지빌더 연구소 > IT 프로젝트 제작' 카테고리의 다른 글
| [블로그 글 생성기] 5편 | ChatGPT API 연결해서 진짜 AI 블로그 생성기 만들기 (0) | 2026.05.29 |
|---|---|
| [블로그 글 생성기] 4편 | JavaScript로 AI 블로그 글 생성 기능 만들기 (0) | 2026.05.28 |
| [블로그 글 생성기] 3편 | CSS로 AI 블로그 글 생성기 디자인하기 (0) | 2026.05.28 |
| [블로그 글 생성기] 2편 | HTML로 AI 블로그 글 생성기 화면 만들기 (0) | 2026.05.28 |
| [블로그 글 생성기] 1편｜AI 블로그 글 생성기 주제 선정과 개발 방향 (0) | 2026.05.28 |