.svg)
.svg)
요즘 앱 기획자들 사이에서 ‘핫’한 툴(tool)이 있습니다. 바로 UI/UX 디자이너들이 주로 사용하던 피그마(Figma)인데요. 앱 기획자들의 전통적인 기획 도구는 파워포인트(Powerpoint)였습니다. 거의 모든 PC에 제약 없이 설치할 수 있고, 보안 네트워크 환경에서도 쉽게 작업할 수 있기 때문입니다. 오랜 기간 남녀노소에게 익숙한 도구이기 때문에 누구나 능숙하게 편집, 활용할 수 있다는 점이 장점입니다.
그럼에도 앱 기획자들이 PPT에서 피그마로 갈아타고 있는 이유는 무엇일까요? 파워포인트에서는 찾아보기 힘든, 피그마의 강점 및 피그마를 제대로 활용하는 방법에 대해 알아보겠습니다.
✍️ 이 글의 순서
• 피그마의 여러 가지 장점 3가지
• 피그마 200% 활용하는 방법
• 앱제작 기획은 ‘피그마’, 도움이 필요하다면 ‘위시켓’
파워포인트로 앱 화면을 설계할 때 가장 큰 어려움은 실제 화면 비율이 다르다는 점입니다. 사실 파워포인트는 말 그대로 ‘프리젠테이션’이 주 목적이기 때문에, 모바일 화면 설계에는 태생부터 적합하지 않습니다.
특히 모바일 앱 페이지는 가로가 좁고 세로가 긴 형식인데, 파워포인트의 기본 화면은 세로가 좁고 가로가 긴 형식이죠. 화면 비율을 조정하더라도 여러 장의 문서로 만들어야 하고, 작은 공간 안에 많은 내용을 넣어야 하는 불편함이 생깁니다.
이와 달리 피그마는 정확한 픽셀로 작업 환경을 조성할 수 있으며, 페이지를 따로 나눌 필요도 없습니다. 필요한 만큼 세로 길이를 확장할 수 있기 때문에, 첫 페이지부터 맨 마지막 페이지까지 한눈에 볼 수 있는 연출도 가능합니다. 이는 디자이너나 개발자와 협업할 때도 큰 장점이 됩니다.
요즘 협업의 대세는 ‘클라우드 작업’입니다. 저장할 필요도 없고, (인터넷만 연결되면) 언제 어디서나 접속할 수 있죠. 또, 누가 작업하고 있는지 실시간으로 확인할 수도 있습니다.
피그마는 이러한 클라우드 작업 환경을 기반으로 하기 때문에 굳이 저장할 필요가 없으며, 마우스 커서 움직임이나 키보드 타이핑을 멈춘 시점을 기준으로 버전을 지정하기 때문에 버전 관리도 간편합니다. 당연히 동시 작업을 지원하기 때문에 각자 어떤 업무를 하고 있는지, 어떻게 업무를 진행하고 있는지 쉽게 파악할 수 있죠.
피그마가 갖고 있는 강력한 기능 중 하나는 바로 실시간 피드백(댓글)입니다. 모든 요소에 댓글을 남길 수 있고, 담당자는 이를 확인하여 답변을 달거나 즉시 수정할 수 있습니다. 또, 댓글 히스토리 기능이 따로 있기 때문에, 필요하다면 어떻게 처리되었는지 다시 확인할 수 있습니다. 이런 이유로 일각에서는 ‘비대면 협업의 끝판왕’이라는 별명으로 불리기도 하죠.
이처럼 훌륭한 기능을 갖춘 피그마. 그렇다면 앱 기획자가 피그마를 제대로 활용하는 방법은 무엇일까요? 몇 가지 팁을 공개합니다.
모바일 앱 상단 혹은 하단에 고정적으로 노출하는 메뉴나 네비게이션 바와 같이 여러 페이지에 걸쳐 공통적으로 나타나는 요소가 있습니다. 파워포인트에서는 ‘슬라이드 마스터’가 비슷한 기능이라 할 수 있는데, 피그마에서는 ‘마스터 컴포넌트 기능’으로 구현할 수 있습니다.
마스터 컴포넌트의 장점은 슬라이드 마스터와 마찬가지로 공통 요소를 한 번에 수정할 수 있다는 것. 다만 (배경색이나 레이아웃, 전체적인 스타일만 수정할 수 있는) 슬라이드 마스터와 달리, 마스터 컴포넌트는 UI뿐 아니라 버튼, 팝업 등의 컴포넌트까지 마스터를 지정할 수 있습니다. 따라서 일관성 있는 UI를 기획하는데 유리합니다.
버전 관리는 앱 기획자뿐만 아니라 디자이너, 개발자와도 긴밀히 공유해야 하는 부분입니다. 그만큼 신경 쓸 것도 많죠. 보통 개발자는 깃허브로 공유를 하고, 기획자는 PPT 앞 장표에 히스토리를 작성하는데요. 깜빡 잊거나, 중간에 누락되는 경우가 종종 있습니다.
앞에서 설명했듯이, 피그마를 이용하면 버전 관리가 쉽습니다. 타임라인 형태로 버전 히스토리를 제시하기 때문이죠. 또, 히스토리 중 특정 버전이 보고 싶다면 언제든지 복구할 수 있습니다.
데이터의 길이에 따라 UI가 달라지는 경우가 있습니다. 파워포인트로 작업한다면 일일이 길이를 수정해 주어야 하는데, 피그마에서는 그럴 필요가 없습니다. 텍스트 길이에 맞춰 자동으로 조절하는 자동 레이아웃(Auto Layout) 기능이 있기 때문이죠.
💡 Auto Layout의 종류
• Hug Contents: 내부 콘텐츠에 맞춰 컨테이너 크기를 자동으로 조절합니다.
• Fill Container: 외부 컨테이너에 맞춰 내부 콘텐츠를 꽉 채워 보여 줍니다.
• Fixed Heiht: 외부 컨테이너의 영향을 받지 않고 사이즈를 고정합니다.
피그마는 이렇게 앱제작에 앞선 기획 단계에서 기획자에게 다양한 편의를 제공합니다. 실제 개발과 디자인에 들어가서도 그 효용이 이미 증명된 대중적인 도구로 자리 잡았습니다. 이제 앱제작, 기획은 ‘피그마’로 시작하는 게 공식이라고 봐도 무방합니다.
앱제작이 처음이거나, 경험이 부족한 입장에서 유일한 저항은 ‘어색함’입니다. 누구나 그렇듯 처음부터 편안함이 느껴지진 않습니다. 다만, 주변에 도움을 줄 수 있는 사람이 있다면 말이 달라집니다. 위시켓은 이런 사소한 부분까지 도움드리는 국내 1위 IT 아웃소싱 전문 플랫폼입니다.
위시켓에서는 등록, 진행되는 프로젝트마다 1:1로 전담 매니저가 배정됩니다. 배정된 매니저는 프로젝트 기획 단계부터 외주 업체 모집과 선별, 계약, 프로덕트 런칭 후 대금 지급까지 모든 과정을 함께 합니다. 단순 매칭 플랫폼을 넘어, 완성형 프로덕트를 구현하는데 목적이 있습니다.
아래 링크를 통해 위시켓에서 진행되고 있는 프로젝트를 직접 확인해 보세요. 그리고, 여러분도 어떤 도움을 받을 수 있는지 자세히 들여다보시길 바랍니다.
🔖 함께 보면 도움되는 글
.svg)
