2장

2장. 시작 전 준비

GitHub 계정을 만들고, git과 GitHub CLI를 설치한 뒤 VS Code에서 작업 폴더를 엽니다.

이번 장에서는 실제 작업을 시작하기 전에 필요한 준비를 합니다.

아직 코드를 고치지 않습니다. 먼저 계정과 작업 공간을 준비합니다. 초보자에게는 이 단계가 조금 번거롭게 느껴질 수 있지만, 한 번만 해두면 이후 작업이 훨씬 편해집니다.

이번 장의 목표

이번 장이 끝나면 아래 상태가 되어야 합니다.

  1. GitHub 계정에 로그인할 수 있습니다.
  2. GitHub 이메일 인증이 끝나 있습니다.
  3. 내 컴퓨터에 작업 폴더가 준비되어 있습니다.
  4. VS Code에서 그 폴더를 열 수 있습니다.
  5. git과 gh가 설치되어 있는지 확인할 수 있습니다.

Vercel 계정 연결은 5장(배포)에서 AI와 함께 진행합니다. 지금은 GitHub와 git만 준비하면 됩니다.

1단계. GitHub 계정 만들기

GitHub는 오픈소스 레포를 가져오고, 내 프로젝트를 저장할 곳입니다.

계정이 없다면 두 가지 방법으로 만들 수 있습니다.

방법 A. 구글 계정으로 가입하기 (추천)

구글 계정이 있다면 이 방법이 더 빠릅니다.

  1. 브라우저에서 https://github.com에 들어갑니다.
  2. 오른쪽 위 또는 화면 중앙의 Sign up 버튼을 누릅니다.
  3. 가입 화면에서 Continue with Google 또는 구글로 계속하기를 선택합니다.
  4. 연결할 구글 계정을 고릅니다.
  5. 사용자 이름을 정합니다.
  6. 화면의 안내에 따라 계정 생성을 마칩니다.

구글 계정으로 가입해도 이메일 인증은 필요합니다. 보통은 가입 흐름 안에서 같이 처리됩니다.

방법 B. 이메일로 가입하기

구글 계정을 연결하고 싶지 않다면 이메일로 직접 가입합니다.

  1. 브라우저에서 https://github.com에 들어갑니다.
  2. 오른쪽 위 또는 화면 중앙의 Sign up 버튼을 누릅니다.
  3. 이메일 주소를 입력합니다.
  4. 비밀번호를 입력합니다.
  5. 사용자 이름을 정합니다.
  6. 화면의 안내에 따라 계정 생성을 마칩니다.
  7. 가입에 사용한 이메일함을 열어 GitHub 인증 메일을 확인합니다.
  8. 인증 메일 안의 확인 버튼 또는 링크를 누릅니다.

GitHub 공식 문서에서도 GitHub를 시작하려면 무료 개인 계정을 만들고 이메일 주소를 인증해야 한다고 안내합니다.

이미 계정이 있다면 새로 만들 필요는 없습니다. https://github.com에 들어가서 로그인만 확인하면 됩니다.

2단계. GitHub 이메일 인증 확인하기

구글 계정으로 가입했다면 이 단계는 건너뛰어도 됩니다.

이메일로 가입한 경우, 인증이 안 되어 있으면 저장소 만들기 같은 기본 작업에서 막힐 수 있습니다.

GitHub에서 이메일 인증 상태를 다시 확인하려면 아래 순서로 이동합니다.

  1. GitHub에 로그인합니다.
  2. 오른쪽 위의 내 프로필 사진을 누릅니다.
  3. Settings를 누릅니다.
  4. 왼쪽 메뉴에서 Access 섹션을 찾습니다.
  5. Emails를 누릅니다.
  6. 이메일 주소 아래에 인증 관련 안내가 있는지 확인합니다.
  7. 인증 메일을 다시 받아야 한다면 Resend verification email을 누릅니다.
  8. 이메일함에서 GitHub 메일을 열고 인증 링크를 누릅니다.

