[PM부트캠프6기] 0311 Today I learned

오늘은 우아한 형제들 아티클 읽기와 피그마 3주차 수강할 계획이다.

앞으로 아티클 읽기는 따로 인사이트 카테고리로 작성할 예정! TIL에서는 강의 듣고 수강한 내용만 작성할 것이다.

---

피그마

[chapter3]

• 파운데이션: UI를 구성하는 가장 작은 알갱이이자 기초 재료
• UI: 버튼, 체크박스나 라디오, 탭 등 우리가 화면에서 볼 수 있는 모든 요소들 → 기초 재료인 파운데이션과, 이 파운데이션을 조합해 만드는 컴포넌트로 나눌 수 있다.
• 파운데이션 구성: 색상(Color), 서체(Font, Typography), 간격, 여백(Spacing, Gap), 곡률(Radius), 그리드(Grid), 고도(Elevation), 아이콘(Icon) → 사람들마다 분류와 이름이 조금씩 다를 수 있다.
• 컬러 스타일: 디자인에서 사용할 색상을 모아두는 팔레트
  • 핸드폰에서 본 것과 컴퓨터로 볼 때 색상이 조금씩 다르게 느껴지는 것은 자연스러운 현상임.
  • RGB와 HEX Code
    • RGB: 빛의 3원색 → 빨강(R), 초록(G), 파랑(B): 컴퓨터는 이것들을 각각 256가지의 값으로 보여주기 가능.
    • HEX Code: 이 각각의 숫자를 컴퓨터는 16진수로 변환한 값.
  • 컬러 프로파일: 디스플레이가 코드를 해석할 때 사용하는 색 기준표
    • 컬러 프로파일마다 더 잘 보여주는 색상들이 조금씩 다르다.
    • 디스플레이 자체 뿐만 아니라, 프로그램 자체에도 컬러 프로파일이 조금씩 다르다.
  • 팔레트 색상을 아무렇게나 사용하는게 아닌 사용할 색상들을 미리 정리해두고 색상의 단계에 규칙을 만든다.
  • 컬러 스타일 만드는 일반적인 방법
    • 기본적으로 2~3가지 색상으로 만든다.
    • 색상을 정했다면, 가장 밝은 단계부터 가장 어두운 단계까지 총 10단계로 만든다. → L값을 기준으로 10씩 더하고 빼주면서 만들기.
    • 1:3:6 법칙
      • 가장 중요한 색상, 즉 포인트 컬러(Primary)의 비율을 화면의 10% 정도만 사용.
      • 전체적인 배경(Tertiary)인 흰색이 60% 정도 차지하게 사용.
      • 포인트 컬러를 돋보이게 하기 위한 세컨더리 컬러(Secondary)로 나머지 30%을 사용.
    • 컬러 스타일 만들 때 Cooler(색상 지정), Styler(탭에 저장) 플러그인을 사용한다.
    • 실무에서는 브랜드에 어울리는 색상을 고르는 과정이 매우 어렵게 적용된다.
  • 폰트 스타일(=폰트 스케일): 디자인 시스템에서 사용할 폰트를 모아둔 목록, 스케일은 일정한 규칙에 따라 정렬된 하나의 세트를 뜻함.
    • 폰트 스타일의 구성
      • 패밀리(Family): 폰트의 종류
      • 굵기(=무게감, Weight): 굵기, 디자이너는 Thin, Light, Regular 등 굵기 이름으로 이야기하는 걸 선호 // 개발자는 100, 200 등 굵기에 할당된 숫자로 이야기하는 걸 더 선호
      • 크기(Size): 크기,  일반적으로 16px 부터 시작하고, 2px 씩 줄이거나 늘림. 20px 이상이면 4px씩 차이 둠.
      • 행간(Line-height): 글자 줄 사이의 간격, 적당한 행간 값은 가독성에 큰 영향을 준다. 
      • 자간(Letter-spacing): 글자와 글자 사이의 간격
    • 실제로 제작할 때, 본문 스타일 / 제목 스타일 나눠서 제작하며, 폰트 패밀리를 하나만 생각하고 기본 16px로 하여 2px씩 크게/작게 제작한다.
  • 마스터 컴포넌트와 인스턴스 
    • 컴포넌트: UI디자인에서는 파운데이션을 조합해 만든 디자인 단위의 개념.
    • 마스터 컴포넌트: 피그마에서 쓸 수 있는 컴포넌트 기능의 핵심, 반복적인 디자인을 빠르게 하기 위해 디자인을 복사해서 사용할 수 있도록 해줌. 복사된 디자인들을 한번에 수정하거나 편집 가능
      • 마스터 컴포넌트는 원본 → 변하지 X
      • 수정이 필요하면 그냥 수정하고, 지우고 싶다면 그냥 지우면 됨.
    • 인스턴스: 마스터 컴포넌트의 복제, 컴포넌트의 속성을 그대로 이어 받음, ◇ 아이콘 붙어있음.
    • 마스터 컴포넌트와 인스턴스의 관계
      • 컴포넌트를 수정하면 인스턴스에도 반영된다.
      • ★ 인스턴스를 먼저 수정하면 컴포넌트를 수정해도 반영 X ★
      • 컴포넌트를 지우더라도 인스턴스는 남아 있다. 다만 인스턴스를 편집하거나 수정하려면 컴포넌트 복구해야함.
      • 연결을 해제하면 인스턴스는 컴포넌트와 분리되고, 일반 프레임으로 변경된다.
  • 디자인 시스템: 일관적이고 반복적으로 사용하는 UI를 미리 만들어놓는 시스템.
    • UI키트와의 차이점: UI키트는 단어만 있는 셈. 즉 이렇게 디자인해야 하고, 이렇게 써야한다 등 사용하는 방법과 규칙은 없고 단순히 UI를 모아둔 것이다. 반면에 디자인 시스템은 UI구조, 쓰는 방법, 유의해야 하는 부분까지 상세하게 적혀 있는 문서이다.
    • 장점: 시간과 비용 감소, 누가 만들든 동일한 품질의 제품 설계 가능
    • 단점: 하나로 통일하는 과정이 오래걸림, UI가 과하게 많아져서 노동력이 커질 수 있음, 새로운 디자인이 필요할 때 혁신이 줄어듦.
    • 아토믹 디자인 시스템 원리를 바탕으로 가장 작은 원자 요소들을 설계하고, 그 원자들을 모으고 결합하는 규칙을 만들어서 우리가 아는 버튼, 체크박스, 바텀시트, 모달 등을 만들어 낸다.
  • UI 디자인 기본
    • 분류(임의적):
      • 액션(Action) : 사용자가 중요한 행동을 수행할 때 사용 → 버튼
      • 인풋(Input) : 사용자의 입력을 받을 때 사용 → 셀렉트박스
      • 인포메이션(Information) : 사용자에게 서비스의 상태나 안내 사항을 전달할 때 사용 → 스낵바, 라벨 등
      • 컨테이너(Container) : 컴포넌트 여러개가 결합되어 하나의 덩어리를 이루는 컴포넌트 →  카드, 바텀시트, 리스트
      • 내비게이션(Navigation) : 사용자가 페이지를 이동할 때 사용 → 네비게이션 바, 앱 바, 화면 하단의 탭 바, 사이드바 등
      • 컨트롤(Control) : 사용자가 설정이나 값을 수정할 때 사용 → 라디오, 체크박스, 스위치 등
    • 의사 상태 (Pseudo State): 컴포넌트의 가상 상태
      • 여기서 의사란, 가짜의 가상의 뜻임.
      • EX) 버튼에 마우스를 올렸을 때 색깔이 바뀌는건 실제 버튼이 바뀐게 아니라 버튼이 가진 가상의 상태를 나타내는 것임.
      • 주의: 컴포넌트마다 쓸 수 있는 / 없는 의사 상태가 존재한다. → 버튼인데 체크된 것은 불가능, 체크박스가 링크인건 존재할 수 없음.
  • 버튼 컴포넌트: 액션에 해당하는 컴포넌트, 누름으로써 중요한 동작을 수행하는 요소
    • 행동 유도성: 행동을 유도하는 속성 → 상호작용이 가능한 물체는 상호작용이 가능하다는 시각적인 단서를 제공해야함. 즉, UI의 개념과 목적을 최우선으로 고려할 것.
    • 종류
      1. 박스 버튼, 일반 버트: 일반적으로 아는 박스버튼, 색상이 안에 꽉 차있어서 솔리드 버튼이라고도 불림.
      2. 아웃라인 버튼, 고스트 버튼, 엠티 버튼: 테두리가 있고 속이 빈듯한 형태의 버튼
      3. 스플릿 버튼: 주요 액션과 관련된 보조 액션을 제공해야 할 때 사용하는 버튼, 주요와 보조가 나뉨.
      4. 텍스트 버튼: 배경색이나 테두리 없이 글자로만 이루어진 버튼

