VUILD

이 레슨이 끝나면

bin/dev로 본인 PC에 서버를 띄우고 http://localhost:3000을 브라우저로 열 수 있다
"localhost"가 무엇이고 왜 본인만 접속되는지 안다
코드 수정 시 화면이 자동 새로고침되는 걸 본다 (live reload)
포트 충돌·서버 안 시작·로딩 무한 대기 등 자주 발생하는 문제를 풀 수 있다
모바일 화면 미리보기 (브라우저 개발자 도구) 사용법을 안다

localhost가 뭐예요?

localhost는 본인 컴퓨터 자신을 가리키는 주소예요. 인터넷 어딘가의 서버가 아니라, 본인 PC에서 도는 서버에 본인 브라우저로만 접속하는 셈. 실제 인터넷에 올린 게 아니라, "개발 중인 본인만 보이는 미리보기"예요.

주소 형식: http://localhost:3000

http: 브라우저가 서버와 대화하는 규약
localhost: "본인 PC 자신" (= IP 127.0.0.1과 같은 뜻)
:3000: 포트 번호 — 본인 PC 안에서 어느 문으로 들어갈지. Rails 기본 포트.

🎨 생성 (Codex CLI) — localhost 비유 다이어그램. 본인 노트북 안에 작은 서버 + 브라우저 화살표 (외부 인터넷과 분리). — localhost는 본인 PC 안의 작은 사설 미리보기.

단계 1 — `bin/dev`로 서버 시작

Antigravity 하단 터미널에서:

bin/dev

성공 시 다음과 비슷한 출력이 떠요:

11:23:45 web.1     | started with pid 12345
11:23:45 css.1     | started with pid 12346
11:23:45 js.1      | started with pid 12347
11:23:46 web.1     | => Booting Puma
11:23:46 web.1     | => Rails 8.1.x application starting in development
11:23:46 web.1     | * Listening on http://localhost:3000

마지막 줄 * Listening on http://localhost:3000이 떴으면 서버가 떠 있는 거예요. 이 터미널 창은 닫지 마세요. 서버를 끄는 명령이에요. 닫으면 서버도 같이 꺼져요.

bin/dev가 없거나 에러 나면 bin/rails server로 시도. 또는 Node 기반이면 npm run dev.

📷 캡쳐 — Antigravity 터미널에서 bin/dev 실행 + 정상 부팅 메시지.

단계 2 — 브라우저로 열기

브라우저(Chrome/Edge/Safari) 새 탭 → 주소창에 입력:

http://localhost:3000

본인 서비스의 메인 페이지가 떠야 해요. 4-6에서 만든 회원가입·로그인, 4-8에서 만든 OAuth 페이지 등이 보일 거예요.

"이 페이지에 도달할 수 없습니다"가 뜨면 서버가 안 떠 있다는 뜻. 터미널로 돌아가서 bin/dev 출력 다시 확인.

📷 캡쳐 — 브라우저에 localhost:3000으로 본인 서비스 메인 페이지가 뜬 화면. — 본인 PC에서 본인이 만든 서비스가 도는 모먼트.

단계 3 — Live Reload 체험

Rails 8의 bin/dev는 코드 수정을 감지해서 브라우저를 자동 새로고침해 줘요. 흐름:

Antigravity로 app/views/home/index.html.erb 같은 파일 열기 (메인 페이지의 view).
아무 글자나 한 줄 수정 (예: 제목을 "안녕하세요" → "안녕하세요!! 🎉").
저장 (Cmd + S 또는 Ctrl + S).
브라우저로 돌아가면 자동으로 새로고침되어 변경 반영됨.

만약 자동 새로고침 안 되면 본인이 직접 F5 또는 Cmd + R으로 새로고침. 이게 개발의 일상 사이클이에요. 코드 수정 → 저장 → 브라우저 확인 → 다시.

📷 캡쳐 — 좌 Antigravity 코드 수정 / 우 브라우저 화면이 즉시 반영된 결과 (2분할). — 코드 수정과 화면이 같은 호흡으로.

단계 4 — 모바일 화면 미리보기

