AI & IT · AI 뉴스 ·

코딩 초보도 웹앱을 만들 수 있을까? Claude와 React로 시작하는 7단계 개발법

Claude와 React로 코딩 초보자도 웹앱을 만들 수 있을까요? 개발 환경 설치부터 AI 코드 생성, 기능 테스트, 디자인 수정, 배포까지 7단계로 쉽게 알아봅니다.

코딩을 한 번도 배워본 적이 없다면 웹사이트나 앱을 직접 만든다는 일이 어렵게 느껴질 수 있습니다. HTML, CSS, JavaScript 같은 용어부터 낯설고, 프로그램을 설치하는 것조차 부담스럽기 때문입니다.

그런데 요즘은 AI에게 원하는 기능을 설명하고, 만들어진 코드를 확인하면서 웹앱을 개발하는 방법이 있습니다.

대표적인 조합이 바로 Claude AI와 React입니다.

Claude는 코드를 작성하고 수정하는 과정을 도와주고, React는 사용자가 실제로 클릭하고 입력하는 웹 화면을 만드는 역할을 합니다.

이번에는 코딩 경험이 없는 사람도 따라 할 수 있도록 간단한 할 일 관리 앱(To-Do List)을 직접 만드는 과정을 소개하겠습니다.

웹앱 아이디어부터 간단하게 정해보세요

처음부터 쇼핑몰이나 SNS를 만들겠다고 생각하면 준비할 것이 너무 많아집니다.

첫 프로젝트는 기능이 적고 결과를 쉽게 확인할 수 있는 것이 좋습니다.

예를 들어 할 일 관리 앱이라면 다음 기능으로 시작할 수 있습니다.

  • 할 일 입력하기

  • 할 일 목록에 추가하기

  • 완료한 항목 체크하기

  • 필요 없는 항목 삭제하기

이 네 가지 기능만 구현해도 실제로 작동하는 웹앱을 만들 수 있습니다.

여기서 중요한 것은 처음부터 완벽한 서비스를 만드는 것이 아니라, 작은 기능 하나를 작동시키는 경험입니다.

개발에 필요한 도구를 설치하세요

React 개발을 시작하려면 몇 가지 도구가 필요합니다.

Node.js는 JavaScript 개발 도구를 실행할 수 있도록 도와줍니다. Node.js 공식 홈페이지에서 LTS 버전을 설치하면 됩니다.

Visual Studio Code(VS Code)는 코드를 작성하고 프로젝트 파일을 관리하는 무료 편집기입니다.

Claude Code는 개발 프로젝트의 파일을 읽고, 코드를 작성하거나 수정하는 작업을 돕는 AI 코딩 도구입니다.

Windows에서는 PowerShell을 열고 다음 명령어로 Claude Code를 설치할 수 있습니다.

irm https://claude.ai/install.ps1 | iex

설치가 끝나면 claude --version을 실행해 확인하세요.

Claude Code를 사용하려면 지원되는 계정 또는 API 결제 설정이 필요할 수 있습니다. 일반 Claude 채팅과 Claude Code의 이용 조건도 구분해서 확인하는 것이 좋습니다.

Vite를 이용해 React 프로젝트를 만들 예정이므로 Node.js는 Vite가 요구하는 호환 버전을 사용하세요. 현재 기준으로 Node.js 20.19 이상 또는 22.12 이상 계열이 요구되며, 최신 LTS 버전을 선택하는 편이 편리합니다.

React 프로젝트를 생성해보세요

React는 웹페이지를 여러 개의 작은 화면 구성요소로 나누어 개발할 수 있게 해주는 JavaScript 라이브러리입니다.

예를 들어 버튼, 검색창, 메뉴, 할 일 목록을 각각 독립적인 구성요소로 만들 수 있습니다.

처음에는 React 자체의 구조를 모두 이해하지 않아도 괜찮습니다.

VS Code에서 터미널을 열고 다음 명령어를 실행하세요.

npm create vite@latest my-first-app -- --template react
cd my-first-app
npm install
npm run dev

명령어가 정상적으로 실행되면 터미널에 로컬 접속 주소가 표시됩니다.

일반적으로 http://localhost:5173과 같은 주소입니다.

이 주소를 브라우저에 입력하면 기본 React 화면이 나타납니다.

아직 내가 원하는 앱은 아니지만, 웹앱이 실행될 수 있는 개발 환경이 준비된 것입니다.

Claude에게 원하는 앱을 구체적으로 설명하세요

이제 본격적으로 AI의 도움을 받을 차례입니다.

프로젝트 폴더에서 새 터미널을 열고 claude를 실행합니다. 로그인이나 인증이 필요하면 안내에 따라 진행하세요.

Claude에게 다음과 같이 요청해보세요.

Claude 입력 프롬프트

나는 React를 처음 배우는 코딩 초보자야.

현재 Vite로 생성한 React 프로젝트가 있어.

이 프로젝트를 간단한 할 일 관리 웹앱으로 만들어줘.

필요한 기능:
- 할 일 입력
- 할 일 추가
- 완료 상태 체크
- 할 일 삭제
- 모바일에서도 보기 편한 화면

