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

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

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/) 메인페이지를 그대로 제작해 보는 과정입니다. 사이트에서 담고 있는 화려한 인터렉티브 웹을 그대로 제작, 구현해 보는 과정으로 복잡한 레이아웃도 쉽고 빠르게 제작하는 실무 핵심 노하우를 그대로 알려드립니다.

'호텔 현대라한_목포점' 사이트 제작으로, 실제 웹사이트 메인페이지를 그대로 제작·구현해보는 강의입니다. 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/) 의 메인페이지를 그대로 제작해 보는 과정입니다. (강의 완성 파일 첨부!)

큰돈 들여 개발자에게 부탁하던 아이디어 구현, 이제 직접 하세요! 코딩 1, 아니 0도 몰라도 AI와 '바이브'로 소통하며 7시간 만에 실제 수익이 발생하는 웹서비스 2개를 내 손으로 직접 만듭니다.

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

AI 기술과 UX 디자인이 결합하는 AX 시대, 제품팀은 어떤 전략으로 고객 경험을 설계해야 할까요? 17년차 대기업 책임연구원이자, HCI 박사 출신의 지식공유자가 최신 트렌드와 활용 사례, 연구 결과를 기반으로 알려 드립니다.

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

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

현재 안드로이드는 자바 언어와 Kotlin 언어로 개발할 수 있습니다. 어떤 언어를 사용하여도 같은 안드로이드 애플리케이션을 개발할 수 있습니다. 본 강좌는 안드로이드 애플리케이션 개발에 대한 기초 부터 심화까지 대부분의 내용을 다루고 있으며 기초적인 내용부터 전부 Kotlin 언어를 이용해 코드를 작성하고 있습니다. 또한 구글의 최신 UI 라이브러리인 Material 3를 이용하고 있습니다. 본 강좌는 안드로이드 전체 과정 중 3가지 프로젝트를 수행하여 보는 과정입니다. 프로젝트 수행시 Hilt, Retrofit, RoomDatabaes, MVVM 등 현업에서 실제로 사용중인 고급 기법을 익히실 수 있습니다. 또한 안드로이드 개발 도구 안에서 제미나이를 활용한 바이브 코딩을 수행하여 AI를 이용한 생산성 증대를 가져올 수 있다. 저희 소프트 캠퍼스는 항상 최신 강의를 제공하도록 노력하겠습니다.

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

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

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

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

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

당신을 진정 실전 게임개발자로 만들어줄 강의. 실전 프로젝트 4개와 AI 특화 3개의 게임으로 한계를 넘어보세요!

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

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

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

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

이 강의는 OpenAI API를 활용하여 텍스트·이미지·음성·문서 기반 생성형 AI 애플리케이션을 직접 구현하는 실습 중심 과정입니다. Anaconda·Jupyter Notebook 환경 구성부터 시작해 API Key 관리, 비용·토큰 이해 등 실무에 반드시 필요한 개발 환경 설정을 다룹니다. 최신의 Responses API를 기반으로 텍스트 생성, 요약, 분류, Vision(이미지 이해), 음성 처리, PDF 입력 처리를 구현하며, Function Calling, Structured Outputs(Pydantic), Embedding, RAG(File Search) 등 현업에서 바로 사용하는 핵심 기능을 단계별로 실습합니다. 또한 Web Search, Code Interpreter, Streaming, Background 작업, Conversation State 관리까지 포함하여 단순 호출을 넘어 ‘지능형 AI 서비스’로 확장하는 방법을 학습합니다. 마지막으로 Agents SDK, MCP(Model Context Protocol)를 활용해 도구를 스스로 선택·실행하는 에이전트 기반 AI 시스템을 구현하며, 실제 서비스 개발에 필요한 구조와 설계 관점을 함께 익히는 것을 목표로 합니다

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

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

리서치 자동화부터 백엔드 데이터 연동, 나아가 실제 라이브 동적 웹을 배포하는 과정까지 함께 다루며 개인이 제품의 전체 생애 주기를 주도적으로 이끌 수 있는 풀스택 관점을 기르는 데 목적이 있습니다. AI 시대 경쟁력을 강화하고 싶은 분들께 생각을 현실화 하는 강력한 엔진으로 활용하는 힘을 드립니다.