바이브 코딩 시작하는데 그 앞에 큰 벽을 만나서 막막하지 않았나요. 깃허브. 아마 그래서 깃허브를 찾아봤을텐데 어려운 설명에 포기했을지 모르겠다. 다들 중요하다고는 하는데 복잡한 느낌이 많아서 쉽게 정리해봤다.

한글 작업 할 때 파일 이름에 최종.hwp 최종2.hwp 이렇게 한 번에 끝나지 않고 반복해서 수정하는 경우가 있다. 깃과 깃허브도 마찬가지이다. 수정 기록을 확인해서 어디서 무엇을 했는지 알 수 있다.

깃은 내 컴퓨터에서 수정 기록을 도와주는 도구이고, 깃허브는 내 컴퓨터에 있는 기록을 온라인으로 가져올 수 있게 마련해둔 공간이다. 구글 드라이브로 생각하면 쉽게 감이 온다.

필수 프로그램 설치

vscode 설치

깃허브 시작에 앞서 몇 가지 프로그램 설치를 해야한다. VSCode는 코드 편집기이다. 메모를 메모장에 하는 것처럼, 코드를 적는 공간 중 하나가 VSCode이다. Ubuntu는 리눅스 운영체제이다. 나도 윈도우를 현재 쓰고 있는데 리눅스 환경으로 바꿔주는 거다. 바이브코딩을 깃허브로 연결할 때 리눅스가 더 잘되기 때문이다.

1. VS CODE 다운로드 [VSCODE 바로가기]
2. 설치 진행

리눅스 설정 변경

윈도우를 리눅스 환경으로 만들 차례다. wsl은 윈도우 안에 리눅스를 설치하겠다는 말이다. 리눅스 환경으로 바꿀때는 powershell 실행할 때 관리자로 해야한다. 일반 권한은 시스템 파일을 건들 수 없기 때문이다.

1. 윈도우 검색창에 powershell 검색 후 우클릭 관리자 권한으로 실행 클릭
2. wsl --install 입력
3. 설치 완료 후 username (입력영어 소문자)
4. password 입력 (입력해도 화면에 안 보이는 게 정상)
5. 초록색 화면 나오면 완료

Ubuntu 실행 및 Git 설치

검정색 화면 여기가 고비일 수 있다. 하지만 여기만 넘기면 된다. 검색창에 ubuntu 검색해서 실행한다. 최신 깃을 먼저 업데이트 하고 나서 git을 설치한다. 업데이트를 하지 않고 설치 먼저 하면 오래된 버전 깃을 받을 수도 있기 때문이다. 클로드코드 실행을 위한 Node.js까지 같이 설치한다.

1. 윈도우 검색창에 ubuntu 검색 후 실행
2. sudo apt update 입력 후 비밀번호 입력
3. git을 먼저 업데이트 진행
4. sudo apt install git 깃 설치
5. sudo apt install nodejs 입력 — 클로드코드 실행에 필요

VSCode랑 리눅스 연결

이제 설치한 VScode와 리눅스를 연결하는 단계다. VSCode가 WSL을 자동으로 감지해서 연결해준다. 왼쪽 하단에 WSL: Ubuntu 아이콘이 보이면 정상이다. 그런데 그 전에 한글로 먼저 바꾸고 진행하면 편하다.

1. Ctrl + Shift + P 입력
2. Configure Display Language 입력
3. 한국어 선택 후 VScode 재시작

깃허브 가입하기

필요한 프로그램 설치는 완료됐다. 이제 깃허브 가입을 할 차례다.

1. 깃허브 홈페이지 가입 버튼 클릭 [깃허브 바로가기]
2. 지메일 회원가입 (권장)
3. 닉네임, 지역 입력 후 가입하기
4. 깃허브 가입 완료

깃허브 요금제 비교 (무료 vs 팀)

그러면 깃허브 사용 전에 돈을 내야하는 건지 아니면 무료로 사용할 수 있는지 먼저 확인해보겠다. 깃허브 가격 확인하기

혼자 쓴다면 무료 버전도 충분하다. 앞서 깃허브를 코드를 저장하는 공간이라고 말했다. 깃허브에서는 무제한으로 공간을 무료로 만들 수가 있다.

