[태그:] Constraints

  • 피그마 Constraints

    피그마 Constraints

    제약 조건(constraints)을 적용하여 레이어 크기 조정 방법 정의

    제약 조건은 프레임 크기를 조정할 때 개체가 어떻게 반응해야 하는지 Figma에 알려준다. 이를 통해 다양한 화면 크기와 장치에서 디자인이 어떻게 보이는지 제어할 수 있다.

    아래 비디오를 확인하거나 계속해서 더 자세히 알아볼 수 있다.

    수평(horizontal) 및 수직(vertical) 제약

    x(수평) 및 y(수직) 축 모두를 따라 제약 조건을 적용할 수 있다.

    Note: 기본적으로 객체의 Constraints를 Top 및 Left로 설정합니다.

    수평(horizontal) 제약

    수평 제약 조건은 x축을 따라 프레임 크기를 조정할 때 개체가 동작하는 방식을 정의한다.

    • 왼쪽(Left)은 프레임의 왼쪽을 기준으로 개체의 위치를 ​​유지한다.
    • 오른쪽(Right)은 프레임의 오른쪽을 기준으로 개체의 위치를 ​​유지한다.
    • 왼쪽과 오른쪽(Left and right)은 프레임의 양쪽을 기준으로 개체의 크기와 위치를 유지하며, 이로 인해 크기가 조정될 때 개체가 x축을 따라 커지거나 줄어들 수 있다.
    • 센터(Center)는  프레임의 수평 가운데를 기준으로 한 객체의 위치를 유지한다.
    • 배율(Scale)은 개체의 크기와 위치를 프레임 치수의 백분율로 정의한다. 그런 다음 크기를 조정할 때 해당 비율을 유지한다. 

    예: 프레임의 너비는 100px이고 개체의 너비는 70px이다. 즉 개체가 상위 프레임의 70%를 차지한다. 프레임의 크기를 200픽셀로 조정하면 Figma는 개체의 너비를 200픽셀의 70%인 140픽셀로 조정한다.

    수직(vertical) 제약

    수직 제약 조건은 y축을 따라 프레임 크기를 조정할 때 개체가 동작하는 방식을 정의한다.

    • 상단(Top)은 프레임 상단을 기준으로 개체의 위치를 ​​유지한다.
    • 하단(Bottom)  은 프레임 하단을 기준으로 개체의 위치를 ​​유지한다.
    • 위쪽 및 아래쪽(Top and bottom)  은 프레임의 위쪽 및 아래쪽을 기준으로 개체의 크기와 위치를 유지한다. 이로 인해 크기가 조정될 때 객체가 y축을 따라 커지거나 줄어들 수 있다.
    • 센터(Center)는  프레임의 수직 중심을 기준으로 한 객체의 위치를 유지한다.
    • 배율(Scale)  은 개체의 크기와 위치를 프레임 치수의 백분율로 정의한다. 그런 다음 크기를 조정할 때 해당 비율을 유지한다.

    Note: 개체의 위치에 따라 둘 이상의 제약 조건이 동일한 결과를 얻을 수 있다.

    개체에 제약 조건 적용

    Frame 내의 모든 객체에 제약 조건(Constraints)을 적용할 수 있다. 

    • 다른 프레임 내에 중첩된 프레임에 제약 조건을 적용할 수도 있다.
    • 객체에 수평 및 수직 구속조건을 모두 적용할 수 있다.
    • 제약 조건을 사용하여 스크롤링 프로토타입에서 객체가 응답하는 방식을 정의할 수 있다. Figma의 프로토타이핑에 대해 자세히 알아보자.
    • 그룹(Group)에는 제약 조건을 적용할 수 없다. 그룹은 그 안에 포함된 객체로부터 경계를 상속한다. 경계가 있는 단일 개체로 간주되지 않는다. 

    Note: 그룹에 제약 조건을 적용하면 대신 개별 개체에 제약 조건을 적용한다.

    항목에 대한 제약을 설정하려면 다음을 수행한다.

    1. 프레임 내에서 개체 또는 부모를 선택한다. 캔버스의 파란색 점선은 현재 적용된 제약 조건을 보여준다.
    2. 속성 패널의 제약 조건 설정에서 수직 및 수평 제약 조건을 조정한다.
      • 드롭다운 메뉴를 사용하여 개체의 제약 조건을 설정한다.
      • 또는 대화형 다이어그램의 선을 클릭하여 제약 조건을 선택한다.
    3. 스크롤할 때에도 개체가 동일한 위치에 유지되도록 하려면 스크롤할 때 위치 고정(Fix position when scrolling) 옆에 있는 확인란을 선택한다.

    Tip! 누른 상태에서 Shift하나 이상의 제약 조건을 선택한다. 예: 왼쪽 및 오른쪽 제약 조건.

    제약 조건 무시

    적용되는 제약 조건을 사용하지 않고 프레임이나 레이어의 크기를 조정하려는 경우가 있다. 수정자 키를 누르고 있으면 레이어에 적용된 제약 조건을 일시적으로 무시할 수 있다.

    • MacOS: ⌘ Command  크기 조정 시 길게 누르기
    • Windows: Ctrl  크기를 조정할 때 길게 누르기

    제약 조건 및 레이아웃 그리드

    제약 조건은 프레임 내에서 레이어를 배치하기 위한 기본 프레임워크를 제공한다. 보다 복잡한 디자인의 경우보다 정밀한 제어와 유연성이 필요하다. 이렇게 하면 크기가 조정될 때 디자인이 작동한다.

    여기에서 그리드가 작동한다. 프레임 내에서 그리드를 사용하면 Figma는 프레임 내의 모든 레이어를 해당 그리드에 정렬한다. 제약 조건 및 레이아웃 그리드 작업 →

    출처 : Figma Constraints
  • 피그마 Frame

    피그마 Frame

    Figma에서는 Canvas에 직접 레이어를 추가할 수 있다. 특정 장치 또는 화면 크기에 맞게 디자인하는 경우 디자인에 대한 컨테이너를 만들 수 있다. 프레임이 들어오는 곳이다.

    이전에 디자인 도구를 사용해 본 적이 있다면 대지(artboard)에 익숙할 것이다. 아트보드와 마찬가지로 프레임을 사용하면 디자인을 만들 캔버스 영역을 선택할 수 있다.

    기존 아트보드와 달리 다른 프레임 내에 프레임을 중첩(nest) 할 수도 있다. 이를 통해 함께 작동하는 보다 복잡한 디자인을 만들 수 있다.

    프레임은 또한 레이아웃 그리드(Layout Grid) , 자동 레이아웃(Auto Layout) , 제약 조건(Constraints) 및 프로토타이핑(Prototyping)과 같은 추가 기능에 대한 액세스를 제공한다.

    Frame 만들기

    프레임 도구를 사용하여 캔버스에 프레임을 만든다. 프레임 도구를 선택하는 몇 가지 방법이 있다.

    • 키보드 단축키를 [keybt]F[/keybt] 또는 [keybt]A[/keybt] 사용
    • 도구 모음의 프레임(#) 도구 선택
    Figure 1-1. 프레임 도구 선택

    그런 다음 캔버스에서 다양한 프레임 크기를 만들 수 있다.

    • 캔버스를 클릭하여 100 x 100 치수의 기본 프레임을 만든다.
    • 캔버스를 클릭하고 드래그하여 사용자 정의 치수가 있는 프레임을 만든다.
    • 오른쪽 사이드바의 드롭 다운을 사용하여 프레임 사전 설정값을 선택한다.
      1. 인기 있는 Device 및 Asset 템플릿에 대한 사전 설정 선택:
        • Phone
        • Tablet
        • Desktop
        • Watch
        • Paper
        • Social Media
        • Figma Community
      2. 화살표를 클릭하여 섹션을 확장하고 목록에서 사전 설정값을 선택한다.

    레이어 패널에서 프레임(#)을 식별한다.

    Figure 1-2. 선택 도구

    Tip! 단일 레이어이든 선택한 레이어이든 상관없이 기존 개체 주위에 프레임을 만들 수도 있다. 프레임 선택 키보드 단축키 사용:

    맥 : [keybt]⌥ Option[/keybt] + [keybt]⌘ Command[/keybt] + [keybt]G[/keybt]
    윈도우 : [keybt]Ctrl[/keybt] + [keybt]Alt[/keybt] + [keybt]G[/keybt]

    Frame 속성

    프레임은 다음 속성을 지원한다.

    • Corner Radius : 부드러운 가장자리를 만들기 위해 프레임의 모서리를 둥글게 만든다.
    • Clip Content : 프레임 경계를 넘어 확장되는 프레임 내의 모든 개체를 숨긴다.
    • Layout Grids : 디자인의 시각적 구조에 도움이 되는 지침(guidelines)을 만든다.
    • Auto Layout :  내용에 반응하는 동적 프레임(Dynamic Frames) 만든다.
    • Fill : 단색 채우기, 그라디언트, 이미지 (PNG, JPEG, GIF, TIFF 및 WEBP)를 프레임에 적용한다.  
    • Stroke : 테두리 또는 윤곽선을 만들기 위해 프레임에 strokes(획)을 추가한다.
    • Effects : 프레임에 shadow 또는 blurs 효과 추가

    추가 기능

    프레임을 사용하면 Figma의 추가 기능에 액세스할 수 있다. 다음 기능을 사용하려면 프레임을 사용해야 한다.

    • Layout Grids : 시각적 구조를 제공하기 위해 프레임에 투명한 그리드(transparent grids), 열(columns) 또는 행(rows)을 적용한다.
    • Constraints(제약 조건) : 프레임 크기를 조정할 때 자식 개체가 어떻게 반응하는지 정의한다. 프레임 내의 개체에 제약 조건(Constraints)을 적용한다.  
    • Auto Layout : 프레임에 자동 레이아웃을 추가하여 내용에 반응하는 동적 레이아웃을 생성한다.
    • Prototyping : Canvas의 프레임 사이를 이동하는 대화형 프로토타입을 만든다.

    Frame은 부모(parent) 개체이다. 이것은 당신이 그 안에 배치하는 모든 자식(child) 개체를 제어하거나 영향을 줄 수 있음을 의미한다.

    Figma의 부모/자식 관계에 대해 자세히 알아보기 →

    프레임 속성 조정

    과거에는 프레임을 선택했을 때 자식 개체의 속성을 조정할 수 있었다. 이제 프레임 자체의 속성을 조정할 수 있다.

    • 키보드 단축키 [keybt]Enter[/keybt] 또는 [keybt]Return[/keybt]를 사용하여 하위 개체를 선택한다.
    • [keybt]Tab[/keybt] 키를 눌러 다음 형제를 선택할 수 있다.
    • [keybt]Shift[/keybt] + [keybt]Tab[/keybt] 키를 눌러 이전 형제를 선택한다.
    • [keybt]Shift[/keybt] + [keybt]Enter[/keybt] 키로 상위 부모를 선택한다.

    다른 Frame 내에 Frame 중첩

    Figma에서는 다른 프레임 내에 프레임을 생성할 수 있다. 우리는 이 과정을 중첩(process nesting)이라고 부른다. 이를 통해 다양한 속성을 가진 프레임을 결합하여 복잡한 인터페이스를 구축할 수 있다.

    그러면 새로운 계층(hierarchies) 또는 관계(relationships)가 생성된다.

    • 최상위 프레임(Top-level frames) : 캔버스에 직접 있는 모든 프레임은 최상위 프레임이 되도록 다른 Frame, Group 또는 Object 내에 중첩할 수 없다.
    • 중첩 프레임(Nested frame) : 다른 프레임 내에 배치되는 모든 프레임은 최상위 프레임 또는 다른 중첩 프레임 내에 프레임을 배치할 수 있다. 중첩 프레임은 부모와 자식 모두이다.
    • 자식(Children) : 프레임 내에 있는 모든 개체.

    부모(parent), 자녀(child) 및 형제자매(sibling) 관계에 대해 자세히 알 수 있다.

    최상위 프레임(Top-level frames)

    Figma는 레이어 패널에서 최상위 프레임을 굵게 표시하고 캔버스에 모든 최상위 프레임의 이름을 표시한다.  

    Figure 1-3. 최상위 프레임 표시

    중첩 프레임(Nested frames)

    중첩 프레임은 다른 프레임이나 개체 내에 배치하는 프레임이다. 이것은 그들을 부모와 자녀로 만든다. 다음 위치에 프레임을 배치할 수 있다.

    • 최상위 프레임 / Top-level frames
    • 기타 중첩 프레임 / Other nested frames
    • 그룹으로 / In groups

    아래 예에서 각 요소는 자체 프레임으로 만들었다. 상단에는 상태 표시줄(status bar)이 있고 하단에는 탐색 메뉴(navigation menu)가 있다. 또한 예정된 티켓(Upcoming Tickets)에 대한 세부 정보가 포함된 카드도 있다.

    장치(device) 사전 설정 중 하나를 사용하여 요소에 대한 최상위 프레임을 만들 수 있다. 모바일 앱에서 단일 화면을 만들기 위해 최상위 프레임에 요소를 추가할 수 있다.

    Figure 1-4. 최상위 프레임 내에 다른 요소를 포함

    Frame 크기 조정

    프레임의 크기 또는 배율 변경을 포함하여 캔버스의 다른 개체와 마찬가지로 프레임과 상호 작용할 수 있다. 프레임의 크기를 변경하는 몇 가지 방법이 있다.

    프레임 드래그

    드래그하여 수동으로 프레임 크기를 조정한다.

    1. 캔버스에서 프레임을 선택하거나 왼쪽 사이드바에서 레이어 패널을 선택한다.
    2. 모서리 중 하나의 핸들을 클릭하고 드래그하여 크기를 조정한다. 또는 가장자리 중 하나를 클릭하고 리사이징한다.

    Tip! 하위 개체에 대한 모든 제약 조건(Constraints)을 무시하려면 수정자 키를 누르고 있는다.

    맥: [keybt]⌘ Command[/keybt]
    윈도우: [keybt]Ctrl[/keybt]

    프레임 사전 설정 변경

    프레임 크기를 변경하려면 다른 프레임 사전 설정을 선택해 보자. 

    1. 프레임을 선택한다.
    2. 오른쪽 사이드바의 속성 패널에서 프레임 필드를 선택한다.
    3. 목록에서 사전 설정을 선택한다. 
    4. 인기 있는 Device 및 Asset 템플릿에 대한 사전 설정 선택:
      • Phone
      • Tablet
      • Desktop
      • Watch
      • Paper
      • Social Media
      • Figma Community
    5. Figma는 사전 설정과 일치하도록 프레임의 치수를 업데이트한다.

    Note: 하위 개체에 제약 조건(Constraints)을 적용한 경우 Figma는 새 프레임 사전 설정과 일치하도록 크기를 조정한다. 그렇지 않으면 프레임 내부의 개체가 원래 치수와 위치를 유지한다.

    속성 패널

    오른쪽 사이드바의 속성 패널을 사용하여 프레임의 너비 와 높이를 업데이트한다.

    W  및  H 필드 에 새 숫자를 입력  하거나 아이콘 위로 마우스를 가져가서 필드를 스크러빙한다. 감소하려면 왼쪽으로, 증가하려면 오른쪽으로 끓는다.

    Width 및 Height 옆에 있는 링크 버튼을 토글 하여 현재 비율로 크기 조정을 제한한다.  

    Figure 1-5. 프레임 사이즈 사용자화

    Tip! 가로/세로 사이즈 필드를 사용하여 계산을 수행할 수 있다. 이를 통해 개체의 크기를 빠르게 조정하거나 크기를 조정할 수 있다.

    • % 비율(예: 50%)
    • + 추가 예: +100
    • – 빼기(예: -20)
    • * 곱하기(예: *4)
    • / 나누기(예: /8)

    너비나 높이에 백분율을 곱하는 것은 불가능하다. *50%는 50%가 아닌 원래 값의 50배가 된다.

    딱 맞게 크기 조정

    프레임의 크기를 조정하여 자식 개체에 맞게 축소하거나 확대할 수 있다. 이렇게 하면 프레임 안에 있는 개체의 가장 바깥쪽 경계 주위에 프레임이 다시 그려진다.

    • 키보드 단축키 사용:
      • 맥: [keybt]⌥ Option[/keybt] + [keybt]Shift[/keybt] + [keybt]⌘ Command[/keybt] + [keybt]R[/keybt]
      • 윈도우:
    • 속성 패널의 오른쪽 상단 모서리에 있는 파란색 점선 안의 아이콘을 클릭한다.
    Figure 1-6. 프레임 크기를 개체에 딱 맞게 최적화
    출처 : Frames in Figma