AI와 함께 만드는 웹사이트 - Stitch · Figma Make · React 실전 프로젝트

Codex 앱으로 오프라인 클래스 예약 웹서비스를 기획하고 만듭니다. 고객·관리자 화면, 회원가입과 권한, 신청·승인 규칙을 구현하고 검증·배포한 뒤 같은 계정과 데이터를 쓰는 Android 앱으로 확장합니다. 마지막에는 내 요구사항을 직접 추가합니다. 테스트 결제와 iOS는 별도 확장·선택 과정입니다.

코딩, 아직도 혼자 하세요? 이제 AI가 99%를 대신해주는 시대입니다. 이 강의는 복잡한 문법 암기 대신, 구글의 강력한 AI '제미나이 프로(Gemini Pro)'를 당신의 24시간 AI 개발 파트너로 만드는 방법을 알려줍니다. 유료 Gemini Pro 모델을 무료로 사용하여 Flutter의 기초 원리를 배우고, 실무 수준의 프로젝트를 통해 아이디어를 현실로 만들어봅니다.

3천명 수강생이 선택한 강의! GPT-5 버전으로 업데이트! 챗GPT로 어디까지 할 수 있니? 주식 자동매매 애플리케이션과 웹 투자 리포트 제작하기!

Next.js와 Tailwind CSS를 활용한 프론트엔드 입문 강의입니다. 백엔드 없이 정적 배포까지 완료하며, 초보자도 완성의 성취감을 느낄 수 있도록 설계되었습니다

이제 리액트(React)가 진짜 ‘보이기’ 시작합니다. 고급 개념과 훅(Hooks) 가장 쉽고 정확하게 배워보세요.

AI 시대에 맥북을 구매했는데, 뭐부터 해야 할지 막막하신가요? macOS 15년 경력 개발자 출신이 '기기 초기화'부터 함께 합니다. ✅ 앱 설치 · macOS 필수 꿀팁 · 터미널 · Homebrew · 개발환경 구축 ✅ Claude Code & Agentic Coding으로 AI가 대신 코딩하는 환경까지 👉 지금 시작하면 오늘 안에 개발환경 완성 — 맥북을 제대로 쓰는 첫날이 됩니다.

리액트를 공부하다가 포기하셨나요? 코딩이 처음인 쌩초보, 비전공자도 자바스크립트부터 리액트까지, 포기하지 않고 React로 가는 길을 열어드립니다.

컴퓨터 비전의 가장 기본적인 데이터셋인 MNIST에 대한 이론적 개념을 정리하고, Torchvision의 API를 통한 구현 및 직접 custom dataset class를 구현하는 방법을 배웁니다.

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

AI와 대화로 3개월 만에 3개의 서비스를 만들었습니다. 개발자도 코딩도 필요 없이, AI와 함께 실용적인 웹 서비스를 구축합니다.

예제 게임을 따라 만드는 데서 끝나지 않습니다. ChatGPT·Codex 기반 바이브 코딩으로 게임 기획 → 개발 → 모바일 빌드 → AdMob 광고 연동 → 원스토어·Google Play·App Store 등록까지, 실제 출시 프로젝트를 바탕으로 전 과정을 배웁니다.

퍼블리셔 취업과 퍼블리셔 실무에서 가장 경쟁력이 있는 모바일 웹 제작 능력을 향상할 수 있습니다. 퍼블리셔로서 모바일 웹을 제작하기 위한 거의 모든 제작 방법과 노하우를 다질 수 있습니다. 특히 요즘 퍼블리셔와 개발자에게 요구되는 디자인 능력을 피그마(Figma) 학습으로 많은 부분 커버할 수 있도록 피그마(Figma)로 모바일 웹 UI 디자인 작업을 하는 과정도 상세하게 설명하였습니다. 모바일 웹 퍼블리싱 수업에서 가장 강점인 부분인 HTML 와이어프레임 상세한 작성법을 모든 페이지 하나하나 상세하게 설명합니다. 강의를 통해 HTML 와이어프레임 제작 능력이 크게 향상될 것입니다. 모바일 웹 퍼블리싱은 CSS 변수(Var) 활용한 모바일과 태블릿에 맞춘 레이아웃을 완벽하게 맞추는 학습을 통해서 실무 작업과 대동소이한 정도의 작업 능력을 갖추게 됩니다. Flex 레이아웃을 중심으로 중상급 CSS 실전 능력을 충분히 갖추시게 됩니다.

