전문 UX 툴 Figma를 활용한 실전 앱 기획! - 3부

안녕하세요. 전문 UX 툴 Figma를 활용한 실전 앱 기획 3번째 시간입니다.

이전 포스팅에서 UI 기획과 프로토타이핑에 대해 배워보았는데요.

오늘은 개발자들이 실제 개발할 때 필요한 기능 정의 방법에 대해 배워보도록 하겠습니다!:)

업계에서는 전통적으로 파워포인트(PPT) 문서로 앱/웹 기획을 합니다. A4 가로 사이즈의 문서 양식의 좌측엔 UI를 그려넣고, 우측엔 기능정의 디스크립션을 기재해 놓습니다.

그리고, 저희가 배우고 있는 Figma 앱 기획에선 UI 화면들을 Autoflow 연결선과 프로토타입 기능으로 연결해 화면의 연결 Flow를 볼 수 있도록 하고 있습니다.

하지만 Figma에서도 역시 기능 정의 설명은 텍스트로 기재가 필요합니다.

이 부분은 코멘트 기능을 사용하여 기재하면 되는데요, 아래 이미지를 보며 비교해보겠습니다.

1) 정적인 UI 설명 방식 (PPT 화면설계 텍스트 기반 기능 정의)

PPT 화면설계

① 번 영역에 화면 UI를 배치하고, 기능 설명이 필요한 부분에 번호를 붙여 표시하고, ② 번 영역에 해당 번호별 동작 설명을 기재합니다.

현재 업계에서는 여전히 파워포인트(PPT)를 사용해 기획하고 있는데요. Figma와 같이 생산성이 높은 전문 UX 툴이 세상에 나왔음에도 불구하고 업무 방식을 개선하지 못하고 기존의 방식을 계속 유지하고 있는 상황입니다. 그러나 해외/국내 스타트업과 IT기업 중심으로 Figma 활용 비율이 늘어나고 있습니다. UX시스템을 정립하고, 프로토타이핑 등 프리미엄 기능들을 활용해 효과적으로 서비스 기획을 하고 있습니다.

2) 다이나믹한 기능 정의 방식(프로토타이핑, 코멘트 기재 기능정의)

피그마 기능정의 - 1

① 번 Autoflow 플러그인 기능으로 화면과 화면을 연결(노란색)해 주요 화면들의 흐름을 한 눈에 파악할 수 있도록 하고,

② 번 Prototype(하늘색) 연결 및 Present(시연) 기능을 통해 실제 동작을 클릭해 시뮬레이션해볼 수 있습니다.

피그마 기능정의 - 2

그리고 각 화면 UI에 대한 기능 설명이 필요할 경우 해당 UI 위에서 단축키 C(Comment)를 클릭하면

① 번 로케이션 아이콘과 ② 번 코멘트 입력창이 나타나며, 내용 입력 후 ③ 번 Post를 클릭하면 우측 패널 ④ 영역에 코멘트가 누적됩니다.

Tip. 다시 단축키 V(Move)를 클릭하면 UI 편집이 가능한 상태로 변경되고 다시 C를 클릭하면 코멘트를 등록할 수 있습니다. 단축키 V와 C를 눌러가며 편집과 코멘트 등록을 진행해주시면 됩니다.

보너스팁으로 UI 정렬 플러그인에 대해 배워보겠습니다!:)

화면 UI를 만든 Frame들이 여러 개 있을 때 프레임들의 간격을 하나하나 마우스로 정렬해 놓지만 기계가 한 것이 아니기 때문에 정렬이 완벽하게 맞을 순 없습니다. 이때 UI 정렬 플러그인 'Super Tidy'을 설치해 사용하면 UI 정렬을 깔끔하게 맞출 수 있습니다.

‘Super Tidy’ Plugin 설치하기

‘Super Tidy’ Plugin 설치

① Community 메뉴 선택 후, ② ‘super tidy’ 키워드 입력 ③ Plugins 탭을 클릭하면, 검색 결과가나타나며, ④ install 버튼을 클릭해 설치한 뒤 ⑤ 작업 중이던 Canvas 탭을 클릭해 작업 중이던 캔버스로 돌아갑니다.

‘Super Tidy’ Plugin 사용하기

‘Super Tidy’ Plugin 사용하기

① 정렬할 Frame들을 선택하고, 우측 마우스를 클릭해서 ② Plugins 메뉴를 클릭 ③ Super Tidy 항목을 선택하고, ④ Tidy를 선택하면 정렬됩니다. 또한, ⑤ Run custom을 클릭해 간격을 조정할 수 있습니다.

오늘은 Figma에서 기능 정의 하는 방법으로 1) Autoflow 플러그인 활용 연결선 적용, 2) Prototype 연결, 3) 코멘트 기능 정의 기재하는 방법에 대해 배워보았습니다.

이렇게 Figma를 활용한 앱 서비스 기획에 대한 모든 내용을 배워보았습니다.

그러나 실제 앱서비스를 기획할 때 이런 테크닉적인 부분만으로 기획을 진행한다면 UI는 이쁘지만 논리적이지 않은 UI들을 양산해내는 기획을 할 수도 있습니다.

그래서 다음 시간에는 'UX/UI 서비스 기획 방법론'에 대해 배워보도록 하겠습니다. 그럼, 다음 시간에 만나요! :)

유익했다면! 이어서 읽어보기:)

실패 없는 개발을 위한 서비스 기획!

Figma 프로토타이핑 기획!🚀
상담문의