Figma MCP × AI로 4시간만에 완성하는 반응형 웹포트폴리오

"2026년도 UIUX디자이너 |코딩하는 디자이너 에이전시 합격 포트폴리오 공개" 면접관의 눈길을 사로잡는 UIUX 웹 포트폴리오를 제작하는 실전 강의입니다. 단순한 포트폴리오 제작이 아닌, 인터랙션을 활용해 차별화된 결과물로 UIUX 디자이너로 취업 경쟁력을 높일 수 있도록 설계된 커리큘럼입니다.

html/css초보 입문자를 대상으로 기초를 탄탄하게 다지며, 물론 반응형 레이아웃 제작 실전을 배울 수 있습니다.

실전! 웹사이트제작 Step By Step! 포메인(https://www.phomein.com/brand/main/main.do) 메인페이지를 그대로 제작해 보는 과정입니다. 사이트에서 담고 있는 화려한 인터렉티브 웹을 그대로 제작, 구현해 보는 과정으로 복잡한 레이아웃도 쉽고 빠르게 제작하는 실무 핵심 노하우를 그대로 알려드립니다^^

실전! 웹사이트제작 Step By Step! 입문 강좌로, 다양한 기초 레이아웃을 제작해 보면서 HTML과 CSS의 개념을 확실하게 배울 수 있는 강의입니다.

실전! 웹사이트제작 Step By Step! 크루알라모드(https://crewalamode.com/) 메인페이지를 그대로 제작해 보는 과정입니다. 사이트에서 담고 있는 화려한 인터렉티브 웹을 그대로 제작, 구현해 보는 과정으로 복잡한 레이아웃도 쉽고 빠르게 제작하는 실무 핵심 노하우를 그대로 알려드립니다.

'호텔 현대라한_목포점' 사이트 제작으로, 실제 웹사이트 메인페이지를 그대로 제작·구현해보는 강의입니다. html/css기초 지식이 있는 분들을 대상으로 html Markup과 Layout제작에 대한 이해는 물론 Fixheader, Image Slider, MenuOpen Bar, Scroll Animation 제작까지의 웹에서 꼭 필요로한 skill을 배울 수 있는 웹페이지 제작 실전! 강의입니다.

돕다 사이트 제작 Application Course로, 실제 웹사이트 메인페이지를 그대로 제작·구현해보는 강의입니다. 무료 강의로 오픈한 돕다 사이트 Basic Course의 Layout과 Animation 위주의 단순한 구조의 코딩에서 Fixed header, Image Slider, Mobile navigation, Scroll Animation, 반응형 등을 추가하며 코딩 하나하나를 수정보완하며 완성해가는 웹페이지 제작 실전! 강의입니다. (본강의는 돕다-Basic Course를 들으시고 수강하셔야 학습 효과가 크다고 볼 수 있습니다.)

[웹사이트제작 Step By Step] Basic-course로, 돕다(http://dopda.co.kr/) 메인페이지를 그대로 제작해 보는 과정입니다. 본 Basic Course는 CSS 레이아웃 제작과 애니메이션에 대해 다루며, 이어서 Application-course에서는 이미지슬라이드 효과, 반응형제작, 스크롤 애니메이션, Fix Header 등의 인터렉티브 요소를 추가하여 개설될 예정입니다.

[웹사이트제작 Step By Step] 초급 강좌로, 한국소비자시대 웹진(현재는 리뉴얼 됨) 메인페이지를 그대로 제작해 보는 과정입니다.

[웹사이트제작 Step By Step] 3단계 강의로, 뮤자인(https://musign.net) 메인페이지를 그대로 제작해 보는 과정입니다. 사이트에서 담고 있는 화려한 인터렉티브 웹을 그대로 제작, 구현해 보는 과정으로 복잡한 레이아웃도 쉽고 빠르게 제작하는 실무 핵심 노하우를 그대로 알려드립니다^^

[웹사이트제작 Step By Step] 3단계 강의로, 대방산업 메인페이지를 그대로 제작해 보는 과정입니다. 사이트에서 담고있는 화려한 인터렉티브 웹을 그대로 제작 구현해 보는 과정으로 화려한 만큼, 난이도가 있는 강의입니다.

HTML5와 CSS3를 활용하여 웹사이트(한화캐미컬/솔루션)를 제작 실습과정으로, PC 모드 레이아웃과 반응형 페이지 제작을 완벽히 이해하고, 활용할 수 있는 실전! 웹페이지 제작 ! Step by Step!의 Basic Course 강좌입니다. (강의 완성 파일 첨부!)

실전! 웹사이트 제작! Step By Step의 Applcation Course로 html/ CSS/ jQuery 와plug_in을 사용하여 와이스튜디오(http://www.ystudio.co.kr/) 의 메인페이지를 그대로 제작해 보는 과정입니다. (강의 완성 파일 첨부!)

모던 3-Tier 구조의 웹 서비스를 AI와 함께 설계하고 바이브 코딩만으로 개발한 후, AWS 환경에 배포해 실제로 작동하는 프로덕션 서비스까지 완성합니다! Amplify, CloudFront, ALB, EC2, S3, RDS 등 AWS 환경에 관해 현업에서 사용하는 핵심 서비스들을 한 흐름으로 경험할 수 있도록 일련의 설정 과정까지 모두 담았습니다.

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

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

IntelliJ를 사용하는 Java 백엔드 개발자들이 Claude Code를 이용해 생산성을 극대화 할 수 있는 방법을 알려드립니다. 특히 윈도우 환경을 사용하는 분들이 겪는 바이브 코딩 환경 문제를 완벽히 해결할 수 있도록 도와드립니다.

문서 → 코드 자동화. 프롬프트 치지 말고 시스템이 일하게 만드세요. Skills, Sub-agents, Commands로 나만의 AI 개발 에이전트를 구축하고, 5개 실전 프로젝트로 수익화 서비스까지 완성합니다.

이 강의는 코딩 에이전트를 직접 만들면서 Kotlin 기반 AI 에이전트 개발을 익히는 실전 과정입니다. Kotlin으로 만들어진 AI 프레임워크 Koog를 활용해 실제로 Claude Code, Cursor, Junie와 같은 코딩 에이전트를 구현하는 방법을 단계별로 실습합니다. 특히 Koog는 단순한 서버 사이드 프레임워크가 아니라 Spring과 자연스럽게 연동되며, Kotlin 멀티플랫폼(KMP)을 통해 Android · iOS · Desktop · Web 등 다양한 환경과 연결 가능한 확장성을 갖추고 있습니다. 코드를 읽고, 분석하고, 수정하고, 생성하는 지능형 에이전트를 만들며 AI 에이전트의 구조, 전략, 컨텍스트 처리, Tool 연동 등을 실전 중심으로 학습하게 됩니다.

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

코딩을 몰라도, 풀스택 개발을 몰라도, 레일즈 개발을 몰라도 인프런과 같이 복잡한 플랫폼을 만들 수 있어요. 윈드서프와 커서, 클로드 코드를 사용해요.

디자인을 공부해본 적이 없는 비전공자 분들, 이제 막 UX디자인을 공부하기 시작한 학생들, UX 및 UI 디자인 취준생 분들을 위해 준비한 "피그마로 UI디자인하기 A to Z" 수업입니다. 포토샵 등 다른 툴을 전혀 모르는 분도 피그마만 활용해 UI디자인 전문가가 될 수 있도록 기초부터 고급 기능까지 알려드립니다.

"데이터 분석 그 이상, 예측 모델의 설계부터 최적화까지 (총 29강)" 데이터 분석은 끝냈지만, 막상 모델을 만들려니 막막하신가요? 단순히 라이브러리를 호출하는 법을 넘어, 각 알고리즘의 작동 원리와 최적의 모델 검증 전략을 완벽히 내 것으로 만들어 드립니다.

모바일 UX/UI 디자인, 처음이거나 기초가 부족한 분들을 위한 실전 입문 강의입니다. 기초 이론과 다양한 실습을 통해 앱 설계 실무 감각까지 차근차근 배우며 자신감을 키워보세요! 💪

현직 스타트업 CTO가 실제 서비스와 여러 외주를 통해서 얻은 바이브코딩 지식 전수해드립니다.

본 강의는 Node.js와 TypeScript 환경에서 최신 Gemini API SDK(@google/genai)를 다루는 것을 목표로 합니다. 텍스트, 이미지, 비디오를 동시에 처리하는 멀티모달 기술을 사용하는 방법을 배웁니다. API 키 발급부터 프로젝트 세팅, 모델 호출까지 전 과정을 실습합니다.

AI가 코드를 대신 짜주는 시대, 당신은 코더(Coder)'로 남을 것인가, '설계자(Architect)'로 도약할 것인가? 이 강의는 기초 구현은 가능하지만, 다음 스텝이 막막하거나 '물경력'의 늪에 빠질까 불안한 주니어 개발자를 위해 설계되었습니다. 우리는 단순한 클린 아키텍처 이론 학습을 넘어, 로버트 C. 마틴(Uncle Bob)의 고수준 설계 원칙을 AI 시대의 무기로 만드는 것을 목표로 합니다.

HTML, CSS, JavaScript만으로 OpenAI API를 연동한 AI 웹서비스를 직접 구현합니다. Netlify Functions를 활용해 API 키를 안전하게 보호하고, 정적 프론트엔드 + 서버리스 백엔드 구조로 실제 배포까지 진행합니다. 단순 데모가 아닌, 수익화 가능한 구조의 MVP를 처음부터 끝까지 IDE 라이브로 완성합니다.

구현하고 싶은 앱/웹 아이디어는 있지만, 앱 서비스 기획 경험이 없어 어떻게 시작해야 될지 막막한 스타트업 대표, 단기간에 기획을 체계적으로 배우고 싶은 실무자, 경력자의 기획 업무 프로세스와 노하우를 배우고 싶은 주니어 기획자 모두 전문가가 될 수 있도록 Figma를 활용한 새로운 기획 방식 및 PM 17년차의 업무 스킬을 기초부터 차근차근 알려드립니다.

워드프레스에 CPA 제휴마케팅 방식의 수익을 추구하는 자동포스팅 프로그램을 파이썬으로 제작함으로써 블로그 운영 방식에 대한 아이디어를 확장시켜줄 뿐만 아니라, 이론이 아닌 실전 파이썬을 완벽히 학습할 수 있는 강의입니다.

이제 당신의 상상력이 최고의 게임 기획서가 됩니다! AI와 함께라면, 마치 레고를 조립하듯 즐겁게 대화하며 여러분의 첫 게임을 완성할 수 있습니다. 구글 Gemini Pro를 무료로 사용해보세요!

이론만 가득한 AI 강의는 이제 그만. KT AI 우수상 수상 현직 CEO가 텍스트부터 영상, 게임 제작까지 '오늘 배워 내일 바로 성과 내는' 실전 비법을 모두 알려드립니다. 와디즈 1,640만 원 펀딩 달성! 수백 명이 열광한 그 강의. 비전공자도 당장 웹소설과 영상을 만들어내는 '진짜 실무형' 생성 AI 치트키를 떠먹여 드립니다. 기획부터 고퀄리티 영상 제작까지, 전문가에게 맡기면 일주일 걸릴 일을 AI로 뚝딱 끝내는 법. 시행착오 없이 결과물을 만드는 가장 빠른 루트를 공개합니다.

단순 튜토리얼만으론 실무 적용이 어렵죠. 제 현업 노하우를 담아 복잡한 상태 관리와 멀티 에이전트 설계법을 확실히 전수해 드립니다.