소개
AI 전에는 생각도 해보지 못했던 홈페이지 라는 것을 만들어 보았습니다.
진행 방법 요약
참고 자료 : 이미지, 홈페이지, 강사프로필
프롬프트 정리 완성 : ChatGPT GPTs(PRD Builder)
홈페이지 개발 : Genspark(AI 개발자)
진행
참고 자료 : 이미지, 홈페이지, 강사프로필
이미지는 https://www.gdweb.co.kr/ 의 선정작 중 '삼성웰스토리' 사이트를 선택해보았습니다. 오렌지 색상을 포인트로 밝은 이미지를 줘보리고 했습니다. 각 참고 웹사이트 주소도 함께 있으니 쉽게 찾을 수 있었습니다.
부엌에서 여자와 함께 웹 사이트의 홈페이지
강사프로필은 젠스파크 청강시 받은 자료에 이름(저의 닉네임)과 프로필 사진(여성 --> 남성, ChatGPT로 프로필 이미지 생성)만 바꿔서 파일을 만들어 놓았습니다. 이제 준비 끝.
프롬프트 정리 완성 : ChatGPT GPTs(PRD Builder)
ChatGPT PRD Builder 에 가서 아래와 같은 최초 질문 이래로 치열한 대화 끝에 코드블럭 프롬프트를 얻었습니다.
https://www.samsungwelstory.com/main.do 여기를 레퍼런스로 해서 내 프로필 사이트를 만들어줘. 스타일, 디자인, 동작, 구조를 전체적으로 가져오고, 사진이나 이미지도 비슷한 스타일로 만들어서 사이트에 반영해줘. 어떤 프롬프트로 요청하면 될지 프롬프트를 제공해줘.홈페이지 개발 : Genspark(AI 개발자)
이제 홈페이지 개발에 들어갑니다.
중요) 사실 사전 작업이 있었습니다. 구글 계정 새로 하나 파기 -> 젠스파크 sign in -> 초대링크로써 1000credit 확보
그전에 실습해보느라 총알이 바닥난 상태였기 때문이죠.. ㅎㅎ
개발 시작)
PRD Builder에서 얻은 코드블럭을 가지고 Genspark -> AI 개발자 -> 코드블럭 프롬프트 넣기
이후에도 수정의 수정의 명령을 거쳐서 만들어 낸 결과물은 아래와 같습니다.
비즈니스 정장을 입은 남자의 이미지가 포함 된 한국 웹 사이트 스크린 샷
결과와 배운 점
처음에 히어로섹션이 작고 분리되어 있었는데 계속해서 한 3~4번(아효) 수정을 거듭하니 결국 원하는 결과물을 얻었습니다. 홈페이지를 개발하는 과정을 겪어보니 다른 것들도 비슷한 과정으로 만들어 볼 수 있겠다는 생각이 들었습니다. 감사합니다.
