#앱인벤터 랜덤숫자뽑기 #코딩 #메이커교육 #블록형코딩 #랜덤 #숫자 #초등학생​안녕하세요 오늘은 랜덤으로 숫자를 뽑아주는 앱을 만들어 보겠습니다. 앱의 작동 방식을 설명해 보자면, 먼저 사용자가 랜덤으로 뽑을 숫자의 범위를 지정합니다. 그리고 시작 버튼을 누르면 랜덤으로 숫자 뽑기 설정이 완료됩니다. 다음은 선택 버튼을 누를 때마다 지정한 범위 내에서 숫자들이 하나씩 나오게 되며, 마지막으로 뽑힌 숫자의 배경색은 빨간색으로 변하여 마지막이라는 것을 알려주게 됩니다.​이 앱은 특히 선생님들이 사용하기 편리한데, 저는 학생들에게 무작위로 순서를 정해주거나 할 때 이 앱을 주로 사용합니다. 반 학생 수만큼의 범위를 지정한 다음 선택 버튼을 눌러 뽑힌 숫자에 해당하는 학급 번호의 학생에게 어떤 기회를 부여하는 등으로 랜덤숫자뽑기 사용하고 있습니다. 그 외에 게임의 용도로 사용할 수도 있을 것 같습니다.​그럼 지금부터 랜덤 숫자 뽑기 앱을 만들어 보도록 하겠습니다.​먼저 앱인벤터에 접속하여 코딩할 준비를 합니다.​첫 번째로 디자이너 탭에서 앱 화면을 구성해 보겠습니다.먼저 레이블을 2개 가지고 와서 앱 사용 설명을 적어놓습니다. 버튼이 3개이고, 누르는 순서가 정해져 있기 때문에 설명이 필요할 것 같습니다.다음은 수직 배치 레이아웃을 넣고 안에 숫자가 뜨는 레이블과 텍스트 박스를 넣습니다. 수직 배치를 사용하는 이유는 가운데 정렬을 하기 위해서입니다. 전체를 가운데 정렬하면 위의 레이블도 모두 가운데 정렬이 되는데, 그렇게 정렬이 되면 글자 수가 달라서 어색하게 보입니다. 따라서 수직 배치 레이아웃을 사용하여 랜덤숫자뽑기 수직 배치 레이아웃 안의 컴포넌트만 따로 가운데 정렬 시켰습니다. 텍스트 박스는 숫자 범위를 지정할 때 숫자를 입력하는 용도로 사용됩니다.그리고 텍스트 박스의 힌트를 수정하고, 숫자만 표시하도록 설정합니다. 처음에는 보이지 않아야 하므로 보이기 여부의 체크를 해제합니다.그리고 수평 배치 레이아웃을 넣고 안에 버튼을 3개 넣습니다. 각각 시작 버튼, 선택 버튼, 번호 설정 버튼으로 사용할 예정입니다.버튼의 크기와 버튼의 텍스트를 위와 같이 수정해 줍니다.​끝으로 컴포넌트들의 이름을 변경해 줍니다. 코딩에 사용되지 않는 컴포넌트(앱 설명 레이블, 레이아웃 등)를 제외하고는 모두 기능과 관련된 이름으로 바꿔줍니다.​여기까지 하면 디자이너 탭은 완료가 됩니다.​이번에는 블록 탭으로 넘어가서 코딩을 해보겠습니다.​먼저 코딩 알고리즘부터 설명하겠습니다. 번호 랜덤숫자뽑기 설정에서 번호를 지정하고, 시작 버튼을 누르면 1부터 설정한 번호까지의 숫자를 빈 리스트에 하나씩 저장합니다. 그리고 선택 버튼을 누르면 리스트에서 번호를 무작위로 하나씩 선택하여 숫자 레이블에 보여주고, 해당 항목은 리스트에서 삭제합니다. 이렇게 하여 리스트의 모든 항목이 한 번씩 나오게 되면 화면을 빨간색으로 변경하여 사용자에게 모두 나왔다는 것을 알려줍니다.​그럼 코딩을 시작해 보겠습니다.먼저 변수를 2개 생성합니다. 첫 번째 변수는 앱 화면에 보이는 뽑힌 숫자가 들어가는 공간이고, 두 번째 변수는 이 숫자들이 모두 들어가 있는 리스트입니다. 따라서 변수 이름을 숫자, 리스트로 지었습니다. 그리고 위와 같이 초기화해줍니다.(위 화면에 보이는 추가 변수는 지울 예정이니 무시하셔도 됩니다.)다음은 시작 랜덤숫자뽑기 버튼을 눌렀을 때 실행되어야 하는 것들을 코딩하겠습니다. 시작 버튼을 누르면 숫자 레이블에는 아무 값이 없어야 합니다. 그리고 마지막 번호가 나왔을 때만 스크린 색이 빨간색이고 다른 숫자가 나왔을 때는 스크린 배경색이 흰색이어야 하기 때문에 스크린의 배경색도 흰색으로 설정합니다. (위 화면에 보이는 추가 변수는 지울 예정이니 무시하셔도 됩니다.)그리고 변숫값도 초기화해줍니다. 이렇게 하지 않으면 앱을 한 번 사용하고, 번호 설정을 다시 하여 시작 버튼을 눌렀을 때 오류가 생길 수도 있기 때문입니다.(위 화면에 보이는 추가 변수는 지울 예정이니 무시하셔도 됩니다.)다음은 반복하기 블록을 사용하여 숫자를 1씩 증가하며 반복하는 기능을 만들겠습니다. 이 블록은 시작과 끝을 지정하고, 증가해야 랜덤숫자뽑기 하는 숫자를 정하면 반복하면서 숫자를 범위까지 증가시켜 줍니다. 증가된 숫자는 인덱스에 저장이 됩니다. 따라서 시작은 1, 끝은 번호 입력 텍스트의 텍스트, 증가는 1로 설정합니다. 이렇게 지정하고 끝의 번호를 5로 설정한다면, 인덱스는 반복하여 1,2,3,4,5로 증가합니다.그리고 반복할 때마다 해당 인덱스를 리스트에 추가하였습니다.​다음은 번호 설정 버튼을 코딩해 보겠습니다.​번호 설정 버튼의 알고리즘을 설명하면, 번호 설정 버튼을 누르면 번호 입력 텍스트 박스가 보여야 되고 포커스를 받았을 때 번호 입력 텍스트 박스의 텍스트 값을 비웁니다. 텍스트 박스의 포커스를 잃었을 때 텍스트 박스가 다시 사라지도록 합니다.​번호 설정 버튼을 위에서 설명한 것과 같이 코딩해 줍니다.​다음은 선택하기 버튼을 코딩해 보겠습니다. 랜덤숫자뽑기 선택하기 버튼을 누르면 리스트 변수에서 임의의 항목을 선택하여 숫자 변수에 넣도록 합니다.​다음은 조건문을 사용하여 숫자에 들어온 값이 리스트의 마지막 항목인지 알 수 있도록 코딩합니다. 위에서 임의로 선택된 항목은 숫자 레이블의 텍스트 값이 되고, 이 값은 리스트에서 삭제하도록 합니다. 이런 식으로 반복하면 결국 1개의 항목만 남게 되고, 리스트의 길이는 1이 됩니다. 그래서 조건문에 리스트의 길이가 1이면 배경색을 빨간색으로 바꾸도록 코딩합니다.위와 같이 조건문을 넣고, 리스트의 길이가 1인지 확인합니다.그리고 만약 길이가 1이라면 숫자 레이블에 숫자 변수를 넣고, 배경색을 빨간색으로 설정합니다.만약 아니라면 숫자 레이블에 숫자 변수를 넣고, 해당 항목을 삭제합니다. 삭제하는 방법은 위와 같이 삭제하기 랜덤숫자뽑기 블록을 사용하고, 해당 항목의 위치는 위치 구하기 블록을 이용하여 리스트 변수 안의 숫자 변수 위치를 구하여 넣어줍니다.(사실 리스트를 만들 때 1부터 지정된 범위까지 순서대로 항목이 들어갔기 때문에 해당 항목의 위치는 항목의 값과 같아서 위치 칸에 숫자 변수를 넣어주어도 됩니다.)​여기까지 하면 모든 코딩이 완료됩니다. 완성된 코드는 아래와 같습니다.​앱 작동 영상은 아래와 같습니다.​​오늘은 앱인벤터로 랜덤 숫자 뽑기 앱을 만들어 보았습니다. 조금 복잡해 보일 수 있지만 천천히 따라 해 보시면 누구나 만들 수 있을 것 같습니다. 이 앱은 제가 수업 중에 가장 많이 사용하는 앱으로, 활용도가 높아 앱에 설치 후 유용하게 사용하실 수 있을 랜덤숫자뽑기 것 같습니다.(특히 선생님들)​감사합니다.​