디자인 시스템 with 피그마

이제(이미) 피그마는 앱/웹 프론트엔드 개발 현장에서 필수적인 도구가 되었습니다. 개발자와 비 개발자 모두가 부담없이 사용할 수 있는 커뮤니케이션 도구가 된 느낌입니다. 웹 프론트엔드를 개발하는 과정에서는 보통 아래와 같은 손바뀜(핸드오프)이 일어납니다. 디자이너 -> HTML 마크업 개발자 -> SPA/MPA 개발자 손바뀜이 일어날 때마다 각자의 업무범위를 넘나들면서 활발한 커뮤니케이션이 필요하게 되는데.. 피그마를 사용해 볼수록, 피그마야말로 이런 상황에 적합한 도구라는 확신이 생깁니다. 모든 디자이너/프론트엔드 개발자는 피그마를 배워야 합니다. 하지만 이 강의에서는 피그마의 기초 사용법을 다루지 않기 때문에, 디자인 도구를 처음 다루는 분께는 어려울 수 있습니다. 그런 분들도 섹션 3까지만 따라해 보시면 큰 무리없이 따라오실 수 있으리라 생각합니다. 강의 구성이 마치 프렉탈 도형과 비슷하거든요. 이 강의는 디자이너/개발자에게 아래와 같은 소양을 갖추게 해 줍니다. 디자인 구성요소를 디자인 시스템으로 추상화하기(섹션 1. Foundation 구성하기) 디자인 시스템에 기반한 디자인 구현하기(섹션 1 ~ 섹션11) 디자인 시스템을 디자인 토큰으로 가공하기(섹션12~섹션13) 개발자도 전체적인 디자인 프로세스를 익힐 수 있게 됩니다. 특히 디자인 시스템을 디자인 토큰으로 가공하는(섹션 1, 섹션 12, 섹션 13) 부분을 국내에서 처음 다룬 강의가 아닐까 생각합니다. 참고로 디자인 토큰은 디자인 구성요소에 대한 국제 표준입니다. restful api 스펙의 국제 표준이 OpenAPI(swagger)인 것과 같습니다. 앞으로 디자인 토큰에 기반한 라이브러리와 구현이 쏟아질 것입니다. 피그마를 사용해 디자인 시스템을 구축하면, 디자인 토큰을 쉽게 추출할 수 있고, 거대한 흐름에 올라탈 수 있습니다. 이 강의를 추천합니다.

디자이너와 협업을 많이 하는 UI 개발자 입니다. 간혹 동일해 보이는 색상이 미세한 차이가 있거나 일정한 기준 없이 디자이너의 직관으로 설정한 여백 등으로 고통을 겪어 왔습니다. 특히 유지보수가 절말 “헬” 이었거든요. 그러던차에 이를 해결할 수 있는 방법을 찾아보다가 디자인 시스템이라는 개념을 알게되었고 여러 유명 IT 기업에서의 적용 사례를 접했습니다. 함께 일하는 디자이너에게도 디자인 시스템을 구축해 보자고 의견을 드렸으나 어떻게 시작해야 할지 방향을 잡지 못하던 차에 만난 “디자인 시스템 with 피그마" 강의는 최고의 선택이었습니다. 기획자도 디자이너도 그리고 개발자도 모두 모두 들어야하는 강좌라고 생각합니다. 피그마를 사용하고 있는 기업이라면 강력하게 추천하고 싶습니다.