메뉴 위치는 조금 바뀔 수 있지만, 핵심 경로는 프로필 사진 → Settings → Emails입니다.

3단계. 작업 폴더 만들기

이제 내 컴퓨터에 작업할 폴더를 만듭니다.

처음 따라 할 때는 폴더 이름을 짧고 단순하게 정하는 것이 좋습니다.

추천 이름:

life-wiki

예를 들어 바탕화면에 만들고 싶다면 이렇게 합니다.

  1. 바탕화면에서 빈 곳을 우클릭합니다.
  2. 새로 만들기를 선택합니다.
  3. 폴더를 선택합니다.
  4. 폴더 이름을 life-wiki로 바꿉니다.

문서 폴더에 만들고 싶다면 문서 폴더 안에서 같은 방식으로 새 폴더를 만들면 됩니다.

피하면 좋은 이름:

내 라이프 위키 최종 진짜최종

한글과 공백이 들어간 폴더명도 쓸 수는 있지만, 초보자에게는 영어 소문자와 하이픈만 있는 이름이 덜 헷갈립니다.

4단계. VS Code에서 작업 폴더 열기

이제 VS Code에서 방금 만든 폴더를 엽니다.

화면 구성은 버전에 따라 조금 다를 수 있지만, 보통은 아래 흐름 중 하나입니다.

  1. VS Code를 실행합니다.
  2. 시작 화면에서 폴더 열기 (영문: Open Folder)를 찾습니다.
  3. 메뉴에서 찾는다면 파일 → 폴더 열기... (영문: File → Open Folder...)를 선택합니다.
  4. 방금 만든 life-wiki 폴더를 선택합니다.
  5. 폴더가 열린 뒤 왼쪽 파일 탐색 영역에 폴더 이름이 보이는지 확인합니다.

폴더가 제대로 열렸는지 Claude Code에게 확인시킵니다.

지금 열린 작업 폴더가 어디인지 확인해줘.
그리고 이 폴더가 비어 있는지, 어떤 파일이 있는지 알려줘.

비어 있는 폴더라면 정상입니다. 다음 장에서 오픈소스 레포를 가져올 것입니다.

5단계. git 설치 확인하기

git은 파일 변경 기록을 관리하는 도구입니다.

VS Code에서 Claude Code에게 이렇게 요청합니다.

이 컴퓨터에 git이 설치되어 있는지 확인해줘.
설치되어 있지 않다면 초보자가 따라 할 수 있게 설치 방법을 안내해줘.

직접 터미널에서 확인하고 싶다면 아래 명령어를 사용할 수 있습니다.

git --version

버전 번호가 나오면 설치되어 있는 것입니다.

git version 2.x.x

명령어가 인식되지 않으면 git이 설치되지 않았거나, 설치 후 터미널을 새로 열지 않은 상태일 수 있습니다.

6단계. GitHub CLI 확인하기

GitHub CLI는 터미널에서 GitHub 작업을 할 수 있게 해주는 도구입니다. 명령어 이름은 gh입니다.

이번 튜토리얼에서는 다음 장에서 오픈소스 레포를 가져올 때 아래 같은 명령어를 사용합니다. 여기서 미리 실행할 필요는 없어요. 명령어가 어떻게 생겼는지만 한 번 봐두면 됩니다.

gh repo clone selfishclub/aaa-starter-kit

GitHub CLI가 설치되어 있는지 확인하려면 아래 명령어를 씁니다.

gh --version

버전 번호가 나오면 설치되어 있는 것입니다.

설치되어 있지 않다면 Claude Code에게 이렇게 말합니다.

GitHub CLI가 설치되어 있는지 확인해줘.
설치되어 있지 않다면 내 운영체제에 맞는 설치 방법을 안내해줘.

설치 후에는 GitHub 로그인이 필요할 수 있습니다. 이때는 보통 아래 명령어를 사용합니다.

