앱인벤터2 – 스크린 복사하기

전체 강좌 목록:
http://semicolon1.kr/appinventor.html

post_copy_screen_ (0).png

이전에 썼던 강좌가 달라진 부분이 있고 내용 보충하여 다시 작성합니다.


앱인벤터2에서 스크린을 복사하는 방법을 알아보겠습니다.
지난 nb184 업데이트로 Ctrl+C/V로 컴포넌트의 복사가 가능해졌지만 여전히 스크린 복사를 지원하지는 않습니다.
앱 만들면서 스크린을 통으로 복사해야 할 일이 있는진 모르겠지만 간혹 이런 질문이 올라와서 올립니다.

일단 스크린을 복사하는 과정은 이렇습니다:
1) 프로젝트 파일(*.aia)을 생성한다
2) 압축을 푼다
3) 스크린 정보를 담고있는 파일을 복사한다
4) 기존 스크린 이름을 새로 만들어질 스크린이름으로 바꾼다
5) 복사된 파일 내부의 스크린 이름을 수정한다
6) 다시 압축해서 aia로 만든다
7) 앱인벤터로 다시 가져온다

그럼 이제 하나하나 자세히 알아보겠습니다.


1. 프로젝트 파일 생성

post_copy_screen_ (1).png

먼저 프로젝트를 엽니다.
저 프로젝트는 예전에 대충 만들었던 그림판 앱입니다.

post_copy_screen_ (2).png

상단 메뉴의 프로젝트 > 선택된 프로젝트 (.aia)를 내 컴퓨터로 내보내기를 눌러 프로젝트 파일을 aia파일로 받습니다.

post_copy_screen_ (3).PNG

aia파일이 다운로드 된 모습입니다.
aia확장자를 사용하는 다른 프로그램이 설치되어있어 아이콘이 보이는데 아마 기본은 아마 그냥 기본 파일 아이콘일겁니다만 상관없으니 무시합시다.

2. 압축 풀기

aia파일은 확장자가 aia이긴 하나 실제로는 zip 압축파일에 확장자만 aia로 표시한것입니다.

잠깐!
>>만약 아래 사진처럼 다운받은 aia 파일이 파일 탐색기에서 .aia 처럼 확장자가 보이지 않는다면 먼저 확장자를 표시해주세요:

post_copy_screen_ (4).PNG

▲ 확장자 안보이는 상태

post_copy_screen_ (5).PNG

위 사진처럼 보기>파일 확장명에 체크를 해주세요.

post_copy_screen_ (6).PNG

위 사진처럼 만들고 진행해주세요.

​이제 aia파일의 이름을 바꾸겠습니다.
앞 이름은 그대로 두고 뒤에 .aia만 .zip으로 변경합니다.
그러면 경고가 뜨는데 무시하시고 확인 누르시면 됩니다.

post_copy_screen_ (7).PNG

결과적으로 위와같이 보이면 됩니다.
마찬가지로 아이콘은 설치된 압축 프로그램에 따라 다르게 나타나니 무시합니다.
이제 저 zip파일의 압축을 풀어주시면 됩니다.

post_copy_screen_ (8).PNG

▲압축을 푼 모습

3. 스크린 파일 복사

이제 압축 해제 후 생성된 폴더를 열어서 다음과 같은 순서로 들어갑니다:
[압축푼 폴더명]/src/appinventor/ai_[앱인벤터 가입 구글 아이디]/[압축푼 폴더명]
위 순서대로 들어가면 해당 프로젝트의 스크린 이름으로 된 파일이 2개가 있을 것입니다.
같은 스크린 이름으로 이루어진 파일은 확장자가 다른 서로 2개의 파일이 짝을 지어 이루어집니다.

예를 들어 스크린 이름이 Screen1이라면 Screen1.bky파일과 Screen1.scm파일이 같은 짝입니다.
참고로 *.bky파일은 해당 스크린의 블록 구조를 담고있는 XML 형식의 파일이고, *.scm 파일은 해당 스크린의 레이아웃 구조를 담고있는 JSON 형식과 앱인벤터 자체 형식이 섞인 형태의 파일입니다.

이제 복사할 스크린의 파일을 복사해줍니다.
만약 “나는 Screen1을 NewScreen이라는 이름으로 복사하고싶어!”라고 하신다면 이렇게 합니다:
1) Screen1.bky파일과 Screen1.scm파일을 복사 후 동일 폴더에 붙여넣습니다.

