채널톡 아이콘
BEST
개발 · 프로그래밍

/

프론트엔드

인터랙티브 개발 실무 끝장내기 [역량 강화편]

실무에서 사용하는 인터랙티브 JS, CSS 노하우를 아낌없이 공개합니다.

(4.8) 수강평 53개

수강생 1,172명

인터랙티브 웹JavaScript

초급자를 위해 준비한
[프론트엔드, 웹 퍼블리싱] 강의입니다.

이런 걸 배울 수 있어요

  • Vanilla JS 인터랙티브 개발 노하우

  • CSS 3D, 애니메이션, 트랜스폼, 트랜지션

  • 생산성이 높아지는 TweenMax 사용법

  • StageResize , 반응형 인터랙티브

  • Mobile Touch 및 orientation(기울기) 활용

웹 인터랙션, 더 쉽고 + 더 창의적으로! 💎

내 손으로 만드는 트렌디한 UX.

단순 서비스 구현을 넘어 트렌디한 UX를 구현하려면 탄탄한 기본기가 가장 중요합니다. 특정 프레임워크나 플러그인에 의존하지 않고 순수 자바스크립트(Vanilla JS) 만으로 해외 유명사이트의 트렌디한 UX를 구현할 수 있습니다.

TweenMax를 이용한 화려한 모션부터 스크롤 이벤트, 반응형, 모바일 터치까지 15년간의 인터랙티브 개발 노하우를 아낌없이 담았습니다. (짧고 굵게!)

 

 

누구나 인터랙티브 개발을 할 수 있나요? 

인터랙티브 웹 모션,
혼자서도 잘 만들 수 있을까요?

“디자이너, 기획자가 어려운 효과를 원해요...”
“아이디어는 있는데 구현이 어려워요”
“자바스크립트 공부는 했는데 활용을 못해요”
“복붙해서 사용은 하는데 응용을 못하겠어요”
“퍼블리셔의 벽을 깨고 연봉을 올리고 싶어요”

저도 디자인과 출신의 개발 비전공자입니다. 기초가 부족한 게 아닌, 아예 기초가 없이 개발에 뛰어들었습니다. 고통스러울 정도로 힘들었던 경험이 있어서 어떤 게 어려운지, 어떤 부분에서 막히는지를 잘 알고 있습니다. 당시에 ‘이런 강의가 있었으면 정말 좋았겠다’는 심정으로 이번 강의를 만들었습니다. 

  • 현업에서 만날 수 있는 어려운 상황을 쉽게 풀어나가는 노하우를 알려드립니다.
  • 탄탄한 기본기를 바탕으로 창의적인 개발자가 되어 연봉을 올리세요!
샘플 포트폴리오 1 (보러가기)
샘플 포트폴리오 2 (보러가기)
외부 강연 영상

강의 특징

실제 현업에 가까운
실전형 예제

인터랙티브 기본원리
간결한 코드로 설명

지루한 이론 대신
실전으로 직행

소스 제공!
함께 보며 수업 진행

학습 내용 맛보기

Section.1

  • 변수, 랜덤, if 문, timer 등 자바스크립트 기초 활용 
  • 초간단하게 만들어보는 몇 가지 게임

Section.2

  • 인터랙티브 제작시 아주 중요한 페이징 개념 익히기
  • 같은 스크립트에 스타일을 바꾸면서 완전 다른 페이지 만들기
  • 모바일 터치 이벤트를 활용한 스와이프 기능 구현

Section.3

  • 별~이 쏟아지~는 코딩일레븐 페이지 제작
  • 별 이미지 두장으로 하는 간단한 페럴렉스 효과
  • TweenMax, scrollTo 플러그인을 이용한 쫀쫀한 화면 이동
  • 플러그인 없이 순수 자바스크립트로 구현한 버전과 비교

Section.4

  • 본격적인 TweenMax 사용 방법 설명
  • 반응형 페이지에서 필요한 stageResize 활용
  • 트윈맥스를 이용한 입체적인 랜덤 카드 모션 

