내 컴퓨터에서
인터넷 주소까지.
만든 걸 남에게 보여주려면 인터넷 어딘가에 올려야 합니다. 처음 한 번이 번거롭고, 두 번째부터는 저장하고 밀어 넣기가 전부입니다.
처음 한 번만 하는 것
-
폴더를 버전 관리 아래로
먼저 되돌릴 수 있는 상태를 만듭니다. 이게 없으면 에이전트가 뭘 망가뜨렸을 때 돌아갈 곳이 없습니다. 작업 폴더에서 세 줄만 치면 됩니다.
git init git add -A git commit -m "첫 커밋"에이전트에게 "이 폴더를 git 저장소로 만들고 첫 커밋 해줘"라고 말해도 됩니다. 어느 쪽이든 결과는 같습니다.
-
GitHub 계정 만들기
github.com에서 가입합니다. 여기가 코드가 사는 집입니다.
⚠️ 사용자명(username)은 신중하게 — 나중에 주소에 그대로 남고, 포트폴리오 링크를 보낼 때 같이 보입니다. 학번이나 임시 별명 말고, 이름 기반으로 정하세요.
-
내 폴더를 GitHub에 올리기
웹에서 저장소를 만들고 안내대로 명령을 복사해도 되고, 터미널만으로 끝낼 수도 있습니다.
gh auth login gh repo create 내-포트폴리오 --source=. --public --pushgh가 없다면 Mac은brew install gh. 여기서도 그냥 에이전트에게 "GitHub에 새 저장소 만들어서 올려줘"라고 시키는 게 빠릅니다.⚠️ 올리기 전에 한 번 확인하세요. 비밀번호·API 키가 든 파일(
.env같은)이 섞여 있으면 공개 저장소에 그대로 노출됩니다. "올리면 안 되는 파일이 섞여 있는지 봐줘"라고 물어보세요. -
Vercel에 연결하기
vercel.com에 GitHub 계정으로 로그인합니다(별도 가입 X). 방금 만든 저장소를 가져오고, 설정은 손대지 말고 그대로 배포하세요. 정적 사이트는 기본값이 맞습니다.
1~2분 뒤
프로젝트이름.vercel.app주소가 나옵니다. 프로젝트 이름이 곧 주소이니 이것도 신경 써서 지으세요.
그다음부터는 이것뿐
고치고 → 커밋하고 → 밀어 넣으면 알아서 다시 배포됩니다. 1분쯤 걸립니다.
git add -A git commit -m "소개 문구 수정" git push에이전트에게 "바뀐 거 커밋하고 푸시해줘"라고 해도 됩니다. 커밋 메시지는 나중의 내가 읽는 메모입니다. "수정"이라고만 쓰면 두 달 뒤엔 아무 정보가 없습니다.
배포 전에 눈으로 확인할 것
-
파일 이름을 전부 소문자·영문·하이픈으로
내 Mac에서는
Image.png와image.png가 같은 파일이지만, 서버에서는 다른 파일입니다. 로컬에선 보이던 이미지가 배포하면 깨지는 이유가 대부분 이겁니다. -
index.html이 폴더 맨 위에 있나
주소의 첫 화면은 폴더 맨 위의
index.html입니다. 하위 폴더 안에 있으면 첫 화면이 비어 보입니다. -
내 컴퓨터 경로가 링크에 섞이지 않았나
/Users/이름/Desktop/…같은 경로가 남아 있으면 나만 보입니다. 폴더 기준 상대 경로여야 합니다. -
API 키·비밀번호가 코드에 박혀 있지 않나
공개 저장소는 누구나 읽습니다. 코드에 쓰지 말고, 필요하면 배포 서비스의 환경변수에 넣으세요.
-
폰에서 한 번 열어봤나
배포 주소를 폰으로 열어 훑으세요. 가로로 밀리는 요소가 있으면 거기서 티가 납니다.
-
주소가 남에게 보내도 되는 이름인가
test-1-final-final은 포트폴리오 링크로 못 씁니다. 프로젝트 이름은 언제든 바꿀 수 있으니 지금 바꾸세요.
망가뜨렸을 때
방금 올린 변경에 문제가 있는 상태입니다. 원인을 찾는 것보다 일단 되돌리는 게 먼저입니다.
Vercel 대시보드의 배포 목록에서 잘 되던 이전 배포를 다시 활성화하세요. 몇 초면 원래대로 돌아옵니다. 원인은 그다음에 찾으면 됩니다.
커밋해 둔 시점이 있으면 그 지점으로 통째로 돌아갈 수 있습니다. 이래서 ①번을 먼저 하는 겁니다.
"마지막 커밋 상태로 되돌려줘"라고 말하거나, 직접 git restore .을 치세요. 아직 커밋 안 한 변경은 사라지니 확인하고 쓰세요.
주소와 파일 이름이 안 맞는 경우입니다. /about으로 들어갔는데 파일은 About.html이거나, 폴더 위치가 다르거나.
파일 이름을 전부 소문자로 맞추고, 링크가 그 이름과 정확히 같은지 확인하세요.
십중팔구 푸시를 안 했거나, 브라우저가 예전 화면을 기억하고 있는 겁니다.
먼저 git status로 올릴 게 남았는지 보고, 다 올렸다면 Cmd+Shift+R(Windows는 Ctrl+F5)로 강제 새로고침하세요.