피그마 이해하기 (3)

 피그마 이해하기 

1. 파운데이션
2. HexCode
3. 컬러 스타일
4. 폰트 스타일
5. 컴포넌트
6. 디자인 시스템

 

 

 

 파운데이션 

▶ 디자인 시스템에서 가장 기본이 되는 디자인 토큰들과 스타일 요소들을 의미

 

버튼 텍스트라는 것을 만들기 위해 필요한 요소들

 

▶ 파운데이션의 구성

1. Color - 색상
2. Font, Typography - 서체
3. Spacing, Gap - 간격, 여백
4. Radius - 곡률
5. Grid - 그리드
6. Elevation - 높이
7. Icon - 아이콘

 

 

 

 Hexcode 

 

▶ 색의 3원색

     : 모든 색의 근원이 되는 3가지의 기본 색상

        → 어떤 색 시스템을 기준으로 하느냐에 따라 나뉨(여기서는 RGB만 다룸)

 

▶ RGB 3원색 = 가산혼합 = 빛의 3원색

     : 디지털 디스플레이(모니터, 핸드폰 등)에서 사용

       빛은 모두 더하면 밝아지고, 모두 섞으면 흰색이 됨

RGB 3원색(가산혼합)

 

 

• 컴퓨터는 빨강, 초록, 파랑을 각각 256가지 값으로 보여줄 수 있음
• R (0~255) / G (0~255) / B (0~255)
• 이 숫자를 컴퓨터는 16진수(Hexadecimal)로 변환하여 읽음

 

▷ 이런 식으로 표현된 값을 Hex Code 라고 함

 

 

 

 컬러 스타일 

▶ 디자인에서 사용할 색상을 모아두는 팔레트

     → 사용할 색상들을 미리 정해두고 그 안에서 사용 

     → 색상의 단계를 만드는 규칙이 존재 *규칙은 UI에서 매우 중요한 개념

 

▶ 일반적으로 컬러 스타일은 2~3가지 색상

     : 포인트 컬러(엑센트 컬러) / 백그라운드 컬러 / 세컨더리 컬러

포인트 컬러(프라이머리 컬러)	백그라운드 컬러	세컨더리 컬러
정말 중요하고 핵심적인 부분에만 사용	전체적인 분위기를 만들어주는 배경색 (일반적으로 흰색)	배경색에서 도드라지는 부분을 만들어 포인트 컬러를 뒷받침

 

 

 

▶ 1:3:6 법칙

     : 포인트 컬러 10% / 세컨더리 컬러 30% / 백그라운드 컬러 60%

 

▶ 색상팔레트를 만들 때 주의할 점

색상 피커에서 HEX를 HSL로 바꿔줘야 함 

• H (Hue) : 색조
• S (Saturation) : 채도
• L (Lightness) : 밝기 → 이 값을 기준으로 +10, -10 하여 색상을 맞춤

 

▶ 색상팔레트 이름 설정

• 포인트 컬러 : Primary 
• 두번째 컬러 : Secondary
• 세번째 컬러 : Tertiary

피그마에서 " / " 는 폴더를 만든다는 의미
→ Primary/900 = Primary에서 가장 어두운 색상
→ 900(가장 어두운 색상), 800, 700, ... , 50(가장 밝은 색상)

 

 

▶ 시멘틱 컬러

     : https://emotion.co.kr/magazine/42/?list=42

이모션글로벌 | MAKE GREATNESS emotion global

시멘틱 : 색상이 아닌 사용방법에 따라 색상 이름을 지정하는 방법

             ex) Primary color

                   → 목적과 UI에 따라 네이밍하고 적용하는 컬러

                       (컬러 관리, 유지보수 용이 / 다크모드에 최적화된 컬러화면 구성 가능)

 

▷ 시멘터 컬러의 도입은 업무 프로세스 최적화, 브랜드 정체성 강화, UX 향상에 기여

 

▶ UI 색상의 시각적 원리

     : https://brunch.co.kr/@blckschrl/41

06화 UI를 위한 색

• 주색 : 가장 많이 사용하는 색
• 보조색 : 다른 요소와 구분이 필요할 때 사용하는 색
• 흑백 : 주로 배경화 글에 사용

 

• 색 대비 - AA 레벨이 표준
• 콘트라스트 체크 : https://colourcontrast.cc/

Colour Contrast Checker

 

 

• 어두운 배경 + 밝은 영역 + 어두운 내부 요소
• 밝은 배경 + 어두운 영역 + 밝은 내부 요소

 

