[동영상] 초등학생도 코딩한다는데…나도 만들 수 있지 않을까?
[동영상] 초등학생도 코딩한다는데…나도 만들 수 있지 않을까?
혼자 사는 사람을 위한 남자 목소리 앱!
어려울 것 같지만 생각보다 쉬운 앱 만들기!
코딩-다운-변환 끝!
  • 박종혁 기자
  • 승인 2022.02.08 10:30
  • 댓글 0
이 기사를 공유합니다

스크래치 3.0. 사진=scratch 사이트 갈무리/굿모닝충청=박종혁 기자
스크래치 3.0. 사진=scratch 사이트 갈무리/굿모닝충청=박종혁 기자

[굿모닝충청 박종혁 기자] 얼마 전 혼자 자취하면서 밤에 택배를 받거나, 배달 음식 받기 무서운 이들을 위해 ‘남성의 대사와 말소리’를 녹음한 앱을 만들었다.

초등학생들도 코딩을 배운다기에 “나도 만들 수 있지 않을까”라는 생각에서 앱 제작을 도전했고, 기초적인 앱을 만들 수 있었다.

최대한 쉽게 앱을 만들기 위해 MIT에서 개발한 Scratch를 사용했다.

Scratch는 어린이를 위한 무료 코딩 커뮤니티로, 다행히 ‘어른이’도 이용할 수 있었다.

남성 목소리 앱을 만들기 위해 먼저 버튼이 필요했다.

캐릭터 모양 아이콘을 통해 스트라이트를 올릴 수 있다. 사진=Scratch 갈무리/굿모닝충청=박종혁 기자
캐릭터 모양 아이콘을 통해 스트라이트를 올릴 수 있다. 사진=Scratch 갈무리/굿모닝충청=박종혁 기자

버튼을 만들기 위해선 움직일 수 있는 그림인 스프라이트가 필요하다.

캐릭터 모양을 한 스프라이트 버튼을 눌러 파워포인트로 그린 ‘누구세요?’, ‘문 앞에 놔주세요’ 등의 이미지를 올렸다.

앞서 스프라이트를 올린 것과 같은 방식으로 배경을 추가할 수 있지만, 간단한 제작을 위해 건너뛰었다.

버튼을 다 만들었으니 이제 무엇이 필요할까? 바로 목소리다.

같은 방식으로 스프라이트마다 알맞는 소리를 넣어준다. 사진=Scratch 갈무리/굿모닝충청=박종혁 기자
같은 방식으로 스프라이트마다 알맞는 소리를 넣어준다. 사진=Scratch 갈무리/굿모닝충청=박종혁 기자

같은 방식으로 ‘누구세요?’ 스프라이트에는 ‘누구세요?’ 목소리를, ‘문 앞에 놔주세요’ 스프라이트에는 ‘문 앞에 놔주세요’라고 녹음한 파일을 하나하나 올려주면 준비가 끝난다.

버튼(스프라이트)과 목소리를 올렸다면 이 둘을 연결해 주는 작업이 필요하다.

먼저 ‘누구세요’ 스프라이트 안에서 ‘클릭했을 때’ 블록과 ’누구세요‘ 블록을 꺼내 서로 이어준다.

블럭을 이어붙이기만 하면 코딩이 된다! 사진=Scratch 갈무리/굿모닝충청=박종혁 기자
블럭을 이어붙이기만 하면 코딩이 된다! 사진=Scratch 갈무리/굿모닝충청=박종혁 기자

다른 무시무시한 프로그램과 달리 블록을 이어붙이는 것만으로도 간단히 스크립트를 짤 수 있다.

나머지 스프라이트들도 같은 방식으로 블록을 이어붙이면 스크립트 짜기가 끝난다.

주소창에서 숫자부분만 드래그 해 복사하면 된다. 사진=Scratch 갈무리/굿모닝충청=박종혁 기자
주소창에서 숫자부분만 드래그 해 복사하면 된다. 사진=Scratch 갈무리/굿모닝충청=박종혁 기자

