강의

멘토링

커뮤니티

NEW
디자인 · 아트

/

UX/UI

입문자에서 실무자로: 피그마로 마스터하는 디자인 시스템 A to Z

디자인 시스템 구축 능력은 이제 선택이 아니라 취업과 실무의 필수 역량입니다. 이 강의에서는 디자인 시스템의 개념부터, Figma Variables·토큰·컴포넌트·반응형 설계까지 입문부터 시작하여 전문적인 스킬을 기를 수 있어요. 종합 실전 프로젝트에서는 모바일과 태블릿, 데스크톱을 모두 아우르는 디자인 시스템을 구축하고 서비스 페이지를 만들어봅니다. 입문자라면, 이 강의를 완강하고 나면 면접관이 “바로 실무 투입 가능하다”고 느낄 수 있는 차별화된 경쟁력을 갖추게 될거에요. 개발자/1인 창업가라면 디자인 시스템을 직접 구축해볼 수 있는 기반을 다지고 일관성 있고 품질이 높은 제품을 만들 수 있을 거에요.

5명 이 수강하고 있어요.

난이도 입문

수강기한 36개월

  • 에릭
실습 중심
실습 중심
UX디자인
UX디자인
UI디자인
UI디자인
반응형디자인
반응형디자인
실습 중심
실습 중심
UX디자인
UX디자인
UI디자인
UI디자인
반응형디자인
반응형디자인

수강 후 이런걸 얻을 수 있어요

  • 디자인 시스템의 개념부터 실전 구축까지, 현업에 바로 쓰는 핵심 역량을 완성합니다.

  • Figma Variables로 파운데이션과 토큰을 직접 구축하며 디자인 시스템의 뼈대를 만듭니다.

  • Components & Variants로 확장 가능한 UI 컴포넌트 시스템을 설계합니다.

  • Auto Layout · Grid · Constraints로 컴포넌트를 반응형 디자인으로 구현합니다.

  • 토큰과 컴포넌트를 연결해 실제 서비스 화면까지 완성합니다.

  • 면접관이 원하는 ‘바로 실무에 투입 가능한’ 디자인 시스템 역량을 갖추게 됩니다.

[제가 면접관으로 참여했던 실제 사례]

디자인 시스템 구축 능력을 갖춘

지원자 A가 "주니어" 프로덕트 디자이너로 뽑혔던 이유 🙌

저는 최근에 일했던 팀에서 주니어 프로덕트 디자이너를 뽑아야 해서, 제가 면접관으로 평가를 참여를 하게 되었어요. 그 때 지원자 A, B, C가 있었는데요. 

A, B, C는 모두 포트폴리오에서 다음과 같은 핵심역량을 잘 보여주고 있었어요. UX/UI 프로젝트를 진행하는 데 있어서 유저 리서치, 디자인 씽킹, 퍼소나와 같은 부분을 했음을 보여주고 있었구요. 와이어프레임이나 하이파이 UI디자인과 같은 시각적인 결과물도 퀄리티 있게 잘 만들어내고 있었어요. 



그런데 결과적으로 지원자 A가 뽑혔어요. 왜 그랬을까요? 지원자 A는 굉장히 뚜렷한 한가지 차별화 포인트가 포트폴리오에서 나타나고 있었는데요. 그것은 바로 디자인 시스템 구축 능력이었습니다. 지원자 A는 저를 포함한 면접관들에게 디자인 시스템을 전문적으로 구축하고 관리할 수 있겠다는 확신을 주었어요. 즉, 이 사람을 뽑고 나면 있다 디자인 시스템 업무에 있어서 교육을 많이 안 시켜도 되겠다. 바로 업무를 줘도 되겠다라는 결론을 내릴 수 있었던 거에요.



지원자 B,C도 컬러나 타이포그래피 등 간단한 정도의 구축을 해본 경험은 있었지만 지원자 A는 디자인 원칙, 파운데이션, 토큰, UI 컴포넌트 제작 및 관리를 포함해서 디자인 시스템을 현업에서 요구하는 수준으로 포괄적으로 구축해봤다는 것을 보여주고 있었어요. 그리고 이를 위해 현업에서 필요로 하는 피그마 스킬을 갖추고 있었어요. 그리고 그것을 자신의 포트폴리오를 통해서 보여주고 있었어요. 


디자인 시스템 구축 능력이 UX/UI디자인 취업에

