TIL. 2025/10/20
1. 오늘 학습 키워드
(3강) 비 디자인 환경 이해 및 비 요소 만들기 中
: 컬러스타일과 폰트스타일
1-1. 오늘의 학습 목표
- 2강 오토레이아웃/컨스트레인트 이전내용 복습
- 3강 이전내용 복습
- 3강 : ~3-5강.까지 강의 학습
- 16:30 ~ 17:00 담임매니저님과 상담
2. 오늘 학습 한 내용을 나만의 언어로 정리하기
: 컬러스타일과 폰트스타일에 대하여 배울 수 있었다.
각 강의 당 내용 요약 정리
3-3강. 컬러스타일
컬러/색상 의 정의?
고정되어있는 값이 아님. 디지털 환경과 인쇄 환경에 따라 달리 표현됨
RGB와 Hex Code
디스플레이 ; 빛의 3원색으로 구현됨, / 빛의 농도와 명암을 조절하여 색을 만듦.
(빨강,초록,파랑)빛을 더해가며 다른색을 만듦 > 가산 혼합(흰색) : (빛의 3원색은 색의 3원색과 반대임.>감산혼합)
RGB는 각각 255개의 색을 가지고 있음
컴퓨터가 색상을 표현할때, 16진수 값으로 변환하여 작성되는데, 그 코드 값이 헥스코드라고 함.
디지털 화면은 빛으로 구성되어 있기 때문에, 화면과 프로그램에 따라 컬러 프로파일이 조금씩 다르기 때문에 차이가 생길 수 있음
컬러스타일의 개념
:디자인에서 사용할 색상을 모아두는 팔레트
사용할 색상을 미리 정하여 모아두고, 사용하는 색상의 단계를 만드는 규직을 만들어야함 > WHY? UI는 규칙이 매우 중요한 개념이기 때문
>일반적으로 2~3가지 색상을 만듦. : '①포인트 컬러(프라이머리 컬러) + ②백그라운드 컬러 + ③세컨더리 컬러(뉴트럴)' 조합을 추천함
> 화면을 단순하게 구성하여, 주용한 부분에 더 주목시키기 위함
①포인트 컬러 = 엑센트 컬러 = ★프라이머리 컬러
: 정말 중요하고 핵심적인 부분에 사용
②백그라운드 컬러
: 배경색 > 전체적인 분위기를 만들어 줌. 즉, 버튼같이 사용자가 반드시 행동해야하는 부분에 적용하는 색상.
③세컨더리 컬러 = 서브 컬러
: 포인트 컬러를 뒷받침해주는 색상.
- 하나의 색상을 정하고 난 후, 색상의 확장성을 만들어야함 = 쉐이드(shade)
>추천 : 10단계로 색상 나누기
WHY? 가장 밝은 명도:화이트~가장 어두운 명도:블랙 이 0~100 명도차이가 나기 때문, 나누었을때,10 단위로 딱 떨어지기때문에 기준을 10단계로 한것임.
: 가장 밝은 색부터 가장 어두운 색으로 단계별로 만들어 두어야함. > 커뮤니케이션을 더 원활하게 하기 위해서 만들어진 규칙임.
1:3:6 법칙
포인트 컬러 비율 : 화면의 10%
배경색 비율 : 60%
세컨더리 컬러 비율 : 30%
**컬러스타일 등록법 : 직접 컬러스타일을 지정하여, 플러그인을 사용하여 만드는 방법을 진행하였음
10단계의 색상 정하는 방법
3가지 색상 조합을 지정하여 정한 뒤, 각각의 색상 설정 HEX>HSL 로 변경 뒤, 3번째 칸 숫자(ex,31)를 1~91까지 컬러를 만듦.
3가지 색상 모두 동일하게 지정 후, 이름 변경 Primary/900~50 , Secondary/900~50, Tertiary/900~50
plugin > styler 사용 > 각 이름별로 컬러 폴더링되어 컬러스타일이 만들어짐. (레이어 이름에 '/'사용해야 저절로 폴더링 되어 만들어짐)
참고자료(3)
https://emotion.co.kr/magazine/42/
>컬러스타일을 만들 때, 도움되는 개념
https://brunch.co.kr/@blckschrl/41
>UI 색상을 정할때 고려해야 하는 시각 원리들의 개념
https://brunch.co.kr/@chulhochoiucj0/17
>UI 색상이란 무엇인지
3-4강. 폰트 스타일
폰트 스타일(= 폰트 스케일) 개념
: 폰트를 모아둔 목록, 일정한 규칙에 따라 정렬된 하나의 세트
폰트스타일 구성
-패밀리(Family)
: 폰트 종류, 폰트 이름
-굵기(=무게감, Weight)
: '무게감' > 강조,중요도
-크기(Size)
: 폰트의 크기(일반적으로 16px로 시작), 10px미만으로 사용하는건 권장하지 않음.
-행간(Line-height)
: 폰트의 높이를 조절할 때, 행간, 즉, 글자 줄 사이의 간격. / 글자 크기 + 사이 간격
절대적인 행간 값은 없음 > 어떠한 간격이 가독성에 좋은지 공부해야 함. (서체마다 행간을 확인해야함.) > 일반적으로 150%를 추천.
-자간(Letter-spacing)
: 글자와 글자사이의 간격
**컬러스타일 등록법
(컬러스타일을 지정한 것과 매우 유사함.)
1)폰트는 동일하게 지정, 14px,16px, 18px / 행간 150/ 의 텍스트 박스 생성 후, 레이어 이름 Body/14~18px로 각각 지정
2)폰트는 동일하게 지정, 굵기: semibold / 14px,16px, 18px / 행간 135/ 의 텍스트 박스 생성 후, 레이어 이름 tittle/14~18px로 각각 지정
plugin > styler 사용 > 각 이름별로 폰트스타일 만들어짐.
참고자료(3)
https://brunch.co.kr/@blckschrl/40
>폰트 속성의 개념
https://mesign.tistory.com/23
>실무적인 관점에서 폰트 스타일을 만드는 방법
https://m3.material.io/styles/typography/overview
>머티리얼 디자인 - 폰트 / 종합적인 디자인 시스템 교과서 > 특히 타이포를 사용하는 부분이 잘 나와있음
3-5강. 마스터 컴포넌트와 이스턴트
3. 학습하며 겪은 문제/해결방법
- 문제1.
: 폰트들을 플러그인을 사용하여 폰트스타일을 만드는 과정에서 오류가 생김
> 14px 폰트가 18px로 커짐
WHY?
>실제 14px 폰트레이어 이름을 18px로 하여, 실제 14px인 레이어가 레이어 이름 18px와 동일하게 변경됨.
4. 내일 학습 할 것은 무엇인지
: 오늘 미처 학습하지 못한, 3-3강을 마저 수강할 계획, 이 후 3개의 강의를 시청 한 후, 디자이너 2기 퀘스트 제출까지 진행할 예정이다.
'내일배움캠프 사전캠프' 카테고리의 다른 글
| [내일배움캠프 사전캠프] DAY.8 (3강) 버튼, 텍스트 필드, 컨트롤 컴포넌트 학습 / (4강) 오프닝 (0) | 2025.10.22 |
|---|---|
| [내일배움캠프 사전캠프] DAY.7 커리큘럼 설명회 / (3강) ~3-7강까지 수강완료 (0) | 2025.10.21 |
| [내일배움캠프 사전캠프] DAY.5 (3강) 비 디자인 환경 이해 및 비 요소 만들기 / (2강) 피그마 핵심 개념 학습-수강완료 (0) | 2025.10.17 |
| [내일배움캠프 사전캠프] DAY.4 (2강) 피그마 핵심 개념 학습 (0) | 2025.10.16 |
| [내일배움캠프 사전캠프] DAY.3 (1강) UXUI 기초 개념 이해 / 수강 완료 (0) | 2025.10.15 |