ECOYA EARTH: 재활용품 수거·포인트 서비스의 관리자와 웹 개발

에코야 얼스는 에이치알엠(HRM)의 자원순환 서비스로, 재활용품을 쉽게 분리배출하고 수거받을 수 있게 해 줍니다. 사용자는 모바일 앱에서 페트병, 캔, 우유팩, 멸균팩, 폐전선 등의 수거를 신청하고, 참여한 만큼 얼스 크레딧과 탄소중립 포인트를 적립합니다.

앱에는 수거 신청 외에 챌린지, 커뮤니티, 매거진, 기부와 응모 기능이 있어 사용자가 일상에서 친환경 활동을 꾸준히 이어 갈 수 있습니다.

프로젝트 초기 기획 단계부터 웹 개발에 참여했습니다. 웹 작업은 관리자 웹·앱 내 콘텐츠 WebView, 제휴사 웹앱, B2C 랜딩 페이지의 세 프로젝트로 나누어 진행했습니다.

제휴사 웹앱은 파트너사가 자사 고객에게 에코야 얼스의 수거 서비스를 제공할 때 쓰는 모바일 브라우저용 웹입니다. 제휴사마다 제공하는 서비스가 달라서, 노출할 탭과 수거 가능 품목 등을 관리자 페이지에서 설정하면 그 설정에 맞춰 화면이 구성되도록 만들었습니다.

• 관리자·제휴사·B2C 클라이언트 개발: React로 관리자 웹, 제휴사용 웹앱, 응모·기부 콘텐츠 WebView를 만들고, Next.js로 B2C 랜딩 페이지를 만들었습니다.
• 콘텐츠 템플릿과 미리보기 구조 설계: 관리자가 설정한 콘텐츠가 제휴사 웹과 B2C 앱에서 같은 규칙으로 보이도록 HTML 템플릿, 데이터 치환, 미리보기 구조를 직접 설계했습니다. 클라이언트마다 필요한 공통 로직은 함수로 묶어 재사용할 수 있게 했습니다.
• 제휴사별 전용 링크와 서비스 구성: 관리자에서 제휴사를 등록하면 전용 링크가 생성되고, 제휴사별 설정에 따라 제공 서비스가 구성되도록 만들었습니다. 유입 플래그는 서버에서 검증하도록 연계해 제휴사마다 노출되는 서비스 범위를 제어했습니다.
• 모바일 화면 동작 구현과 실기기 검수: 모바일 브라우저에서 뒤로가기, 바텀시트, 여러 단계 입력, 작성 중 이탈이 일어나는 상황에 맞춰 화면 동작을 구현하고, Android·iOS 실기기로 검수했습니다.
• S3·CloudFront 배포 자동화: Amazon S3와 CloudFront로 웹 배포 환경을 구성하고, GitHub Actions로 빌드·배포와 CloudFront 캐시 무효화를 자동화해 반복되던 수동 배포 작업을 줄였습니다.