00
올리기 전, 파일 이름부터 고칩니다
배포 실패의 절반은 여기서 이미 결정됩니다.
- 명함 파일 이름은 반드시
index.html— 전부 소문자입니다. - 사진 파일 이름은 영문 소문자로, 띄어쓰기 없이.
my-photo.jpg처럼요. (한글·공백·대문자는 나중에 사진이 깨지는 원인이 됩니다) - 폴더를 만들지 마세요.
index.html과 사진 파일이 나란히 놓인 상태여야 합니다.
왜 대소문자까지 따지나요
내 컴퓨터는
Photo.jpg와 photo.jpg를 같은 파일로 봅니다.
그런데 인터넷 서버는 다른 파일로 봅니다. 내 컴퓨터에서만 잘 보이는 사고가 여기서 납니다.
01
깃허브에 보관함을 만듭니다
깃허브는 내 파일을 인터넷에 보관하는 창고입니다. 그 창고 한 칸을 저장소(리포지토리)라고 부릅니다.
- 깃허브에 로그인하면 첫 화면 왼쪽에 초록색 New 버튼이 있습니다. 누릅니다.
- Repository name 칸에 영문 소문자로 이름을 씁니다. 예:
mycard - Choose visibility가 Public인지 확인합니다. 처음부터 Public이면 그대로 두면 됩니다. (공개 설정입니다. 명함은 남에게 보여줄 거라 공개가 맞고, 비공개로 하면 무료 배포가 막힐 수 있습니다)
- Add README는 Off 그대로, 그 아래 Add .gitignore와 Add license도 손대지 않습니다.
- 맨 아래 초록색 Create repository를 누릅니다.
여기까지 맞으면“…quick setup”이라고 쓰인 텅 빈 화면이 나옵니다. 비어 있는 게 정상입니다.
02
파일을 올리고, 반드시 저장 버튼을 누릅니다
가장 많이 탈락하는 지점입니다. 끌어다 놓는 것만으로는 저장되지 않습니다.
- 저장소 화면에서 Add file → Upload files를 누릅니다. 저장소가 완전히 비어 있으면 uploading an existing file 글자가 대신 보이는데, 같은 기능입니다.
index.html과 사진 파일을 한꺼번에 끌어다 놓습니다. 폴더째로 끌지 말고 파일만 선택해서 끕니다.- 화면을 아래로 끝까지 내립니다.
- 초록색 Commit changes 버튼을 누릅니다. 이게 저장 버튼입니다.
여기까지 맞으면저장소 화면에
index.html이 목록 맨 위에 그대로 보입니다. 폴더 이름이 하나 보이고 그 안에 들어 있다면 잘못된 것이니, 폴더를 지우고 파일만 다시 올리세요.03
버셀에 깃허브를 연결합니다
버셀은 창고에 있는 파일을 인터넷 주소로 바꿔주는 서비스입니다.
- 버셀에 로그인합니다. 깃허브 계정으로 로그인하는 게 가장 편합니다.
- 오른쪽 위 Add New를 누르고, 목록 맨 위 Project를 고릅니다.
- Import Git Repository 아래 내 깃허브 계정 이름을 확인합니다. 계정 목록이 아래로 펼쳐져 있으면 Esc를 눌러 닫습니다. 닫아야 뒤에 가려진 저장소 목록이 보입니다.
- 내 저장소 오른쪽 Import를 누릅니다. 목록이 길면 Search 칸에 이름을 쳐서 거릅니다.
- 저장소가 안 보이면 목록 아래 Adjust GitHub App Permissions를 눌러 All repositories(전체 허용)로 바꿉니다.
목록에 내 저장소가 없다면
저장소 목록 아래쪽의 깃허브 권한 조정 링크를 눌러 All repositories(전체 허용)로 바꾸세요.
처음 연결할 때 Only select repositories를 골랐다면 나중에 만든 저장소가 목록에 안 뜹니다.
04
아무것도 바꾸지 말고 배포합니다
설정 화면이 복잡해 보이지만, 명함 한 장은 손댈 게 없습니다.
- Project Name 칸에 이름이 자동으로 채워져 있습니다. 이 이름이 그대로 주소가 됩니다. 바꾸려면 지금이 가장 쉽습니다.
- Application Preset이 Other인지 확인합니다. 다른 게 적혀 있으면 Other로 바꿉니다. (화면에 따라 Framework Preset이라고 적혀 있기도 한데 같은 칸입니다)
- Root Directory, Build and Output Settings, Environment Variables는 절대 건드리지 않습니다.
- Deploy를 누르고 기다립니다. 보통 1분 안에 끝납니다.
- 축하 화면이 나오면 Continue to Dashboard를 누릅니다.
여기까지 맞으면Domains 아래에
내이름.vercel.app 형태의 주소가 생깁니다. 눌러서 내 명함이 나오면 성공입니다.05
주소를 다듬고 문자로 보냅니다
이게 이번 실습의 진짜 목적입니다.
- 주소가 길고 지저분하면 버셀에서 Settings → General → Project Name을 짧은 이름으로 바꿉니다. 주소도 같이 바뀝니다. (04단계에서 미리 바꿔뒀다면 건너뜁니다)
- 주소를 복사해 휴대폰 문자 앱에 붙여넣고 나에게 먼저 보내봅니다.
- 보낸 문자를 다른 사람 폰에서도 한 번 열어보게 하세요. 내 폰에서만 열리는 경우는 없지만, 사진 깨짐은 남의 폰에서 먼저 보입니다.
문자·카톡에 미리보기 이미지를 띄우고 싶다면
index.html의 <head> 안에 아래 두 줄을 넣고 다시 저장하면 됩니다.
<meta property="og:title" content="홍길동 명함">
<meta property="og:image" content="https://내주소/my-photo.jpg">
06
내용을 고치고 다시 반영합니다
수업이 끝난 뒤 혼자서 관리하려면 이 단계가 핵심입니다.
- 깃허브 저장소에서
index.html을 누릅니다. - 오른쪽 위 연필 모양 아이콘을 누르면 바로 고칠 수 있습니다.
- 다 고쳤으면 Commit changes를 누릅니다.
- 1~2분 뒤 내 주소를 새로고침하면 바뀌어 있습니다.
파일을 통째로 다시 올릴 때
반드시 같은 이름(
index.html)으로 올려야 덮어써집니다.
index(1).html처럼 이름이 달라지면 사이트는 그대로 옛날 것을 보여줍니다.