Section.5

  • 위에서 배운 페이징 스크립트 응용
  • 다양하게 활용 가능한 TweenMax 랜덤 모션 제작 

Section.6

  • 3D 입체 카드
  • transform, translateZ 속성을 이용한 입체적인 표현
  • 모바일 기울기를 이용한 인터랙티브


웹에서 바로 보기 클릭

 

평균 별점 4.9★ 
코딩일레븐 신규 강의.

감사합니다!
수강평으로 남겨주신 다양한 의견들을
이번 강의에 반영했습니다.

지난 강의 보러가기

실무에서 바로 사용할 수 있는 인터랙티브 스킬!

자주 묻는 질문

Q. 비전공자도 들을 수 있나요?

저도 비전공자입니다 ^^ 인터랙티브 개발에 관심만 있으면 충분합니다.

Q. 강의를 듣기 전 준비해야 할 것이 있나요?

HTML, CSS 기초는 알고 들으시는면 편합니다. (CSS 전체 코드 포함되어 있습니다 ^^)

Q. 자바스크립트(JavaScript)를 잘 모르는데 괜찮을까요?

변수, 배열, 함수 등 기초적인 개념부터 시작합니다.
진행하다 모르시는 것은 질문 게시판을 통해 질문해 주세요!

수강 전 참고해주세요!

  • 영상 하단의 ‘수업노트’를 참고해 주세요. 영상에서 부족한 부분을 설명해 놓았습니다.
  • ECMA 2015(ES6) 스크립트를 사용합니다.
  • 완성된 코드를 제공합니다. 섹션 0 - 수업 3에서 파일을 다운로드해주세요.

이런 분들께
추천드려요!

학습 대상은
누구일까요?

  • 취준생, 디자이너, 퍼블리셔, 프론트 개발자

  • 해외 사이트처럼 창의적인 개발을 하고 싶은 분

  • JS를 복붙해서 사용은 하는데 응용이 힘든 분

  • 단순 기능 구현에 감성을 가미하고 싶은 분

선수 지식,
필요할까요?

  • HTML, CSS 기본지식

안녕하세요
코딩일레븐입니다.

3,273

명

수강생

216

개

수강평

210

개

답변

4.6

점

강의 평점

3

개

강의

15년 이상 여러 기업과 언론사에서 front-end 개발 및

데이터 시각화, 인터랙티브 사이트 제작을 했습니다.

http://yahao2512.com

 

https://brunch.co.kr/@yahao2512

저와 함께 깃털처럼 가벼운 코딩 함께 해보시죠!

더보기

커리큘럼

전체

47개 ∙ (5시간 33분)

해당 강의에서 제공:

수업자료
강의 게시일: 
마지막 업데이트일: 

수강평

전체

53개

4.8

