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

TIL(Today I Learned)

 

- 오늘 계획의 진척도 확인
figma 활용법 4주차까지 완강했다.

어제 못한 3주차 과제도 하고, 4주차 과제는 아직 하는 중이다.팀 프로젝트는 컨셉이 새롭게 바뀌었다.유튜브 화면을 조금씩 수정해서 멋있는 페이지들이 완성되었다.각자 개인 페이지를 만들어야하는데,나는 썸네일을 미스터리 컨셉으로 만들어봤다.밥시간마다 산책간다는 말이 뭔가 미스터리한듯해서 그렇게 만들어봤다.소개 내용이랑 사진은 팀원들이 재밌게 잘 만들어서,처음엔 진지하게 썼다가 나도 조금 재밌게 보이도록 했다.재밌는 짤을 찾으면서 해서 재밌었다.

 

- 어떻게 하면 계획을 더 잘 세워서 효율적이고 몰입해서 공부할 수 있을지
오늘도 온전히 몰입하진 못했다

확실히 점심시간만 지나면 집중력이 떨어진다.하기 싫고, 눕고 싶고, 자고 싶은 마음이 생긴다.쉬는 시간을 딱 정해놔야할 것 같다.

 

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

오늘도 어려웠다.

강의 내용만 따라가는 건 괜찮은데

저걸 어떻게 적용해야할지 잘 모르겠다.

또 단어들이 유난히 헷갈리고 익숙치가 않다.

인스턴트, 배리언츠, 프로퍼티 ...

익숙해지도록 많이 실습해보고 복습해야겠다.

 

[4주차]

컴포넌트
- 모양 < 기능이 중요
- 형태로 구분하지 말고, UI의 목적/기능에 초점을 두기

- 목적에 따라 6개로 분류
1. 액션 : 사용자가 중요한 행동을 수행할 때 사용해요.
2. 인풋 : 사용자의 입력을 받을 때 사용해요.
3. 인포메이션 : 사용자에게 서비스의 상태나 안내 사항을 전달할 때 사용해요.
4. 컨테이너 : 컴포넌트 여러개가 결합되어 하나의 덩어리를 이루는 컴포넌트에요.
5. 내비게이션 : 사용자가 페이지를 이동할 때 사용해요.
6. 컨트롤 : 사용자가 설정이나 값을 수정할 때 사용해요.

의사 상태 (수도 스테이트)
: 기본 속성은 유지한 채, 상황에 따라 다른 형태와 모양을 하는 경우
- 의사 상태의 종류는 매우 다양함
- 구현이 가능한 것과 없는 것이 있음

- 마스터컴포넌트
반복적인 디자인을 빠르게 복사해서 쓸 수 있음
복제본을 한번에 수정하거나 편집 가능

- 인스턴트
마스터컴포넌트의 복제본
수정하면 마스터컴포넌트에 반영되지 않음
마스터컴포넌트 지워도 남아있음
연결 해제하면 일반 프레임이 됨

배리언츠, 프로퍼티
: 가상의 상태에 따라 변화와 변경을 만들 수 있는 기능
반복적인 과정을 효율적으로 하기 위해 사용
둘 다 디자인에 변화가 있지만 파운데이션의 변화를 기준으로
색상, 텍스트 색상, 크기들이 바뀌면 배리언츠
색상, 폰트, 아이콘 크기 등의 값이 동일하면 프로퍼티

-배리언츠
: 컴포넌트의 가상의 상태를 만들 때 사용

-프로퍼티
: 디자인 구조가 바뀌지 않는 선에서 변경할 수 있는 요소를 다룰 때 사용

1. Boolean : Y or N를 선택하는 형식
컴포넌트 요소를 보이거나 안 보이게 함
2. Instance swap : 인스턴스를 다른 인스턴스로 교체 (프레임, 도형은 안됨)
아이콘 변경하기 쉬움
3. Text : 텍스트 편집을 용이하게

버튼 컴포넌트
- 종류 : 액션
- 기능 : 누름으로써 중요한 동작을 수행하는 요소
              * 행동유도성(어포던스) : 상호작용이 가능하다는 시각적인 단서를 제공해야 한다.
                 버튼을 디자인할 때 버튼의 목적을 우선 생각해서 설계
- 구조
   1. 컨테이너 : 버튼 담는 박스
   2. 레이블 : 버튼의 행동을 안내
      (입력하는 모든 글자 Text, 어떻게 하라고 안내하는 가이드 글자는 Label)
   3. 리딩 엘리먼트 : 버튼 앞쪽에 위치한 요소
   4. 트레일링 엘리먼트 : 버튼 뒤쪽에 위치한 요소

- 종류
  1. 박스 버튼, 일반 버튼, 솔리드 버튼, Filled 버튼 : 색이 꽉찬 면으로 된 버튼
  2. 아웃라인 버튼, 고스트 버튼, 엠티 버튼 : 선으로만 이루어진 버튼
  3. 스플릿 버튼 : 보조 액션이 더해져 나눠있는 버튼
  4. 텍스트 버튼 : 글자로만, 주요 액션에 비해 중요도가 낮은 기능을 수행

텍스트필드 컴포넌트
- 종류 : 인풋
- 기능 : 사용자가 무언가를 입력할 수 있게하는 컴포넌트
- 구조
   1. 인풋컨테이너 : 글자 입력하는 부분
   2. 레이블 : 입력해야하는 값이 무엇인지 알려주는 텍스트
   3. 리딩 엘리먼트 : 텍스트 앞쪽에 위치한 요소
   4. 트레일링 엘리먼트 : 텍스트 뒤쪽에 위치한 요소
   5. 헬퍼 텍스트 : 유효성 검사, 입력 값의 가이드라인 제공하는 도움말

플레이스 홀더
: 사용자가 입력해야 하는 예시
  글자 입력하기 시작하면 사라짐
- 조건 값은 복잡하거나 어려우면 까먹을 수 있어 적지 않음
- 조건 대신 예시를 넣음, 조건은 헬퍼 텍스트에

밸리데이션 (유효성 검사)
: 사용자가 입력한 텍스트가 유효한지 아닌지를 검사
- 사용자의 목적 달성 과정을 방해하는 요소가 많을 수록 싫증이 남
  방해 요소를 자연스럽게 피하거나 해결할 수 있도록 돕는 것이 중요
  부정적인 문구보다는 긍정적인 방향으로 안내
  오류에 대한 부담이나 거부를 최소화