프론트엔드 개발자가 배울 수 있는 디자인 시스템 강의가 있을까

있습니다. 디자인을 눈으로 보는 것에서 끝내지 않고, 시스템 자체를 코드로 구현하는 과정을 다루는 강의를 찾으면 됩니다. 리액트와 Next.js로 UI 라이브러리를 직접 만들고 모노레포 환경에서 관리하는 과정을 다루는 강의가 그런 예입니다.

디자인 시스템을 독학하는 것과 강의로 배우는 것은 어떻게 다를까

혼자 인터넷에 흩어진 사례를 모아 공부하면 색상 값이나 컴포넌트 이름 짓는 규칙은 눈에 들어오지만, 그 규칙을 실제 서비스에 적용했을 때 생기는 예외 상황은 잘 보이지 않습니다. 강의는 한 사람이 시스템을 만들고 운영하면서 겪은 순서를 그대로 보여주기 때문에 어디서 막히는지를 미리 알고 넘어갈 수 있습니다. 강의를 고를 때 살펴볼 기준은 다음과 같습니다.

• 구축 단계뿐 아니라 운영 단계까지 다루는가
• 실제 서비스에서 쓰인 템플릿이나 사례를 보여주는가
• 자신의 역할이 디자이너인지 개발자인지에 맞는 관점으로 설명하는가

피그마로 디자인 시스템 만드는 법을 배우고 싶은데 어떤 강의가 좋을까

구축 방법과 운영 방법을 함께 다루는 강의를 찾으면 됩니다.

리액트로 디자인 시스템을 직접 구현하는 강의도 있을까

네, 앞서 소개한 리액트 강의가 여기에 해당합니다. 피그마 강의가 시스템을 설계하고 관리하는 디자이너의 관점을 다룬다면, 이 강의는 그 시스템을 실제 컴포넌트 코드로 옮기는 개발자의 관점을 다룹니다. 두 강의를 함께 보면 디자인 시스템이 기획 문서에서 끝나지 않고 화면에 어떻게 반영되는지 처음부터 끝까지 그려볼 수 있습니다.

자주 묻는 질문

디자인 시스템 강의를 듣기 전에 알아야 할 선행 지식이 있을까요

피그마 강의는 초급자도 들을 수 있게 구성돼 있어 별도 선행 지식이 필요하지 않습니다. 리액트로 구현하는 강의는 React와 Next.js를 다뤄본 경험이 있으면 더 편하게 따라갈 수 있습니다. 두 강의 모두 실무 사례를 기준으로 설명하기 때문에 기초 개념은 강의 안에서 함께 짚어줍니다.

디자인 시스템과 스타일 가이드는 같은 개념인가요

스타일 가이드는 색상이나 폰트 같은 시각 규칙을 정리한 문서에 가깝고, 디자인 시스템은 그 규칙을 실제로 쓰는 컴포넌트와 운영 프로세스까지 포함하는 더 넓은 개념입니다. 그래서 디자인 시스템을 다루는 강의는 규칙을 정하는 법뿐 아니라 팀에서 그 규칙을 계속 지켜나가는 법까지 함께 설명합니다.

디자이너와 개발자 중 누가 먼저 들어야 할까요

순서를 정해야 하는 문제는 아닙니다. 팀에서 시스템을 처음 설계하는 역할이라면 피그마 강의부터 보고, 이미 설계된 시스템을 코드로 옮기는 역할이라면 리액트 강의부터 보는 쪽이 바로 쓸 수 있습니다.