큐피트 — 당신의 운동 파트너

제가 만든 첫 웹 서비스입니다. 2020년 대학 종합설계 프로젝트로 진행했고, 코로나로 헬스장에 갈 수 없던 시기에 집에서 운동할 수 있게 돕자는 아이디어에서 출발했어요.

지금 보면 부족한 게 많지만, 처음으로 "돌아가는 서비스"를 끝까지 만들어본 경험이라 기록해둡니다.

한눈에 보기

주요 기능

• 키·몸무게·나이·성별을 입력받아 BMI와 기초대사량 산출
• 개인 정보와 날씨 정보를 반영한 맞춤 운동 추천
• 웹에서 영상 속 자세와 비교해 교정해주는 기능
• 마일리지 적립
• 크롤링으로 모은 운동복·식단 정보 제공

1. 겪은 문제 세 가지

졸업작품 보고서에는 계획이 잔뜩 적혀 있었지만, 실제로 시간을 가장 많이 쓴 건 아래 세 개였습니다.

1.1 영상 처리가 너무 느렸다 — 서버에서 브라우저로

가장 큰 문제였습니다. 자세 교정 기능은 사용자의 동작이 영상 속 자세와 맞는지 비교하는 건데, 처음 구조는 프레임을 서버로 보내 처리하는 방식이었어요. 왕복 시간 때문에 실시간이라고 부를 수 없는 수준이었습니다.

자세 교정은 즉시 피드백이 없으면 기능 자체가 성립하지 않습니다. 운동을 다 하고 나서 "아까 자세가 틀렸어요"라고 알려주면 소용이 없으니까요.

그래서 제가 제안해 처리 위치를 옮겼습니다. TensorFlow.js와 ml5로 브라우저에서 직접 자세를 추정하도록요. 프레임을 네트워크로 보내지 않으니 왕복 시간이 통째로 사라졌습니다.

지금 정리하면 이건 "어디서 계산할 것인가" 를 바꾼 결정이었어요. 당시엔 그렇게 정리하지 못했고 "라이브러리를 바꿨더니 빨라졌다" 정도로 이해했지만, 처리 위치를 옮겨 왕복을 없앤다는 접근은 이후에도 계속 쓰게 됐습니다.

1.2 Bootstrap 충돌

여러 스타일이 서로 덮어쓰면서 화면이 깨졌습니다. 당시엔 원인을 정확히 짚지 못하고 다른 Bootstrap 라이브러리로 교체해서 해결했어요.

전역 CSS가 서로 덮어쓰는 문제라는 걸 제대로 이해한 건 한참 뒤, 실무에서 CSS 모듈과 Styled-Components로 스코프를 나누면서였습니다. 그때 "아, 큐피트에서 겪은 게 이거였구나" 싶었어요.

1.3 프런트-백엔드 axios 연동 불일치

요청 형식과 응답 형식에 대한 합의가 없어서 계속 어긋났습니다. 개발자 도구로 실제 오간 요청을 하나씩 확인하며 맞췄어요.

원시적인 방법이었지만, "코드를 보지 말고 실제로 오간 것을 보라" 는 습관이 여기서 생겼습니다. 나중에 목업을 실제 응답 형태와 똑같이 맞춰두는 습관도 결국 이 경험에서 나왔어요.

2. 이 프로젝트에서 실제로 얻은 것

• React로 서비스를 처음부터 끝까지 만들어봤습니다. 회원가입·로그인·마이페이지 같은 기본 기능을 직접 구현하면서 "화면이 아니라 서비스를 만든다"는 감각이 생겼어요.
• 성능 문제를 처음 만났습니다. 기능이 되는 것과 쓸 만한 것은 다르다는 걸 자세 교정 기능에서 배웠습니다.
• 프런트와 백엔드 사이의 합의가 없으면 시간이 녹는다는 것도요.

남은 아쉬움도 분명합니다. 자세 인식 정확도가 낮았고, 계획했던 앱 연동은 못 했고, 마일리지 적립 기준도 운동량이 아니라 단순 접속 기준에 머물렀습니다. 무엇보다 아무 측정도 하지 않았어요. "빨라졌다"는 체감뿐이라 얼마나 빨라졌는지 지금도 모릅니다.

그래도 이 프로젝트가 시작점이었습니다. 지금 하는 일과 비교하면 판단의 근거를 남기는 습관도, 측정하는 습관도 없었지만, 끝까지 만들어봤다는 게 다음으로 넘어가게 해줬어요.

화면

나머지 화면은 저장소에서 볼 수 있습니다.