ChatGPT로 웹사이트 만들기

728x90

비개발자 및 코딩을 싫어하는 사람들에게 전 항상 이렇게 얘기를 합니다.

코딩은 언어다

보통 언어를 배울 때 읽고, 쓰고, 듣고, 말하는 영역이 있는 것 처럼 코딩도 그렇습니다. 코드 작성을 잘 하지 못하더라도, ChatGPT를 활용하면 충분히 작성이 가능합니다. 물론, 어느정도 코드의 구조나 문법에 대한 이해는 있어야 합니다. 이번 포스팅에서는 ChatGPT를 활용해서 웹사이트를 개발해보겠습니다.

(스파르타 코딩 클럽의 강의를 듣고 내용을 재구성한 포스팅입니다)

준비물

1. ChatGPT : ChatGPT를 활용하기 위해서는 openai 회원가입이 필요합니다.

2. VSCode: 코딩을 더 수월하게 할 수 있도록 도와주는 편집기입니다. (다른 편집기를 사용하셔도 무방합니다)

3. 1~2시간 집중할 수 있는 환경

본 포스팅의 목적은 코드를 짤 줄 몰라도 ChatGPT와의 문답으로 웹사이트를 개발할 수 있다는 것을 체험하는 것입니다. 그럼 이제 본격적으로 시작해보도록 하겠습니다.

HTML, CSS 생성

html과 css는 글씨, 그림, 각종 배너와 배경이 화면에 어떻게 나타나는지를 정의하는 언어입니다. 웹사이트 개발을 위해서는 무조건 필요한 문서입니다. 잘 모르시면 역시 ChatGPT에 물어보면 됩니다 ㅎㅎ

그럼 웹페이지에 필요한 html 파일을 먼저 제작해보도록 하겠습니다.

아래의 질문을 복붙 한뒤 ChatGPT에게 읽게 만듭니다. 이때 하단에 대답을 하지 말아달라는 요청을 합니다.

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>나만의 중고마켓</title>
    <link rel="stylesheet" href="https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/easygpt/default.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
        crossorigin="anonymous"></script>
    <style>
        /* 꾸미기 */

    </style>
</head>

<body>
    <!-- 뼈대 잡기 -->
</body>

</html>

--------
중요 : 이 요청에 대답을 하지 말아줘.

그 다음에, 코드를 작성해달라는 요청을 합니다:

챗GPT가 작성해준 코드를 맨 위의 html 코드의 뼈대잡기 부분에 복붙해서 VSCode에 입력을 하면 됩니다.

그럼 다음과 같은 웹사이트 화면이 만들어 집니다:

만약 색, 폰트 크기, 여백 등 마음에 들지 않은 부분이 있다면, ChatGPT에게 계속 질문을 해주면 됩니다.

이런식으로 아래 내용도 ChatGPT에게 물어서 채워주시면 됩니다.

웹페이지 배포하기

ChatGPT로 HTML과 CSS를 생성했다면, Github으로 배포를 해서 다른사람들이 볼 수 있게 웹페이지를 생성할 수 있습니다. https://github.com 페이지 접속한 뒤, 새로운 Repository를 만듭니다.

GitHub: Let’s build from here

GitHub is where over 100 million developers shape the future of software, together. Contribute to the open source community, manage your Git repositories, review code like a pro, track bugs and fea...

github.com

그리고 여태까지 제작한 index.html 파일을 업로드 한 뒤, 저장을 합니다. 그리고 Setting에 가져서 Pages 탭에 Build and Deployment 부분을 아래 화면과 같이 설정한 뒤, 클릭을 하면 끝입니다.

약 30초~1분 뒤에 같은 페이지에서 새로고침을 하면 위에 링크가 뜹니다:

Visit Site를 누르면 본인이 개발한 웹페이지를 확인할 수 있습니다.

마치며

ChatGPT로 인해서 개발자의 일자리가 위협을 받을 것이다는 뉴스와 커뮤니티 글이 종종 보입니다. 하지만, 오히려 개발자들의 수요는 줄지 않을 것이라 생각합니다. ChatGPT로 웹페이지 만들기를 따라해보셨더라면, "코드에 대한 이해가 그래도 어느정도는 있어야 하겠구나"는 생각이 들으셨을 겁니다. 자동차에 자율주행 기능이 생긴다고 운전면허를 딸 필요가 없어질까요? 아주 먼 훗날 자율주행 기능이 완벽해진다면, 그리고 운전 사고에 대한 책임 소재가 명확하게 정의가 된다면 그럴 수도 있을 것 같습니다. 하지만, 이러한 일이 빠른 시일내에 가시화되지는 않을 것 같습니다.

ChatGPT는 업무의 능률을 높이는 co-pilot 기능이 강한 AI 비서라는 생각이 계속 듭니다. 이제는 ChatGPT라는 툴을 얼마나 더 잘 알고 어떻게 잘 활용을 하는지가 중요해질 것 같습니다.

'💻 IT·기술·통계' 카테고리의 다른 글

[Bard] 구글 바드 사용 후기 (vs. ChatGPT) (1)	2023.05.12
[ChatGPT/Prompt] 이미지 검색 (0)	2023.04.02
[Tips] Python 모듈 위치, 버전, 상위 폴더에서 불러오기 (0)	2023.03.26
ChatGPT로 썸네일 만들기 (이미지 생성) (0)	2023.03.21
[Python] 점심 메뉴 추천해주는 웹사이트 만들기 (ft. Flask) (1)	2023.03.20

근근로그

ChatGPT로 웹사이트 만들기