조건:
- React의 useState 사용
- 외부 UI 라이브러리 없이 구현
- App.jsx와 CSS 파일 중심으로 구성
- 기존 파일을 수정하기 전에 변경 계획 설명
- 수정 후 실행 방법과 주요 코드 설명
- 초보자가 이해할 수 있는 한국어로 안내

이렇게 요청하면 단순히 "투두리스트 만들어줘"라고 말하는 것보다 결과를 관리하기 쉽습니다.

특히 기능, 디자인, 사용 기술, 수정할 파일을 구체적으로 지정하면 불필요한 변경을 줄일 수 있습니다.

Claude가 제안한 파일 변경 내용과 명령어는 확인하고 승인하세요. AI가 작성한 코드도 오류가 발생하거나 의도와 다르게 작동할 수 있습니다.

React의 핵심 기능을 이해해보세요

Claude가 코드를 만들어주더라도 중요한 원리를 조금씩 알아두면 좋습니다.

React에서 자주 사용하는 기능 중 하나가 useState입니다.

예를 들어 다음 코드를 살펴보겠습니다.

import { useState } from 'react';

function App() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      클릭 횟수: {count}
    </button>
  );
}

export default App;

이 코드는 버튼을 누를 때마다 숫자가 하나씩 증가하는 간단한 예제입니다.

count는 현재 숫자를 저장하고, setCount는 그 숫자를 변경합니다.

숫자가 바뀌면 React가 화면을 다시 업데이트합니다.

할 일 관리 앱에서도 같은 원리가 사용됩니다.

새로운 할 일을 추가하면 목록 상태가 바뀌고, React가 변경된 내용을 화면에 보여주는 것입니다.

처음에는 코드를 외우기보다 사용자 행동 → 데이터 변경 → 화면 업데이트라는 흐름을 이해하는 것이 중요합니다.

작동 확인과 디자인 개선을 진행하세요

앱이 만들어졌다면 브라우저에서 직접 사용해보세요.

할 일이 정상적으로 추가되는지, 완료 체크가 반영되는지, 삭제 버튼이 제대로 작동하는지 확인해야 합니다.

특히 다음 상황도 테스트하는 것이 좋습니다.

  • 아무 내용도 입력하지 않았을 때

  • 긴 문장을 입력했을 때

  • 할 일이 여러 개 있을 때

  • 스마트폰처럼 화면 폭이 좁을 때

문제가 발생했다면 오류 메시지를 Claude에게 전달하고 원인을 설명해달라고 요청해보세요.

디자인도 자연어로 수정할 수 있습니다.

현재 웹앱을 조금 더 깔끔하게 개선해줘.

- 전체 배경은 밝은 회색
- 입력창과 버튼은 둥근 모서리
- 완료된 항목은 취소선 표시
- 모바일 화면에서 가로 스크롤 방지
- 키보드 Enter로 할 일 추가
- 변경한 내용을 간단히 설명

한 번에 많은 기능을 요청하기보다는 작은 단위로 수정하고 테스트하는 편이 오류를 찾기 쉽습니다.

완성한 웹앱을 인터넷에 공개하세요

내 컴퓨터에서만 실행되는 웹앱을 다른 사람에게도 보여주려면 배포 과정이 필요합니다.

React와 Vite로 만든 간단한 웹앱은 Vercel이나 Netlify 같은 서비스로 배포할 수 있습니다.

일반적인 과정은 다음과 같습니다.

  • npm run build로 배포용 파일 생성

  • GitHub에 프로젝트 업로드

  • Vercel 또는 Netlify에서 저장소 연결

  • 빌드 설정 확인 후 배포

  • 발급된 웹주소로 접속 테스트

Vite 프로젝트의 일반적인 빌드 명령어는 npm run build이고, 빌드 결과물은 기본적으로 dist 폴더에 생성됩니다.

무료 플랜의 제공 범위와 이용 조건은 서비스별로 다르므로 배포 전에 확인하세요.

또한 이번 예제는 별도 서버나 데이터베이스를 연결하지 않은 간단한 앱입니다. 새로고침 후에도 할 일을 유지하고 싶다면 브라우저 저장 기능이나 데이터베이스를 추가해야 합니다.

실제 서비스로 확장할 계획이라면 로그인, 데이터 보안, 개인정보 처리까지 별도로 고려해야 합니다.

코딩을 모두 알아야 시작할 수 있는 시대는 아닙니다

Claude와 React를 사용한다고 모든 개발 과정이 자동으로 해결되는 것은 아닙니다.

하지만 예전처럼 모든 문법을 먼저 외운 뒤 개발을 시작할 필요는 없습니다.

작은 앱을 만들고, 문제가 발생하면 원인을 확인하고, 필요한 기능을 하나씩 추가하는 방식으로 배울 수 있기 때문입니다.

처음 만든 투두리스트에 날짜 기능을 추가하면 일정 관리 앱이 되고, 지출 금액을 입력하도록 변경하면 간단한 가계부로 발전시킬 수도 있습니다.

중요한 것은 첫 프로젝트를 실제로 실행해보는 것입니다.

코딩을 공부한 뒤 무언가를 만드는 것도 좋은 방법이지만, 이제는 직접 만들면서 코딩을 배우는 방법도 충분히 시도해볼 만합니다.