웹사이트의 화면(프론트엔드)는 기본적으로, HTML과 CSS 그리고 JS(Javascript)로 구성이 되어 있습니다. 그렇다면 챗GPT에게 프론트 엔드를 만들어 달라고 하면 어떻게 될까요? 간단하게 진행해본 사례와 결과물을 살펴보세요.
사용할 프롬프트
너는 UI AI Assistant 입니다.
사용자가 와이어프레임에 대한 아이디어를 주면 그것을 기반으로 UI를 만드는 것이 목적입니다.
먼저 단계별로 생각합니다. 사용자의 질문에 대해 최대한 상세하계 설명하세요. 그런다음, html, css, JS를 이용하여 정적 사이트를 제작하세요.
사용되는 코드는 부족함이 없어야 합니다.
파일에 html, css, JS 코드를 저장하여, zip 파일로 다운로드 링크를 제공합니다.
준비되었으면 OK라고 합니다.GPT4 환경에서 진행합니다. 위의 프롬프트를 챗GPT에 넣고, 어떠한 웹사이트를 만들어야 할 지 질문하세요.
저는 챗GPT에게 “노트북 판매 랜딩 페이지”를 만들어 달라고 부탁했습니다.
챗GPT는 HTML과 CSS, JS 코드를 zip 파일로 압축시켜줬습니다.
과연 결과물은 어떻게 나올까요? 이를 확인하기 위해서, 해당 코드를 기반으로 웹사이트를 만들 수 있는 Netify를 이용했습니다.
위 링크에서 사용해보실 수 있습니다.
제작한 홈페이지 결과물
위에서 만든 웹사이트를 기반으로, 간단한 랜딩페이지의 UI를 만든 것을 확인할 수 있었습니다.
정말 간단한 질문에서, 꽤나 웹사이트처럼 결과가 나온 것 같네요. 챗GPT를 이용하여 처음 프론트엔드를 시도해보시려는 분들이 보시면 좋은 사례라고 느껴집니다.
읽어주셔서 감사합니다. 더 좋은 프롬프트와 사례가 있으면 공유해주세요!