[TIL] 20221124 react에서 canvas사용하기/ 여러가지 css효과/ ui ux 공부법

1. react에서 캔버스 쓰기

노마드 코더의 그림앱 만들기 강의를 듣고 나서 그것을 리액트로 바꾸어보았다. 

코드 : https://github.com/leehyeonj/meme_maker/tree/master/meme_maker

GitHub - leehyeonj/meme_maker

 

기능은 

- 브러쉬 굵기 바꾸기

- 브러쉬 색상 바꾸기

- 지우기

- 리셋하기

- 텍스트 추가하기

- 이미지 불러오기

- 그린 이미지 저장하기

추가로

- 스포이드 기능(참고)

- 마우스 커서 모양 바꾸기

 

다음번에 디자인을 예쁘게 바꿔봐야겠다. 

 

 

---

 

 

2. pallax scrolling 예제

https://www.youtube.com/watch?v=zGhQUdTsn1c 

https://dribbble.com/shots/18564144-Levana-Website-Development

Levana Website Development

 

 

---

 

 

 

 

3. 토글 이펙트 예제

https://gscode.in/css-toggle-switches/

Latest 50+ CSS Toggle Switches Example For Students With Source Code

https://www.pinterest.co.kr/pin/4855512091224339/

animation motin design illustration nature day night [Video] | Motion design animation, Motion graphics design, Motion design vi

 

 

---

 

 

 

4. 여러가지 이펙트

https://www.pinterest.co.kr/pin/3870349671508569/

Refresh [Video] in 2022 | Motion design, Social media design graphics, Graphic design fun

https://www.pinterest.co.kr/pin/271271577547961852/

Pin on Widgets gifs

https://www.pinterest.co.kr/pin/613052568040382750/

Adobe XD Tips & Tricks에 있는 핀

https://www.pinterest.co.kr/pin/784400460113116886/

Game store APP Tabbar by Egg_Kim | App interface design, App design layout, Mobile app design inspiration

https://heemwon.github.io/dothome1/effect/mouseEffect.html

힘원

 

 

 

---

 

 

5. UI/UX 공부하는 법

https://blog.naver.com/yellostory/222060962799

UI/UX 입문서 - (사용자를) 생각하게 하지마!

ui ux 에 대해서 공부하고 싶다고 생각했는데 대체 뭘 해야할지 막막했다. 

결론적으로 dribble 이나 핀터레스트를 많이 보면서 눈을 장착하고 서비스를 직접 만들어보면서 익히기로 했음.

 

---

 

 

뭔가를 너무 제대로 하고 싶으면 부담스러워서 오히려 멀어진다. 

각잡고 하려고 한것들은 빨리 그만두었고 가볍게 한 것들이 모두 꾸준히 하고있다는 사실을 최근에 깨달았다. 

한동안 블로그도 제대로된 글을 써야지 계획하니까 하나도 안써져서 못썼다. 

불렛저널을 쓰고 나서 체크리스트에 체크하고 싶어서 하나라도 시작을 하고 나니 점점 큰일도 할 수 있을 것 같은 자신감이 생긴다. 

음 그런데 글을 잘 쓰는 법을 얼른 연마해야겠다. 그냥 내 생각을 쓰는건데도 점점 어려워진다. 

블로그 스킨을 바꾸려고 열심히 스킨을 건드렸는데 디자인을 어떻게 해야할지 모르겠어서 멈췄다. 

그래서 지금 블로그가 굉장히 이상하지만.. 빨리 아이디어를 찾아서 스킨을 예쁘게 꾸며야지.