제가 정착한 초급자 코딩 루틴 (Codex·GitHub·Lovable 조합)

 

바이브코딩

처음에는 그냥 재미로 시작했습니다.

Lovable에서 이것저것 만들어보다가

"이것도 넣어볼까?", "저것도 수정해볼까?"

하는 마음이 계속 생기더군요.

 

그러다 보니 어느새

VS Code를 설치하고, Git까지...

 

왜 처음엔 하나의 AI 도구만 쓰던 사람이

결국 여러 도구를 연결하게 될까요?

 

어쩌면 초급자가 가장 빨리 성장하는 방법은

'완벽하게 공부하는 것'이 아니라,

필요할 때마다 하나씩 연결하며 배우는 것인지도요.

 

목차박스

1. 초급자 코딩 방식 추천 2. 상세화면 3. 프로그램 설명

 

1. 초급자 코딩 방식 추천

1. 코드 수정, 버그 수정 → Codex
2. 코드 저장소 → GitHub
3. 화면/UI 변경 → Lovable (크레딧이 있을 때)
   Lovable의 가장 큰 장점은 화면(UI)을 빠르게 만들어 바로 확인할 수 있다는 점입니다.
   기능을 수정한 뒤 실제 화면을 바로 볼 수 있어 초급자에게 특히 편합니다.
   (러버블-매일 5크레딧 Lite 구독 중($5/월))
   

Lovable Lite 플랜

요약하면,

코덱스 웹에서 수정하고,

깃허브에 반영되면,

러버블에서 실제 화면 확인 후 게시하면 됨.

 

Codex → GitHub → Lovable가 서로 연동되어

한 번 수정하면 자연스럽게 다음 단계로 이어져요.

 

VS Code와 Git은 매일 사용하는 주 도구라기보다,

문제가 생겼을 때 해결하거나

세부 수정이 필요할 때 사용하는 보조 도구입니다.

 

작업	추천	이유
코드 수정	Codex	AI가 수정해 줌
버그 수정	Codex	가장 빠름
코드 저장	GitHub	버전 관리
화면 수정	Lovable	UI 확인이 쉬움
전체 검색	VS Code	프로젝트 전체 검색 가능
최종 배포	Lovable	Publish 한 번으로 완료

 

1. 상세화면

1) 코덱스 웹에서 수정하고,
우측 상단의 "PR 만들기" 클릭

그러면 PR 생성됨 (아직 깃허브에 반영은 안 된 상태)

Codex 웹에서 수정하고, 우측 상단 "PR만들기" 눌러 깃허브에 반영시키기.

 

2. "PR보기"를 누르면,
GitHub의 Pull Request 화면으로 이동함.

 

3. GitHub의 Pull Request 화면으로 이동한 상태에서, 우측 상단 "Ready to merge" 버튼 눌러서, Merge pull request → Confirm merge 순서로 클릭합니다.

 

4. Lovable에도 자동 반영이 되어서 "Publish (게시하기)" 누르면 끝~

 

3. 프로그램 설명

 

아래 두 프로그램은 당장은 많이 쓸 일은 없을 거예요.

그렇지만 알아두시면 좋아요.

 

1) VS Code

1. VS Code는 내 컴퓨터에서 코드를 보고, 수정하고, 실행하는 프로그램 = 내 컴퓨터의 개발 작업
2. Codex가 수정한 앱을 배포하기 전에 실행해보고 싶을 때 사용
3. GitHub웹에서 불편한 것 : 글자나 숫자하나, 색상값이나 굵기 변경 같은 작은 버그는 깃허브웹에서도 쉽게 수정이 가능하지만, 여러 파일을 동시 수정하거나, 검색하며 원인 찾거나, 프로젝트 전체에서 검색하는 건 VS Code가 훨씬 편하다.
4. VS Code에서 수정되는 건 "내 컴퓨터"에서 수정된 거라, Git으로 업로드(push)해야 최종 수정이 된다.
5. 사용법 : 
   ① 프로젝트 열기 : File → Open Folder (해당 폴더를 선택)
   ② 터미널 열기 :Terminal → New Terminal 
   ③ 앱실행 : 터미널에 "npm run dev" 입력
   ④ 코드 전체 검색 : Ctrl + Shift + F
   ⑤ 코드 수정 후 저장 : Ctrl + S

