체계적으로 배우는 피그마 기초 완전 정복 3주차 - 02

UI 디자인 기본

* UI의 분류

💡우리가 보는 UI들은 형태도 다양하고 종류도 많지만, 크게 보면 6가지 정도로 분류할 수 있어요.

• 액션(Action) : 사용자가 중요한 행동을 수행할 때 사용해요.
  • 버튼이 여기에 속해요.
• 인풋(Input) : 사용자의 입력을 받을 때 사용해요.
  • 텍스트를 입력할 수 있는 텍스트 필드
  • 미리 정해둔 옵션 중 하나를 선택할 수 있는 셀렉트박스 등이 여기에 포함돼요.
• 인포메이션(Information) : 사용자에게 서비스나 상태나 안내 사항을 전달할 대 사용해요.
  • 토스트 메시지나 스낵바, 라벨 등이 여기에 속해요.
• 컨테이너(Container) : 컴포넌트 여러개가 결합되어 하나의 덩어리를 이루는 컴포넌트에요.
  • 카드, 바텀시트, 리스트 처럼 복잡한 구조인 경우가 많아요.
• 네비게이션(Navigation) : 사용자가 페이지를 이동할 때 사용해요.
  • 네비게이션 바, 앱 바, 화면 하단의 탭 바, 사이드 바 등이 여기에 속해요.
• 컨트롤(Control) : 사용자가 설정이나 값을 수정할 때 사용해요.
  • 라디오, 체크박스, 스위치 등이 여기에 속해요.

🗝️ 분류는 임의적인 것이라서 더 잘게 분류할 수도 있고, 더 합쳐서 분류할 수도 있어요. 또한 관점에 따라 어떨 때는 컨트롤, 어떨 때는 인풋으로 분류해도 상관없는 UI들도 있어요. 중요한 건 UI의 이름이나 분류가 아니라, 이 UI가 어떤 상황에서 어떤 기능을 하는지를 잘 이해하는 거랍니다:)

* 의사 상태

• 컴포넌트에게도 별명이 있다?
  • 여러분은 모두 각자 다 이름을 가지고 계실 거예요.
  • 하지만 SNS에서는 닉네임으로, 집에서는 애칭으로, 학교에선 별명으로 불리죠.
  • 이때, 애칭이나 별명으로 불린다고 '나'라는 사람이 바뀌거나 사라지진 않습니다.
  • 컴포넌트도 마찬가지로 기본 자체는 유치한 채, 상황에 따라 다른 스타일을 가지는 경우가 있어요.
  • 그런 다른 스타일을 의사 상태라고 불러요.
• 의사 상태의 개념
  • 의사 상태에서 의사랑 까짜의, 가상의(pseudo:'수도'라고 읽어요)라는 뜻이에요.
  • 의사 상태는 컴포넌트의 가상의 상태를 표시할 때 사용해요.
  • 예시
    • 버튼에 마우스를 올렸을 때 색깔이 바뀌는 건, 실제 버튼이 다른 걸로 바뀐 것이 아니라 버튼이 가진 가상의 상태를 나타내는 거예요.
• 의사 상태 설계 시 주의해야 할 것
  • 의사 상태의 종류는 버튼에 마우스를 올렸을 때, 버튼을 눌렀을 때, 텍스트를 입력하려고 눌렀을 때, 체크박스를 눌렀을 때, 누를 수 없을 때 등 다양한 경우가 있어요.
• 컴포넌트마다 쓸 수 있는 것과 없는 것이 있어요.

UI 만들기 실습

* 버튼 컴포넌트

• 버튼 컴포넌트의 정의
  • 컴포넌트의 종류 중 액션에 해당하는 컴포넌트에요.
  • 버튼 컴포넌트는 누름으로써 중요한 동작을 수행하는 요소에요.
