Chat GPT로 웹 개발 맛보기
- Chat GPT로 웹 개발 맛보기
→ 코딩을 거의 하지 않고 웹사이트를 하나 제작해보자.
→ 위의 이미지와 같은 느낌의 웹사이트를 제작해보려고 한다.
GPT가 매번 같은 답변을 해주는 것은 아니라서 조금 다른 코드가 나오겠지만
비슷한 느낌의 웹 사이트를 몇 분 만에 만들 수 있다.
Chat GPT의 한계와 유용성
→ Chat GPT는 아직까지는 맡긴 일에 대해서 처음부터 끝까지 완벽하게 수행하지 못한다.
→ 그렇기 때문에 원하는 디자인이나 기능을 자유자재로 구현하려면 어느 정도는 프로그래밍을 해야 한다.
→ 그럼에도 불구하고 Chat GPT를 사용하여 웹 개발을 해보는 이유는 머릿속의 아이디어를
작게나마 구현해볼 수 있으므로 시작 단계에서 시간을 들이지 않고 초안을 만들 수 있고,
개발 도중 문제가 생기거나 궁금한 부분이 있다면 Chat GPT에게 도움을 받아 빠르게 해결할 수도 있다
개념 소개
→ 우선 웹 개발의 가장 기초가 되는 건 HTML, CSS, 그리고 JavaScript이고,
HTML은 웹사이트의 뼈대로서 웹사이트에 어떤 순서로 어떤 내용들이 들어갈지를 정해준다.
→ HTML로 웹사이트의 뼈대를 구성한 뒤 스타일링을 위해서는 CSS를 사용한다.
→ 웹사이트가 동작이 없으면 재미가 없기 때문에 동작이 일어나는 등의 인터랙션은 JS로 구현한다.
- 웹 개발 기초 지식
→ index.html 파일은 이름 그대로 HTML 파일인데 이 파일이 웹 사이트에서 하나의 페이지가 된다.
→ index.html은 어떤 사이트를 들어갔을 때 나오는 홈 화면, 메인 페이지를 의미한다.
→ 각 태그마다 브라우저에서 기본적으로 정해주는 디자인 스타일이 있다.
→ head 태그 안의 있는 내용은 사이트에 나타내기 위한 목적이 아닌 웹 사이트의 기본적인 속성을 나타냄
→ CSS를 작성하는 방법에는 HTML 파일 내에 head 태그 안쪽에 style 태그를 사용하여 작성하는 방법과
외부에 CSS 파일을 따로 작성하는 방법 두 가지가 있다.
→ 스타일을 주고 싶은 선택자를 작성 후 괄호 안에 원하는 스타일링 속성과 스타일링 값을 작성해주면
스타일링 준 내용이 반영된다.
→ JS는 button을 눌렀을 때 alert이 뜨도록 작성해주면 이렇게 팝업으로 메시지가 나타난다.
→ JS도 마찬가지로 HTML 안에서 직접 자바스크립트를 작성하는 경우도 있고,
외부에 JS 파일을 새로 생성하여 작성하는 경우 두 가지가 있다.
→ 우선 위와 같이 작성하면,
h1 태그를 myHeading이라는 곳에 담아두고, myHeading을 클릭하면 h1 태그의 색상이 보라색으로
변경된다.
→ 이런식으로 클릭하면 h1 태그의 색상이 변경된 것을 확인할 수 있다.
→ Bootstrap에서 CDN을 복사해서 HTML 파일 내에 적절한 위치에 붙여넣기 한다.
→ 그리고 사이트 내의 Docs 메뉴에서 원하는 컴포넌트를 선택 후 사용하면 된다.
→ 그럼 이렇게 일일이 CSS를 지정하지 않더라도 빠르게 버튼을 꾸밀 수 있다.
→ 또 이렇게 구현하기 어려운 부분도 역시나 코드를 복사해서 붙여넣으면 복잡한 기능도 빠르게
구현이 가능하다.로고 제작 사이트1, 로고 제작 사이트2
배경 제거 사이트
- 서비스 이름, 슬로건, 로고 정하기
→ 사이트를 제작하기 전 제작하고자 하는 사이트의 이름을 정하기 위해서 GPT에게 요청을 하면
위와 같이 다양한 이름을 추천해준다.
→ 추천 받은 이름 혹은 내가 새롭게 만든 이름을 가지고 슬로건 추천을 부탁해서
이름과 마찬가지로 슬로건을 추천받은 후 로고를 제작해보자.
→ 로고는 생성형 AI를 사용해서 제작할 수도 있으나, 캔바에서 제작할 수도 있다.
- 내비게이션 바 만들기
→ 내비게이션 바는 사이트 위에 있는 메뉴바를 내비게이션 바라고 한다.
→ 혼자서 만들려면 만들수는 있지만, 반응형 홉페이지에서 브라우저의 창크기에 따라 보여지는 부분을
고려하는 등의 귀찮은 요소들이 있다.
→ 우리는 여기서 GPT와 Bootstrap에서 제공되는 네비게이션을 사용하여 빠르게 제작해보자.
→ 이런 식으로 Bootstrap에서 제공되는 기본 내비게이션 코드를 가지고 우리가 요청한 대로 코드를
작성해준다. 결과물을 보고 우리가 수정이 필요하다고 느껴지는 부분에 대해 요청해보자.
→ 내비게이션 바의 영역에서 세로를 기준으로 정가운데에 위치할 수 있도록 코드를 수정해달라고 했다.
→ 운이 좋게 한 번에 수정이 되었으나, GPT가 우리의 요구사항을 이해하지 못하는 경우에는
지속적으로 원하는 바를 명확하고 자세하게 지시를 하거나 대화를 새로 시작하거나 혹은
우리가 직접 코드를 구현하고 조금 더 쉬운 요구 사항을 요청하는 수 밖에 없다.
→ 네비게이션 바에 서비스 소개와 로그인 링크를 넣어달라고 부탁한 후 전달받은 코드로
적용해보면 오른쪽에 있는 메뉴에 내가 요청한 내용이 담긴 것을 확인할 수 있다.
- 구독 목록 만들기
→ 위의 내비게이션 바를 제작하는 것은 어느 웹 사이트나 공통적으로 만들 수 있는 부분이지만
지금부터 제작할 콘텐츠 영역은 우리 사이트에 특화된 내용이므로 GPT에게 조금 더 상세하고
명확하게 요청을 해야 한다.
→ 먼저 사이트의 개요를 이야기하고 Bootstrap 라이브러리를 사용하여 제작할 것임을 알려준 후
원하는 내용을 코드로 작성해달라고 하였다. 
→ 적용해보면 위와 같이 내가 원하는 형태로 잘 나타나는 것을 확인할 수 있다.
→ 제작된 카드 안에 원하는 내용을 넣기 위해서 GPT에게 프롬프트를 작성해주고,
괄호 열고 어떤 내용이 들어가야 하는지 예시를 2개씩 들어주었다.
→ 요청한 내용이 담겨 있는 모습을 확인할 수 있고, 이후의 수정을 원한다면 추가적으로 GPT에게
수정 사항을 요청하고 받은 코드를 다시 적용하는 식으로 사이트를 제작하면 된다.
→ 수정 과정에서 전체 코드를 받아서 수정하는 것이 어렵다면 GPT에게 수정을 해야 하는 부분에
관련된 코드만 전달해 달라고 하면 코드에 대한 설명과 함께 수정해야 하는 코드를 받을 수 있다.
→ 내가 원하는 부분에 대해서 어떻게 수정을 해야 하고, 이 코드가 무엇을 의미하는지에 대해
자세한 설명이 쓰여 있다.
→ 같은 방식으로 추가로 넣어야 하는 데이터가 있다면 위의 방법을 사용하여 내용을 추가 할 수 있다.
→ 디자인이나 추가적인 수정을 위해서는 개인의 지식을 넣어서 수정을 할 수도 있고,
GPT에게 원하는 스타일에 대한 내용을 말하고 코드를 요청해서 수정할 수도 있다.- Chat GPT를 잘 활용하려면
→ Chat GPT가 작성해주는 코드는 의도한 대로 작동하지 않기도하고, 오류를 발생시키기도 한다.
대부분은 코드 수정을 요청하여 해결할 수 있지만 간혹 여러번 반복하여 요청하였지만
원하는 코드가 나오지 않을 때도 있다.
→ 짧고 간단한 코드는 Chat GPT가 작성해줄 수 있지만 복잡한 기능을 수행하는 코드나
여러 파일에 걸쳐서 작성해야 하는 방대한 양의 코드는 Chat GPT에게도 무리이다.
→
→
→
→
→
→
→
→
→