▶ UI 디자인에서 색상이란?

     : https://brunch.co.kr/@chulhochoiucj0/17

모바일 UI 디자인 기본 요소 - 색채 Color

• UI 디자인에서 색체는 서체와 아이콘과 함께 일관성 있는 사용으로 브랜드 정체성을 표현하는 중요한 그래픽 요소

1. 상호작용 표현 (Interaction)
2. 의미 전달 (Meaning)
3. 상태 (State) 
4. 계층구조 (Visual hierarchy)
5. 강조

• 핵심 콘텐츠의 텍스트와 배경 간의 명도대비는 4.5 : 1 이상
• 액션 색 : 상호작용 요소에 사용하는 색 (버튼, 링크 등)
• 브랜드 색과 액션 색은 보색 대비를 사용하는 것을 권장

 

 

 

 폰트 스타일 

▶ 디자인 시스템에서 사용할 폰트를 모아둔 목록 = 폰트 스케일

 

▶ 폰트 스타일 구성

1. 패밀리
2. 굵기 (=무게감, Weight)
3. 크기 (Size)
4. 행간 (Line - height)
5. 자간 (Letter - spacing)

 

▶ 패밀리

     : 폰트의 종류 (폰트의 이름)

 

▶ 굵기 (=무게감, Weight)

     : 이 글자가 얼마나 중요한지를 나타냄 (그래서 무게감이라는 표현 사용)

       * 디자이너 → Thin, Light 등 굵기의 이름 선호

       * 개발자 → 100, 200 등 굵기에 할당된 숫자 선호 

이름과 할당된 숫자

 

▶ 크기 (Size)

     : 폰트의 크기

        → 일반적으로 16px 에서 시작해서 +2, -2

             * 폰트 크기가 커지면 4px씩 차이나게 (폰트가 커지면 육안으로 구분 힘듦)

폰트 크기

 

▶ 행간 (Line - height)

     : 글자의 크기와 그 사이 간격을 합친 값

       * 텍스트 높이 값 : 무조건 행간값

• 제목 : 120 ~ 135% 사이
• 본문 : 135 ~ 170% 사이 → Best : 150%      

ex) 16포인트의 150% = 100%(폰트크기) + 50%(폰트크기의 반 = 8) = 24포인트

 

 

 

 컴포넌트 

1. 마스터 컴포넌트
2. 인스턴스

 

▶ 컴포넌트 (= 구성품)

     : 파운데이션을 조합해 만들어지는 구성품
      (피그마로 만든 UI 블록)

 

▶ 마스터 컴포넌트 = 원본

     : 피그마에서 쓸 수 있는 컴포넌트 기능의 핵심

       * 마스터 컴포넌트를 복제하면 인스턴스가 생김

마스터 컴포넌트 표시

 

▶ 인스턴스

     : 마스터 컴포넌트의 복제본

      (컴포넌트의 속성을 그대로 이어 받음)

인스턴스 표시

 

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

1. 컴포넌트를 수정하면 인스턴스에도 반영
2. 인스턴스를 먼저 수정하면 컴포넌트를 수정해도 반영되지 않음
3. 컴포넌트를 삭제해도 인스턴스는 남아있음
4. 연결을 해제하면 인스턴스는 컴포넌트와 분리되고 일반프레임으로 변경

 

 

 

 UI 디자인 기본 

▶ UI 디자인 분류

액션 (Action)	사용자가 중요한 행동을 수행할 때 사용
인풋 (Input)	사용자의 입력을 받을 때 사용
인포메이션 ( Information)	사용자에게 서비스의 상태나 안내 사항을 전달할 때 사용
컨테이너 (Container)	컴포넌트 여러 개가 결합되어 하나의 덩어리를 이루는 컴포넌트
내비게이션 (Nevigation)	사용자가 페이지를 이동할 때 사용
컨트롤 (Control)	사용자가 설정이나 값을 수정할 때 사용

 

 

▶ UI 컴포넌트 설계 시 고려할 점

     : 버튼의 목적 > 심미적인 완성도

       * 버튼을 설계할 때에는 누를 수 있다는 시각적 힌트를 충분히 드러내야 함

       * 행동을 유도하는 속성 = 행동유도성(어포던스)

 

▶ 버튼 컴포넌트

컴포넌트는 항상 구조 파악이 첫 번째!!

