가격 비교 커뮤니티 Deal-Moa

프로젝트 개요

Deal-Moa는 여러 쇼핑몰의 할인 정보를 한곳에서 공유하고 비교할 수 있도록 만든 가격 비교 커뮤니티 웹 서비스이다.

• 기간: 2020-03 ~ 2020-10
• 구분: 팀 프로젝트, 캡스톤 디자인
• 역할: 외부 API 연동, 프론트엔드 개발
• 성과: 교내 캡스톤 디자인 경진대회 우수상
• 링크: GitHub

문제

온라인 쇼핑몰의 할인 정보는 여러 곳에 흩어져 있다. 사용자는 직접 여러 사이트를 확인해야 하고, 좋은 가격을 발견해도 다른 사용자와 공유하고 이야기할 공간이 부족했다.

팀은 상품 가격을 검색하는 기능에 더해 사용자가 할인 정보를 올리고 반응할 수 있는 커뮤니티를 만들기로 했다.

구현

백엔드는 Node.js와 Express.js로 구성했고, 데이터베이스는 MongoDB를 사용했다. 화면은 HTML, CSS, JavaScript, EJS 기반으로 구현했다.

나는 외부 쇼핑몰 상품 정보를 가져오는 API 연동과 프론트엔드 개발을 맡았다. 네이버쇼핑 OpenAPI와 11st OpenAPI로 상품 정보를 가져와 사용자가 비교하기 쉬운 형태로 화면에 표시했다.

배운 점

외부 API의 응답을 그대로 화면에 쓸 수는 없었다. 응답 구조를 읽고 필요한 데이터를 골라 화면에 맞게 가공해야 했다.

백엔드, 데이터, 화면이 서로 연결돼 있어 API 응답 형태와 화면 요구사항도 팀원들과 계속 맞춰야 했다.