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

UI디자인에서의 컬러와 폰트

• UI디자인을 위한 주재료인 컬러와 폰트의 속성을 알아볼 거예요.
• UI를 디자인할 때 가장 기초가 되는 재료인 컬러와 폰트를 알아야 디자인을 시작할 수 있어요.
• 특히 디지털 환경에서 컬러와 폰트의 특징을 알아볼 거예요.

컴포넌트와 인스턴스

• 피그마 컴포넌트와 그 복사본인 인스턴스의 특징에 대해 같이 알아봐요.
• 피그마에서 만들 수 있는 컴포넌트와 그 복사본인 인스턴스의 특징에 대해 같이 알아봐요.
• 또한 스타일 가이드와 UI키트, 디자인 시스템에 대해서도 같이 알아봐요.
• 본격적으로 UI 디자인에 대해 알아보는 시간을 가져볼 거예요.

파운데이션

* 파운데이션의 뜻

• UI를 구성하는 가장 작은 알갱이이자 기초 재료인 파운데이션에 대해 먼저 개념을 정리해봐요.
  
• 우리가 피그마를 통해 만들고자 하는 건 UI예요.
• UI는 버튼, 체크박스나 라디오, 탭 등 우리가 화면에서 볼 수 있는 모든 요소들을 뜻해요.
• UI는 기초 재료인 파운데이션과, 이 파운데이션을 조합해 만드는 컴포넌트로 나눌 수 있어요.
• 즉, 버튼이라는 컴포넌트를 만들기 위해서는 파운데이션부터 만들어야 해요.
• 모든 컴포넌트들은 이 파운데이션 요소를 조합해서 만들 수 있어요.

* 파운데이션의 구성

• 색상(Color)
• 서체(Font, Typography)
• 간격, 여백(Spacing, Gap)
• 곡률(Radius)
• 그리드(Grid)
• 고도(Elevation)
• 아이콘(Icon)

컬러스타일

* UI디자인에서의 컬러

• RGB와 HEX Code
  • 디스플레이는 빛의 3원색으로 구현되는 화면이에요.
  • 즉, 빛의 농도와 명암을 조절해 여러가지 색으로 만들어요.
  • 빛의 3원색의 첫글자를 따서 쓰면 RGB가 되고, 이게 우리가 아는 RGB색상의 뜻이에요.
  • 이 각각의 숫자를 컴퓨터는 16진수(Hexadecimal)로 변환해서 읽어요.
  • 이 16진수 값이 우리가 흔히 아는 헥스코드예요.
• 컬러프로파일(Color Profile)
  • HEx Code는 빛의 3원색 정보를 16진법으로 변환한 코드에요.
  • 빛의 색상에는 절대적인 기준이 없어요. 그래서 디스플레이는 색상을 자기만의 기준으로 해석해요.
  • 디스플레이가 코드를 해석할 때 사용하는 색 기준표를 컬러 프로파일(Color Profile)이라고 합니다.
  • 디스플레이 자체 뿐만 아니라, 프로그램 자체에도 컬러 프로파일이 조금씩 달라요.

* 컬러스타일의 개념

• 컬러스타일은 디자인에서 이용할 색상을 모아두는 팔레트를 뜻해요.
• 색상을 아무렇게나 사용하는 것이 아니라, 사용할 색상들을 미리 정리해두고 그 안에서 사용해요.
• 사용할 색상을 모을 때, 색상의 단계를 만드는 규칙을 만들어요.
• 만약 규칙 없이 색상을 사용한다면?
  • 팀원 간의 색상을 사용하는 규칙을 알아차리기 어려워져요.
  • 그만큼 커뮤니케이션을 불편하게 말들겠죠?
  • UI디자인은 규칙이 매우 중요한 개념이에요!
