피그마 팀 프로젝트 - pigeuma tim peulojegteu

 2021년 새로운 버전의 피그마 기초 가이드 , 첫 번째 영상입니다.  

위 영상은 2021년 3월 15일 오전 8시에 업데이트 되었습니다. 

Part 3. 피그마 시작 가이드 #인터페이스

피그마 파일을 막상 열고나니, 무엇부터 해야 할지 망설여지셨나요? 피그마 에디터는 파일에 대한 접근 권한이 "편집자"이냐 "뷰어"이냐에 따라 인터페이스 구성에 차이가 있습니다. [공유 목적]

designer-story.tistory.com

피그마 팀 프로젝트 - pigeuma tim peulojegteu

공동작업 무제한 무료로 스타트업/사이드 프로젝트에서 널리 사용되던 피그마의 가격정책이 변경되었습니다.

기존 무료였던 Starter 플랜의 기능이 대폭 제한되었는데요,

피그마 팀 프로젝트 - pigeuma tim peulojegteu
기존 정책

기존 무료 플랜 기능은 이렇습니다.

- 3개의 프로젝트 생성 가능(현재의 팀 프로젝트 기능입니다)

- 30일 치의 버전 히스토리 제공

- 2명의 에디터 추가 가능

- 무제한 클라우딩 공간

- 무제한 뷰어

피그마 팀 프로젝트 - pigeuma tim peulojegteu
과거 캡쳐가 없어서 현재로...

여기에 명시되어있지 않지만 피그마를 명실상부 최강의 프로토타이핑 툴로 만들어 준 것은 'Share' 기능이라고 볼 수 있습니다.

초대한 사람만 편집 가능하게 하는 설정이 2명으로 제한될 뿐,

Share 설정에서 Anyone with the link 설정을 can edit로 해놓으면

사실상 무료로 무제한 공동작업이 가능했습니다.

피그마 팀 프로젝트 - pigeuma tim peulojegteu

어도비 XD의 경우 무료로 이용 시 1개의 프로토타이핑 결과물만 링크 생성해서 셰어 할 수 있었고,

공동작업을 불가했습니다.

물론, 모바일 앱을 다운받아 모바일 환경에서 작업물을 즉시 확인할 수 있다는 장점도 있습니다.

피그마 팀 프로젝트 - pigeuma tim peulojegteu

그런데 공동작업도 가능하고, 무제한 프로토타이핑 공유가 되고, 무제한 공동작업이 가능한 피그마가 등장했습니다.

게다가 HTML5기반으로 크롬 기반 브라우저에서는 OS에 상관없이 액세스가 가능합니다.

MAC OS에서만 작동되던 스케치의 단점까지 보완한 서비스입니다.


그런데 이런 피그마의 가격 정책이 변경되었습니다.

피그마 팀 프로젝트 - pigeuma tim peulojegteu

바뀐 정책은 이렇습니다.

- 드래프트 파일 무제한 생성

이전까지는 기본이었던 혜택을 강조하는 것이 어쩐지 쎄합니다

- 뷰어와 코멘터 추가 무한

이전까지는 기본이었던...222

- 1개의 팀 프로젝트 생성 무료

- 1개의 팀 프로젝트에 생성된 최대 3개의 팀 파일에 에디터 무제한 추가

- 30일 치의 버전 히스토리 제공

- 무제한 클라우딩 공간

가격정책에 적혀있지 않은,

실제 사용자가 정리해본 무료 정책 변경에 따른 차이점은 아래와 같습니다.

피그마 팀 프로젝트 - pigeuma tim peulojegteu

앞으로는 과금하지 않을 경우, 피그마를 활용한 공동작업 방식이 달라질 것으로 보입니다.

각자 드래프트에 작업한 내용을 공유하고,

누군가 한 명이 자신의 드래프트에 취합하는 방식이 되지 않을까 싶습니다.

그런데 지금까지처럼 무료로 공동작업을 할 수 있는 방법이 있다면?


그건 바로,

공용 지메일 계정을 만드는 것입니다.

피그마는 동일 아이디의 동시 접속을 허용합니다.

피그마 팀 프로젝트 - pigeuma tim peulojegteu
내 속에 내가 너무나 많아

그리고 지메일은 국내 메일 계정과 달리 별다른 제한 없이 무제한으로 메일 계정 생성이 가능합니다.

공용 지메일 계정을 만든 후,

피그마에 가입해서

동시에 들어가서 작업합니다.

누가 수정했는지 히스토리를 확인하기 어렵다는 단점이 있지만,

이 정도는 각자 히스토리 리스트를 잘 정리하도록 합니다.

피그마가 이거까지 막지는 않길 바라며...

감사합니다.

피그마 팀 프로젝트 - pigeuma tim peulojegteu

** 동영상으로 보고 싶은 분은 아래 주소를 클릭하세요.

https://youtu.be/-WsXLsBYKcs

피그마 팀 프로젝트 - pigeuma tim peulojegteu

1. 피그마 파일 공유 - Share

- 피그마는 기획자, 디자이너, 개발자가 프로젝트를 편하게 공유하기 위해 고안된 프로그램입니다.

- 협업 프로그램으로 개발된 프로토타입툴이기 때문에 공유 기능이 굉장히 잘 되어 있습니다. 

- 그래서 이번 강좌에서 공유기능에 대해서 알아보도록 하겠습니다. 

1) [Share]버튼 누르기

피그마 팀 프로젝트 - pigeuma tim peulojegteu

- 툴박스 바에 오른쪽에 보면 파란색으로 [Share]버튼이 있습니다. 

