[엔트리 앱 만들기] 38. 수제버거 앱 만들기 | 나만의 수제버거에 도전한다!

안녕하세요~ 코드덤입니다. 

 

이번 시간에는 나만의 수제버거를 만들 수 있는 [앱]을 만들어 볼 거랍니다. 

본격적으로 수제버거 앱을 만들어가기에 앞서, 

먼저 어떠한 형식으로 만들어 갈지, 아래 영상을 보면서 감을 잡아보세요~ 

마우스를 각 아이템을 드래그해서 만들어 줄 건데요~ 

각 아이테안에 다양한 종류가 들어있어서, 모양도, 크기도 변경할 수 있도록 되어 있어요. 

 

아래 영상을 재생하시면, 어떤 앱을 만들지 감이 잡히실 거예요. 

youtu.be/ZMI72LXZIcI

 

먼저 각 오브젝트를 가져올 텐데요. 

큰 카테고리별로 이미지 하나씩 가져오세요~ 

그리고 각 오브젝트 안에는 다양한 모양이 들어있답니다. 

 

아래 그림에서 빵 오브젝트를 예시로 보여줄게요. 

빵 오브젝트의 [모양]에 보시면, 다양한 빵이 들어있는 게 보이시죠?

이러한 형식으로 하나의 오브젝트를 가지고 와서, 

그 오브젝트의 [모양] 탭에서 [모양 추가하기]로 다양한 모양을 먼저 추가해 주셔야 합니다. 

 

이러한 방식으로 아래 채소 또한, 다양한 채소 모양이 담겨 있도록 코딩되어 있어요. 

 

첫 번째 기능을 코딩해 볼게요. 

먼저 빵을 드래그하면, 마우스 포인터로 따로 오도록 만들어 줄 거랍니다. 

빵을 드래그한다라는 의미는 

[마우스 포인터에 닿고] 그리고 [마우스를 클릭했는가] 이 두 가지 조건을 모두 만족한다라는 의미예요. 

 

이 2가지 조건을 모두 만족시켜야 할 때는 <~그리고~>라는 블록을 사용해야 하죠! 

이 ~그리고~라는 블록 안으로 <마우스를 클릭했는가>블록과 <마우스 포인터에 닿았는가> 이 두가지 블록을 넣어주세요~

그리고 이렇게 드래그를 했을 때~ 코딩을 하기 위해~ 

<만약 ~라면>이라는 블록안으로 넣어줄 거랍니다. 

그래서 <마우스 포인터에 닿고, 마우스를 클릭했다면>

그때는 마우스포인터를 따라 이동하도록 만들어 줄 거랍니다. 

 

그리고 마우스 클릭을 해제했을 때, 즉 위의 조건이 아니면!! 

그 때는 현재 위치로 다시 되돌아가도록 만들어 줄거랍니다. 

그리고 모양 변경 기능을 추가해 볼까요? 

저는 화살표 키를 활용하겠습니다. 

 

왼쪽 화살표 키를 누르면, <이전> 모양으로, 

그리고 오른쪽 화살표 키를 누르면 <다음> 모양으로 바꿔줄 거랍니다. 

그래서 이 모양 변경 블록을 아래의 위치에 넣어주세요~ 

저 위치에 넣게 되면, 이제 조건 3가지가 모두 맞아야, 모양 변경 기능이 적용된답니다. 

즉, <마우스 포인터에 닿고> 그리고 <마우스를 클릭하고> 그리고 <화살표 키를 눌렀을 때> 

이렇게 3가지 조건이 모두 부합해야만 실행이 된답니다. 

 

이렇게 해 주는 이유는 화살표 키를 눌렀을 때, 다른 오브젝트의 모양은 변경되지 않도록 하기 위해서예요. 

그래서 현재 마우스 포인터에 닿은 오브젝트의 모양만 변경시켜 주기 위해서입니다. 

위의 코딩대로만 실행하면, 모양이 순식간에 빠르게 바뀌죠~

그래서 모양이 너무 빨리 변경되지 않도록 잠시 초기다리기 블록을 사용해 줄 거예요. 

자, 이제 크기 기능도 추가를 해볼까요? 

혼동되지 않도록 아래 빈란에 먼저 작성을 해볼게요. 

저는 위쪽 화살표 키를 누르면, 크게, 그리고 아래쪽 화살표 키를 누르면, 작아지도록 코딩해 볼게요. 

 

그리고 이 블록 또한, 조금 전 모양 변경 블록처럼, <마우스 포인터에 닿았을 때>만 적용되도록, 조건문 안으로 넣어줄게요.

자, 이제 가장 메인 기능인 <도장 찍기> 블록을 사용해 볼게요. 

이 블록을 사용하면, 빵을 드래그해서 접시 위로 가져 간 다음, 

스페이스 키를 누르면, 접시 위에 도장이 찍혀 빵 모양이 남아있도록 만들어 주는 기능을 만들 수 있어요. 

이제 거의 다 되었습니다. 

 

이제 각 오브젝트가 마우스로 드래그하는 시점마다 가장 상단에 놓아지도록 코딩만 해주면 끝이랍니다. 

가장 상단에 놓는 방법은 바로 <맨 앞으로 보내기> 블록을 사용하면 되겠죠!! 

 

아래와 같이 코딩해 줍니다. 

 

자, 이렇게 해서, 블록 코딩 엔트리로, 나만의 수제버거 앱을 만들어 보았어요~ 

오늘 배운 기능으로 여러분 만의 앱 만들기에 도전해 보세요~ 

자세한 설명은 상단의 영상을 참고해 주세요~