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

피그마UI3버전으로 기초부터 실무까지 체계적이면서 쉽고 빠르게 완강하실 수 있도록 구성되었습니다.

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

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

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

'호텔 현대라한_목포점' 사이트 제작으로, 실제 웹사이트 메인페이지를 그대로 제작·구현해보는 강의입니다. 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 등의 인터렉티브 요소를 추가하여 개설될 예정입니다.

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

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

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

GSAP의 ScrollTrigger를 활용하여 스크롤에 반응하는 인터랙티브 반응형 웹 포트폴리오를 만들어봐요!

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

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

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

프로덕트 디자이너가 되고 싶은 분들, UX 취업/이직을 준비하는 사람이라면 필수 강의! 문제해결력이 있는 포트폴리오를 만들기 위해 프로젝트 선별부터 장표 기획/디자인까지 실제 경험을 기반으로 알려드려요.

요즘 LLM이 개발 환경을 바꾸고 있지만, 진짜 중요한 건 “코드를 대신 쓰는 것”이 아니라 서비스에 기능으로 붙이는 것입니다. 이 강의는 Next.js + OpenAI API로 가볍지만 완성도 있는 타로 리딩 서비스를 단계별로 구현합니다. 첫 단계에서는 백엔드 없이도 가능한 MVP를 만들고, 사용자 입력 흐름(질문/스레드/카드 선택)과 결과 생성까지 연결합니다. 이후 단계에서 백엔드 구축, 일반 로그인과 OAuth, 커뮤니티 기능, 리딩 대시보드로 기능을 확장합니다. 마지막으로 AWS 배포와 구글 애드센스 연동까지 진행해 실제로 운영 가능한 형태로 마무리합니다. 또한 LLM API 사용 비용이 부담되지 않도록 요금 구조 이해와 비용 최적화 전략을 함께 다룹니다.

생성형 AI를 활용해 기획부터 디자인, 구현, 배포까지 한 번에 완성하는 실전 웹개발 프로젝트 강의입니다. Stitch와 Figma Make를 활용해 디자인을 만들고, AI Studio로 코드를 생성하여 실제 서비스로 배포합니다. 코드를 많이 몰라도 AI와 함께 개발하는 방법을 배우며, 나만의 AI 웹앱을 완성합니다. 이제 여러분도 AI와 협업하는 개발자가 됩니다.

Photoshop과 Adobe XD 프로그램을 활용해 다양한 디바이스의 웹, 앱 레이아웃을 디자인해 본 뒤 간단한 코딩 기술을 학습해 직접 구현해볼 수 있게 됩니다.

기초 공부를 하셨다면 이제 직접 만들어 볼 시간입니다. 나만의 포트폴리오 만들어 취업으로 나아갈 단계입니다!

이 강의는 RAG(Retrieval-Augmented Generation) 를 👉 개념 설명에서 끝내지 않고 👉 실제로 동작하는 구조를 직접 만들며 👉 확장·고도화까지 경험하는 실습 중심 강의입니다. 단순한 RAG 예제에서 출발하여, Advanced RAG → Modular RAG → Agent 기반 RAG까지 현업에서 바로 활용 가능한 수준으로 단계적으로 학습합니다.

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

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

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

개발은 잘 모르지만 바이브 코딩(vibe coding)을 시작해보고 싶은 분들, 내 가게(식당, 카페 등) 혹은 내 서비스(변호사/세무사/병원 등)를 홍보할 수 있는 랜딩 페이지를 스스로 직접 만들어보고 싶은 분들을 위한 강의입니다. 바이브 코딩의 출발점을 제대로 잡아드리겠습니다.

"이렇게 바쁜 세상, AI를 활용해서 포트폴리오를 빠르게 만들 수 있다고?" 문제 정의부터 리서치 정리, 아이데이션, 프로토타이핑까지! AI를 실전 파트너로 활용해 완성도 높은 UX/UI 포트폴리오를 빠르게 만들어봐요. 최신 AI 툴은 물론, 실무에서 꾸준히 쓰이는 검증된 툴까지 프로젝트에 맞게 전략적으로 활용할 수 있어요.

생성형 인공지능의 최신 트렌드, AI 에이전트! 개발 업무를 다 해주는 Cursor와 기능을 확장해주는 MCP로 앞서나가는 방법!

GSAP의 ScrollTrigger를 활용하여 스크롤에 반응하는 인터랙티브 반응형 웹 포트폴리오를 만들어봐요!

탐색 → 계획 → 구현 → 커밋. 검증된 AI 개발 워크플로우를 클로드 코드로 마스터하세요. MCP, 서브에이전트, 프롬프트 엔지니어링까지 23개 미션으로 익히고, 3개 실전 프로젝트를 완성합니다.

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

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

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

웹기획 기초 과정이 중대형 프로젝트에서 어떻게 응용되어 실무에 적용되는지 알려드리는 웹기획 응용 과정이에요 수강생은 빅데이터 분야 웹기획 수행 단계별 스킬과 실무를 마스터할 수 있습니다. <<이 VOD는 실제 수업의 녹화 영상으로 잡담 등의 소리들이 일부 포함되어 있으니 구매 시 참고해 주십시오~!>>

이 강의는 LangChain 1.0과 LangGraph를 중심으로 생성형 AI 서비스를 설계·구현하는 전 과정을 단계별 실습으로 다룹니다. 단순한 LLM 호출을 넘어, 에이전트 기반 아키텍처, 상태(State) 관리, 메모리, 스트리밍, 미들웨어, Human-in-the-Loop까지 포함한 운영 가능한 AI 시스템 구조를 직접 구현합니다. 문서·PDF·웹 데이터 기반 RAG 시스템, SQL Agent(Chinook DB), 도구 호출 기반 Agent, Supervisor 패턴의 멀티 에이전트, 그리고 LangGraph Graph API를 활용한 상태 머신 기반 워크플로우를 실습하며, 현업에서 바로 활용 가능한 재사용 가능한 에이전트 파이프라인을 구축합니다. 또한 구조화된 출력(Pydantic 기반), 에이전트 미들웨어(Summarization, HITL, Retry, PII 보호), 토큰/단계별 스트리밍을 통해 실제 서비스에서 요구되는 안정성·확장성·제어 가능성을 갖춘 생성형 AI 애플리케이션을 완성합니다. 👉 LangChain/LangGraph의 내부 구조와 실행 흐름을 정확히 이해하고 싶은 분 👉 RAG·Agent를 “데모”가 아닌 실서비스 구조로 구현하고 싶은 분 👉 상태 기반 에이전트, SQL·문서 자동화, 멀티 에이전트 오케스트레이션까지 아우르는 현실적인 실무 로드맵이 필요한 분께 최적의 강의입니다.

예쁜 화면 100개보다 움직이는 프로토타입 1개! 피그마에서 조건부 로직으로 실제처럼 작동하는 프로토타입을 만들고, AI 시대에도 흔들리지 않는 디자인 사고력을 기르세요.