<aside> <img src="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/d2de5946-247a-475a-98d6-c56c3b69f8b5/icon128.png" alt="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/d2de5946-247a-475a-98d6-c56c3b69f8b5/icon128.png" width="40px" /> SSAFY 과정 중 진행한 팀 프로젝트 입니다. ZippyZiggy는 ChatGPT 프롬프트를 쉽고 빠르게 사용할 수 있게 도와주는 서비스입니다.
ChatGPT가 출시된 초기 단계에서 사용자 경험을 개선하고자 하는 목표로 기존의 불편한 UI를 개선하고, 새로운 기능, 번역 기능, 그리고 미리 작성된 프롬프트 적용 기능을 추가하는 데 초점을 맞췄습니다. 이 서비스는 다양한 플랫폼에서 ChatGPT의 접근성을 높이는 것을 목표로 삼았습니다.
</aside>
<aside> <img src="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/6417c4be-1638-48b0-9c87-30deb53265c8/icon128.png" alt="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/6417c4be-1638-48b0-9c87-30deb53265c8/icon128.png" width="40px" /> ZippyZiggy의 확장프로그램 프론트엔드 개발을 담당하였습니다. 확장프로그램 개발 환경 구축, UI 디자인, UI 삽입, 프롬프트 주입, 비동기 요청 코드 간소화, 다국어 지원, 낙관적 업데이트 적용, 사용자 피드백 관리 등의 역할을 수행했습니다.
</aside>
FE 개발 (크롬 확장프로그램)
웹팩을 사용해 초기 확장 프로그램 개발 환경을 구축했지만, HMR(Hot Module Replacement) 기능 구현에 어려움을 겪었습니다. 이로 인해 개발 과정에서 빈번한 새로고침이 필요했고, 이는 개발 효율성을 저하시켰습니다.
**Chrome-extension-boilerplate-react-vite 를 발견하고,** 이를 ZippyZiggy 프로젝트에 맞게 기능을 추가해 사용하기로 결정했습니다. inject.js 파일 생성과 빌드 시 자동으로 버전에 맞는 ZIP 파일을 생성하는 기능을 추가해 사용했습니다. inject.js 파일은 ChatGPT 사이트에 심을 스크립트 파일입니다. 파일 내부에는 ChatGPT 사이트의 window 객체에 확장프로그램에 필요한 fetch를 수정하는 코드와 웹사이트의 window 객체에 message 이벤트를 등록하여 Content 스크립트와의 통신을 가능하게 하는 코드가 포함되어 있습니다.
확장 프로그램의 UI가 ChatGPT와 자연스럽게 조화를 이루도록 하는 디자인을 개발하는 것이 목표였습니다. 사용자에게 친숙한 인터페이스를 제공하면서도, ZippyZiggy만의 특색을 살리는 디자인이 필요했습니다.
ChatGPT에서 사용하는 색상과 스타일을 참고하여 확장 프로그램의 디자인을 구성했습니다. 이를 통해 사용자는 ChatGPT 사용 경험과 일관성을 유지하면서도, 새로운 기능을 자연스럽게 이용할 수 있게 되었습니다. 입력창 숨기기, 맨 위로 이동하기, 공유하기 등의 기능 버튼은 ChatGPT 스타일에 맞춰 디자인을 했습니다.