있어서 더 이상 선택이 아닌 필수인 2가지 이유 🤔


첫번째 이유. 현업에서 디자이너가 디자인 시스템에 대해서 오너쉽을 가지고 운영을 해야 되기 때문에

프로덕트 디자이너는 다른 디자이너, 개발자, PM 등 다양한 이해관계자들과 협업합니다. 그중 분명한 한 가지는 디자인 시스템에 대한 1차 오너십은 디자이너에게 있다는 점입니다. 새로운 컬러, 토큰, 컴포넌트가 필요하면 디자이너가 직접 만들고 디자인 시스템에 반영하며, 이를 팀과 공유하고 커뮤니케이션해야 합니다. 규모가 큰 회사에는 디자인 시스템 전담 디자이너가 있기도 하지만, 그렇더라도 모든 디자이너는 디자인 시스템의 발전에 계속 기여해야 합니다.


디자이너에게 디자인 시스템 역량이 중요한 이유는 이것이 제품의 근간이 되기 때문이에요.


두번째 이유. 실무자/면접관에게 있어서 신입에게 디자인 시스템을 교육하는 것은 큰 부담으로 다가온다.

회사 입장에서 보면, 디자인 시스템 경험이 없는 디자이너를 채용하는 건 큰 부담입니다. 만약 신입이 디자인 시스템을 모른다면, 실무 디자이너가 직접 교육해야 합니다. 하지만 현실적으로 “교육 때문에 업무를 줄여달라”는 요청이 받아들여질 가능성은 낮고, 보통 실무와 교육을 동시에 하게 됩니다. 문제는 디자인 시스템 교육이 며칠 만에 끝나지 않는다는 점입니다. 적어도 몇 주, 길면 몇 달이 걸립니다. 결국 이는 실무자에게 큰 부담이 되고, 그래서 회사는 자연스럽게 이미 기본 역량을 갖춘 디자이너를 선호할 수밖에 없습니다.


정리하자면, UX/UI디자이너가 되고자 하는 입문자라면 디자인 시스템 구축 능력은 선택이 아닌 필수이고, 이 강의를 통해 실무에서 요구하는 디자인 시스템 역량을 갖추고 원하는 커리어 목표를 달성할 수 있도록 도와드리겠습니다.


수강생들의 찐 강의 후기 ✨

디자인 시스템을 마스터하고자 하는 수강생분들을 통해 검증한 내용으로,

핵심적으로 필요한 컨텐츠를 엄선해 강의에 담았습니다.


이 강의를 통해 무엇을 배우게 되나요? 📖

이 강의는 디자인 시스템을 ‘툴 기능’이 아니라 ‘제품을 만들기 위한 디자인 시스템’의 원리를 이해하는 것부터 시작합니다. 개념 → 원칙 → 파운데이션 → 토큰 → 컴포넌트 → 서비스 적용까지, 현업에서 디자인 시스템을 구축하는 전체 사고 흐름과 실전 스킬을 모두 다룹니다. 완강 후에는 디자인 시스템을 설명할 수 있고, 직접 만들 수 있으며, 서비스에 적용할 수 있는 상태가 되는 것이 목표입니다.

디자인 시스템에 대한 개념 잡기

디자인 시스템이 무엇인지, 그리고 왜 현업에서 필수가 되었는지를 구조적으로 이해합니다.
디자인 시스템을 단순한 UI 모음이 아니라 팀의 의사결정과 제품 확장을 가능하게 하는 시스템으로 바라보는 관점을 갖게 됩니다.

디자인 시스템의 첫 단추, 디자인 원칙

디자인할 때 기준이 되는 디자인 원칙을 어떻게 만드는지 배웁니다. 팀원 모두가 같은 방향으로 디자인할 수 있도록 명확한 기준을 세우는 방법을 다룹니다.

디자인 시스템의 근간, 디자인 파운데이션

컬러, 글자, 간격처럼 디자인의 기본 재료를 체계적으로 정리하는 방법을 배웁니다.
나중에 토큰과 컴포넌트로 쉽게 확장할 수 있는 기초 구조를 만듭니다.

효율적인 의사결정을 도와주는 디자인 토큰

컬러와 스타일을 토큰으로 만들어 더 빠르고 헷갈리지 않게 디자인하는 방법을 배웁니다. 여러 명이 함께 작업해도 디자인이 흔들리지 않도록 만드는 핵심 개념입니다.

