스마트메이커로 주사위앱 만들기 페이지

2025.03.04　

스마트메이커로 주사위앱 만들기 기초 강좌를 진행합니다.

최고관리자미니홈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물

미니홈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물

2025.03.11　

주사위앱 만들기 개요 및 작업환경구축하기

주사위로 놀던 어렸을 때가 기억이 나네요.주사위를 굴려 1에서 6까지의 수중 많은 수가 나오면 이기는 게임을 친구들과 했던 추억이 떠오릅니다. ^^해당 강좌는 앱 저작도구인 스마트메이커로 주사위앱을 만드는 과정을 다룹니다.주사위앱은 생각보다 간단하여 만들기 쉬우나 스마트메이커를 처음 사용하거나 앱 제작에 대한 이해가 부족한 분들은 마냥 쉽지마는 않을 수도 있습니다.그래서 초보자들도 쉽게 따라 배울 수 있도록 강좌를 만들었습니다.'스마트메이커로 주사위앱 만들기'를 통해 스마트메이커를 좀더 자유롭게 사용하여 원하는 앱을 만드는 데 조금 이나마 도움이 되길 바랍니다.'스마트메이커로 주사위앱 만들기' 첫강좌로 주사위앱을 만들기위한 개요와 기본적인 작업환경구축에 대해 알아보겠습니다.1. 작업환경 구축하기1) 작업 폴더 만들기우선, 주사위앱 제작을 위한 관련 파일들이 위치할 작업폴더를 만듭니다.작업폴더는 개발자 임의로 만들면 됩니다.강의진행상아래와 같이D 드라이브에 '스마트메이커강좌'폴더를 만들고, 만들어진 폴더 안에 '주사위앱'폴더를 하나 더 만들겠습니다.D:\스마트메이커강좌\주사위앱(1) 하드디스크 D 드라이브 선택하기(2)'새로 만들기(W) > 폴더(F)'순으로 메뉴 선택하기D 드라이브를 선택한 후 탐색기 바탕에 마우스 커서를 옮긴 후 마우스 오른쪽 버튼을 클릭하여 '새로 만들기(W) > 폴더(F)'순으로 메뉴를 선택하여 새 폴더를 생성합니다.(3) '새 폴더'를 생성(4) '새 폴더'명을 '스마트메이카강좌'명으로 변경하기생성된 새 폴더의 이름을'스마트메이카강좌'로 변경합니다.(5) '스마트메이커강좌'폴더 내에 '주사위앱' 폴더 생성하기'스마트메이커강좌'폴더 내에'주사위앱' 폴더를 하나 더 생성합니다.D:\스마트메이커강좌\주사위앱2. 스마트메이커 실행하기위와 같이 작업 폴더 '주사위앱'를 만들었습니다.'주사위앱' 작업폴더에는 '스마트메이커로 주사위앱 만들기' 강좌에 다루는 '주사위앱'에 관련 된 모든 파일이 저장이 됩니다.스마트메이커를 실행합니다.1) 스마트메이커 실행하기2) '파일 > 서버 접속'순으로 메뉴를 선택하기스마트메이커를 실행후 우선적으로 서버접속을 해야 합니다.'파일 > 서버 접속'순으로 메뉴를 선택합니다.3) 아이디("sa")와 비밀번호("1") 입력후 서버접속하기스마트메이커를 설치시 아이디와 비밀번호를 임의로 변경하지 않으셨다면아이디는 'sa',비밀번호는 '1'입니다.아이디와 비밀번호를 입력한 후 '접속하기'버튼을 누릅니다.서버 접속아이디 : sa비밀번호 : 13. 기본실행경로 설정하기서버 접속을 한 후 바로 기본실행경로를 설정합니다.스마트메이커 사용시 기본실행경로 설정이 중요합니다.PC에서 사용하는 'D:\스마트메이커강좌\주사위앱'등의절대경로는 스마트폰에서 인식할 수 없기 때문에 반드시 기본실행경로 설정이 중요합니다.기본실행경로 설정되어 있는 폴더를 기준으로 이미지 파일이나, 상세폼, 동영상 파일이 위치하게 됩니다.기본실행경로 설정은 '환경>운영환경'에서 할 수 있습니다.1) '환경 > 운영환경'순으로 메뉴를 선택합니다.2) 찾기 버튼 누르기'찾기'버튼을 눌러 작업폴더('C:\스마트메이커강좌\주사위앱')를 찾아 '기본 실행 경로'에 경로 설정합니다.3) 작업 폴더 찾아보기위와 같이 '주사위앱'폴더를 선택한 후 확인버튼을 누릅니다.4) 기본 실행경로 설정한 후 '확인'버튼 누르기기본실행경로 설정한 후 '확인'버튼 누룹니다.4. 빈폼 만들기빈 폼을 만들어 주사위앱을 만들어 보겠습니다.1) 빈폼 새로 만들기'파일 > 새로 만들기'순으로 메뉴를 선택합니다.2) 빈폼 선택한 후 '확인'버튼 누르기'빈폼'을 선택한 후 '확인'버튼을 누릅니다.'빈폼'이 만들어진 것을 확인할 수가 있을 것입니다.3) 저장하기(1) 모델 저장만들어진 빈 폼을 저장하겠습니다.'빈폼'을 만든 후 '모델 저장'메뉴를 선택합니다.(2) 파일이름 : 주사위파일 이름을 '주사위'로 입력합니다.파일 이름을 입력한 후 '저장'버튼을 누릅니다.5. 생성된 파일 확인하기위와 같이 파일을 저장한 후 '주사위앱' 작업 폴더 내에 '주사위.QPM'파일이 만들어진 것을 확인하실 수가 있을 것입니다.잘 따라 하셨습니다.다음 강좌에서는 만들어진 '빈폼'위에 주사위앱을 만들기 위해 필요한 아톰들을 나열하여 간단한 앱을 만들어 보겠습니다.

