[내일배움캠프_UX/UI] 1주차 화요일 TIL

TIL(Today I Learned)

 

- 오늘 계획의 진척도 확인
figma 활용법 2-3주자 강의 진도를 나갔다. (3주차는 아직 하고 있는 중)
추천 진도에 보니까 빠르게 듣고 복습을 추천하길래 최대한 따라가고 있다.

팀 과제는 어제 보다 진도가 나가긴 했는데

여전히 어색한지 할말이 없는건지 어떻게 해야할지 모르겠다.

팀장이라고 내 맘대로 이끌어 가는 건 아닌 것 같은데...

지금 뭘 해야할지 순서가 어떻게 되는건지

나는 아직도 갈피를 잘 못잡고 있는 느낌이다.

그래도 팀명도 정하고, 와이어프레임도 완성했다!

근데 더 좋은 아이디어가 나왔다. 내일 아침 또 새로울 듯.

 

- 어떻게 하면 계획을 더 잘 세워서 효율적으로 공부할 수 있을지
나름 계획대로 진행해가고 있는 것 같다.

어디까지 내가 할 수 있고 없는지를 계속 찾고, 알아가야할 것 같다.

- 9to9 온전히 학습에 몰입했는지, 그러지 못했다면 문제는?
  내일 좀 더 몰입하기 위해 내가 준비해야 할 것은?
오늘도 온전히 몰입하진 못했다

특히 오늘은 일이 있어서 외출도 하고 와서 그런지 집중이 정말 안되었다.

중간에 너무 졸려서 5분정도 엎드려있기도 했다.

딱 집중할 때 집중하고, 쉴 때 쉴 수 있도록 해야겠다.

 

- 오늘 공부 내용을 '내가 이해한 만큼' 정리해보기

오늘 강의내용은 개념적인 내용들이 많아서 꽤 어려웠다.

 

[2주차 강의]
프레임과 레이아웃
- 코드는 디자인을 네모난 박스로 만든다. =박스모델
- 프레임 : 코드 블록을 만든다.
                  개발에 필요한 속성을 적용할 수 있다.
- 그룹 : 개발에 적용 안 됨.  > 실무에서 사용이 적음
             디자인 정리의 편의성, 여러 요소를 한번에 움직일 때 

레이어
- 레이어를 쌓은 구조 = 코드 구조
   디자인 구조와 코드 구조와 같도록 만들어줘야함
- 순서 : 화면 위에서 아래로 쌓인다.
          상단이 먼저, 하단이 나중에 생긴 것
- Z축으로도 쌓인다. (Z값, Z인덱스 -> 높이)
  가로 x 세로 x 높이 = width, height, z-index

오토레이어
- 패딩 : 코드 블록 내부의 여백
- 보더 : 코드 블록의 테두리
- 마진 : 코드 블록의 외부 여백, 다른 코드 블록과 간격

- 오토레이아웃은 개체를 패딩으로 감싸 컨테이너를 만든다.
- 오토레이아웃으로 얼마의 간격으로 몇개를 쌓을 건지 편하게 만든다.

 

- 오토레이어 만드는 방법 2가지
1. 개체에 오토레이아웃 적용 > 패딩값을 가진 오토레이아웃 프레임 생성
2. 이미 있는 프레임에 오토레이아웃 적용 > 프레임 자제가 오토레이아웃으로 변환

 

* 복제 단축키 : ctrl +v -> ctrl + D

컨스트레인트
- 개체들의 움직임을 제한
- 부모가 바뀔 때 자식이 어디를 기준으로 변할지
- 파란색 점선이 어디에 고정된건지를 알려준다.

- 리사이징
Hug : 부모만 가능, 자식을 감싸고 자식에게 맞춰 변화
         자식을 움직이고, 자식이 변함
Fill : 자식만 가능, 부모에게 맞춰서 변화하는
        부모를 움직이고, 부모가 변함


[3주차 강의]
분기점 : 디스플레이 해상도에 따라 다른 화면
- 일반적으로 데스크탑, 태블릿, 모바일 3가지
- 분기점은 가로 길이를 기준으로
  가로가 1024px 이상이라면 데스크탑 화면입니다.
  가로가 768px 이상, 1024px 미만이라면 태블릿 화면입니다.
  가로가 768px 미만이라면 모바일 화면입니다.
- 최소 사이즈를 정해주는 것이 좋음

통계자료 웹사이트 (해상도, 웹브라우저/SNS 점유율 등)
https://gs.statcounter.com/screen-resolution-stats

그리드 : 가상의 기둥들
- 규칙적으로 만들기 위해
- 균형감, 완성도, 일관성을 위해 사용

- 칼럼을 12개로 만든다.
- 짝수면서 1,2,3,4,6,8,10,12로 유연하게 배치 가능
- 모바일 4개, 태블릿 2배한 8개, 데스크톱 3배한 12개가 일반적
- 원칙이라기 보다는 가이드라인으로 활용하는 것
- 유닛과 거터로 이루어져있음

