대학교 과제 피그마로 만들기(2)-앱화면 만들기

안녕하세요 그냥입니다.

오늘은 저번 포스팅에서 보여드렸던, 제 대학교 과제를 피그마로 구현시킬 겁니다.

이겁니다.

앱 첫 화면은 어플의 로고만

제 아이템은 자취를 하는 밀레니얼 세대들에게, 혼자 요리를 쉽게 할 수 있는 거였습니다.

따라서 "혼자서도 쿡쿡쿡"이라는 어플 이름을 만들어봤습니다.

저는 어도비를 쓸 줄 몰라서, 아이패드로 어플 로고를 그렸습니다.

피그마에서 place image-layer-multiply 해서 로고를 넣어줍니다.

두번째 화면은, 기본 정보 입력받기

제 아이템에서는, 사용자가 기본적으로 가지고 있는 요리환경이 어떠한지 정보를 입력받아야 합니다.

따라서 식재료,조리도구,시간과 비용에 관한 정보를 입력받도록 했습니다.

rectangle을 삽입하고, 직사각형을 둥그렇게 깎았습니다. (화면을 확대해서 radius라는 말이 뜨면 그대로 안쪽으로 당기면 됩니다)

 색은 F9FB99 이고요. fill에서 색 이름을 치거나 직접 고르거나, 혹은 fill에서 스포이드를 누르고 원하는 색을 그대로 추출할 수도 있습니다.

세번째 화면은 식재료 고르기

세번째 화면에서는, 저의 하찮은 그림을 넣어봤습니다. 냉장고에는 기본적으로 과일,채소,육류,수산물 등으로 구분이 되어있고요 직접 입력할수도 있습니다.

기타 조미료도 선택하게 했습니다.

저 밑줄 선은 우측에 stroke에서 선을 4로 약간 두껍게 설정한 것이고요,

저 빨간 상자는, rectangle로 직사각형을 만들고 stroke를 +하면 테두리가 생깁니다. 그리고 그 테두리를 빨간색으로 바꾸고, 직사각형 색은 배경과 같이 흰색으로 바꿉니다.

네번째 화면은 비용과 시간 입력받기

밀레니얼 세대들을 위해 효율적으로 시간과, 비용을 입력받습니다. 

다섯번째 화면은 정보를 종합해, 가능한 요리 보여주기

데이터를 종합해, 카테고리별로 가능한 요리들을 보여줍니다. 저 동그란 개체는, rectangle만든 곳에서 원형으로만 바꾼겁니다.

여섯번째 화면은 사용자가 선택한 요리 보여주기

제가 그린 하찮은 떡볶이 입니다.

정보를 종합해서, 어떤 재료가 더 필요한지 말해줍니다. 또 추가적인 재료가 필요하다면 그것을 구매할것인지, 바로 요리할 것인지 선택합니다.

일곱번째 화면은 추가 재료를 구매하는 장소선택하기

어플의 수익은 여기서 발생한다고 설정했습니다. 오프라인이나 온라인 매장을 광고해주는 것이죠.

마지막 화면은 요리 레시피를 알려줍니다.

마지막 화면은 요리레시피를 알려줍니다. 음성으로 안내를 받으면, 직접 레시피를 읽어주는데요. 요리하면서 화면을 넘길 수 없기 때문에,"다음"이라고 사용자가 외쳐야만 다음 레시피를 보여주게 설정했습니다.

다음 포스팅에서는 액션을 피그마에 넣어보겠습니당