‘여루’ 회고 - 사이드 프로젝트 ‘여루’

최근 비사이드에서 진행한 510[SOLO 포텐데이]에 참여하여 프로젝트를 만들어서 배포까진 진행했습니다.

배포 중 여러 이슈들을 고치고 있지만, 일단 배포한 시점부터 개발의 시작이라 생각하는 필자 입장에서 다양한 분들의 여러 피드백을 들을 수 있기 때문에 좋은 경험이라 생각합니다.

그래서 여태 받았던 피드백들을 한번 복기해보고, 프로젝트 회고도 해보고, 현재 시점에서 분기점이 되어 프로젝트 개선을 한번 진행해보면 좋겠네요.

회고

개인적으로 추석 연휴에 쉴 날이 많아서 그냥 노는 것에 초점을 많이 맞췄습니다. 이 때 아니면 언제 쉬려나 싶어서 그냥 좀 많이 쉬었습니다.

뭐 다른 독자 분들도 비슷했겠지만, 아무튼 그래서 조금씩 틈틈히 핵심 기능을 개선하는 방향으로 1차적인 개발을 진행했습니다.

그 과정에서 그리고 포텐데이에서 배웠던 점들을 한번 살펴보겠습니다.

제품 요구사항 문서(Product Requirements Document, 이하 PRD) 작성하기

자신의 아이디어에 대한 PRD를 작성해달라고 ai에게 요청하면 ai가 스스로 판단하여 PRD를 형식에 어느정도 맞게 작성합니다.

그리고 본인이 보기에 아이디어 방향이나 디테일에서 무언가 문제점이 보인다면 ai와 같이 상호작용하며 점점 나아가면 됩니다.

JSON으로 구조화 하기

