디자이너 DDD Details
클래스 맛보기
DDD의 인터랙티브 웹 클래스 1강 전격 공개!
- AI가 UI 디자인, 개발 프로세스에 미친 영향
- 인터랙티브 웹 학습의 기대 효과
- 인터랙티브 웹은 왜 실전 적용이 어려울까?
- 디자인과 프로그래밍의 ‘언어’적 특성
- 강의 활용법
수강생 모두에게 드리는
DDD의 인터랙티브 웹 클래스만의 특별 혜택
디자인과 개발을 넘나드는
48회차 강의 무한 학습
인터랙티브 패턴 예제 30개
코드 원본파일 (react.js)
강의자료 및 완강 이후 학습 가이드 PDF
얼리버드 수강생 전체 대상 QnA 가능한 온라인 커뮤니티 제공
- 디스코드 강의 수강생 전용 채널 개설 후 운영
클래스 추천
이런 분들에게 추천합니다.
창의적인 결과물을 직접 웹으로 구현하고 싶은 UI/UX 디자이너
AI 툴을 활용해 개발 역량을 키우고 싶은 인터랙티브 웹 디자이너
디자인 역량을 키우고 고퀄리티 웹을 구현하고 싶은 1인 개발자
수강생 리뷰
DDD의 디발자 챌린지 후기
-
윤XX
디자이너 / 디지털 마케팅 에이전시기획 의도를 정확히 반영한 디자인을 웹 상에 시각화하는 데 큰 도움이 되었고, AI 기술의 도입으로 이제는 원하는 결과물을 혼자서도 디자인하고 구현할 수 있는 역량이 생겼습니다. 이전에는 디자인 시안과 실제 구현 간의 괴리로 인해 소통이 쉽지 않았지만, 이제는 디자인과 코딩 결과물을 동시에 확인하며 의견을 주고받을 수 있어 커뮤니케이션이 훨씬 원활해졌습니다. 시각적 품질은 물론, 협업 과정에서도 큰 만족을 느끼고 있으며, 앞으로의 프로젝트에서도 더욱 효과적인 결과를 기대하고 있습니다.
-
문XX
디자이너 / 해외 취업 준비디디디님과 5주간 UX/UI의 기본기를 차근차근 다지고, 마지막 1주는 내가 만들고 싶었던 웹사이트를 직접 기획하고 구현해보았습니다. 특히 Cursor를 활용해서 인터랙티브 웹을 만들어본 건 처음이었는데, 자유롭게 실험하고, 수정하고, 다시 시도하면서 디자인과 개발 사이의 벽을 허무는 경험을 할 수 있었던 게 인상적이었어요. 이번 기회를 통해 AI 도구들과 가까워질 수 있었습니다. 기초부터 실전까지 이어지는 이 커리큘럼을 통해, 막연했던 아이디어가 점점 구체적인 형태를 갖춰가는 과정이 정말 재미있었어요. 무엇보다 단순한 툴 사용법을 배우는 데 그치지 않고, '만들고 싶었던 것'을 직접 만들어보며 디자인과 기술을 유기적으로 연결시켜보는 경험이 가장 큰 장점이었다고 생각합니다. 디자인과 개발, 그리고 AI에 흥미가 있다면 꼭 한번 도전해보시길 추천드립니다! :)
-
노XX
UX 기획자UX기획/UI디자인 업무를 하면서 생각나는 사이드 프로젝트 아이디어를 직접 만들어볼 기회가 없어 아쉬웠는데, DDD님의 강의를 들으면서 작은 웹서비스를 만들고 출시할 수 있게 되었습니다! 강사님이 비전공자의 시선에 맞춰 개발환경 세팅부터 차근차근 가르쳐주십니다. 리액트와 피그마 프로퍼티를 연결하여 어떤 식으로 화면과 요소를 구조화하여 생성형AI에게 코드를 요청해야하는지 배웠어요. 자기 아이디어를 구현해보고픈 디자이너는 꼭 들어보시면 좋겠습니다!
Data Driven Design 대표 DDD의 포트폴리오
-
GS 칼텍스 플라스틱 리터러시 01 -
GS 칼텍스 플라스틱 리터러시 02 -
GS 칼텍스 플라스틱 리터러시 03
* 실제 사이트가 궁금하다면? GIF를 클릭하면 해당 웹사이트로 바로 연결됩니다!
Data Driven Design, My Threads Insight, 프로젝트 시리아, 실시간 네트워크 모니터링 시스템, Vibe Design Lab – 지금 직접 들어가서 확인해보세요.
이 클래스가 특별한 이유
인터랙티브 웹 실무 아웃풋을 위한 AI 활용법 & 7개 패턴 실습
기획부터 구현까지, 인터랙티브 웹으로 시작하는 디자이너 역량 업그레이드 클래스! 단순 시각 표현을 넘어, 코드 기반의 결과물 제작까지 직접 경험해 보세요. AI 시대, 독립적인 콘텐츠 제작자로 살아남는 실무형 인터랙티브 웹 완성 가이드를 콜로소에서 공개합니다.
프롬프트 설계로 끝내는 7개 인터랙티브 패턴 실습! Cursor와 Figma를 연계해 기획 의도를 시각화하고, 이를 실제 웹으로 구현하는 과정을 통해 실전 감각을 익혀보세요. 개발/디자인 전문 지식 없이 창의적인 실무 아웃풋을 완성하는 AI 활용법을 지금 만나보세요.
클래스 예제
CursorAI로 완성하는 단계별 인터랙티브 웹 구현 프로세스
Part 1. 자신만의 브랜드 웹사이트 구현
기획의 목적을 이해하고, 실현 가능한 아이디어로 구조화하는 사고방식을 배웁니다.
브랜드 웹사이트 메인페이지 제작
-
브랜드 상세페이지 제작 (1) -
브랜드 상세페이지 제작 (2)
Part 2. 30여가지의 인터렉티브 예제
실무에 바로 적용가능한 30여가지의 인터렉티브 예제를 실습하며 인터렉티브 웹 구현의 모든 것을 배워보세요!
-
Three.js 3D 효과 -
Three.js particle 효과
-
인터랙티브 타이포그래피 -
리듬감 있는 화면전환
-
SVG Animation -
배경에 활용 가능한 그라데이션 모션
* 해당 이미지는 강의의 이해를 돕기 위한 예시이며, 생성형 AI 도구의 특성 상 소폭 수정될 수 있습니다.
Data Driven Design 대표
DDD
안녕하세요, Data Driven Design 대표 김우석입니다. DDD는 주로 스타트업이나 IT 조직의 다양한 프로젝트를 도우며, 서비스의 성장 단계에 맞는 디자인 시스템을 기반으로 제품 디자인/개발 및 테크 기업의 인터랙티브 브랜딩 웹사이트 제작을 맡아왔습니다.
DDD의 다양한 작업들은 서로 결이 다른 것처럼 보이기도 하지만, 디자인과 개발의 개연성을 면밀히 이해하고, 설계 기반의 디자인을 창의적으로 표현한다는 공통점이 있습니다. 이번 강의에서는 AI와 호환성이 높으면서도, 특히 인터랙티브 웹의 창의성을 안정적인 방식으로 극대화할 수 있는 노하우를 소개해 드리고자 합니다.

