Figma :: 프레임(Frame)
Figma 사전
언젠가 한번 정리해야지...해야지...해야지...!! 하다가 드디어 도전을 시작한 첼라입니다 :)
첫번째 기본 개념은 바로 프레임(Frame)입니다.
Figma에서 가장 중요한 개념 중에 하나인 프레임(Frame)!!
아는 듯 모르는 듯 아는 단어인데 지금 이 상황에서는 무슨 의미일까? 가 궁금해진다면 우선 이 영어 단어의 뜻부터 알아봅시다.
네이버 사전 Frame 검색결과네 ㅎㅎㅎㅎ
Figma에서도 동일한 의미입니다.
어떤 컨텐츠를 담기 위한 기본 틀이 되는 것이 바로 이 Frame 입니다.
기본적으로 어떤 화면을 제작하든 기본은 프레임이 되어야 합니다.
Figma의 핵심 기능이라고 할 수 있는 Auto layout, Constraints 뿐 아니라 Layout guide 역시 프레임을 기준으로 실행이 됩니다.
조금 더 쉬운 작업을 위해서 Figma 에서는 다양한 디바이스 및 페이퍼에 대한 사이즈에 맞춰 프레임을 제공해주고 있습니다.
단축키 F를 클릭하면 볼 수 있는 다양한 디바이스별 프레임 사이즈아~ 그럼 앞으로는 바탕이 되는 화면을 만들 때 Frame 기능을 사용하면 되겠구나.
자, 여기까지는 쉽게 이해가 되셨죠?
여기서 이제 조금 더 깊게 들어갑니다. �
Figma에서 정의한 Frame이 사용되는 경우는 다음과 같습니다.
레이아웃 그리드를 적용하고자 할 때
프레임 내부에 속해 있는 요소들의 크기를 정의해야하는 경우
프레임에 속해 있는 도형 요소를 이용하여 프레임 경계를 기준으로 잘라내거나 하는 등의 디자인을 실행하는 경우
프레임 안에 속해있는 컨텐츠를 독립적으로 제어해야할 필요가 있는 경우
프로토타이핑 기능을 사용해야할 때
자, 우리는 지금부터 Youtube 앱을 만드는 기획자입니다.
메인 화면을 간단하게 구성해보면 아래와 같이 각 영역들을 나눌 수 있습니다.
Youtube 앱 메인화면의 영역 구분 해보기오른쪽의 화면을 주목해주세요.
우리는 우선 메인 화면에 들어가는 다양한 요소들을 성격에 따라서 분류했습니다.
Header
List 1 (영상 목록 타입)
List 2 (게시물 타입)
Bottom 고정메뉴
크게 나눠본 각 영역들 역시 프레임으로 만들어주시는 것이 좋습니다.
그 이유는 다음과 같습니다.
해상도에 따라 설정한 Spacing을 유지하면서 사용 가능 (Auto layout)
각 영역 모두 각자의 독립성을 갖고 있는 컨텐츠 영역인 점 (개별 관리 가능)
스크린 타입에 따라 필요한 컴포넌트 베리언츠 제작의 편의성 고려
이렇게 크게 3가지로 꼽아볼 수 있습니다.
현재는 큰 덩어리로 살펴보았는데요. 각 영역 안에 포함되어 있는 에셋들 역시도 필요에 따라 프레임으로 제작이 가능합니다.
이것저것 다 모르겠다면...?!
Design 을 위한 것이 아니라면 컨텐츠가 담기는 각 영역은 모두 프레임으로 구성한다- 로 생각하시면 됩니다. 특히나 빈번한 수정이 발생하는 소프트웨어 설계, 디자인 과정에서는 그룹 구성을 하시는 것보다
프레임 구성으로 만드셔야 사후 관리가 용이해진답니다. :)
#피그마 #피그마강의 #스토리보드 #프레임 #웹기획 #웹기획학원 #피엠강의
