brunch

You can make anything
by writing

C.S.Lewis

by 기획자 Oct 31. 2023

서비스 기획자의 피그마 #3

서비스 기획 문서 작성 툴 - 피그마

플러그인이나 기능에 대한 피그마 글은 내가 굳이 작성하지 않더라도

조금만 구글링 해보면 쉽게 찾아볼 수 있다.



기획 실무 관점에서의 피그마의 활용도에 대해 다뤄보면 좋을 거 같아서
글을 시작해 본다.





1. 버전 관리


PPT에서도 이전 버전을 확인하는 것이 가능하지만 Figma에서도 가능하다.



좌측 상단 피그마 아이콘 > File > Show version history 탭을 클릭하면 버전 관리 페이지로 진입한다.




페이지 우측에서 업데이트된 버전에 대한 히스토리를 모두 확인 가능하다.

특정 버전을 클릭하면 해당 버전의 페이지를 확인 가능하다.

추가로 아래 기능을 사용 가능하다.


Name this version : 지난 버전에 타이틀과 업데이트 사항 업로드

Restore this version : 지난 버전으로 되돌리기

Duplicate : 지난 버전으로 신규 프로젝트 생성

Copy link : 지난 버전을 확인 가능한 링크 복사



타이틀과 업데이트 사항을 기록해서 관리하는 것도 가능하고

내가 업데이트한 사항만 필터링해서 확인할 수도 있다.



지난 버전을 확인할 때는 View만 가능하고 수정은 불가능하다.



좌측 상단의 [Done] 버튼을 클릭하면 history 모드가 종료된다.



사실 실무에서 버전 관리는 빼놓을 수가 없는 부분이다.

일반적으로는 수정된 예전 버전을 확인할 필요가 없는 경우가 대부분이지만

간혹 한 번씩 지난 버전을 확인해야 될 때가 있는데 이렇게 히스토리를 한눈에 확인할 수 있다 보니

문서화된 PPT 파일보다 훨씬 확인하기 용이하다.


이렇게 버전 히스토리를 확인 가능하기는 하지만 초단위로 저장되는 게 아니다 보니
주요 업데이트 사항이 있을 경우에는 설계서에 체크해 두는 게 좋다.
[ 업데이트된 버전 / 업데이트 일자 / 업데이트 항목 / 작업자 ]






2. Frame


작업을 하다 보면 디바이스 사이즈를 확인해야 할 때가 있다.

피그마에서는 별도 검색 없이 주요 디바이스 사이즈를 바로 확인/적용 가능하다.



좌측 상단의 Frame 버튼을 누르면



우측에서 디바이스 사이즈를 확인 가능하고 원하는 디바이스를 클릭하면

해당 사이즈로 프레임이 자동 생성되는 것을 확인할 수 있다.


모바일/태블릿/웹뿐만 아니라 애플워치와 A4/A5 등 다양한 양식의 프레임을 불러올 수 있다.






3. 개발자 모드


요즘 AI가 발달하면서 "조만간 개발자 자리 없어진다..."라는 괴담이 많이 떠돌고 있다.

내 옆자리 개발자도 우스개 소리로 자주 하는 얘기인데 정말 허무맹랑한 말은 아니긴 하다.


개발을 하다가 막힐 때 ChatGPT에 물어보면 막히는 부분을 시원스레 해결해 줄 때도 있고

(말 안 통해서 답답할 때도 한두 번이 아니긴 함)

애초에 처음부터 코드를 짜달라고 해도 척척 짜준다.


당장 피그마만 보더라도 개발자 모드로 전환하면 퍼블리싱 코드를 작성해서 보여준다.



요새 괜히 퍼블리셔 자리가 줄어드는 것이 아니다...




우측 상단의 토글을 클릭하면 개발자 모드로 전환된다.



Code를 볼건지 Properties를 볼 건지 선택도 가능하고

Code의 유형도 Unit도 선택 가능하다.


 

Code 와 Properties


Code의 경우 Copy 기능을 지원하기 때문에 Copy 해서 그대로 복사 붙여 넣기 하면 된다.



심지어 바로 VS code로 오픈하는 기능도 지원한다.


개발자가 일하기 편한 환경이기도 하고
개발자가 설 자리가 줄어드는 환경이기도 하다는 생각이 든다.





4. 프로토타입


피그마를 사용하시는 분들이라면 다들 알고 계실 테고

더 잘 다루고 있는 글이 많기 때문에 프로토타입 사용법에 대해서는 자세히 다루지 않겠다.


피그마는 별도 프로토타입 툴을 사용하지 않더라도

피그마 안에서 기획/디자인/프로토타입까지 제작 가능하다.



우측 상단의 [Prototype] 탭을 클릭하면 프로토타입 설정이 가능하다.



무슨 액션을 취했을 때 동작할 것인가?

어떤 동작을 할 것인가?

어떤 애니메이션으로 동작할 것인가? 를


클릭 한 번으로 쉽게 설정할 수 있다.


버튼 클릭을 통한 페이지 이동은 물론 토글, 체크박스 동작, 스크롤 이동 텍스트 작성 등

다양한 프로토타입 제작이 가능하다.


기능 디벨롭 같은 작은 프로젝트에서는 따로 프로토타입을 제작하지 않고
규모가 큰 디벨롭 프로젝트나 신규 기능 기획을 할 때에는 프로토타입을 제작해
타 부서 관계자들의 이해를 돕는 편이다.


브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari