Sketch
가장 초창기에 나온 전통적인 디자인 툴
(Sketch는 맥OS에서만 사용가능)
Sketch는 클라우드 서버를 제공하고 로컬 저장 가능
Sketch는 클라우드 스토리지 서비스를 이용해 다른 사용자와 파일을 공유하고 편집할 수 있는 기능을 제공하나 실시간 협업 방식은 아니다.
Figma (디자이너 툴 - 가장 추천)
협업을 위한 디자인 툴(2021년 기준 선호도 1위)
프레이밍 전략: 디자인이 아닌 협업에 초점
여러 사람이 웹에서 실시간으로 동시 작업하는 모습을 강조
장점
웹 기반 동시에 아트보드 편집 -> 디자이너가 작업하는 동안 개발자가 기다리는 병목 현상 X
디자인의 css 그대로 copy 가능
단점
인터넷이 필수 -> 보안 문제 발생 가능
한글 관련 자잘한 버그
디자인 시스템 (방법론)
개발자 사이에 협업을 위해서 그라운드 룰로 컨벤션을 정하듯이 디자이너 <=> 개발자,
혹은 디자이너끼리 커뮤니케이션 하기 위해서 정해놓은 방법론
도입 이전의 문제 제기
일관되지 않은 디자인 -> 제품의 사용성을 떨어트림
비효율적인 작업 -> 동일 코드 & 디자인의 중복 작성 문제
확장성 부족 -> 로직에 집중해야할 시간을 UI에 집중
해결 방안
정해진 디자인 패턴 & 컴포넌트를 재사용해 제품을 구축하여 사용자 입장에서 일관되고 차별화된 경험을 하도록 하는 가이드라인
개발자 입장에서 제품을 구축할때 컴포넌트를 재사용해서 구축 & 개선하는데 걸리는 시간 단축
구현 해놓으면 이후엔 재사용으로 작업 속도가 빨라질것이라 예상 가능
시스템 자체가 중요한게 아니라 쓸만한 “룰”이 중요
예시 사례)
Figma - material UI(https://www.figma.com/file/aNN74suNWBb0uFGW3lxV7Q/Material-Me-(preview)?node-id=10276%3A257885)
Figma - buzzvil (https://www.figma.com/file/oWpE6CAuRW9fdCRziPGrnu/Apps--—-Buzzvil-Design-System-(Community)?node-id=4809%3A183)
storybook (개발 툴)
컴포넌트 단위의 UI 개발 환경을 지원하는 도구
주 사용 목적
개발된 컴포넌트의 문서화
개발 작업물 공유(개발자<->개발자, 디자이너 등)
협업시 다른 사람들에게 현 'context' 공유가 주 목적
내가 아닌 남을 위한 작업