- [Share]버튼을 누르면 공유관련 옵션팝업이 대화상자로 뜹니다.

2) [Share] 공유옵션 팝업

피그마 팀 프로젝트 - pigeuma tim peulojegteu

- [Invite]라는 탭으로 초대할 수 있는 파트가 뜨는 것이 보입니다.

- 옆에는 [Publish to Community]탭으로 우리가 만든 파일을 피그마 커뮤니티에 공유할 수 있게 해줍니다. 

- 중간의 입력상자는 이메일주소를 써서 현재 피그마파일을 공유할 수 있도록 설정해줍니다. 

  그럼 이메일을 받은 유저가 주소를 통해 현재 파일을 볼 수 있게 설정합니다. 

- 그 아래는 [Anyone with the link]로 하단 [Copy link]를 누르면 관련 주소를 복사한 것이나 그것을 다른 유저에게 보내면 누구나 볼 수 있거나 편집할 수 있도록 하는 기능입니다.

피그마 팀 프로젝트 - pigeuma tim peulojegteu

- 공유시 [can view]로 설정하면 피그마 파일을 볼수만 있게 설정합니다. 

- 공유시 [can edit]로 설정하면 피그마 파일을 수정도 할 수 있게 공유합니다.

피그마 팀 프로젝트 - pigeuma tim peulojegteu
[ can view ]로 공유받은 유저는 해당 파일 타이틀 옆에 [view only]라고 뜨는 것을 볼 수 있습니다.

3) 공유된 유저(사용자) 표시

피그마 팀 프로젝트 - pigeuma tim peulojegteu
피그마 팀 프로젝트 - pigeuma tim peulojegteu
공유된 사용자가 표시

- 공유된 유저는 [Share]버튼 옆에 표시가 됩니다. 현재 접속하고 있는 유저와 그렇지 않은 유저도 따로 표시가 됩니다.

- 그리고 실시간으로 상대방이 움직이는 마우스 커서가 보이기 때문에 해당 파일로 회의도 할 수 있어 매우 편리합니다. 

4) 프로토타입만 공유 - [Share Prototype]

- 디자인한 레이어는 보이지 않고, 결과물만 보낼 수도 있습니다.

- 일단 [▶]를 눌러 프로토타입으로 보면 [Share Prototype]버튼이 있습니다. 

- 그걸 눌러서 공유하면 결과물만 상대방에게 보낼 수 있습니다. 물론 이미지 다운이나 그런 건 안됩니다.

피그마 팀 프로젝트 - pigeuma tim peulojegteu
피그마 팀 프로젝트 - pigeuma tim peulojegteu
그래서 주소로 확인하면 프로토타입은 되지만, 만들어진 피그마 파일은 볼수 없습니다.

- 대신 코멘트는 달 수 있게 해주네요~ 

- 클라이언트한테 보낼때 사용하면 좋은 방법같아 보입니다. 

2. 피그마 fig 파일 공유 

- 위에서 공유한 것은 인터넷이 연결되어 있는 환경에서 자동으로 서버에 저장되어 있는 것을 공유한 것입니다.

- 하지만 인터넷이 불안하다거나, 무료 계정으로 쓴다면 최근에 작업한 파일만 보이고 예전에 작업한 파일이 보이지 않을 수 있습니다. 

- 그렇기 때문에 파일을 로컬컴퓨터(내컴퓨터)에 저장해놓으면 위와 같은 문제를 해결할 수 있겠죠?

- 그리고 그 파일을 다른 유저에게 보내서 불러오게 해서 사용할 수 도 있습니다. 

- 내컴퓨터에서 다운 받으면 [ ***.fig ]로 fig라는 확장자로 다운받게 됩니다. 

1) Save Local Copy

- 메뉴에서 [file]-[save local copy]를 누르면 파일을 다운로드 받을 수 있습니다.

피그마 팀 프로젝트 - pigeuma tim peulojegteu
[다운로드]폴더에 파일이 다운된 것을 확인할 수 있습니다.

21_이미지내보내기.fig

0.39MB

- 파일을 첨부해드렸으니 불러올 때는 한번 불러와보세요!

2) Import File

- 불러올 때는 피그마 첫 화면에서 [Import File]버튼을 눌러 불러오면 됩니다.

피그마 팀 프로젝트 - pigeuma tim peulojegteu

3. 코멘트 툴

- 피그마가 협업에서 우위를 차지하게 된 기술은 공유와 코멘트입니다.

- 특히, 코멘트를 디자인 혹은 제작한 컨텐츠 위에 바로 작성해서, 그 컨텐츠의 문제점과 궁금점을 해결할 수 있습니다.

- 공유한 유저나 혹은 팀원들끼리 그 코멘트에 서로 댓글도 달면서 서로의 의견을 좀 더 원활하게 나눌 수도 있습니다. 

1) 툴 확인

피그마 팀 프로젝트 - pigeuma tim peulojegteu
툴박스 바 부분에 보이는 말풍선모양의 툴이 코멘트 툴입니다.
피그마 팀 프로젝트 - pigeuma tim peulojegteu
해당 디자인 위에 바로 코멘트가 달린 것을 확인할 수 있습니다.

2) 댓글 코멘트

- 말풍선을 클릭해보면 아래 코멘트를 달 수 있도록 처리되어 있습니다.

피그마 팀 프로젝트 - pigeuma tim peulojegteu
이해가 잘 안되는 부분이 있다면 댓글(Reply)을 달아 의사소통을 할 수 있게 처리되어 있습니다.