- 960 : 60 유닛, 20 거터 (12칼럼)
- 1200 : 76 유닛, 24 거터
- 1440 : 96 유닛, 24 거터

8포인트 - 그리드 디자인 (여기서 그리드는 가이드 라인)
- 간격이나 크기를 8의 배수로 맞추는 방법
- UI 일정한 규칙이 있다면 예측이 가능하고, 효율성이 높아짐
- 왜 8? 어떤 배수도 정수로 떨어짐, 해상도가 변해도 유연하게 대처 가능

반응형과 적응형
- 반응형 : 해상도 변화에 실시간으로 반응
             편리하지만 만들기가 어려움
- 적응형 : 고정된 디자인, 해상도가 변해서 변하지 않거나 실시간으로 안 변함
             그 크기로 만들기만 하면 돼서 쉬움
섞어서 사용하는 것이 일반적

* Responsive 플러그인
화면마다 다르게 칼럼 설정 후
데스크탑, 타블릿, 모바일 화면 > input frame
실제 보여지는 디스플레이 화면 > Responsive frame
디스플레이 가로 길이를 줄이면 각각 화면이 나타남

디자인 시스템
: UI를 만들어 놓고 필요할 때 누구나 가져와서 사용할 수 있도록
  반복적인 UI를 효율적으로 관리하기 위해
  팀 전체가 일관적으로 이해할 수 있도록

- 장점 : 디자인 반복해서 사용할 수 있음, 시간 비용 절감
          누가 만들어도 품질이 동일
- 단점 : 다양한 UI를 하나로 통일하는 과정이 매우 오래 걸림
          필요 외의 UI가 과하게 많아질 수 있음
          창의성, 혁신이 줄어듬

- UI키트는 단어만 있는 셈, 어떤 식으로 써야한다는 규칙과 방법이 없음
- 디자인 시스템은 UI의 구조, 방법, 유의해야하는 부분까지 상세하게 적힌 문서
- 팀의 합이 잘 맞고, 인원 적다면 UI키트가 더 효율적일 수도 있음

- 파운데이션 : 컬러, 폰트, 레이아웃, 곡률, 간격 등 기본 재료
                  색상, 서체,아이콘, 레이아웃 (간격/여백, 곡률, 그리드, 고도)
- 컴포넌트 : 재료를 조합하여 만든 버튼, 체크박스, 탭, 바텀시트 등

- 아토믹 디자인 시스템 : 각각 구성 요소를 합쳐서 만드는 방법

컬러
- 빛의 삼원색 RGB는 가산혼합
- 색의 삼원색 CMY은 감산혼합
- 16진수 값의 HEX 코드를 사용

- 컬러프로파일 : 디스플레이가 코드를 해석할 때 사용하는 표
- 프로그램마다 컬러 프로파일 조금씩 다름
- 디지털 화면은 빛으로 되어 있기 때문에
  화면과 프로그램에 따라 차이 생길 수 있음

- 기본적으로 2-3가지 색상을 만든다.
  포인트(액센트) 컬러, 메인 컬러, 세컨더리 컬러
- 가장 밝은 단계부터 어두운 단계까지 10단계로 만든다.
- 흰색~검은색 회색조도 10단계로 만든다.

- 1:3:6 법칙 : 포인트 10%, 배경컬러 60%, 나머지 30%

*Coolors 플러그인
맘에 드는 컬러는 자물쇠로 잠그기
오른쪽 버튼으로 Delect해서 3개로 줄이기

- 작은 정사각형 2개 만들고 ctrl+D 반복해서 10개 복제
- 색상 피커에서 HEX -> HSL로 바꾸기
- 세번째 L값을 기준으로 10씩 빼거나 더하기 (0~100사이 값으로)
- 이름변경 Primary/50, Primary/100...Primary/900, Secondary/..., Tertiary/...

*Styler 플러그인
모든 사각형 선택 후 Generate Style
> 이름의 /로 색상 이름의 폴더 자동 생성, 한꺼번에 컬러 스타일 등록

*Auto Documentation 플러그인
Document all colors 선택
> 자동으로 색상 카드 생성

폰트
패밀리 : 폰트 이름
굵기 : 무게감, 얼마나 더 중요한지
크기 : 16px부터 시작, 2px씩 줄이거나 늘림 (본문에 사용)
        10px 미만은 사용하지 않는 걸 권장
        20px 이상일 때는 4px씩 차이나게 사용 (제목에 사용)
행간 : 라인-하이트, 글줄과 글줄 사이의 간격
        적절한 행간으로 가독성 높임
        제목 120~135%, 본문은 135~170% (150%이 제일 좋다고 알려짐)
자간 : 글자와 글자 사이의 간격

UI에 추천하는 폰트 패밀리
- Noto Sans 노토 산스
- Pretendard 프리텐다드
- Spoqa Han Sans 스포카 한 산스
- Min Sans 민 산스
- SUIT 수트