지금까지는 사용자가 화면 내 어디를 클릭해도 화면을 바꿀 수 있었습니다. 하지만 이 방식에는 단점이 있습니다. 화면 내 클릭만으로는 그 어떠한 추가적인 인터랙션도 불가능합니다. 수많은 게임과 앱은 이런 문제를 메뉴와 버튼과 같은 특정 UI 요소를 추가해 해결합니다. 또한, 특정 UI 요소와 인터랙션을 통해서만 화면을 탐색할 수 있도록 제한하는 방법으로 이 문제를 해결합니다. 오른쪽 상단에 버튼을 만들어 화면을 제어해 봅시다.
"버튼(button)"이란 무엇일까요? 두 가지 정의가 있습니다. 1) 어떤 영역이 클릭 가능하다고 시각적으로 표시한 것과 2) 해당 영역이 클릭에 반응하도록 하는 로직입니다. 먼저 1번 정의대로 시각적으로 표시를 해주는 rect()text()를 쓰고 여러번 호출할 경우를 대비해 함수로 묶어봅시다.
var drawButton = function() {
    fill(81, 166, 31);
    rect(340, 10, 50, 25);
    fill(255, 255, 255);
    textSize(16);
    text("NEXT", 344, 29);
};
이제 어디에서 호출해야 할까요? 당연히 첫 번째 화면을 출력할 때 호출해야 합니다. 그래야 다음 화면으로 넘어갈 수 있습니다.
drawScene1();
drawButton();
이후 출력되는 모든 화면에도 이 버튼을 표시해야 합니다. 모든 화면 그리기 함수 내에서 한 번씩 호출해도 되지만 더 쉬운 방법이 있습니다: 각 화면을 출력한 뒤 버튼이 반드시 호출되게 mouseClicked 함수 마지막에 추가합니다.
mouseClicked = function() {
    if (currentScene === 1) {
        drawScene2();
    } else if (currentScene === 2) {
        drawScene3();
    } else if (currentScene === 3) {
        drawScene4();
    }  else if (currentScene === 4) {
        drawScene5();
    } else if (currentScene === 5) {
        drawScene1();
    }
    drawButton();
};
사실 거짓말이었어요... 결코 간단하지가 않네요. 위 코드를 사용하면 한 화면을 제외하고 다른 모든 화면에서 버튼이 보일 겁니다. 어떤 화면인지 맞출 수 있나요? 몇 초 드리겠습니다... 그만 읽으세요! 생각하고 계신 건가요? 네, 네. 바로 애니메이션 화면입니다. 여기서 draw() 안에 있는 코드가 네 번째 화면 출력되면서 버튼을 곧바로 덮어버리기 때문입니다. 그래서 해당 함수 끝에도 추가해야 합니다.
draw = function() {
    if (currentScene === 4) {
        drawScene4();
    }
    drawButton();
};
그리고 특이한 사람이 아기를 다음 버튼까지 끌 수도 있으니 mouseDragged 함수의 마지막에서도 호출합시다.
mouseDragged = function() {
    if (currentScene === 5) {
        image(getImage("creatures/BabyWinston"), mouseX-20, mouseY-20);
    }
    drawButton();
};
와! 이제 모든 화면에 버튼이 생겼습니다. 확인해 보세요.
하하. 그런데 웃긴 게 뭔 줄 아시나요? 버튼은 사실 아무것도 하지 않습니다! 사용자가 버튼 영역만 누른다면 버튼이 실제로 어떤 기능을 한다고 생각할 수도 있지만 사실 화면 어디를 눌러도 같은 결과가 나타납니다. 이 문제를 해결하기 위해 mouseClicked 함수의 논리를 바꿔서, 프로그램이 화면을 바꿀 때가 맞는지 생각하기 전에 버튼의 위치를 확인하도록 만들어야 합니다.
'JS란?' 버튼 도전과제에서 했던 것처럼 mouseXmouseY 조건을 만족시키는 if 조건문을 만들어야 합니다. 그러려면, mouseX가 왼쪽보다 크고, mouseX가 오른쪽 보다 작고, mouseY가 위쪽 가장자리보다 크고 mouseY가 아래쪽 가장자리보다 작다는 조건을 (4개의 조건) && 연산자를 이용해 합치면 됩니다. 하지만 여기서는 버튼이 우측 상단에 있으므로 사용자가 클릭할 때 약간의 여유를 주기 위해 간단히 두 가지 조건만 부여합시다: mouseX가 왼쪽보다 크고 mouseY가 아래쪽 가장자리보다 작음.
mouseClicked = function() {
    if (mouseX >= 340 && mouseY <= 45) {
        if (currentScene === 1) {
            drawScene2();
        } else if (currentScene === 2) {
            drawScene3();
        } else if (currentScene === 3) {
            drawScene4();
        }  else if (currentScene === 4) {
            drawScene5();
        } else if (currentScene === 5) {
            drawScene1();
        }
        drawButton();
    }
};
바로 이거에요! 이 조건을 부여하고 나니, 이제 사용자가 화면에서 특정 부분을 클릭해야 다음 화면으로 넘어가는 프로그램이 되었습니다. 버튼과 버튼이 아닌 곳을 한번 눌러보세요.
이제 화면의 부분에 따른 클릭의 기능을 지정할 수 있게 되었습니다. 해당 버튼을 클릭할 때를 제외하고 클릭 기능을 다른 인터랙션에 이용할 수 있습니다. 그 말인 즉슨 사용자가 아기 윈스턴을 끌어서 추가하는 대신 원래 원하던 대로 클릭해서 추가할 수 있다는 말입니다. if문에 else문을 추가하고 mouseDragged 부분을 이 else문 안에 추가하면 됩니다.
mouseClicked = function() {
    if (mouseX >= 340 && mouseY <= 45) {
        ...
    } else {
        if (currentScene === 5) {
            image(getImage("creatures/BabyWinston"), mouseX-20, mouseY-20);
        }
    }
};
앞에서 지정한 조건들이 현재 화면에서만 적용되어야 원하는 대로 작동할 것입니다. 하지만 이렇게 하면 이제 다른 화면에 클릭 인터랙션을 추가하기가 쉬워졌습니다. 사용자가 화면에 다른 물건을 더 생성할 수 있도록 해 볼까요? 드럼을 추가할까요? 수염을 추가할까요? 아래 프로그램으로 여러 가지를 시도해 보세요.
로딩 중