만든 프로그램을 저장하고 인터넷 주소창에서 숫자를 확인한다.

박기자가 제작한 ’남자 목소리‘ 앱의 주소는 ’https://scratch.mit.edu/projects/638254235/‘으로 이 중 숫자’ 638254235‘만 복사하면 된다.

그 뒤 인터넷에서 ‘HTMLifer’를 검색해 들어가면 된다.

영어가 많아 당황스러울 수 있지만, 위에서 복사한 숫자를 ‘project ID’에 입력 후 ‘HTMLify’버튼을 누르면 ‘result.html’이라는 이름으로 저장이 된다. 이제 저장된 HTML을 앱으로 만들기만 하면 된다.

영어로 가득하지만 위에서 복사한 숫자를 붙여넣고 ‘HTMLify’버튼만 누르면 된다. 사진=HTMLifer 갈무리/굿모닝충청=박종혁 기자
영어로 가득하지만 위에서 복사한 숫자를 붙여넣고 ‘HTMLify’버튼만 누르면 된다. 사진=HTMLifer 갈무리/굿모닝충청=박종혁 기자

먼저 ‘result.html’의 이름을 ‘index.html’로 바꿔준 뒤 인터넷에서 ‘quick-app’을 검색해 내려받으면 된다.

‘quick-app’ 폴더의 ‘assets’에 앞서 이름을 바꿔둔 ‘index.html’을 집어넣고 ‘Quick App.cmd’를 클릭하면 알아서 앱이 만들어진다.

‘assets’에 앞서 이름을 바꿔둔 ‘index.html’을 집어넣고 ‘Quick App.cmd’를 클릭하면 알아서 앱이 만들어진다. 사진=컴퓨터 화면 갈무리/굿모닝충청=박종혁 기자
‘assets’에 앞서 이름을 바꿔둔 ‘index.html’을 집어넣고 ‘Quick App.cmd’를 클릭하면 알아서 앱이 만들어진다. 사진=컴퓨터 화면 갈무리/굿모닝충청=박종혁 기자

만들어진 앱을 스마트폰으로 옮겨 설치하면 바로 실행할 수 있다.

아래는 코딩 후 HTML-앱 변환 과정을 담은 영상.



댓글삭제
삭제한 댓글은 다시 복구할 수 없습니다.
그래도 삭제하시겠습니까?
댓글 0
0 / 400
댓글쓰기
계정을 선택하시면 로그인·계정인증을 통해
댓글을 남기실 수 있습니다.

  • 굿모닝충청(일반주간신문)
  • 대전광역시 서구 신갈마로 75-6 3층
  • 대표전화 : 042-389-0080
  • 팩스 : 042-389-0088
  • 청소년보호책임자 : 송광석
  • 법인명 : 굿모닝충청
  • 제호 : 굿모닝충청
  • 등록번호 : 대전 다 01283
  • 등록일 : 2012-07-01
  • 발행일 : 2012-07-01
  • 발행인 : 송광석
  • 편집인 : 김갑수
  • 창간일 : 2012년 7월 1일
  • 굿모닝충청(인터넷신문)
  • 대전광역시 서구 신갈마로 75-6 3층
  • 대표전화 : 042-389-0087
  • 팩스 : 042-389-0088
  • 청소년보호책임자 : 송광석
  • 법인명 : 굿모닝충청
  • 제호 : 굿모닝충청
  • 등록번호 : 대전 아00326
  • 등록일 : 2019-02-26
  • 발행인 : 송광석
  • 편집인 : 김갑수
  • 굿모닝충청 모든 콘텐츠(영상,기사, 사진)는 저작권법의 보호를 받은바, 무단 전재와 복사, 배포 등을 금합니다.
  • Copyright © 2024 굿모닝충청. All rights reserved. mail to gmcc@goodmorningcc.com
ND소프트