디자인 시스템의 중요한 퍼즐, 반응형 디자인

화면 크기가 달라도 자연스럽게 바뀌는 반응형 UI를 설계하는 방법을 배웁니다. 웹과 앱을 모두 고려한 구조적인 디자인 방식을 익힙니다.

효율성과 일관성을 목적으로 만드는 UI 컴포넌트

버튼, 입력창, 카드 같은 요소를 다시 쓰기 쉬운 부품으로 만드는 방법을 배웁니다. 여러 사용 케이스를 고려한 실무형 컴포넌트를 설계합니다.

그리고, 화면 설계를 위한 추가적인 실무 팁

디자인 파운데이션, 토큰과 컴포넌트를 만드는 것은 궁극적으로 일관성 있는 화면을 설계하고 품질 높은 앱 또는 웹 서비스를 만들기 위함이에요. 그래서 앞서 배운 것을 토대로 화면을 설계하고, 반대로는 화면을 설계하면서 컴포넌트 및 토큰이 추가되는 이터레이션의 과정에서의 실무 팁을 드립니다.


이 강의의 특징

  • 저 역시 입문자일때 디자인 시스템을 배우면서 많은 시행착오를 겪었어요. 그래서

    입문자의 입장에서 비유나 상황극, 실제 현업에서 있을만한 예시 및 사례를 통해 “쉽게” 설명해드릴게요.

  • 다양한 사례를 실습해보고 직접 수강생분들에게 "나"의 실력이 될 수 있도록 준비했어요.

그림: 실제 현업에서 있었던 일, 비유 등을 통해 입문자가 개념을 쉽게 이해할 수 있어요.



이 강의를 통해 무엇을 만들어보나요? 🛠️

베리어블을 활용하여 토큰 구축하기

컬러, 타이포그래피, 스페이싱과 같은 파운데이션 요소를 토큰을 원시 및 의미 토큰으로 설계합니다.

베리어블을 활용해 모드에 따른 화면 설계 및 적용하기

라이트/다크 모드, 언어 모드 등 하나의 시스템으로 여러 환경을 관리하는 구조를 만듭니다.

반응형으로 앱, 웹, 컴포넌트 만들어보기

오토레이아웃, 그리드, 컨스트레인츠로 디바이스에 반응하는 UI 구조를 구현합니다.

프로퍼티, 베리언츠를 활용해 컴포넌트 설계하는 법 익히기

다양한 사용 케이스를 커버하는 실무형 컴포넌트 시스템을 구축하기 위한 피그마 활용법을 마스터합니다.

사례 중심의 다양한 컴포넌트 설계 및 디자인 실습

버튼부터 텍스트 필드, 스낵바 등 상태와 옵션을 포함한 다양한 종류로 구성된 실무형 컴포넌트 시스템을 구축합니다.

토큰과 컴포넌트를 조립하여 반응형 웹 서비스 만들어보기

직접 만든 디자인 시스템을 적용해 모바일·태블릿·데스크톱 대응 반응형 웹을 완성합니다.

안녕하세요. 프로덕트 디자이너 에릭입니다. 👋

저는 현재 미국에서 시니어 프로덕트 디자이너로 일하고 있어요. UX리서치부터 UI디자인, 디자인 시스템 구축 및 관리까지, UX/UI 전반을 아우르는 실무 업무를 담당하고 있고 면접관으로서, 지원자의 포트폴리오를 검토하고 평가하는 경험을 가지고 있습니다. 또한 UX/UI 멘토/강사로 패스트캠퍼스 부트캠프, 인프런 강의  (5천+ 수강생, 평균 평점 4.8) 등을 통해 활동하고 있으며 Amazon 베스트셀러에 오른 UX디자인 입문자를 위한 책 『Design thinking for beginners』를 집필하기도 했습니다.

멘토/코칭/면접관의 경험을 통해 저는 면접관은 중요하게 생각하는 핵심역량이지만, 입문자나 취업을 준비하는 분들이 놓치고 있는 것들을 보게 됩니다. 그런 일환으로 "디자인 시스템" 강의를 만들게 되었어요. 디자인 시스템 구축 능력은 취업을 위해서 그리고 UX/UI디자인 실무를 위해서 더 이상 선택이 아닌 필수지만, 많은 입문자 분들은 면접관이 요구하는 수준으로 그 능력을 갖추지 못하는 경우가 많습니다. 그래서 이 강의를 통해서 입문자 분들이 현업에서 요구하는 수준의 디자인 시스템 능력 갖추고 원하는 커리어 목표를 달성할 수 있도록 도와드릴게요.



