[태그:] Button

  • 버튼 디자인 기본 원칙

    버튼 디자인 기본 원칙

    아래 내용은 버튼의 기본 원칙을 중심으로 주의해야 하는 내용을 중심으로 나열하였다. 디자이너가 버튼의 용도나 레이아웃에 필요한 위치에 효과적으로 적용할 수 있도록 다양한 방법을 알아보자.

    Button : “submit”, “merge”, “create new”, “upload” 등과 같은 작업을 수행할 때 사용된다.
    Link : 페이지 “view all”, “Roger Wright” 프로필 등과 같은 다른 장소로 이동할 때 사용된다.
    Anchor : 페이지 내에서 원하는 위치로 이동하는 방법을 제공한다.(예, 목차)

    버튼의 상태(states)

    버튼에 대한 올바른 상호 작용과 스타일을 만드는 것은 프로세스에서 가장 중요한 부분 중 하나이다. 각 상태에는 다른 상태 및 주변 레이아웃과 구별되는 명확한 어포던스(Affordance)가 있어야 하지만 구성 요소를 크게 변경하거나 많은 시각적 노이즈를 생성해서는 안 된다.

    버튼에 알아볼 수 있는 디자인 사용

    사용자 인터페이스와 상호 작용할 때 사용자는 클릭할 수 있는 것과 클릭할 수 없는 것을 즉시 알아야 한다.

    디자인은 우선순위와 관련되어야 한다.

    버튼의 크기는 우선 순위를 반영해야 한다. 우선 순위가 더 높은 버튼에 더 큰 크기를 할당한다.

    버튼 구조 이해

    기본 구조 요소 : Text label, Border, Background, Icon
    보조 요소 : Border radius, Padding, Gutter, Effects

    색상 심리 적용

    색상은 버튼의 용도와 상대적 중요성을 나타내는 효과적인 도구이다.
    우선 순위가 높은 버튼을 강조 표시하려면 배경과 대조되는 색상을 사용한다.

    사용자가 찾을 것으로 예상되는 위치에 배치

    버튼은 사용자가 쉽게 찾을 수 있거나 볼 것으로 예상되는 위치에 있어야 한다.
    사용자가 버튼을 찾도록 유도 하지 말아야 한다.

    Tip : 항상 접힌 부분 위에 버튼을 놓는다.

    각 버튼의 기능을 명확하게 표시

    일반적이거나 오해의 소지가 있는 레이블이 있는 버튼은 사용자에게 큰 불만의 원인이 될 수 있다.

    스마트폰용 손가락 친화적인 버튼 만들기

    MIT Touch Lab* 연구에 따르면 손가락 패드의 평균은 10-14mm이고 손가락 끝은 8-10mm이다.
    이것은 10mm x 10mm가 적절한 최소 터치 대상 크기가 되도록 한다.

    버튼을 적절하게 간격두기

    이러한 크기는 사용자로부터 더 빠르고 정확한 반응을 이끌어낸다.

  • 피그마 Variants

    피그마 Variants

    구성 요소(Component)를 만들고 설계 시스템을 구축할 때 약간의 차이점만 제외하고 서로 유사한 구성 요소가 필요하다는 것을 알게 될 것이다.

    예를 들어 버튼에 대해 여러 구성 요소가 있을 수 있으며 다양한 상태 및 크기와 밝은 모드 및 어두운 모드에 대한 별도의 구성 요소가 있을 수 있다.

    변형(Variants)을 사용하면 유사한 구성 요소를 단일 컨테이너로 그룹화하고 구성할 수 있다. 이렇게 하면 구성 요소 라이브러리가 단순화되고 모든 사람이 필요한 것을 더 쉽게 찾을 수 있다.

    변형의 속성과 값을 사용자 지정하여 디자인 시스템에서 추측을 없애고 구성 요소를 프런트 엔드 코드(front-end code)에 더 가깝게 만든다.

    Note: 변형을 사용하여 다른 아이콘을 그룹화하지 않는 것이 좋다. 동일한 아이콘의 크기가 다른 경우 대신 변형으로 결합할 수 있다.

    속성(properties) 및 값(values)

    속성 및 해당 값을 사용하여 변형의 속성을 정의할 수 있다. 

    속성과 값을 필요한 만큼 추가하고 디자인 시스템에 맞게 사용자 지정할 수 있다. 속성과 값을 디자인 시스템의 코드 구성 요소에 매핑할 수도 있다.

    • 속성(Properties)은 구성 요소의 가변적인 측면이다. 예를 들어 버튼 구성 요소의 속성은 type, size, state, 또는 icon.
    • 값(Values)은 각 속성에 사용할 수 있는 다양한 옵션이다. 예를 들어 state 속성은 default, hover, pressed 및 disabled 값을 가질 수 있다.

    구성 요소 세트 내의 모든 변형은 동일한 속성과 값을 사용하지만 각 변형은 고유한 조합이어야 한다. 속성과 값의 가능한 모든 조합에 대해 구성 요소가 필요하지 않다.

    액션(action)에서 속성과 값

    예제를 살펴보자! 24개의 고유한 변형(Variants)이 있는 버튼 구성 요소가 있다. 아래 이미지는 단일 구성 요소 세트 내의 이 구성 요소에 대한 모든 변형을 보여준다.

    Button_variants_dark.png

    버튼 구성 요소 집합에는 각각 고유한 값 집합이 있는 네 가지 속성이 있다.

    • 기본(Primary) 및 보조(Secondary) 값이 있는 유형(Type) 속성이다 .
    • Large 및 Small 값 이 있는 Size 속성이다.
    • Default , Pressed 및 Inactive 값이 있는 상태(State) 속성이다.
    • 아이콘(Icon) 속성에는 True 및 False 값이 있다.

    Figma는 이러한 속성과 값을 사용하여 구성 요소 집합에서 필요한 변형을 결정한다. 아래 이미지에서 구성 요소 집합의 인스턴스를 만들고 다음 값을 구성했다.

    • Type: Primary(기본)
    • Size: Large
    • State: Default(기본값)
    • Icon: False (or off)
    https://help.figma.com/hc/article_attachments/360092476153/Button_variant.png

    레이어 이름(Layer names) 및 구문(syntax)

    레이어 이름 지정은 변형(variants) 생성 및 관리의 중요한 측면이다. 대부분 임의적일 수 있는 Figma의 다른 레이어 이름과 달리 구성 요소 집합의 변형(variants) 이름에는 매우 구체적인 구문이 있다.

    여기에는 해당 변형(variants)의 속성 및 값에 대한 정보가 포함된다. 레이어 패널에서 변형의 이름을 바꾸려고 할 때만 이 구문을 볼 수 있다.

    변형(variants) 이름은 다음 구조를 따른다. Property1=value, Property2=value, Property3=value

    Double-clicking_on_the_variant_name_in_the_layers_panel_allows_you_to_edit_the_name_and_see_the_layer_syntax.png

    구성 요소(components)를 변형(variants)으로 결합

    Caution: 변형(variants)이 있는 인스턴스를 파일에 추가하면 Figma는 해당 구성 요소 세트의 모든 변형을 가져온다. 큰 구성 요소 세트를 가져오면 Figma의 속도와 성능에 영향을 준다.

    Figma에 이미 구성 요소 라이브러리가 있는 경우 구성 요소를 변형으로 결합할 수 있다. 일반적인 프로세스는 다음과 같다.

    • 슬래시(/) 명명 규칙을 사용하도록 구성 요소의 이름을 바꾼다.
    • 캔버스에서 component 구성
    • component를 variants으로 결합
    • 속성에 설명적인 이름을 지정한다.

    Note: Figma는 페이지 및 프레임 이름이 아닌 변형으로 component를 결합할 때 레이어 이름만 본다. 페이지나 프레임을 사용하여 component를 구성하는 경우 변환 시 이러한 요소가 중복된다.

    여전히 페이지와 최상위 프레임을 사용하여 추가 계층 수준을 만들 수 있다. 이렇게 하면 Asset 패널과 인스턴스 메뉴에서 component를 더 잘 구성할 수 있다.

    Components 이름 바꾸기

    Figma는 슬래시 명명 시스템을 사용하여 자산(Asset) 패널 및 인스턴스 메뉴에서 component를 구성한다. component 이름의 각각 /은 또 다른 수준의 계층 구조를 만든다.

    이렇게 하면 라이브러리를 더 쉽게 탐색하거나 관련 component를 찾고 교체할 수 있다. Component의 이름 지정 및 구성 방법 알아보기 →

    Tip! 레이어 이름 바꾸기 모달을 사용하여 레이어 이름을 일괄적으로 변경할 수 있다. 일괄 레이어 이름 변경에 대해 자세히 알아보기 →

    이 이름 지정 시스템을 사용하여 기존 component를 variants으로 변환할 수도 있다. 정확하게 변환하려면 component 이름이 다음 구조를 따라야 한다.

    componentName/property1value/property2value/property3value

    • 첫 번째 앞의 텍스트 /는 component 집합의 이름이 된다.
    • Figma는 / component 이름에서 다른 모든 속성에 대해 새 속성을 생성한 다음 속성을 값으로 추가한다.
    • 네이밍 시스템에서 접미사를 사용한 경우 구성 요소의 이름에 접미사를 추가하고 /로 구분해야 한다.

    Caution: 값이 동일한 속성과 일치하도록 하려면 결합하는 모든 component에 동일한 수의 슬래시가 있어야 한다.

    이름이 있는 버튼 구성 요소 Button/Primary/Large/Default/False에는 다음과 같은 속성과 값이 있다.

    Component set name: Button
    Variant: Primary
    Property 2: Large
    Property 3: Default
    Property 4: False

    아래 이미지에서 나머지 component 이름(왼쪽)이 어떻게 variants 값(오른쪽)으로 변환되는지 확인할 수 있다.

    Slash_naming_convention.png

    Note: Component sets에는 components만 포함될 수 있으므로 텍스트 또는 주석을 추가하거나 프레임을 중첩하거나 component sets 내에서 variants의 하위 집합을 그룹화하는 것은 불가능하다.

    Component를 variants으로 결합할 때 Figma는 기존 레이아웃과 간격을 component sets 내부의 variants에 적용한다. Component를 변환하기 전에 구성하는 것이 좋다. 그래야 나중에 다시 정렬할 필요가 없다.

    특정 components에 대한 variants가 많은 경우 components를 행, 열 또는 그리드로 구성할 수 있다.

    이렇게 하면 디자인 시스템을 사용하는 모든 사람에게 다차원적 특성을 전달하는 데 도움이 된다. Component sets 옆에 텍스트 레이어를 추가하여 관련 속성 및 값에 주석을 추가할 수도 있다.

    아래 예에서는 버튼 variants을 그리드에 정렬했다. 또한 속성 값에 해당하는 텍스트 레이어를 캔버스에 추가했다.

    Organize_components.png

    Tip! 기본적으로 component sets에는 점선 보라색 획이 있고 채우기는 없다. 브랜드 또는 디자인 시스템에 더 잘 맞도록 components 집합의 채우기 및 획 속성을 조정할 수 있다.

    변형(variants)으로 결합

    1. 결합할 component를 선택한다. 레이어 및 개체 선택 방법 알아보기 →
    2. 오른쪽 사이드바에서 Combine as Variants 버튼을 클릭한다.
    3. Figma는 모든 component를 단일 component sets에 추가한다.
    A_bunch_of_components_are_selected_in_the_canvas_and_the_cursor_is_hovering_over_the_combine_as_variants_button_in_the_right_sidebae.png

    속성을 설명하는 이름 지정

    변환 프로세스의 일부로 Figma는 일반 속성을 만들고 component 이름에 값으로 추가한 속성을 추가한다.

    Figma는 속성의 이름을 모르기 때문에 첫 번째 속성의 이름을 지정한 다음 , , 등 Variant으로 순차적으로 번호를 지정한다 . Property 2 Property 3

    이러한 속성의 이름을 더 설명적인 것으로 변경해야 한다.

    1. component sets을 선택한다.
    2. 오른쪽 사이드바의 Variants 섹션에서 현재 속성을 본다.
    3. 속성 위로 마우스를 가져가면 주변에 회색 상자가 나타난다.
    4. 속성을 편집하고 더 설명적인 이름을 지정하려면 클릭한다.
    5. 적용하려면 속성 외부를 클릭하라.
    6. 나머지 속성에 대해 반복한다.
    The_component_set_is_selected_in_the_canvas_and_the_cursor_is_hovering_over_the_editable_text_field_for_first_property_in_the_variants_section.png

    Note: Figma는 일반 component와 동일한 방식으로 component sets을 처리한다. 설명과 문서 링크를 추가할 수 있다. Assets 패널에서 캔버스로 드래그하고 인스턴스 간에 교체할 ​​수도 있다.

    새 변형(variants) 만들기

    Note: Figma는 component sets라는 단일 컨테이너에 변형을 배치한다. component sets에는 component만 포함될 수 있다. 도구 모음에서 component 만들기를 클릭 하거나 키보드 단축키를 사용하여 선택 항목을 component로 바꾼다.

    • 맥: ⌥ Option + ⌘ Command + K
    • 윈도우: Ctrl + Alt + K

    Components 생성 방법 알아보기 →

    1. component 선택
    2. 슬래시 네이밍 규칙을 사용하도록 component의 이름을 바꾼다(권장).
    3. 오른쪽 사이드바에서 Variants 섹션에서 ‘+’ 클릭하여 첫 번째 변형을 추가한다.
    4. Figma는 다음과 같은 몇 가지 작업을 수행한다.
      • 동일한 속성을 가진 동일한 component 만들기
      • 두 component를 component sets에 variants으로 추가
      • 슬래시 네이밍 규칙을 사용한 경우 / 앞의 텍스트는 component sets의 이름이 되고 뒤의 속성은 값으로 사용된다.
    5. 필요에 따라 variants을 시각적으로 변경한다.

    Tip! 기본적으로 component sets에는 점선 보라색 획이 있고 채우기는 없다. 브랜드 또는 스타일 가이드에 더 적합하도록 component sets의 채우기 및 획 속성을 조정할 수 있다.

    속성 및 값 추가

    변형(variants)을 처음 생성할 때 또는 디자인 시스템이 발전함에 따라 속성과 값을 variants에 추가한다.

    component set에 속성을 추가한다.

    1. component set을 선택한다.
    2. 오른쪽 사이드바 변형 섹션에서 ‘⋯’ 클릭
    3. 새 속성 추가를 선택 한다.

    변형을 선택한 경우에만 값을 추가할 수 있다. 이를 수행하는 몇 가지 방법이 있다.

    • 현재 값 옆에 있는 ‘˅’ 클릭하여 옵션에서 새로 추가를 선택한다.
    • 값 필드를 클릭하고 새 값을 입력한다.
    • 레이어 패널에서 변형을 두 번 클릭하고 원하는 속성 값을 업데이트한다.

    Tip! 두 가지 가능한 옵션만 있는 속성이 있는 경우 Figma는 이를 이진 선택 또는 부울 값으로 간주하고 해당 속성을 토글 스위치로 나타낼 수 있다. Figma는 및 둘 다 부울 값으로  true/false on/off 인식한다.

    충돌하는 값 오류 수정 component set 내의 모든 variants은 동일한 속성과 값을 사용하지만 각 variants은 고유한 조합이어야 한다.

    변형이 정확히 동일한 값 조합을 갖는 경우 Figma는 충돌이 있음을 알려준다. 변형 자체가 시각적으로 다른 경우에도 이 오류가 표시된다.

    이 문제를 해결하려면 영향을 받는 변형의 값을 추가하거나 업데이트하여 고유한 값 조합을 갖도록 해야 한다.

    Component set에 더 많은 variants 추가

    다음 방법 중 하나를 사용하여 component set에 변형을 계속 추가한다.

    • component set 내부의 캔버스를 클릭한다. 두 개 이상의 변형이 있는 경우에만 이 옵션이 표시된다.
    • 오른쪽 사이드바의 variants 섹션을 클릭하고 새 변형 추가를 선택한다.
    • 키보드 단축키를 사용하여 기존 변형 복제:
      • 맥 : [keybt]⌘ Command[/keybt] + [keybt]D[/keybt]
      • 윈도우 : [keybt]Ctrl[/keybt] + [keybt]D[/keybt]
    • 다른 component를 component set로 끌어서 변형으로 추가한다.

    Tip! 다른 component를 드래그하면 기존 변형이 리플로우되지 않는다. 스마트 선택을 사용하여 변형의 레이아웃을 조정할 수 있다. 스마트 선택에 대해 자세히 알아보기 →

    Caution: 변형이 있는 인스턴스를 파일에 추가하면 Figma는 해당 component set의 모든 변형을 가져온다. 큰 component set를 가져오면 Figma의 속도와 성능에 영향을 미친다.

    Variants 관리

    Variants 구성

    Component에 새 변형을 추가할 때 Figma의 기본 동작은 동일한 간격으로 단일 열에 변형을 추가하는 것이다.

    Component를 변환하기 전에 다른 레이아웃에 있는 경우 Figma는 component set에 대해 동일한 레이아웃을 유지한다.

    Figma의 기본 동작을 무시하고 원하는 방식으로 변형을 정렬할 수 있다.

    • 변형을 선택하고 component set 내의 새 좌표로 이동한다. Figma를 사용하면 다른 변형의 상단을 포함하여 component set 내의 아무 곳에나 변형을 배치할 수 있다.
    • 오른쪽 사이드바에서 component set의 크기를 조정하거나 일반 프레임처럼 캔버스에서 크기를 조정한다.
    • 모든 변형을 선택한 경우: 오른쪽 사이드바의 필드를 사용하여 변형 사이의 수평 및 수직의 공간을 조정한다.

    Note: Figma는 왼쪽 상단 모서리에 있는 variant을 기본 variant으로 사용한다. 이 variant은 Assets 패널의 전체 component set을 나타낸다.

    속성 및 값 이름 바꾸기

    속성 또는 값의 이름을 바꾸려면 component set을 선택하고 오른쪽 사이드바의 Variant 섹션에서 속성 또는 값을 업데이트해야 한다.

    속성 이름을 바꾸려면 다음을 수행한다.

    1. 속성을 클릭하고 더 설명적인 이름을 입력한다.
    2. Enter / Return 키를 눌러 적용하거나 속성 외부를 클릭하여 적용한다.
    3. 나머지 속성에 대해 반복한다.

    값의 이름을 바꾸려면 다음을 수행한다.

    1. 값을 두 번 클릭하고 새 이름을 입력한다.
    2. Enter/ Return 키를 눌러 적용한다.
    With_the_component_set_selected_click_the_property_or_double-click_on_the_value_in_the_right_sidebar_to_edit_it.png

    Note: 기존 component를 variant로 변환한 경우 속성 이름을 변경하여 속성을 더 자세히 설명해야 한다.

    손상된 변형 오류 수정 이 구문을 따르지 않는 변형이 있으면 손상된 변형 오류가 발생한다. 이는 속성 또는 값을 잘못 입력하거나 기존 component를 변환할 때 잘못된 네이밍 구조를 사용하는 경우 발생할 수 있다.

    이 문제를 해결하려면 변형의 속성과 값의 이름을 바꿔야 한다. 레이어 이름에 이 구문을 사용하여 이름을 바꿀 수 있지만 대신 오른쪽 사이드바에서 속성과 값의 이름을 바꾸는 것이 좋다.

    속성 및 값 재정렬

    속성과 값이 오른쪽 사이드바에 나타나는 순서를 변경할 수 있다. 속성을 재정렬하면 Figma는 일치하도록 변형의 이름과 구문을 조정한다.

    속성을 재정렬하려면 다음을 수행한다.

    1. 구성 요소 집합을 선택한다.
    2. 변형 섹션 에서 속성 필드의 왼쪽 가장자리 위로 마우스를 가져갈 때까지 ‘=’ 나타난다.
    3. 속성을 클릭하고 위나 아래로 끌어 순서를 변경한다.

    값을 재정렬하려면 다음을 수행한다.

    1. 값을 길게 클릭한다.
    2. 값으로 끌어서 새 순서로 만든다.
    3. 적용하려면 릴리스 한다.

    속성 제거

    속성을 제거하려면:

    1. 구성 요소 집합을 선택한다.
    2. 사이드바 의 변형 섹션 에서 속성 위로 마우스를 가져간다 .
    3. ‘-‘를 클릭하여 제거한다.

    Note: Figma는 현재 변형에 적용된 값만 유지한다. 값을 사용하는 변형이 없는지 확인하여 값을 제거할 수 있다.

    라이브러리에 Component sets 게시

    전문 또는 교육 팀 또는 Figma 조직의 구성원인 경우 변형을 공동 작업자와 공유할 수 있다.

    팀이나 조직의 구성원이 사용할 수 있도록 스타일 및 일반 구성 요소와 함께 구성 요소 집합을 게시한다.

    구성 요소 세트는 다른 구성 요소와 함께 자산 패널에 나타난다. Figma는 구성 요소 세트의 왼쪽 상단 모서리에 있는 변형을 기본 변형으로 사용한다.

    그런 다음 공동 작업자는 구성 요소 세트를 파일로 끌어서 인스턴스를 생성할 수 있다. 그런 다음 오른쪽 사이드바에서 속성 값을 구성하여 구성 요소 집합의 다른 모든 변형에 액세스할 수 있다.

    라이브러리 게시 방법 알아보기 →

    Note: 당신은 Figma 조직의 회원이라면, 설계 시스템 분석을 통해 조직 구성원이 구성 요소 및 변형을 사용하는 방법을 확인할 수 있다. 구성 요소 및 변형 사용을 추적하는 방법 알아보기 →

    변형(variants) 사용

    Component sets는 일반 구성 요소와 함께 자산 패널에 나타난다. 따라서 자산 패널에서 특정 변형을 찾는 대신 구성 요소 집합만 선택하면 된다.

    캔버스에 해당 구성 요소의 인스턴스가 설정되면 인스턴스의 속성 값을 구성하여 변형(variant)을 선택할 수 있다.

    구성 요소 세트(component sets) 선택

    1. 왼쪽 사이드바에서 자산 탭을 클릭 하거나 키보드 단축키를 사용한다.
      • 맥 :

    오른쪽 사이드바에서 속성과 값을 구성하여 구성 요소 집합에서 다른 변형을 선택합니다.

    1. 인스턴스를 선택합니다.
    2. 오른쪽 사이드바에서 구성 요소의 이름을 봅니다. 구성 요소에 변형이 있는 경우 구성 요소 이름 아래에 해당 구성 요소 집합의 속성과 값을 구성하는 필드가 표시됩니다.
      • 사용 ‘⌄’ 속성 옆에 있는 원하는 값 조합을 선택합니다.
      • 다음을 사용하여 특정 속성을 껐다가 켭니다. On 그리고 Off 토글 스위치

    인스턴스(instances) 간 스왑(swap)

    일반 구성 요소와 마찬가지로 변형을 사용할 때 인스턴스 간에 교체할 ​​수 있다.

    가장 효율적인 방법은 인스턴스 메뉴 를 사용하는 것이다. 인스턴스 메뉴를 사용하면 현재 파일 또는 활성화된 팀 라이브러리에서 구성 요소 교체를 찾을 수 있다.

    구성 요소를 선택한 경우 오른쪽 사이드바의 속성 패널에서 인스턴스 메뉴에 액세스한다.

    1. 변경할 인스턴스를 선택한다.
    2. 오른쪽 사이드바에서 구성 요소 이름을 클릭한다.
    3. 인스턴스 메뉴를 사용하여 다른 구성 요소를 검색하고 선택한다.

    인스턴스 메뉴를 사용하여 교체하는 방법 알아보기 →

    속성 재정의(override)

    구성 요소 라이브러리는 설계 시스템의 이상적인 구현을 정의하고 개략적으로 설명한다.

    이러한 구성 요소에는 버튼 레이블과 같이 변경해야 하는 일반 정보가 포함되어 있는 경우가 많다. 일부 상황에서는 해당 특정 인스턴스의 다른 측면을 변경해야 할 수도 있다.

    재정의(Overrides)를 사용하면 인스턴스를 표면적으로 변경할 수 있다. Figma는 텍스트, 채우기, 획 및 효과 속성에 대한 재정의를 지원한다. 지원되는 재정의에 대해 자세히 알아보기 →

    보존 재정의(override)

    Figma는 다른 변형을 선택하거나 인스턴스 메뉴에서 인스턴스 간에 교체할 ​​때 재정의를 유지하려고 시도한다.

    Figma는 다음 기준을 사용하여 재정의를 유지할지 여부를 결정한다.

    • 레이어 이름은 현재 인스턴스와 선택하는 변형 또는 인스턴스 간에 일치해야 한다. 이는 인스턴스를 교체하고 변형을 선택할 때 모두 적용된다.
    • 변형을 선택할 때 Figma는 재정의한 레이어 속성이 원래 변형 간에 일치하는지 확인한다. 그렇다면 Figma는 재정의를 유지한다.

    아래 예제에서 Figma는 3단계에서 채우기 재정의를 유지하지만 4단계에서는 유지하지 않는다. 이는 default primary 버튼과 hover primary 버튼이 모두 의 동일한 채우기로 시작했기 때문이다 #1BC47D. 우리의 재정의는 16진수 코드에서  #1BC47D로 변경하는 것이었다 #F531B3.

    hover secondary 변형의 채우기가 있으므로 Figma는 4단계에서 재정의를 유지하지 않는다 #ffffff. 이는 원래 재정의를 적용한 채우기와 다르다( #1BC47D).

    Preserve_overrides.png

    Tip! 팁! Component set에서 사용할 수 있는 변형이나 원래 스타일이 확실하지 않은 경우 원본 파일에서 component set을 볼 수 있다. 인스턴스를 선택한 상태에서 ‘❖’은 오른쪽 사이드바의 구성요소 이름 옆에 있다.

    Figma 커뮤니티에서 Variants Playground 파일 탐색 →
    출처: Variants in Figma
  • 버튼 디자인을 위한 기본 규칙

    버튼 디자인을 위한 기본 규칙

    버튼은 인터랙션 디자인의 필수 요소이다. 버튼은 사용자와 시스템 간의 대화에서 주요 역할을 한다. 이 글에서는 효과적인 버튼을 만들기 위해 알아야 할 7가지 기본 원칙을 알려준다.

    1. 버튼처럼 보이게 만들기

    사용자 인터페이스와 상호 작용할 때 사용자는 ‘클릭 가능한(clickable)’ 항목과 그렇지 않은 항목을 즉시 알아야 한다. 디자인의 모든 항목을 디코딩 하려면 사용자의 노력이 필요하다. 일반적으로 사용자가 UI를 디코딩 하는 데 필요한 시간이 많을수록 사용자가 사용할 수 있는 기능이 줄어든다.

    그러나 사용자는 특정 요소가 상호 작용하는지 여부를 어떻게 이해할까? 그들은 UI 객체의 의미를 명확히 하기 위해 이전 경험과 시각적 기표를 사용한다. 그렇기 때문에 적절한 시각적 기호(크기, 모양, 색상, 그림자 등)를 사용하여 요소를 버튼처럼 보이게 만드는 것이 중요하다. 시각적 기표(Visual signifiers)는 필수적인 정보 가치를 지니고 있다. 인터페이스에서 행동 유도성(affordances)을 만드는 데 도움 이 된다.

    불행히도 많은 인터페이스에서 상호 작용의 기표는 약하고 상호 작용 노력이 필요하다. 결과적으로 검색 가능성을 효과적으로 줄인다.

    상호 작용의 명확한 어포던스가 누락되고 사용자가 “클릭 가능한” 것과 그렇지 않은 것에 대해 어려움을 겪는다면 디자인을 얼마나 멋지게 만드는지는 중요하지 않다. 그들이 사용하기 어렵다는 것을 알게 되면 좌절감을 느끼고 궁극적으로 별로 유용하지 않다는 것을 알게 될 것이기 때문이다.

    약한 기표는 모바일 사용자에게 훨씬 더 중요한 문제다. 개별 요소가 대화식인지 여부를 이해하기 위해 데스크톱 사용자는 요소에서 커서를 이동하고 커서가 상태를 변경하는지 확인할 수 있다. 모바일 사용자에게는 그러한 기회가 없다. 요소가 상호 작용하는지 여부를 이해하려면 사용자가 해당 요소를 탭 해야 한다. 상호 작용성을 확인할 수 있는 다른 방법은 없다.

    UI의 무언가가 사용자에게 명백하다고 가정하지 마십시오.

    많은 경우 디자이너는 대화형 요소가 사용자에게 명백하다고 가정하기 때문에 의도적으로 버튼을 대화형 요소로 식별하지 않는다. 인터페이스를 디자인할 때 항상 다음 규칙을 염두에 두어야 한다.

    클릭 가능성 표시를 해석하는 능력은 사용자의 디자인과 동일하지 않습니다. 디자인의 각 요소가 무엇을 하려는지 알고 있기 때문입니다.
    Your ability to interpret clickability signifiers aren’t the same as your users’ because you know what each element in your own design is intended to do.

    버튼에 친숙한 디자인 사용

    다음은 대부분의 사용자에게 친숙한 버튼의 몇 가지 예를 보여준다.

    • 사각형 테두리(square borders)가 있는 채워진 버튼
    • 둥근 모서리(rounded corners)가 있는 채워진 버튼
    • 그림자(shadows)가 있는 채워진 버튼
    • 고스트(Ghost) 버튼

    그 모든 예 중에서 “그림자로 채워진 버튼” 디자인이 사용자에게 가장 명확하다. 사용자는 물체의 차원을 볼 때 그것이 누를 수 있는 것임을 즉시 알 수 있기 때문이다.

    공백을 잊지 마세요

    시각적 속성뿐만 아니라 버튼 자체가 중요하다. 버튼 근처에 있는 공백의 양은 사용자가 이것이 대화형 요소인지 아닌지를 이해하기 쉽게(또는 더 어렵게) 만든다. 아래 예에서 일부 사용자는 고스트 버튼을 정보 상자와 혼동할 수 있기 때문이다.

    사용자는 그것이 상자인지 버튼인지 알 수 없다.

    2. 사용자가 찾을 것으로 예상되는 위치에 버튼 배치

    버튼은 사용자가 쉽게 찾을 수 있거나 볼 것으로 예상되는 위치에 있어야 한다. 사용자가 버튼을 찾도록 하지 마십시오. 사용자가 버튼을 찾을 수 없으면 버튼이 존재하는지 알 수 없다.

    가능한 한 전통적인 레이아웃과 표준 UI 패턴을 사용한다.

    기존의 버튼 배치는 검색 가능성을 높인다. 표준 레이아웃을 사용하면 사용자는 각 요소의 목적을 쉽게 이해할 수 있다. 강력한 기호가 없는 버튼이라도~. 표준 레이아웃과 깔끔한 ​​시각적 디자인 및 충분한 여백을 결합하면 레이아웃을 더 쉽게 이해할 수 있다.

    사용자와 버튼만 누르면 되는 게임을 하지 마세요.
    Don’t play hunt-the-button game with your users

    TIP : 검색 가능성에 대해 디자인을 테스트하기 바란다. 사용자가 수행하기를 원하는 몇 가지 작업이 포함된 페이지를 처음 탐색할 때 사용자에게 적절한 버튼을 쉽게 찾을 수 있어야 한다.

    3. 버튼의 기능을 라벨(Label)로 지정

    일반적이거나 오해의 소지가 있는 레이블이 있는 버튼은 사용자에게 큰 불만의 원인이 될 수 있다. 각 버튼의 기능을 명확하게 설명하는 버튼 레이블을 작성하기를 바란다. 이상적으로는 버튼의 레이블이 해당 동작을 명확하게 설명해야 한다.

    사용자는 버튼을 클릭할 때 어떤 일이 발생하는지 명확하게 이해해야 한다. 간단한 예를 들어보자. 실수로 삭제 작업을 실행했는데 이제 다음 오류 메시지가 표시된다고 상상해 보자.

    모호한 레이블 ‘OK’는 작업 버튼에 대해 너무 많이 말하지 않는다.

    이 대화 상자에서 ‘OK’ 및 ‘Cancel’가 무엇을 나타내는지 명확하지 않다. 대부분의 사용자는 “‘Cancel’를 클릭하면 어떻게 됩니까?”라고 자문할 것이다.

    ‘OK’과 ‘Cancel’ 두 개의 버튼으로만 구성된 대화 상자나 양식을 디자인한 적이 없다.
    Never designed a dialog box or form that consisted solely of the two buttons ‘OK’ and ‘Cancel’.

    ‘OK’ 레이블을 사용하는 대신 ‘Remove’를 사용하는 것이 좋다. 이렇게 하면 이 버튼이 사용자에게 무엇을 하는지 명확하게 알 수 있기 때문이다. 또한 ‘Remove’가 잠재적으로 위험한 작업인 경우 빨간색을 사용하여 이 사실을 표시할 수 있다.

    ‘Remove’는 버튼이 사용자에게 무엇을 하는지 명확하게 한다.
    잠재적으로 위험한 작업인 ‘Disabled Card’는 이 인터페이스에서 빨간색으로 표시된다. 이미지: 라모션(Ramotion)

    4. 버튼의 적절한 크기

    버튼 크기는 화면에서 이 요소의 우선순위를 반영해야 한다. 큰 버튼은 더 중요한 작업을 의미한다.

    버튼 우선순위 지정

    가장 중요한 버튼을 가장 중요한 버튼처럼 보이게 한다. 항상 기본 작업 버튼을 더 눈에 띄게 만든다. 크기를 늘리고(버튼을 더 크게 만들면 사용자에게 더 중요해 보임) 대비되는 색상을 사용하여 사용자의 관심을 끌 수 있다.

    Dropbox는 크기와 색상 대비를 사용하여 ‘Dropbox Business 무료 체험’ CTA 버튼에 사용자의 관심을 집중시킨다.

    모바일 사용자를 위해 손가락 친화적인(finger-friendly) 버튼 만들기

    많은 모바일 앱에서 버튼이 너무 작다. 이것은 종종 사용자가 잘못 입력하는 상황으로 이어진다.

    왼쪽: 적절한 크기의 버튼. 오른쪽: 버튼이 너무 작습니다. 이미지: Apple

    MIT Touch Lab 연구에 따르면 손가락 패드의 평균은 10-14mm이고 손가락 끝은 8-10mm이다. 이것은 10mm(38px) x 10mm(38px)가 좋은 터치 영역 사이즈를 의미한다.

    이미지 출처: uxmag

    5. 주문에 주의

    버튼의 순서는 사용자와 시스템 간의 대화 특성을 반영해야 한다. 사용자가 이 화면에서 어떤 순서를 기대하는지 스스로에게 물어보고 그에 따라 디자인하는 것이 좋다.

    사용자 인터페이스는 사용자와의 대화이다.
    User interface is a conversation with your users

    예를 들어 페이지 매김에서 ‘이전/다음’ 버튼의 순서를 지정하는 방법은 무엇인가? 앞으로 이동하는 버튼은 오른쪽에, 뒤로 이동하는 버튼은 왼쪽에 있어야 하는 것이 논리적이다.

    6. 너무 많은 버튼을 사용하지 마십시오

    이것은 많은 앱과 웹사이트에서 흔히 발생하는 문제이다. 너무 많은 옵션을 제공하면 사용자는 아무것도 하지 않게 된다. 앱이나 웹사이트에서 페이지를 디자인할 때 사용자가 취하기를 바라는 가장 중요한 행동에 대해 생각해보라.

    버튼이 너무 많다.

    7. 상호작용에 대한 시각적(visual) 또는 청각적(audio) 피드백 제공

    사용자가 버튼을 클릭하거나 탭 하면 사용자 인터페이스가 적절한 피드백으로 응답할 것으로 기대한다. 작업 유형에 따라 시각적 피드백 또는 오디오 피드백이 될 수 있다. 사용자에게 피드백이 없으면 시스템이 명령을 받지 못한 것으로 간주하고 작업을 반복한다. 이러한 동작으로 인해 불필요한 작업이 여러 번 발생하는 경우가 많다.

    왜 이런 일이 발생할까? 인간으로서 우리는 물체와 상호 작용한 후 약간의 피드백을 기대한다. 시각적, 청각적 또는 촉각적 피드백 — 상호 작용이 등록되었다는 사실을 인정하는 모든 것이 대상이다.

    사용자 인터페이스는 누르는 정도의 값을 시각적 피드백으로 제공한다. 이미지: 바딤 그로모프(Vadim Gromov)
    이 버튼은 작업의 현재 상태를 보여주기 위해 진행 표시기로 변환된다. 이미지: 콜린 가벤(Colin Garven)

    다운로드와 같은 일부 작업의 경우 사용자 입력을 승인할 뿐만 아니라 프로세스의 현재 상태를 표시할 가치가 있다.

    결론

    버튼은 인터랙션 디자인의 일반적인 요소임에도 불구하고 이 요소를 최대한 좋게 만들기 위해 많은 관심을 기울일 가치가 있다. 버튼 UX 디자인은 항상 인식(recognition)과 명확성(clarity)에 관한 것이어야 한다.

    참고자료
