디자인 기획 (7일차)

 

1. Mock-up?

• 실제 서비스를 만들기 전 실제 서비스처럼 모형을 만들어 보는 단계이다.
• 제품의 기능이나 디자인을 사전에 검토하기 위해 제작한다.

2. 디자인 툴 종류

• Figma

       - Bootstrap UI Kit

       - Material UI kit

• Bootstrap Studio(유료)

3. UI 컴포넌트

• bootstrap, material UI 등 theming library 이용하곤 함.
• 혹은 디자이너가 직접 UI 컴포넌트를 제작

3-1) React 기반 UI 컴포넌트

• https://mui.com/
• https://blueprintjs.com/
• https://react-bootstrap.github.io

4. 반응형 웹 사이트?

• 화면 사이즈가 변할 때 페이지도 유동적으로 변하는 웹 사이트

 

4-1) Figma로 Mock-up 페이지 만들기 실습

-> Auto layout을 이용한 Responsive한 web을 디자인

•  여러 사이즈의 화면 frame중 하나를 고른 후 생성
• Auto layout 추가 / Layout Grid 설정
• component -> alert-atom 추가
• component의 width를 fill container로 바꿈 -> component의 width가 screen 사이즈와 똑같아짐

5. Figma에서 중점적으로 봐야하는 것?

-> Figma가 모든 responsive한 상황에 매끄럽게 동작하는 것은 아니다.

• 화면이 매우 커지거나 작아질 경우 어떻게 반응해야 하는가?
• Scroll은 어디에 넣을 것인지?
• 컴포넌트가 화면 사이즈에 맞게 리사이징이 되는지?
• break-point를 잘 커뮤니케이션하고 정리하는 과정이 필요

6. Figma에서 크게 신경쓰지 않아도 될 것?

• Inspect에 보면 CSS가 미리 코딩 되어 있음 -> 가져다 사용하기 좋지만, width나 height는 현재 스크린값을 기준으로 계산되어 있어서 그대로 사용하지 말고 화면의 몇%인지 계산해서 값을 주는 것이 좋음

ex) 1000px width에서 500px width component라면 50% or 0.5vw

 

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

* 필수 삽입 링크 : http://bit.ly/3Y34pE0