실전 바이브 코딩으로 회사 소개 랜딩페이지를 완성합니다. Cursor AI + Next.js + TypeScript + TailwindCSS + shadcn/ui + MCP 스택으로, 설계부터 배포까지 한 번에 진행합니다. 핵심은 “빠른 구현 + 검색 엔진에 잘 노출되는 SEO 기반”입니다. 🏁 강의 목표 랜딩 제작 → 성능 최적화 → SEO 반영 → 배포/인덱싱 실시간 코딩(바이브 코딩)으로 섹션별 완성본을 바로 확인 검색 반영까지 직접 체험 🛠️ 실습 스택 Cursor AI, Next.js(App Router), TypeScript TailwindCSS, shadcn/ui, MCP 워크플로우 🔍 SEO 실습 강사가 제공하는 SEO 최적화용 MD 파일 적용 메타데이터, OG/Twitter 카드, robots/sitemap, 구조화 데이터(JSON-LD) 다국어 라우팅 선택 적용 🎯 완성물 반응형 회사 소개 랜딩 + 문의 폼 Lighthouse 95+ 목표 Vercel 배포 후 Search Console 등록 및 인덱싱 요청 📚 이 강의로 배우는 것 히어로/신뢰/기능/FAQ 섹션을 빠르게 구성하는 법 shadcn/ui로 깔끔한 UI 구성 폼 검증과 기본 전환 추적 포인트 설계 구조화 데이터 + 다국어 라우팅으로 SEO 스코어 올리기 배포 후 Search Console을 통한 인덱싱 과정 이해 💡 현업 인사이트 (강의 특전) 단순히 코드 구현만이 아니라, 실제 시장에서 활용되는 마케팅·노출 방식도 간단히 짚어드립니다. 광고, 블로그 포스팅, 댓글 작업의 현실적인 단가 범위 외주·용역 업체들이 실제로 SEO, 노출 작업을 어떻게 진행하는지 개발자가 직접 참여했을 때와 외주를 맡겼을 때의 비용/효율 차이 이 부분을 통해 단순히 기술을 넘어서 실제 현업에서 어떻게 활용되는지, 어떤 비용 구조로 움직이는지까지 감각을 익힐 수 있습니다. 한 줄 정리 “구현 → 최적화 → 배포 → 인덱싱”의 흐름을 따라가며, 실제 검색 노출과 현업 시장 구조까지 연결되는 웹 제작 프로세스를 배웁니다.

당신의 상상이 현실이 되는 시간, '바이브 코딩'의 세계로 초대합니다. "코딩은 몰라도, 만들고 싶은 건 확실한" 여러분을 위해 이 강의를 준비했습니다. 챗 GPT나 클로드 같은 AI가 등장하면서 누구나 개발을 할 수 있다고들 합니다. 하지만 막상 시도해 보면 어떤가요? - "단순한 코드는 잘 짜주는데, 파일이 여러 개로 늘어나면 AI가 앞의 내용을 까먹어요.", - "그럴듯해 보이는데 실행하면 오류가 나고, 고쳐달라고 하면 더 엉뚱한 코드를 줘요." 이런 경험, 한 번쯤 해보셨을 겁니다. 저 또한 처음 AI와 협업할 때는 똑같은 좌절을 겪었습니다. AI는 훌륭한 '조수'였지만, 전체 숲을 보지 못하는 한계가 있었으니까요 하지만 OpenAI Codex CLI를 만나고, '바이브 코딩(Vibe Coding)'이라는 새로운 방식을 익히면서 제 개발 프로세스는 완전히 바뀌었습니다. 이 강의는 여러분이 겪고 있는 문제를 해결함과 동시에 코더가 아닌 AI 에이전트를 지휘하는 디렉터로 만들어줍니다. 저와 함께 코덱스 CLI라는 강력한 도구를 장착하고, 상상을 현실로 만드는 짜릿한 바이브 코딩의 여정을 시작해보세요.

