Figma :: 슬롯 머신(Frame)

언젠가 한번 정리해야지...해야지...해야지...!! 하다가 드디어 도전을 시작한 첼라입니다 :)

첫번째 기본 개념은 바로슬롯 머신(Frame)입니다.

슬롯 머신에서 가장 중요한 개념 중에 하나인슬롯 머신(슬롯 머신)!!

아는 듯 모르는 듯 아는 단어인데지금 이 상황에서는 무슨 의미일까?가 궁금해진다면 우선 이 영어 단어의 뜻부터 알아봅시다.

네이버 사전 슬롯 머신 검색결과

네 ㅎㅎㅎㅎ

슬롯 머신에서도 동일한 의미입니다.

어떤 컨텐츠를 담기 위한 기본 틀이 되는 것이 바로 이슬롯 머신입니다.

기본적으로 어떤 화면을 제작하든 기본은 슬롯 머신이 되어야 합니다.

Figma의 핵심 기능이라고 할 수 있는 Auto layout, Constraints 뿐 아니라 Layout guide 역시 슬롯 머신을 기준으로 실행이 됩니다.

조금 더 쉬운 작업을 위해서 Figma 에서는 다양한 디바이스 및 페이퍼에 대한 사이즈에 맞춰 슬롯 머신을 제공해주고 있습니다.

단축키 F를 클릭하면 볼 수 있는 다양한 디바이스별 슬롯 머신 사이즈

아~ 그럼 앞으로는 바탕이 되는 화면을 만들 때 슬롯 머신 기능을 사용하면 되겠구나.

자, 여기까지는 쉽게 이해가 되셨죠?

여기서 이제 조금 더 깊게 들어갑니다. �

Figma에서 정의한 슬롯 머신이 사용되는 경우는 다음과 같습니다.

레이아웃 그리드를 적용하고자 할 때

슬롯 머신 내부에 속해 있는 요소들의 크기를 정의해야하는 경우

슬롯 머신에 속해 있는 도형 요소를 이용하여 슬롯 머신 경계를 기준으로 잘라내거나 하는 등의 디자인을 실행하는 경우

슬롯 머신 안에 속해있는 컨텐츠를 독립적으로 제어해야할 필요가 있는 경우

프로토타이핑 기능을 사용해야할 때

자, 우리는 지금부터 Youtube 앱을 만드는 기획자입니다.

메인 화면을 간단하게 구성해보면 아래와 같이 각 영역들을 나눌 수 있습니다.

Youtube 앱 메인화면의 영역 구분 해보기

오른쪽의 화면을 주목해주세요.

우리는 우선 메인 화면에 들어가는 다양한 요소들을 성격에 따라서 분류했습니다.

Header

List 1 (영상 목록 타입)

List 2 (게시물 타입)

Bottom 고정메뉴

크게 나눠본 각 영역들 역시 슬롯 머신으로 만들어주시는 것이 좋습니다.

그 이유는 다음과 같습니다.

해상도에 따라 설정한 Spacing을 유지하면서 사용 가능 (Auto layout)

각 영역 모두 각자의 독립성을 갖고 있는 컨텐츠 영역인 점 (개별 관리 가능)

스크린 타입에 따라 필요한 컴포넌트 베리언츠 제작의 편의성 고려

이렇게 크게 3가지로 꼽아볼 수 있습니다.

현재는 큰 덩어리로 살펴보았는데요. 각 영역 안에 포함되어 있는 에셋들 역시도 필요에 따라 슬롯 머신으로 제작이 가능합니다.

이것저것 다 모르겠다면...?!

Design 을 위한 것이 아니라면컨텐츠가 담기는 각 영역은 모두 슬롯 머신으로 구성한다-로 생각하시면 됩니다.특히나 빈번한 수정이 발생하는 소프트웨어 설계, 디자인 과정에서는 그룹 구성을 하시는 것보다

슬롯 머신 구성으로 만드셔야 사후 관리가 용이해진답니다. :)