From Forgotten Repo to Live App: How I Finished Photremium.com Using GitHub Copilot

개요

Photremium.com은 고성능 이미지 처리를 위한 올인원 웹 유틸리티 플랫폼으로, GitHub Copilot을 활용하여 이전의 개발 중단 상태에서 라이브 앱으로 성공적으로 완성되었습니다.

주요 내용

* Photremium.com의 기능:
* 클라이언트 측 처리: 이미지 압축, 크기 조절, 자르기, JPG 변환, QR 코드 생성, QR 코드 스캐너, 워터마크 적용 등은 브라우저 내에서 실시간으로 수행됩니다.
* AI 기반 백그라운드 제거: 클라우드 기반 서버리스 아키텍처를 통해 2초 이내에 이미지를 처리합니다.
* 클라이언트 측 얼굴 블러: 실시간으로 얼굴을 감지하여 개인 정보 보호를 위한 흐림 효과를 적용합니다.
* 개발 과정의 어려움:
* 초기 프로토타입은 로컬 환경에서만 작동했으나, 전역 배포 및 프로덕션 준비에 있어 다음과 같은 문제에 직면했습니다.
* 과도한 클라이언트 측 애셋 로딩 시 라우팅 오류
* 지역화 및 동적 메타데이터 라우팅 부재로 인한 검색 엔진 가시성 부족
* 빌드 중 발생하는 복잡한 환경 구성 오류
* 전환 및 최적화:
* Cloudflare Workers 및 Pages를 활용한 완전 서버리스 백엔드 아키텍처로 리팩토링하여 엣지 라우팅 처리를 최적화했습니다.
* 25개 언어에 대한 다국어 메타데이터 매핑 시스템을 설계하여 검색 엔진 크롤링 및 인덱싱 속도를 높였습니다.
* 최적화된 React 빌드를 Amazon Appstore에 등록하여 새로운 사용자 생태계에 도달했습니다.
* GitHub Copilot 활용 경험:
* 복잡한 다국어 메타 구조화: 25개 언어에 대한 SEO 메타 태그 처리를 위한 국제화 객체 및 배열 생성을 가속화했습니다.
* Cloudflare 엣지 워커 구성 간소화: 서버리스 환경 설정을 위한 wrangler.toml 변수 및 엣지 스크립트 라우트 핸들러 구성을 정확하게 예측하고 생성했습니다.
* 신속한 UI 리팩토링 및 엣지 케이스 처리: Amazon Appstore 래퍼에 대한 프론트엔드 레이아웃 최적화 시 반응형 CSS-in-JS 클래스와 React 비동기 파일 업로드 엣지 케이스 처리에 기여했습니다.

시사점

GitHub Copilot은 복잡한 구성, 국제화, 엣지 케이스 처리 등의 개발 과정을 혁신적으로 가속화하여, 개발자가 버려진 저장소를 실제 상용 가능한 라이브 앱으로 전환하는 데 결정적인 역할을 수행했습니다.