왜 하는가: 오늘은 '개발 작업실'을 차립니다
서비스를 만드는 일은 요리와 비슷합니다. 요리를 시작하기 전에 도마, 칼, 냄비, 불이 필요하듯이, 웹 서비스를 만들기 전에도 기본 도구가 필요합니다.
이번 장에서는 다음 다섯 가지를 준비합니다.
터미널: 컴퓨터에게 문자로 부탁하는 창
Node.js: 자바스크립트로 서비스를 실행하게 해주는 엔진
VS Code: 코드를 보고 고치는 작업 책상
AI 코딩 도구: 우리가 말로 부탁하면 코드를 만들어주는 개발 보조자 (Codex, Claude Code, Antigravity 중 하나)
GitHub 계정: 나중에 코드를 백업하고 서버에 올릴 준비
여기서 중요한 건 "완벽히 이해하기"가 아닙니다. 오늘의 목표는 단순합니다.
내 컴퓨터가 서비스를 만들 준비가 되었는지 확인한다.
설치 단계는 비개발자가 가장 많이 멈추는 구간입니다. 우리는 이번 시간에, 무엇을 설치하고 무엇을 확인해야 하는지를 익힐 겁니다.
AI 생성 이미지
따라하기 1: 터미널 열어보기
터미널은 컴퓨터와 문자로 대화하는 창입니다. 평소에는 마우스로 폴더를 열고 버튼을 누르죠. 터미널에서는 그 일을 짧은 문장으로 부탁합니다.
예를 들어 "지금 위치가 어디야?"라고 묻거나, "이 폴더에서 서버를 켜줘"라고 시킬 수 있습니다.
Windows에서 열기
키보드에서
Windows키를 누릅니다.검색창에
PowerShell또는터미널을 입력합니다.Windows PowerShell 또는 터미널 앱을 엽니다.
macOS에서 열기
Command + Space를 눌러 Spotlight 검색을 엽니다.Terminal또는터미널을 입력합니다.터미널 앱을 실행합니다.
터미널이 열리면 검은색 또는 흰색 창에 커서가 깜빡일 겁니다. 여기까지 오셨으면 이미 첫 관문을 넘었습니다.
아래 명령어를 입력하고 Enter를 눌러보세요.
pwdWindows PowerShell에서는 아래 명령도 사용할 수 있습니다.
Get-Location이 명령은 "내가 지금 컴퓨터의 어느 위치에 있나요?"라고 묻는 말입니다. 출력되는 경로가 사람마다 달라도 괜찮습니다.
이번에는 ls 를 눌러 보세요. 이건 List 를 약자로 한 명령어로 어떤 파일과 하위 디렉토리가 있는지 목록을 보려주는 것입니다.
따라하기 2: Node.js 설치하기
Node.js는 우리 서비스의 엔진입니다. 자동차에 엔진이 있어야 움직이듯이, Next.js와 Node.js 서버도 Node.js가 있어야 실행됩니다.
그렇다면 이 노드는 무엇일까요? 바로 프로그래밍 언어 중 하나인 자바스크립트를 아까 봤던 터미널에서 실행할 수 있게 해주는 프로그램입니다.
Node.js 공식 다운로드 페이지에는 보통 여러 버전이 보입니다. 그중 초보자는 LTS라고 표시된 버전을 고르면 됩니다. LTS는 "오래 안정적으로 지원되는 버전"이라고 이해하시면 됩니다. 실험용 최신 모델보다, 오래 타도 고장이 적은 안정 모델을 고르는 느낌입니다.1
브라우저를 엽니다.
Node.js 공식 다운로드 페이지로 갑니다: https://nodejs.org/en/download
LTS라고 표시된 버전을 선택합니다.
내 운영체제에 맞는 설치 파일을 내려받습니다.
설치 파일을 실행합니다.
중간에 선택지가 나오면, 처음에는 기본값 그대로 진행합니다.
설치가 끝났다면 터미널을 완전히 닫았다가 다시 여세요. 새로 설치한 도구를 터미널이 알아차리게 하는 과정입니다.
이제 아래 명령어를 입력합니다.
node -v버전 숫자가 나오면 성공입니다. 예를 들면 v 뒤에 숫자가 이어지는 형태로 보일 수 있습니다. 정확한 숫자는 설치한 시점에 따라 달라집니다.
이어서 아래 명령어도 입력합니다.
npm -vnpm은 Node.js와 함께 따라오는 도구입니다. 나중에 필요한 부품을 설치할 때 씁니다. 스마트폰 앱스토어처럼, 프로젝트에 필요한 "패키지"를 받아오는 역할이라고 생각하면 됩니다. 노트 패키지 매니저라고 외워두시면 좋습니다.
따라하기 3: VS Code 설치하기
VS Code는 우리의 작업 책상입니다. 폴더를 열고, 파일을 보고, AI 코딩 도구가 만든 코드를 확인하고, 터미널도 같이 띄울 수 있습니다.
공식 다운로드 페이지에서 설치합니다.2
브라우저에서 https://code.visualstudio.com/download로 갑니다.
내 운영체제에 맞는 설치 파일을 내려받습니다.
설치 파일을 실행합니다.
설치가 끝나면 VS Code를 엽니다.
처음 열면 영어 화면이어도 괜찮습니다. 당장 모든 메뉴를 이해할 필요는 없습니다.
폴더 열기 감각 익히기
앞으로 우리는 프로젝트를 "폴더 하나"로 다룹니다. 웹 서비스 하나가 큰 서류철 하나라고 생각하세요. 그 안에 화면 파일, 서버 파일, 설정 파일이 들어갑니다.
VS Code에서 폴더를 여는 흐름은 보통 이렇습니다.
VS Code를 엽니다.
메뉴에서 File 또는 파일을 찾습니다.
Open Folder 또는 폴더 열기를 선택합니다.
원하는 폴더를 고릅니다.
아직 프로젝트 폴더가 없어도 괜찮습니다. 다음 장에서 AI에게 Next.js 프로젝트를 만들게 할 겁니다. 지금은 "VS Code는 폴더를 열어 작업한다"는 감각만 잡으면 됩니다.
VS Code 안에서 터미널 열기
VS Code 안에서도 터미널을 열 수 있습니다. 이렇게 하면 파일을 보면서 바로 명령어를 입력할 수 있어 편합니다.
VS Code 상단 메뉴에서 Terminal 또는 터미널을 찾습니다.
New Terminal 또는 새 터미널을 선택합니다.
아래쪽에 터미널 창이 열리면 성공입니다. 여기에도 같은 명령어를 입력해보세요.
node -v
npm -v둘 다 버전 숫자가 나오면, VS Code 안에서도 Node.js를 사용할 준비가 된 겁니다.
따라하기 4: AI 코딩 도구 준비하기
AI 코딩 도구는 이 책에서 우리의 개발 보조자입니다. 우리는 코드를 한 줄씩 외워서 쓰지 않습니다. 대신 AI에게 이렇게 말합니다.
"상품명, 특징, 톤을 입력받는 화면을 만들어줘."
그러면 AI가 코드를 만들고, 우리는 실행해보고, 마음에 안 드는 부분을 다시 말로 고칩니다.
어떤 도구를 고를까
첫번째 장에서 말씀드렸듯이, 셋 중 어느 것을 골라도 이 책을 따라가는 데 문제가 없습니다. 가장 간단한 기준은 이미 쓰고 있는 AI 구독입니다.
ChatGPT 유료 요금제를 쓴다면 → Codex
클로드(Claude) 유료 요금제를 쓴다면 → Claude Code
Gemini 유료 요금제를 쓴다면 → Antigravity
아직 아무 구독도 없다면, 셋 중 하나를 골라 가장 저렴한 유료 요금제부터 시작하면 됩니다. 이 책의 지시문은 어느 도구에서나 똑같이 작동합니다.
만약 구독하는게 없어서 어떤 걸 골라야 하는지 모른다면 다음 장인 AI 코딩 도구 사용법에서 추천을 보고 선택하세요.
설치 또는 실행
공통 흐름은 세 단계입니다. ① 설치 → ② 실행 → ③ 브라우저에서 계정 로그인.
Codex와 Claude Code는 터미널에서 쓰는 도구입니다. 방금 Node.js를 설치했기 때문에, npm으로 설치할 수 있습니다. 터미널에 자기가 고른 도구의 명령어를 입력하세요.
# Codex를 골랐다면
npm install -g @openai/codex# Claude Code를 골랐다면
macOS, Linux, WSL:
curl -fsSL https://claude.ai/install.sh | bash
Windows PowerShell:
irm https://claude.ai/install.ps1 | iex
Windows CMD:
curl -fsSL https://claude.ai/install.cmd -o install.cmd && install.cmd && del install설치가 끝나면 실행해봅니다.
# Codex
codex
# Claude Code
claude처음 실행하면 로그인 안내가 나옵니다. 안내에 따라 브라우저가 열리면, 각 서비스 계정(ChatGPT 또는 클로드)으로 로그인하면 연결됩니다.3
우리는 vscode 로 진행하기 때문에 vscode 의 확장 프로그램도 설치하겠습니다. vscode 내에서 코딩 도구를 사용하면 코드를 보면서 작업을 할 수 있다는 장점이 있습니다.
vscode 왼쪽의 확장 프로그램 아이콘을 선택한 후 codex 또는 claude code 를 검색해서 설치해 주세요.
또 선택사항으로 코덱스 자체 앱이나 클로드 데스크탑 앱을 설치해서 사용하는 방법이 있습니다. 이 방법은 vs code 에디터를 사용할 수 없지만 그냥 말로만 콘트롤 하고 싶을 때 사용하면 좋습니다. vscode extention 과 큰 차이는 없고 말로 지시를 하고 과정을 지켜보는 것이 조금 더 편하게 되어 있습니다.
코덱스 데스크탑 앱의 모습
클로드 데스크탑 앱의 모습
위의 3가지 방법 중 편한 걸로 하시면 됩니다. 저는 vscode 와 자체 앱을 둘 다 사용합니다.
Antigravity는 보통 앱을 다운로드 받아 사용합니다. 공식 사이트에서 설치 파일을 내려받아 설치하고, Google 계정으로 로그인합니다. Antigravity를 골랐다면 VS Code 대신 Antigravity를 기본 작업 도구로 써도 됩니다.
다음은 vscode 에 Claude Code 나 CODEX 가 설치된 화면입니다. 이 상태가 되게 준비해 주시면 가장 좋습니다!
AI에게 첫 지시 보내기
아직 실제 프로젝트를 만들지는 않겠습니다. 오늘은 AI와 대화가 되는지만 확인합니다.
AI 코딩 도구의 입력창에서 아래 문장을 그대로 보내보세요.
"안녕하세요. 저는 코딩을 처음 배우는 비개발자입니다. 앞으로 Next.js, Node.js, PostgreSQL로 AI 쇼핑몰을 만들 예정입니다. 제 수준에 맞게 한 단계씩 안내해주세요. 아직 코드는 만들거나 수정하지는 말아주세요."
AI가 답을 한다면 성공입니다. 답변 내용이 조금 달라도 괜찮습니다. 중요한 건 "내가 말로 요청했고, AI가 반응했다"는 경험입니다.
따라하기 5: GitHub 계정 만들기
GitHub는 코드를 올려두는 온라인 보관함입니다. 아직 Git을 깊게 알 필요는 없습니다. 일단은 "내 프로젝트를 백업하고, 나중에 서버가 가져갈 수 있게 올려두는 곳"이라고 생각하세요.
GitHub 공식 가입 페이지에서 무료 계정을 만들 수 있습니다.4
브라우저에서 https://github.com/signup으로 갑니다.
이메일 주소를 입력합니다.
사용할 비밀번호를 정합니다.
사용자 이름을 정합니다.
이메일 인증을 진행합니다.
로그인까지 완료합니다.
사용자 이름은 나중에 주소에도 들어갈 수 있습니다. 너무 고민하지 않아도 되지만, 가능하면 읽기 쉬운 영문 이름을 추천합니다.
예를 들어 이런 식입니다.
minji-makerjunsu-labyourname-ai
이미 사용 중인 이름이면 GitHub가 다른 이름을 요청합니다. 그럴 땐 숫자나 짧은 단어를 붙이면 됩니다.
✅ 확인: 준비 상태 체크리스트
아래 항목을 하나씩 확인해보세요.
터미널을 열 수 있다.
터미널에 명령어를 입력하고 Enter를 누를 수 있다.
node -v를 입력하면 버전 숫자가 나온다.npm -v를 입력하면 버전 숫자가 나온다.VS Code를 실행할 수 있다.
VS Code에서 폴더 열기 메뉴를 찾을 수 있다.
VS Code 안에서 터미널을 열 수 있다.
AI 코딩 도구(Codex/Claude Code/Antigravity 중 하나)에 로그인했다.
AI에게 첫 지시문을 보내 답변을 받았다.
GitHub 계정을 만들고 로그인할 수 있다.
전부 체크되지 않아도 괜찮습니다. 다만 다음 장으로 넘어가기 전에 node -v, npm -v, VS Code 실행, AI 코딩 도구 접속, GitHub 로그인은 꼭 확인해주세요.
⚠️ 막히면: 여기서 자주 생기는 문제
node를 찾을 수 없다고 나와요
터미널이 Node.js 설치 사실을 아직 모르는 경우가 많습니다.
터미널을 닫습니다.
새 터미널을 엽니다.
다시 입력합니다.
node -v그래도 안 되면 컴퓨터를 재시작한 뒤 다시 확인해보세요. 계속 안 되면 Node.js가 제대로 설치되지 않았을 수 있으니 LTS 버전 설치를 다시 진행합니다.
npm은 뭔지 모르겠고 무서워요
괜찮습니다. 지금은 npm을 자세히 알 필요가 거의 없습니다. "프로젝트에 필요한 부품을 설치하는 도구" 정도만 기억하면 됩니다. 다음 장에서 AI와 함께 필요한 순간에만 사용할 겁니다.
VS Code에서 뭘 눌러야 할지 모르겠어요
처음에는 메뉴가 많아서 당황스럽습니다. 지금 꼭 알아야 하는 건 세 가지뿐입니다.
폴더 열기
파일 목록 보기
터미널 열기
나머지는 당장 몰라도 됩니다. 개발자는 VS Code의 모든 기능을 알아서 개발하는 사람이 아닙니다. 필요한 기능을 그때그때 찾아 쓰는 사람입니다.
AI 코딩 도구 설치가 안내와 달라요
정상입니다. AI 코딩 도구는 업데이트가 빠릅니다. 버튼 이름, 로그인 흐름, 설치 명령이 바뀔 수 있습니다.
이럴 때는 평소 쓰는 AI 챗봇(ChatGPT, 클로드, Gemini)에게 이렇게 물어볼 수 있습니다.
"저는 비개발자입니다. 현재 AI 코딩 도구 설치 또는 로그인 단계에서 막혔습니다.
제 운영체제는 Windows / macOS이고, 화면에는 이런 문구가 보입니다:
'여기에 문구 붙여넣기'
다음에 무엇을 해야 하는지 아주 쉽게 안내해주세요."
화면의 문구를 그대로 붙여넣는 것이 핵심입니다. 추측하지 말고, 보이는 것을 그대로 전달하세요.
한 줄 정리와 다음 예고
오늘 우리는 서비스를 만들기 위한 작업실을 차렸습니다. 터미널을 열고, Node.js를 설치하고, VS Code를 준비하고, AI 코딩 도구와 첫 대화를 했고, GitHub 계정까지 만들었습니다.
한 줄로 정리하면 이렇습니다.
이제 내 컴퓨터는 웹 서비스를 만들 준비를 시작했습니다.
다음 장에서는 드디어 첫 번째 큰 성공을 만납니다. AI에게 Next.js 프로젝트를 만들게 하고, 내 컴퓨터에서 웹 화면을 띄워보겠습니다. 아직 진짜 AI 기능은 없지만, 브라우저에 "내가 만든 화면"이 뜨는 순간을 먼저 만들 겁니다.
참고
3AI 코딩 도구 공식 안내 — OpenAI Codex / Claude Code / Google Antigravity
이 노트는 보도·비평·교육·연구 목적으로 작성되었습니다. 저작권 문의가 있으시면 에서 알려주세요.