53개의 수강평

  • salary999님의 프로필 이미지
    salary999

    수강평 16

    ∙

    평균 평점 5.0

    5

    70% 수강 후 작성

    いよいよ2弾が出ましたね！目次だけ見てもとても面白いと思うのでときめきですね。頑張りが惜しいような感じㅠㅠ。 インフラストラクチャを通じてお持ちの知識を共有していただきありがとうございます。いつもパラレックスやモーションの方は難しく感じられましたが、初級編と中級編講義を聞きながら少し親しくなりましたねㅎㅎ 講義の途中で流れた言葉ですが、次の講義はcanvasとTweenMaxで構成されても面白いと思います！次の講義も楽しみにしています！ぜひアップロードしてください！ 😆😆

    • coding11
      지식공유자

      オホト。 初めての受講評です。

  • hyejin28160786님의 프로필 이미지
    hyejin28160786

    수강평 1

    ∙

    평균 평점 5.0

    5

    34% 수강 후 작성

    昔からこんなインタラクションがとても気になりました！スクリプトに関する基本的な概念はありますが、いつもインタラクションを作業する必要があるときは、どのように解放すべきか、幕を開けて苦労しました。 （爽やか＾＾）実務でも使用可能な例で飾られて良かったし、他の作業にも応用してみたいです～！ :)次の講義も待ちます！良い講義ありがとうございます！

    • coding11
      지식공유자

      受講評 ありがとうございます :) 実務にもすぐにお使いいただける例として用意しました。私が実際に使っているコードです。役に立ったのは幸いです。まだ初期だから受講坪があまりないのに、大きな力になります無駄。楽しい一日をお過ごしください〜

  • hjux님의 프로필 이미지
    hjux

    수강평 20

    ∙

    평균 평점 5.0

    5

    100% 수강 후 작성

    よく受講しました！講義が大好きです👍 最初に基本的な動作概念を最初に教えてください。 その後、機能を追加して完成していく講義方式と 講義ごとに長くなく、核心的な概念中心に教えてくれてよかったです。 能力強化編にはさらに多様なインタラクティブWeb実装テクニックを学び、楽しく受講しましたね😁

    • carrrie437227님의 프로필 이미지
      carrrie437227

      수강평 17

      ∙

      평균 평점 5.0

      5

      55% 수강 후 작성

      簡単に説明してくれて良かったし、次の講義も待っていますㅎㅎ

      • coding11
        지식공유자

        受講坪ありがとうございます～実務にお役立ていただければ幸いですね。

    • 김땡땡님의 프로필 이미지
      김땡땡

      수강평 15

      ∙

      평균 평점 4.9

      4

      100% 수강 후 작성

      おかげで良い勉強していきます。 5つ星をすべて差し上げることができずに送ります。人ごとに満足する部分があり、ない部分があるので私はほとんどすべて満足していましたが、説明が滑らかではなく、スルリックを越えていく部分が少しあってガンガン学習するにあたって不便な点がなくていました。その他にはバニラのJavaScriptと初めて触れてみるライブラリーなどがわかり、今後の勉強において方向をとることができてよかったです。 3d立体こういうのもcss、JavaScript自体だけでも多様な効果を与えることが可能だという事実を知った後に何かコードだけでなくデザイン的思考においても開かれた感じです。いろんな助けを受けて、次にも同様の講義が出たら探してみたいと思います。ありがとうございました

      코딩일레븐님의 다른 강의

      지식공유자님의 다른 강의를 만나보세요!

      数行で終わるインタラクティブウェブ開発ノウハウ【初級編】

      coding11

      ₩5,088

      초급 / Interactive Web, JavaScript

      4.6

      (137)

      1,700+
      Update
      Update

      短時間で実務で最もよく使われるインタラクティブスキルをお知らせします。

      초급

      초급

      Interactive Web, JavaScript

      Three.js 3D インタラクティブ すぐに始める강의 썸네일

      Three.js 3D インタラクティブ すぐに始める

      coding11

      ₩12,639

      초급 / Interactive Web, Three.js

      4.6

      (26)

      300+
      Update
      Update

      実務ですぐにThree.jsを使えるようにカリキュラムを設計しました！

      초급

      초급

      Interactive Web, Three.js

      비슷한 강의

      같은 분야의 다른 강의를 만나보세요!

      数行で終わるインタラクティブウェブ開発ノウハウ【初級編】

      coding11

      ₩5,088

      초급 / Interactive Web, JavaScript

      4.6

      (137)

      1,700+
      Update
      Update

      短時間で実務で最もよく使われるインタラクティブスキルをお知らせします。

      초급

      초급

      Interactive Web, JavaScript

      [CSS&JS Master] - トレンドの感情記録日記を作成する강의 썸네일

      [CSS&JS Master] - トレンドの感情記録日記を作成する

      codecamp

      ₩10,177

      입문 / HTML/CSS, JavaScript, vanilla-javascript

      5.0

      (1)

      Update
      Update
      답변 활발
      답변 활발

      最新の CSS プロパティと実用的な Javascript をプロジェクトを進めながら楽しく学ぶことができます。

      입문

      입문

      HTML/CSS, JavaScript, vanilla-javascript

      基礎から学ぶNext YTMusicクローンコーディング（with next.js 14、UIマスター）강의 썸네일

      基礎から学ぶNext YTMusicクローンコーディング（with next.js 14、UIマスター）

      dodocoding

      ₩5,417

      초급 / Next.js, React, TailwindCSS, zustand, Clone Coding, Interactive Web

      4.4

      (35)

      400+

      React, Next.JS 14, TailwindCss, RadixUI, Shadcn, zustand で YoutubeMusic ウェブサイトをクローンします。 NextJS基礎からUI重点でWebフロント基礎をマスターすることができます。

      초급

      초급

      Next.js, React, TailwindCSS

      Web パブリッシャーのための JavaScript & jQuery 核心理論実践例題 (教材、完成版)강의 썸네일

      Web パブリッシャーのための JavaScript & jQuery 核心理論実践例題 (教材、完成版)

      codingworks

      ₩3,939

      초급 / JavaScript, jQuery, HTML/CSS

      4.6

      (11)

      100+

      ウェブ パブリッシャー向けの JS 核心理論および実践例教材および完成版は、PDF で作成された講義教材です。この教材は、ウェブ パブリッシャーが必ず知っておくべき JavaScript と jQuery の基本を忠実に習得できる役割を果たします。この教材の特徴は、理論に関連するスモール ミッション (Small Mission) を通じて、理論をさらに強化できることです。特に、学習したすべての理論を活用した実践例も、忠実に準備された教材です。この PDF の全ページは、純粋な JavaScript (Vanlila JavaScript) と jQuery ページの数が 320 ページ以上で、CodingWorks が簡単に理解できるように十分な説明が追加されています。特に、パブリッシャーがウェブサイト作成のために必要な jQuery 相互作用の実践例を学習できます。

      초급

      초급

      JavaScript, jQuery, HTML/CSS

      [コードキャンプ]温かいJavascript강의 썸네일

      [コードキャンプ]温かいJavascript

      codecamp

      ₩2,626

      입문 / JavaScript

      4.9

      (65)

      2,700+
      답변 활발
      답변 활발

      他の言語も多いのですが、なぜJavaScriptでなければならないのでしょうか。あるな！

      입문

      입문

      JavaScript

      まだ生きている不死の jQuery - 基礎から実務まで강의 썸네일

      まだ生きている不死の jQuery - 基礎から実務まで

      ezweb

      ₩1,970

      초급 / HTML/CSS, JavaScript, jQuery, jquery-selector

      Update
      Update

      全世界のウェブサイトで75%以上が使用しているJavaScriptライブラリ、jQuery！華麗な効果よりも原理を理解し、基礎を固められるように構成しました。jQueryの基礎から活用まで学習し、あなただけのポートフォリオを完成させたり、現場で即活用してみてください。

      초급

      초급

      HTML/CSS, JavaScript, jQuery

      ピュアなHTML/CSS/JSのみを活用したレスポンシブウェブ制作【実践編】ブートキャンプ강의 썸네일

      ピュアなHTML/CSS/JSのみを活用したレスポンシブウェブ制作【実践編】ブートキャンプ

      youngcodikimssam

      ₩4,596

      초급 / HTML/CSS, Responsive Web, Interactive Web

      5.0

      (2)

      Update
      Update

      Bootstrapを使わずに、純粋なhtml/css/jsのみを活用して、デバイス別に多様なレイアウトを実装できるレスポンシブウェブページ作成[2024年最新版]授業の実践制作授業です。

      초급

      초급

      HTML/CSS, Responsive Web, Interactive Web

      JavaScriptの要点だけを厳選して学ぶ강의 썸네일

      JavaScriptの要点だけを厳選して学ぶ

      sucoding

      ₩9,192

      입문 / JavaScript

      5.0

      (2)

      Update
      Update

      フロントエンド初心者が必ず習得すべきJavascript文法！基礎から始めて、高度な内容に至るまでJavaScript言語を徹底的に掘り下げていきます！

      입문

      입문

      JavaScript

      [Inflearn X 생활コーディング] HTMLとインターネット강의 썸네일

      [Inflearn X 생활コーディング] HTMLとインターネット

      inflearn

      무료

      입문 / HTML/CSS, JavaScript, netlify

      5.0

      (106)

      2,200+

      生活コーディングの最初のウェブ開発講座、<WEB 1 - HTML & Internet>リニューアル版が、唯一Inflearnでのみ公開されます！

      입문

      입문

      HTML/CSS, JavaScript, netlify

      本格的に学ぶ JavaScript: オブジェクト指向プログラミング マスター & 戦略型AI 三目並べ 実践 Part2 [中級編]강의 썸네일

      本格的に学ぶ JavaScript: オブジェクト指向プログラミング マスター & 戦略型AI 三目並べ 実践 Part2 [中級編]

      nhcodingstudio

      ₩4,924

      29%

      ₩3,447

      초급 / JavaScript, HTML/CSS, oop

      New
      New

      📌 この講義は、戦略型AI三目並べプロジェクトから始まり、オブジェクト指向プログラミングの核心概念まで実践例で完成させるカリキュラムです。 ゲーム実装でロジック設計とAI戦略思考を訓練し、続いて継承、コンポジション、委譲、カプセル化といったOOP設計技術を直接コードで経験します。 実際のプロジェクトで文法を超えて「設計する開発者」として成長したい方におすすめします。

      초급

      초급

      JavaScript, HTML/CSS, oop

      ヒューズスタディが欲しい [Wonhada]강의 썸네일

      ヒューズスタディが欲しい [Wonhada]

      gcc

      무료

      중급이상 / JavaScript, XML

      4.5

      (10)

      500+

      JavaScriptとXMLを使用して、簡単かつ迅速にiOSとAndroidアプリを作成しましょう。

      중급이상

      중급이상

      JavaScript, XML

      mongoDB基礎から実務まで（feat. Node.js）강의 썸네일

      mongoDB基礎から実務まで（feat. Node.js）

      sihoon

      ₩8,864

      초급 / MongoDB, REST API, Node.js, AWS, JavaScript, DBMS/RDBMS, Data Engineering

      4.7

      (86)

      1,300+
      Update
      Update

      mongoDB、NoSQLは最近多く聞こえますが、まだ見知らぬデータベースですか？リレーショナルデータベース（RDS / SQL）のように使用していませんか？いくら良い技術も正しく使用しないと逆効果が発生します。だからモンゴディビの使用失敗事例もしばしば見えます。このレッスンでは、mongoDBをできるだけmongoDBで使用できるように、基本概念から実務ノウハウまで教えていきます。

      초급

      초급

      MongoDB, REST API, Node.js

      クリーンアップ JavaScript: ベース構築!강의 썸네일

      クリーンアップ JavaScript: ベース構築!

      tonextday

      ₩5,088

      22%

      ₩3,939

      초급 / JavaScript, Interview, Tech Interview

      5.0

      (3)

      100+
      Update
      Update

      考え方を扱います。JavaScript の核心と本質を論理的に整理できます。JavaScript の経験を整理して、考え方を自分で整理できます。JavaScript の技術論理を確立できます。JavaScript 全体を見渡す視野を広げることができます。JavaScript の技術面接問題に対応できます。

      초급

      초급

      JavaScript, Interview, Tech Interview

      誰も教えてくれない WebRTC を使用した P2P 通信강의 썸네일

      誰も教えてくれない WebRTC を使用した P2P 通信

      july

      ₩5,417

      입문 / Go, webrtc, p2p, JavaScript, Socket.io

      4.9

      (7)

      100+
      Update
      Update

      WebRTC を活用して実装する Web カメラとピア間通信について学習できます。

      입문

      입문

      Go, webrtc, p2p

      非専門家のためのフルスタックグルメマップ作成プロジェクト!: フロント、バックエンド、そしてデプロイまで강의 썸네일

      非専門家のためのフルスタックグルメマップ作成プロジェクト!: フロント、バックエンド、そしてデプロイまで

      jiwoonjeong

      ₩8,864

      초급 / HTML/CSS, JavaScript, REST API, MySQL, AWS, Git, GitHub

      4.8

      (35)

      600+
      Update
      Update

      私が好きなユーチューバーのグルメマップを作成しながら、フロントエンド、バックエンド、Kakao Map API の使用方法、公開までを一度に学べるフルスタックグルメマップの講義です。

      초급

      초급

      HTML/CSS, JavaScript, REST API

      フルスタックのための堅実なフロントエンドブートキャンプ (HTML, CSS, バニラJavaScript + ES6) [フルスタック Part2]강의 썸네일

      フルスタックのための堅実なフロントエンドブートキャンプ (HTML, CSS, バニラJavaScript + ES6) [フルスタック Part2]

      funcoding

      ₩9,520

      입문 / HTML/CSS, JavaScript, ES6

      4.9

      (165)

      2,600+
      Update
      Update

      現場で実際のウェブサービスを開発した経験に基づき、初心者向けに実際の商用化も可能なレベルのウェブおよびアプリサービスを開発することを目標とするフルスタックシリーズ講座です。そのためのPart2講座として、多様な技術が存在するフロントエンド技術の中から、レスポンシブ、互換性まで考慮した最新のHTML5、CSS3、バニラJavaScript（Javascript）+ ES6をすべてしっかりと整理する講座です。

      입문

      입문

      HTML/CSS, JavaScript, ES6

      [Code Factory] [初級] NestJS REST API バックエンド完全征服マスタークラス - NestJS Core강의 썸네일

      [Code Factory] [初級] NestJS REST API バックエンド完全征服マスタークラス - NestJS Core

      codefactory

      ₩11,490

      초급 / NestJS, REST API, backend, JavaScript, TypeScript

      5.0

      (96)

      1,500+
      Update
      Update
      답변 활발
      답변 활발

      JavaScript、TypeScriptに続いて、次はバックエンド開発です。NestJSを使用してREST APIバックエンド開発、Socket IO開発および配布を行うことができます。

      초급

      초급

      NestJS, REST API, backend

      ウェブデザイン機能士資格証明に備え（2023年出題基準反映バージョン）강의 썸네일

      ウェブデザイン機能士資格証明に備え（2023年出題基準反映バージョン）

      webstoryboy

      ₩5,088

      초급 / HTML/CSS, jQuery, JavaScript, Web Design

      ウェブデザイン機能社出題基準 2023年バージョンに合わせて誰でも合格できるように製作しました。 5種類を学び、素早く合格しましょう！

      초급

      초급

      HTML/CSS, jQuery, JavaScript

      [2025] 非専攻者向け React Native アプリ開発 マスタークラス강의 썸네일

      [2025] 非専攻者向け React Native アプリ開発 マスタークラス

      junghw

      ₩2,626

      24%

      ₩1,970

      입문 / JavaScript, React, Node.js, React Native, TypeScript

      2.4

      (5)

      100+
      Update
      Update

      アイデアはあるけど、アプリをどう開発したらいいかわからなかった方々、 実践プロジェクトを4つ作りながら、アプリ開発をマスターしてみましょう！

      입문

      입문

      JavaScript, React, Node.js

      Node.jsでWebをクロールする강의 썸네일

      Node.jsでWebをクロールする

      zerocho

      ₩6,402

      중급이상 / JavaScript, Node.js, Web Crawling, Puppeteer

      4.9

      (34)

      900+
      Update
      Update
      답변 활발
      답변 활발

      ネイバー、アマゾン、Twitter、YouTube、Facebook、Instagram、unsplash.comなどのサイトをクロールして本番に適用します。

      중급이상

      중급이상

      JavaScript, Node.js, Web Crawling

      ₩88,000