[기획자의 Figma] 피그마 시작-후기/ UI 설계서 템플릿 공유

2023.04.19 컴포넌트 수정: 메시지창, 표

 

 

---

 

피그마가 핫한 툴이긴 한 것 같다. 보수적인 우리 회사에서도 도입해서 쓰고 있으니 말이다. 

처음엔 재밌었는데, 하다보니 점점 더 어렵고, 뭔가 디자인 욕심을 내게되는... 하지만 금세 또 포기하고 말았다. 난 설계에 집중해야지...

 

 

시행착오

처음엔 어떻게 시작해야 할지 몰라서, description은 대지 바깥에 적거나, Comment 기능을 사용했었다. 그런데

다시 일반적으로 쓰는 설계서 템플릿을 만들어서 사용했다.

 

 

결국 산출물 작업을 위해서 고객사에 문서로 전달해야 하는데, 이때 PDF로 출력하기 위해서는 대지로 만든 프레임에  Description이 포함되어야 했다.

 

 

또, 수정이 많은 경우엔 사실 히스토리 관리가 쉽지 않다. auto-save라고 하지만 하루에도 몇번씩 저장되기 때문에 히스토리 관리가 쉽지 않았다. 

 

내보내는 순간의 버전에 local copy 저장도 가능하고 breakpoint를 만들 순 있지만, 이 부분이 좀 익숙해지지 않아, 훈련이 필요하다. 

 

텍스트 수정인 경우는 PPT도 표기하기 쉽지 않았으니까

 

 

그리고 사실 툴을 도입한 초기여서 디자인 팀과 커뮤니케이션 하는게 그렇게 쉽지 많은 않았다. 서로 기능을 잘 모르니 방법론을 정하기도 어려웠고. 어쩔 수 없이 부딫히며 겪을 수 밖에 없었다.

 

 

 

 

 

 

도입하고 지금까지 6개월 가량 Figma로 진행한 프로젝트를 다음과 같은 유형으로 나눠볼 수 있을 것 같다.

1. 피그마로 설계 - 디자인까지 한 경우

2. 피그마로 설계만 한 경우

3. 피그마로 디자인만 한 경우

 

 

1. 피그마로 설계 - 디자인까지 한 경우

APP 페이지 제안할때 했던거였는데, 프로토타입으로 실제 프로세스를 확인할 수 있어서 유용했다.

다만, 뒤에 더 쓰겠지만 디자인 팀의 경우, 디자인적 요소가 많이 필요한 경우 포토샵이나 일러스트랑 병행해야 했다.

 

기획 측면에서 피그마의 최고 장점은 화면 전체가 한 눈에 확인하면서, 프로세스를 볼 수 있다는 거라고 생각한다. 물론 케이스 처리에 대해서는 조금 복잡한 감이 있지만.

 

디자인 측면에서 장점은, 포토샵에 비해 훨씬 가볍고, 동시 작업이 되는 것이라고 전해 들었다. 자세한 후기는 다른 디자이너 분들의 블로그에서 볼 수 있지 않을까

 

 

2. 피그마로 설계만 한 경우

왜 피그마로 설계만 했는지에 관한 것인데, 도입 초창기의 문제라고 생각한다. 툴 사용이 기획-디자인 모두 익숙하지 않았고, 디자인 작업이 좀 빠르게 진행되어야 했기 때문에 설계만 피그마로 하고, 디자인은 PSD로 진행했었다.

 

이 프로젝트의 특성상 콘텐츠 페이지보다는 서비스 화면을 만들어야 했다. 그래서 위에서 말한 프로세스를 한 눈에 볼 수 있는 피그마의 장점을 매우 잘 살릴 수 있었고, 고객사와 커뮤니케이션을 하면서도 편리했다. 프로토타입으로 프로세스를 정의하고, 코멘트 기능으로 화면에 대한 피드백을 바로바로 적을 수 있었기 때문이다. 고객사도 피그마에 대한 반응이 좋았다.

 

