[TIL] 0716

 

1. 오늘 학습 키워드

• 컬러 스타일, 폰트 스타일
• 컴포넌트, 인스턴스
• 디자인 시스템
• 버튼·텍스트 필드·컨트롤 컴포넌트

 

2. 오늘 학습한 내용을 나만의 언어로 정리하기

 

폰트 스타일

• 패밀리, 굵기, 크기, 행간, 자간 5가지
  
  • 적당한 행간 값은 가독성에 큰 영향을 미침
  • 행간이 너무 짧으면? 시선을 이동할 때 다음 줄을 찾기 어렵다. 또한 위아래 붙은 줄들이 계속 시야에 같이 들어와 읽는 걸 방해한다.
  • 행간이 너무 넓으면? 시선을 이동하면서 다음 줄을 놓친다. 또한 전체적인 문단이 벌어져 보여서 레이아웃을 해치기도 한다. 
  • 폰트 자체가 가진 기본적인 여백이 있기 때문에 서체마다 행간을 확인해야 한다. 
  • 일반적으로 통용되는 값: 제목과 같은 큰 폰트 ▶️ 120~135%, 본문▶️ 135~170% 사이

 

컴포넌트

• 구성품이라는 뜻이며, 파운데이션을 조합해 만들어지는 구성품을 이야기함.
• UI 디자인에서는 파운데이션을 조합해 만든 디자인 단위의 개념.
• 마스터 컴포넌트
  • 원본이며, 반복적인 디자인을 빠르게 하려고 디자인을 복사해서 사용할 수 있도록 해줌.
  • 마스터 컴포넌트를 복제 ▶️ 복제본, 인스턴스(컴포넌트의 속성을 그대로 이어받음)가 생김.
  • 컴포넌트를 수정하면 ▶️ 인스턴스에도 반영

 

버튼의 구조

• 컨테이너: 안에 있는 요소를 감싸고 있는 프레임
• 라벨/레이블: 버튼의 행동을 안내하는 글자
  UI에서 사용자가 입력하는 글자는 텍스트, UI가 사용자에게 '이렇게 하세요'를 안내하는 글자는 라벨
• 리딩 엘리먼트: 버튼 라벨보다 더 앞쪽에 있음
  엘리먼트는 요소라는 뜻
• 트레일링 엘리먼트: 버튼 라벨보다 더 뒤쪽에 있다는 뜻에서 트레일링(뒤따르는) 엘리먼트라고 부름
• 버튼의 높이는 컨테이너 안의 상하 여백 + 안에 있는 요소의 높이로 정해짐

 

텍스트 필드 컴포넌트

• 컴포넌트의 종류 중 인풋(무언가를 입력할 수 있게 하는 컴포넌트)에 해당
• 인풋 컨테이너: 글자를 입력하는 부분
• 라벨/레이블: 입력해야 하는 값이 무엇인지 알려주는 텍스트
• 리딩 엘리먼트: 텍스트 보다 더 앞쪽에 있는 엘리먼트
• 트레일링 엘리먼트: 텍스트 보다 더 뒤쪽에 있는 엘리먼트
• 헬퍼 텍스트: 유효성 검사 결과를 보여주거나 입력해야 하는 값의 가이드라인을 제공하는 도움말

실습

• 강의 중 진행한 실습 내용 정리🔽

[피그마 강의 실습] 3주차: 컬러 스타일, 폰트 스타일, 버튼·텍스트필드·체크박스·라디오 컴포

 

 

3. 학습하며 겪었던 문제점 & 에러

 

- 새롭게 알게 된 점 & 느낀점

• 버튼은 사용 목적에 따라 다양한 형태로 사용되는 컴포넌트다.
  오늘 실습한 기본 형태 외에도 새로운 버튼 유형을 발견하면 메모해두고 직접 만들어보는 연습이 필요하다고 느꼈다.
  내일 진행할 온보딩 실습(2)에서는 버튼을 더 다양하게 만들어보며 익숙해지는 시간을 가질 예정이다..

 

4. 내일 학습 할 것은 무엇인지

• 피그마 기초 4주차 복습 + 숙제
• 온보딩 (2)