웹 페이지 POC - 프론트 작업편

소개

저는 이미지 분석을 통한 B2B 서비스를 구현해보면 어떨까 하는 생각으로 POC를 시작했고 퇴근 후 30분 정도씩 시간을 투자해서 총 4시간 정도 작업해서 AWS에 배포까지 진행했습니다.

어떻게 진행했는지 진행 과정을 설명드리고 거기서 제가 배운 점에 대해서 공유드리려고 합니다.

진행 방법

개발할 때 사용한 툴은 Cursor IDE 하나만 사용했구 다음의 기능을 사용했습니다.

- Chat을 통한 PRD 구체화

- Composer를 사용한 프론트엔드 구현

대략적인 생각을 주고 PRD를 작성해달라고 하는 것으로 시작했습니다.

사용한 프롬프트

Yolo 모델을 통해 사람 사진의 나이를 추정해서 이마에 나이를 붙여주는 파이썬 서버를 만들거야 이거에 대한 PRD와 API 스펙에 대해 작성해줘 


답변

============================================

Product Requirements Document (PRD)

Project Overview

Develop a Python server that uses a YOLO-based model to estimate a person’s age from an input photo and overlays the estimated age on the forehead in the output image. This server will be able to handle image uploads, detect faces, estimate ages, and return images with the age displayed on the forehead of each detected face.

... 

============================================

나온 답변을 Cursor의 Notepad에 정리하고 이를 바탕으로 데모용 API 서버를 빠르게 구현했습니다.

한국어 텍스트가 있는 검은 화면

그리고 Postman을 통해 서버 API가 잘 동작하는걸 확인했습니다.

Google 검색 페이지의 스크린샷

이후 이를 보여줄 수 있는 데모 페이지를 Composer를 통해 구현했습니다. 이후 이를 보여줄 수 있는 데모 페이지를 Composer를 통해 구현했습니다.

사용한 Composer 프롬프트 :

이미지를 업로드하면 @file_name 에 구현된 API를 참고해서 응답으로 내려오는 이미지와 비교해서 보여주는 데모 페이지를 만들어줘 
머리에 모자를 쓴 남자의 사진

데모 페이지까지 만들고 나서 API 요청량과 사용한 횟수를 보여주는 정산 화면과 분석된 이미지의 통계를 보여주는 대시보드 페이지를 추가하고 싶다는 생각이 들어서 추가로 작업을 진행했습니다.

일단 먼저 로그인 화면부터 구현했습니다. @frontend 는 폴더이름입니다.

사용한 Composer 프롬프트 :

@frontend 의 로그인 페이지를 만들고 로그인해서 들어갈 수 있게 구현해줘

한국어 텍스트가 포함된 한국어 웹사이트 스크린샷
흰색 바탕에 한국어 로그인 버튼

로그인 페이지를 만들었으나 API Server에서 login API가 구현되어 있지 않아서 로그인이 안되었고 일단 화면부터 그려서 보자는 생각에 하드 코딩된 계정을 생성해서 쓰도록 했습니다.

브라우저의 CSS 파일 스크린샷

제가 원하는 대시보드 페이지를 구현해달라고 요청합니다.

다양한 차트와 그래프가 포함된 대시보드

괜찮은 결과물이 나옵니다.

정산 페이지도 구현해 주도록 합니다.

한국어 HTML 코드의 스크린샷

한국사이트 스크린샷

Context에 디자인에 대한 내용도 공유되는지 별도 페이지도 같은 디자인으로 잘 나오는 거 같습니다.

슬슬 더미 데이터로 구현된게 많아서 서버 작업이 어떤게 필요한지 정리를 해주는게 좋겠다고 생각했구 내용을 요청해봅니다.

결과와 배운 점

1. 통상적으로 프론트, 백엔드 작업을 병렬로 진행하기 위해서 설계로 API 스펙부터 정리하고 작업을 시작하는데 작업하다보면 기획이 추가되거나 프론트에서 고려하지 못한 케이스가 있어서 백엔드 작업이 추가로 필요할 때가 많습니다. 근데 Cursor로 더미 데이터 형태로 구현해달라고 하면 프론트를 빠르게 해치우고 더미 데이터 기반으로 API를 설계하기 좋다고 생각했습니다.

2. 작은 단위 변경을 위한 TODO 리스트를 .md 파일에 적어달라고 하고 기능 구현될때마다 체크해달라고 하면 좀 더 좋은 작업을

3. Cursor로 뭔가 한번에 다 해달라고 하기 보다 소규모 작업을 나눠서 진행할 수 있게 프로세스를 짜는게 도움이 될 것 같습니다.

4. Notepad가 있지만 쓰지 않고 자체 Doc을 만들어서 쓰는게 이력관리도 편하고 보기도 편할 것 같습니다.

번외

  • CDN까지 배포한 작업이라 요 링크에서 데모 페이지 확인해보실 수 있습니다.

    • 2주 내로 더미 로그인 기능은 내려갈 예정입니다

    • API Server는 제가 테스트할때만 올려져있어서 실제 기능은 동작하지 않을 때가 많습니다.

1
2개의 답글

👉 이 게시글도 읽어보세요