WIL) 3월동안 1인분 디자인시스템 만들어보기🍚

이전 회사에서 그래픽 디자이너였던 나는 어쩌다 신규 플젝의 프로덕트 디자이너가 됐고..
UXUI디자이너 있는데 왜 내가 이걸 하는가 고민할 새도 없이 스타트가 되어버렸다..⭐️
나는 피그마를 다룰줄 알고 앱 서비스의 콘텐츠를 만들지만, 디자인시스템과 UI 가이드는
어떻게 만들어먹는지조차 몰랐던 무지(말)랭이..
이번주는 현업에 적용할 수 있는 디자인시스템을 만들기 위한 강의를 수강했다.
그래서 응용차 이전에 만들어놨던 서비스의 러프한 시안들을 다듬고 디자인시스템을 정리해보려고 한다.

우선 디자인 시스템이 필요한 이유
🪜 반복적으로 사용하는 UI를 만들어 보기 쉽게 정리해놓으면 효율적으로 쓸 수 있다.
🧠 다양한 업무를 담당하는 팀원들이 일관적으로 이해할 수 있어야 한다!
🚨디자인 시스템은 결국 팀 전체의 속도와 효율을 위해서 만들지만 조직의 특성과
    업무 현황에 따라 간혹 효율을 매우 떨어뜨리는 경우가 생길 수 있는 점도 간과하면 안된다!

🅱️ut..디자인 시스템은 한 서비스의 방대한 내용을 담는 일이고..
개념들이 아직 내 머릿속에 파편화되어있어서 무턱대고 시작하기엔 어려움이 있다.
그래서 이미 잘 만들어진 디자인 시스템을 분석하고 비교하는 스터디를 하는 중이다.

📂 디자인 시스템 목록
아름답고 직관적인 사용자 인터페이스를 설계하기 위한 지침 참고는 필수

📌구글 머티리얼 디자인
📌애플 휴먼 인터페이스 가이드라인
📌어도비 디자인 시스템
📌스포카 디자인 시스템
📌스포티파이 디자인 시스템
📌 쇼피파이 디자인 시스템

*디자인 시스템은 꾸준히 업데이트 되니 확인하고 분석하는게 중요하다

애플과 구글 모두 사용성이 뛰어난 디자인시스템을 갖추고 있지만,
애플을 사용할 때 뭔가 IOS사용자로서 특별함을 가지고 있는 듯한 착각을 만드는 애플의
디자인 시스템에 어떤 비밀이 숨겨져있는건지 UX적인 매력이 궁금하다. 

 

이전에 플러그인도 안쓰고..하나하나 만들어낸 나..피그마를 이제서야 제대로 활용하는 것 같다.
컬러 10단계는 HSL 활용해서 L값을 10씩 조절해서 단계를 만든다!

📂 플러그인 목록
📌 Coolers - 서로 어울리는 색상 조합을 만들 수 있게 해주는 플러그인
📌  Styler - 레이어에 적용된 배경색이나 폰트를 자동으로 스타일에 추가해주는 플러그인
📌 Auto Documentation- 등록한 컬러와 폰트 스타일을 캔버스에 문서 형태로 정리해주는 플러그인