사이드 프로젝트 with React 13. Mock-up

 

 

Mock-up 이란?

 

 

목업이란 본인이 디자인한 제품 또는 디자인의 설계 단계를 거친 후, 기능과 성능 등의 검토를 하기 위해 실물과 거의 동일한 형태의 무언가를 제작하는 것을 말한다.

디자인 목업도 위 의미와 같게 쓰인다.
[목업한다]라는 말은 ‘실제처럼 보이게 작업한다’라는 뜻이다. 만약 모바일을 디자인하는 사람이라면 제품을 제작해서 실제 무게, 실제 크기, 디자인으로 모형을 만들어보는 것이 ‘목업’하는 것이다.

아직 확정이 나지 않은 시안에 대해 그럴 듯한 ‘fake image’를 만들어서 클라이언트에게 보여준 뒤 컨펌을 받는 용도로 많이 사용한다.

 

정리하면,

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

라고 할 수 있겠다.

 

디자인 툴 소개

 

• Figma
• Bootstrap UI Kit
• Material UI Kit
• Bootstrap Studio - 유료

 

https://www.figma.com/community/file/876022745968684318

Bootstrap UI Kit | Figma Community

⬆️ figma에서 활용할 수 있는 Bootstrap UI Kit

 

 

 

그냥 넣으면 안 들어가고 빨간색 사각형 부분을 Fixed로 설정해줘야 들어간다. 기존 설정은 hug

 

 

우측 Inspect 탭을 누르면 CSS로 변환해준 코드를 얻을 수도 있다.

 

 

UI 컴포넌트

 

• Bootstrap, Material UI 등 theming library를 이용하곤 한다.
• 혹은 디자이너가 직접 UI 컴포넌트를 제작한다.

 

React 기반 UI 컴포넌트

 

https://mui.com/ 

MUI: The React component library you always wanted

 

 

 

https://blueprintjs.com/ 

Blueprint - A React-based UI toolkit for the web

 

https://react-bootstrap.github.io/ 

React-Bootstrap

 

react-bootstrap이 무난하고 사용성도 좋아서, 사이드 프로젝트에 사용하기 좋다. 

 

 

 

figma로 기본적인 UI/UX를 디자인해놓고 개발에 들어가면, 바로 코딩부터 하는 것보다 효율적으로 작업할 수 있을 것 같다.

부트캠프에서 실습할 때는 싱글 페이지 클론만 해봤지만 이 강의를 진행하면서 내 사이드 프로젝트를 만들 때는 '이 버튼을 클릭하면 이렇게 화면이 바뀌어요' 같은 것들을 디자인해두고 그것에 맞게 리액트 페이지를 구성하는 연습을 해봐야겠다.

 

나는 가계부를 만들고자 한다.

엄청 심플하게 만들어야 기간을 맞출 수 있을 것 같아서 '결제 시에는 카드로만. 카드는 하나만 사용한다.' 라는 전제를 깔고 만들 것이다.

페이지는 지출 내역 입력 폼, 지출 내역 리스트 총 두 개로 구성될 것이다. (추가될 수도??)

 

 

 

 

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

 

 

http://bit.ly/3Y34pE0

패스트캠퍼스 [직장인 실무교육]

 

#패스트캠퍼스 #패캠챌린지 #수강료0원챌린지 #환급챌린지 #직장인인강 #직장인자기계발

#패캠인강후기 #패스트캠퍼스후기 #오공완 #사이드프로젝트10개기술스택으로구현하는풀스택서버리스프로젝트withReact