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

이전 포스팅에서 복수 페이지 기획 시 활용할 수 있는 유용한 기능 중 강력한 Components(공통 요소 관리) 기능에 대해 배워보았습니다.:)

오늘 포스팅에서는 복수 페이지 UI들의 연결 Flow를 정의하는 방법에 대해 배워보겠습니다!:)

1) 화면 Flow 정의

화면과 화면의 Flow를 PPT에서는 텍스트로만 설명합니다. "이 페이지 다음에는 어떤 페이지가 표출됩니다.", "이 버튼을 클릭하면 어떤 기능이 실행됩니다."처럼 말이죠. 이렇게 텍스트로만 설명된 기획서를 디자인>퍼블리싱>개발 파트에서 확인하고 작업할 때 각 단계에서 누락이 많이 발생하게 됩니다. 수년간의 경력이 있는 디자이너, 개발자라고 할지라도 새로운 서비스에 대해 동작 화면을 보지 않고, 텍스트로만 해당 기능들을 확인하고 이해해서이기 때문인데요.​

Figma에서는 다양한 서드 파티(Third party) 플러그인을 제공하고 있습니다. 그 중 Autoflow라는 Plugin을 설치해 UI간 연결선을 손쉽게 적용할 수 있습니다.

다음은 Autoflow 플러그인 검색 및 설치 화면입니다.

Autoflow Plugin 설치

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

Autoflow Plugin 설정

① 빈 Canvas 영역에서 우측 마우스를 클릭하면 ② 번 창이 뜨고, ③ Plugins 메뉴를 클릭하면 설치한 플러그인들의 리스트가 나타납니다. ④ Autoflow 항목을 선택하면, 설정 창이 나타납니다.⑤ 컬러는 기본 UI의 컬러와 구분될 수 있도록 ‘FFAE1B’, 테두리는 ‘5’로 설정해서 사용해주세요.

Autoflow Plugin 사용 - 1

① Autoflow 창을 닫지 않고 유지한 채 ② 버튼 또는 텍스트 등의 링크 요소를 클릭하고 [Shift Key]를 누른 상태에서 ③ 도착 페이지 Frame을 선택하면 ④ Autoflow가 그려집니다.​

Autoflow Plugin 사용 - 2

① Autoflow 라인들은 계속 최상위에 누적되며, 해당 Line들을 [Shift Key]를 누른 상태에서 [Ctrl+G Key]를 눌러서 그룹핑해주면

② 번과 같이 그룹이 되고 우측의 눈 아이콘을 클릭하면 ③ 번에 노출된 Line이④ 번과 같이 비표출되게 됩니다.

즉, 화면 UI를 수정하는 경우엔 Line을 비표출하거나 잠궈주서 기본 UI 수정에 방해가 되지 않도록 하면 됩니다.

다음은 실제로 동작 화면을 볼 수 있는 Figma의 프로토타이핑(Prototype - 동작 시연) 기능에 대해서 배워보도록 하겠습니다.

프로토타이핑은 동작 시연 기능으로 모바일앱 서비스 기획 시 복수 UI들을 그린 뒤 해당 화면들을 연결해 실제 동작시켜보는 하는 기능입니다. 정부 과제 사업의 경우 시제품 제작 사업이 있는데요. 이 경우 Figma UI 기획 후 프로타이핑 작업하면 시제품 제작 사업을 준수하게 됩니다. 민간 VC 대상으로 투자 심사를 받을 때도 이 프로토타이핑 작업은 아주 유용합니다. ​

또한, 앱 서비스 기획 단계에서 최종적으로 프로토타이핑 단계를 거쳐 실제 동작 화면을 보고, 누락된 화면이 있을 경우 보강하여 더욱 탄탄한 기획이 되도록 합니다. 이 프로토타이핑 작업은 향후 개발 단계 시의 기능 미정의된 사항으로 인해 발생하는 여러 오류를 기획 단계에서 잡아낼 수 있는 아주 유용한 기능입니다. 이 프로토타이핑 기능이 바로 텍스트 베이스의 PPT 기획과 확연하게 차별화되는 기능으로 개발 오류와 비용을 사전에 확! 줄일 수 있는 기능입니다. ​

Prototype 탭 선택 - 1

① 우측 속성 패널의 2번째 Prototype 탭 클릭 후② Device ‘None’ Select Box 클릭합니다.

③ 360*640 사이즈의 Google Nexus 5x 목업 선택 후

④ 링크를 연결할 요소를 클릭하면 프로토타이핑의 첫 시작점이 + 아이콘으로 표출됩니다.

Prototype 탭 선택 - 2

① + 아이콘을 마우스로 잡고 끌어서 ② 연결할(도착) 페이지의 Frame을 클릭하면

③ 과 같이 파란색 연결선이 나타납니다. ④ ‘On tap(모바일의 터치, PC의 클릭 의미)’ 액션과 ⑤ ‘Navigate to(다른 화면 프레임으로 이동)’ 액션이 기본 설정됩니다.

Tip. ④에서 On Drag 옵션은 화면에서 요소를 드래그할 경우, Open Overlay는 팝업과 같이 현재 화면 위에 추가로 띄울 경우에 사용되며, Back은 이전 화면으로의 이동을 의미합니다.

자 이렇게 오늘은 서비스를 구성하는 UI 화면들을 연결하는 Autoflow와 Prototype 기능을 살펴보았습니다.

이렇게 실제 동작시켜볼 수 있는 프로토타이핑 기능을 사용할 경우 프로젝트를 진행하는 전체 구성원의 이해해도 상당하게 올라가고, 투자자 대상으로 기획 단계부터 투자유치를 진행할 수 있는 아주 유용한 기능입니다. 정부 과제 지원 시에도 프로토타이핑 작업 후 해당 화면을 영상으로 찍어서 제출했을 때 합격한 사례도 있습니다.

무엇보다 기획자 스스로도 실제 동작들을 시뮬레이션 해보며 자신이 진행한 기획본의 홀(hole)을 발견하고, 보강할 수 있어서 더욱 탄탄하게 기획서를 마감해낼 수 있는 검증 기능이기도 합니다.

그럼, 다음 포스팅에서는 이렇게 그린 UI들과 프로토타이핑에 더해 개발자들이 실제 개발할 때 필요한 기능 정의 방법에 대해 배워보도록 하겠습니다. 다음 시간에 만나요! :)

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

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

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