오늘 한일
-디자인 카타 작성
-피그마 기초 강의 4강(-3)
-피그마 기초 강의 3강 완강 및 과제 제출
-피그마 기초 강의 2강 및 과제 복습
-커리어세션
1/2 할일
-피그마 기초 강의 4강 완강 및 과제 제출
-피그마 기초 강의 3강 및 과제 복습하기
-머티리얼 디자인 이어서 확인
오늘의 강의 내용
(3강)-8부터
UI만들기 실습해보기
컴포넌트를 분석하고 공부할 때 컴포넌트의 형태가 아니라 정의와 뜻에 집중할 것
버튼 컴포넌트(액션 종류):누름으로써 중요한 동작을 수행하는 요소
버튼 설계시 유의할 점
-우리가 직관적으로 아는 것들이 존재
-행동 유도성(Affordance)
=>버튼 설계시 누를 수 있다는 충분한 시각적 힌트 필요
텍스트필드 컴포넌트(인풋 종류):사용자가 무언가를 입력할 수 이게 하는 컴포넌트
플레이스홀더(자리표시자):사용자가 입력해야 하는 예시를 제공
유의점
-플레이스홀더는 값을 입력하기 시작하면 사라지기에 입력값의 조건을 적지 않는 것 권장
-플레이스홀더에는 조건 대신 입력 예시를 입력
*텍스트필드에 입력해야 하는 값의 조건은 헬퍼 텍스트로 작성
유효성 검사(=벨리데이션 체크):사용자가 입력한 텍스트가 유효한지를 검사
유효성 검사 시 주의사항
-오류는 부정적 인식을 주는 요소이기에 자연스럽게 차선책, 해결책을 제안
->오류에 대한 부담이나 거부를 최소화해야 함
-부정적 문구보다 최대한 긍정적 방향으로 안내 필요
*사용자가 조건과 다르게 입력했을 경우 오류를 알려주는 것이 아닌 왜 오류인지를 알려주기
컨트롤 컴포넌트:사용자가 선택지를 특정할 수 잇도록 하는 요소
체크박스 컴포넌트:여러 선택지 중 1개 이상을 선택할 때 사용
라디오컴포넌트:여러 선택지 중 1개를 선택할 때 사용
-라디오는 기본값으로 반드시 무언가 선택되어 있어야 함
체크박스와 라디오, 아이콘은 기본 크기를 24PX로 만드는 것을 권장_
모양, 색상이 달라도 우리가 버튼이라고 인식하는 이유
->버튼의 생김새가 아닌 버튼의 기능을 기준으로 생각=>UI의 기능주의적 관점
UI 컴포넌트 만들어 보기
아직은 강의 보고 따라서 만들기에 급급하다
무의식적으로 만들 수준까지 계속 연습해야 한다는데 그런 날이 오겠지,,!!(4강)-3까지
컴포넌트 프로퍼티를 이해하고 피그마에서 베리언츠와 프로퍼티를 만들고 관리해보기
컴포넌트 프로퍼티는 베리언츠/프로퍼티로 나눌 수 있음
베리언츠(변종)
:컴포넌트가 가질 수 있는 또 다른 모습을 만들 수 있게 하는 컴포넌트 기능
->컴포넌트의 가상의 상태를 만들 때 사용
프로퍼티(속성)
:디자인 구조가 바뀌지 않는 선에서 변경할 수 있는 요소를 다룰 때 사용
베리언츠와 프로퍼티를 고르는 기준
-컴포넌트에 적용된 파운데이션이 변경되는지를 기준으로 함
파운데이션 요소가 변화(아이콘의 크기, 색상, 폰트, 간격이 변화)->베리언츠
디자인 변화, 파운데이션 요소 변화X->프로퍼티
버튼 의사 상태 만들기(Pressed:누르고 있는 상태)
오늘은 튜터님들의 커리어세션 3개와 면담도 잡혀있었다!
커리어세션에서는 튜터님들이 UXUI 디자이너 된 계기와 현재까지의 과정, 진행한
프로젝트, Q&A 등에 대해 들을 수 있어서 방향을 설정하는데 좋은 시간이었다
면담도 처음이라 떨렸는데 자연스럽게 질문의 흐름을 만들어주시고 현시점 가장
듣고싶은 말들을 해주셔서 힘이 됐다!!
