TIL_1W2D_프레임과 컨스트레인트

디자인 카타
오늘의 토픽 - 점수 평가에 사용할 컴포넌트, 사용성에 어떤 차이가 있을까요?

선택 B안
둘의 디자인을 놓고 보았을 때 주목도가 높은 것이 B안이라고 판단
대중적으로 라디오 버튼을 사용하는 빈도가 높은 것을 반영

A안을 선택하지 않은 이유로는 주목도가 덜하고 깔끔함이 덜하다고 판단함 다만, B안이 2, 4, 6, 8, 10이 아닌 최고점을 5로 하여 1, 2, 3, 4, 5의 형식일 때 더 보기 편하고 와닿을 것이라는 생각이 듦

컨스트레인트는 제약(조건), 제한이라는 뜻을 지니며 오토레이아웃을 오토레이아웃답게 만들어주는 기능임
오토레이아웃 안에 있는 자식 개체들이 움직이는 조건인데
더 정확히는, 부모 컨테이너의 크기가 변할 때 자식 컨테이너는 어디를 기준으로 변할까?를 정할 수 있음

컨스트레인트의 조건이 바뀌면 부모 프레임 안에 있는 자식 프레임의 움직임도 변화
이것이, 컨스트레인트의 핵심

파란색 점선은 Child Container가 Parent Container에 대해 가지는 위치 조건임
즉, 컨스트레인트
자식 컨테이너는 부모 컨테이너의 위와 왼쪽에 붙은 채로 크기 조정이 된다는 뜻
정렬이라는 건 단순히 부모 컨테이너 안에서 어디에 정렬할 것인가 뿐 아니라 어디를 기준으로 이 요소를 고정할 것인지도 다룸

밑의 사진을 보자
컨스트레인트 조건은 L+R과 Top으로 되어있는데 부모 프레임을 늘린다고 A, B, C의 간격은 변화하지 않음

리사이징은 프레임을 오토레이아웃으로 감싸는 순간, Fixed 외의 다른 사이즈 값이 생기는 것
부모 리사이징 값에 따라 자식 리사이징 값 영향
반대로 자식 리사이징 값에 따라 부모 리사이징 값도 영향

자식이 Fixed일 때 부모는 Hug가 가능하나 자식이 Fill 이여야 한다면 부모는 Fixed가 됨
둘 다 Fixed일 수 있음

피그마에서 설정할 수 있는 포지션 종류

Static, Fixed, Sticky는 프론토타입 패널에서 설정할 수 있음
다만 Absolute만 포지션 패널안에서 설정할 수 있으며, 오토레이아웃 프레임 안에 있을 때만 사용할 수 있음
오토레이아웃에 영향 받지 않고 일반 프레임 안에 있는 것처럼 자유롭게 배치할 수 있음

2주차 숙제
조금은 미숙하고 헷갈리는 부분이 있지만 그럼에도 완성하였다는 것에 의미를 둘 것임
헷갈리는 부분은 힌트를 확인하거나 해설을 보며 해결해 봄

파운데이션은 UI를 구성하는 가장 작은 알갱이이자 기초 재료임
파운데이션의 구성으로는
색상 Color
서체 Font, Typography
간격 Spacing & 여백 Gap
곡률 Radius
그리드 Grid
고도 Elevation - 1주차에서 배운 높이의 개념
아이콘 Icon
가 있음

UI는 버튼, 체크박스나 라디오, 탭 등 우리가 화면에서 볼 수 있는 모든 요소를 뜻함
UI는 기초 재료인 파운데이션과 이 파운데이션을 조합해 만드는 컴포넌트로 나뉨
버튼이라는 컴포넌트를 만들기 위해선 파운데이션부터 만들어야 됨

디스플레이는 빛의 3원색으로 구현되는 화면임
즉, 빛의 농도와 명암을 조절해 여러가지 색을 만듦

빛의 3원색은 빨강, 초록, 파랑이며 모일수록 밝아짐
빛을 더해가며 다른 색을 만들기 때문에 가산혼합이라고 부름
RGB는 빛의 3원색 첫글자를 따서 쓴 것임

컴퓨터는 빨강, 초록, 파랑을 각각 256가지의 값으로 보여줄 수 있음
각각 숫자를 16진수로 변환해서 읽는데
이 때, 16진스 값을 헥스코드라고 부름
헥스코드 의미를 줄여서 말하면, 빛의 3원색 정보를 16진법으로 변환한 코드임

색의 3원색은 빨강(Magenta), 노랑(Yellow), 파랑(Cyan)이며
색을 모두 섞으면 까만색이고, 덜어내야 하기 때문에 감산혼합이라고 부름

빛의 색상에 절대적 기준 없어 디스플레이는 색상을 자기만의 기준으로 해석함
컬러 프로파일은 디스플레이가 코드를 해석할 때 사용하는 색 기준표를 말함
전세계적으로 사용할 수 있어야 해서 공신력 있는 기관이나 기업에서 만들어 배포함

정교하게 색상을 튜닝하는 것을 캘리브레이션이라고 함

컬러 스타일은 디자인에서 사용할 색상을 모아두는 팔레트임
대부분 포인트 컬러 하나와 흰색 배경과 글자나 다른 UI에 쓸 뉴트럴 컬러로 사용함
포인트 컬러는 사용자가 반드시 행동해야 하는 부분에만 적용함

색상을 정하면 가장 밝은 단계부터 가장 어두운 단계까지 총 10단계를 만드는데 이 하나하나를 쉐이드라고 함

1:3:6 법칙은 프라이머리 컬러를 화면의 10%, 전체적인 배경인 흰색을 60%, 포인트 컬러를 돋보이게 하기 위한 세컨더리 컬러를 나머지 30% 사용하는 법칙임

피그마에서 색상 팔레트 만들기

컬러 스타일을 만들 때 도움되는 개념

폰트 스타일은 디자인 시스템에서 폰트를 모아둔 목록임
다른 말로는 폰트 스케일이라고 하며 스케일은 일정한 규칙에 따라 정렬된 하나의 세트를 뜻함

폰트 스타일의 구성
패밀리 Family 폰트의 종류 및 이름
굵기(= 무게감, Weight)
단순히 굵은 게 아닌 글자가 얼마나 중요한지를 알려주는 무게감이라는 표현 사용
디자이너는 굵기 이름으로 이야기 하는 걸 선호, 개발자는 굵기에 할당된 숫자로 이야기 하는 걸 선호

크기 Size
일반적으로 16px 부터 시작하며 2px +-, 20px 이상일 때는 4px+- 차이나게 하는 경우가 많음
20px 미만은 본문, 이상이면 제목에 사용함
크기가 너무 작으면 읽기 힘들기 때문에 10px 미만으로 사용하지 않는 걸 권장

행간 Lind-height 글줄과 글줄 사이의 간격
%와 같은 상대적 단위나 px처럼 고정 단위로 나타낼 수 있는데 피그마에서는 % 단위로 나옴
행간의 값은 글자의 크기 100% + 그 사이의 간격 n%(을 합친 값)

서체마다 행간을 확인해야 하는 이유
폰트 자체가 가진 기본적인 여백이 있는데 그 기본값은
폰트마다 모두 다름

일반적인 행간 값
제목처럼 굵고 큰 폰트는 120~135%, 본문의 경우 135~170% 사이로 하는 것이 좋음
본문의 경우 150%로 하는 게 제일 좋다고 알려져 있음

자간은 글자와 글자 사이의 간격 행간과 마찬가지로 상대단위와 고정단위 모두 사용할 수 있음