2) VS Code 설치방법

1. 인터넷 브라우저에서 검색창에 "VS Code 다운로드"라고 검색.
2. 결과에서 Microsoft 공식 Visual Studio Code 사이트 선택.
3. Download for Windows 버튼 클릭.
4. 다운로드된 설치 파일을 실행.
5. 설치 화면에서는 기본값 그대로 다음을 눌러 진행하면 됨.
6. 중간에 “PATH에 추가” 또는 “Add to PATH”가 보이면 체크.
7. 마지막에 설치를 누르고 완료되면 VS Code를 실행.

 

3) Git (GitHub 아님)

1. Git은 코드 변경사항을 기록하고
   GitHub와 주고받는 프로그램
2. Git으로 하는 대표 작업 :
   git pull→ GitHub의 최신 코드를 내 컴퓨터로 받기
   git commit→ 내가 바꾼 내용을 하나의 작업으로 기록하기
   git push→ 내 컴퓨터의 수정 내용을 GitHub로 올리기
3. 기본 사용법:
   ① 코덱스 웹에서 깃허브에 새 코드 반영하면, 내 컴퓨터에도 반영해야죠. 그럴 땐 VS Code 터미널에서 "git pull" 입력하면 최신 코드를 받아 옴.
   ② 내가 VS Code에서 직접 수정했을 때 깃허브에 올리려면, git push 입력하면 웹에도 반영됨.
4. 자주 쓰는 명령어
   npm run dev : 앱실행
   npm run build : 배포 가능 상태인지 검사
   
   npm run lint : 코드 규칙 오류 검사
   git pull : 깃허브 최신 코드 받기
   git status : 내가 수정한 파일 확인
   
   git diff : 무엇을 수정했는지 확인

    

4) Git 설치방법

1. 다운로드  https://git-scm.com/download/win
2. "Git for Windows/x64 Setup" 다운받으면 됨.
3. 설치할 때는 전부 기본값으로 Next만 눌러도 됨.
4. 마지막에 Install → Finish를 누르면 끝
5. 설치가 끝나면, VS Code를 종료했다가 다시 실행
6. 터미널에서 "git --version" 입력 후
   "git version 2.xx.x.windows.x"처럼 나오면 끝.

 

4. 마무리

 

그저 아이디어 하나로 시작했어요.

 

만들다 보니 필요한 것이 생겼고,

그때마다 하나씩 익혔어요.

AI가 도와주니까 어렵지 않더라고요.

 

그렇게 Codex를 쓰게 되었고,

GitHub를 알게 되었으며,

결국 VS Code와 Git까지 자연스럽게 연결됐습니다.

 

우리가 부족한 것은 공부가 아니라 시작인 것 같아요.

완벽하게 준비된 뒤 시작하는 사람보다,

작은 프로젝트 하나를 끝까지 만들어 본 사람이 훨씬 많은 것을 배우게 됩니다.

 

혹시 AI 코딩을 시작하려는 분이라면 모든 도구를 한꺼번에 익히려 하지 않아도 괜찮습니다. 하나를 사용하다 보면 다음 도구가 필요한 순간이 찾아오고, 그 순간이 가장 배우기 좋은 타이밍일 것입니다.

 

길은 한 걸음을 내디딘 사람에게

조금씩 모습을 보여주는 것 같습니다.

 

 

[7. 덜어내는, 생활감각] - ChatGPT Codex와 GitHub 연동 방법, AI가 내 저장소를 직접 수정하게 만드는 가장 쉬운 방법 (Lovable 크레딧 아끼기)

 

[7. 덜어내는, 생활감각] - Lovable로 AI 오답노트 앱 만들기 (GitHub · Codex까지 활용)

Lovable로 AI 오답노트 앱 만들기 (GitHub · Codex까지 활용)

 

[7. 덜어내는, 생활감각] - Lovable, Codex 앱 만들기, 직접 써본 솔직 후기 (영단어 암기 앱)

Lovable, Codex 앱 만들기, 직접 써본 솔직 후기 (영단어 암기 앱)