Skip to main content

ChatGPT와 함께 간단한 TodoApp 웹사이트 만들어서 출시까지 해보기

오늘은 코딩 지식이 없는 비개발자도 ChatGPT의 도움을 받아 쉽게 따라 해볼수 있도록 간단한 Todo App 웹페이지를 만들어서 출시까지 해보는 방법을 알아보겠습니다. 참고로 코드 작성과 배포를 위해 별도의 도구를 설치 할 필요가 없고 Netlify와 Codepen을 사용합니다.

그럼 ChatGPT의 도움을 받아 CodePen에서 HTML, CSS 및 기본 JavaScript를 사용하여 간단한 TODO 웹 페이지를 만드는 과정과 Netlify에 배포까지 하는 방법을 살펴보겠습니다.

1. ChatGPT에게 간단한 TodoApp 만들어 달라고 하기​

먼저 ChatGPT가 HTML, CSS 및 기본 JavaScript를 잘 작성 해줄 수 있도록 아래와 같이 프롬프트를 요청합니다.

ChatGPT프롬프트
act as a experienced frontend developer

그리고 ChatGPT에게 아래와 같이 Next.js로 TodoApp을 만들어달라고 요청 합니다.

ChatGPT프롬프트
I’m trying to build a simple TODO webpage, give me step by step instruction with code example with the following requirements. 
- using html, css, basic javascript
- design & css: modern style design, responsive
- using codepen
- running on Netlify

아래와 같이 ChatGPT가 답변을 해줍니다. 참고로 답변은 프롬프트 지니를 통해 번역된 결과 입니다.

CodePen에서 HTML, CSS 및 기본 JavaScript를 사용하여 간단한 TODO 웹 페이지를 만드는 과정부터 Netlify에 배포까지 잘 설명 해주고 있습니다.

ChatGPT 간단한 TodoApp만들기 답변 그리고 위에서 요청한 modern style 의 css 까지 작성을 해주고 있습니다. ChatGPT 간단한 TodoApp만들기 답변 css예시

그럼 위에서 ChatGPT가 작성 해준 내용을 기반으로 간단한 TodoApp을 만들어 보겠습니다.

1. HTML 작성하기​

CodePen에서 새 펜을 만들고 HTML 섹션에 다음 코드를 입력합니다.

index.html
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simple TODO App</title>
</head>
<body>
  <div class="container">
    <h1>TODO App</h1>
    <input type="text" id="todoInput" placeholder="Enter a task">
    <button id="addBtn">Add Task</button>
    <ul id="todoList"></ul>
  </div>
</body>
</html>

2. CSS로 스타일 지정​

CodePen의 CSS 섹션에서 다음 코드를 추가합니다.

style.css
body {
  font-family: 'Arial', sans-serif;
  background-color: #f5f5f5;
  display: flex;
  justify-content: center;
    /* ... */
  align-items: center;
  height: 100vh;
  margin: 0;
}

.container {
  background-color: #fff;
  padding: 30px;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  max-width: 500px;
  width: 100%;
}

h1 {
  text-align: center;
  margin-bottom: 20px;
}

#todoInput {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-bottom: 10px;
}

#addBtn {
  width: 100%;
  padding: 10px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
}

#addBtn:hover {
  background-color: #0056b3;
}

li {
   /* ... */
  list-style: none;
  background-color: #f5f5f5;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

li.complete {
  text-decoration: line-through;
  color: #999;
}

button.deleteBtn {
  background-color: #ff5a5a;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 5px;
  cursor: pointer;
}

button.deleteBtn:hover {
  background-color: #cc4949;
}

3. 자바스크립트 추가​

JavaScript 섹션에서 다음 코드를 추가합니다.

script.js
document.getElementById("addBtn").addEventListener("click", addTodo);

function addTodo() {
  const input = document.getElementById("todoInput");
  const text = input.value.trim();

  if (text) {
    const listItem = document.createElement("li");
    listItem.textContent = text;

        const deleteBtn = document.createElement("button");
    deleteBtn.textContent = "Delete";
    deleteBtn.classList.add("deleteBtn");

    listItem.appendChild(deleteBtn);
    document.getElementById("todoList").appendChild(listItem);

    deleteBtn.addEventListener("click", () => {
      listItem.remove();
    });

    listItem.addEventListener("click", () => {
      listItem.classList.toggle("complete");
    });

    input.value = "";
  }
}

4. CodePen 저장 및 내보내기​

HTML, CSS 및 JavaScript 섹션을 완료했으면 "저장" 버튼을 클릭하여 펜을 저장합니다. 그런 다음 오른쪽 하단 모서리에 있는 "내보내기"를 클릭하고 ".zip 내보내기"를 선택하여 프로젝트를 zip 파일로 다운로드합니다.

CodePen Zip파일로 다운받기

5. Netlify에 배포​

zip 파일로 다운로드 하였으면 배포 할 준비가 되었습니다. Netlify으로 이동하여 계정에 가입하거나 로그인합니다.

압축을 푼 폴더의 dist 폴더를 "사이트" 페이지로 끌어다 놓으면 Netlify가 your-subdomain.netlify.app과 같이 임의로 생성된 하위 도메인으로 새 사이트를 생성합니다. 업로드가 완료되면 페이지 상단에 사이트가 활성화되었음을 알리는 알림이 표시됩니다. 라이브 TODO 앱을 보려면 생성된 링크를 클릭하면 됩니다. Netlify를 통해 배포 하기

  • 선택 사항: 사용자 지정 도메인을 구성하고, 빌드 설정을 수정하고, 사이트의 설정 페이지를 통해 Netlify에서 제공하는 다른 기능을 탐색할 수도 있습니다.

이제 CodePen에서 HTML, CSS 및 JavaScript를 사용하여 간단한 TODO 앱을 구축하고 Netlify에 배포까지 완료 하였습니다.

위의 순서로 따라서 만들어보니 정말 간단하게 아래와 같은 TodoApp 페이지가 만들어졌습니다. ChatGPT가 만들어준 간단한 Todo App

아래의 링크를 통해 간단한 Todo App을 확인 할 수 있습니다. https://simple-todo-app-htmlcss.netlify.app/

7. 마치며​

VSCode 같은 개발 도구(IDE) 설치도 없이 간단한 TodoApp 웹사이트를 만들어보면서 출시 까지 해보았는데 도움이 되셨나요? 간단한 TodoApp 을 만들어본 계기를 통해 코딩에 더 흥미를 가지는 계기가 되었으면 좋겠습니다.

느낀점이나 궁금한점이 있으시면 댓글로 남겨주세요.

참고로 완성된 소스 코드는 GitHub 링크에서 확인 하실수 있습니다.