앱인벤터2 강좌 32: 전자 계산기 만들기

앱인벤터로 전자 계산기를 구현한 작품들이 있나 하고 찾아 봤더니 두 숫자를 더하거나 빼는등의 간단한 것들만 있었고 우리가 시중에서 구입할 수 있는 전자 계산기 정도의 성능을 보이는 작품을 찾아볼 수 없었다. 그래서 내가 약간의 시간을 투자해서 실제 전자계산기에 버금가는 정도의 성능을 보이는 계산기를 앱인벤터로 구현해 보았다. 

우리가 실제 전자 계산기를 사용할 때는 숫자 버튼을 하나씩 누를 때마다 그 번호가 상단화면에 표시 되고 한자리 숫자와 3자리 숫자의 더하기, 또는 몇자리의 숫자를 더하고 또 빼기도 하고 어떤때는 곱셈과 나눗셈도 연속적으로 수행한다. 이렇게 실제 전자계산기가 수행하는 과정을 프로그램으로 나타내려고 하면 내부적으로 상당히 골치아픈 과정들을 거처야 한다. 

물론 단순히 두 숫자의 덧셈만 하라, 또는 두 숫자의 뺄셈만 하라, 곱셈만 하라 등의 연산만이라면 코딩도 간단히 끝낼 수 있다. 그러나 다섯, 여섯개 정도의 숫자를 더하고 빼고 곱하고 나누고 등을 동시에 한번에 처리하려면 상당히 어려운 알고리즘을 생각해야 한다. 예를 들어 '3+12+5=', '34-12='등의 계산을 구현하는 것은 아주 쉽다. 그러나 '34+27-15*4/2='등의 계산을 한번에 처리하는 과정은 쉽지 않다. 필자가 이런 것들을 처리해 주는 앱인벤터로 만든 앱들이 있나 찾아 봤는데 거의 없었다. 대부분 단순한 두자리 수의 덧셈, 뺄셈을 설명해 주는 것이 대부분이었다. 그래서 '123+2456-3245*23/45=' 등과 같은 실제 계산기 처럼 계산을 해 주는 계산기 프로그램을 앱인벤터로 시도해 보기로 했다.

먼저 디자이너 에디터에 실제 시중에서 파는 전자 계산기와 흡사한 형태의 버튼들을 배치한다. 여기서 숫자 버튼들은 4X4 테이블 arrangement 속에 하나씩 배치한 후 그 위에 0부터 9까지 숫자를 입력하고 +, -, x, %등의 연산자도 표시를 입력한다. C는 Clear의 약자로 모든 숫자를 지우고 초기화 하는 버튼이고 '='는 마지막 결과를 표시하라는 버튼이다. 숫자버튼들을 우리가 생활에서 쓰는 용어 그대로를 표시 했기 때문에 아무 어려움 없이 이해할 수 있을 것이다. 그런데 문제는 상단의 숫자표시부이다. 2~3자리 숫자를 표시한다면 별 문제가 없지만 9~10자리의 숫자에 대해 계산을 해 볼 수도 있기 때문에 필자는 10자리의 숫자를 표시할 수 있는 자리수를 준비했다. 우측 컴포넌트쪽을 보면 view1 부터 view10까지가 숫자의 자리수를 표시해 줄 라벨들이다. 숫자 버튼을 하나씩 누를때마다 view1 부터 view10까지 순차적으로 숫자가 표시된다. 제일 앞에 있는 text0는 처음 앱을 실행했을 때 0을 표시해 주는 라벨이다. HorizontalArrangement Layout 안에 11개의 라벨을 순차적으로 입력한다.

text0에만 숫자 0을 표시하고 나머지 라벨들에는 모든 표시를 없앤다.

프로그램에 사용된 변수들이다. viewNumber는 상단 디스플레이에 표시되는 숫자를 표시하는 변수이다. opButtonCount는 +,-.x,% 등의 연산자를 누를때마다 하나씩 올라가는 변수이다. inputNumber는 숫자버튼을 누르면 그 숫자를 내부적으로 받아 처리하기 위한 입력숫자용 변수이다. buttonIdentify는 4가지 연산자를 누를때 어떤 연산자를 눌렀는지 확인하기 위한 변수이다. saveNumber는 각 연산의 결과를 입력해 두는 변수이다. buttonCount는 숫자 버튼을 누를때 버튼을 몇번 눌렀는지 확인하는 변수이다.

각 숫자 버튼들을 클릭했을 때 처리되는 내용들이다. 클릭한 버튼의 숫자를 inputNumber란 변수에 입력하고 whenButtonClick 블록을 처리한다. 

whenButtonClick 블록의 내용이다. 버튼의 카운트를 하나씩 증가시키고 몇자리 숫자의 수를 입력했는지 확인한다. 숫자가 하나라도 입력되면 연산자 버튼을 활성화 시키고 0으로 표시 되었던 초기 상태의 숫자를 보이지 않게 한다. 

각 연산자들을 눌렀을때 처리하는 루틴을 표시했다. 아무 숫자도 넣지 않고 연산자를 누르면 '먼저 숫자를 입력하세요.'란 경고 메시지를 출력한다. 숫자가 입력되어 있으면 각각의 루틴을 처리하고 어떤 연산자가 클릭되었는지 메시지를 발생시키고 버튼카운트는 다시 0으로 돌린다.

각 연산자를 클릭했을 때 처리되는 루틴이다. +를 클릭했다면 디스플레이에 표시된 숫자를 viewNumber란 변수에 입력한다. 그런후 saveNumber에 입력된 숫자와 덧셈을 수행하고 그 결과를 다시 saveNumber에 입력한다. 다른 연산자에 대해서도 똑같은 연산을 수행한다.

callViewNumber 블록은 입력한 숫자가 몇자리 숫자인지를 확인하는 블록이다. 숫자 버튼이 한번 클릭되었다면 1의 자리 숫자이고 숫자버튼이 3번 클릭되었다면 3자리 숫자등등의 의미이다. callEachDigitNumber블록은 입력한 숫자를 각 자리수에 맞게 배치하도록 하는 블록이다. 가장 먼저 입력한 숫자를 view1에 표시하고, 두번째 입력한 숫자는 view2에 .............표시하는 등등의 블록이다.

각 숫자의 자리수를 정확하게 표시해 주는 루틴들이다. 

이제 '=' 버튼을 클릭했을때 일어나는 루틴이다. 마지막 숫자를 연산하고 디스플레이의 숫자를 지운다. 그런후 view1에 연산 결과를 표시한다. 모든 변수들을 초기화 하고 연산자의 버튼들은 불활성화 시킨다. 'C' 버튼을 클릭하면 디스플레이의 모든 숫자를 지우고 text0에 0을 표시해 초기상태가 되었음을 나타낸다.

초기상태와 변수들을 나타내었다.

위와 같은 루틴을 거쳐 실제 전자계산기에서 처리되는 내용과 거의 동일한 결과를 얻을 수 있다.