나중에 팀이 생기면 그때 업그레이드 해도 된다. 팀플랜은 한달에 4달러이다. 팀으로 작업할 때 아무나 파일을 올리면 코드가 망가질 수 있다. 그래서 팀플랜은 승인하는 사람이 따로 있다.

레포(저장소) 직접 만들기

깃허브에서 코드를 저장하기 위한 공간을 레포(Repo)라고 한다. 내 컴퓨터에 있는 저장소는 로컬 레포 (Local Repo)라고 하고, 깃허브에 있는 저장소는 원격 레포 (Remote Repo)라고 한다.

예를 들어 카페가서 노트북으로 코드 작업을 했는데 이어서 집에서 PC로 작업을 해야하는 경우가 있다. 하나의 코드를 이어서 작업해야 하기에 깃허브에 있는 원격 레포를 사용해야 한다.

왼쪽 상단 Create repository 내 저장소를 깃허브에 만들 수 있다.

1. 레포 이름 (필수) : 저장소 이름을 어떻게 할지. 영어로 간단하게 작성
2. 공개/비공개 설정 (필수) : 공개로 할지, 비공개로 할지 선택
3. Readme : 레포 처음에 보이는 소개 파일. 활성화 권장
4. 완료 되었다면 레포 생성.  .gitignore, license는 지금은 중요하지 않기에 패스.

레포가 만들어졌다면 깃허브 준비는 끝났다. 실전편에서 실제로 깃허브를 어떻게 사용하는지 알아보겠다.

The post 왕초보도 바로 이해하고 시작하는 깃허브 appeared first on 워프킹.

회사에서 바이브코딩으로 여러 기능을 만들고 있다. 빨리 합류하려면 전체 개념을 알고, 내가 해야할 부분을 파악해야 했다. 바이브코딩을 한다고 해서 깃허브가 무조건 필요한 건 아니지만, 협업을 위해서는 필수적인 도구이다.

배운 개념

깃과 깃허브

깃은 내 컴퓨터 안에서만 쓰는 공간이다. 깃허브는 그걸 밖으로 꺼내서 다른 사람들과 공유하는 공간이다. 네이버 블로그에 글을 올리면 누구나 볼 수 있는데, 깃허브는 파일과 코드를 위한 그런 공간이다.

커밋(commit)

중간 저장 기능이다. 게임에서 죽으면 처음부터 하는 게 아니라 저장한 포인트에서 다시 시작하듯, 코드도 중간에 커밋해두면 잘못해서 망가졌을 때 다시 그 시점으로 돌아올 수 있다.

푸시(Push)

말 그대로 “민다”는 뜻이다. 내 컴퓨터(깃)에서 작업한 걸 깃허브로 올리는 행동이다.

Pull Requests, Release 같은 용어도 있던데 일단 이정도만 하겠다. 용어는 쓰다고면 익숙해지기에 큰 개념부터 가져가는게 맞다고 본다.

실제로 해본 것

VSCode + 클로드코드 터미널

원래 CMD(명령 프롬프트)로 하는 게 정석이기는 하다. 아마 검정색 창에 영어 한 줄 정도 나온 화면을 본 기억이 있다면 그게 맞다. 코딩을 제대로 배우지 않은 입장에서는 그 창을 보는 순간 닫고 싶은 충동을 일으킨다. 한글도 적을 수가 없기에 더더욱 그렇다. VSCode에서는 클로드코드 터미널을 사용하면 평소에 말하는 것처럼 쓰면 된다. 클로드코드는 바이브코딩을 도와주는 도구다. 챗GPT와 제미나이도 클로드코드처럼 코딩을 도와주는 게 있다. 일단은 클로드코드를 먼저 하려고 한다.

리눅스 환경

팀원이 꿀팁을 알려줬다. 현재 윈도우 운영체제를 쓰고 있는데, 서버나 플러그인 개발은 리눅스 환경에서 하는 게 훨씬 안정적이고 빠르다고 해서 바꿨다. 예전에는 확장 프로그램 Claude Code for VScode를 썼었는데, 터미널 방식이 훨씬 낫다고 하길래 바로 진행했다.