이 강의는 어떤 분들에게 도움이 될까? 🧭

🎯 UX/UI 디자인 입문자 / 취준생 / 이직러

요즈음 현업에서 디자인 시스템 역량은 선택이 아니라 필수이며, 디자인 시스템을 제대로 다룰 수 있는 사람을 우선적으로 채용합니다. 이 강의는 저의 현업 실무 경험을 바탕으로 기초부터 실전 프로젝트까지, 그리고 포트폴리오에 바로 쓸 수 있는 디자인 시스템 구축 능력을 키우도록 만들었습니다.

🛠 디자이너와 협업하는 개발자 / PM / PO / 기획자

디자인 시스템은 제품 전반의 근간이 되기 때문에, 디자이너뿐 아니라 개발자와 PM 등 모든 이해관계자가 원리를 이해해야 효과적으로 협업할 수 있습니다. 특히 개발자는 코드 관점에서 디자인 시스템을 구축·관리하는 또 하나의 핵심 오너입니다. 디자인 시스템에 대한 공통 이해는 더 나은 제품과 서비스를 만드는 기반이 됩니다.

💼 1인 또는 소규모 팀 창업자

AI와 바이브 코딩 등 툴의 발전으로, 1인 창업자나 개발자가 직접 제품 디자인을 하는 분들이 늘고 있습니다. 이런 환경에서 디자인 시스템을 알면, 제품을 빠르고 일관성 있게 확장할 수 있지만, 디자인 시스템이 없다면 컬러, 버튼 등 모든 것이 일관성이 떨어지고, 서비스와 팀이 커질 때에 그걸 고치는 비용은 눈덩이처럼 커집니다.

선수 과목 안내

피그마를 전혀 모르는 분이라면 제가 인프런에 개설한 "피그마를 활용한 UI디자인 입문부터 실전까지" 강의를 먼저 듣고 오실 것을 추천드립니다. 다음 링크를 통해 구매하시는 분들은 30퍼센트 할인된 가격에 들어보실 수 있습니다. 해당 강의를 들으신 후 이 디자인 시스템 강의를 듣는다면 훨씬 더 폭발력을 가지고 빠르게 스킬들을 마스터하실 수 있을거에요. (🎁 강의 할인쿠폰)


자주 묻는 질문들 (FAQ)

Q. 윈도우와 맥북에서 학습 가능한가요?

A.가능합니다. 이 강의는 피그마 툴을 기준으로 만들었습니다. 피그마는 인터넷 브라우저 기반의 소프트웨어라서 윈도우와 맥북 모두에서 실행 가능하며 이 강의에서 제가 사용하는 단축키에 대해서도 윈도우/맥북 용 각각 알려드립니다.


Q. 피그마(Figma) 무료버전으로도 강의를 들을 수 있나요?

A. 이 강의의 이론적인 부분과 대부분의 내용은 피그마 무료 버전으로도 들으실 수 있습니다. (강의의 70퍼센트 정도). 베리어블, 컴포넌트, 오토 레이아웃 등은 모두 무료버전에서 사용하실 수 있습니다. 다만, 베리어블을 활용해 모드를 적용해보는 부분과 제가 가끔씩 보여드리는 dev 모드에 대한 부분은 무료 버전으로는 활용하실 수 없으므로 강의를 듣는 동안 투자라고 생각하시고 월 16불로 유료 버전을 쓰시는 것을 추천드립니다.


Q. 어떻게 하면 디자인 시스템을 빠르게 마스터할 수 있을까요?

A. 디자인 시스템에 대한 기본 원리와, 피그마 툴 활용법을 익히셨다면 수많은 레퍼런스를 스터디해보시고 또 "직접" 구축해보는 것을 연습하는 것이 중요한 것 같습니다. 이 강의를 통해서 다양한 사례들을 연습해보고 종합 실전 프로젝트를 따라서 만들어보면 어느새 디자인 시스템을 구축할 줄 아는 본인을 발견하게 될 거에요. 그리고 그 다음에는 계속해서 연습해보고 적용해보고, 현업에 가게 된다면 실전 프로젝트에 녹여보는 것을 해보실 것을 추천드려요.


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