gh auth login

GitHub CLI 공식 문서에서도 gh auth login으로 GitHub 계정 인증을 진행할 수 있다고 안내합니다.

명령어가 어렵다면 직접 치지 않아도 됩니다. Claude Code에게 이렇게 요청하면 됩니다.

GitHub CLI 로그인이 필요한지 확인하고, 필요하면 gh auth login 과정을 안내해줘.

7단계. Node.js 설치 확인하기

Node.js는 이 튜토리얼에서 다루는 웹사이트를 내 컴퓨터에서 띄워보고 수정할 때 필요한 도구입니다. bkit의 자동화 기능(hook)도 Node.js로 동작해요.

환경 세팅 메뉴의 Node.js 설치 페이지 에서 단계별로 안내합니다. 거기서 설치까지 마치고 오세요.

빠르게 현재 상태만 확인하고 싶다면 VS Code 터미널에서:

node -v
npm -v

두 줄 다 버전 번호가 나오고 node -v가 v18 이상이면 OK. 아니면 위 링크 페이지로 가서 설치하면 됩니다.

참고 — 다른 도구도 비슷한 방식으로 만나게 됩니다

다른 스터디나 실습에서는 Python, Java 같은 다른 도구가 필요할 수 있어요. 우리 스터디에서는 미리 설치하지 않지만, 작업하다 그 도구가 필요해지면 VS Code가 알림으로 알려주는 경우가 많습니다. 알림에서 “설치할까요?”가 뜨면 확인을 눌러 진행하거나, 안내해주는 다운로드 페이지를 따라가면 됩니다.

알림이 안 뜨거나 헷갈리면 그때도 Claude Code에게 “[도구 이름]이 필요한지 확인하고 설치까지 도와줘”라고 요청하면 돼요.

8단계. 준비 상태 한 번에 점검하기

여기까지 왔다면 준비가 제대로 되었는지 AI에게 한 번에 확인시킵니다.

아래 문장을 그대로 사용해도 됩니다.

지금 이 폴더에서 라이프 위키 튜토리얼을 시작할 준비가 되었는지 확인해줘.
확인할 것은 현재 작업 폴더 위치, 폴더 안의 파일 목록, git 설치 여부, GitHub CLI 설치 여부, GitHub 로그인 필요 여부, Node.js 설치 여부야.
문제가 있으면 초보자가 이해할 수 있게 다음 행동을 알려줘.

AI가 확인해줄 때는 보통 이런 정보를 봅니다.

  1. 현재 폴더 위치
  2. 폴더 안의 파일 목록
  3. git 설치 여부
  4. GitHub CLI 설치 여부
  5. GitHub 로그인 필요 여부
  6. Node.js 설치 여부

막힐 때 어디를 봐야 할까

이번 장을 따라가다가 메뉴를 못 찾거나 같은 곳에서 자꾸 멈춘다면, 아래 부록을 참고하세요.

이번 장에서 확인한 것

이번 장에서는 작업을 시작하기 전 필요한 준비를 했습니다.

  1. GitHub 계정을 만들고 이메일 인증을 확인합니다.
  2. life-wiki 작업 폴더를 만듭니다.
  3. VS Code에서 폴더를 엽니다.
  4. git과 GitHub CLI를 설치하고 로그인합니다.
  5. Node.js가 설치되어 있는지 확인합니다.

다음 장에서 할 것

다음 장에서는 오픈소스 레포를 내 GitHub 계정으로 Fork하고 방금 만든 폴더에 Clone합니다.

레포를 가져온 뒤 VS Code에서 열면 AI 가이드가 활성화됩니다. 그 다음부터는 AI와 함께 진행합니다.

수업 시연이라면 3장부터 따라가는 대신 → 부록 F. 시연 가이드로 바로 가도 됩니다. 환경 설정이 끝난 상태에서 Fork부터 배포까지 50분 안에 실습할 수 있습니다.