Data Driven Design 대표
DDD
현) Data Driven Design 대표
이력 더보기
[이력]
전) 글로벌 소셜 미디어 스타트업 '둥글' UX 디자이너
전) 여행 스타트업 '정글리안' UX 엔지니어
[참여 프로젝트]
2022 <플라스틱 리터러시: GS 칼텍스 ESG 캠페인> 인터랙티브 스토리텔링 웹사이트 공동 참여
2022 서울시디지털시장실 디자인 컨설팅: 기존 UX/UI 개선을 위한 디자인 시스템 구축 및 제안
2024 Honest AI 인터랙티브 브랜딩 페이지 제작
2022 가지랩 인터랙티브 온라인 진단 서비스 제작
2021 페넬라겐 인터랙티브 브랜딩 사이트 제작
2020 커먼타운 브랜딩 사이트 개발
2019 Prebit 실시간 인터랙티브 대시보드 시스템 제작
2025 Live Application: 국내 TOP 금융, 보험사 사용 컴플라이언스 솔루션 디자인
2014 <프로젝트 시리아> 인터랙티브 데이터 저널리즘 프로젝트 (국제 대회 출품작)
2015 <이주 노동자를 말하다: 한국경제> 인터랙티브 데이터 저널리즘 프로젝트
클래스 특징
웹 개발 능력을 키우는 인터랙티브 디자인 패턴 분석 가이드
비개발자도 누구나 웹 구현에 성공하는 준비된 인터랙티브 디자인! 인터랙티브 패턴을 통해 디자인 설계가 개발로 이어지는 흐름을 자세히 학습하고, 기본적인 개발의 어휘와 문법을 익혀보세요. 완강 후에도 독립적인 개발 역량을 갖출 수 있도록 디테일한 가이드를 제공해 드립니다.
Cursor AI를 활용한 디자인 아이데이션 & 웹 구현법
상황에 맞는 Cursor AI & 프롬프트 활용 능력 마스터! AI 툴을 기반으로 창의성과 정확도를 동시에 잡는 결과물을 완성해 보세요. 디자인 아이데이션 및 설계, 구현 시 필요한 프롬프트 접근 방식을 각각 학습하고, 웹 구현까지의 전체 프로세스를 이해해 봅니다.
오래 가는 디자이너 & 개발자를 위한 AI 활용 테크닉
디자인과 개발의 연계성에 대한 깊은 이해가 필요한 인터랙티브 웹 제작! 인터랙티브 웹은 물론, 일반적인 웹 서비스의 UI 디자인 구현까지 폭넓게 적용하는 전반적인 AI 활용 능력을 키워보세요. 장기적인 디자인 & 개발 패턴 학습을 위한 AI 활용 능력을 완벽하게 다져봅니다.
클래스 구성
이런 것을 배웁니다
-
디자인과 개발, 두 마리 토끼를 한 번에 잡는 AI 집중 커리큘럼누구나 AI 활용이 자연스러워진 시대, 디자이너가 코드를 고려해야 할 이유를 알아보세요. 디자인과 개발 스킬을 효율적으로 통합해 활용하고, AI를 통해 결과물의 실현 가능성을 높이는 전략을 배워봅니다. -
비개발자 & 초보 개발자도 OK! AI 툴과 함께 협업하기웹 개발을 처음 배우는 사람도 누구나 쉽게! Cursor AI를 활용해 아이디어를 구체화하고 구현하는 방식을 배워보세요. 단순 개발 학습뿐 아니라 구현 과정까지, AI와 함께 체계적으로 인터랙티브 웹을 구축해 봅니다. -
실무 최적화! 체계적인 인터랙티브 디자인 패턴 학습법실제 현장에서 자주 사용되고, 응용하기도 좋은 인터랙티브 패턴 코드 예제를 만나보세요. 7개 예제 실습을 바탕으로 AI 프로그래밍을 연습하고, 타이포그래피, 화면 전환, 마우스 커서 효과 등 다양한 패턴을 직접 구현해 봅니다.
-
창의성과 사용성을 모두 책임지는 인터랙티브 웹 실무 가이드단순히 실험적인 인터랙티브 디자인을 넘어, 실제 제품에 적용 가능한 반응형 대응 및 응용 방법을 배워보세요. 브랜드 아이덴티티와 의도한 스토리텔링이 더욱 명확하게 드러나는 실전 데이터 기반의 디자인 기법을 익혀봅니다. -
30개 예제로 완성! 실전 브랜드 웹사이트 응용 실습가상의 디자인 브랜드 웹사이트에 인터랙티브 패턴을 적용해 보세요. 기획부터 섹션 아이데이션, 컴포넌트별 구현, 웹 빌드 및 배포까지! 실전 예제를 바탕으로 인터랙티브 웹 구현의 전 과정을 경험하고, 실무 감각을 키워봅니다. -
완강 후에도 꾸준히, 장기적으로 익히는 학습 로드맵AI 환경에서 설계 기반의 디자인을 정확하게 구현해 내는 장기적인 개발 학습법을 만나보세요. 예상 가능한 향후 5년 뒤의 AI 활용 시나리오를 살펴보고, 주도적인 디자이너/개발자로 성장하는 DDD만의 인사이트를 익혀봅니다.
- 평생 수강
- 최저가
한번 구매로, 평생 시청하세요.
05.25 (월) 가격이 인상됩니다.
조만간 가격이 인상될 예정입니다.
지금 구매하세요!
인터뷰
Data Driven Design 대표 DDD
사용 프로그램 안내드립니다.
본 강의는 Cursor AI, Figma 프로그램으로 진행되며,
원활한 수강을 위해 최신 버전의 해당 프로그램을 별도로 구매 및 설치해 주시길 바랍니다.
* 프로그램 및 준비물은 별도로 제공하지 않습니다.














