AI를 이용하여 웹 사이트 만들어보기

AI를 이용하여 웹 사이트 만들어보기

2024. 10. 8. 14:02ㆍ기타개발

AI의 발전으로 이제 간단한 코드는 알아서 작성해주는 시대가 왔다. 이번 포스트에서는 ChatGPT 에게 어떤 사이트를 만들지와 레이아웃을 구상을 요청해 간단한 사이트를 만들어 보자

아이디어

일단 어떤 사이트를 만들지부터 ChatGPT에게 물어보자

그럼 이제부터 간단한 To-Do 리스트 사이트를 만들어보자

레이아웃 구상

레이아웃도 ChatGPT한테 짜달라고 해보자

음... 영어는 읽기 귀찮으니 한글로 바꿔달라고 하자

1. 헤더 (제목)

위치: 페이지 상단
내용: "나의 할 일 목록"과 같은 간단한 제목
스타일: 큰 글씨로 중앙에 배치, 깔끔한 폰트 사용

2. 입력 영역 (할 일 추가)

위치: 제목 바로 아래
내용:
- 사용자가 할 일을 입력할 수 있는 텍스트 입력 필드
- "추가" 버튼으로 할 일을 입력할 수 있음
스타일:
- 입력 필드는 중앙에 위치하며, 적당한 크기로 사용자 입력에 적합하게 설계
- "추가" 버튼은 입력 필드 옆에 배치하고 클릭하기 쉽게 약간 크게 디자인

3. 할 일 목록 영역

위치: 입력 영역 아래
내용:
- 사용자가 추가한 할 일 목록이 표시됨
- 각각의 할 일 항목은 왼쪽에 체크박스(완료 여부)와 오른쪽에 "삭제" 버튼이 포함됨
스타일:
- 할 일은 수직으로 나열되며, 체크된 할 일은 취소선으로 표시하거나 투명도를 낮춰서 완료된 것을 나타냄
- 깔끔하고 읽기 쉬운 글씨로 표시

4. 푸터 (선택 사항)

위치: 페이지 하단
내용: 저작권 정보나 "오늘도 할 일을 완수하세요!"와 같은 동기 부여 메시지
스타일: 작은 글씨로 중앙에 배치, 가벼운 디자인

대략 이런식으로 구상을 해줬고 HTML코드 하나를 뱉어냈다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>나의 할 일 목록</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            background-color: #f4f4f4;
        }
        h1 {
            font-size: 2.5rem;
            margin-bottom: 20px;
        }
        .todo-input {
            display: flex;
            align-items: center;
        }
        input[type="text"] {
            padding: 10px;
            font-size: 1.2rem;
            width: 300px;
            margin-right: 10px;
            border: 2px solid #ccc;
            border-radius: 5px;
        }
        button {
            padding: 10px 20px;
            font-size: 1.2rem;
            background-color: #007BFF;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        button:hover {
            background-color: #0056b3;
        }
        ul {
            list-style-type: none;
            padding: 0;
            margin-top: 20px;
        }
        li {
            background-color: white;
            padding: 10px;
            margin-bottom: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 350px;
            border-radius: 5px;
            box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
        }
        li.completed {
            text-decoration: line-through;
            opacity: 0.6;
        }
        footer {
            margin-top: 20px;
            font-size: 0.8rem;
            color: #888;
        }
    </style>
</head>
<body>

    <h1>나의 할 일 목록</h1>

    <div class="todo-input">
        <input type="text" id="task" placeholder="새로운 할 일을 추가하세요...">
        <button onclick="addTask()">추가</button>
    </div>

    <ul id="todo-list">
        <!-- 할 일 항목들이 여기에 추가될 예정 -->
    </ul>

    <footer>© 2024 오늘도 할 일을 완수하세요!</footer>

    <script>
        function addTask() {
            const taskInput = document.getElementById('task');
            const taskText = taskInput.value.trim();
            if (taskText === '') return;

            const todoList = document.getElementById('todo-list');
            const li = document.createElement('li');
            
            li.innerHTML = `
                <span>${taskText}</span>
                <div>
                    <input type="checkbox" onclick="toggleTask(this)">
                    <button onclick="deleteTask(this)">삭제</button>
                </div>
            `;

            todoList.appendChild(li);
            taskInput.value = '';
        }

        function toggleTask(checkbox) {
            const li = checkbox.parentElement.parentElement;
            li.classList.toggle('completed');
        }

        function deleteTask(button) {
            const li = button.parentElement.parentElement;
            li.remove();
        }
    </script>

</body>
</html>

로컬서버에서 구동

바로 코드 에디터를 킨다음 작성해보자

로컬서버는 VSC의 Live Server 플러그인을 사용했다.

음 디자인이 아쉽지만 잘 되네

다음 포스트에서는 구체화랑 직접 서버에 올려보자

'기타개발' 카테고리의 다른 글

윈도우 환경에서 WSL을 통한 node.js 설치 (1)	2024.10.18

윈도우 환경에서 WSL을 통한 node.js 설치 2024.10.18

게임데브 노마드