post_copy_screen_ (9).PNG

복사할 두 스크린의 파일을 복사후 붙여넣습니다.

post_copy_screen_ (10).PNG

대충 저런식으로 복사가 될것입니다.

4. 복사된 파일 이름 변경

2) 이제 복사된 두 파일의 이름을 자신이 원하는 이름으로 서로 동일하게 바꿔줍니다.
여기서는 NewScreen으로 바꿀려면

post_copy_screen_ (11).PNG

이런식으로 하시면 되겠습니다!

5. 복사된 파일 내부 스크린 명 수정

이제 방금 새로 복사해서 NewScreen으로 이름을 변경한 두 파일의 내용도 수정해주어야 합니다.
저 두 파일을 열어야 되는데 더블클릭을 하던 우클릭 해서 연결 프로그램을 선택하던 우선 어떤 프로그램으로 열지 선택해줍니다.

텍스트 에디터를 선택해주면 되는데 그 이유는 사실 저 두 파일은 텍스트파일이지만 확장자만 바꿔놓은 것입니다.
즉, 일반 텍스트 에디터로 열 수 있습니다.
참고로 연결 프로그램 선택 시 주의할 점이 있습니다.
bky파일과 scm파일은 UTF-8로 인코딩되어있습니다. 그러므로 이 두 파일을 열려면 텍스트 에디터에서 UTF-8로 열어야 합니다.

선택지라면 보통 기본으로 다 설치되어있는 메모장이나 워드패드가 될 수 있습니다.
물론 다른 프로그램도 가능하고요.
다만 워드패드는 테스트 해보니 파일 열때 기본 인코딩이 ANSI인지 한글이 깨져서 나옵니다.
그러므로 그냥 메모장으로 열어줍니다. 메모장도 파일 열 때 인코딩 옵션이 4가지 있는데(ANSI, 유니코드, 유니코드(bug endian), UTF-8), 이 중 UTF-8을 선택해야 합니다.

post_copy_screen_ (12).PNG

위와 같은 순서로 여시면 됩니다.

post_copy_screen_ (13).PNG

그러면 bky파일의 경위 위처럼 보이게 됩니다.
서식이 좀 깨지지만 한글이 깨지지는 않으니 상관없습니다.

post_copy_screen_ (14).PNG

그리고 Ctrl+H를 눌러 바꾸기 창을 연 후 위와같이 입력합니다.
찾을 내용에는 이 파일이 복사 되기전의 스크린 이름을,
바꿀 내용에는 새 스크린 이름으로 지정해주세요.
그리고 대소문자 구분을 체크 후 모두 바꾸기를 눌러줍니다.
그리고 저장을 해주세요.

새로 복사한 두 파일 모두 위와 동일한 과정으로 바꾸고 저장해주시면 됩니다.

6. 다시 aia 파일로

모두 변경했으면 다시 aia파일로 만들어야 합니다.
그러려면 폴더들을 다시압축해야 합니다. 이 때, 압축 풀고 생성된 폴더가 아닌 src폴더와 youngandroidproject폴더를 압축해야 합니다.

post_copy_screen_ (15).PNG

위와 같이 저 두 폴더를 드래그해서 zip으로 압축해주세요.
계속 말하지만 설치된 압축 프로그램에 따라 우클릭시 나오는 메뉴의 모양은 다를 수 있습니다.

post_copy_screen_ (16).PNG

위와 같이 zip으로 압축된 파일을…

post_copy_screen_ (17).PNG

이렇게 다시 aia로 확장자를 바꿉니다!

7. 앱인벤터로 다시 가져오기

제작한 aia파일을 다시 앱인벤터로 불러옵니다.
aia파일을 앱인벤터 사이트에 그대로 드래그 하거나
프로젝트 > 내 컴퓨터에서 프로젝트 (.aia) 가져오기 …로 aia파일을 업로드합니다.​

이 때 기존 프로젝트와 이름이 겹치므로 새로 만든 aia파일의 이름을 조금 바꿔서(예: CopyTestPrj.aia -> CopyTestPrj2.aia) 올리거나
수정 전의 프로젝트를 삭제하시면 됩니다.
어차피 복사 전의 프로젝트는 이제 안 쓸거니까요.

post_copy_screen_ (18).png post_copy_screen_ (19).png

보시다시피 정상적으로 복사된것을 볼 수 있습니다.

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다