단순 챗봇을 넘어선 에이전트 구현이 막막하신가요? 제가 직접 겪은 시행착오와 공식 문서 기반의 노하우로, 실무에 즉시 적용 가능한 중급 에이전트 구축법을 알려드립니다.

< WE CAN Cursor AI ALL-IN-ONE 마스터 클래스 > 코딩 지식 ZERO도 괜찮아요! #AI와 함께 시작하는 스마트 코딩 여정 #매주 새로운 성장 스토리 #당신만의 AI 개발 파트너가 되어드립니다 #비개발자도_가능 #AI코딩 #CursorAI #코딩초보환영

"왜 AI가 이런 코드를 짰지?", "왜 방금 말한 걸 기억 못 하지?" 클로드 코드(Claude Code)와 같은 AI 도구를 쓰다 보면 마주하는 답답함, 그 원인은 도구가 어떻게 동작하는지 모르니까입니다. 이 강의는 그 블랙박스를 투명하게 열어젖힙니다. 우리는 25강에 걸쳐 LLM에게 파일을 보는 '눈(Read)', 코드를 고치는 '손(Edit)', 명령을 수행하는 '발(Bash)'을 직접 달아주며, 실제 현업 도구와 똑같이 동작하는 나만의 Coding Agent를 밑바닥부터 구현합니다. 단순히 라이브러리 사용법을 배우는 것이 아닙니다. AI가 어떻게 프로젝트 구조를 파악하고, 왜 긴 대화에서 기억을 잃는지, 그것을 기술적으로 어떻게 해결하는지(Sliding Window, Summary) 직접 코드로 구현하며 체득합니다. 이 과정을 통해 여러분은 AI 도구의 단순한 '사용자'에서, 작동 원리를 꿰뚫고 도구를 내 입맛대로 개조하고 평가할 수 있는 'AI 공급자'의 시야를 갖게 될 것입니다.

정리 안 된 코드, 쏟아지는 요구사항... AI로 돌파구를 찾고 싶다면 전 토스페이먼츠 기술이사가 알려주는, 레거시 환경에서 AI를 활용해 "일 잘하는 개발자"가 되는 방법 AI 시대에도 레거시는 사라지지 않습니다. 오늘 창업한 회사를 제외하면, 모든 회사에 레거시가 있다고 해도 과언이 아니죠. 그렇다면 우리는 이 현실에서 AI를 어떻게 활용해야 할까요? 이 강의는 대규모 결제 서비스 조직을 이끌었던 전 토스페이먼츠 기술이사가 레거시 환경에서 AI를 활용해 효과적으로 일하는 방법을 직접 보여드립니다. 단순히 AI 사용법이나 코딩 스킬을 알려주는 강의가 아닙니다. 개발자로서 "생각하는 힘"을 키우고, 일을 잘하는 법을 느끼는 것이 목표입니다.

리액트 & 넥스트 & 리덕스 & 리덕스사가 & 익스프레스 스택으로 트위터와 유사한 SNS 서비스를 만들어봅니다. 끝으로 검색엔진 최적화 후 AWS에 배포합니다.

누구보다 빠르게 배우는 클로드 코드 | 개발자편 요즘 유행하는 클로드 코드를 빠르게 배우고 (설치, 사용, 스킬, 서브에이전트) 나만의 프로젝트를 만들어보세요!