본인 서비스가 모바일에서 어떻게 보일지 미리 확인하세요. 폰 들고 안 해도 돼요. 브라우저 개발자 도구로 충분.

Chrome/Edge에서 F12 또는 Cmd + Option + I (Mac) 또는 우클릭 → "검사".
개발자 도구 좌상단 "토글 디바이스 툴바" 아이콘 (폰+태블릿 모양) 클릭. 단축키 Cmd + Shift + M (Mac) / Ctrl + Shift + M (Win).
상단 드롭다운에서 "iPhone 14 Pro" 또는 "Galaxy S20" 등 선택 → 화면이 폰 사이즈로 변함.
본인 서비스를 그대로 둘러보기.

📷 캡쳐 — Chrome 개발자 도구 모바일 미리보기 (iPhone 14 Pro) + 본인 서비스 화면.

서버 끄는 법

다음 한 가지만 외우면 OK.

서버 돌고 있는 터미널 클릭 → Ctrl + C (Mac도 Cmd 아니라 Ctrl).
"Goodbye!" 같은 메시지 후 프롬프트가 돌아옴.
다시 시작하려면 그 터미널에서 bin/dev 한 번 더.

자주 발생하는 문제 + 해결

"포트 3000이 이미 사용 중입니다 (Address already in use)"

이전 서버가 안 꺼지고 남아 있을 가능성. 다음 명령으로 잡아 죽이기:

# Mac/Linux
lsof -ti:3000 | xargs kill -9
# Windows (PowerShell)
netstat -ano | findstr :3000
# 결과의 PID 확인 후
taskkill /PID 1234 /F

또는 다른 포트로 시도: bin/rails server -p 4000 후 http://localhost:4000.

"서버가 시작 안 돼요 / 에러 메시지 잔뜩"

에러 메시지의 첫 5~10줄을 그대로 Claude Code 채팅에 복붙 → "이 에러 풀어줘". 의존성 누락, DB 마이그레이션 안 됨, 환경변수 빠짐 등이 흔한 원인.

"브라우저에서 무한 로딩"

서버 터미널 출력 확인. 보통 에러가 출력돼요. asset compile 시간이 걸리는 거면 1~2분 기다려요. 그 이상이면 Ctrl+C → 다시 bin/dev.

"코드 수정해도 브라우저에 반영 안 돼요"

1) 파일 저장이 안 됐을 수 있음 — 다시 Cmd/Ctrl + S. 2) 브라우저 캐시 — 강제 새로고침 (Cmd/Ctrl + Shift + R). 3) 서버 재시작 (Ctrl+C → bin/dev). 4) config/environments/development.rb에서 config.cache_classes = false 확인.

"같은 네트워크 다른 폰으로 접속하고 싶어요"

본인 PC IP 확인 (Mac: 시스템 설정 → 네트워크 / Win: ipconfig). bin/rails server -b 0.0.0.0으로 서버 띄우면 같은 Wi-Fi의 폰에서 http://본인IP:3000로 접속 가능. 보안 주의 (개발 중에만).

자가 진단 — 통과 기준

☐ bin/dev로 서버를 시작했고 "Listening on http://localhost:3000" 메시지를 봤다
☐ 브라우저 localhost:3000에서 본인 서비스 화면이 떴다
☐ 코드 한 줄 수정 → 저장 → 브라우저 자동 반영을 확인했다 (Live reload)
☐ 브라우저 개발자 도구로 모바일 화면 미리보기를 했다
☐ Ctrl+C로 서버 종료 → 다시 bin/dev로 시작 사이클을 안다

다음 단계 → 4-10 디자인 시스템 적용 + 참고 사이트

기능은 동작하는데 화면이 못생겼죠? 다음 레슨에서 PLAN의 디자인 시스템 토큰을 본격적으로 화면에 입혀요. 그리고 참고 사이트(Tailwind UI / shadcn / Vercel / Linear / Stripe / Anthropic Claude)의 디자인 패턴을 본인 서비스에 맞게 가져오는 법을 배워요.

localhost 띄우기 + 화면 확인