최고관리자미니홈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물

미니홈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물

2025.03.14　

1부터 6까지의 수, 난수함수를 사용하여 주사위앱 기본 원리 이해하기

최고관리자미니홈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물

미니홈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물

2025.04.09　

1~6까지의 수, 주사위 이미지 사용하여 표현하기

지난 강좌에 이어서 1에서 6까지의 숫자대신 주사위 이미지를 터치할 때마다 주사위 번호가 랜덤으로 보이게 하는 기능을 만들어보겠습니다.1. 주사위 이미지 준비하기우선, 해당 강좌를 진행하기전에 1에서 6까지의 주사위 이미지를 준비합니다.강좌를 진행하기 위해 포토샵으로 미리 만들어 보았습니다.2. Image폴더 생성한 후 주사위 이미지 가져다놓기1) '새 폴더(N)'메뉴를 선택하여 새 폴더 생성하기'D:\스마트메이커강좌\주사위앱' 경로로 이동합니다.마우스 오른쪽 버튼을 클릭하여 팝업메뉴를 활성화합니다.이중 '새 폴더(N)'메뉴를 선택합니다.2) 새 폴더명을 'Image'명으로 변경하기새폴더명을 'Image'명으로 변경합니다.3) 'Image'폴더에 주사위 이미지 가져다 놓기3. 아톰과 업무규칙 삭제하기1) 아톰삭제하기기존에 강좌에서 만들었던 기능을 삭제합니다.주사위 폼위에서 '사각형그리기'와 '버튼' 아톰을 각각 선택하여 삭제를 합니다.2) 업무규칙 삭제하기아톰 삭제에 이어서 '업무규칙'작성창을 열어 기존 작성한 업무규칙을 삭제합니다.4. 그림 아톰 생성과 업무규칙 작성하기1) 그림 아톰 생성하기아래의 이미지에서 보는 것처럼, 디자인도구에 있는 메뉴 중 '그림삽입'메뉴를 선택하여 빈 폼 위에 가져다 놓습니다.(1) '그림'아톰의 스타일 속성 변경하기'그림'아톰을 선택하여 마우스 오른쪽 버튼을 클릭하여 팝업메뉴를 활성화합니다.팝업메뉴 중 '스타일 속성'메뉴를 선택합니다.(2) 그림설정 하기그림삽입(스타일속성) 설정창에서 파일명 찾아보기 버튼을 눌러 '그림'아톰에 보여질 이미지를 선택합니다.'dice06.png'이미지를 선택하여 '열기'버튼을 클릭합니다.[그림설정]파일명 : @path:\주사위앱\Image\dice06.png'그림'아톰에 'dice06.png'이미지가 보이는 것을 확인합니다.아래와 같이 보이면 정상적으로 잘 된 것입니다.2) 업무규칙 작성하기(1) 업무규칙 메뉴 선택하기주사위 폼 바탕에 마우스 오른쪽 버튼을 클릭하면 아래의 이미지에서 보는 것처럼 팝업메뉴가 활성화됩니다.팝업메뉴 중 '업무규칙'메뉴를 선택합니다.(2) '그림'아톰 선택하기아래의 이미지에서 보는 것처럼 '업무규칙'메뉴를 선택하며 업무규칙을 작성할 수 있는 에디터창이 나타납니다.'그림'아톰을 터치할 때마다 1부터 6까지의 정수형 난수가 발생하여 해당 난수에 맞는 주사위 이미지가 보이도록 작업을 해보겠습니다.보통 코딩작업이라 합니다. 스마트메이커에서는 코딩작업이라는 말대신 '업무규칙'을 작성한다라고 표현을 합니다.자, 업무규칙을 작성해 보겠습니다.우선, '그림'아톰을 선택합니다.(3) '그림을 누르면'메시지 선택하기'그림을 누르면' 메시지를 선택합니다.'그림' 아톰을 선택하고, '그림을 누르면' 메시지를 선택하면 자동으로 아래와 같이 업무규칙이 작성이 됩니다.그림을 누르면 다음 문단을 실행한다.{}(4) 업무규칙 작성하기{ } 가로 사이에 주사위 모양의 그림 아톰을 터치할 때마다 1부터 6까지의 난 수가 발생하여 각각의 숫자에 맞는 주사위 이미지를 보이게 하는 업무 규칙을 작성하겠습니다.그림을 누르면 다음 문단을 실행한다.{ 임시는 난수(1,6)를 참조한다. 그림의 배경그림경로를 식("@path:\\image\\dice0"+임시+".png")으로 설정한다. }3) 컴파일 하기업무규칙을 작성한 후 앱실행시 작성한 업무규칙이 적용되려면 컴파일 작업을 해야 합니다.컴파일 작업은 아주 쉽습니다.아래의 이미지에서 보는 것처럼 '컴파일'아이콘을 클릭하거나 또는 펑션키 F11를 누르면 컴파일이 됩니다.5. 실행하기위와 같이 아톰을 생성하고, 업무규칙을 작성하였다면 제대로 실행이 되는 지 확인합니다.아래의 이미지에서 보는 것처럼 '실행모드전환'버튼을 눌러 스마트메이커 툴에서 직접 테스트해보겠습니다.