• 버튼 설계 시 유의할 점
  • 우리가 직관적으로 아는 것들
  • 행동 유도성(Affodance)
    • 상호작용이 가능한 물체는, 상호작용이 가능하다는 시각적인 단서를 제공해야 한다는 뜻이에요.
  • 버튼의 구조
    • 컨테이너(Container) : 안에 있는 요소를 감싸고 있는 프레임을 뜻해요.
    • 라벨/레이블(Label) : 버튼의 행동을 안내하는 글자예요.

      UI에서 사용자가 입력하는 글자는 텍스트,
      UI가 사용자에게 '이렇게 하세요'를 안내하는 글자는 라벨이라고 불러요.

    • 리딩 엘리먼트(Leading Element) : 버튼 라벨보다 더 앞쪽에 있다는 뜻에서 리딩(이끄는) 엘리먼트라고 불러요.
    • 트레일링 엘리먼트(Trailing Element) : 버튼 라벨보다 더 뒤쪽에 있다는 뜻에서 트레일링(뒤따르는) 엘리먼트라고 불러요.
  • 버튼의 종류
    • 박스 버튼, 일반 버튼
      • 우리가 일반적으로 아는 버튼이에요.
      • 박스처럼 생겨서 박스(BOX) 버튼이라고 불러요.
      • 색상이 안에 꽉 차있어서 솔리드(Solid, 단단한, 꽉 찬) 버튼이라고도 부를 수 있어요.
    • 아웃라인 버튼, 고스트 버튼, 엠티 버튼
      • 테두리가 있고 속이 빈 듯한 형태의 버튼이에요.
      • 테두리만 있어서 아웃라인(Outline) 버튼이라고 부르고, 유령처럼 속이 비어 있어서 고스트(Ghost) 혹은 엠티(Empty) 버튼이라고도 부를 수 있어요.
    • 스플릿 버튼
      
      • 주요 액션과 관련된 보조 액션을 제공해야 할 때 사용하는 버튼이에요.
      • 주요 액션과 보조 액션이 나뉘어 있어서 스플릿(Split, 쪼개진) 버튼이라고 불러요.
    • 텍스트 버튼
      • 배경색이나 테두리 없이 글자로만 이루어진 버튼이에요.
      • 주요 액션에 비해 비중이 낮고, 별로 중요하지 않은 기능을 수행할 때 사용해요.
  • 버튼 만들기
    • 실습

* 텍스트필드 컴포넌트

• 텍스트 필드 컴포넌트의 정의
  • 컴포넌트의 종류 중 인풋에 해당하는 컴포넌트에요.
  • 인풋은 사용자가 무언가를 입력할 수 있게 하는 컴포넌트를 말해요.
  • 그 중 텍스트필드는 가장 대표적인 UI에요.
• 텍스트필드의 구조
  
  • 인풋 컨테이너(Input Container) : 글자를 입력하는 부분이에요.
  • 라벨/레이블(Lable) : 입력해야 하는 값이 무엇인지 알려주는 텍스트예요.
  • 텍스트(Text) : 사용자가 직접 입력하는 텍스트예요.
  • 리딩 엘리먼트(Leading Element) : 텍스트보다 더 앞쪽에 있는 엘리먼트예요.
  • 트레일링 엘리먼트(Trailing Element) : 텍스트보다 더 뒤쪽에 있는 엘리먼트예요.
  • 헬퍼 텍스트(Helper Text) : 유효성 검사 결과를 보여주거나 입력해야 하는 값의 가이드라인을 제공하는 도움말이에요.
