오늘은 이론 강의는 없었고 모두 실습으로 진행되었다.
AI 활용하여 웹페이지를 제작하고 깃허브에 호스팅까지 해보았다 !

AI 활용 웹페이지 제작

1️⃣ 원하는 웹페이지 레이아웃 수집

우선 핀터레스트나 아임웹 등 페이지 사이트에서 원하는 레이아웃을 캡쳐하여 저장한다.
이후 사용하는 LLM에게 웹페이지 제작 프롬프트를 간단하게 작성한다.
내가 실습에서 사용한 AI는 그록이다!

---

2️⃣ 코드를 VSCODE에 복사 후 입력

각각의 파일이 아닌 html 파일 내 css 및 js가 입력된 상태로 주어서,
간단히 수정을 부탁했다!

반환해준 파일들을 모두 VS CODE에 파일 생성 후 입력하고,
라이브 서버로 봐주었다.

---

3️⃣ 원하는 부분 코드 수정

실습에서는 예시로 2>3개의 섹션으로 구성하는 코드 수정을 부탁하였다.

이외에도 다른 수정이 있다면, 프롬프트 작성 후 반환 결과를 받아 수정하면 된다.

html 및 css 수정이 있었다.

---

추가적으로 한가지 더 수정해보았다.
전시페이지>포트폴리오로의 용도 변경이 있어서 프로젝트를 보여줄 수 있는 공간으로 재구성해주었다.

앞의 방법과 같이 해당 코드 부분을 수정하면 된다.

---

4️⃣ 이외의 내용 수정

라이브서버를 열어 개발자도구를 보고 해당 코드 부분을 확인해도 되며,
실제 페이지와 눈으로 내용을 대조해보아도 된다!
내 포트폴리오 내용으로 변경해주면 끝~

사진은 실습용으로 주신 사진을 넣었고, 큰 내용(로고나 타이틀) 부분만 수정해주었다.

이후 라이브서버로 열어 최종 결과물을 확인한다.

• 이미지 깨짐 (경로확인)
• CSS 적용 안됨 (선택자 등 오류 확인)

등등을 확인해주면 된다!

5️⃣ GitHub에 호스팅하기

라이브서버는 로컬에서만 확인할 수 있고, 링크를 통해 페이지를 보여주고자 한다면 이 방법이 필요하다.
다양한 방법이 있겠지만 Github 사용이 간단하고 무료이다 ‼️

1) 깃허브 접속 후 회원가입이나 로그인 해준다.

2) 우측 상단 + 버튼을 눌러 New repository를 클릭한다.

3) 이름 및 옵션 세팅

저장소에 사용할 이름을 적어주고, Add README을 켜준다.
이후 코드 수정이나 공유를 위해 Public으로 설정해두었다.
그리고 Create repository!

4) Settings > Pages > Branch 세팅

None에서 main으로 변경 후 저장해준다.

5) 파일 업로드 (Commit)

작성한 html, css, js 파일 및 이미지 등의 소스파일을 업로드한다.
경로가 바뀌지 않도록 폴더까지 업로드 해주어야 한다.

깃허브는 협업툴이기도 하기 때문에 파일 수정 때마다 코멘트를 적을 수 있다.
적어본 뒤 Commit 누르기 !

6) 링크 확인

다시 Settings > Pages 에 가면 링크를 확인할 수 있다.
클릭 후 오류난 것이 있는지, 내 라이브서버와 같은 형태인지 크로스체킹하기~

---

과제

오늘 과제는 역시 배운 것 활용 내 포트폴리오 페이지 만들기였다 !
위의 과정을 반복하여 웹페이지를 제작해보았다 :)

1️⃣ 레퍼런스 수집 및 그록 프롬프트 입력

직접 코드 수정하기 편하게 하기 위해 쉬운 주석까지 부탁해보았다.~!

---

2️⃣ VS CODE로 폴더 및 파일 생성+그록 생성 코드 붙여넣기

코드 수정 후 라이브서버로 바로바로 확인을 위해 VS CODE를 통해 편집할 예정이므로
VS CODE 에서 코드를 관리합니다//

---

3️⃣ 그록과 대화하며 코드 추가

수정하고 싶은 부분을 프롬프트에 입력하고, 이후 반환받은 코드로 수정합니다.

코드를 열어보았을 때 이미지 크기에 대한 CSS가 없어서,
그에 대한 수정도 부탁해보았다.

---

히어로 영역에 img 대신 video를 넣고 싶었으므로, 이도 요청해주었다.

---

네비게이션 아래로 스크롤 시 상단에 고정되는 css/js 를 요청하였다.

---

4️⃣ 그록과 대화하며 코드 수정 및 오류 검토

직접 수정할 때 보다, 하나를 바꾸었을 때 다른 곳에서 문제가 발생하는 일이 많아서
css 수정을 여러번 부탁했다...🥹

000 코드 부분 css 깨졌어, 지금까지 파일이야, 확인 후 수정해줘.

이 프롬프트를...계속 반복했다...^^

중간에 알게되면 답이 없으므로 하나 수정할 때마다
라이브 서버로 확인하는 것이 좋다!!
특히나 코드를 알지 못한다면,,, 정말로 오류를 찾기 어려울 것이다 ㅠ ㅠ

그래서 이외 폰트 관련 속성이나 컬러 등 자잘한 수정은 직접 하는게 편했다,,
class가 굉장히 잘 짜여져 있으므로, 수정하고자 하는 태그의 클래스명을 복사 후
style.css 파일에서 command+f를 통해 찾아 수정하면 된다 !

---

5️⃣ Github 호스팅 후 확인

위 실습과정에서의 호스팅 과정을 똑같이 하묘는~!!

요로코롬 페이지가 완성된다...,,,,호호홓

페이지도 자랑해주겠다.
https://youngjubest.github.io/archive_youngju/

---

회고

몇시간만에 그럴듯한 페이지가 뚝딱 완성된다니,,,, 넘 편리했다~~
내가 3학년 쯔음에 막 챗 지피티를 사용하기 시작해서 웹 퍼블리싱 할 때는
요런게 없어서 하나하나 썼는데,,,,,,, 이제 정말 [제작]은 AI가 다 해주는 것 같아서 너무 편리했다!

기본적인 지식(코드에 대한 이해 등)이 있으면 훨씬 잘 사용할 수 있을 것이라고 느꼈다!
실제로 자잘한 수정은 직접 하는게 빠르고 편했기 떄문이다ㅏ

그리고 오늘은 마지막 강의 날이었다
당장 내일부터 미니 프로젝트가 시작된다,,,🥹
나 잘할 수 있겠지 잘하고 있는 거겠쥐 끼양아

#프로젝트가보자고~