바이브코딩의 세계로~~ 웹 구현하기

n8n으로 백엔드를 구현했다면 이제 웹을 만들기 위해 러버블을 사용해보기로 했다.

아래 이미지가 러버블 첫 이미지이고 아래 프롬프트로 웹 개발을 요청했다.

러버블은 생각보다 느렸다.

짜잔. 처음 나온 이미지.
저번 클로드가 만들어준 html 파일과 거의 동일한 구조이다.

모바일 모드로도 볼 수 있다

근데 디자인은 그닥 맘에 들지 않았슨.
일단 디자인은 나중으로 미루고 기능 수정부터~

조건 선택 페이지

수정 1. 개인화를 위한 로그인 추가

그냥 가라데이터 입력해도 괜찮을 줄 알았는데 비밀번호 제약까지 넣어서 만들었더라...

회원가입도 하고 로그인했다ㅋㅋ

수정 2. 날씨 추가

팀장님이 기획서에 날씨 기능도 넣어놨길래 날씨 정보 표출 기능도 넣었다.
이건 진짜 기상청 API 연결한게 아니라서 가짜더라.

수정 3. 거리 설정 방법 변경

나같은 1~5km 정도만 설정하는 초보러너에게 슬라이더 UI는 너무 불편하다. 빨간색으로 표시한 범위 내에서만 움직이는게 불편해서 버튼+직접 입력으로 바꿨다.

수정 4. 난이도에 상관없음 추가

난이도보다 선호사항이 더 중요한 사람도 있을 것 같아서 난이도에 상관없음 추가!

추천결과 페이지

개인화를 위해 즐겨찾기, 좋아요/싫어요 버튼을 추가했다.

3개의 경로가 추천되는데 현재 백엔드에서는 1개만 추천되어서.. 웹을 수정해야겠다. 추후 고도화한다면 3개를 추천하는걸로...

n8n과 연동하자!

AI 추천시스템은 내가 이미 n8n에서 만들었으니 교체하자고 러버블에 요청했다.

러버블이 구체적인 정보를 요청했는데 너무 기빨려서 좀 쉬었다ㅋㅋㅋ
다시 돌아와서 진행하기...

웹훅 연결 계속 실패ㅜㅜ

포스트맨에서는 잘 되는데 러버블에서 웹훅 호출하면 에러가 났다. 기존 러버블 버려.. 새 러버블로 다시 시도

최종 n8n 워크플로우!

경로 검증 삭제! 왜? 경로 '검증'이 아니라 경로 '생성'이니까!

새 러버블과 연동하기 전에! n8n워크플로우도 수정했다.
기존에 있던 경로 검증 워크플로우는 삭제했다.
경로검증을 반영해서 카카오맵 url이 만들어지는게 아니기 때문에 엄밀히 말하면 그건 경로 생성이었다.
그리고 현재 우리는 카카오맵이 만드는 경로를 최종 서비스 형태로 결정했기 때문에 경로 생성을 2번 할 필요가 없어서 삭제했다.

구글시트에 저장 노드 삭제

구글시트에 저장한건 아직 웹에 저장할 역량이 없어서 일단 구글시트에 싹 다 저장한거였는데 이제 웹에 올리게 된다면 DB에 저장하는게 맞다고 생각해서 구글시트에 저장하는 노드를 지웠다.
그리고 이제 러버블과 수파베이스 연동을 도전하게 되는데...

simple memory 삭제

웹에서는 각 요청이 독립적이어서 메모리를 사용할 필요가 없다고 해서 삭제했다.

최종 워크플로우

삭제한 노드가 많아서 오히려 전보다 간단해졌다.
추가한 코드 노드도 있다.
프롬프트 생성: 러버블에서 전달받는 요청을 프롬프트 형식으로 전달하는 노드
러버블에게 전달: 러버블에게 전달할 수 있도록 전처리하는 코드 노드
코드 노드는 언제나 클로드의 도움을 받아서 진행했다.

새로운 웹 화면~~

휴 역시 안될 때는 새로 시작하는게 답이다!
아예 입출력 형식까지 추가한 프롬프트를 러버블에 입력했다.

색감이 바뀌었다.
디자인은... 폰트 문제가 맞는 것 같다.

디버깅

당연히 새 프롬프트로 모든게 해결되지는 않았다. 그치만 디버깅하는 법을 배웠다.

Webhook urls

웹훅 url은 두 종류이다.

1. Test URL
   Test URL에서는 노드가 돌아가는게 보이고, 아래에 상세 로그도 확인할 수 있다. 대신 실행할 때마다 Execute workflow를 클릭해야한다.

2. Production URL
   Production URL은 상단의 Active만 on 하면 계속 실행할 수 있어서 편리하다. 다만 자세한 로그는 볼 수 없다.

나는 Production URL로 보고 있었어서 웹훅 호출부터 에러인지, 중간에 에러가 났는지 확인하지 못했는데 Test URL로 보면서 금방 해결이 되었다ㅋㅋㅋ 역시 보면서 해결해야한다!

DB연결

후후 수파베이스를 연결했다.
지금 거의 기획자와 개발자 역할을 둘 다 하고 있는데 개발자의 마음이 너무 이해가면서 기획자의 마음도 이해가면서...

왜냐면..
기획자 수진짱: DB 구조 첨부터 못잡겠단 말이야...
개발자 수진짱: 근데 DB 구조 바꾸기 귀찮단 말이야..

근데 DB 수정요청해도 그냥 바꿔줬으면 좋겠어... 처음부터 정답을 말할 자신 없어...

코스 정보와 즐겨찾기, 좋아요/싫어요

처음에는 코스 정보에 대한 즐겨찾기와 좋아요/싫어요만 저장하려고 했다. 그래야 추천이 가능하니까!

1. 즐겨찾기
2. 좋아요
3. 싫어요

근데 점점 전체 정보를 저장하고 싶은거야! 그리고 그게 너무 당연했던거야! 사용자의 요청과 그에 대한 응답을 다 저장해야지! 그래야 나중에 분석하지!

1. 요청 많은 지역
2. 요청 많은 거리
3. 요청 많은 난이도

이것들은 당연히 있어야하잖아!

추천할 생각만 하고, 기본 분석 할 생각을 안했던거지... 암튼 결국 다시 테이블에 컬럼 추가했다.

근데 또 수파베이스에 데이터 안들어가서 클로드랑 같이 러버블 잡도리하니까 저장도 잘 되고 있다 후후 아래처럼 저장되는 중!

requested_distance	difficulty	preferences	course_name
3000	null	null	강남구 봉은사-코엑스 3km 시티런 코스
3000	null	null	강남구 양재천 3km 이지 시티런 코스
3000	null	null	아차산역 3.5km 산길 도전 코스
3000	easy	평지. 공원 위주	아차산역 3km 광나루 한강공원 평지 러닝 코스

추천 코스 화면

이렇게 나오고 있다! 링크

퍼블리시

아이콘

챗지피티에게 파비콘으로 사용하게 이미지 요청했다.

아.. 아닌 것 같아... 제미나이로 넘어갔다

아.. 아이콘은 나중에 하자...

나중에 할 일

1. 네이버지도 url 다시 만들기
   지금 네이버 지도에서 경로가 안보인다.
2. 파비콘 만들기?
3. 지도를 연결하고 싶긴 하다. 카카오맵이나 네이버맵 버튼을 눌러야만 경로가 보여서 조금 답답하다.