웹앱 만들 때 필요한 도구: Node.js, React, Next.js, Supabase, Vercel, GitHub (나만의 스케줄러 만들기 2편)

웹앱을 만들려면 어떤 도구가 필요할까요? 이번 스케줄러에는 여섯 가지를 씁니다. Node.js는 내 컴퓨터에서 개발을 돌리는 실행 환경, React와 Next.js는 화면과 서버 코드를 만드는 코드 도구, Supabase·GitHub·Vercel은 저장·보관·배포를 맡는 온라인 서비스입니다. 개인이 쓰는 정도라면 모두 무료로 시작할 수 있습니다. 「나만의 스케줄러 만들기」 시리즈 2편입니다.

식당 하나로 보면 쉽다

중요한 것은 이 여섯 가지가 모두 같은 종류의 프로그램은 아니라는 점입니다. Node.js는 실행 환경, React와 Next.js는 개발에 쓰는 코드 도구, 나머지 세 가지는 온라인 서비스입니다.

Node.js: 내 컴퓨터의 엔진

1편에서 JavaScript는 브라우저에서 동작한다고 했습니다. Node.js는 JavaScript를 브라우저 밖에서도 실행하게 해 줍니다. 이번 작업에서는 내 컴퓨터에서 개발 서버를 켜고 필요한 도구를 실행할 때 씁니다. 공식 설치 프로그램으로 설치하면, 필요한 코드 패키지를 내려받는 npm도 함께 설치됩니다.

설치할 때는 공식 홈페이지에서 LTS(장기 지원) 표시가 된 버전을 고르세요. 지금 최신 LTS는 24 계열이지만, 나중에 이 글을 보신다면 설치 시점의 LTS 표시를 기준으로 고르면 됩니다.

React와 Next.js: 화면 부품과 그 틀

React는 화면을 부품 단위로 만듭니다. "일정 카드" 하나를 만들어 두면 일정이 열 개든 백 개든 같은 부품을 반복해서 쓸 수 있습니다. 완료 표시를 눌렀을 때 바뀐 상태를 화면에 반영하는 것도 React가 돕습니다.

Next.js는 React를 바탕으로 실제 웹앱을 만드는 틀입니다. 화면뿐 아니라 페이지 주소와 서버 쪽 기능도 함께 구성할 수 있습니다. 예를 들어 오늘 일정은 "/today", 이번 주 일정은 "/week"로 나누고, 해당 폴더 안에 페이지 파일을 만들어 화면을 연결합니다.

1편에서 "화면과 서버 코드를 같은 TypeScript로 쓴다"고 한 것이 이 시리즈에서는 Next.js로 이루어집니다. React와 Next.js는 사이트에 가입하는 것이 아니라, 프로젝트를 만들면서 필요한 패키지를 설치합니다.

Supabase: 일정을 저장하는 창고

화면에만 일정을 담아 두고 저장하지 않으면 새로고침할 때 사라질 수 있습니다. 브라우저 안에 저장하는 방법도 있지만, 이번에는 PC와 휴대폰에서 같은 일정을 보기 위해 온라인 데이터베이스를 씁니다.

Supabase는 데이터베이스와 로그인 기능 등을 주는 서비스입니다. 1편에서 만난 SQL은 저장할 자료의 구조를 만들고 조회할 때 씁니다. 웹앱 코드에서는 Supabase가 주는 도구로 저장과 조회를 요청합니다. 내 일정만 보이게 하려면 로그인뿐 아니라 자료 접근 권한도 함께 설정해야 하는데, 이 부분은 5편에서 다룹니다.

무료 요금제는 프로젝트당 데이터베이스 500MB와 활성 프로젝트 2개를 줍니다. 작은 개인 스케줄러를 시작하기에 충분합니다. 다만 7일 동안 쓰지 않으면 프로젝트가 일시 중지될 수 있습니다. 중지되면 대시보드에서 다시 시작할 수 있으니 안내 메일을 확인하면 됩니다.

GitHub와 Vercel: 보관하고, 올리고

GitHub는 코드를 보관하고 수정 기록을 남기는 곳입니다. AI가 코드를 고치다 엉뚱하게 바꿔도, 이전 상태를 기록해 두었다면 되돌릴 수 있습니다. 저도 이 기록 덕을 자주 봅니다. 다만 컴퓨터의 모든 수정이 자동으로 기록되는 것은 아닙니다. 작업한 내용을 Git으로 기록하고 GitHub에 올리는 과정이 필요하고, 이 방법은 실제 작업하면서 함께 봅니다.

