[Week 3] 학습일지 (4)

---

⭐️ 3주차 TO DO LIST ⭐️ 

📄 과제

☑︎ 3-1. 모바일 카카오톡 앱의 ‘선물 보내기’ 에 대한 사용자 여정 지도 User journey map 만들기

☑︎ 3-2. 모바일 카카오톡 앱에서 ‘가장 최근에 사용한 선물내역 삭제하기’에 대한 Task flow를 작성

☑︎ 독서 과제. 책 '사용자를 생각하게 하지마'를 읽고 국내 사례에 적용된 사례를 찾기(첨부 파일 참고)
📹 강의: UIUX 디자인 툴(Figma)
☑︎ Chapter 1. Figma 소개와 설치

☑︎ Chapter 2. Figma 인터페이스

☑︎ Chapter 3. 도형의 활용

☑︎ Chapter 4. 그래필 스타일의 활용

☑︎ Chapter 5. 정렬과 레이아웃

□ Chapter 6. 컴포넌트와 베리언트

□ Chapter 7. 프로토타입

□ Chapter 8. 디자인 시스템

□ Chapter 9. 공유와 협업

📹 강의: UIUX 디자인 툴(Adobe XD)

☑︎ Chapter 1. Adobe XD

📚 레퍼런스

☑︎ 2주차 레퍼런스 분석

☑︎ 3주차 레퍼런스 분석

---

 

2024/6/22

오늘은 아침부터 비가 주룩주룩 내리는 날 ☔️

늦게 일어나서 일어나자마자 씻고

창문 살짝 열고 누워있으니까 극락😶‍🌫️

책상에 절대 못 앉을 것 같았지만,

쌓여있는 강의들은 날 일어나게 해 ~~

---

2024/6/23

아침부터 불 없는 요리를 해먹었다.

오이 고추와 참치, 된장을 이용한 비빔밥인데 세상 맛있다....🤯

인스타에서 본 레시피로 후딱 만들어 먹어봤는데 저녁에 또 만들어 먹었다는..

오늘은 느지막히 무인 카페 가서 3주차 레퍼런스 분석을 끝내고,

롯데리아에서 팥빙수를 시켜 밤까지 강의를 달려보려고 한다 !!🍧

 

📝 학습일지

---

💻 Chapter 4. 그래픽과 스타일의 활용 Note

- i : 색상 선택 단축키 (스포이드 나옴!)

- 도형 만들고 나서 동일한 모양의 도형 똑같이 만드려면? 👉🏻 도형 툴 선택하고 그냥 클릭하면 자동 생성

스타일 등록하는 방법

 

Color Variation 쉽게 하는 법: 플러그인 작동, 이름 설정 해주면 해당 컬러 베리에이션 자동 생성

 

Token 생성: 생성한 컬러 베리에이션을 가지고 Light/Dark 모드에 맞게 색상 변경시키는 작업 실행, Global은 항상 체크되어 있어야 함! (Global에서 색상을 끌어다 쓰기 때문, Global에 색상 베리에이션 전체 등록해놓고 Light/Dark 모드에 각각 사용할 컬러 등록)

 

- 암묵적인 타이포그래피 룰 in Figma

Heading (Bold)	Label (Medium)	Paragraph (Regular)
XXL	XXL
XL	XL	XL
Large	Large	Large
Medium	Medium	Medium
Small	Small	Small

참고: https://typescale.com/

- 타이포그래피 토큰 설정

🔹 토큰 설정 플러그인 열고, 타이포그래피 클릭 -> Noto Sans(지정하고 싶은 폰트명)

🔹 Font Weight: Bold / Medium / Regular 로 설정 가능 (*Noto Sans 기준)

🔹 Line Height: 이름=140, Height=140%

🔹 Font Size: 이름=Default / Heading.Medium('.'으로 크기 구분) Large = {Defaul}t * {Scale} (옵션이 들어갈 때는 항상 중괄호 사용) ...

🔹 토큰 설정은 협업에 큰 도움 👍🏻

그라디언트의 활용

도형에 들어간 이미지 조정하기: Crop 선택 후 조정

 

🗣️ 오늘의 TMI

---

 

• 친한 언니가 사다준 마늘빵을 드디어 다 먹었당🫶🏻 냉장고에 뒀다가 데워먹어도 좐맛탱
• 날이 더우니까 하루면 빨래가 다 마른다.
• 갑자기 스벅이 땡겨서 먹고 싶었지만, 비도 오니까 참았다. 배달 애껴 ~~~!!
• 저녁은 짝꿍이 육회비빔밥을 시켜줬다 🍳