https://featpaper.com/viewer/MW3eLy5nrF3z?email=unknown
https://featpaper.com/viewer/gVqKWC7vKi0o?email=unknown
(제한된 동작으로 작동합니다 )
- 초보자를 대상으로 진행되나 컴퓨터의 기본 사용법을 익힌 분
- 그래픽툴을 조금이라도 사용해 본 경험
- 개인프로젝트, 팀 프로젝트
- 피그마와 병행되는 프론트엔드 과정을 병행하고자 할때
Figma is a vector graphics editor and online design tool, created by Dylan Field and Evan Wallace. Figma is free to use for individuals, and there are paid plans for teams and organizations. The software is available on macOS, Windows, and Linux
피그마는 웹의 환경에서 협업을 위한 강력한 도구로 여겨집니다.
피그마를 사용하는 사람들이 누구인지를 보면 우리가 다루게 될 이 피그마라는 것이 어떤것인지, 어떤것까지 할 수 있는지, 또 무엇을 위한 것인지를 짐작할 수 있습니다.
피그마는 웹기획자, 웹디자이너, 개발자가 모두 사용할 수 있도록 이들이 필요로 하는 것들을 제공하고 있습니다. 이들은 하는 '역할'이 다르기 때문에 필요한 것도 다릅니다. 하지만 이들은 하나의 결과물을 위해서 협업해야 한다는 공통점을 가지고 있습니다.
🏆 그래서 피그마에서는 이들이 모두 한곳에 모여 서로의 필요와 정보를 공유할 수 있도록 제공하고 있습니다.
디자인 시스템 이란 우리가 흔히 생각하는 시각적으로 보이는 그 디자인만을 말하는 것이 아닙니다.
결과물에는 보이지는 않지만 해당 결과물을 만들때 사용된 '코드 (code)'라는 것이 들어가 있습니다.
그리고 해당 결과물을 만들어내기 위해 기획자, 개발자, 디자이너가 공유해야 하는 것들이 있는데 이런 것들을 정리해 놓은 모두가 공유하도록 만들어놓은 스타일가이드(Style Guide)를 말합니다.
예를들면, 여러분은 이제 세계 각국에 있는 세프들입니다. 올해 8월에 서울에 모여 김치페스티벌를 한다고 가정해봅니다. 그래서 각국에 있는 여러분에게 김치를 만들어오라고 요청했습니다. 그러나 각자의 방식대로 김치을 만들면 너무나 많은 의도치 않은 변형들이 생길게 분명합니다. 그래서 주최즉에서는 '김치'레시피를 나눠주고 그 레시피에 따라 김치를 만들도록 요청했습니다.
여기서의 '레시피'와 같은 것이 디자인 시스템입니다
- 피그마 기본 디자인 도구 사용법
- 워크 플로플로우 (Workflow)
- 아이콘 디자인
- 반응형 웹(앱)
- 프로토타입핑
- Live Embed를 포함한 프론트엔드 과정의 기초
- html, css
- gitHub(개발자와의 협업을 위한) : 저장소 생성, 다운로드, 업로드
- 피그마 플러그인
- 버전관리
컴포넌트란 한가지 기능을 갖춘 한 덩어리 또는 레고의 한개의 블록으로 생각하시면 됩니다. 이런 컴포넌트라는 덩어리가 몇개 모여서 하나의 페이지를 구성하고 페이지들이 모여 전체 어플리케이션을 완성합니다.
피그마 이전에도 디자인 시스템에 사용되는 다른 툴들이 여러개 있었습니다. 여러분이 흔히 알고 있는 포토샵, 일러스트, 어도비xd 등도 여기에 포함됩니다. 그러나 이런 것들은, 어플리케이션을 완성하기 위해서 개발자가 필요한 다른 툴, 기획자가 필요한 다른 툴등을 함께 사용해야 하는 불편한 점이 있었습니다.
혹시 크로스 플랫폼( Cross-Platform) 이라는 말을 들어보셨나요? 이것은,
'컴퓨터 프로그램, 운영 체제, 컴퓨터 언어, 프로그래밍 언어, 컴퓨터 소프트웨어 등이 여러 종류의 컴퓨터 플랫폼에서 동작할 수 있다는 것을 뜻하는 용어이다.' ( 참조 :https://ko.wikipedia.org/wiki/크로스_플랫폼)
짧게 얘기하면 하나의 어플리케이션이 윈도우에서도 , 맥에서도, 아이폰, 안드로이드폰, 아이패드 등등에서도 모두 작동하는 것을 말합니다.
피그마는 크로스플랫폼을 지원합니다.
또한 피그마는 온라인에서도 사용가능하며 실시간으로 저장됩니다. 이것은 '버전관리'에 도움이 됩니다.
버전관리란 작업내용을 시간에 따라 따로 저장해 놓는것을 뜻하는데, 개발자의 경우 버전관리를 위해 '깃허브 (github)'라는 것을 사용하는데 디자인부분에서는 깃허브를 이용하는 것이 편하지 않습니다. 그래서 피그마에서는 버전관리를 위한 기능을 따로 제공하는 것입니다.
아마도 여러분는 이런 경험이 있을 것입니다.
문서를 하나 만들어서 '문서1' 로 저장했는데, 그후에 내용을 좀 바꿔서 '문서2'로 다른 이름으로 저장했다가 상사의 요청으로 내용을 수정하고 다시 '문서2-2'로 저장하고 또 다른 수정사항이 발생해서 '문서2-2-김대리' 뭐 이런식으로 내용이 변경될때마다 필요에 의해서 추가 삭제를 한 후에 이를 보존하기 위해 여러개의 문서를 만들어야 되는 경험이 있었을 것입니다.
🏆 우리의 이런 행위을 '버전관리'라고 생각하시면 됩니다.
그리고 이런 어려웠던 소위 '버전관리'를 피그마가 시간과 자동저장이라는 기능을 사용해서 해결해놓은 것입니다.
그래서,
'버전관리'를 하게되면, 현재의 작업을 취소하고 1시간전에 했던 그 작업물에서부터 다시 시작할 수 있도록 도와줍니다. 사람은 1시간전에 어디까지 어떤것까지 했는지 기억하지 못하지만 피그마는 1시간전에 사용했던 모든 내용을 '저장'해 놓고 거기에 '꼬리표' 같은 것을 붙여놓습니다.
그리고 사용자가 원할때 그 '꼬리표'시점으로 모든 내용을 '복원' 해 주는 것입니다.
https://www.slideshare.net/jihwanpark986/typeface-typography-grid?related=1