코딩이 필요한 당신에게 CURSOR AI 입문기 with Claude Code

AI가 도와주는 웹 개발, 누구나 만드는 실용 웹서비스 입문

• 혼자서는 어려운 프로젝트도 AI와 함께라면 가능
  • 코드 작성부터 UI 디자인까지, Cursor AI와 GPT API를 활용해 웹사이트와 웹서비스를 빠르게 제작하는 방법을 익힙니다. 단순 기능 구현을 넘어, 나만의 서비스와 프로젝트를 직접 완성합니다.
• 코딩은 몰라도 된다! AI와 함께 배우는 실습형 커리큘럼
  • 프로그래밍 경험이 없어도 누구나 따라 할 수 있도록 단계별로 안내하며, 실습 위주로 진행되어 결과물을 직접 만들어내는 경험을 제공합니다.

💡개발 지식이 없어도 웹사이트나 서비스를 직접 만들고 싶은 수요 증가

스타트업·업무 자동화·개인 프로젝트 등에서 웹서비스를 직접 구현하고자 하는 수요가 늘어나고 있으나,

비개발자에게는 진입장벽이 높습니다.

AI 코딩 도구가 빠르게 확산되고 있지만 “어떻게 활용할지”를 실습하며 배우는 기회는 부족합니다.

데이터 분석, 기획, 운영, 마케팅 등 비개발 직군도 AI 코딩 도구를 활용하면

업무 자동화 및 실무 서비스 제작이 가능합니다.

ChatGPT API, Cursor AI, MCP 등 최신 도구를 실제 적용하여

아이디어 → 프로토타입 → 서비스로 이어지는 프로젝트 경험을 제공합니다.

이를 통해 AI 활용 역량과 문제 해결력을 동시에 키우며, 향후 포트폴리오에도 활용할 수 있습니다.

이런 내용을 배워요

이 강의는 코딩이 필요한 분들을 대상으로 CURSOR AI와 Claude Code의 기본 사용법을

두 강사의 대화형 실무 설명으로 안내하는 입문 강의입니다.

풀스택 개발자 관점에서 CURSOR AI와 Claude Code의 실제 적용 사례와 구현·문제해결 노하우를

중심으로 실무적 인사이트를 제공합니다.

 CURSOR AI의 Claude Code 플러그인을 사용해 VS Code 환경에서 index.html을

대화형으로 생성·편집하는 실습 화면입니다.

왼쪽은 확장 기능 목록, 중앙은 Claude Code의 대화창(명령 입력 및 파일 생성 로그),

오른쪽은 실제로 편집 중인 HTML 코드가 보이는 편집기 창입니다.

다크 테마와 라이트 테마 적용 예시(토글 UI)를 보여주는 구글 이미지 검색 결과 활용합니다.

화면은 검색어 결과로 나온 토글 디자인과 데모 이미지들을 그리드로 보여주며,

오른쪽에 선택된 이미지의 확대 미리보기가 표시되어 있습니다.

OpenWeather 웹사이트의 API·대시보드 소개 페이지(로그인 성공 알림 포함)를 실습합니다.

왼쪽에는 브라우저 북마크/탭 목록이 보이고 강의 맥락에서는

이 페이지를 API 키 발급과 날씨 데이터 연동 실습 참고 자료로 활용합니다.

Excalidraw 스타일 화이트보드에 Convex DB와 MCP 기반 컨텍스트 연동(Next.js 15 포함)

및 MCP 아키텍처 개요를 함께 설명합니다.

오른쪽에는 MCP 클라이언트·서버 구성과 외부 서비스(Slack, 메일, 캘린더 등)

및 로컬 데이터 소스 연결 구조, 그리고 Claude 호스트가 MCP를 통해

연동되는 아키텍처 다이어그램이 시각적으로 표현합니다.

음식 사진을 업로드하면 칼로리·영양성분을 분석해주는 웹 애플리케이션을 제작합니다.

이미지 생성 툴의 결과 목록과 생성된 음식 이미지 미리보기를 보여주며,

두 화면을 병행해 시각적 결과 확인과 영양 분석을 동시에 검토하는 데모를 제작합니다.