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

이전 포스팅에서 오토 레이아웃, 컨스트레인트, 레이아웃 그리드 등 고급 기능까지 배워보았습니다.

지난 시간에는 단순하게 로그인 페이지 하나를 쉽게 배우기 위해 한 페이지 안에 있는 도형의 요소(텍스트, 입력필드, 선, 레이아웃 그리드를 통한 여백 설정)를 활용하여 심미성 있게 그려 보았습니다. 그런데, 이 한 페이지만으로는 전체 서비스를 기획할 수는 없겠죠. 그래서 이번에는 복수 페이지 기획 시 활용할 수 있는 유용한 기능들에 대해 확인해 보겠습니다.

1) Components (컴포넌트 - 공통요소 관리 기능)

Asset에 등록된 컴포넌트

레고 조립을 예로 들면, 다양한 모양의 레고 블록을 미리 만들어서 레고은행에 저장해 놓고, 원하는 모양의 레고를 꺼내서 아이언맨, 닌자고 등을 쉽게 빠르게 만들어 낼 수 있듯이 앱 서비스를 구성하고 있는 UI 요소들인 버튼, 각종 크기의 텍스트, 헤더, 푸터, 입력 필드 등을 미리 만들어서 Assets(자산)으로 등록해 놓고, 필요 시마다 꺼내서(Drag and Drop) 해서 사용하시면 빠르게 앱 UI를 만들어 나갈 수 있습니다. 해당 요소들을 컴포넌트라고 합니다.​

위 화면에서는 앱 UI 기획 시 반복적으로 사용되게 되는 ①컬러, ②폰트, ③레이아웃 그리드, ④입력폼(기본, 1글자 입력 시, 입력 요건 충족 시, 수정 시, 입력 요건 불충족 시, 버튼 활성/비활성) 등을 미리 스타일과 컴포넌트로 등록해 놓은 모습을 볼 수 있습니다.

헤더(Header)와 푸터(Footer) 같이 전체 페이지에 공통적으로 쓰이는 요소들에 대해 수정이 발생할 경우 전체 페이지를 하나하나 변경해야 하는 막노동성 업무가 종종 발생하게 됩니다. 피그마에서는 공통 요소들을 컴포넌트화 해놓고 해당 요소의 수정이 필요할 때 마스터 컴포넌트를 수정하게 되면 종속된 사례 컴포넌트(instance)가 일괄 수정되게 됩니다. 따라서 헤더, 푸터, 하단 탭바(메뉴바)는 가장 1순위로 컴포넌트로 만들어야 하는 부분입니다.

- Asset(자산) 등록

그렇다면, Asset(자산)은 어떻게 등록해야 할까요? 먼저, 마스터 컴포넌트를 생성해야 하는데 마스터 컴포넌트는 의도치 않게 수정되는 것을 방지하기 위해 별도로 관리하는 것이 좋습니다.

마스터 컴포넌트 생성
마스터 컴포넌트 생성 완료

①마스터 컴포넌트 관리를 위한 별도의 Frame을 생성합니다. 어떤 사이즈로 해야 할지 모르시겠다면 A4 사이즈로 해주셔도 됩니다.

②Frame 안의 컴포넌트화할 요소를 모두 마우스로 선택합니다.

③상단 툴바 중앙의 Components 메뉴의 화살표를 클릭 후 클릭하면 나오는 메뉴에서 'Create multiple components'를 선택합니다.

④선택한 요소가 마스터 컴포넌트로 변경된 모습을 확인하실 수 있습니다.

마스터 컴포넌트를 생성하였다면 손쉽게 상태를 바꿀 수 있도록 컴포넌트를 그룹핑하면 좋습니다. 우측 Design 탭의 Combine as Variants(변형본 그룹핑) 버튼을 클릭해서 컴포넌트 그룹핑해주세요.

Variants 사용
Variants 적용 완료

①Combine할 마스터 컴포넌트를 선택합니다.

②우측에서 'Combine as variants' 를 클릭합니다.