1. 7 Basic Rules for Button Design 
2. How To Design Better Buttons
3. UI cheat sheet: buttons
  • 버튼 디자인을 위한 8 가지 규칙

    버튼 디자인을 위한 8 가지 규칙

    버튼은 모든 인터페이스에서 찾을 수 있는 요소로 사용자가 조치를 취하고 선택을 할 수 있게 해준다.

    그들이 볼 수 있는 것처럼 간단하게 잘 설계된 버튼을 전달하기 위해 따라야 할 규칙이 있다.

    이 글에서는 잘 디자인된 버튼을 위해 따라야 할 기본 규칙을 설명할 것이다.

    버튼 유형(Buttons Types)

    일반적으로 모든 인터페이스에는 사용자 경험을 향상시키기 위해 하나 이상의 버튼 유형이 포함되어 있다. 버튼 유형은 사용자가 중요성과 그 사이의 차이를 만드는 데 도움을 주며, 다른 버튼 유형은 덜 관심을 끌 수 있다.

    버튼 해부학(Buttons Anatomy)

    버튼 디자인을 시작하기 전에 해부학을 이해해야 한다. 해부학은 사용자의 언어에 따라 구조를 따르는 것이 좋지만 영어가 왼쪽에서 오른쪽으로 작성되므로 아이콘이 먼저 나오고 텍스트가 온다.

    버튼 크기(Button size)

    여기에 있는 아이디어는 버튼을 모바일 사용자에게 손가락 친화적으로 만들고 PC에서 클릭할 수 있게 하는 것이다. 이 경우 항상 버튼을 누르고 그 근처에 있는 버튼을 눌러야 한다. 여기서 우리는 잘못 설계된 버튼을 직면하고 있다. 
    또한 버튼이 클수록 우선순위가 높아진다.

    색상 및 대비(Color & Contrast)

    다른 색상의 버튼은 부트스트랩에서 왔으며 요즘에는 주로 기본 및 보조 버튼을 사용하므로 다른 색상을 사용할 필요가 없지만 버튼의 메시지가 색상을 사용하는 인터페이스보다 더 중요한 대시보드 또는 인터페이스와 같은 인터페이스에서는 문제가 없다.

    너비와 안쪽 여백(Width and Padding)

    이것에 대한 규칙이나 완벽한 숫자는 없지만 이 예를 보면 비율에 대한 아이디어를 얻을 수 있다.

    버튼 간격(Button spacing)

    버튼 간격은 특히 휴대 기기에서 특히 중요하다. 이 연구에 따르면, 고령자를 위한 터치스크린 사용자 인터페이스: 버튼 크기 및 간격 버튼이 너무 멀리 떨어져 있으면 사용자가 터치 대상으로 이동하는 속도가 훨씬 느려진다. 또한 버튼이 너무 가까웠을 때 사용자가 터치 정확도가 가장 낮다.

    버튼 상태(Button States)

    상태는 구성 요소의 상태를 통신하는 데 사용된다. 잘 설계된 버튼은 사용자가 상호 작용할 때 상태를 변경해야 한다. 잘못 설계된 버튼은 잘못된 동작을 오도할 수 있으며, 예를 들어 필드가 버튼처럼 설계된 경우 다른 동작으로 착각할 수도 있다.

    게재 위치 및 주문(Placement & Order)

    일반적으로 버튼은 중요한 순서대로 배치된다. 게다가, 이 글의 좋은 예가 로그인 폼이다. 로그인 버튼이 가장 주목을 받고 나서, 덜 중요한 액션에 일반적으로 사용되는 텍스트 버튼이 있다.