• 플레이스홀더와 밸리데이션
  • 플레이스홀더
    • 플레이스홀더의 개념
      
      • 플레이스홀더는 플레이스(자리를)+홀더(지키고 있는 것)로, 한국말로는 '자리표시자'라고 해요.
      • 사용자가 입력해야 하는 예시를 제공하는 용도로 사용해요.
      • 사용자가 글자를 입력하기 시작하면 사라지고, 글자를 모두 지우면 다시 나타나요.
    • 플레이스홀더를 쓸 때 유의할 것
      
      • 플레이스홀더 자리에는 입력값의 조건을 적지 않는 것을 권장해요.
      • 플레이스홀더는 값을 입력하기 시작하면 사라져요.
      • 조건이 복잡하지 않은 경우에는 괜찮지만, 조건이 복잡하거나 어려운 경우에는 사용자가 입력 중에 조건을 까먹을 수 도 있어요.
      • 그렇게 되면 사용자는 쓰던 걸 지우고 다시 플레이스홀더를 봐야 하는 불편함이 생겨 버려요.
      • 따라서 플레이스홀더에는 조건 대신 입력 예시를 넣어 주세요.
      • 텍스트필드에 입력해야 하는 값의 조건은 헬퍼 텍스트로 적어 주세요.
  • 유효성 검사
    • 유효성 검사의 뜻
      • 텍스트필드에서 중요한 건 사용자가 입력한 텍스트가 유효한지 아닌지를 검사해주는 거예요.
      • 예를 들어 이름에 특수문자가 있거나, 생년월일이나 핸드폰 번호에 숫자가 하나 더 있거나, 또는 이메일 형식이 맞지 않을 때, 사용자에게 '입력한 텍스트에 문제가 있으니 다시 확인해 주세요'라는 이야기를 해줘야 한다는 뜻이에요.
      • 이걸 우리는 유효성 검사, 밸리데이션 체크(Validation Check)라고 불러요.
    • 유효성 검사를 하는 이유
      • 사용자는 앱을 사용하면서 달성해야 하는 목적이 있어요.
      • 커머스라면 구매를 해야 하고, 커뮤니티라면 소통을 해야 하는 것 등을 이야기 해요.
      • 이때, 구매나 소통의 과정을 자꾸 방해하는 요소가 많다면, 사용자는 점점 싫증이 나겠죠?
      • 따라서 구매나 소통 과정을 방해하는 순간이 없는 것도 중요하지만, 방해가 발생했을 때 그걸 자연스럽게 피하거나 해결할 수 있도록 도와주는 것 역시 중요해요.
      • 텍스트를 입력했을 때, 자꾸만 문제가 있다고 방해한다면 사용자는 싫증이 날 거예요.
      • 그래서 이때, 적절한 문구와 안내로 사용자가 다시 행동을 완료할 수 있도록 유도해야 해요.
      • 유효성 검증은 그 적절한 문구와 안내를 담당하는 중요한 부분이랍니다!
    • 유효성 검사 시 주의 사항
      • 인간은 기본적으로 부정적인 것에 거부 반응을 보여요.
      • 오류는 부정적인 인식을 주는 요소기 때문에, 오류가 발생하더라도 자연스럽게 차선책이나 해결책을 제안함으로써 오류에 대한 부담이나 거부를 최소화해야 해요.
      • 따라서 부정적인 문구보다는 최대한 긍정적인 방향으로 사용자에게 안내해주세요.
        
• 텍스트필드 만들기
  • 실습

UI 만들기 실습 (2)

컨트롤 컴포넌트의 개념

• 컨트롤 컴포넌트의 뜻
• 컨트롤 컴포넌트는 사용자가 선택지를 특정할 수 있도록 하는 요소예요.
• 여러 선택지 중 사용자가 원하는 것을 고를 수 있도록 돕는 요소라고 볼 수 있어요.
• 컨트롤 컴포넌트의 종류
  • 디자인 시스템마다 차이는 있겠지만, 대부분 아래의 4개 컨트롤은 포함되어 있어요. (체크박스, 라디오, 스위치(토글), 슬라이더)
