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

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

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

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/) 의 메인페이지를 그대로 제작해 보는 과정입니다. (강의 완성 파일 첨부!)

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

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

개발자에게 매번 부탁하던 방식은 이제 그만! 비싼 외주 쓰지 않고 웹사이트와 다양한 서비스들을 만들어보아요!

하나의 플랫폼에서 회의록도 쓰고, 앱도 만들고, 영상 제작까지. Google AI Studio로 AI 멀티플레이어가 되어보세요!

이제 AI의 힘으로 누구나 쉽게 앱을 기획하고 UI를 그릴 수 있습니다! 코딩 몰라도, UI 경험 없어도 괜찮아요. Claude, ChatGPT 같은 AI 도구가 여러분의 아이디어를 현실로 만들어 드립니다. 단 몇 번의 질문만으로 타겟 고객을 분석하고, 앱 구조를 설계하고, 심지어 UI 화면까지 자동으로 생성할 수 있어요. 이 강의에서는 피그마를 처음 만져보는 분도 따라할 수 있도록 기초부터 차근차근 알려드립니다. 직접 손으로 그리지 않아도 HTML to Design 플러그인으로 기존 웹사이트 UI를 한 번에 가져올 수 있고, 구글 스티치나 readdy.ai 같은 AI 도구로 몇 초 만에 완성도 높은 화면을 만들 수 있어요. 창업을 꿈꾸는 분, 기획자로 전직하고 싶은 분, 개발자와 소통하고 싶은 분 모두에게 딱 맞는 강의입니다. 복잡한 이론 대신 바로 써먹을 수 있는 실전 노하우만 쏙쏙 뽑아서 알려드릴게요. 이제 아이디어만 있으면 누구나 앱 서비스를 기획할 수 있습니다!

디자이너들에게 가장 각광받는 툴, Figma! AI로 쉽게 만들어서 각광받는 UX/UI 디자이너 되기!

디자인을 처음 시작해도 60분 만에 나만의 브랜드 로고를 완성할 수 있습니다. 이 강의는 Canva와 Figma를 활용해 비전공자도 따라 하면 결과물이 나오는 로고 제작 입문 강의입니다. ✔ 브랜드 컨셉을 로고로 표현하는 방법 ✔ 컬러·폰트 선택의 기준 이해 ✔ 로고 디자인 기본 원칙 적용 ✔ 다양한 플랫폼에 활용 가능한 결과물 제작 감각이 아닌 논리로 만드는 로고 디자인을 경험합니다.

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

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

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

AI 툴과 자동화 기술이 넘쳐나는 시대, 'Cursor' 하나로 누구나 시작할 수 있는 바이브 코딩을 소개합니다. 개발자만 가능한 일이라고요? 아닙니다. 이 클래스에서는 코드 한 줄 몰라도, 마우스 클릭, 프롬프트 입력만으로 Cursor를 활용해 앱과 앱을 만들어서 수익을 창출하는 자동화 시스템을 구축할 수 있습니다. 수강 대상 개발은 어렵지만 자동화로 수익을 내고 싶은 분 디지털 노마드, 1인 기업, 프리랜서 AI 활용을 통해 시간과 비용을 절감하고 싶은 모든 분

AI와 그누보드를 활용해, IT 초보라도 아이디어 하나로 ‘나만의 플랫폼 CEO’가 되는 시대! 기획부터 배포까지 실제 개발 과정을 낱낱이 시연하고, 광고·쇼핑몰 등 다양한 수익화 방법까지 알려드립니다. 지금 바로 온라인 비즈니스를 시작하세요!

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

이 강의는 단순한 유행을 넘어, AI 도구와 협업하는 방법을 체계적으로 배우고, 출력 품질을 검증·개선하며, 애플리케이션을 처음부터 끝까지 구축·배포하는 과정을 다룹니다. AI에 관심 있는 개발자부터 팀 생산성을 높이고 싶은 팀 리더까지, 누구나 수강하실 수 있습니다.

이 강의를 모두 들으시고, 응용하면 여러분만의 사이트, 앱을 만들 수 있어요. 이 강의는 Cursor AI 를 이용하여, 우리 가족만을 위한 단톡방을 Web사이트로 만들면서, 코딩의 흐름을 자연스럽게 익혀보는 바이브코딩 입문 강의입니다. App 개발자 계정이나 맥북 없이, 윈도우 환경만으로도 개발을 몰라도 누구나 쉽게 따라 할 수 있고, 실제 웹사이트로 배포하는 법도 배웁니다.

서버 세팅부터 블로그·유튜브 자동화까지, n8n으로 완전한 AI 워크플로우를 구축합니다. 컨타보 VPS 기반 서버 설치, 우분투·도커·포르테이너 환경 세팅, 도메인 연결과 HTTPS 보안 설정까지 안정적인 운영 환경을 실습합니다. FastAPI와 Docker를 활용한 검색 API·파일 서버 개발, Airtable과 n8n 연동, 블로그 AI 에이전트 구축, 이미지·영상 자동화까지 다룹니다. 실제 서비스 운영에 바로 적용 가능한 수익형 자동화 전략을 완성할 수 있습니다.

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

AI시대에 프로덕트 디자인과 교육은 어떻게 변화하고 있을까요? 피그마 공식 커뮤니티, FoF Seoul & Educators 에서 공동으로 주관해 밋업을 열었어요. AI시대 프로덕트 디자인과 교육 관련 다양한 사례, 주제와 함께, 피그마를 사랑하는 글로벌 업계 연사들의 관련 세션을 만나보세요.

이 강의에서는 AI 프로덕트를 기획하고 디자인할 때 필요한 UX 원칙과 실전 노하우에 대해 알려드립니다. 사용자 가치 중심의 AI 활용법, AI를 활용한 UX 기획 및 디자인 방법, 일상 속 디자인 사례를 통해 알아보는 핵심 UX 원칙과 이론, 더 나은 경험을 제공하기 위한 UX 리서치 및 데이터 분석법에 대해 살펴봅니다.

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