최고관리자미니홈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물

미니홈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물

2025.04.09　

애니관리자 기능을 사용하여 주사위 이미지 돌리기

이번 강좌에서는 스마트메이커의 애니관리자 기능을 사용하여 주사위 터치시 주사위를 굴리는 기능을 만들어 보겠습니다.주사위 이미지가 2D이다보니 사실 '주사위를 굴린다'는 표현보다는 '주사위를 돌린다'는 표현이 맞을 것입니다.1. 애니관리자 선택하기'주사위 이미지(그림 아톰)'를 선택한 후 '애니관리자' 메뉴 또는 아이콘을 선택합니다.아래의 이미지에서 보는 것처럼 '애니관리자'메뉴를 선택하거나 아이콘을 선택하면 '주사위 - 애니관리자' 창이 나타납니다.2. 애니관리자의 '추가' 버튼을 눌러 애니메이션 세팅하기1) 언제애니관리자의 '추가'버튼을 누르면 좌측에 애니관리자 세팅창이 나타납니다.시작시점을 '한번 누르면'를 선택합니다.2) 무엇을효과선택을 '강조하기'로 선택합니다.순차적으로 '회전하기'를 선택합니다.3) 어떻게속도를 '매우 빠르게'로 선택합니다.나머지 옵션은 그대로 두고 '완료'버튼을 누릅니다.4) 주사위 - 애니관리자 세팅완료이와 같이 애니관리자 기능을 세팅한 후 주사위 이미지를 마우스 왼쪽 버튼을 한번 클릭하면 주사위가 시계방향으로 360도 1회 돌아가는 것을 확인하실 수가 있을 것입니다.3. 업무규칙 작성하기애니관리자 기능을 적용했으니 이제부터는 업무규칙을 약간 수정해 보겠습니다.1) '업무규칙' 메뉴 선택하기주사위 폼의 바탕화면에 마우스 오른쪽 버튼을 누르면 팝업메뉴가 나타납니다.팝업메뉴중 '업무규칙'메뉴를 선택합니다.2) 업무규칙 내용을 변경하기아래의 이미지에서 보는 것처럼 주석처리합니다.참고로, 주석처리된 부분은 앱 실행시 적용이 되지 않습니다.그림을 누르면 다음 문단을 실행한다.{ 임시는 난수(1,6)를 참조한다. //그림의 배경그림경로를 식("@path:\\image\\dice0"+임시+".png")으로 설정한다. }2) 업무규칙 추가하기애니관리자 기능이 적용된 주사위 이미지를 터치하면 해당 주사위 이미지는 360도 돌아갑니다.다 돌아간 후 1에서부터 6의 숫자 중 난수로 발생한 숫자의 주사위 이미지가 보이게 하려면 다음과 같은 업무규칙를 추가하겠습니다.(주사위)를 선택한 후 '폼의 애니메이션을 완료하면(객체명)'메시지를 선택합니다.'폼의 애니메이션을 완료하면 다음 문단을 실행한다.(객체명) {}' 업무규칙이 추가됩니다.폼의 애니메이션을 완료하면 다음 문단을 실행한다.(객체명){ }위에서 주석처리한 내용을 아래와 같이 복사하여 붙이기합니다.폼의 애니메이션을 완료하면 다음 문단을 실행한다.(객체명){ 그림의 배경그림경로를 식("@path:\\image\\dice0"+임시+".png")으로 설정한다. }4. 컴파일 작업후 실행하기위와 같이 작업을 완료하였으면, 작업한 업무규칙에 제대로 적용이 될 수 있도록 컴파일 작업을 하겠습니다.1) 컴파일 작업을 실행합니다.아래의 이미지에서 보는 것처럼 '컴파일'아이콘을 눌러 컴파일을 하거나, 펑션키 F11를 눌러 컴파일 작업을 합니다.2) 실행하기'실행모드전환'아이콘을 눌러 테스트해보시기 바랍니다.아래의 동영상을 통해 제대로 실행이 되는 지 확인해 보시길 바랍니다.

최고관리자미니홈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물

미니홈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물

2025.04.09　

미디어 기능을 사용하여 주사위 굴러가는 효과음 주기

이번 강좌에서는 스마트메이커의 '미디어 아톰'을 사용하여 주사위 터치시 주사위 굴러가는 소리가 나오도록 기능을 추가하겠습니다.1. 주사위 굴러가는 소리가 나는 음원(dice.mp3) 준비하기해당 강좌를 따라 주사위앱을 만드시려면 주사위 이미지를 터치시 주사위 굴러가는 소리나는 음원을 미리 준비하셔야 합니다.직접 만들기가 어려우면 인터넷에서 검색하여 구하셔야 할 텐데 인터넷 상에서 구한 음원, 저작권에 문제가 있는 지 또는 없는 지 확인하시고 사용하셔야 합니다.파일명 : dice.mp32. Sound 폴더를 생성한 후 주사위 음원 가져다놓기1) '새 폴더(N)'메뉴를 선택하여 새 폴더 생성하기'D:\스마트메이커강좌\주사위앱' 경로를 이동합니다.마우스 오른쪽 버튼을 클릭하여 팝업메뉴를 활성화합니다.이중 '새 폴더(N)'메뉴를 선택합니다.2) 새 폴더명을 'Sound'명으로 변경하기새 폴더명을 'Sound'명으로 변경합니다.3) 'Sound'폴더에 주사위 굴러가는 소리나는 음원 가져다 놓기'Sound'폴더에 주사위 굴러가는 소리나는 음원 dice.mp3 파일을 가져다 놓습니다.3. 미디어 아톰 생성 및 설정하기1) 미디어 아톰 생성하기객체 삽입도구그룹내 '미디어'아톰을 선택하여 폼 위에 '미디어'아톰을 생성합니다.참고로 '미디어'아톰 생성은 '보이지 않는 영역'에다 생성을 합니다.2) 미디어 아톰 설정하기'미디어'아톰을 선택한 후 마우스 오른쪽 버튼을 클릭합니다.마우스 오른쪽 버튼을 클릭하면 팝업메뉴가 나타납니다.팝업메뉴중 '스타일 속성'메뉴를 선택합니다.주사위 앱에 사용할 미디어 파일(dice.mp3)을 찾아 파일경로를 지정합니다.'찾아보기'버튼을 누릅니다.'dice.mp3'파일을 선택한 후'열기'버튼을 누릅니다.아래의 이미지에서 보는 것처럼, 파일경로에 '@path:\Sound\dice.mp3'이 들어가 있는 것을 확인하실 수 있을 것입니다.재생 속성의 네 가지 옵션 모두 체크하지 않습니다.4. 업무규칙 작성하기위와 같이 미디어속성 설정을 한 다음 업무규칙 창을 열어 '미디어의 시작을 실행한다'를 삽입하시길 바랍니다.그림을 누르면 다음 문단을 실행한다.{ 임시는 난수(1,6)를 참조한다. //그림의 배경그림경로를 식("@path:\\image\\dice0"+임시+".png")으로 설정한다. 미디어의 시작을 실행한다.}폼의 애니메이션을 완료하면 다음 문단을 실행한다.(객체명){ 그림의 배경그림경로를 식("@path:\\image\\dice0"+임시+".png")으로 설정한다. }5. 컴파일 작업업무규칙을 작성한 후 컴파일 작업을 진행합니다.컴파일 아이콘 이미지를 누르거나, 펑션키F11를 눌러 컴파일합니다.6. 실행하기'실행모두전환'아이콘을 눌러 실행하여 테스트해봅니다.

최고관리자미니홈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물

미니홈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물

2025.04.09　

진동기능 추가하기

이번 강좌에서는 진동기능을 추가해보겠습니다.주사위 이미지를 터치시 이미지가 회전하면서 진동까지 적용하면 좀 더 주사위를 굴리는 데(?) 실감이 날 것 같아 적용해 보았습니다. ^^윙 ~~~~~1. 업무규칙 작성하기업무규칙 창을 열고 아래의 이미지에서 보는 것처럼 '진동발생(300)을 실행한다.'을 삽입합니다.진동발생스마트폰에서 진동을 발생시킨다.구문 형식진동발생(밀리초)밀리초 : 진동이 얼마동안 발생될지 밀리초 단위로 입력한다. (1초 = 1000)예문폼을 열면 다음 문단을 실행한다.{ 진동발생(3000)을 실행한다.}2. 컴파일 작업위와 같이 업무규칙을 작성한 후 컴파일 작업을 진행합니다.컴파일 방법은 아래의 이미지에서 보는 것처럼 '컴파일'아이콘을 누르거나 또는 펑션키 F11를 누르시면 됩니다.3. 전체 업무규칙그림을 누르면 다음 문단을 실행한다.{ 임시는 난수(1,6)를 참조한다. 미디어의 시작을 실행한다. 진동발생(300)을 실행한다.}폼의 애니메이션을 완료하면 다음 문단을 실행한다.(객체명){ 그림의 배경그림경로를 식("@path:\\image\\dice0"+임시+".png")으로 설정한다. }4. 실행하기PC에서 실행하여 테스트하면 아래의 이미지에서 보는 것처럼 '스마트폰에서 동작하는 기능입니다.[진동발생]'메시지나 나타나면 정상적으로 실행이 된 것입니다.

최고관리자미니홈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물

미니홈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물