{
  "project": {
    "projectName": "여정 플래너 (가제)",
    "projectDescription": "멀티 스탑오버 국내여행 플래너",
    "version": "2.0",
    "lastUpdated": "2025-10-02",
    "status": "Planning"
  },
  "conversationSummary": {
    "initialConcept": "경유지마다 하루씩 숙박하는 항공권+호텔 패키지 예약 서비스.",
    "pivot1_DomesticFocus": "대한민국 한정 서비스로 변경하며 ODSay(대중교통) 및 카카오맵 API를 활용하는 것으로 구체화.",
    "pivot2_ApiConstraints": "상업용 숙소 API(야놀자 등) 사용이 어려운 비즈니스 제약에 따라, 예약/가격 기능을 제외하고 한국관광공사 TourAPI를 활용하는 것으로 결정.",
    "finalConcept": "사용자의 명확한 기능 요구사항에 따라, 예약/결제 기능을 완전히 제외한 '다구간 여행 경로 탐색 및 저장 플래너'로 최종 확정."
  },
  "prd_v2.0": {
  //이하 생략

JSON을 사용하여 프롬프트를 작성하면 ai에게 더 정확한 값을 도출해낼 수 있습니다.

근데, 이걸 혼자 작성하기에는 뭔가 감이 1도 안잡히므로 그냥 ai에게 여태 확정으로 내놓은 prd를 토대로 JSON을 작성해달라고 하면 작성해주므로 이를 복사/붙여넣기하면 다른 ai에게도 이전 ai처럼 생각하게 도와줍니다.

디자인 레퍼런스 찾기

항상 프론트엔드 개발을 하려면 필자는 보통 피그마의 디자인된 것을 보면서 구현한다는 느낌으로 개발했습니다. 그렇지 않다면 그냥 ai에게 일반적인 사이트 디자인을 해달라는 듯이 이야기하는데, 항상 의도하는 부분이 달라 ai와 필자의 대화가 길어지며 너무 시간을 끌게 되곤 했습니다.

그렇다면 디자이너도 아니면서 디자인들을 어디서 찾느냐?

바로 pinterest라는 이미지 공유 사이트에서 검색을 원하는 디자인 + ux/ui 라고 입력하면 검색 내용과 비슷한 디자인들이 나오는데,

원하는 이미지를 가져다가 프로토타입, 와이어프레임 등을 제작해주는 ai(참고: 필자는 Figma Make를 사용했습니다)에게

이와 같은 디자인으로 와이어프레임을 제작해달라고 하면 어느정도 개발자 의도에 맞는 ui/ux가 나오게 됩니다.

이렇게 기획과 디자인에서 처음 알게 되어 잘 활용하였습니다. 이제 개발에서 개인적으로 알게된 사실들을 보겠습니다.

난해한 코드는 쓰지 말자

필자가 GEMINI CLI를 써서 그런 것일지는 몰라도, 코드 들 중에 한번은 삼각함수가 나올 정도로 복잡한 로직을 ai가 작성했던 적이 있습니다. 물론 삼각함수를 모르는 것은 아니지만, 굳이 이런 방법으로 써야하나 싶더라구요.

그래서 그냥 GEMINI에게 물어보면서 난해한 코드 대신 알아보기 좋은 코드를 사용했습니다. CLI보다 그냥 GEMINI가 더 코드를 잘 작성하네요

GEMINI CLI가 말을 안들어서 사용한 방법

위의 내용에서 GEMINI CLI가 너무 말을 안들었다고 하는데, 그래서 필자는 특정 함수, 상수, 자식 컴포넌트 등의 부모 컴포넌트를 찾아달라는 식의 요청만 보내고 있습니다.

그래도 코드베이스를 아는 AI라서 이렇게 하기에 좋더라구요.

아키텍처 변경은 AI에게 비용이 많이 든다.

과거 GEMINI CLI로 아키텍처를 변경하려 했으나, 바로 토큰이 다 떨어져버리는 상황이 발생했습니다.

심지어 아직 대학생이라 프로 요금제를 사용하고 있었음에도 말이죠.

다른 사람들 입장에서는 그냥 폴더 만들고, 파일들 드래그해서 옮기면 되는 것 아니냐 하겠지만, AI입장에서는 파일을 없애고, 파일을 생성해 다시 작성하는 과정을 거치므로, 토큰이 많이 낭비 될 수 밖에 없습니다.

그러므로 아키텍처까지 AI에게 맡기면 안됩니다!

피드백

일부 경유지를 지정하는 것은 어떨까요?

그렇게 된다면, 개인적으로 개편할 부분들이 떠올라 적어보려 합니다.

현재 ui와 적용해볼 예시 ui

• 현재 가능한 로그인, 입력, 출력확인 부분이 전부 왼쪽 사이드바에 몰려 있음
• → 이로 인해 한 시선에 집중이 가능하지만, 너무 좁게 느껴질 수 있음
• → 그래서 생각한 ui
  • 왼쪽 사이드바: 유저 정보 및 설정 + 입력 폼(경유지 개수 설정한 만큼 폼의 경유지 입력 개수도 늘어남) + 간략한 설명
  • 아랫 부분 카드: 입력 정보(폼 설정 시 들어오는 입력 표시 경유지의 경우 디폴트로 랜덤이 부여됨)
  • 오른쪽 부분 카드: 출력 정보(height를 높여서 어떤 길찾기 경로가 있는지 표시)

다른 교통 수단을 추가하면 어떨까요?

그렇게 된다면, 하루에 가능한 거리를 설정하면 좋을 것 같습니다.

예를 들어,

걷기/자전거 타기를 도입할 경우 → 하루에 얼마나 멀리 갈 수 있는지에 대한 폼을 추가 숙소를 체크포인트로 삼아 나아가면 좋을 것 같습니다.

기차나, 버스와 같은 대중교통수단의 경우, 기획 때 부터 어짜피 지역마다 교통수단이 있을 것이라 판단하고,

~~시 @@도를 기준으로 경유지를 삼아서 길찾기를 수행했습니다. 걷기/자전거/자동차 모두 로직이 비슷할 것이라 판단이 되어서 도입해보고 싶네요.

결론

이렇게 해서 가장 먼저 휘발되기 아까운 기억들을 한번 저장해봤습니다. 다른 분들의 프로젝트를 보면서 정말 퀄리티가 높다는 생각을 하는데, 저도 퀄리티 높은 프로젝트로 만들어가고 싶네요.

과거 사이드프로젝트와 관련한 영상을 봤는데, 이 영상에서는 학습모드와 제품모드를 이야기했었습니다. 이를 통해 제 사이드 프로젝트는 어디에 속할까 생각을 했는데요.

아무리 생각해도 이 프로젝트는 지도 API적용을 위한 학습모드이기 때문에 학습 모드를 위한 여러 응용들을 생각하고 적용하여 학습용이라 명시할까 생각하고 있습니다. 왜냐면 이 지도 API를 다른 방식으로 활용하려 하거든요. 그 곳에서 더 열심히 하지 않을까 싶습니다.

이 글은 개발과정과 이전 프로젝트 이야기를 싹 뺀 단순 회고 입니다.