웹 애니메이션을 위한 GSAP 가이드 Part.02
범쌤
“GSAP 이런 것까지 가능했어?” 애니메이션이 복잡하고 어렵다는 기존의 고정관념을 깨드립니다.
Basic
gsap, 인터랙티브 웹, JavaScript
学習した受講者のレビュー
受講後に得られること
設計システムの構築方法
アトミックデザインの概念と実際の適用方法
ピグマでシステムを構築する
デザイナーと開発者のコミュニケーション
インターフェース設計のためのコラボレーションWebアプリケーション、
ピグマを活用してデザインを学びます✍️
最終的に毎回使われる
コミュニケーションコストを削減する目標。
1つのデザインが追加されるたびに、デザイナーと開発者のコミュニケーションコストはますます増加し、ビジネスが大きくなるにつれて開発者は余裕がなくなります。
デザインシステムを理解して構築すれば、コミュニケーションコストを大幅に削減でき、多くのデザイナーの方が気になりますが、初めてを始める方法を知らない方のためにこの講義を企画することになりました。
❓似ているが妙に違う私のデザインワーク、
どうすれば一貫した形を保つと同時に
開発者が開発しやすいようにデザインを提供できますか？
こんな方におすすめです ✔️
デザインシステムを構築したいのですが
どのように始めるべきかわからないデザイナー
ピグマツールの使い方は知っていますが、システム的に
どのように適用するのか分からないデザイナー
デザインシステムを理解し、デザイントークンを受け取る
開発に使用したい開発者
デザインシステムのため、デザイナーと開発者の
コミュニケーションを読みたい企画者
デザインシステム with ピグマ 🎨
ピグマを使用したデザインシステム
構築プロセスを知って理解することができます。
デザインシステムの使用目的 🌀
デザイナーと開発者とのコミュニケーションコスト削減、業務効率を最大化！これがデザインシステムの使用目的です。
本講義では、Pigma ネイティブシステムのみを使用せずに Figma tokens プラグインとともにシステムを構築し、すべてのデザイントークンが開発者に Handoff できるようにシステムを構築します。
講義を聞いた後、受講生は...
💡すべてのデザインワークをシステムの観点から見る目ができ、デザインワークを作ってもシステムにずれないようにデザインする習慣ができます。
💡アトミックデザインシステムを理解し、デザインワークの再利用性を考慮します。
💡コンポーネントの理解度が高まり、開発者とのコミュニケーションがスムーズに行われます。
学習する内容📚
ピグマで作成したデザイントークンを一度に管理するためのプラグインとして、ピグマネイティブシステムと連動して使用します。これは、将来の開発者にハンドオフするときに使用されます。
デザイン作業に基本ベースとなる間隔、色、タイポグラフィ、グリッドをシステムとして登録する過程を持ちます。
すべてのデザインワークは、再利用可能な形式を考慮してコンポーネントとして作成および管理します。
それぞれの部品を作成し、それらを組み立てて1つの完成した結果を得ます。
👇最終結果 👇
予想される質問 Q&A 💬
Q.デザインシステムがよく分からないのに受講できますか？
そんな方のための授業です。デザインシステムの理論から始まります。
Q.なぜデザインシステムを学ぶべきですか？
デザイナーと開発者の間のコミュニケーションの問題は常に発生するので、これを最小限に抑える努力はデザイナーと開発者の両方にとって必要な課題です。
Q.講義を聞く前に準備すべきことはありますか？
ピグマの基礎ツールの説明ではないので、基本的なツールの使い方は知っておいていただくことをお勧めします。
Q.受講に関する注意事項（必要な環境）はありますか？
ピグマでシステムを構築するので、ピグマアカウントとデスクトップアプリをダウンロードしてください。
こんな方に
おすすめです
学習対象は
誰でしょう？
開発者とのコラボレーションをスムーズにしたいデザイナー
デザイナーとのコミュニケーションを重視する開発者
社内デザインシステムを構築したい方
ピグマを深く理解したい人
前提知識、
必要でしょうか？
ピグマ
羽毛
変数の理解
4,461
受講生
232
受講レビュー
300
回答
4.9
講座評価
5
講座
---안녕하세요 디자인과 개발에 재미를 가지고 강의를 만드는 범쌤입니다 🙂 -----------------------------------------------------온라인 / 오프라인 출강 문의는 seonbeom2@gmail.com 으로 연락주세요 🙇♂
カリキュラム
全体
31件 ∙ (5時間 31分)
1. イントロ
03:25
2. デザインシステムとは？
09:30
4. 間隔 (スペーシング)
08:51
5. カラー (Color basic)
17:42
6. カラー
06:24
7. 컬러 (Color border)
07:20
10. グリッド (Grid)
06:38
講座掲載日:
最終更新日:
受講レビュー
全体
74件
4.9
74件の受講レビュー
서재원 Seo受講レビュー 10
∙
平均評価 4.8
5
100% 受講後に作成이제(이미) 피그마는 앱/웹 프론트엔드 개발 현장에서 필수적인 도구가 되었습니다. 개발자와 비 개발자 모두가 부담없이 사용할 수 있는 커뮤니케이션 도구가 된 느낌입니다. 웹 프론트엔드를 개발하는 과정에서는 보통 아래와 같은 손바뀜(핸드오프)이 일어납니다. 디자이너 -> HTML 마크업 개발자 -> SPA/MPA 개발자 손바뀜이 일어날 때마다 각자의 업무범위를 넘나들면서 활발한 커뮤니케이션이 필요하게 되는데.. 피그마를 사용해 볼수록, 피그마야말로 이런 상황에 적합한 도구라는 확신이 생깁니다. 모든 디자이너/프론트엔드 개발자는 피그마를 배워야 합니다. 하지만 이 강의에서는 피그마의 기초 사용법을 다루지 않기 때문에, 디자인 도구를 처음 다루는 분께는 어려울 수 있습니다. 그런 분들도 섹션 3까지만 따라해 보시면 큰 무리없이 따라오실 수 있으리라 생각합니다. 강의 구성이 마치 프렉탈 도형과 비슷하거든요. 이 강의는 디자이너/개발자에게 아래와 같은 소양을 갖추게 해 줍니다. 디자인 구성요소를 디자인 시스템으로 추상화하기(섹션 1. Foundation 구성하기) 디자인 시스템에 기반한 디자인 구현하기(섹션 1 ~ 섹션11) 디자인 시스템을 디자인 토큰으로 가공하기(섹션12~섹션13) 개발자도 전체적인 디자인 프로세스를 익힐 수 있게 됩니다. 특히 디자인 시스템을 디자인 토큰으로 가공하는(섹션 1, 섹션 12, 섹션 13) 부분을 국내에서 처음 다룬 강의가 아닐까 생각합니다. 참고로 디자인 토큰은 디자인 구성요소에 대한 국제 표준입니다. restful api 스펙의 국제 표준이 OpenAPI(swagger)인 것과 같습니다. 앞으로 디자인 토큰에 기반한 라이브러리와 구현이 쏟아질 것입니다. 피그마를 사용해 디자인 시스템을 구축하면, 디자인 토큰을 쉽게 추출할 수 있고, 거대한 흐름에 올라탈 수 있습니다. 이 강의를 추천합니다.
- 전용준
受講レビュー 1
∙
平均評価 5.0
5
43% 受講後に作成디자이너와 협업을 많이 하는 UI 개발자 입니다. 간혹 동일해 보이는 색상이 미세한 차이가 있거나 일정한 기준 없이 디자이너의 직관으로 설정한 여백 등으로 고통을 겪어 왔습니다. 특히 유지보수가 절말 “헬” 이었거든요. 그러던차에 이를 해결할 수 있는 방법을 찾아보다가 디자인 시스템이라는 개념을 알게되었고 여러 유명 IT 기업에서의 적용 사례를 접했습니다. 함께 일하는 디자이너에게도 디자인 시스템을 구축해 보자고 의견을 드렸으나 어떻게 시작해야 할지 방향을 잡지 못하던 차에 만난 “디자인 시스템 with 피그마" 강의는 최고의 선택이었습니다. 기획자도 디자이너도 그리고 개발자도 모두 모두 들어야하는 강좌라고 생각합니다. 피그마를 사용하고 있는 기업이라면 강력하게 추천하고 싶습니다.
- 신지우
受講レビュー 1
∙
平均評価 5.0
5
13% 受講後に作成그래서 대체 이 피그마로 뭘 할 수 있는지, 어떤 방향성을 갖고 완성을 향해 나아가야 하는지 비전과 방법을 함께 제시해주는 강의입니다. 하위 컴포넌트에서 시작해 하나의 페이지를 만드는 실습과 더불어서, 강사님의 풍부한 경험과 실전 팁들도 잘 녹아들어서 듣고 난 뒤에 만들어지는 결과물 뿐만 아니라 체득되는 다른 지식도 좋았습니다. 피그마를 통해 디자인 시스템을 만들어 나감으로서 내 자신이 얻는 이득도 있겠지만, 파트가 다른 협업자들과 커뮤니케이션의 오류로 인해 논쟁이 일어날 확률을 상당히 줄일 수 있다는 점에선 개발자와 디자이너 양자에게 아주 매력적일 툴이 될 수 있다고 생각합니다. 굉장히 만족스러웠던 점 중에 하나는, 어째서 이렇게 만들어져야 하는가? 를 강의 내내 주지시키고 또 생각할 거리가 주어지기 때문에, 프론트엔드 개발자던, 또는 웹 퍼블리셔나 웹 디자이너던 이해할 수 있는 방식을 추구해서, 서로 합의하고 공통 규칙을 정해서 수월하고 세련된 결과를 쉽게 만들어낼 수 있음을 이해할 수 있게 해 준다는 점입니다. 그냥 이렇게 해야 한다! 가 아니라 강의를 들은 수강생들이 생각할 수 있는 폭과 유연성을 넓혀주는 좋은 강의입니다. 피그마의 디자인 도구는 아무래도 프론트엔드 개발자의 입장에선 낯설수 있고 동작 원리를 바로 이해하기는 어렵지만, 어떻게 하는 지 하나하나 단계를 보여주기 때문에 강의를 듣다 보면 툴의 사용법은 알 수 있게 됩니다. 손에 익기 위해서는 약간의 연습이 더 필요하겠지만, 협업에 특화된 피그마의 매력에 금방 빠지게 되실 거라 믿습니다!
- 용석
受講レビュー 1
∙
平均評価 5.0
- abcdefg
受講レビュー 5
∙
平均評価 4.4
￥5,477
kindtigerの他の講座
知識共有者の他の講座を見てみましょう！
似ている講座
同じ分野の他の講座を見てみましょう！
![데이터 분석가 없이 데이터 드리븐 디자인하기 [데이터리안 세미나 다시보기 | 2025년 11월]Course Thumbnail](https://cdn.inflearn.com/public/files/courses/339608/cover/01kbpcbn9gv7ysm630hkz313gd?f=avif&w=420)
