카테고리 없음
2024.02.18 이미지 생성기 만들어보기
gosikoca
2024. 2. 18. 21:48
오늘은 프론트엔드에 관련된 HTML,CSS,JavaScript 를 연습해볼겸 혼자서 chatGPT API를 이용해서 서비스를 만들어 보려고 한다. 사실 아직 혼자서 어떤 서비스를 구현한다는 것이 너무 어렵고 시간도 많이 걸리며 내가 원하는 것을 그대로 UI에 노출하는게 정말 어려운 것 같다. 그래도 간단하지만 한번 만들어본 서비스를 주제로 글을 작성하려한다.
AI-Image-Banksy 라는 이름으로 프로젝트를 진행하였다.
Banksy 라는 작가에게 영감을 받아서 이미지를 만들어 주는 인공지능 서비스를 만들어 보려고 하였다.
와이드 프레임은 아래와 같다.
간단하게 이름과 프롬프트창 그리고 그 사이에 이미지가 업로드가 나올 수 있는 공간을 만들었다.
아래는 이미지를 소환한 예시이다.
chapGPT 와 연동되어서 이미지가 잘 나오는 걸 볼 수 있다. 정말 간단해 보이지만 이것을 구현하는 것도 오랜시간이 걸렸다...
디자인을 처음하기 위해서는 카카오 오븐 이라는 툴을 사용하였고 이외에는 HTML,CSS,JavaScript 와 chatGPT API 만 사용을 했다.
아직까지 간단한 것만을 만드는 것에도 오랜시간이 걸리고 정말 많은 검색이 필요하다. 이번 작은 서비스를 만들어 보면서 여러 에러들을 만났고 또한 직접 코드를 작성해보다 보니 프론트엔드적인 요소의 큰 틀을 다시한번 이해하는데 도움이 되었다.
아래는 GitHub 주소이다.