컨테이너 (Container)	안에 요소를 감싸고 있는 프레임   * 버튼의 높이 = 컨테이너 안의 상하 여백 + 안에 있는 요소의 높이
라벨 / 레이블 (Label)	버튼의 행동을 안내하는 글자   * 사용자가 입력하는 글자 = 텍스트   * 사용자게에 안내하는 글자 = 라벨 ex) 4자리로 입력하세요
리딩 엘리먼트 (Leading Element)	버튼 라벨보다 더 앞쪽에 있는 요소 (더 앞에 있어서 리딩)   * 엘리먼트 : 요소
트레일링 엘리먼트 (Trailing Element)	버튼 라벨보다 더 뒷쪽에 있는 요소 (더 뒤에 있어서 트레일링)

 

 

▶ 버튼 종류

박스버튼, 일반버튼 (솔리드 버튼)
아웃라인 버튼, 고스트 버튼, 엠티 버튼
스플릿 버튼	: 주요 액션과 보조 액션 제공 시 사용
텍스트 버튼	: 글자로만 이루어진 버튼 (배경X, 테두리X)

 

 

 

▶ 텍스트 필드 컴포넌트

     : 컴포넌트 중 인풋(사용자가 입력할 수 있는 컴포넌트)에 해당하는 컴포넌트

텍스트 필드의 구조

 

인풋 컨테이너 (Input Container)	글자를 입력하는 부분
라벨/레이블(Label)	입력해야 하는 값이 무엇인지 알려주는 텍스트
텍스트(Text)	사용자가 직접 입력하는 텍스트
리딩 엘리먼트(Leading Element)	텍스트보다 더 앞쪽에 있는 엘리먼트
트레일링 엘리먼트(Trailing Element)	텍스트보다 더 뒤쪽에 있는 엘리먼트
헬퍼 텍스트(Helper Text)	유효성 검사 결과를 보여주거나 입력해야 하는 값의 가이드라인을 제공하는 도움말

 

 

 

▶ 플레이스 홀더 (= 자리표시자)

사용자가 입력해야 하는 예시를 제공하는 용도

 

※ 입력값의 조건을 적지 않는 것을 권장 ※

값의 조건은 헬퍼 텍스트로 안내

 

 

 

▶ 유효성 검사 = 벨리에이션 체크

     : 사용자가 입력한 텍스트가 유효한지 아닌지 검사해주는 것

       * 최대한 긍정적인 방향으로 사용자에게 안내할 것

• 구매나 소통의 과정을 방해하는 요소는 사용자에게 싫증을 유발
• 방해가 발생했을 때 자연스럽게 피하거나 해결할 수 있도록 도와줌

오류는 부정적인 인식을 주는 요소, 자연스럽게 제시함으로써 오류에 대한 부담과 거부를 최소화

 

 

 

🌱 오늘의 한 걸음

  일상생활을 하면서 디스플레이 화면에서 버튼을 누를 일은 정말 수도 없이 많다. 오늘 실습에서 실제로 버튼을 만들어보았다. 다양한 색을 넣어서 만들어보았는데 버튼을 만들면서 Primary color 의 중요성을 다시 한 번 느끼게 되었다. 주황색 버튼을 만들 때에는 나도모르게 당근마켓을 생각하게 되었다. 또한 예 / 아니오 버튼이 있을 때 보통 예의 버튼을 강조하려고 색을 넣는 경우가 있는데, 이 역시 시각적 계층 구조를 활용한 것이였다는 것을 알게 되었다.

 

 실제 웹사이트에서 사용되는 버튼 컴포넌트를 본 적이 있다. 엄청난 양의 버튼을 보았었는데 마스터 컴포넌트를 활용하여 다양한 사이즈와 색상(아마도 라이트모드 / 다크모드를 고려한 것 같았다) 의 버튼을 만든 모습이였다. 

 

 마지막으로 플레이스 홀더를 만들었는데, 플레이스 홀더를 만들고 개념을 알아가면서 입력값에 대한 중요성을 느꼈다. 실제로 아이디를 만드는 과정에서 텍스트 부분에 입력값의 조건을 적어놓는 바람에 아이디를 지운 적이 여러 번 있었기 때문이다. 사용자가 텍스트를 입력하는 과정에서 사용자가 입력값의 조건을 확인하는 것, 사용자가 오류를 느꼈을 때 그 오류에 대한 반응까지 고려하여 디자인 해야한다는 점에서 UX를 고려하는 것의 중요성을 알게 되었다.