Video
Archive
DCODELAB 유튜브 채널 영상 목록
NEXT, GSAP 모션 컴포넌트 제작 수업 예제
AI가 코드를 짜주는 시대, 웹퍼블리셔는 정말 대체될까? Next.js 16 + GSAP을 활용한 실무 모션 인터랙션 수업 예제를 시연합니다. 단순 마크업은 AI가 대체할 수 있지만, 섬세한 UI 모션과 인터랙션 설계는 여전히 사람의 감각이 필요합니다. ✅ 이 과정에서 배우는 기술 스택 - Next.js 16 App Router + TypeScript + TailwindCSS - GSAP Timeline · ScrollTrigger 기반 실무 UI 모션 - 페이지 전환 효과 · 스크롤 연동 애니메이션 - WCAG 기반 웹접근성 · ARIA · 키보드 내비게이션 - Spring API 명세 기반 프론트엔드-백엔드 데이터 연동 - Git 브랜치 전략 · 코드 리뷰 · PR · QA 워크플로 - AI(Claude Code) 활용 — 마크업 검증, 접근성 감사, 디버깅, 코드 리뷰 자동화 📈 5개월 성장 로드맵 Phase 1 — 컴포넌트 기반 퍼블리싱 (HTML/CSS → TSX 컴포넌트 전환) Phase 2 — GSAP 모션 · 슬라이더 (실무 인터랙션 구현) Phase 3 — 웹접근성 · JS 로직 (WCAG · ARIA · 바닐라 JS) Phase 4 — 백엔드 협업 최적화 (API 연동 · DTO 타입 매핑) Phase 5 — 협업 · QA 시뮬레이션 (Git · 코드 리뷰 · 실전 프로젝트) 💡 왜 이 과정인가? - 기존 퍼블리싱(HTML/CSS 납품) → 개발자가 다시 컴포넌트로 변환하는 이중작업 제거 - 단순 마크업은 AI가 대체하지만, 컴포넌트 설계 + 접근성 + 모션 + API 연동까지 아우르는 UI 설계 역량은 대체 불가 - 퍼블리셔의 UI 감각은 유지하면서 산출물만 HTML → TSX 컴포넌트로 전환 - 수료 후 협약 기업 실전 프로젝트 투입 기회 제공 🎯 이런 분들에게 추천합니다 - AI 시대에 퍼블리셔 커리어가 불안한 분 - React 강의 완강했는데 실무에서 한 줄도 못 쓰는 분 - GSAP 모션을 Next.js 환경에서 구현하고 싶은 분 - 단순 퍼블리싱을 넘어 UI 설계 전문가로 성장하고 싶은 분 🔗 블로그: https://dcodelab.vercel.app #웹퍼블리셔 #NextJS16 #GSAP #ScrollTrigger #모션UI #AI대체 #프론트엔드 #웹개발 #코딩수업
Next16, 클로드코드를 통한 AI 자동화 설계 수업예제
AI가 코드를 짜주는 시대, 웹퍼블리셔는 정말 대체될까? Next.js 16 App Router로 만든 기업형 홈페이지 수업 예제를 시연합니다. 프레임워크를 다룰 줄 아는 퍼블리셔는 AI 시대에도 경쟁력이 있습니다. 이 영상에서 어떤 수준의 결과물을 만들 수 있는지 직접 확인해보세요. 📌 이런 분들에게 추천합니다 - AI 때문에 퍼블리셔 커리어가 불안한 분 - Next.js를 실무에 도입하고 싶은 웹퍼블리셔 - 기업형 홈페이지 퍼블리싱 예제가 궁금한 분 - React/TypeScript 기반 프로젝트를 경험해보고 싶은 분 🔗 블로그: https://dcodelab.vercel.app/program/inquiry #웹퍼블리셔 #NextJS16 #기업형홈페이지 #AI대체 #프론트엔드 #React #웹개발 #코딩수업
디코드랩 웹 모션 개발 국비 취업과정 수업 예제
디코드랩 웹 모션 개발 국비 취업과정 수업 예제
비전공자를 위한 리액트 프론트엔드 개발, UI/UX디자이너, 웹디자인 취업 국비교육 - 이전기수 훈련생 포트폴리오 2023
영상에 있는 포트폴리오는 해당 과정을 통해 훈련생 분들이 직접 100% 진행한 작업물들입니다. 2023년 리액트 작업물 훈련생 포트폴리오 https://blog.naver.com/hadaboni80
비전공자를 위한 리액트 프론트엔드 개발, UI/UX디자이너, 웹디자인 취업 국비교육 - 수료생 포트폴리오 2022~2023
영상에 있는 포트폴리오는 해당 과정을 통해 훈련생 분들이 직접 100% 진행한 작업물들입니다. - 디코드랩
비전공자를 위한 리액트 프론트엔드 개발, UI/UX디자이너, 웹디자인 취업 국비교육 - 이전기수 훈련생 포트폴리오 6
영상에 있는 포트폴리오는 해당 과정을 통해 훈련생 분들이 직접 100% 진행한 작업물들입니다. - 디코드랩
비전공자를 위한 리액트 프론트엔드 개발, UI/UX디자이너, 웹디자인 취업 국비교육 - 이전기수 훈련생 포트폴리오 5
영상에 있는 포트폴리오는 해당 과정을 통해 훈련생 분들이 직접 100% 진행한 작업물들입니다. - 디코드랩
비전공자를 위한 리액트 프론트엔드 개발, UI/UX디자이너, 웹디자인 취업 국비교육 - 이전기수 훈련생 포트폴리오 4
영상에 있는 포트폴리오는 해당 과정을 통해 훈련생 분들이 직접 100% 진행한 작업물들입니다. - 디코드랩
비전공자를 위한 리액트 프론트엔드 개발, UI/UX디자이너, 웹디자인 취업 국비교육 - 이전기수 훈련생 포트폴리오 3
영상에 있는 포트폴리오는 해당 과정을 통해 훈련생 분들이 직접 100% 진행한 작업물들입니다. - 디코드랩
비전공자를 위한 리액트 프론트엔드 개발, UI/UX디자이너, 웹디자인 취업 국비교육 - 이전기수 훈련생 포트폴리오 2
영상에 있는 포트폴리오는해당 과정을 통해 훈련생 분들이 직접 100% 진행한 작업물들입니다. - 디코드랩
비전공자를 위한 리액트 프론트엔드 개발, UI/UX디자이너, 웹디자인 취업 국비교육 - 이전기수 훈련생 포트폴리오
영상에 있는 포트폴리오는 해당 과정을 통해 훈련생 분들이 직접 100% 진행한 작업물들입니다.
비전공자를 위한 리액트 프론트엔드 개발 취업 국비교육- 6,7주차 수업예제 소개 - node.js, mongoDB를 활용한 백엔드 연동
해당 영상에 있는 영상은 실제 수업에서 같이 실습하는 예제들입니다. 비전공자 입장에서 무리없이 따라올 수 있도록 단계별로 적정 난이도를 설정하였으며 해당 예제를 통해서 자연스럽게 프론트엔드 개발에 대한 기초 문법부터 실무 활용까지 자연스럽게 학습할 수 있습니다. 해당 예제들의 학습을 통해 4개월 뒤, 비전공자도 현업에서 무리없이 프론트엔드 개발자로 근무할 수 있도록 실무에서 진행하는 작업물들로 커리큐럼이 구성되어 있습니다.