실습 파일을 열고 내 컴퓨터에서 실행하기

압축을 풀고 기준 폴더를 찾습니다

이 회차의 실습용 사이트 파일을 내려받아 압축을 풉니다. Windows에서는 다운로드한 ZIP의 압축 풀기 기능을 사용하고, Mac에서는 압축 파일을 열어 생성된 폴더를 확인합니다. 압축 파일 내부를 미리보기로 열어 놓은 상태에서 작업하지 않습니다. 이후에는 실제로 풀린 폴더 안의 파일을 수정합니다. 원본 ZIP은 따로 남겨 두면 잘못 변경했을 때 초기 파일과 비교할 수 있습니다.

폴더 이름은 small-home-site 처럼 알아보기 쉽게 정하고 사용자 문서 폴더 등 쓰기 권한이 있는 위치에 둡니다. 운영체제의 시스템 폴더에 복사하거나 관리자 권한으로 모든 작업을 시작할 필요는 없습니다. 다른 업무 파일과 섞이지 않게 별도 폴더를 사용하세요. 프로젝트 안에서 package.json , wrangler.jsonc , schema.sql , src , public 이 함께 보이는지 확인합니다. 같은 이름의 폴더가 두 번 중첩되어 있다면 이 파일들이 있는 안쪽 폴더가 기준입니다.

README.md 는 실행 순서를 적은 안내서입니다. package.json 에는 사용할 명령과 도구 버전이 들어 있고, wrangler.jsonc 에는 사이트 실행 환경이 들어 있습니다. schema.sql 은 글을 저장할 표를 만들 때 사용합니다. src 에는 사이트 기능이, public 에는 이미지와 관리자 화면에서 사용하는 파일이 있습니다. 처음부터 모든 코드를 읽기보다 파일 이름과 역할을 확인해 두면 이후 GPT가 특정 파일을 수정하라고 할 때 위치를 찾기 쉽습니다.

파일과 명령이 맞는지 한 번에 대조합니다

압축을 풀었는데 gpt-website-starter 폴더가 두 겹이라면 package.json이 보이는 안쪽 폴더를 엽니다. VS Code의 터미널 → 새 터미널을 누르고 현재 경로를 확인하세요. npm install이 끝난 다음 표를 만들고 서버를 켭니다. 서버가 켜진 터미널은 명령을 더 입력하는 창이 아니므로 설정을 바꿀 때는 새 터미널을 열거나 Ctrl+C로 먼저 종료합니다.

Node.js와 편집기를 설치합니다

Node.js 공식 다운로드에서 설치 시점의 LTS 버전을 선택합니다. 이 예제는 Node.js 22.13.0 이상을 요구합니다. 설치 화면에 다른 프로그램이 함께 권장되더라도 모든 선택 항목이 이 실습에 필요한 것은 아닙니다. 회사 기기에서 설치가 제한되어 있으면 권한을 우회하지 말고 사용 가능한 기기나 담당자의 허용을 확인합니다. 설치 후에는 이미 열려 있던 명령 창을 닫고 새 창을 열어 새 프로그램 경로가 반영되게 합니다.

VS Code를 설치한 뒤 File > Open Folder 또는 한국어 화면의 폴더 열기를 선택합니다. 앞에서 압축을 푼 기준 폴더를 지정합니다. 왼쪽 파일 목록에서 package.json과 README.md를 볼 수 있으면 폴더를 맞게 연 것입니다. 출처를 확인한 실습 폴더인지 확인한 다음 필요한 작업 공간 신뢰 설정을 선택합니다. 인터넷에서 받은 모든 파일에 대해 무조건 신뢰하도록 전역 설정을 바꾸지 않습니다.

VS Code의 Terminal > New Terminal 에서 새 터미널을 엽니다. Windows에서는 PowerShell이나 명령 프롬프트, Mac에서는 기본 셸이 표시될 수 있습니다. 터미널은 문서를 작성하는 본문 영역과 다릅니다. 아래쪽 입력줄에 명령을 한 줄씩 넣고 Enter를 눌러 실행합니다. 명령 앞의 장식 기호나 설명 문장까지 함께 붙여넣지 않습니다. 현재 경로가 프로젝트 폴더인지 확인한 뒤 시작합니다.