그래서 대체 이 피그마로 뭘 할 수 있는지, 어떤 방향성을 갖고 완성을 향해 나아가야 하는지 비전과 방법을 함께 제시해주는 강의입니다. 하위 컴포넌트에서 시작해 하나의 페이지를 만드는 실습과 더불어서, 강사님의 풍부한 경험과 실전 팁들도 잘 녹아들어서 듣고 난 뒤에 만들어지는 결과물 뿐만 아니라 체득되는 다른 지식도 좋았습니다. 피그마를 통해 디자인 시스템을 만들어 나감으로서 내 자신이 얻는 이득도 있겠지만, 파트가 다른 협업자들과 커뮤니케이션의 오류로 인해 논쟁이 일어날 확률을 상당히 줄일 수 있다는 점에선 개발자와 디자이너 양자에게 아주 매력적일 툴이 될 수 있다고 생각합니다. 굉장히 만족스러웠던 점 중에 하나는, 어째서 이렇게 만들어져야 하는가? 를 강의 내내 주지시키고 또 생각할 거리가 주어지기 때문에, 프론트엔드 개발자던, 또는 웹 퍼블리셔나 웹 디자이너던 이해할 수 있는 방식을 추구해서, 서로 합의하고 공통 규칙을 정해서 수월하고 세련된 결과를 쉽게 만들어낼 수 있음을 이해할 수 있게 해 준다는 점입니다. 그냥 이렇게 해야 한다! 가 아니라 강의를 들은 수강생들이 생각할 수 있는 폭과 유연성을 넓혀주는 좋은 강의입니다. 피그마의 디자인 도구는 아무래도 프론트엔드 개발자의 입장에선 낯설수 있고 동작 원리를 바로 이해하기는 어렵지만, 어떻게 하는 지 하나하나 단계를 보여주기 때문에 강의를 듣다 보면 툴의 사용법은 알 수 있게 됩니다. 손에 익기 위해서는 약간의 연습이 더 필요하겠지만, 협업에 특화된 피그마의 매력에 금방 빠지게 되실 거라 믿습니다!

강의는 따로 처음 들어보는데 이해하기 쉽게 설명 잘 해주시고 디자인 작업할때나 협업할때 유용한 꿀팁들을 많이 알려주셔서 좋네요! 도움이 많이 되었습니다!

유익한 내용이 많아 도움됩니다. 실무에서 사용할 수 있는 방식을 알 수 있어서 특히 더 좋았습니다. 다만 강의의 작업 화면이 커서 좌우의 패널 항목이 가뜩이나 많고 아이콘과 텍스트들이 다 작은데 1080 퀄리티로 해서 봐도 보기가 힘들고 눈도 아프고 집중이 잘 안돼요. ㅠㅠ 예를 들어 상단의 작업 화면만 관련되니 하단의 작업 화면은 잘리게 해서 좀 더 크게 볼 수 있도록 하면 좋을 것 같아요.

디자인시스템 을 위한 강의처럼 보일수도 있겠으나 과정을 천천히 따라가다보면 component, Autolayout 등의 필수적인 피그마 기능 역시 숙련이 가능합니다. 새로운 행동을 해야 할 때 이 행동을 해야 하는 이유에 대해서 구체적으로 설명해주시기 때문에, 기능 숙련 뿐만 아니라 배운 기능들을 실무에서 어떻게 적용시킬 수 있을지 고민할 수 있게 되는 강의입니다. 좋은 강의 만들어주셔서 감사합니다.

개발 공부만 하고 피그마는 사용법 정도만 알고 있던 차에 저에게 꼭 필요한 강의를 만났네요! 강사님 덕분에 아토믹 디자인, 디자인 시스템의 개념이 정립되었습니다. 디자인 또한 컴포넌트들이 모여 전체가 완성되는 것을 보고 부품과 재사용성의 중요성을 다시 한 번 느낍니다. 업무적으로 소통이 필요한 개발자와 디자이너 분들에게 강추합니다.

요즘 UI, UX 디자이너 채용공고 자격요건에 디자인 시스템이 심심찮게 보이고 있는데요. 디자인 시스템 몰라도 디자인은 할 수 있고 디자인 시스템을 모르거나 알긴 아는데 제대로는 모르는 디자이너분들 많으실 거라 짐작합니다. 하지만 디자인 시스템은 몰라서는 안되는 디자이너의 필수 역량이라고 생각합니다. 적어도 디자인을 제대로 하실 거라면요.. 디자인 시스템을 알게 되면 체계적으로 디자인을 할 수 있고, 효율적인 관리가 가능합니다. 또한 이 강의에서 다루는 Figma Token은 깃헙 푸시로 개발자와의 커뮤니케이션을 원활하게 할 수 있습니다. 디자인 시스템을 학습하고 싶어도 제대로 가르쳐주는 곳을 찾지 못했었는데, 인프런에 이런 양질의 강의가 좋은 가격에 올라와서 보물을 찾은듯한 기분이네요. 많은 기업체와 디자인 회사에서 이 강의로 디자인 시스템을 정착시켜 더 많은 회사들이 디자인에 대한 체계를 갖추고, 개발자들과 원활한 소통을 할 수 있으면 좋겠습니다. 디자인시스템이 뭔지 모르는 분 디자인시스템을 들어보긴 했는데 정확히는 모르는 분 개발자와의 소통이 어려우셨던 분 디자이너 분들 , 개발자분들 모두 추천합니다.