클로드와 대화

바로 시작하면 오히려 더 오래 걸린다. 무엇을 어떻게 만들지 먼저 정리를 이야기 하면서 들어가야 한다. 찾아보니 PRD(제품 요구 사항 문서)라고 하던데, 쉽게 말하면 기획서라고 보면 되겠다.

막혔던 것

클로드코드 터미널로 진행하다가 컴퓨터를 끄니 이전 대화 내용이 다 날아갔다. 이걸 다시 해야하기는 해야겠는데 이러한 상황이 왜 생겼는지 발생하지 않으려면 어떻게 해야하는지 물어보면서 진행해야겠다. 한 단계씩 진행하면서 여러가지 궁금한 게 많이 생겼다.

다음

pull requests, release

지금 하고 있는 작업과 터미널 대화 내용 유지하는 방법 확인

The post 깃허브 개념과 클로드코드 터미널 appeared first on 워프킹.

인스타로 충분하다고 생각하시나요? 1만 팔로워 지민이도 그랬습니다.

지민이는 사진이랑 영상 콘텐츠를 꾸준히 인스타에 올렸습니다. 어느 날 감사하게 알고리즘 도움으로 올린 콘텐츠 하나가 소위 말하는 떡상을 겪었습니다. 댓글에는 “똥손인데 사진 찍는 법 좀 알려달라”는 문의가 계속 올라왔습니다. 비슷한 댓글이 많아 일단 진행하기로 했습니다.

홈페이지는 뭔가 번거로울 거 같아서 구글 폼으로 이름만 받았어요. 전화번호는 처음에 넣었었는데 불편한지 입력하지 않는 분들이 많아서 뺐습니다. 폼 제출하면 오픈 채팅방으로 가도록 링크도 잘 걸어뒀습니다.

오픈채팅방은 활발했고, 줌으로 무료 특강을 진행했습니다. 강의 후반에는 4주 챌린지 99,000원에 판매했는데 20분 정도 신청해주셨습니다. 당장 결제를 어떻게 받아야 할 지 몰라서 일단 계좌 전달하고, 입금자는 구매자용 오픈채팅방 링크를 따로 보내는 식으로 했습니다. 누가 누군지 확인할 길이 없어서 번거롭기는 했는데 어떻게든 됐습니다.

4주 챌리지도 마무리는 잘 됐습니다. 녹화본은 노션 페이지 만들어서 올렸고 80% 정도 미션 완료 해주셨습니다. 우여곡절 끝에 전체 한 사이클을 해봤는데 뿌듯하면서도 이게 맞나 하는 생각이 들기는 했습니다. 잘 모르겠지만 뭔가 진행하는 게 불편한 느낌이 들었습니다.

AI 홈페이지, 만들어봤습니다

그래서 두 번째는 좀 더 제대로 해보기로 했습니다. 마침 AI로 홈페이지 딸깍으로 만들 수 있다는 얘기는 많이 들었고 직접 해보기도 했습니다. 생각보다 예쁘게 잘 만들었습니다. 이번에도 신청 폼도 넣고 오픈 채팅방 링크도 달았습니다. 다 달고 보니 뭔가 그럴듯해 보였습니다.

두 번째 모집도 꽤 잘 됐습니다. 그런데 모집 중 첫 번째 무료 특강 구매한 분들이 생각이 났습니다. 뭔가 더 맞춤식으로 잘 해드릴 수 있을 것 같았습니다. 오픈 채팅방은 기간이 지나서 이미 닫은 상태였고, 가진 거라고는 이름 뿐이었습니다. 고객에게 다시 연락을 하고 싶었는데 방법이 없으니 답답했습니다.

ai로 홈페이지 예쁘게는 잘 만들어줬습니다. 그런데 홈페이지는 단지 예쁘게 만드는 게 전부가 아니더라고요. 누가 들어왔는지, 그 사람들에게 다시 연락할 수 있는지 이런 게 진짜 필요한 부분이었는데 딸깍으로는 되지 않았습니다.

그래서 홈페이지입니다

The post AI 시대에도 홈페이지가 필요한 이유 appeared first on 워프킹.