클로드 코드 맥 설치: 첫 웹페이지 만들고 다음 작업 이어가기

클로드 코드를 설치한 뒤 무엇을 입력해야 할지 막막했다면, 작은 독서 기록 페이지를 하나 만들어보세요. 책 카드가 보이는 첫 화면을 만들고, 검색 기능을 붙이고, 다음 날 같은 작업을 이어가는 데까지 다룹니다. 코드를 미리 알 필요는 없습니다. 대신 지금 어느 폴더에서 작업하는지, 어떤 창에 명령을 넣는지는 구분하면서 따라갑니다.

먼저, 실제로 만든 독서 기록 페이지입니다

아래 화면은 2026년 10월 5일 Claude Code 2.1.285로 생성한 index.html을 브라우저에서 연 모습입니다. 첫 요청으로 책 카드 네 개를 만들고, 두 번째 요청으로 제목·저자 검색을 붙였습니다. 예쁜 화면을 미리 그려 놓은 것이 아니라, 뒤에 나오는 한국어 요청을 넣어 받은 파일입니다.

이번 실행은 이미 설치된 맥에서 진행했습니다. 새 맥의 설치 과정과 로그인 화면을 재현한 기록은 아니므로, 설치 명령은 공식 문서를 기준으로 안내하고 실제 생성·검색 결과는 사진 옆에 따로 표시했습니다.

시작 전에: 맥, 계정, 터미널 확인하기

공식 지원 기준은 macOS 13 이상, 메모리 4GB 이상이며 x64와 ARM64 프로세서를 지원합니다. Apple 메뉴에서 “이 Mac에 관하여”를 열면 macOS 버전과 칩을 볼 수 있습니다. 같은 맥이라도 회사에서 관리하는 기기는 설치 정책이 적용될 수 있습니다.

Claude Code를 사용할 수 있는 구독 또는 Console 계정이 필요합니다. 무료 Claude 계정만으로는 사용할 수 없습니다. 회사 계정은 조직이 정한 인증 경로를 따르세요. 구독으로 쓸지 API 사용량으로 과금할지도 로그인 전에 정해두면 계정을 잘못 선택하는 일을 줄일 수 있습니다.

Command + Space를 누르고 “터미널”을 검색해 엽니다. 이후에는 창 두 개를 쓰면 편합니다. 첫 창에서는 Claude Code와 대화하고, 다른 창에서는 폴더 확인이나 브라우저 열기 명령을 실행하는 식입니다. 터미널의 새 창은 Command + N으로 열 수 있습니다.

1. Claude Code 설치하고 버전 확인하기

아래 명령은 Anthropic 공식 서버에서 설치 스크립트를 받아 실행합니다. 주소를 바꾸지 않고 터미널에 붙여 넣으세요. 이 가이드는 네이티브 설치를 기준으로 진행하므로 먼저 Node.js나 Homebrew를 준비하지 않아도 됩니다.

curl -fsSL https://claude.ai/install.sh | bash

완료 안내가 나온 뒤 새 터미널을 열고 아래 명령을 실행합니다. 버전 번호가 표시되면 터미널이 Claude Code를 찾은 상태입니다. 블로그의 예시 번호와 같을 필요는 없습니다. 버전이 출력되지 않으면 맨 아래의 PATH 항목부터 확인하세요.

claude --version

이미 Homebrew 등으로 설치해 사용 중이라면 여기서 설치 방법을 바꾸지 말고 다음 단계로 넘어가세요. 여러 방식으로 중복 설치하면 업데이트한 프로그램과 실제로 실행되는 프로그램이 달라질 수 있습니다. 현재 실행 경로가 궁금할 때는 아래 명령으로 확인할 수 있습니다.

command -v claude

2. 연습 폴더를 만들고 그 안에서 로그인하기

mkdir -p ~/dayable-reading-log
cd ~/dayable-reading-log
pwd