버튼의 구조

• 버튼 만드는법 

1. 버튼의 라벨이 될 텍스트부터 작성
2. 오토 레이아웃 설정
3. 스타일 적용(배경,폰트 적용)
4. 상하 좌우의 내부 여백(패딩)을 적용
5. 곡률 조정
6. 컴포넌트(디자인 패널 상단의 다이아몬드 모양) 누르기 → 단축키: ctrl + alt + k

• 텍스트필드 컴포넌트: 인풋에 해당하는 컴포넌트, 인풋은 사용자가 무엇을 입력할 수 있게 하는 컴포넌트
  • 플레이스 홀더: 자리표시자 - 사용자가 입력해야 하는 예시를 제공, 사용자가 글자를 입력하기 시작하면 사라지고, 모두 지우면 다시 나타남
    • 유의할 점: 입력값의 조건을 적지 말고 입력 예시를 넣어줄 것.
  • 유효성 검사: 텍스트필드에서 중요한 건 사용자가 입력한 텍스트가 유효한지 아닌지를 검사해주는 것
    • 하는 이유: 사용자가 텍스트를 입력했을 때 자꾸 문제가 있다고 방해하면 싫증 날 것임. 그래서 이때 적절한 문구와 안내로 사용자가 행동을 완료할 수 있도록 유도해줘야함.
    • 유의할 점: 부정적인 문구보다는 최대한 긍정적인 방향으로 안내 (ex) 최소 4자 이상의 이름이 필요합니다.
  • 텍스트 필드 만드는 법

