[제로베이스]UXUI디자인스쿨_WEEK 03 (4)

📍TO DO LIST

A. UI 디자인 기초 : Chapter 2

B. Protopie : Chapter 4

C. Group Project : 퍼소나(Persona) 작성

---

A. UI디자인 기초 : Chapter 2

[Chapter 2-1 디자인환경]
[Chapter 2-2 레이아웃과 그리드 시스템 1]
[Chapter 2-3 레이아웃과 그리드 시스템 2]
[Chapter 2-4 컬러시스템]
[Chapter 2-5 타이포그래피]

프리스쿨을 진행하면서 자간 등을 조절할때 8단위로 조절을 하셔서 왜그런가 싶었는데, 해상도와 배수에 따라서 달라지기 때문에 8x 단위로 조절한는 것이 협업과 정의적인 부분에서도 효과적이라는 이유가 있었다.

그리고 컬러시스템 강의에서 UXUI디자인이 디테일한 작업임을 다시한번 느낄 수 있었다.
예를들면, 인풋박스(Input box)를 예로 들 수 있다.

인풋박스의 상태에 따라 Interactive / Active / Error / Disabled 등의 상태로 구분해 각각의 요소에 다른 컬러와 디자인을 제공하는 것이다.
그동안 생각없이 지나온 기능들이 디자이너가 의도한 컬러와 사용편의성을 위해 일부러 기획한 행동이었다는 것을 새삼 깨닫는 계기가 되었달까.
디자이너는 앱을 통해 다양한 사람을 만나게 되는 만큼, 수많은 사람들을 위한 디자인위해 상상하는것 이상의 업무를 진행하고 있다는 것이 와닿았다.
세상의 모든 UXUI 전문가 분들은 대단하신 분들이다,,,😎🖤

---

B.Protopie : Chapter 4

[Chapter 4-9 슬라이더]
[Chapter 4-10 로그인화면]
[Chapter 4-11 고정된헤더]
[Chapter 4-12 장바구니]

슬라이더

Ratio
: 레이어 드래그 길이와 손가락 움직임의 비율
: 숫자가 커질수록 움직임이 빠름
Formula _ round
: 값을 정수에 한해 제공
[ 도트선택 - +Drag(move) - limit(Limit to Container) - Touch are 6 - 액티브 바 선택 - +Chain(Scale) - 도트 선택 - +Detect(text - select layer 50) - Formula(round(`액티브바`width/전체 바 길이*100)) ]

---

로그인화면

indexof
: (seource : Text, searchvalue : Text)
: 텍스트에서 특정 단어가 시작되는 위치를 찾는 기능
: Ex) indexof("hello world","world") - 6
Keyboard Options - Type - Text Passowrd
: 비밀번호 텍스트(타이핑해도 보이지"X")
[ 이메일 인풋박스 선택 - +Focus(Border) - 컬러&투명도 설정 - +Focus(Border) - Focus out - 원래상태 설정값 복붙 - +Return(Condition) - Formula(indexof(`이메일,`text,"@")) - 1a Value -1 - +(Border) - 색상설정 - 힌트메시지 작성 - Opacity 0 - +(Opacity)100 - +(Move) - Move by Y16 - (Condition)복붙 - 원본 컬러로 설정 - Move by -16 - +(Focus (2))맨뒤로 복붙 - +Return(Conditon,Conditon)맨뒤복붙 - (Conditon 1)Formula{length(`pw,`text)} - 힌트메시지 작성 - Opacity 0 - +(Opacity)100 - +(Move) - Move by Y16 - (Condition)복붙 - 원본 컬러로 설정 - 로그인btn -Variable 2개 생성 - +(Assign) - 이메일 인풋박스 - Return내부 각각의 Condition에 +(Assign) - 순차적으로 Formula{"success"} / Formula{("fail")} - 패스워드 인풋박스 - Return내부 각각의 Condition에 +(Assign) - 순차적으로 Formula{"success"} / Formula{("fail")} - 활성화 버튼 제작 - Opacity 0 - +Detect 패스워드인풋박스(Condition - 1a Value - "success") - +(Opacity)활성화컬러 복붙 - 패스워드 인풋박스에도 반복 ]

---

고정된 헤더

touchvelocity
: 터치한 영역의 Y축 움직임 속도
[ Scroll Container 제작(화면사이즈 맞춤) - +Detect(Contents - Scroll)(Condition) - Formula{$touchvelocityY}( < 조건값 0 ) - +(Condition) - Formula{$touchvelocityY}( > 조건값 0 ) - +(Move) - +(Move) - +Conditon(Reset) - 앱바 선택 - +Conditon(Reset) - 바텀네비 바 선택 ] ➡️ 인터렉션 제작
[ 스크롤영역 컨테이너 제작 +Chain( 제작한 Container) - +(Move) ] ➡️Scroll Interaction

---

너무 아찔한 수업이었다.
따라가다가 일시중지하고 다시 따라가다가 일시중지 하고 계속 이것만 반복한 느낌이다.
특히 로그인화면 제작이 헬이였다🫠
강사님, 절대 조금 복잡하지 않았어요. 눈이 삐그덕거릴만큼 복잡했어요,,
알아 듣기는 하겠는데, 딱 거기까지.
아이패드와 노트북을 왔다갔다하면서 보느라 내 눈동자가 몹시 고생했다 :(
괜히 엄청 속상해진 하루다.