사용자가 업로드한 사진을 AI가 옷을 분석해서 심슨에게 같은 옷을 입혀주고 폴라로이드 사진을 남겨주는 플랫폼입니다. 심슨필름을 사용하여 나만의 심슨을 만들고, 만든 이미지를 SNS에 공유할 수 있습니다.

인스타그램으로 공유를 해봤는데, 반응이 좋았어요~

심슨필름은 Techeer 부트캠프에서 진행한 프로젝트입니다.

이번 프로젝트에서 경험한 내용과 이슈, 해결 과정을 공유해보려 합니다.

프로젝트 개발 경험

이번 프로젝트에서 어쩌다 보니 프론트엔드 개발 리더를 맡아서 진행 했습니다. 개발 경험이 많지 않아서 처음엔 부담스러웠지만 잘 이끌어 보려 노력했습니다. 그런 과정에 많은 경험을 했는데 일부분 공유 해보겠습니다.

프론트엔드 디자인도 잘해야한다..?

프로젝트 인원중에 디자이너가 없었습니다.. 따라서 디자인은 주로 프론트가 진행하게 되었고, 디자인 하면 금방 하겠지 했지만.. 생각보다 많이 어려웠습니다😅 또한, 만들고 보니 개발자 입장에서 디자인을 하고 있었습니다. 개발하기 편한 쪽으로 말이죠. 앞으로 프론트 개발을 하면서 디자이너가 구현한 대로 개발을 해나가야 하는데, 만약 디자이너가 원하는대로 구현하지 못 하겠다면 어쩌나..? 싶었습니다. 이 과정에서 두 가지 생각이 들었습니다.

첫째, 뭐든지 해내는 실력으로 만들자!

둘째, 해내지 못하는 이유를 타당하게 말하고 고쳐달라 하자!

저의 생각은 첫 번째로 정리 했습니다. 생각해보면 디자인도 제품에 큰 영향을 준다고 생각했기 때문입니다. 따라서, 디자인을 시각화 하는 코드를 짜는데 집중을 하고 있습니다.

프론트라고 프론트만 알면 고생한다..

백엔드에 대한 지식이 많지 않던 저에게 백엔드와의 소통을 쉽지 않았습니다😅 프론트 개발을 하다 보면 백엔드에게 부탁을 해야할 일이 여러모로 많은 것 같습니다. 이러한 상황이 나타난건 API 명세서 작성 과정이였습니다. API 명세서는 보통 백엔드가 맡아서 진행하는 걸로 알고 있었습니다. 신경 안쓰고 개발을 하다가 나중에 확인을 해보니 프론트에서 필요한 데이터가 없거나, 불필요한 데이터가 있거나, 형식이 이상하거나 등등 추가적으로 소통을 해야하는 상황이 있었습니다. 이렇게 진행되다 보니 프론트도 백엔드도 다시 시간을 투자해야하는 상황이 발생했습니다. 따라서, 프론트라고 프론트만 하는게 아닌 백엔드에도 어느정도의 관심을 가지고 개발을 해나가야 원활한 프로젝트 진행이 될 수 있다는 것을 느꼈습니다. 덕분에 현재 진행중인 다른 프로젝트에서는 백엔드와 API 명세서를 같이 작성하며 진행하고 있습니다😆

이번 심슨필름 프로젝트를 통해 개발 전반적인 경험에 대해 알 수 있었던 좋은 경험이였습니다🥹 이어서 개발하면서 있었던 이슈와 해결 과정에 대해서 얘기해보겠습니다.

이슈 및 해결과정

#이슈1

⛔️ AI 분석 결과를 동기적으로 데이터 받아서 사용자의 대기 시간이 길어져 사용자 경험 감소

⛔️ 짧은 주기의 API 요청으로 트래픽 발생

해결

Polling 개념 적용
AI 분석 평균 속도 결과를 Polling 요청 간격에 적용

성과

Polling을 구현하여 주기적인 요청으로 사용자의 대기시간 감소, 사용자 경험 증가
AI 분석 평균 결과를 Polling 방식 요청에 반영하여 API 요청 트래픽 감소

#이슈2

⛔️ 페이지네이션 구현중에 불필요한 API 요청( 같은 요청 ) 트래픽 발생

해결

React-Query 라이브러리 적용하여 캐싱 기능 활용

성과

React-Query 캐싱 기능을 이용해 불필요한 API 요청 트래픽 감소
클라이언트와 서버 데이터 분리하여 관리
기존 코드보다 깔금한 에러 핸들링

정리한 생각

이번 프로젝트를 통해, 개발자로서의 역량을 크게 향상시킬 수 있었습니다. 특히, 프론트엔드 개발에 대한 이해도를 높이고, React와 React-Query를 활용하여 소스 코드를 효율적으로 작성하는 방법을 익힐 수 있었습니다. 또한, 다른 개발자들과 함께 일하면서, 협업과 코드 리뷰의 중요성을 깨닫게 되었습니다. 앞으로도 이러한 경험을 바탕으로, 더 나은 개발자로 성장할 수 있도록 노력할겁니다✋