22.06.28_TIL

📌 오늘은 피그마를 하는 날이다!!!!!!!!!!!!!!!!!! 페어분이랑 마켓컬리를 피그마로 클론해보았다!

📗 오늘 학습한 내용

와이어프레임(wireframe)

• 선으로 틀을 잡는다는 뜻으로, 제품 기획 단계에서 페이지를 어떻게 구성할 것인지 구조를 잡기위한 목저으로 만든다.
• Low Fidelity Wireframe (Lo-Fi Wireframe)
  • 손으로 빠르게 그린 수준의 와이어 프레임
• Middle Fidelity Wireframe (Mid-Fi Wireframe)
  • Lo-Fi 와이어프레임을 그리면서 아이디어가 어느정도 구체화되고 확정된 후에 보기 좋게 다음어주는 프레임
• High Fidelity Wireframe (Hi-Fi Wireframe)
  • 와이어프레임을 완성본에 가깝게 작성한 프레임

프로토타입

• 실제 제품과 거의 흡사하게 구현한 것으로 페이지 이동과 상호 작용이 가능하다.
• 개발에 들어가기 전 단계에 작성한다.
• UI의 상호 작용을 시뮬레이션하는 것이 목적이다.

📘 추가로 공부할 내용

[udemy] React 완벽 가이드 강의 보기 (매일 조금씩 이라도 꾸준히 듣기)

Figma

• 캐러셀 구현 크기 맞추기

📝 중요한 내용

• 와이어프레임: 코드로 페이지 구현 전 디자인을 틀을 잡는 단계
• 프로토타입: 개발에 들어가기 전 UI 상호 작용을 시뮬레이션하는 단계