[2화] AI로 내 아이디어를 웹사이트로 만들기 — 개발 도구 설치하고 시작하기

1화에서 아이디어를 한 문장과 4가지 항목으로 정리해두셨나요? 이번 편에서는 그 아이디어를 실제로 AI에게 전달하기 위한 준비를 합니다. 내 컴퓨터에 AI 개발 도구를 설치하고, 첫 대화를 나눠보는 것까지가 오늘의 목표입니다.

이 시리즈의 전체 여정

터미널이 뭔가요

'터미널'은 마우스로 아이콘을 클릭하는 대신, 글자로 명령을 입력해서 컴퓨터에 일을 시키는 화면입니다. 검은 화면에 글자만 있어서 낯설어 보일 수 있지만, "이 프로그램을 설치해줘", "이 폴더로 이동해줘" 같은 아주 단순한 명령 몇 개만 알면 충분합니다. Mac에는 '터미널'이라는 이름의 앱이 기본으로 설치되어 있고(검색창에 '터미널'이라고 치면 나옵니다), Windows에는 'PowerShell' 또는 'Windows Terminal'이 있습니다.

1단계 — Node.js 설치하기

AI 개발 도구를 설치하려면 먼저 'Node.js'라는 프로그램이 컴퓨터에 있어야 합니다. nodejs.org에 접속해서 'LTS'라고 표시된 버전을 다운로드하고 설치 파일을 그대로 실행하면 됩니다. 설치가 끝나면 터미널을 열고 아래 명령어를 입력해보세요.

node -v

버전 번호(예: v22.14.0)가 나오면 정상적으로 설치된 것입니다. 만약 "명령어를 찾을 수 없다"는 메시지가 나온다면, 설치 후 터미널을 완전히 껐다가 다시 열어보세요.

2단계 — Claude Code 설치하기

이제 터미널에 아래 명령어를 입력합니다.

npm install -g @anthropic-ai/claude-code

이 한 줄이 바로 AI 개발 도구인 'Claude Code'를 컴퓨터에 설치하는 명령어입니다. 설치가 끝날 때까지 잠시 기다리면 됩니다.

3단계 — 프로젝트 폴더 만들고 첫 실행하기

이제 내 프로젝트가 들어갈 폴더를 하나 만들고, 그 안으로 들어갑니다.

mkdir my-first-project
cd my-first-project

그다음 아래 명령어를 입력합니다.

claude

처음 실행하면 브라우저 창이 자동으로 열리면서 Anthropic 계정으로 로그인하라는 안내가 나옵니다. 계정이 없다면 이 화면에서 바로 무료로 만들 수 있습니다. 로그인이 끝나면 다시 터미널로 돌아오고, 이제 AI에게 말을 걸 준비가 끝난 것입니다.

설치 중 막히면 이렇게 해보세요

Mac에서 2단계 명령어를 입력했을 때 "권한이 없다(permission denied)"는 메시지가 뜰 수 있습니다. 이럴 땐 명령어 앞에 sudo를 붙여 sudo npm install -g @anthropic-ai/claude-code처럼 입력하고, 컴퓨터 비밀번호를 입력하면 대부분 해결됩니다. 그래도 안 된다면 Node.js를 완전히 삭제했다가 nodejs.org에서 다시 설치하는 것도 방법입니다. 처음 설치할 때는 이런 사소한 오류가 흔하니, 당황하지 말고 오류 메시지를 그대로 검색해보는 것도 좋은 습관입니다.

4단계 — 첫 대화는 작은 연습부터

여기서 중요한 팁이 하나 있습니다. 1화에서 정리한 진짜 아이디어를 지금 바로 붙여넣고 싶겠지만, 조금만 참아주세요. 처음에는 아주 작은 연습으로 AI가 실제로 어떻게 작동하는지 감을 잡는 것이 좋습니다. 예를 들어 이렇게 입력해보세요.

"안녕하세요"라고 크게 쓰여지는 간단한 웹페이지 하나만 만들어줘

몇 초 뒤 AI가 실제로 파일을 만들고, 무엇을 했는지 설명해주는 것을 볼 수 있습니다. "말로 설명하면 진짜로 파일이 생긴다"는 이 감각을 한 번 경험해보는 것이 이번 편의 핵심입니다.

다음 편 예고

3화에서는 1화에서 정리해둔 진짜 아이디어를 프롬프트로 옮겨서, 실제로 작동하는 화면을 만들어보는 과정을 다룹니다. 오늘 만든 연습 페이지는 지워도 괜찮습니다. 3화에서는 새 폴더에서 진짜 프로젝트를 시작하게 됩니다.

이전 화 / 다음 화

• 1화: 아이디어 정리하기
• 3화: 프롬프트로 진짜 화면 만들어보기