• 컨트롤 요소 설계 시 참고할 점

  • 컨트롤 요소의 최소 터치 영역

    • 컨트롤 요소는 버튼 등 다른 UI에 비하면 크기가 매우 작아요.
    • 사용자들이 작은 요소를 손가락으로 제대로 누르기에는 불편할 거예요.
    • 따라서 컨트롤 요소 자체는 작더라도, 그 주변으로 최소 크기 범위를 만들어 주세요.
      

  • 컨트롤 요소의 라벨

    • 컨트롤 요소는 대부분 라벨과 같이 쓰여요.
    • 이때, 라벨을 누르더라도 컨트롤 요소가 작동하게 하는 것이 일반적이에요.
    • 따라서 여러 컨트롤 요소를 배치할 때는 간격을 충분히 줘서 잘못 누르는 일을 최대한 줄여주세요.

  • 컨트롤 요소와 라벨의 정렬

    • 컨트롤 요소는 라벨과 같이 잘 쓰인다는 걸 알았어요.
    • 이때, 컨트롤 요소와 라벨을 좀 더 깔끔하게 정렬하려면 두 요소의 세로를 같게 해두는 게 좋아요.
    • 라벨의 세로는 행간과 같기 때문에, 컨트롤의 사이즈를 행간에 사용한 값들로 만들어두면 정렬을 조금 더 쉽게 할 수 있어요.

    

체크박스 컴포넌트

• 체크박스 컴포넌트의 정의

  • 체크박스는 여러 선택지 중 1개 이상을 선택할 때 사용하는 컨트롤 컴포넌트예요.
  • 일반적으로 라벨과 함께 같이 쓰여요.

• 체크박스의 의사 상태

  • 체크박스는 기본적으로 2가지 의사 상태를 가져요.
  • 자세하게 설계한다면 더 많은 상태를 가질 수도 있어요.
    

• 체크박스의 특징

  • 체크박스는 여러개를 선택할 수 있어요.

    • 체크박스는 하나를 선택한다고 해서 다른 선택지에 영향을 주지 않아요.

  • 체크박스는 아무것도 선택하지 않을 수 있어요.

    • 진행이 가능한지 아닌지와는 별개로, 아무것도 체크하지 않은 상태를 만들 수 있어요.

  • 하위 항목이 있을 때, 일부만 선택할 수도 있어요.

    📌 실무에서는 개발 요소의 부담을 줄이기 위해 상위 항목의 체크박스를 해제하는 걸로 통일햇허 사용하는 경우도 있어요.

    
    

• 상위 항목을 선택하면 하위가 모두 선택돼요.

• 하위 항목 일부를 체크하거나 해제하면 상위 항목의 상태가 '결정되지 않은'이라는 뜻의 Indetermined 상태로 변해요.

• 체크박스 만들기

  • 실습

* 라디오 컴포넌트

• 라디오 컴포넌트의 정의
  • 라디오는 여러 선택지 중 1개를 선택할 때 사용하는 컨트롤 컴포넌트예요.
  • 일반적으로 라벨과 함께 같이 쓰여요.
• 라디오의 의사 상태
  • 체크박스와 마찬가지로, 라리도 역시 자세하게 설계한다면 더 많은 상태를 가질 수도 있어요.
    
• 라디오의 특징
  • 라디오는 여러개를 동시에 선택할 수 없어요.
    • 라디오는 하나를 선택하면 이미 선택한 다른 선택지에 영향을 미쳐요.
  • 라디오는 아무것도 선택하지 않는 게 불가능해요.
    • 라디오는 반드시 선택되어 있어야 해요.
    • 사용자가 많이 선택하는 항목을 기본값으로 설정해두면 사용자가 더 편하게 진행할 수 있어요.
• 라디오 만들기
  • 실습

UI 학습 시 도움되는 관점

• 분명히 버튼마다 모양도, 색상도 다른데 우리는 같은 버튼으로 인식해요.
• 우리는 버튼의 생김새가 아니라 버튼이 하는 일을 기준으로 생각하기 때문이에요.
• 따라서 UI를 비교하고 공부하실 때는 형태가 아니라 반드시 UI의 목적, UI의 기능에 초점을 두고 공부 해야 합니다.

  🌟 이걸 우리는 UI의 기능주의적 관점이라고 불러요.