미뤄 온 나의 첫 AI 웹앱, 3시간 만에 배포까지 완성하기

Claude Design과 Claude Code를 활용해 기획부터 디자인, 개발, 배포까지 전 과정을 경험합니다. 코딩 지식 없이도 독서 기록 웹앱 '나의 책장'을 완성하며, 실제로 동작하는 URL을 만들고 공유하는 방법을 배웁니다. 한 번의 학습으로 나만의 아이디어를 웹앱으로 구현하는 능력을 갖추게 됩니다.

HTML/CSS 다음 단계부터 React 상품 탐색 앱 완성까지, 직접 코드를 쓰며 익히는 JavaScript·React 입문 강의입니다. 영상을 따라 하며 직접 구현하거나, 학습 노트의 프롬프트로 AI 제안을 받아 필요한 부분만 골라 반영하는 두 가지 방식으로 학습할 수 있습니다. 총 30개 수업(약 13시간 30분)으로 JavaScript 핵심 문법, DOM·이벤트, React 컴포넌트·props·state를 하나의 흐름으로 배우고, 테스트와 빌드로 결과를 직접 검증합니다.

AI 시대에도 웹 개발의 시작은 HTML입니다. HTML의 기본 문법부터 시맨틱 마크업, 웹표준·웹접근성까지 차근차근 배우며 AI 코드를 이해하고 수정하는 능력과 취업을 위한 탄탄한 웹 개발 기본기를 만들어보세요.

AI 시대에도 원하는 웹디자인을 완성하려면 CSS 기본기가 필요합니다. CSS의 기본 문법부터 레이아웃, Flexbox, 반응형 웹까지 차근차근 배우며 AI 코드를 이해하고 수정하는 능력과 취업에 필요한 실무 기본기를 만들어보세요.

AI 시대에도 개발자에게는 코드를 이해하고 실제 서비스를 완성하는 능력이 필요합니다. HTML/CSS/JavaScript 기본기를 바탕으로 React와 Firebase를 활용해 로그인, 데이터 관리, 이미지 업로드부터 배포까지 직접 구현하며 실전 웹 개발 역량을 키워보세요.

AI를 사용하는 것에서 한 단계 더 나아가, 내 웹앱에 직접 AI 기능을 구현해보세요. Next.js와 Supabase를 기반으로 AI 레시피 생성부터 이미지 생성, 데이터 저장까지 구현하며 생성형 AI를 실제 웹서비스에 연결하는 실전 개발 경험을 쌓아보세요.

AI 시대의 웹 개발자는 코딩뿐 아니라 AI를 활용해 아이디어를 실제 결과물로 완성하는 능력이 중요합니다. Stitch와 Figma Make를 활용한 UI 제작부터 React 구현과 배포까지 경험하며, 실무와 포트폴리오에 활용할 수 있는 AI 웹 개발 역량을 키워보세요.

React를 배웠다면, 이제 TypeScript를 실제 프로젝트에 적용해볼 차례입니다. TodoList 앱을 직접 만들며 컴포넌트와 상태에 타입을 적용하고, CRUD 기능부터 LocalStorage 데이터 저장과 배포까지 경험하며 실무에서 활용할 수 있는 React + TypeScript 개발 감각을 익혀보세요.

JavaScript를 배웠다면, 이제 TypeScript로 한 단계 성장해보세요. 기본 타입과 타입 추론부터 Interface, 함수 타입, 제네릭, 유틸리티 타입까지 실습으로 익히며 React·Next.js 등 현대 프론트엔드 개발에 필요한 TypeScript 기본기를 탄탄하게 만들어보세요.

HTML/CSS/JavaScript를 배웠다면, 이제 React로 한 단계 성장해보세요. 컴포넌트, Props, State 등 React 핵심 개념부터 상품 필터링·페이지네이션·API 연동·반응형 UI·배포까지 쇼핑몰 프로젝트로 익히며, 퍼블리셔에서 프론트엔드로 확장하기 위한 실전 기본기를 만들어보세요.

HTML/CSS/JavaScript 기본기를 익혔다면, 이제 하나의 웹사이트로 완성해볼 차례입니다. Figma 디자인을 분석하고 HTML/CSS로 구현한 뒤 JavaScript(jQuery) 인터랙션과 반응형 작업, 배포까지 진행하며 실무 웹 퍼블리싱의 전체 과정을 경험해보세요.

CSS 기본기를 익혔다면, 이제 Grid로 복잡한 웹 레이아웃을 자유롭게 만들어보세요. CSS Grid의 핵심 개념부터 Figma 디자인 분석과 실제 웹 구현까지 단계적으로 실습하며, 실무 웹 퍼블리싱에 필요한 레이아웃 설계 능력을 키워보세요.

React와 같은 최신 기술이 확산된 지금도 jQuery는 기존 웹사이트의 운영·유지보수와 웹 퍼블리싱 현장에서 여전히 접하게 되는 기술입니다. 단순히 화려한 효과를 따라 만드는 것이 아니라 jQuery의 동작 원리와 기본기를 이해하고, 이벤트와 애니메이션부터 다양한 UI 인터랙션까지 단계적으로 학습합니다. 실습을 통해 포트폴리오를 완성하고 현업에서도 활용할 수 있는 실전 웹 퍼블리싱 역량을 키워보세요.

웹 개발의 첫 걸음을 떼셨나요? HTML, CSS, javascript를 이제 막 시작하신 분들께 특별한 제안을 드립니다! 모바일 시대에 발맞춰 모바일 웹사이트를 만들고 싶지만, 어디서부터 시작해야 할지 망설여지시나요? 걱정하지 마세요. Figma 모바일 디자인을 직접 분석하고 구현하면서, 자연스럽게 반응형 웹 개발의 핵심을 배워보세요. 세련된 모바일 디자인을 토대로, 사용자의 마음을 사로잡는 섬세한 인터랙션부터 다양한 화면 크기에 완벽하게 적응하는 기술까지, 모든 것을 함께 알아가볼 수 있습니다. 이제 여러분의 웹사이트가 모든 기기에서 빛나도록, 노하우를 나눠드리겠습니다. 함께 시작해볼까요?

html,css, javascript(jquery) 기초가 있으신가요? 그런데 전체 웹사이트 전체를 어떻게 만들지 잘 모르시나요? 그렇다면 디자인을 참조해서 쇼핑몰 메인페이지 구현을 도전해보세요. 완성된 디자인을 참조하고 기획 의도와 디자인의 상세한 사항들을 파악하여 웹사이트를 구현하는 노하우를 알려드립니다.

HTML/CSS를 배웠다면, 이제 JavaScript로 웹페이지를 움직여볼 차례입니다. 변수·함수·배열·조건문·반복문 등 프로그래밍 기본기부터 DOM 요소 제어와 이벤트, 탭·아코디언 같은 UI 구현까지 익히며 React 등 프론트엔드 학습으로 이어지는 JavaScript 기본기를 탄탄하게 만들어보세요.