Vercel은 프로젝트를 배포해 인터넷 주소로 쓸 수 있게 해 주는 서비스입니다. GitHub와 연결하면 코드 변경을 올릴 때 새 배포를 자동으로 진행하도록 설정할 수 있습니다. 개인·비상업용 Hobby 요금제는 무료입니다. 마지막 6편에서 이 웹 주소를 휴대폰 홈 화면에 추가합니다.

다음 글 전에 준비할 것: AI와 함께 하면 된다

설치와 가입이 낯설어도 괜찮습니다. 지금 쓰는 챗GPT나 클로드, 제미나이에 아래 문장을 붙여 넣어 보세요. Windows와 Mac 중 내가 쓰는 것으로 바꾸면 됩니다.

"나는 Windows 컴퓨터를 쓰는 개발 초보야. 나만의 스케줄러 웹앱을 만들려고 해. Node.js LTS와 VS Code 설치, GitHub·Supabase·Vercel 가입을 도와줘. 한꺼번에 설명하지 말고 한 단계씩 안내해 줘. 공식 사이트 주소와 눌러야 할 버튼을 알려 주고, 내가 완료했다고 하면 다음 단계로 넘어가 줘."

1. Node.js와 VS Code 설치. AI의 안내를 받아 공식 사이트에서 설치 파일을 내려받아 실행합니다. 어떤 파일을 골라야 할지 모르겠다면 다운로드 화면을 캡처해 보여 주고 "내 컴퓨터에 맞는 설치 파일은 무엇이고, 어디를 눌러야 해?"라고 물으면 됩니다. 설치 후에는 "터미널 여는 방법부터 알려 주고, Node.js와 npm 버전 확인, VS Code 실행까지 도와줘"라고 확인합니다. 터미널은 명령어를 입력하는 창입니다.
2. GitHub부터 가입. GitHub 계정을 만든 뒤 그 계정으로 Supabase와 Vercel에 가입합니다. "지금은 계정만 만들고, 프로젝트 생성이나 유료 결제는 하지 않을게"라고 미리 말해 두면 안내가 깔끔해집니다. 화면이 설명과 다르면 추측해서 누르지 말고 현재 화면을 보여 주세요. 비밀번호와 인증번호는 AI에게 보내지 않고 직접 입력합니다.
3. AI 코딩 도구 준비. 저는 Claude Code를 쓰지만 다른 도구를 골라도 됩니다. 설치 방식이 다르니 쓸 도구 이름을 알려 주고, 지금 요금제에서 쓸 수 있는지도 공식 안내로 확인해 달라고 하세요.

React와 Next.js는 지금 따로 준비하지 않아도 됩니다. 프로젝트를 만드는 단계에서 함께 설치합니다.

처음부터 설치 방법을 모두 외울 필요는 없습니다. AI에게 한 단계씩 안내받고, 내가 보는 화면과 결과를 확인하면서 진행하면 됩니다. 오늘은 Node.js와 VS Code가 실행되고, 세 서비스에 로그인할 수 있는 상태까지면 충분합니다.

정리

• 여섯 가지는 종류가 다릅니다. Node.js는 실행 환경, React·Next.js는 코드 도구, Supabase·GitHub·Vercel은 온라인 서비스입니다.
• React와 Next.js는 가입하지 않고 프로젝트를 만들 때 패키지로 설치합니다.
• 준비는 AI에게 한 단계씩 안내받으면 됩니다. 비밀번호와 인증번호만은 직접 입력합니다.

원팩에서 만드는 업무 시스템 FROX도 Next.js, Supabase, Vercel, GitHub로 만들고 운영합니다. 이 시리즈에서 쓰는 도구가 실제 업무 시스템에 쓰이는 것과 같습니다.

다음 글(3편): 화면을 만들기 전에, 나만의 스케줄러에 무엇이 필요한지 기획하고 AI에게 줄 기획서를 써 봅니다.

함께 읽으면 좋은 글: 나만의 스케줄러 만들기 1편: 웹앱은 어떤 언어로 만들까?

출처

• Node.js, Previous Releases
• Next.js Blog
• Supabase, Pricing
• Vercel, Pricing