챗GPT로 웹사이트를 만드는 프로그래밍도 가능하다는 사실을 알고 계신가요? 여러분이 보고 계신 웹사이트의 화면을 캡쳐해서 GPT에게 캡처한 웹사이트를 구현하는 코드를 만들어달라고 하면, 5분도 걸리지 않고 웹사이트를 만들 수 있습니다. 다만 한계도 존재합니다. 챗GPT는 우리가 평소에 사용하는 수준의 웹사이트를 모두 구현하기는 어렵습니다. 결국 직접 프로그래밍도 할 수 있어야 합니다.
하지만 챗GPT가 프로젝트의 초안을 손쉽게 만들 수는 있으니, 우리는 그만큼 시간을 아끼면서 효율적으로 개발할 수 있습니다. 그 외에도 챗GPT의 도움을 받아 개발에 활용할 수 있는 것은 많습니다. 웹 개발에 기초가 되는 언어는 HTML, CSS, JavaScript입니다. HTML은 티스토리 블로그를 하는 분들에게 익숙할 겁니다. 웹사이트에 어떤 동작을 넣어줄 때, JavaScript으로 많이 구현하게 됩니다. 오늘은 웹사이트 제작에 기본이 되는 세 가지를 간단하게 살펴보겠습니다.
1. 웹 개발 기초 지식
개발 환경을 세팅하기 위해서 보통 VScode를 많이 활용합니다. 우선 홈페이지에 접속해서 VScode를 설치해줍니다. 설치가 끝났다면, 간단한 실습을 진행하겠습니다. 우선 바탕화면에 website 라는 폴더를 만들어줍니다. 그리고 VScode 메인페이지에 파일 이미지에 + 이미지가 들어간 아이콘을 클릭하여 index.html 파일을 만들어줍니다.
파일을 만든 후에는 첫 줄에 !를 쓰고 엔터를 누릅니다. 이것은 html 문서의 기본 틀을 보여주는 것입니다. 처음 시작하는 <head> 태그는 사이트에 보여지는 부분은 아니지만, 사이트의 속성 값을 채워넣는 부분입니다. 코드를 살펴보다가 하단 <body></body> 사이에 코딩을 입력하면 됩니다. 만약에 <body> 태그 안에 hello world를 적고 파일을 저장한 후, website 폴더에 있는 파일을 클릭해주면 새로운 인터넷 창에 hello world가 출력되는 것을 볼 수 있습니다.
이럴 때, 마크다운 형식을 활용해주면 더 좋습니다. heading의 줄임말인 <h1>, <h2>, <h3> 태그를 활용한다면 폰트의 크기를 다르게 만들어 가독성을 높일 수 있습니다. 여기서 <h1> 태그는 이 페이지의 구조와 내용을 정해줍니다. 어떤 태그를 쓰느냐에 따라 내용을 다양하게 표현할 수 있습니다. 만일 버튼을 넣고 싶다면 <button> 태그를 사용하면 됩니다.
만일 리스트를 쓰고 싶다면 <ul> 태그 안에 <li> 태그를 활용하면 됩니다. <ul>은 숫자가 없는 리스트이며, 만일 숫자로 리스트를 넣고 싶다면 <ol> 태그를 작성한 후, <li> 태그를 쓰면 숫자로 리스트가 나타납니다. 그리고 일부 태그는 꼭 닫는 태그가 있어야 합니다. 물론 예외도 있습니다. <img> 태그는 닫는 태그 없이 단일하게 사용하면 됩니다. <img> 안에는 직접 파일의 주소를 적어주거나, url을 적어도 됩니다.
2. CSS
CSS는 웹사이트의 기초가 되는 내용을 예쁘게 꾸며주는 역할을 한다고 보시면 됩니다. <head> 태그 안에 <style> 코드를 사용하여 그 안에 내용을 기입할 수 있습니다. 예를 들어, <h1> 태그 안에 있는 글씨 색을 바꾸고 싶다거나, 리스트를 의미하는 <li> 태그 안에 폰트 사이즈를 크게 만들어주고 싶은 경우에 CSS를 사용하면 됩니다. 자세한 프로그래밍 코드는 하단 사진을 참조하시면 됩니다. <h1> 태그와 <li> 태그 사이에 CSS 코드가 작성되었습니다. 그리고 data-science 라는 클래스 문법을 활용한다면, 전체 리스트가 아닌 일부 리스트에만 색상을 변경하는 프로그래밍도 가능합니다.
3. JavaScript
JavaScript은 웹사이트의 동작을 담당하는 언어입니다. 예를 들어, <button> 태그에 Onclick을 쓰고 '수강 시작'이라는 메세지를 쓰면, 팝업창이 뜨는 새로운 기능을 추가할 수 있습니다. 직접 JavaScript 코드를 입력할 수도 있고, 아니면 <body> 태그 뒤에 <script> 태그를 추가하는 방법도 있습니다.
그럴 듯한 웹사이트를 만드려면 굉장히 다양한 기능과 해당하는 코드가 필요합니다. 여기서 우리가 자주 활용할 수 있는 웹사이트가 있습니다. 바로 bootstrap 입니다. 이 사이트는 사람들이 미리 만들어놓은 다양한 코드를 복사해서 가져올 수 있는 사이트입니다. 구글 검색창에 bootstrap를 입력한 후, 사이트에 접속합니다. 사이트 하단에 있는 코드를 복사하여 <style> 태그와 <stript> 태그 안에 각각 붙여넣으면 됩니다. 그 다음에 docs에 컴포넌트로 들어가서 필요한 기능을 검색한 후, 원하는 기능에 맞는 코드를 복사하면 됩니다.
이처럼 bootstrap을 활용하면 조금 더 간편하고 다양한 기능을 쉽게 구현할 수 있습니다. 챗GPT에게 웹사이트 제작을 요청할 때도, bootstrap을 이용하라고 가이드를 준다면 챗GPT가 다양한 기능을 활용하여 유저에 니즈에 맞는 웹사이트를 제작할 수 있습니다. 따라서 다음 글에서는 본격적으로 어떻게 챗GPT를 이용해서 웹사이트를 제작할 수 있는지 살펴보겠습니다.
※ 해당 글은 코드잇(codeit)의 [ 챗GPT로 프로그래밍 경험하기] 강의 내용에서 참고하여 작성하였습니다.