study/Challenge

[Challenge / day-12] 디자인 Mock-up

creatorAron 2023. 3. 3. 02:37

오늘의 공부범위 : 강의 16,17강 내용(Part2. ch2. 1-2강)

 

목차

1. 디자인 Mock-up tool 소개

2. 디자인 Mock-up tool 다뤄보기

 

 

#1. Mock-up이란?

  • 실제 서비스를 만들기 전에 실제와 같이 모형으로 만들어 보는 단계를 말한다.
  • 제품의 기능이나 디자인을 미리 검토해보기 위해서 제작한다.  

 

내가 혼자서 사이드프로젝트를 하는 상황에서 또는 부트캠프 동료와 개발자 두 세명이서 개발을 하는 경우에, 디자인 목업툴을 잘 활용하는 것은 와이어프레임이나 프로토타입을 만드는데 매우 중요한 스킬이다. 부족한 디자인적 능력을 보완해주고 컴포넌트화 되어있는 것들이 많아서 편하게 가져다 쓸 수도 있다. 또한, 미리 익혀두면 나중에 디자이너들과 소통하기도 좋기 때문에 이번 기회에 다시 한 번 익혀보도록 하겠다. 강사님이 소개해준 디자인 목업툴들을 먼저 살펴보고, 그것을 어떻게 활용해서 사이드 프로젝트를 할 것인지 살펴보자.

 

일단, 내가 사용해본 피그마와 사용해보지 못한 툴에 대해서 소개해줬는데 다음과 같다.

 

 

 

#2. 목업툴 다뤄보기

 

부트스트랩 UI 킷을 직접 방문해서 사용해봤다.

get a copy를 해서 피그마에 가입되어있는 내 계정으로 복사해보니 다음과 같이 엄청나게 많은 색과 컴포넌트들이 나열되어 있어서 무엇을 가져다 써야할지도 곤란할만큼 많은 것들이 갖추어져 있었다.

여기서 가져다가 더치페이서비스말고 내가 만들고 싶은 서비스의 목업을 완성은 아니지만 조금 만들어 보았다.

일단 내가 쓸 것을 만들고.. 강사님이 컬럼그리드는 잘 모르시는 것 같아서..!!(엣헴..ㅋㅋㅋ) 내가 내일 포스팅에서 수정해보겠다.

 

억지로라도 만들어 보았다. 그런데.. 벌써부터 기획을 다시해야하나 생각이 든다..ㅋㅋㅋㅋㅋ

 

5why 기법부터... 서비스 요구사항 작성까지 더치페이 서비스에 대해서는 나름 열심히 했지만 정작 내가 만들 프로젝트에 대해서는 하지 못했다. 그 부분에 대해서 다시 고민해보고 UI를 완전히 바꾸더라도 매력적인 앱을 만들고 싶다.

 

다음시간에는 태스크 매니지먼트에 대해서 다룬다!! 기대된다~

 

 

 

 

관련링크

패스트캠퍼스 : http://bit.ly/3Y34pE0

 

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

프로그래밍, 영상편집, UX/UI, 마케팅, 데이터 분석, 엑셀강의, The RED, 국비지원, 기업교육, 서비스 제공.

fastcampus.co.kr

 

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

 

#패스트캠퍼스 #패캠챌린지 #수강료0원챌린지 #환급챌린지 #직장인인강 #직장인자기계발 #패캠인강후기 #패스트캠퍼스후기 #오공완 #사이드프로젝트10개기술스택으로구현하는풀스택서버리스프로젝트withReact