③Variants가 적용되었습니다. 세 개의 컴포넌트에 Variants를 적용했으므로 로그인 버튼을 세 가지 상태(활성화, 비활성화, 고스트)로 변경할 수 있습니다.​

Variants 이름 변경

오른쪽의 Variants 영역에서 각 버튼의 이름도 변경할 수 있습니다.

요소를 클릭하면 우측에서 해당 요소의 상태를 확인할 수 있고 손쉽게 다른 상태로 변경이 가능합니다.

이렇게 Asset(자산)에 컴포넌트를 등록하는 방법을 알아보았습니다. 그럼, 이제 Asset에 등록된 컴포넌트를 사용하는 방법을 알아보겠습니다.

2) Asset(자산)에 등록된 컴포넌트 사용하기

아래의 Figma 링크에 기본적인 컴포넌트를 Asset에 저장해 두었습니다. 이 Asset에 저장된 요소들을 꺼내 써서 클론 기획을 진행해 보겠습니다.

다음 링크에 접속해서 해당 요소들을 자신의 Figma 페이지에 복사해서 사용하시면 됩니다.

https://www.figma.com/file/og8rshRCTPX1bH7O3DpoF8/%ED%94%BC%EA%B7%B8%EB%A7%88%EB%A1%9C-%EB%82%B4-%EC%95%B1-%EC%84%9C%EB%B9%84%EC%8A%A4-%EA%B8%B0%ED%9A%8D%ED%95%98%EA%B8%B0_%EC%8B%A4%EC%8A%B5?node-id=0%3A1

- 메인 화면

메인 화면 클론 기획 - 1

①Asset에 저장된 blank 페이지를 우측 Canvas에 Drag&Drop 하여 꺼내옵니다. ②의 헤더, ③키비주얼, ④배너도 꺼내옵니다. 배너는 다양한 타입이 있지만, 대표적으로 하나의 스타일을 만들었습니다. 배너 UI는 이전에 기본, 고급 기능을 배우셨기 때문에 어렵지 않게 만드실 수 있습니다.

메인 화면 클론 기획 - 2

Asset에 저장된 UI 컴포넌트들을 꺼내와서 빠르게 메인 화면 UI를 완성해 보았습니다. 이때 ①의 홈 아이콘을 클릭하면  ②와 같이 활성/비활성 상태를 변경할 수 있습니다. 이 포스팅의 앞부분에서 배우셨던 Variants(변형본)를 이용해 빠르게 상태를 변경할 수 있는 기능이죠.

- 회원가입

회원가입 페이지는 직접 해보실 수 있도록 미리 만들어놓지 않았습니다. Asset에 저장된 로그인 페이지를 활용하여 회원가입 페이지를 만들어보겠습니다.

Detach instance

먼저, 로그인 페이지를 수정하기 위해 ①의 영역에서 Detach instance(종속 사례 분리)를 클릭하여 컴포넌트에서 벗어나도록 설정해 줍니다.

회원가입 화면 기획 - 1

Detach instance 후 ①로그인 텍스트는 회원가입으로 변경하고 로그인 페이지에서 필요 없는 요소들은 삭제합니다. ②의 요소를 ③영역에서 필요한 항목으로 변경합니다. 이때 오토레이아웃 기능을 사용하고 있기 때문에 ctrl+c, ctrl+v로 동일 포맷 필드를 일정한 간격으로 추가할 수 있습니다.

회원가입 화면 기획 - 2

마지막으로 약관동의와 버튼을 추가하고 ①의 영역에서 Frame 이름을 회원가입으로 바꿔주면 회원가입 화면 기획이 완료됩니다.

이렇게 컴포넌트를 활용해 로그인, 회원가입 등의 앱 서비스를 구성하는 각종 UI들을 조립하듯 만들어내고 전체 서비스 기획을 빠르게 진행할 수 있습니다. Figma의 강력한 Components(공통 요소 관리) 기능입니다.

그럼, 다음 포스팅에서는 이렇게 그린 UI들의 연결 Flow를 정의하는 방법에 대해 배워보겠습니다.

다음 시간에 만나요!


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

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

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