A.네, 이 수업은 입문자와 비전공자에 맞춰 설계한 과목입니다. 하지만, 선수지식인 UX디자인에 대한 개념적인 기초와 UI디자인을 위한 기초 지식, 피그마의 기본 기능을 익히고 오신다면 더 폭발적으로 이 강의의 내용을 빠르게 익히고 스킬을 얻으실 수 있을 거에요. UX/UI디자인을 이제 막 시작하는 단계라면 제가 인프런에 개설한 입문자를 위한 UX디자인 개론을 먼저 들으실 것을 추천드립니다. UX에 대한 기본 지식은 어느 정도 알고 있지만 피그마를 해본적이 없다면 피그마를 활용한 UI디자인 강의를 먼저 듣고 오신다면 이 강의를 통해 디자인 시스템을 몇배는 더 빠르게 마스터하실 수 있을 겁니다.


Q. 강의를 듣다가 질문이 생기면 어떻게 하나요? (커뮤니티 운영 안내)

A. 강의를 들으시면서 질문이 생길 수 있을 거에요. 질문에 대한 빠른 답변과 소통을 위해 그룹 오픈챗 커뮤니티를 운영하며 또한 해당 강의의 질문 게시판을 통해서도 답변을 드립니다. 또한 미션 등에 대한 과제는 해당 강의의 커뮤니티 게시판을 적극 활용해 수강생 간 공유를 촉진하고 함께 성장하는 것을 지향합니다.


학습 자료

  • 강의에서 다룬 모든 사례를 직접 연습할 수 있도록 정리된 Figma 파일을 제공합니다.

이런 분들께
추천드려요

학습 대상은
누구일까요?

  • UX/UI 취업을 준비 중인 입문자 / 취준생 — 포트폴리오에 ‘차별화 포인트’를 만들고 싶은 분

  • 개발자 · 스타트업 창업자 — 디자인 시스템으로 제품을 빠르고 일관되게 만들고 싶은 분

  • PM / PO / 기획자 — 디자인 시스템을 이해하고 제품 완성도를 높이고 싶은 분

  • 주니어·현직 디자이너 — 디자인 시스템과 반응형 역량으로 한 단계 성장하고 싶은 분

안녕하세요
입니다.

5,156

수강생

703

수강평

306

답변

4.8

강의 평점

8

강의

현재 뉴욕의 글로벌 테크 회사 The Knot Worldwide에서 시니어 프로덕트 디자이너로 일하고 있습니다.

뉴욕에 오기 전에는 서울에서 UI기획자로 일을 했습니다.

브런치 매거진 "디자인, 그리고 프러덕트"와 UX, UI 지식과 정보를 공유하는 "뉴욕 UX디자이너" 인스타그램페이스북을 운영하며 디자이너 및 예비 디자이너들과 소통하고 있습니다.

개인적으로는 세 아이👶의 아빠이며 요리🍲, 교육🏫에 관심이 많습니다.

 

집필 및 강의

• "뉴욕 프로덕트 디자이너가 알려주는 UX디자인 입문 A to Z" 책 출간 (링크: Yes24, 알라딘, 교보문고

• 퍼블리 아티클 "서비스의 첫 인상을 결정하는 3초: 랜딩 페이지 UX 4가지 원칙" 발행

• Samsung SW Academy for Youth (SSAFY) UX/UI다자인 및 피그마 강사

• 1:1 멘토링 및 기업 강의 진행 (토픽: UX, UI디자인, UX퍼실리테이션, UX/UI 포트폴리오  제작 및 발행)

 

경험 및 경력

• (현) 뉴욕 The Knot Worldwide 시니어 프로덕트 디자이너

(전) 서울 Pantech 모바일 앱 UI기획자

• 뉴욕 기반의 다수 스타트업과 UX/UI 컨설팅 프로젝트 진행

• 뉴욕 School of Visual Arts 디자인 대학원 졸업 / 전공: Interaction Design

• 한동대학교 학부 졸업 / 전공: 산업디자인

커리큘럼

전체

114개 ∙ (20시간 55분)

해당 강의에서 제공:

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

수강평

아직 충분한 평가를 받지 못한 강의입니다.
모두에게 도움이 되는 수강평의 주인공이 되어주세요!

얼리버드 할인 중

월 ₩23,746

5개월 할부 시

15%

₩139,700

₩118,730

에릭님의 다른 강의

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

비슷한 강의

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