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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

수강생들의 찐 강의 후기 ✨

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

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

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

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

그리고, 디자인 시스템을 활용한 제품·서비스 설계 실무 팁

디자인 파운데이션, 토큰, 컴포넌트는궁극적으로 일관성 있는 화면을 설계하고 품질 높은 제품과 서비스를 만들기 위한 도구입니다. 앞서 만든 디자인 시스템을 바탕으로 실제 화면을 설계하면서 마주하게 되는 고민들과, 화면 설계 ↔ 컴포넌트·토큰 확장이 반복되는 이터레이션 과정에서의 실무적인 판단 기준과 팁을 공유합니다.

단순한 이론이 아닌, 실무에서 디자인 시스템을 운영하며 겪는 “언제 새 컴포넌트를 만들어야 하는지”,
“어디까지를 변형으로 가져가야 하는지”와 같은 현실적인 질문에 대한 답을 다룹니다.

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

[종합 실전 프로젝트] 실무에서 바로 쓰는 컴포넌트 시스템 설계 실습

이 강의에서는 실제 프로덕트에서 사용되는 기준으로 컴포넌트를 설계하고, 상태(state), 옵션(variant), 확장성까지 고려한 컴포넌트 시스템을 직접 구축합니다.

버튼, 텍스트 필드, 셀렉트 박스, 스낵바(Snackbar) 등 실무에서 가장 많이 사용되는 컴포넌트들을 중심으로
단순한 UI 디자인을 넘어 “시스템으로서의 컴포넌트”를 만드는 과정을 다룹니다.

각 컴포넌트는 기본(Default) 상태뿐 아니라 

• Hover / Active / Disabled / Error 등 다양한 상태

• Size, Type, Icon 유무와 같은 옵션

• 라이트/다크 모드에 대한 고려 등

  
  

어떻게 구조화하고 관리해야 하는지 실습을 통해 익히게 됩니다.

또한 Figma를 활용해 컴포넌트 구조를 어떻게 나누고 속성(Properties, Variant, Boolean 등)을 어떻게 적용해야 하는지, 기존에 정의한 원시 (Primitive) 토큰과 목적 (Semantic) 토큰을 컴포넌트에 어떻게 활용해야 하는지, 추후 컴포넌트가 늘어나도 유지보수가 가능한 설계는 무엇인지를 실무 디자이너의 관점에서 설명합니다. 이 과정을 통해

“그냥 예쁜 컴포넌트”가 아니라
개발팀과 협업이 가능한 컴포넌트 시스템을 직접 만들어볼 수 있습니다.

[종합 실전 프로젝트] 디자인 토큰과 컴포넌트를 조립해 반응형 웹 서비스 만들기

직접 설계한 디자인 토큰과 컴포넌트를 적용해 모바일·태블릿·데스크톱 환경을 모두 고려한 반응형 웹 서비스를 만들어봅니다. 각 디바이스마다 화면을 새로 디자인하는 방식이 아니라, 하나의 디자인 시스템을 기준으로 레이아웃과 컴포넌트를 조립하며 유연하게 확장하는 과정을 실습합니다.

이를 통해 반응형 웹을 시스템 관점에서 디자인하는 방법과 실무에서 디자인 시스템 요소들을 재사용하는 방식에 대해서 자연스럽게 익히게 됩니다.

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

선수 과목 안내

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

자주 묻는 질문들 (FAQ)

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

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

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

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

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

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

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

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

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

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