Section3 Unit2 [사용자 친화 웹] UI/UX - Figma로 스카이스캐너 클론하기

---

Section3 Unit2 [사용자 친화 웹] UI/UX - Figma로 스카이스캐너 클론하기

 

⭐️ 과제. Figma 클론

 피그마로 웹이나 앱의 디자인을 클론하고 프로토타입을 적용시키는 과제였다.

 기본적인 요구 조건으로는 최소 Lo-Fi 수준의 프로토타입 구현이었으며 페이지 이동, 스크롤 이벤트, 최소 1개의 마스터 컴포넌트와 인스턴스를 포함한 프로토타입 제작이었다. 

 페어와 함께 복잡한 웹 말고 앱으로 하자고 했고, 앱 중에서도 심플한 디자인의 스카이스캐너를 선택했다 :)

 컴포넌트를 만들거나 구성을 짜는 것 정도는 재미있었는데 디자인을 하나하나 구현하는 건 너무 노가다였다... 하지만 우린 해냈다.. 간단한 UI의 어플이라 페이지 3개도 거뜬히.. 

 

 

 

😊✨👀🐱☀️ 피그마 과제 끝!

 

---

🌙  오늘의 회고

 오늘도 페어와 함께 피그마로 작업을 했다. 웹이나 앱을 피그마로 디자인 클론하는 과제였는데, 간단한 스카이스캐너 어플을 클론하기로 했다.

 피그마는 뭔가를 디자인하는 용도가 아니라도 잘 사용하고 있는 툴이라 매력적이긴 하지만, 피그마로 디자인은 그만하고 싶다랄까… 😵‍💫 그래도 오늘로써 피그마 챕터는 끝이 났으니, 과제로 만날 일은 없을 듯 하다. (나중에 프로젝트를 할 때 사용할수도..? 그런 용도로는 충분히 좋은 것 같기는 하다.)

 이틀동안 정말 집중해서 페어와 피그마 과제를 한 것 같다. 쉬는 시간 없이 자리에 앉아 손을 계속 빠르게 움직였던 것 같다. 결과물을 보고 무언가 따라 만들고, 그게 딱히 어렵거나 막히는 과정이 있지는 않아서 신기하게도 의외로 집중은 잘 되었던 것 같다.

 

 그리고 밤에 요즘 진도 안나가던 리액트를 공부하다가...

 역시 빈 페이지에서 시작해 나의 생각만으로 정해진 UI를 구현하려고 하니 생각보다 잘 되지 않는다는 것을 느꼈다. 배웠던 내용만으로 하는건데도 중간중간 막히는 부분이 있었다. 강의나 다른 코드를 보며 따라치는 것보다는 역시 스스로 코드를 많이 쳐봐야 손에 익고, 눈에 익고, 머리에 어떠한 로직으로 진행되는지를 기억할 수 있음을 또한번 깨닳았다.

되도록이면 혼자 구현할 수 있도록 익숙해져야지. 익숙해질수 있도록 노력해야지.