• 컬러 스타일을 만드는 일반적인 방법
  • 컬러 스타일은 기본적으로 2~3가지 색상으로 만들어요.
    • 일반적으로 포인트 컬러 하나만 놓고, 글자와 배경은 흑백 조합으로 사용하는 것을 추천해요. 그래야 화면을 단순하게 유지하면서 중요한 부분에 색상을 넣어 주목시키기 쉬워요.
      
    • 포인트 컬러
      우리 제품에서 정말 중요하고 핵심적인 부분에만 써야 하는 색상이에요. 프라이머리 컬러 또는 엑센트 컬러라고도 불러요.
    • 백그라운드 컬러
      우리 제품에서 전체적인 분위기를 만들어 줄 배경색이에요. 일반적으로 흰색(#FFFFFF)이에요.
    • 세컨더리 컬러
      배경색에서 도드라지는 부분을 만들어서 포인트 컬러를 뒷받침하는 색상이에요. 서브컬러라고도 불러요.
  • 색상을 정했다면, 가장 밝은 단계부터 가장 어두운 단계까지 총 10단계로 만들어요.
  • 그 이후엔 글자 등에 기본으로 사용할 흰색과 검은색을 만들고, 회색 색상도 골라서 10단계를 만들어요
• 1:3:6 법칙
  • 디자인하는 게 아직 낯설다면 1:3:6 법칙을 최대한 지키는 것이 좋아요. 전체적으로 균형을 만들어 주고 사용자가 집중해야 하는 부분을 더 쉽게 보여줄 수 있어요.
    

* 컬러스타일 만들기

• 실습
• [자료] 컬러 스타일을 만들 때 도움되는 개념 및 방법론
  • 시맨틱 컬러의 개념과 적용 방법
  • UI 색상의 시각적인 원리
  • UI 디자인 - 색상

폰트 스타일

* 폰트 스타일 개념

• 폰트 스타일의 개념
  • 폰트 스타일도 컬러 스타일과 마찬가지로, 디자인 시스템에서 사용할 폰트를 모아둔 목록이에요.
  • 다른 말로는 폰트 스케일이라고도 하는데, 스케일은 일정한 규칙에 따라 정렬된 하나의 세트를 뜻해요.
• 폰트 스타일의 구성
  • 패밀리
    • 말 그대로 폰트의 종류를 뜻해요.
    • 폰트 이름이라고 생각하셔도 무방합니다.
  • 굵기(=무게감,Weight)
    • 일반적으로 굵기라는 뜻이지만, 더 정확하게는 '무게감'을 나타낸다고 알아주세요.
    • 단순히 굵은 게 아니라 이 글자가 얼마나 더 중요한지를 알려주기 때문에 '무게감'이라는 표현을 사용해요. 그래서 더 먼저 중요하게 읽어야 한다는 걸 나타내준답니다.
    • 디자이너는 Thin, Light, Regular 등 굵기 이름으로 이야기하는 걸 더 선호해요.
    • 개발자는 100, 200 등 굵기에 할당된 숫자로 이야기 하는 걸 더 선호해요.
      
  • 크기
    • 폰트의 크기를 뜻해요. 일반적으로 16px 부터 시작하고, 2px 씩 줄이거나 늘려요.
      
    • 크기가 너무 작으면 읽기 힘들어 지기 때문에 10px 미만으로 사용하지 않는 걸 권장해요.
    • 폰트 크기가 20px 이상일 때는 4px 씩 차이나게 하는 게 일반적이에요.
    • 일반적으로 20px 미만인 폰트들은 본문에 사용하고, 20px 이상부터는 제목에 사용해요.
    • 왜 16px이 시작점인가요?
      • 웹사이트의 기본 폰트 사이즈는 16px 이에요.
        앱이 나오기 이전부터 웹사이트의 기본 폰트 사이즈를 16px으로 사용했기 때문에 자연스럽게 16px이 본문의 기본값이 됐답니다.
  • 행간(Kine-height)
    • 행간은 디지털 환경에서 글자 줄의 높이를 조정할 때 사용하는 중요한 폰트 속성이에요.
    • 행간의 기본적인 개념은 근줄과 글줄 사이의 간격을 뜻해요.
    • 행간은 %와 같은 상대적인 단위나, px처럼 고정 단위로 나타낼 수 있어요.
    • 행간은 글자의 크기와 그 사이 간격을 합친 값이에요.
      
  • 자간(Letter-spacing)
    • 글자와 글자 사이의 간격이에요. 행간과 마찬가지로 상대단위와 고정단위 모두 사용할 수 있어요.

* 폰트 스타일 만들기

• 폰트 스타일 만들기
  • 실습
• [자료] 폰트 스타일을 만들 때 도움되는 개념 및 방법론
  • UI 폰트 속성 소개
  • 폰트 스타일에 대한 실무 방법과 개념
  • 머티리얼 디자인 - 폰트

마스터 컴포넌트와 인스턴스

* 컴포넌트의 개념

• 컴포넌트라는 표현, 많이 들어보셨을 거예요.
• 컴포넌트는 구성품이라는 뜻을 가지고 있어요.
• UI디자인에서 컴포넌트는 파운데이션을 조합해 만들어지는 구성품을 이야기 해요.

* 마스터 컴포넌트(Master Component)

• 마스터 컴포넌트는 피그마에서 쓸 수 있는 컴포넌트 기능의 핵심이에요.
• 마스터 컴포넌트는 반복적인 디자인을 빠르게 하기 위해 디자인을 복사해서 사용할 수 있도록 해줘요.
• 복사된 디자인들을 한번에 수정하거나 편집할 수 있도록 해주는 중요한 기능이에요.
• 마스터 컴포넌트의 특징
  • 마스터 컴포넌트는 원본이에요. 따라서 변하지 않아요.
  • 원본 그대로이기 때문에 수정이 필요하면 그냥 수정하면 되고, 지우고 싶다면 그냥 지우면 돼요.
  • 마스터 컴포넌트를 복제하면 마스터 컴포넌트의 본제본, 인스턴스가 생겨요.

* 인스턴스(Instance)

• 인스턴스는 마스터 컴포넌트의 복제본이에요.
• 즉, 마스터 컴포넌트를 복사하면 인스턴스가 생겨요. 따라서 컴포넌트의 속성을 그대로 이어 받아요.

* 마스터 컴포넌트와 인스턴스의 관계

• 컴포넌트를 수정하면 인스턴스에도 반영돼요.
• 인스턴스를 먼저 수정하면 컴포넌트를 수정해도 반영되지 않아요.
• 컴포넌트를 지우더라도 인스턴스는 남아 있어요.
• 연결을 해제하면 인스턴스는 컴포넌트와 분리되고, 일반 프레임으로 변경돼요.

디자인 시스템의 이해

* 디자인 시스템의 개념

• 디자인 시스템이 필요한 이유
  • 우리는 웹사이트나 앱을 디자인 합니다. 이 웹과 앱을 제품(프로덕트)이라고 불러요.
  • 프로덕트를 만드는 디자이너들은 사용자들이 겪는 문제를 찾아 디자인으로 개선해요.
  • 빠르게 디자인을 반복하면서 UI를 매번 새로 만들기 어렵고, 문제가 뭔지 파악할 시간도 부족해요.
  • UI를 만들어 놓고 필요할 때 가져와사 사용하면 편하겠죠?
  • 그런데 우리는 혼자 일하는게 아니에요. 다른 디자이너들도 있고, 또 개발자와도 일해야 해요.
  • 즉, UI는 다른 디자이너도 똑같은 방법으로 만들고 쓸 수 있어야 하고, 개발자도 같은 생각을 해야 해요.
• 디자인 시스템의 목적
  • 반복적입 UI를 효율적으로 관리
  • 팀 전체가 같은 정도로 이해
    • 어떤 디자이너가 UI를 쓰더라도 일관된 사용법을 지킬 수 있고, 또 어떤 개발자가 UI를 개발하더라도 디자이너의 생각을 이해하고 만들 수 있어요.
• UI키트가 디자인 시스템인가요?
  • UI키트
    • 사용하는 규칙과 방법은 없고, 단순히 UI를 모아둔 것에 지나지 않아요.
      
  • 디자인 시스템
    • UI 구조, 쓰는 방법, 유의해야 하는 부분까지 상세하게 적혀 있는 문서예요.
    • 즉, 디자인 시스템은 '문서'의 형태를 갖추고 있어야 해요.
      
  • 유의할 점
    • 디자인 시스템이 아니라 UI키트라고 해서 무조건 나쁜 건 아니에요.
    • 서로 합이 잘 맞고, 또 팀 인원이 적다면 오히려 완벽한 문서를 갖추는 게 비효율적일 수 있어요.
    • 그럴 때는 UI키트 수준만 유지한 채 빠르게 만드는 게 더 효율적일 수 있어요.
    • 팀과 제품의 발전 단계에 따라 유연하게 선택하면 돼요. 무조건 디자인 시스템을 써야한다! 라는 게 아니라는 걸 명심해 주세요.

* 디자인 시스템의 장단점

• 디자인 시스템은 결국 팀 전체의 속도와 효율을 위해서 만들지만 간혹 효율을 매우 떨어뜨리는 경우가 생길 수 있어요.
• 장점
  • 디자인을 반복해서 사용할 수 있어서 시간과 비용이 줄어들어요.
    • 반복되는 디자인에 개발 코드까지 연결해서 저장해두면, 필요할 때 단순히 꺼내 쓰는 것만드로도 많은 일이 줄어들어요. 일이 줄어든다는 건 시간과 비용을 아낄 수 있다는 뜻이고, 그만큼 디자이너들도 더 중요한 일에 집중할 수 있어요.
  • 누가 만들어도 동일한 품질의 제품을 설계할 수 있어요.
    • UI를 만드는 사람마다 매번 다른 디자인이 나온다면, 다른 부분을 이해하기 위한 불필요한 미팅이 매번 생길 거예요. 따라서 누가 만들어도 같은 형태와 구조, 기능을 만들 수 있도록 가이드라인을 만들어두면 팀 전체가 한 사람처럼 일할 수 있어요.
• 단점
  • 다양한 형태의 UI를 모아 하나로 통일하는 과정이 매우 오래 걸려요.
  • 필요한 건 몇개 없는데, 그에 비해 UI가 과하게 많아질 수 있어요.
  • 새로운 디자인이 필요할 때, 디자인 시스템을 활용하려다 보니 혁실이 줄어들어요.

* 디자인 시스템의 구성 요소와 원리

• UI를 구성하고 있는 요소
  
  • 버튼 하나를 뜯어보면 굉장히 다양한 요소들로 구성되어 있다는 걸 볼 수 있어요.
  • 이 요소들은 그 자체로는 기능을 가지고 있지 않아요.
  • 이 요소들을 모아서 버튼이라는 UI로 결합해야, '눌러서 작동시킨다'라는 기능이 생겨요.
  • 이 요소들은 기능을 가지고 있진 않지만, UI를 만드는 기초 재료들이에요.
• 아토믹 디자인 시스템(Atomic Design System)
  
  • 기초 재료들은 세상을 구성하는 가장 작은 알갱이인 원자에 비유할 수 있어요.
  • 원자를 모아서, 분자를 만드는 게 아토믹 디자인 시스템의 핵심 개념이에요.