마지막 줄에는 /Users/사용자이름/dayable-reading-log와 비슷한 경로가 나와야 합니다. 사용자 이름은 맥마다 다릅니다. 물결표(~)는 내 홈 폴더를 뜻합니다. 같은 이름의 폴더에 중요한 파일이 이미 있다면 dayable-reading-log-2처럼 다른 이름을 사용하세요.

Claude Code는 시작한 위치를 기준으로 프로젝트를 다룹니다. 다운로드 폴더나 홈 폴더 전체에서 시작하는 대신 이번 실습 폴더 안으로 이동한 뒤 실행합니다. 이 습관을 들이면 생성한 파일을 나중에 찾기도 쉽습니다.

claude

첫 실행의 계정 안내를 따라 브라우저에서 인증을 마치고 터미널로 돌아옵니다. 작업 폴더 신뢰 여부를 묻는다면 방금 만든 연습 폴더인지 확인하세요. 계정을 바꿔야 할 때는 실행 중인 Claude Code에서 /login을 입력합니다. 설치부터 다시 할 필요는 없습니다.

3. 첫 요청: 독서 기록 페이지 만들기

첫 결과물은 외부 서비스 없이 열리는 파일 하나로 정합니다. 아래 요청문은 DAYABLE이 만든 실습 예제입니다. 기능, 샘플 자료, 완료 상태를 함께 적어두었습니다. 한 번에 붙여 넣은 뒤 Enter를 눌러 보내세요.

현재 폴더에 index.html 하나로 독서 기록 페이지를 만들어줘.
제목은 “이번 달 읽은 책”이야.
실제 도서 대신 가상의 책 4권을 샘플로 넣어줘.
각 카드에는 책 제목, 저자, 읽은 날짜, 한 줄 감상을 보여줘.
배경은 따뜻한 흰색, 강조색은 보라색으로 해줘.
화면이 넓으면 카드 2열, 좁으면 1열로 배치해줘.
CSS와 JavaScript는 이 파일 안에 넣고 외부 패키지나 서버는 쓰지 마.
완료되면 만든 파일의 경로와 맥에서 여는 명령을 알려줘.

이 요청만 보냈을 때는 검색창 없이 네 권의 카드가 나왔습니다. 파일 하나로 열리는 범위가 지켜졌고 외부 이미지나 패키지도 추가되지 않았습니다. 여기서 검색까지 한꺼번에 다시 만들라고 하지 않고, 기존 파일에 기능 하나를 덧붙였습니다.

Claude가 파일을 만들고 수정하는 동안 요청 상태를 읽어보세요. 화면 디자인은 실행할 때마다 달라질 수 있습니다. 이번 단계에서 필요한 것은 지정한 폴더의 index.html, 책 카드 4개, 작은 화면의 1열 배치입니다. 로그인·데이터베이스 설치를 시작한다면 “지금은 샘플 데이터를 가진 HTML 파일 하나만 만들어줘”라고 범위를 다시 알려주세요.

다른 터미널 창을 열어 아래 명령을 실행합니다. 새 창의 현재 폴더는 첫 창과 같다고 가정하지 않고 다시 이동합니다. open 명령은 파일을 기본 연결 앱으로 엽니다. HTML이 편집기에서 열리면 Finder에서 해당 파일의 “다음으로 열기”로 Safari나 Chrome을 고르세요.

cd ~/dayable-reading-log
ls
open index.html

AI가 “완료”라고 답했는데 화면이 비어 있다면, 주소 표시줄에서 다른 파일을 연 것은 아닌지 먼저 보세요. 파일 경로가 맞다면 빈 화면이나 오류를 캡처하고 아래처럼 물어볼 수 있습니다. 실제 화면과 함께 요청하면 “안 돼요” 한 문장보다 수정할 지점이 분명해집니다.

방금 만든 index.html을 열었는데 책 카드가 보이지 않아.
첨부한 화면과 현재 파일을 확인해서 원인을 찾아 수정해줘.
외부 패키지를 추가하지 말고, 수정한 부분과 다시 확인할 방법을 알려줘.