그래서 더욱 디자인을 피그마로 진행하지 않은 것에 대한 아쉬움이 많았다. 이 프로젝트가 고객사의 서비스 플로우에 대해 정의가 덜 된 초반에 디자인 작업을 병행했어야 해서 수정이 정말 많았다. 피그마를 통해 디자인 시스템을 만들어두고 컴포넌트들을 잘 활용했으면 조금 더 수정이 편리하고 빠르게 진행됐을 것 같다.

 

반전은 설계도 결국 PPT로 돌아갔었다. 역시 과도기적 문제인데, 기존 작업자들(디자이너, 퍼블리셔, 개발자)의 거부감이 없지 않았다. 또한 위에서 언급한 것처럼 히스토리 관리를 어떻게 할 것인가 문제를 해결하지 못한 상태라 쉽지 않았던 것 같다. 나중에 돌이켜보면 이 프로젝트는 히스토리 관리가 그렇게 중요하지 않았다...... 결국 전체 프로세스를 보는 것이 더 중요했었다...

 

 

3. 피그마로 디자인만 한 경우

이렇게 진행한 프로젝트는 PC-Mobile 메인 페이지만 작업하면 되어서, 사실 피그마를 쓴게 너무 잘한 일이었다. 당시 디자이너가 피그마에 빠르게 적응해서 문서 이력 페이지도 autolayout 기능으로 만들어주고 했다. 

 

역시, 단점은 그래픽 작업이 많으면 포토샵고 일러스트를 병행해야 하는데 그 디자이너 말로는 그래도 UI할때는 피그마가 더 좋았다고 했다. 그래픽 작업은 포토샵으로 UI 해도 똑같이 해야 하니까.

 

내가 참여하지는 않았지만, APP 구축 프로젝트에서 작업한 디자이너도 초반 디자인 시스템 잡는게 조금 힘들지만, 그래도 관리나 수정이 편리해서 좋았고, Comment 기능으로 서로 수정된 부분들을 공유할 수 있었다고 했다.

 

확실히 협업에 강점이 있었다. 클라우드의 세상으로!!!

 

 

 

 

단축키와 기능

포토샵을 잘 다루진 않지만 레이어 개념과 약간의 단축키를 알고 있어서 수월하게 시작했지만, 그렇지 않은 경우라면 하나하나 하면서 익히는데 하루정도 온전히 걸릴거 같다.

 

단축키	단축키 설명
V	화살표/Move
T	텍스트 입력창
C	댓글/Comment
Ctrl + G / Ctrl + Shift + G	그룹 생성 / 그룹 해제
Ctrl + Alt + G / Ctrl + Alt + Shift + G	프레임 생성 / 프레임 해제 * 프레임으로 만들어야 출력 및 인터랙션 가능
Ctrl + D	이전 작업 동일하게 반복
Ctrl + Shfit + V	서식 없이 붙여 넣기
Ctrl + Click	특정 레이어만 선택

위 표는 기본 단축키고, 자세한 단축키는 구글링하면서 익히도록 하자.

 

그리고 반드시 익히길 바라는 기능은

1. Component / 2. Auto layout / 3. Constraints

이것들에 대해서는 언젠가 다시 블로그에 업데이트 하길 바라며...

 

 

 

Tip. 피그마에서 이미지 크롭하는 방법

Crop이라고 쓰여 있는 부분이 아마 Fill로 되어 있을텐데 이 부분을 Crop으로 바꾸면 이미지를 자를 수 있다.

 

 

 

UI Template / 피그마 설계서 / 피그마 화면 설계

아래 링크에서 로컬 파일을 다운로드하거나, 복사해서 사용하시길

 

🔽🔽🔽 로컬 파일

https://bit.ly/3J3s7IV

 

 

🔽🔽🔽항상 최신 파일

https://bit.ly/3pwGeiB

Figma

 

 

 

언젠가 또 피그마 관련 글감들 모아서 I'll be back