[ TIL ] [ 실전프로젝트주차] '내일은 최저가' 프로젝트 회고

6주간의 최종프로젝트(2023.10.04~9.2023.11.15) '내일은 최저가'에 대한 프로젝트가 끝났다.

블로그에는 프로젝트에 대한 '회고'를 정리할 예정이라 자세한 정보는 가장 하단 노션(*그 외 URL첨부) 주소로 따로 기재하곘다.

 

간단하게 우리가 기획하고 만든 '내일은 최저가'에 대해 소개하자면

'다이나믹 프라이싱'을 활용하여  쿠팡에서 애플제품에 대해 매일 2회 가격 변동 차트를 업데이트 ->  가격 하락, 품절업데이트 시 설정한 상품에 대해 이메일 알림 제공 (카카오비즈톡 승인중)이 가능하다.

이를 통해, 고객의 구매 전환율 제고 하고 탐색 비용을 줄여줄 수 있는 서비스를 만들었다.

 

 (* 다이나믹 프라이싱이 뭐야?) 

다이나믹 프라이싱은 가격을 설정하는 전략으로, 시장 수요, 재고 상태, 고객 행동, 경쟁사 가격 등 다양한 요소에 기반하여 가격을 실시간으로 조정한다. 이 방식은 항공권, 호텔 예약, 전자 상거래 등 다양한 산업에서 사용되며, 최적의 가격을 통해 수익을 극대화하고 소비자의 구매 패턴에 더 잘 맞추기 위해 사용됨.

 

*(왼쪽부터1-2) 1. 가격변동차트 2. 상품알림설정

 

---

 

'회고'가 주제이니 설명은 이쯤 해두고

프로젝트를 하면서 있었던 트러블슈팅, 유저테스트에 대한 몇 가지 부분에 대해 적어보려 한다.

 

[ trouble SHOOTING ] 

 

1. Puppeteer의 실행문제

프로젝트에서 가장 중요한 '웹 스크래핑'을 하기 위해 Puppeteer를 사용했다. 그러나 클라우드 VM 환경(우분투)에서 Puppeteer 패키지를 사용 시 에러 발생 되었다. 

 

발생원인 :

Puppeteer는 Chromium 기반의 GUI 브라우저를 구동하는데 필요한 라이브러리가 우분투에 설치되지 않아 libatk-1.0.so.0 파일을 찾을 수 없어 브라우저 실행에 실패하였으며, 서버 용량 부족도 포함되어 있었다. 

 

해결방법: 

이 부분을 해결하기 위해, AWS Lambda, 도커, serverless framework를 사용해 Chromium – Puppeteer 의존성과 배포환경 문제 해결하는 방법을 선택했다. 

 

---

 

2. HTTPS 환경에서 JWT 토큰전송문제 

FE는 BE가 처리를 완료할 때까지 기다려야 하며 BE에서 발급한 JWT 쿠키가 FE의 로컬 스토리지에 저장되지 않음. HTTPS로 배포한 경우, 쿠키는 생성되지만 사용할 수 없음

const redirect_url = `${process.env.CLIENT_URL}/kakaologin?
authorization =${accessToken}`;
console.log(redirect_url); // 백엔드에서 확인
res.redirect(redirect_url);

 

발생원인 :

쿠키를 통한 JWT 전송이 FE와 BE 간의 통신 방식에서 문제를 일으킬 수 있으며 특히, 쿠키의 SameSite 정책, Secure 플래그 설정, CORS 정책 등으로 인해 FE에서 쿠키를 제대로 처리하지 못하는 경우가 있었다.

 

해결방법: 

이 부분을 해결하기 위해 JWT 토큰을 쿠키 대신 URL의 쿼리 스트링에 담아서 FE로 전송하고, FE는 쿼리 스트링을 파싱하여 직접 로컬 스토리지에 저장하고 사용했다.

 

이 외에도 FE에서의 React Query훅 호출 순서에 대한 문제, Styled Components props 전달오류 등 트러블 슈팅이 있었다. 

 

---

 

우리는 서비스를 만들고, 짧지만 구글폼을 통해 (11/2 ~ 11/6 (5일간)) '유저피드백' 기간을 가졌다.

 

[ UT진행 내용 및 결과 ]

 

5일이라는  짧은 기간에 49명의 유저가 피드백을 정성스럽게 남겨주었다.

구글폼의 질문은 소비자의 접속환경을 파악하고, 서비스에대한 니즈를 파악하는 항목으로 준비해두었고, 

그 결과, 아래와 같은 답변을 받아 볼 수 있었다.

*(왼쪽부터1-3) 1. UT 진행내용 2. UT 결과 중 접속환경 결과 3. 유저테스트 결과중 일부

 

 

- 사용자 중 다수(17명)가 모바일을 통해 서비스를 이용,

- 사용자의 접속환경읜 구글/크롬이 압도적으로 많았으며, safari를 사용하는 유저도 일부 존재.

 

따라서 유저의 접속환경 대부분이 모바일모바일인 점과,유저테스트 오류(버그)에 대한 내용이 모바일의 스크롤과 관련된 부분으로 '모바일 편의성' 개선에 주안점을 두고 최종 발표 이전까지 서비스를 개선하도록 했다.

 

---

 

*(왼쪽부터1-2) 1. UT피드백1) 개선사항  2. UT피드백2) 개선사항

 

 

유저피드백을 통해 다수의 의견이 있었던 피드백은 아래와 같이 개선했다.

 

UT 피드백1)

AS-IS : "모바일을 저격한 디자인으로 보이는데 컴퓨터로 보았을 땐 다소 답답해 보입니다! PC버전과 모바일 버전이 나뉘어져 있었으면 더 좋았을 것 같습니다."와 "반응형이 제대로 안됩니다안됩니다."에 대해, 

 

TO-BE : 기존 모바일 사이즈 (width: 375px)에서 태블릿및데스크탑용사이즈(375px~ 744px)까지미디어쿼리및rem을사용하여 반응형 웹페이지를 제작하는 것으로 수정하였다.

---

UT 피드백2)

AS-IS : 메인페이지에서 "아이패드, 에어팟을 제외한 카테고리를 선택하는 필터링에서 충전기들이 맨 위로 나타납니다!" 피드백에 대해, 

 

TO-BE :  카테고리에서 금액대 9만원 이상인 제품만 반환하도록 설정을 진행해서 부속품이 아닌 제품들이 먼저 반환되도록 진행했다.

( 카테고리 필터에서 페이지네이션으로 설정하다보니, productId 기준으로 정렬되면서 충전기와 같은 부속품이 먼저 나오는 점이 문제로 수정함. ) 

---

 

UT를 통해 느낀 점

 

우리에게 당연한 건? 당연하지 않다. 안당연한 게 당연하다.

언젠가, 토스의 UX디자이너가 하는 이야기를 들은 적 있다. "유저는 고정관념을 깨 주는 유일한 존재들이다."

백엔드는 그저 서버 잘 구축하고 배포하고 잘 돌아가게 하면 되지.라는 안일한 생각을 가졌던 나에게 고정관념과 틀을 깨는 계기가 됨과 동시에 많은 공부가 되었던 시간이었다. 

기간 내에 소비자의 니즈를 파악해 봄으로써 어떤 요소를 만들어야 서비스에 더 머물 수 있을지,  더 매력적인 서비스란 어떤 것인지에 대해 조금 더 고민해 볼 수 있었다. '우리 눈에는 보이지 않던 것들을 피드백을 통해 배움으로 성장해 나갈 수 있다는 것' 

너무 좋았다. 

 

 

 

---

 

 

6주간의 프로젝트를 통해, 좋았던 점을 간단히 나열해 보자면,

 

1. Nest.js를 공부해 볼 수 있어 좋았다.

- 2주 프로젝트에는 문법이 익숙하지 않아 ts와 express로 진행했다. 때문에 6주 프로젝트 시작에 공부를 하는데 시간을 많이 할애했는데, 그럼에도 무언가 배워가는 것이 있어 좋다고 생각한다.

2. UT를 통해 피드백을 받아 볼 수 있었다. 

- 서비스를 구현하는 데 있어서 가장 필요로 하는 유저의 시선에서 피드백을 받아 볼 수 있어서 좋았다.

3. 협업경험 ( 프론트앤드 / 디자이너 )

- 2주 프로젝트는 챌린지팀으로 진행하다 보니 FE와의 협업경험이 없었는데, 협업 경험을 가져볼 수 있는 경험이 되었다. 

 

 

아쉬운 부분은 여전히 남아있고, 내가 부족한 부분이 많았기에 완벽히 채울수 없겠지만 차차 보완하고 싶다.

아직 서버를 열어둔 상태라, 코드리팩토링을 할 예정이다. 필요에 따라, 디벨롭을 할 수도 있을 것이고

가장 중요하게는 테스트 코드를 놓친 부분이 있어서 팀원들과 진행해 보기로 했다. 회고는 여기서 끝.

(2주 프로젝트 회고도 못썼는데, 시간 내서 써야겠다!)

 

 

---

 

내일은 최저가 Notion

URL : https://lowprice.notion.site/624de44444494e1e86a5d30d7ea1f1aa?pvs=4

[내일은 최저가] 더 알고 싶다면?

 

언제까지 서버를 열어 둘진 모르겠지만, 당분간은 열어둘 예정이기에 서비스 서버도 함께! 

URL : https://lowest-price.store/

내일은 최저가

 

그리고 우리 프로젝트의 시연영상도 함께 공유한다.

( 광고영상 및 편집은 내가 진행했다. )

URL : https://youtu.be/NfOPmhd0Wm0