[바이브코딩] Bolt.new는 URL이 왜 하나예요?
기획자/디자이너도 AI코딩(Bolt.new) - 트러블슈팅 시리즈 (2)
안녕하세요, AI로 코딩하는 기획자 김로린입니다.
Bolt.new로 개발을 하다 보면 개발을 모르는 기획자/디자이너 입장에서는 내가 만든 사이트가 어떤 페이지이동해도 URL이 1개의 주소라는 점을 알게 되실 거예요. 실제로 저는 예체능 공연을 위한 소극단을 위해서 개발 지원을 하고 있는데, 종종 아래와 같은 사용자 문제를 겪게 되었습니다.
1. 이상한 점: 왜 뒤로가기가 안돼요?
웹 사이트에 있는 게시판에서 이상한 점이 발견됩니다. 글을 읽다가 뒤로 가기 버튼을 눌러도 아무 반응이 없게 되는 문제가 있을 수 있습니다. 브라우저가 고장 난 건가? 싶으실 거예요. 다른 사이트로 갔다가 다시 돌아와도 뒤로 가기는 여전히 작동하지 않았다. 내 사이트에서만 이상한 문제가 발생하실 수 있습니다.
2. 불편점 : URL이 왜 하나야? 왜 다 똑같지?
공연 티켓 예매 페이지와 관리자 대시보드, 그리고 운영을 위한 시스템 페이지를 각각 구분해서 개발해 두고 사용자마다 접근하기 쉽게 URL을 구분해 주고 싶었는데 여기서도 불편한 점이 발생했습니다.
홈페이지: https://mysite.com
게시글 목록: https://mysite.com ?
게시글 상세: https://mysite.com ?
소개 페이지: https://mysite.com ?
네이버 예시:
https://www.naver.com (메인)
https://news.naver.com (뉴스)
https://blog.naver.com (블로그)
3.불편점: GA4 데이터가 이상해요.
공연의 예매사이트가 오픈이 되었고, 방문자 데이터가 집계되어 들어오기 시작했습니다. 마케팅과 데이터 분석을 하고 싶었던 저는 Google Analytics 4(GA4)를 연결해서 데이터를 보려고 했습니다.
GA4에서 볼 수 있는 데이터 중에 페이지 뷰는 가장 기본적이고 필수적인 항목입니다.
예상했던 데이터:
홈페이지 방문자: 100명
게시글 목록 방문자: 50명
게시글A 방문자: 30명
게시글B 방문자: 20명
실제 GA4 데이터:
메인 페이지: 100명
다른 페이지: 0명, 0명, 0명... ?
모든 것이 합쳐져 표시되고 있는 상황그런데, 모든 페이지뷰가 하나의 페이지로 통합되어 측정되고 있었고, 세부적인 데이터를 볼 수가 없었어요.
즉, 이러면 어떤 컨텐츠가 인기 있는지, 사용자가 어떤 경로로 이동하는지 전혀 알 수 없었다. 데이터 분석이 불가능한 점이 있었습니다!
그 외의 문제: 북마크와 공유가 불가능함.
그 외에도 찾아보니 현재의 상황에서는 북마크나 공유가 불가능하다는 문제도 있었습니다. 마음에 드는 게시글을 북마크하려고 했는데, 북마크를 눌러도 홈페이지만 저장되었습니다.
원인을 찾았어요! SPA라는 놈!
실제로 Bolt.new가 제공하는 기본적인 방식의 개발을 그대로 사용한다면 이러한 문제는 계속 반복됩니다.
저는 궁금한 점이 있으면 Bolt.new에서 프롬프트 방식을 통해 문제를 찾고 분석하고 학습하곤 합니다.
SPA (Single Page Application) 개념은 IT기획자로 일하면서, 개발자들이 이야기하는 내용을 들어본 적은 있었지만 구체적으로 어떤 결과를 가지고 올지는 이렇게 깊이 이해한 적은 없었습니다.
SPA란?
Single Page = 페이지가 하나
실제로는 하나의 HTML 파일에서 JavaScript로 내용만 바꿔치기하는 방식
페이지 이동이 아니라 내용 교체
그래서 이런 일이 일어났습니다.
URL이 안 바뀌는 이유: 실제로는 페이지 이동이 아니라 내용만 바뀌는 것
뒤로가기가 안 되는 이유: 브라우저 히스토리에 기록이 안 남음
북마크가 안 되는 이유: URL이 똑같으니 구분할 수 없음
GA4 추적이 안 되는 이유: 페이지 이동이 없으니 페이지뷰가 발생하지 않음
Bolt.new는 SPA방식 기본값으로 씁니다.
Bolt.new는 기본적으로 SPA를 기본값으로 사용하고 있습니다. 사용자가 원한다면 React Router 등을 통해 전통적인 URL 라우팅을 구현할 수 있지만, 기본값이 SPA 구현이라는 점이죠.
조금 더 알아보면, Bolt.new의 창립자들은 초기에 다른 AI 모델들로 시도했지만 코드 생성 품질이 충분하지 않아 프로젝트를 보류했다가, 최신 AI 모델들로 다시 시작했다고 밝혔습니다. 결국 Bolt.new는 "빠른 프로토타이핑과 데모 생성"이라는 핵심 목적에 SPA가 가장 적합하다고 판단한 것으로 보이네요.
사용자 입장에서 불편한 점을 어떻게 개선할 것인가?
이 부분은 우리의 사업, 서비스, 프로덕트가 어떤 타겟에게 제공되는지부터 시작해야합니다. 무조건적으로 SPA를 쓴다 / 쓰지 않는다의 결과가 아니라, 기획자라면 어떤 장점 / 단점이 있는지? 표준은 무엇인지? 트렌드는 어떻게 바뀌고 있는지 생각해보는게 좋겠죠.
기획자/디자이너 입장에서 가장 중요한 것은 '사용자 관점'입니다.
제가 만들었던 만든 공연 예매사이트의 사용자 여정을 바탕으로 생각해보면요.
모바일에서의 사용자
단체톡방에 예매링크를 공유하게 됨
카카오톡에서 예매링크 받으면 → 모바일에서 즉시 해당페이지로 바로 이동하고 싶어함.
예매 소개 페이지를 보다가 신청페이지를 보고 싶어함 → 뒤로가기로 이전 페이지로 돌아감
신청을 하고 나서 자신을 보러 오는 관객 목록을 보고 싶어 함 → 관리자페이지 바로 진입하고 싶음
PC에서의 사용자
탭을 여러 개 열어두고 → 카톡 링크를 여러 예매페이지를 봄
새로고침했을 때 → 보던 페이지 그대로 유지되길 기대
주소창 URL 복사해서 → 동료에게 특정 페이지 공유하고 싶어함
그 외의 모바일에서의 여정과 유사
[기본편] 기술별 대안 비교 ⚡
자 우리는 이 문제를 해결할 방안들을 찾아볼게요.
기본편은 당장의 문제 해결을 위해서 선택할 수 있는 옵션입니다.
1️⃣ 전통적 웹사이트 (1990년대~현재) - 가장 오래된 방식
웹의 시작부터 지금까지 사용되는 가장 기본적인 방식입니다. 각 페이지마다 실제 HTML 파일이 서버에 존재하고, 페이지 이동 시 서버에서 새로운 HTML을 받아옵니다.
Bolt.new 프롬프트 예시 :
"다중 페이지 웹사이트로 만들어줘. 각 페이지마다 별도의 HTML 파일이 있고, 페이지 이동시 새로고침되는 전통적인 방식으로 구현해줘."
예시 URL:
https://mysite.com/home.html
https://mysite.com/posts.html
https://mysite.com/about.html
장점:
뒤로가기, 북마크 완벽 지원
GA4 자동 추적
SEO 최적화 용이
구현이 단순
단점:
페이지 이동시 새로고침 발생 (느림)
현대적 사용자 경험 부족
SPA의 빠른 상호작용 불가능
2️⃣ 기본 SPA (2000년대 후반) - Bolt.new의 기본값 ⚠️
AJAX 등장 시기에 혁신적이었던 기술입니다. '새로고침 없이도 데이터가 바뀌네?'라는 점에서 놀라웠지만, URL이 구분되지 않아 여러 UX 문제가 발생합니다.
Bolt.new 프롬프트 예시 :
"간단한 블로그 사이트 만들어줘" → Bolt.new가 자동으로 기본 SPA로 생성 (문제 발생!)
예시 URL:
https://mysite.com (모든 페이지가 동일한 URL)
장점:
구현이 매우 간단
빠른 프로토타이핑 가능
페이지 전환이 빠름
단점:
뒤로가기 버튼 작동 안 함
북마크, URL 공유 불가능
GA4 자동 추적 불가 (모든 페이지뷰가 홈으로 기록)
SEO 매우 불리
새로고침시 현재 페이지 위치 잃어버림
3️⃣ Hash 기반 라우팅 (2010년대 초반) - 구식 방법 ❌
Gmail 초기 버전에서 사용했던 방식입니다. HTML5 History API가 없던 시절의 차선책이었지만, 현재는 구식 방법으로 분류됩니다.
Bolt.new 프롬프트 예시 :
"Hash 라우팅(#) 방식으로 SPA 만들어줘. URL에 # 기호 사용해서 페이지 구분하고, hashchange 이벤트로 라우팅 처리해줘."
예시 URL:
https://mysite.com/#home
https://mysite.com/#posts
https://mysite.com/#posts/123
장점:
뒤로가기, 앞으로가기 지원
북마크 가능 (하지만 # 기호로 인해 어색함)
새로고침해도 현재 페이지 유지
기본 SPA보다는 나음
단점:
SEO에 불리 (검색엔진이 # 뒤 내용을 제대로 색인 안 함)
URL이 예쁘지 않음 (# 기호 포함)
현재 주요 프레임워크에서 기본 지원 중단
2025년 기준 구식 방법
신규 프로젝트에서는 사용 비추천
4️⃣ SPA 유지 + 가상 페이지 추적 (2010년대 중반) - 임시방편 ⚠️
GA4를 통한 데이터 분석이 중요해지면서 나온 임시방편입니다. 기존 방식에서 데이터 분석이 안되니 문제가 발생하죠. 다만 SPA를 없애는 방법이 아니라 SPA 구조는 그대로 두고, GA4에만 가상의 페이지 정보를 수동으로 전송하는 방식이지만, 이것도 임시방편 중 하나 입니다.
Bolt.new 프롬프트 예시 :
"기본 SPA로 만들되, GA4 추적을 위해 페이지 이동시마다 gtag('config')로 가상 페이지뷰를 수동 전송하는 코드 추가해줘. URL은 그대로 두고 분석 데이터만 개선해줘."
예시:
실제 URL: https://mysite.com (변경 없음)
GA4 전송 데이터: /virtual-home, /virtual-posts, /virtual-posts/123
장점:
GA4 데이터 수집 가능
기존 SPA 구조 유지
급한 데이터 수집에 유용
단점:
사용자 경험 문제는 여전히 존재 (뒤로가기, 북마크 등)
개발자가 수동으로 추적 코드 관리 필요
장기적 해결책이 아님
실제 URL과 GA4 데이터가 다름 (실무자 단에서 데이터 추석지 혼란 야기)
5️⃣ React Router + GA4 추적 (2015년~현재) - 현재 표준 ⭐
HTML5 History API를 활용한 현재 웹 개발 표준입니다. SPA의 빠른 성능과 전통적 웹사이트의 사용성을 모두 갖춘 최적의 해결책입니다. 실무자단에서 느끼는 문제들도 해결이 가능한 방법입니다. 기획자인 제 입장에서도 아래의 프롬프트를 모두 기억할 수는 없지만, 이제 이해가 되신다면 복사해서 쓰실 수 있으시겠죠?
Bolt.new 프롬프트 예시 :
"React Router 6+ 사용하여 실제 URL이 변경되는 SPA 만들어줘.
- 각 페이지마다 고유한 URL 경로 생성 (/, /posts, /posts/123)
- 뒤로가기, 새로고침, 북마크 모두 정상 작동하도록 구현
- GA4 페이지뷰 자동 추적 포함
- Hash 기반 라우팅(#) 사용 금지
- History API 기반으로 구현"
예시 URL:
https://mysite.com/
https://mysite.com/posts
https://mysite.com/posts/123
장점:
모든 사용자 경험 문제 해결 (뒤로가기, 북마크, 새로고침)
GA4 완벽 자동 추적
SEO 최적화 가능
현대 웹 개발 표준
SPA의 빠른 성능 + 전통적 웹의 사용성
모든 주요 프레임워크에서 지원
단점:
초기 설정이 복잡 (하지만 한 번 설정 후 자동)
서버 설정 필요 (SPA 라우팅 지원)
[가이드북] Bolt.new에서 직접해볼 수 있는 가이드 ⚡
위의 내용들을 직접 실행해 보면서 정리한 가이드는 별도의 자료로 만들어두었습니다. 상세한 내용을 가이드북으로 만들었으니, 희망하시는 분들은 댓글로 이메일을 남겨주세요. 이메일로 가이드북을 보내드릴게요. :)
해결 과정: 이제 해결?!
정리해 보겠습니다. 어떻게 요청해야 할지 모르겠다면 아래 예시 프롬프트를 참고해 주세요.
일반적인 방식 (문제 있던 방식)
"간단한 블로그 게시판 만들어줘"
✅ 개선된 요청 (문제 해결을 위한 프롬프트)
요청 사항 : 간단한 블로그 게시판 만들어주세요.
필수 요구사항 : 아래 내용을 반드시 준수해 주세요.
1.React Router 6+ 사용하여 실제 URL 변경 구현
- 각 페이지마다 고유한 URL 경로 생성 (/, /posts, /posts/123)
- 뒤로 가기, 새로고침, 북마크 모두 정상 작동하도록 구현
2. GA4 추적: 페이지 이동 시마다 자동으로 GA4 페이지뷰 전송
- useLocation 훅 사용하여 라우트 변경 감지
- gtag 이벤트로 각 페이지별 추적 구현 절대 하지 말 것:
- Hash 기반 라우팅 (#) 사용 금지
- URL 변경 없는 단순 SPA 금지
기획자로서의 깨달음
1. 기술적 디테일이 UX를 좌우한다
기획자로서 AI코딩을 처음 만나게 되면, 무엇인가 만들어지는 것만으로도 만족이 되기도 합니다. "기능만 되면 되겠지"라고 생각했지만, 디테일을 모르게 되면 사용자의 경험을 헤치게 될 수 있다는 사실은 중요한 포인트였습니다. (= 라우팅 방식 하나가 전체 사용자 경험을 완전히 바꿔버린다!)
2. 노코드/로우코드 툴의 함정
편리한 툴일수록 내부 동작 방식을 모르고 사용하기 쉽다. 기본 설정이 항상 최적은 아니라는 점이죠. 그리고 조금 더 내가 개발을 알았다면 이런 상황을 사전에 방지할 수 있고, 그만큼 프롬프트를 작성하는 시간과 비용이 줄어들 수 있다는 점입니다.
3. 개발자와의 소통법을 발전시킴
ASIS: "사이트 좀 만들어주세요!"
TOBE: "사이트를 만들어야 하고 각 페이지별 고유 URL은 필요합니다. GA4도 연결할 거라 페이지추적이 원활하게 되도록 구현해 주세요."처럼 조금 더 구체적인 요구사항을 전할 수 있습니다.
4. 데이터 분석의 중요성
결국 데이터 분석을 하려면 사전 설계가 중요하다는 것을 알게 됩니다. 정확한 추적 없이는 어떤 콘텐츠가 좋은지, 사용자가 어떻게 이동하는지 알 수 없다는 점이죠. 프로젝트 초기 기획 단계에서부터 결과와 성과를 어떻게 분석하고 무엇을 알고 싶은지 고려해야 한다는 점입니다.
5. 사용자 테스트의 가치
결국 모든 프로젝트와 서비스는 사용자를 통해 피드백을 받아야 합니다. 나 혼자 만족하는 토이 프로젝트로는 많은 것을 누락하게 될 수 있습니다. 서비스를 공개하고 피드백을 받고 운영을 하면서 축적된 피드백과 데이터로 서비스는 더 성장합니다.
앞으로 프로젝트할 때 체크리스트
bolt.new나 다른 노코드 툴을 사용할 때 반드시 확인할 것들입니다.
✅ URL 체크
[ ] 페이지마다 고유한 URL이 있는가?
[ ] 주소창에서 URL이 실제로 변경되는가?
✅ 내비게이션 및 UX 체크
[ ] 뒤로 가기 버튼이 정상 작동하는가?
[ ] 새 로고침해도 같은 페이지가 유지되는가?
✅ 공유 기능 체크
[ ] 특정 페이지 URL을 복사해서 다른 사람에게 보낼 수 있는가?
[ ] 북마크가 정확한 페이지로 연결되는가?
✅ 분석 도구 체크
[ ] GA4에서 페이지별 데이터가 분리되어 수집되는가?
[ ] 사용자 이동 경로를 추적할 수 있는가?
마무리: 작은 경험이 준 큰 깨달음
개발을 전혀 모르는 기획자가 바이브코딩을 하다가 마주친 작은 문제였지만, 이를 통해 얻은 인사이트는 컸습니다. 사용자 경험은 눈에 보이는 디자인이나 기능뿐만 아니라, URL 구조, 라우팅 방식, 데이터 추적 같은 기술적 디테일에서도 크게 좌우된다는 것도 알게 됩니다.
혹시 여러분도 bolt.new나 다른 노코드 툴을 사용하신다면, 꼭 URL 체크부터 해보세요!
이 글이 도움이 되셨다면, 같은 문제로 고민하는 다른 분들에게도 공유해 주세요.
감사합니다.
AI코딩하는 기획자 김로린 드림.
