top of page

그린 레이디 Shopify 2.0

이 포트폴리오 프로젝트에서 나는 백엔드 로직을 위한 Shopify Liquid, 스타일링을 위한 Tailwind CSS, 상호 작용을 위한 JavaScript/jQuery의 조합을 사용하여 역동적이고 시각적으로 매력적인 스킨케어 매장 웹사이트를 만들었습니다. 이 프로젝트는 프론트엔드 및 백엔드 기술에 대한 나의 숙련도와 매력적이고 기능적인 전자 상거래 웹 사이트를 만드는 능력을 보여주는 것을 목표로 합니다.

데모 웹사이트

그림 물감

Technologies Used

  • 언어 및 라이브러리: Javascript, React.js, OpenAI API 

  • 웹 개발 프레임워크: Cloudflare, MongoDB, Vite.js

6.png

Project Features

  • 텍스트 입력: 사용자는 웹 인터페이스를 통해 이미지를 원하는 내용을 설명하는 텍스트를 입력합니다.

  • AI 모델 호출: 입력된 텍스트 설명을 OpenAI API로 전달하여 이미지 생성 모델을 호출합니다.

  • 이미지 생성: AI 모델은 입력된 설명에 기초하여 이미지를 생성하고 이를 반환합니다.

  • 이미지 표시: 생성된 이미지를 사용자에게 표시하여 확인할 수 있도록 웹 인터페이스에 출력합니다.

  • 이미지 공유: 생성된 이미지를 다른 사용자들에게 공유할 수 있습니다.

  • 이미지 다운로드: 공유된 이미지와 다른 사용자들에게 공유되어진 AI 생성 이미지를 다운로드 할 수 있습니다.

  • 이미지 검색: 원하는 이미지 키워드를 검색하면 특정 이미지만 필터링 되어서 검색이 됩니다.

7.png

Challenges & Results

  1. API Rate Limit: OpenAI API의 요청 제한으로 인해 초당 요청 수 및 일일 한도를 고려하여 API 사용을 관리했습니다. Open Ai 에서 제공하는 무료 크레딧이 없는 이상, 최소 5달러를 지불해야하며 크레딧을 모두 소진 할 시 더이상 이미지가 생성되지 않습니다.

  2. 500 Server Side Internal Error: 생성된 이미지를 공유 할 시 공유 되어지지 않고 Internal Error 가 떠서 공유 버튼을 누르면 포스트가 되어지는 함수를 다시한번 꼼꼼하게 코드를 살펴봐야 했습니다.

  3. Open Ai API 최신버전의 원초적인 문제: 최신버전의 API 가 현제 Fetch Error 로 더이상 AI 이미지가 생성되지 않으며 작동하지 않아, 버전을 한 단계 내려서 이 문제를 해결해야 했습니다.

  4. 성공적인 이미지 생성: 사용자의 텍스트 입력에 따라 모델이 다양하고 품질 높은 이미지를 생성함으로써 성과를 달성했습니다.

  5. ​저는 이 프로젝트를 통하여 최근 발생한 해결되지 않은 문제점을 다른 개발자들과 공유하고 리포트 하였습니다. 조금 더 참고하고 싶으시다면 깃헙 을 확인해주세요.

8.png

Conclusion

이 프로젝트는 OpenAI API를 이용하여 AI 이미지 생성기를 구축함으로써 혁신적이고 창의적인 결과물을 제공했습니다. 사용자의 텍스트 설명에 기반한 이미지 생성은 새로운 경험을 제공하며, 미래에 계속해서 발전해 나갈 것입니다. 이와 같은 프로젝트를 통해 AI 이미지 생성 및 웹 개발 능력을 향상시키고, 사용자 중심의 솔루션을 제공함으로써 실질적인 문제를 해결하는 능력을 보여줄 수 있었습니다. 

bottom of page