1. 텍스트 레이어 만들기
2. 오토레이아웃을 적용하고 스타일을 적용
3. 인풋 컨테이너 위에 텍스트 레이어(라벨) 만들기
4. 인풋 컨테이너 아래에 텍스트 레이어(헬퍼 텍스트) 만들기
5. 라벨, 인풋컨테이너, 헬퍼 텍스트를 오토레이아웃으로 묶고 컴포넌트로 만들기
6. 세개 모두 프레임 리사이징을 fill로 변경해주기. + 플레이스홀더 왼쪽 정렬

• 컨트롤 컴포넌트: 사용자가 선택지를 특정할 수 있도록 하는 요소 
  • 종류: 체크박스, 라디오, 스위치(토글), 슬라이더 등
  • 참고할 점
    • 컨트롤 요소의 최소 터치 영역: 요소 자체는 작더라도 그 주변으로 최소 크기 범위 만들 것.
    • 컨트롤 요소의 라벨: 라벨을 눌러도 요소가 작동하게 할 것.
    • 컨트롤 요소와 라벨의 정렬: 요소와 라벨의 세로를 같게할 것.
• 체크박스 컴포넌트: 여러 선택지 중 1개 이상을 선택할 때 사용하는 컨트롤 컴포넌트
  • 의사 상태: 체크되거나 되지 않거나 (→색상차이)
  • 특징: 여러개 선택 가능, 아무것도 선택 안해도됨, 하위 항목 있을 때 일부 선택 가능
  • 만드는 법

1. 가로 24px, 세로 24px의 프레임 만들기
2. 가로 20px, 세로 20px의 프레임(container) 만들기
3. check 아이콘을 컨테이너 안에 넣기 → <shift> 누른채 위치 설정
4. 스타일 적용 → 컨테이너 배경은 프라이머리 색상 // 체크 아이콘은 흰색 적용
5. 컨테이너를 24px 프레임안에 넣고 컴포넌트로 설정(=다이아몬드 누르기)

 

• 라디오 컴포넌트: 여러 선택지 중 하나를 선택할 수 있는 컴포넌트
  • 디자인은 사람들마다 제각각이다.
  • 의사 상태: 선택되거나 되지 않거나 (→색상차이)
  • 특징: 여러개 동시 선택 X, 아무것도 선택하지 않는것 X (반드시 선택해야함)
  • 만드는 법

1. 1. 가로 24px, 세로 24px의 프레임 만들기
   2. 가로 20px, 세로 20px의 프레임(container) 만들기
   3. 컨테이너 곡률을 10으로 적용
   4. 컨테이너 안에 12*12 프레임을 가운데에 넣어주고 이름을 Radio로 변경하기
   5. 라디오 곡률을 6으로 적용
   6. 스타일을 적용하고 컴포넌트 만들기 → 컨테이너 배경은 프라이머리 색상 // 라디오의 배경은 흰색 적용

CSS에서 배운 개념들이랑 나름 유사한 것 같다는 생각이 듦.

버튼이랑 텍스트 필드에서는 텍스트부터 쓰고 시작하는 것임. 라벨이든, 안에 들어가는 플레이스 홀더든, 밖에 있는 헬퍼 텍스트 등 다 따로 제작해야하고 도형을 그리는게 아니라 프레임으로 합쳐서 컴포넌트로 만드는 것임.

컨트롤 컨테이너에서는 바깥 프레임, 컨테이너 프레임, 세부 프레임 다 나눠서 제작하고 합치는 것임. 

★ 컴포넌트는 모양이 아니라 기능이 중요 ★
→ 모양, 색상이 달라도 우리는 버튼같이 생기면 버튼으로 받아들임. 즉 버튼이 하는 일을 기준으로 생각하기 때문 (→UI의 기능주의적 관점)