4. 검색 기능을 붙이고 수정 요청 구체화하기

첫 화면이 열렸다면 기능을 하나 더해봅니다. “더 예쁘게”라는 요청은 바뀌어야 할 부분이 불분명합니다. 검색창의 위치, 검색 대상, 결과가 없을 때의 문구까지 정해주면 수정 후 무엇을 눌러볼지도 정할 수 있습니다.

기존 책 카드와 색은 유지하고 제목 아래에 검색창을 추가해줘.
책 제목 또는 저자에 검색어가 들어 있으면 그 카드만 보여줘.
검색어를 지우면 전체 4권을 다시 보여줘.
일치하는 책이 없으면 “검색한 책이 없어요”를 보여줘.
검색창에는 화면을 읽는 사람도 용도를 알 수 있는 라벨을 달아줘.
완료 후 내가 브라우저에서 해볼 확인 순서를 알려줘.

파일이 바뀐 뒤에는 열어둔 브라우저에서 Command + R로 새로고침합니다. 같은 파일을 보고 있어도 이전 화면이 남아 있을 수 있습니다. 카드 하나의 제목 일부를 입력하고, 검색어를 모두 지우고, 샘플에 없는 단어를 입력해보세요. 검색 결과와 빈 상태까지 확인하면 기능이 어떤 조건에서 움직이는지 익힐 수 있습니다.

새 요청 뒤 카드가 모두 사라지거나 색까지 바뀌었다면 이번 수정의 범위를 다시 좁힙니다. 처음부터 프로젝트를 다시 만들도록 요청할 필요는 없습니다. 그대로 둘 요소와 바꿀 요소를 한 문장씩 구분해 전달하세요.

검색 기능은 유지해줘. 다만 카드 배경색이 바뀌었어.
카드 배경색만 이전의 따뜻한 흰색으로 되돌리고,
검색창과 카드 간격을 24px로 맞춰줘. 다른 기능은 바꾸지 마.

실제 결과에서는 ‘달빛’을 입력하자 「달빛 아래의 지도 제작자」 한 권이 남았습니다. ‘없는책’을 입력하면 카드 대신 안내 문구가 나오고, 검색어를 지우면 네 권이 다시 보였습니다. 디자인이 마음에 든다는 느낌과 별개로, 요청한 세 동작이 있는지를 직접 확인할 수 있었습니다.

5. 프로젝트 설명을 CLAUDE.md에 남기기

다음 대화에서 화면의 목적과 작업 방법을 반복해서 설명하기 싫다면 프로젝트 폴더에 CLAUDE.md를 둡니다. Claude Code가 프로젝트 지침으로 읽는 텍스트 파일입니다. /init으로 초안을 만들 수도 있지만, 이처럼 작은 실습에서는 필요한 내용을 직접 지정하는 편이 간단합니다.

프로젝트 루트에 CLAUDE.md를 만들어줘. 아래 내용을 담아줘.
- 이 프로젝트는 개인 연습용 독서 기록 페이지다.
- 결과물은 index.html 하나이며 외부 패키지와 서버를 쓰지 않는다.
- 본문과 UI 문구는 한국어로 쓴다.
- 샘플은 가상의 도서 4권이다.
- 변경 뒤에는 open index.html로 화면을 확인한다.
- 검색어 입력, 검색어 지우기, 검색 결과 없음 상태를 확인한다.
- 작은 화면에서는 카드 1열을 유지한다.

이 파일에는 프로젝트에 늘 적용할 내용만 남깁니다. “오늘은 제목을 바꾼다” 같은 일회성 요청은 대화에 적으면 됩니다. 비밀번호나 API 키를 기억시키는 용도로 사용하지 마세요. 지침 파일은 Claude가 참고할 문맥이며, 운영체제의 접근 권한을 설정하는 파일은 아닙니다.

6. 계획부터 보고 싶을 때와 작업을 멈출 때

