간단한 코딩부터 업무 자동화, 웹 개발 등 챗GPT를 활용하면 많은 분야에서 도움을 받을 수 있습니다. 이번 글에서는 나만의 웹사이트를 챗GPT로 만드는 방법을 알아보겠습니다. 시작하기 전에, 챗GPT가 만능은 아니라는 점을 말씀드립니다. 챗GPT가 작성하는 코드는 작동하지 않을 수 있고, 아직까지 오류가 많습니다.
오류가 나는 경우에 챗GPT에게 반복적으로 코드를 요청하며 수정할 수도 있겠지만, 끝까지 올바른 코드가 나오지 않을 수도 있습니다. 프로그래밍의 모든 걸 챗GPT가 완벽하게 할 수는 없다는 사실을 기억하고, 프로그래밍을 보조하는 도구로써 활용하는 것을 추천합니다.
1. 서비스 이름, 슬로건, 로고 만들기
챗GPT에게 내가 만들고 싶은 서비스를 먼저 소개하고, 서비스 이름을 추천받아보세요. 사이트 이름을 정했다면, 슬로건과 로고도 제작해달라고 부탁합시다. 하단의 프롬프트 예시를 살펴보며 직접 실습해보세요.
| [프롬프트 예시] 웹사이트를 하나 만드려고 합니다. 사람들은 다양한 구독 서비스를 사용하는데, 사용하지 않고 까먹고 있다가 돈을 내는 경우도 많습니다. 사람들이 구독하는 서비스를 관리해주는 사이트를 만드려고 합니다. 이 사이트의 이름은 뭐가 좋을까요? 영어 이름 10개를 추천해주시고, 그에 맞는 짧은 슬로건도 10개 추천해주세요. |
챗GPT에게 이름과 슬로건을 추천 받으셨나요? 그렇다면 이번엔 로고를 만들어봅시다. 구글 검색창에 logo generator 를 검색하면 로고를 제작해주는 다양한 사이트가 나옵니다. 사람들이 많이 이용하는 사이트 중에는 Canva가 있는데요. 여기서 쉽게 로고를 제작할 수 있습니다.
그 외에도 AI logo generator를 구글에 검색하면 logoai.com 라는 사이트가 나옵니다. 여기서 서비스 이름, 서비스 분야, 전체 색상, 폰트 느낌을 선택한다면 손쉽게 로고를 만들 수 있습니다. AI가 추천한 로고를 변경할 수도 있는데, 사용하려면 유료 구독이 필요합니다. 지금은 임시 로고로 사용하는 것이니 적당히 깔끔한 로고를 선택합니다.
만일 로고 크기가 딱 맞지 않는다면, png crop 사이트에 들어가서 로고 크기에 맞게 이미지를 자를 수 있습니다. 이렇게 챗GPT로 사이트 이름, 슬로건, 로고 파일을 생성했습니다.
2. 프로젝트 세팅하기
이번에는 Substracker 라는 웹사이트를 만들어보겠습니다. 우선 바탕화면에 Substracker 라는 폴더를 만들어줍니다. 이 폴더에 내가 만들 웹사이트의 로고와 현재 구독중인 서비스의 로고를 함께 넣어줍니다. VScode를 켜고, Substracker 폴더를 열어줍니다. 그리고 새로운 파일을 열어 index.html를 만듭니다. ! 를 작성한 뒤 엔터 버튼을 누르면 HTML의 기본 틀이 나옵니다.
<body> 태그 안에 본격적으로 코드를 넣을 준비를 합니다. 저번에 배웠던 bootstrap 사이트에 접속해서 기본 세팅 코드를 복사해줍니다. JavaScript 코드는 <body> 태그 안에 넣어주고, link 코드는 <head> 태그 안에 넣어줍니다. 사이트 제목은 <title> 태그에 'Substracker | 슬로건 명칭' 을 입력해주면 사이트 상단에 내가 작성한 이름이 출력되는 것을 확인할 수 있습니다.
3. 내비게이션 바 만들기
웹사이트에 접속하면 사이트 상단에 메뉴가 있는 구역이 있습니다. 이 부분을 가르켜 Navigation Bar 이라고 부릅니다. 내비게이션 바는 직접 만들기 복잡하기도 합니다. 따라서 챗GPT에게 내비게이션 바를 만들어달라고 요청해보겠습니다. 하단의 프롬프트 예시를 살펴보면서 직접 실습해보세요. 하단과 똑같이 코드를 작성하지 말고, 자신이 만들고 싶은 웹사이트 내용을 적용하여 챗GPT에게 요청해보세요.
| [프롬프트 예시] 1. 요청사항: 웹사이트에 내비게이션 바를 넣으려고 합니다. 내비게이션 바에 해당하는 HTML, CSS, JS 코드를 작성해주세요. 2. 상세 요구사항: - 내비게이션 바의 높이를 60px로 설정해주세요. - 내비게이션 바 왼쪽에는 로고가 있습니다. - 내비게이션 바의 배경색은 어두운 색상으로 해주세요. - 로고 이미지는 바탕화면 images 폴더 안에 있는 logo.png를 사용합니다. - 로고 이미지의 높이는 20px으로 설정해주세요. - Bootstrap 라이브러리의 내비게이션 컴포넌트를 사용해주세요. - 로고를 왼쪽에서 20px 정도 떨어지게 정렬해주고, 로고를 세로 가운데로 정렬해주세요. - 내비게이션 바에 서비스 소개 링크와 로그인 링크를 추가해주세요. |
프롬프트 작성 후, 챗GPT가 코드를 알려주면 <body> 태그 안에 복사해서 붙여 넣습니다. 새로고침을 하면서 웹사이트의 변화를 확인합니다. 챗GPT가 내용을 이해하지 못하거나, 새로운 코드가 동작하지 않는다면 새로운 대화창을 켜서 GPT와 대화하거나, 아니면 조금 더 쉬운 요구사항을 하나씩 주면서 원하는 웹사이트를 만들어가는 게 좋습니다. 그렇게 해도 원하는 답변을 얻기 어렵다면, 직접 코드를 입력하는 것을 추천합니다.
4. 구독 목록 만들기
이제 본격적으로 웹사이트의 기능을 만들어보겠습니다. 이번에도 프롬프트를 구체적으로 작성하는 것이 중요합니다. 하단의 예시를 살펴보세요. 이 부분은 제가 강의를 보면서 추가적으로 적어둔 내용입니다. 나만의 웹사이트를 GPT로 만들 때, 프롬프트 형식을 참조해서 작성해보도록 합시다.
| [프롬프트 예시] 1. 역할 부여: 지금부터 당신은 프론트엔드 엔지니어입니다. 저의 요구사항대로 코드를 작성해주세요. 2. 서비스 소개: 우선 제가 만드는 웹사이트를 설명하겠습니다. 요즘 사람들은 다양한 구독 서비스를 사용하고 있습니다. 따라서 어떤 서비스를 구독하고 있는지 잊을 때가 많습니다. 그래서 구독하고 있는 서비스를 관리할 수 있는 웹사이트를 만들고 싶습니다. 3. 활용 기능 및 요청: Bootstrap 라이브러리를 활용하여 '내가 구독중인 서비스' 목록을 카드 형태로 보여주는 코드를 작성해주세요. 각 카드에는 하단의 내용을 넣어주세요. - 서비스 로고 이미지 (images/icon_youtube.png 등), 로고 이미지는 가로 72px, 세로 72px로 넣어주세요. - 서비스 이름 (Youtube, Netflix 등) - 구독료 ($9.99, $12.99 등) - 결제 주기 (Monthly, Yearly 등) - 다음 결제일 (3/30, 5/1 등) 4. 형식 관련 추가 요청: - 모든 카드 안에 내용과 이미지는 가로 가운데 정렬로 해주세요. - 한 줄에 카드가 4개씩 나오게 만들어주세요. - container div 태그 위에 여백을 넣어주세요. - 로고 이미지 위에 여백을 넣어주세요. - 다음 결제일은 bootstrap의 card-footer div 안에 넣어주세요. - 구독료와 결제 주기 폰트 크기를 줄여주고, 폰트 색은 회색으로 바꿔주세요. - 구독료와 결제 주기 사이에 간격을 줄여주세요. |
※ 해당 글은 코드잇(codeit)의 [챗GPT로 프로그래밍 경험하기] 강의 내용에서 참고하여 작성하였습니다.