작은 색상 수정은 바로 부탁해도 되지만, “독서 기록 입력 기능까지 추가”처럼 구조가 달라지는 작업은 계획을 먼저 받는 편이 이해하기 쉽습니다. 새 세션을 계획 모드로 시작하려면 아래 명령을 일반 터미널에서 실행합니다. 이미 대화 중이라면 Shift + Tab으로 모드를 바꾸고 화면의 Plan 표시를 확인하세요.

claude --permission-mode plan

현재 페이지에 책을 추가하는 입력 폼을 넣고 싶어.
아직 파일은 수정하지 말고, 어떤 입력값과 버튼이 필요할지 제안해줘.
브라우저를 닫은 뒤 기록을 유지하려면 무엇을 추가해야 하는지도 설명해줘.

제안을 읽은 뒤 진행할 범위를 골라 실행합니다. 권한 모드와 확인창의 동작은 버전·계정·설정에 따라 달라질 수 있습니다. 현재 허용 규칙은 /permissions에서 볼 수 있습니다. 필요 없는 설치나 큰 변경을 진행 중이라면 Esc로 멈추고 원하는 범위를 다시 전달하세요.

7. 창을 닫은 뒤에도 같은 작업 이어가기

작업 중인 대화에 알아보기 쉬운 이름을 붙여둡니다. 다음 명령은 Claude Code 안에 입력합니다. 폴더 이름과 세션 이름은 서로 다른 개념입니다. 폴더에는 파일이, 세션에는 이 작업을 주고받은 대화가 남습니다.

/rename reading-log-first

작업을 마칠 때는 exit를 입력해 나옵니다. 다음 날 일반 터미널에서 같은 폴더로 이동한 뒤 최근 대화를 이어갈 수 있습니다. 여러 대화 중 하나를 고르려면 claude --resume으로 목록을 열고 해당 대화를 선택합니다.

cd ~/dayable-reading-log
claude --continue

대화가 길어졌다면 /compact로 앞선 대화를 요약할 수 있습니다. 아래처럼 남길 내용을 지정하는 것도 가능합니다. 다만 대화 요약을 프로젝트 파일의 백업처럼 생각하지는 마세요. 중요한 작업 규칙은 CLAUDE.md, 실제 결과물은 index.html에서 각각 관리합니다.

/compact 독서 기록 페이지의 파일 구조, 검색 동작, 다음 수정할 항목을 남겨줘.

8. 업데이트와 맥에서 자주 만나는 오류

이 글의 네이티브 설치는 자동 업데이트를 지원합니다. 즉시 업데이트를 확인하려면 claude update를 사용하세요. Homebrew로 설치했다면 해당 설치 방식의 업데이트 명령을 따릅니다. 어떤 방식인지 헷갈릴 때는 진단부터 실행합니다.

claude doctor

설치 파일이 존재하는데 명령을 찾지 못하는 문제는 PATH와 관련될 수 있습니다. PATH는 터미널이 실행 파일을 찾는 폴더 목록입니다. 기본 zsh를 사용한다면 공식 문서의 zsh 경로 설정을 따르세요. 이미 쓰던 셸 설정 파일을 통째로 지우거나 인터넷에서 찾은 설정으로 덮어쓸 필요는 없습니다.

마지막으로, 혼자 다시 해보기

새 터미널을 열고 연습 폴더로 이동한 뒤 이전 대화를 이어가보세요. “검색 결과 옆에 책 권수를 표시해줘”처럼 작은 변경을 하나 요청하고 브라우저를 새로고침합니다. 어떤 파일이 바뀌었고 어느 화면에서 결과를 확인하는지 스스로 설명할 수 있으면 이번 실습을 마친 것입니다.

이 페이지를 실제 독서 기록 서비스로 확장하려면 다음에는 기록 저장 방식과 공개 범위를 정하면 됩니다. 내 브라우저에만 저장할지, 다른 기기에서도 로그인해 볼지에 따라 필요한 구성이 달라집니다. 지금 만든 파일을 남겨두고 원하는 사용 장면을 먼저 한두 문장으로 적어보세요.