MAP 모바일앱개발전문가 2급

3

MAP(모바일앱개발전문가)란?

국내 최초의 모바일앱개발자격증!

MAP자격증이 왜 필요한가!

MAP 2급 점수 배점과 세부 내용은?

MAP(모바일앱개발전문가)는 Mobile Application development Professional의 약자로 모바일 기반

의 앱 기획·설계 및 UI/UX디자인, 프로그래밍 기술 등 모바일 애플리케이션에 대한 이해부터 전문적 개발

능력을 객관적으로 검정하는 자격 시험입니다.

•한국정보통신진흥협회에서 시행하고, 국내에서 실행되는 최초의 모바일앱 자격증입니다.

•홈페이지 : www.ihd.or.kr

•스마트 폰 활성화에 따른 국내 모바일 애플리케이션 이용의 급속한 확대

•모바일 애플리케이션 활용 산업 증가 및 앱 개발자에 대한 수요 증가

•모바일 앱 개발인력 학습 가이드 및 평가기준 요구에 의한 신규자격 개발 추진

등급 과목 검정기준 문항수 방 법 시 간

2급(5문항)

모바일 UI디 자 인

이미지 관리(아이콘, 시작, 배경관리 등)

1문항(20%)

실 기(작업형)

50분

게시판 디자인(메인메뉴, 컨트롤 스타일 설정 등)

모바일 앱제 작

앱 게시판 관리(RSS, 사진 게시판, 노트 관리 등)

4문항(80%)

앱 제작 도구(RSS, 사진미디어, 트위터 템플릿 등)

광고 관리(광고 배너 제작, 등록)

MAP(모바일앱개발전문가) 자격증?1

��.indd 3 2013-08-22 19:45:18

4

MAP 2급 자격증 시험 준비하기2

MAP 2급 시험 특징

MAP 2급 시험 기본 정보

MAP 2급 시험 진행 과정

지식 | 모바일 앱 제작에 대한 기본적인 이해도 평가

기능 | 모바일 앱 제작 툴 활용 능력(실기 툴 활용)

시험 접수

응시료 입금

접수 확인

실기(작업형) 5문항 50분 100점 60점 이상

검정방법 문항수 제한시간 만점 합격기준

응시 지역 | 서울, 부산, 대구, 광주, 대전, 인천, 수원, 천안, 전주, 제주

수수료 | 25,000원응시 자격 | 학력, 연령, 경력별 제한 없음

시험 응시

결과 확인

자격증수령

http://www.ihd.or.kr에서 시험 접수

MAP 2급은 모바일 앱 개발 도구인 앱 쿠커를 이용하여

웹 사이트에서 지시사항에 맞게 앱을 제작하는 실기형 시

험입니다.

http://www.ihd.or.kr에서 접수 확인([검정 원서 접수]-[접수/입금 확인] 메뉴)

지정된 시험 장소에서 실기 시험. 시험 시행 웹사이트는 당일날 공지

http://app.ihd.or.kr 사이트에서 시험과 동일한 환경에서 연습할 수 있음

합격자 발표 후 10일 후에 발송

http://www.ihd.or.kr에서 결과 확인([수검 정보]-[합격확인] 메뉴)

��.indd 4 2013-08-22 19:45:18

5

MAP 2급 시험 문제 살펴보기3

시험 응시를 할 때 수검자가 지켜야할 유의사항을 소개합니다. 한 줄 한 줄 꼼꼼히 읽어 실수를 범

하지 않도록 합니다.

모바일 UI 디자인

모바일 앱 제작을 위한 기본 이미지 관리(아이콘, 시작, 배경 관리 등)와 앱 화면의 디자인 스타일(메인

메뉴, 컨트롤 등의 색상 지정)을 지정하는 문제입니다.

문제1

��.indd 5 2013-08-22 19:45:19

6

모바일 앱 제작 (게시판 작성)

앱 쿠커에서 제공하는 [게시판 관리] 메뉴를 이용하여 노트, RSS 또는 사진, 일정 게시판에 게시물을

작성하는 문제입니다. 여기서 작성한 게시물은 다음 문제에서 사용됩니다.

모바일 앱 제작 (지도, 노트 메뉴 구성)

탭 메뉴를 추가하여 페이지를 구성하는 문제입니다. 지시된 주소로 지도를 표시하는 페이지나 앞에서

작성한 게시물을 이용하여 노트 페이지를 제작하는 문제입니다.

문제3

문제2

��.indd 6 2013-08-22 19:45:19

7

모바일 앱 제작 (멀티미디어와 SNS 관련 메뉴 구성)

멀티미디어와 SNS 요소를 이용한 메뉴를 제작하는 문제입니다. 이미지 게시물을 볼 수 있는 RSS 또

는 사진 메뉴와 유투브, 미투데이, 팟게스트를 이용한 메뉴를 제작합니다.

모바일 앱 제작 (일정과 연락처 메뉴 구성, 메뉴 순서 변경)

일정 정보를 표시하고, 전화를 걸 수 있는 연락처 메뉴를 작성합니다. 그리고 탭 메뉴의 순서를 변경

하여 문제 풀이를 마무리합니다.

문제5

문제4

��.indd 7 2013-08-22 19:45:19

8

앱을 실행하면 시작 이미지가 나타나고 잠시 후 홈

이미지 3장이 순차적으로 나타납니다.

앞에서 소개한 기출 문제로 제작한 앱은 스마

트폰에서 다음과 같이 동작합니다.

일정 게시판에 기록한 일정을 볼 수 있습니다.

게시판에 기록한 자료를 열어 볼 수 있습니다.

입력한 주소의 약도를 볼 수 있습니다.

사지선다형 문제를 풀 수 있습니다.

검색어에 해당하는 유투브 자료를 열어 볼 수 있

습니다.

연락처 목록을 이용하여 전화를 걸 수 있습니다.

[검정 일정] 메뉴

시작 화면

[시행 물품] 메뉴

[시험장] 메뉴

[문제 풀이] 메뉴

[관련 영상] 메뉴

[고객 센터] 메뉴

제작한 앱 스마트폰에서 어떻게 보일까?

��.indd 8 2013-08-22 19:45:20

1�.indd 11 2013-08-22 19:46:05

12

모바일 기기란 무엇이고 대표적인 모바일 기기인 스마트폰의 종류에는 어떤 것들이 있는지 알아 보겠습니다.

모바일 기기란?

모바일 기기란 인터넷이 가능하고 이동이 가능한 장치를 말합니다. 모바일 기기에는 스마트

폰, 태블릿 PC, 노트북 등이 있습니다. 이중에서 스마트폰은 항상 휴대하며 많은 사람들이

이용하기 때문에 대표적인 모바일 기기라 할 수 있습니다. 스마트폰은 전화 기능 이외에 인

터넷 접속을 통해 인터넷 검색 및 응용 프로그램을 다운로드받아서 문서 작성, 게임 등을 즐

길 수 있습니다.

스마트폰 종류

스마트폰의 종류는 기기에 설치되어 있는 운영체제에 따라 애플의 아이폰과 구글의 안드로이

드폰으로 나눌 수 있습니다.

애플의 아이폰은 iOS 운영체제를 이용하는데 iOS는 독립형 운영체제로 아이폰, 아이팟, 아

이패드 등의 애플 기기에서만 사용되고 있습니다. 2007년도에 아이폰1에 사용되어 모바일

기기의 유행을 불러 일으킨 대표적인 모바일 운영체제입니다.

아이폰의 화면 구조는 앱 아이콘을 나열해서 보여주는 방식으로 대부분의 스마트폰이 이러

한 화면 구조를 사용하고 있습니다. 또한 앱스토어(AppStore)를 도입하여 누구나 애플리케

이션을 개발하고 등록할 수 있고 사용자는 언제든지 다운로드해서 사용할 수 있는 모바일 생

태계를 만들었습니다.

모바일 기기 이해하기1

▲ 아이패드 태블릿 PC ▲ 아이폰 스마트폰 ▲ 안드로이드폰

1�.indd 12 2013-08-22 19:46:05

13

그리고 2010년에는 아이폰의 확장 기기격인 태블릿 PC 아이패드를 출시하였는데 이 기기

또한 iOS 운영체제를 사용하여 아이폰과 함께 이용할 수 있도록 하였습니다.

구글의 안드로이드는 개방형 운영체제로 갤럭시, 옵티머스, 베가 등 애플 제품 이외의 대부

분의 모바일 기기에 사용되고 있습니다. 안드로이드의 가장 큰 특징은 운영체제 소스를 공개

하여 개발사가 운영체제를 변형 및 사용이 자유롭다는 점입니다. 그래서 모바일 기기에서 가

장 많이 사용되고 있습니다.

안드로이드는 구글 플레이 마켓을 통해 앱, 도서, 음악을 다운로드 받을 수 있는 마켓을 운

영하고 있습니다. 사용자가 많은 만큼 iOS보다 앱 종수는 적지만 기하급수적으로 성장하고

있습니다.

▲ 아이폰의 화면 구조 ▲ 아이폰의 앱스토어

▲ 갤럭시폰의 화면 구조 ▲ 안드로이드 마켓인 구글 플레이

1.모바일 기기 이해하기

1�.indd 13 2013-08-22 19:46:06

14

모바일 앱의 앱(App)은 Application의 약자로 응용 프로그램을 말합니다. 모바일 앱은 모바

일 기기에서 운영하는 마켓을 이용하여 프로그램을 다운로드받아서 사용하는데 이와같이 설

치해서 사용하는 앱을 설치형 앱(Native App)이라고 합니다.

애플의 모바일 기기인 아이폰이나 아이패드는 [AppStore] 마켓을 이용하여 앱을 다운로드

받을 수 있고 안드로이드폰은 [Google Play]를 이용하여 앱을 다운로드받을 수 있습니다.

앱은 게임, 사진 촬영, 메모장 등 개발할 수 있는 종류가 다양하며 사용자는 마켓에서 원하는

앱을 선택해서 내 모바일 기기에 설치할 수 있습니다. 설치가 완료되면 화면에 설치한 앱의

아이콘이 표시되는데 이 아이콘을 탭하여 실행할 수 있습니다. 모바일 앱은 데이터가 내 모

바일 기기에 저장되어 있으므로 인터넷 연결이 없이도 실행이 가능합니다.

모바일 앱과 웹 이해하기2모바일에서 이용하는 콘텐츠는 운영 방식에 따라 크게 모바일 앱과 모바일 웹으로 나눌 수 있습니다. 모바일 앱과 웹의 특징에 대해서 알아보겠습니다.

모바일 앱에 대해서

▲ 모바일 앱으로 개발한 게임 앱 ▲ 모바일 앱으로 개발한 그림 그리기 앱

1�.indd 14 2013-08-22 19:46:07

15

모바일 웹에 대해서

모바일 웹은 모바일용 웹페이지를 말합니다. PC의 웹페이지처럼 모바일 기기에서 설치되어

있는 웹 브라우저를 이용하여 페이지를 열어 볼 수 있습니다. 웹페이지를 열어 보려면 모바

일 기기에서 브라우저 프로그램을 실행한 후 주소 입력줄에 접속할 모바일 웹 페이지 주소를

입력해서 접속합니다. 일반 웹페이지는 PC 모니터에 맞게 설계되어 있어 모바일 기기의 작

은 화면으로 보기에 불편하지만 모바일 웹 페이지는 모바일 환경에 최적화했기 때문에 문서

내용이 잘 보입니다. 웹페이지 주소도 조금 차이가 있습니다. 모바일 웹 페이지 주소는 도메

인 앞의 www 대신 m 문자를 많이 사용합니다. 예를 들어 www.naver.com의 모바일 웹

주소는 m.naver.com 입니다.

그러나 어떤 경우에는 모바일 기기에서 일반 웹페이지 주소로 접속해도 모바일 웹 페이지로

이동되기도 하는데 이는 웹 페이지에 접속했을 때 접속자의 기기 정보를 분석해서 모바일이

면 모바일 웹 페이지로 자동으로 연결해주기 때문입니다.

모바일 웹은 제작 방법은 일반 웹과 제작 방법이 다를까요? 아닙니다. 모바일 환경에 맞게 페

이지를 구성한 것일 뿐 웹페이지 기본 언어인 HTML로 작성하며 CSS나 JAVASCRIPT로

스타일이나 간단한 동적 효과를 연출하는 등 일반 웹과 제작 방식이 비슷합니다.

▲ [네이버] 모바일 웹 페이지 ▲ [조선일보] 웹 페이지

2.모바일 앱과 웹 이해하기

1�.indd 15 2013-08-22 19:46:07

Part1. 모바일 이해하기

16

동작 방식의 차이

모바일 웹은 HTML 문서를 해석하는 웹 브라우저만 있다면 하드웨어 기기와 관계없이 어디

서나 불러올 수 있습니다. 그러나 모바일 앱은 하드웨어 기기에 최적화해서 제작하기 때문에

해당 운영체제에서만 동작이 가능합니다. 예를 들어 아이폰에서 사용하는 애플리케이션을 안

드로이드폰에서는 사용할 수 없습니다.

운영체제 지원 유무

모바일 앱은 지정된 운영체제에 최적화하였기 때문에 웹보다는 빠르게 문서를 실행할 수 있

고 보안 문제가 강화할 수 있다는 장점을 가지고 있지만 특정 운영체제에서만 동작하기 때문

에 각각 다른 운영체제에 모두 서비스하려면 각각의 운영체제에 맞게 따로 개발해야합니다.

반면에 모바일 웹은 운영체제 종류에 관계없이 서비스를 실행할 수 있다는 장점을 가지고 있

지만 실행 속도가 앱보다 느리고 보안 문제가 취약하다는 문제를 가지고 있습니다. 실행 속도

는 하드웨어의 발달로 인해 앞으로 문제가 해결되리라 예상하기 때문에 앞으로 모바일 앱보

다는 모바일 웹으로 방향이 흘러가리라고 예상합니다.

개발 방식

모바일 웹은 컴파일이 필요없으며 필요한 태그를 이용하여 간단하게 작성할 수 있는 HTML

을 이용하기 때문에 제작이 무척 쉽다는 장점을 가지고 있습니다. 반면 모바일 앱은 프로그

래밍 언어를 이용하기 때문에 전문 프로그래머가 아니라 제작하기 어렵습니다. 모바일 앱에

서 사용하는 프로그래밍은 iOS, Android 등 해당 모바일 운영체제에서 제공하는 언어로

제작해야 합니다. 보통 모바일 운영체제 업체에서 제공하는 제작툴을 이용하여 프로그래밍

합니다.

장점 단점

모바일 앱

최적화된 UI 제공

빠른 처리 속도

하드웨어 기능 활용 가능

기기별 호환성 떨어짐

유지보수 어려움

모바일 웹

제작 편리

높은 호환성

유지 보수 용이

느린 반응 속도

획일화된 UI

모바일 웹과 앱 비교 분석

1�.indd 16 2013-08-22 19:46:07

17

모바일 웹과 모바일 앱의 기능을 합친 하이브리드 앱이 무엇이고 어떤 특징을 가지고 있는 알아보겠습니다.

하이브리드 앱이란?

하이브리드 앱(웹앱, Hybrid App)이란 모바일 앱과 모바일 웹의 기능을 섞어서 만든 앱으로

개발은 제작하기 쉬운 모바일 웹 방식을 이용하고 배포는 모바일 앱 형식으로 감싸놓아 마켓을

이용하여 다운로드받아서 사용할 수 있습니다.

하이브리드 앱은 모바일 앱처럼 설치 과정을 거쳐 모바일 기기에 표시하지만 화면 구조는 모

바일 웹과 비슷합니다. HTML을 이용했기 때문에 웹 서버의 내용을 불러와서 표시할 수 있

어서 수정 사항이 있을 경우 웹 서버에 저장되어 있는 데이터만 수정하면 바로 반영됩니다.

한 번 설치하면 재설치하기 전까지 갱신이 어려운 모바일 앱과 다른 큰 특징입니다.

또한 HTML에서 표현하기 어려운 기능을 모바일 앱 기술을 이용하여 동적인 형태의 메뉴를

구성하거나 모바일 기기의 특징인 위치 추적, 탭 기능, 기울임 인식 기능 등을 이용할 수 있

도록 해줍니다.

그리고 하이브리드 앱의 가장 큰 특징은 다양한 모바일 운영체제에 손쉽게 접근할 수 있다는

점입니다. 모바일 앱은 각각의 모바일 운영체제에 맞게 하나 콘텐츠를 별도로 제작해주어야

하이브리드 앱 이해하기3

1�.indd 17 2013-08-22 19:46:07

19

HTML은 웹 페이지를 제작할 때 사용하는 웹 표준 기술입니다. HTML은 [메모장]과 같은

텍스트 편집기를 이용해서 손쉽게 작성할 수 있습니다. 화면에 표시할 글을 작성하고 입력

한 글에 적용할 방식을 태그라는 명령을 이용하여 입력해주면 됩니다. 태그는 명령어로 꺽쇠

(<,>)로 표시합니다.

예를 들어 글자를 두껍게 표시해주는 태그인 <b>를 글자 앞과 뒤에 입력해줍니다. 이때 뒤에

입력하는 태그는 명령어 앞에 ‘/’ 표시를 넣어 주어야 합니다. 이렇게 작성한 후 HTML 파일

형식으로 저장해서 웹브라우저로 불러오면 글자가 두껍게 표시됩니다. 이와같이 HTML은

태그를 이용하여 손쉽게 문서를 꾸밀 수 있습니다.

HTML은 제목, 소제목, 본문 등으로 표현하는 간단한 전자출판을 목적으로 개발되었기 때

문에 동적 처리나 다양한 서식 표현에 어려움이 있습니다. 이러한 표현의 어려움을 CSS라

는 스타일 시트 기능을 이용하여 복잡한 서식 표현을 가능하게 해주고 자바 스크립트를 이용

하여 사용자의 조작에 따라 문서에 삽입되어 있는 요소를 움직이게 하는 등의 동적 처리를 할

수 있습니다.

모바일 웹에도 이러한 HTML, CSS, Javascript 등을 이용하여 문서를 작성합니다. 단,

모바일은 웹과 다르게 여러 가지 표현할 수 없는 기능 제약을 가지고 있으므로 개발할 때 이

부분을 참고해서 작업해야 합니다.

모바일웹은 HTML로 제작합니다.여기서는 HTML이 무엇이고 어떻게 작성하는지 알아보면서 모바일 웹이 어떻게 동작하는지 살펴보겠습니다.

HTML에 대해서

HTML로 모바일 웹 만들기4

<b>안녕하세요</b> 안녕하세요⇢

1�.indd 19 2013-08-22 19:46:08

23

모바일 앱을 개발하려면 크게 콘텐츠 기획, 콘텐츠 디자인, 앱 프로그래밍이 필요합니다. 좋

은 기획을 가지고 있더라도 그래픽과 프로그래밍을 할 수 없다면 개발하기 어렵습니다. 앱

저작 도구는 이러한 문제를 해결해줍니다. 앱 저작 도구는 별도의 지식없이 마우스 클릭만으

로 원하는 콘텐츠를 제작할 수 있도록 해주기 때문에 단지 좋은 기획만 가지고 있더라도 멋진

앱을 개발할 수 있습니다. 이 도서에서 소개하는 앱 쿠커는 별도의 프로그램을 설치해서 사

용하지 않고 웹브라우저에서 직접 동작하며 별도의 코딩 작업없이 마우스 클릭만으로 손쉽게

앱을 만들 수 있도록 해주는 대표적인 앱 저작 도구입니다.

모바일 앱 저작도구가 무엇인지 알아보고 대표적인 앱 저작도구인 앱 쿠커를 이용하여 앱을 개발하는 방법에 대해서 살펴보겠습니다.

앱 저작도구 앱 쿠커

앱 저작도구 앱 쿠커 알아보기5

1�.indd 23 2013-08-22 19:46:09

28

콘텐츠를 제작하는 것보다 중요한 것은 어떤 콘텐츠를 만들것인지 구상하는 것입니다. 아무

리 잘만든 콘텐츠라도 내용이 부실하면 관심받기 어렵기 때문입니다. 그래서 콘텐츠 기획은

제작만큼 충분히 검토해야 합니다. 좋은 아이디어를 만들려면 평소 메모를 습관화하여 그때

그때 생각나는 아이디어를 적어 두도록 합니다. 이러한 하나하나의 아이디어를 모아둔 후 이

중 좋은 아이디어를 골라내고 검증해서 좋은 아이디어를 뽑아 내도록 합니다. 선택된 아이디

어를 중심으로 어떻게 콘텐츠를 개발할지 설계한 후 개발하도록 합니다.

모바일 앱 개발 기획하기6모바일 앱 개발에서 가장 중요한 부분은 콘텐츠를 기획하는 것입니다. 콘텐츠 기획에 대한 방법과 주의해야 할 사항을 알아보겠습니다.

콘텐츠 기획하기

⇢⇢

⇢⇢

1�.indd 28 2013-08-22 19:46:09

2�.indd 35 2013-08-22 19:46:14

36

웹 브라우저를 실행한 다음 연습용 [앱쿠커] 홈페이지(http://app.ihd.or.kr)에 접속합

니다.

모바일 앱 환경설정하기1시험을 치를 때는 모바일앱 개발전문가 사이트에 접속해서 수험번호로 로그인하여 접속하지만 평소에는 연습용 [앱쿠커] 홈페이지에 접속해서 앱 개발을 연습합니다. 여기서는 연습용 사이트에 접속하고 기본 정보를 입력하는 방법에 대해서 알아보겠습니다.

1

모바일 앱 플랫폼과 타입 종류 선택하기

연습용 [앱쿠커] 홈페이지 로그인하기

로그인 화면이 나타나면 [아이디]와 [비밀번호] 항목에 접속 아이디와 비밀번호를 입력하

고 [로그인] 버튼을 클릭합니다.2

페이지가 열리면 [나만의 앱 만들기] 버튼을 클릭합니다.1

연습용 [앱쿠커] 홈페이지에서 연습할 경우 이

부분을 클릭해서 회원가입 후 로그인합니다.

실제 시험을 치를 때는 시험장에서 알려주는 검정용

사이트에 접속한 후 수험 번호로 로그인합니다.

2�.indd 36 2013-08-22 19:46:14

37

제작할 모바일 앱의 플랫폼을 선택합니다.2

[타입 선택] 항목에서 타입 종류를 선택한 후 [계속] 버튼을 클릭합니다.3

타입이란 모바일 앱 화면 구조를 말합니다. 일반형은 최대 5개의

메뉴만 만들 수 있고 하위 메뉴는 총 30개만 제작이 가능한 단순

한 형태의 화면 구조입니다. 확장형은 가장 많이 사용되는 화면

구조로 최대 30개의 메뉴와 30개의 하위 메뉴를 만들 수 있습니

다. 시험에서 대부분 확장형이 출제됩니다.

플랫폼이란 모바일에 사용되는 운영체제 종류를 말합니다. 대표

적인 모바일 플랫폼에는 아이폰과 안드로이드가 있습니다.

모바일 앱 제작시 주의사항 페이지가 나타나면 내용을 잘 읽고 숙지한 후 [확인하였으며, 제

작을 진행합니다.] 버튼을 클릭합니다.4

1.모바일 앱 환경설정하기

2�.indd 37 2013-08-22 19:46:15

Part2.유형별 이론 학습하기

38

앱 제작 편집 화면이 나타납니다.5

앱 이름 지정하기

[앱 이름] 항목의 글상자를 클릭한 후 앱 이름을 입력하고 [적용] 버튼을 클릭합니다.1

앱 이름은 스토어에 등록되는 이름으로 한글 6자, 영문

11자까지 입력이 가능합니다. 앱 이름은 언제든지 수정

할 수 있지만 스토어 등록 후에는 변경이 되지 않으므로

주의하도록 합니다.

앱 이름이 등록됩니다. 2

앞에서 선택한 타입을 다른 타입으로 변경하고 싶을 경우

에는 [기본정보]에서 [변경] 버튼을 클릭한 후 [변경] 버튼

을 클릭하면 [일반형]으로 타입이 바뀝니다.

2�.indd 38 2013-08-22 19:46:15

39

작업 완료 후 재작업하기

[앱관리] 메뉴를 클릭합니다.1

버튼을 클릭하면 편집 화면으로 이동되어 계속해서 작업할 수 있습니다.2

버튼을 클릭하면 선택한 앱 작업이 삭제됩니다. [나

만의 앱 만들기] 버튼을 클릭해서 새롭게 앱을 제작할 수

있습니다.

1.모바일 앱 환경설정하기

2�.indd 39 2013-08-22 19:46:15

40

[포토샵]을 실행한 다음 [파일]-[신규] 메뉴를 클릭합니다.

모바일 앱 아이콘 제작하기2앱 아이콘은 앱 설치시 바탕 화면에 표시되는 아이콘으로 아이콘 크기는 정사각형으로 57 픽셀 크기로 제작합니다. 여기서는 포토샵을 이용하여 모바일 앱 아이콘을 제작하는 방법에 대해서 알아보겠습니다. 실제 시험에서는 앱 아이콘 이미지는 제공됩니다.

1

[포토샵]으로 앱 아이콘 디자인하기

[포토샵]은 대표적인 그래픽 편집 프로그램으로 이미지를 편집하

거나 새로운 이미지를 제작할 수 있습니다.

[폭]과 [높이] 항목에 ‘57’, [해상도] 항목에 ‘72’를 입력하고 [승인] 버튼을 클릭합니다.2

[픽셀]이란 화면을 구성하는 가장 작은 점으로 폭과 높이를 차지

하는 픽셀 개수로 이미지 크기를 표시합니다.

2�.indd 40 2013-08-22 19:46:15

46

[포토샵]을 실행한 후 [파일]-[신규] 메뉴를 클릭한 다음 [폭] 항목에 ‘640’, [높이] 항목에

‘88’을 입력하고 [승인] 버튼을 클릭합니다.

배너 이미지 제작하기3배너 이미지는 앱 상단에 매 페이지마다 항상 표시됩니다. 앱을 소개를 하는 이미지로 이용하거나 광고 이미지로 사용할 수 있습니다.여기서는 포토샵을 이용하여 로봇 이미지가 있는 배너 이미지를 만들어 보겠습니다. 실제 시험에서는 배너 이미지가 제공됩니다.

1

[포토샵]으로 배너 이미지 만들기

[앱쿠커]에서 사용하는 배너 이미지는 폭 640 픽셀, 높이 88 픽

셀입니다.

[파일]-[열기] 메뉴를 클릭합니다.2편집에 사용할 이미지를 선택한 후 [열기] 버튼을 클릭합니다.3

2�.indd 46 2013-08-22 19:46:16

51

포토샵을 실행한 다음 [파일]-[열기] 메뉴를 클릭합니다.

앱 시작 이미지 삽입하기4앱 시작 이미지는 앱을 실행할 때 맨 처음 나타났다가 잠시 후 사라지는 이미지로 제작자나 앱 소개 이미지를 보여줄 때 이용합니다. 여기서는 포토샵으로 앱 시작 이미지에 알맞은 크기로 조절하고 앱 쿠커에 이미지를 등록하는 방법에 대해서 알아보겠습니다.

1

[포토샵]으로 이미지 크기 조절하기

앱에 사용할 이미지를 선택한 후 [열기] 버튼을 클릭합니다.2

사진이 불러와지면 도구를 클릭한 후 옵션 메뉴에서 [폭] 항목에 ‘320’, [높이] 항목에

‘533’, [해상도] 항목에 ‘72’를 입력합니다.3

지정한 크기만큼 이미지를 잘라낼 때 사용하는 도구입니다.

2�.indd 51 2013-08-22 19:46:17

54

[앱쿠커] 홈페이지의 편집 화면에서 [홈 이미지] 항목의 [추가] 버튼을 클릭합니다.

홈 이미지 삽입하기5홈 이미지는 앱을 소개하는 이미지로 홈 시작 이미지가 나타난 다음에 표시됩니다. 홈 이미지는 여러 장의 이미지를 등록하여 이미지가 순차적으로 나타나게 만들 수 있습니다.

1

홈 이미지 등록하기

[이미지 선택] 버튼을 클릭하면 나타나는 대화 상자에서 추가할 이미지를 선택합니다.2

추가할 이미지는 가로 320, 세로 533 픽

셀 크기로 준비합니다.

이미지가 삽입되면 [확인] 버튼을 클릭합니다.3

2�.indd 54 2013-08-22 19:46:18

57

[앱쿠커] 홈페이지의 편집 화면에서 [탭 추가] 버튼을 클릭하면 나타나는 메뉴에서 [노트]를

클릭합니다.

노트 페이지 만들기6앱 쿠커에는 다양한 형태의 페이지를 추가할 수 있습니다. 이중에서 자유롭게 글과 그림을 삽입하려면 [노트]를 이용합니다. 여기서는 [노트]를 이용하여 문서 작성하는 방법과 홈페이지를 링크로 설정하는 방법에 대해서 배워보겠습니다.

1

[노트]로 문서 작성하기

[탭 이름]에 메뉴에 표시할 이름을 입력하고 [탭 아이콘]의 [선택] 버튼을 클릭하면 나타나는

아이콘 목록에서 메뉴에 표시할 아이콘을 클릭한 후 [적용] 버튼을 클릭합니다.2

2�.indd 57 2013-08-22 19:46:18

61

[앱쿠커] 홈페이지에서 [게시판관리] 메뉴를 클릭한 후 [노트] 탭을 클릭하고 [새 글 작성] 버

튼을 클릭합니다.

노트로 사지선다형 문제 만들기7게시판으로 문제와 답안 글을 작성한 후 [노트]로 게시물을 불러와서 링크로 연결해주면 사지선다형 문제를 만들 수 있습니다. 시험에 자주 출제되는 유형이므로 잘 알아두도록 합니다.

1

질문 게시물 작성하기

[제목]에 노트 이름을 입력하고 본문 글상자를 클릭하여 문제 질문과 보기 글을 작성합니다.2

보기 글을 마우스로 드래그해서 블록을 설정한 다음 버튼을 클릭합니다.3문제 작성이 완료되었으면 [저장] 버튼을 클릭합니다.4

[게시판관리]에는 RSS 게시물, 게시판을 이용한 메모, 사

진, 일정 정보를 기록하거나 열어 볼 수 있는 메뉴입니다.

2�.indd 61 2013-08-22 19:46:19

66

RSS(Rich Site Summary)란 웹 사이트의 정보를 모아서 알려주는 서비스입니다. RSS는

정보를 볼 수 있는 주소를 제공하고 이러한 RSS 정보를 열어 보려면 RSS 리더기를 이용하면

한 곳에서 여러 사이트의 정보를 함께 볼 수 있습니다. 대표적인 RSS 리더기는 [HanRSS]

홈페이지(http://www.hanrss.com), [My Yahoo] 홈페이지(http://my.yahoo.com),

[iGoogle] 홈페이지(http://www.google.co.kr/ig) 등이 있습니다.

예를 들어 [조선일보] 홈페이지(http://www.chosun.com)에서 스포츠 관련 기사만 보고

싶다면 RSS 서비스를 제공하는 [조선일보 RSS 서비스] 홈페이지(http://rssplus.cho-

sun.com)에 접속한 후 [스포츠] 항목의 [HanRSS] 버튼을 클릭하면 자동으로 [HanRSS]

홈페이지에 조선일보 스포츠 RSS 정보가 자동으로 등록되어 조선일보 홈페이지에 접속하

지 않고 [HanRSS] 홈페이지(http://www.hanrss.com)에서 스포츠 기사를 열어 볼 수

있습니다. 이러한 방법으로 웹사이트의 RSS 정보를 등록해두면 [HanRSS] 홈페이지에서

각종 정보를 함께 볼 수 있습니다. 대부분의 포털, 신문, 블로그, 카페 등의 홈페이지에서

RSS 서비스를 제공하며 RSS를 지원하는 홈페이지에는 아이콘이 표시되어 있습니다.

RSS 게시판 페이지 만들기8RSS는 수많은 인터넷 공간에서 원하는 자료만 골라서 볼 수 있도록 해주는 서비스입니다. 앱 쿠커에는 페이지에 RSS를 등록하여 사용할 수 있습니다. 여기서는 RSS가 무엇이고 RSS 페이지를 만들어 보겠습니다.

RSS란

▲ [조선일보 RSS 서비스] 홈페이지(http://rssplus.chosun.com)

▲ [HanRSS] 홈페이지(http://www.hanrss.com)

2�.indd 66 2013-08-22 19:46:20

72

이미지 게시판 페이지 만들기9앱 쿠커에서 지원하는 [이미지] 페이지는 이미지 게시판에 올린 사진들을 작은 이미지로 보여주는 기능입니다. [이미지] 페이지를 이용하려면 우선 페이지에 나타나게 할 이미지를 게시판에 등록해야 합니다. 시험에서는 3개의 이미지를 등록하는 유형이 주로 출제됩니다.

사진 게시판에 이미지 등록하기

[앱쿠커] 홈페이지에서 [게시판관리] 메뉴를 클릭하고 [사진] 탭을 클릭한 후 [새 그룹] 버튼

을 클릭합니다.1

[제목] 글상자에 게시물 제목을 입력한 후 [추가] 버튼을 클릭합니다.2

게시물이 등록되면 게시물을 클릭하고 [새 사진] 버튼을 클릭합니다.3

[사진] 탭은 이미지와 간략한 이미지 소개글을 작성할 수

있는 게시판입니다.

2�.indd 72 2013-08-22 19:46:21

75

[앱쿠커] 홈페이지에서 [게시판관리] 메뉴를 클릭한 다음 [일정] 버튼을 클릭하고 [새 그룹]

버튼을 클릭합니다.

일정 페이지 만들기10앱 쿠커에서 제공하는 일정 페이지는 캘린더 형태로 구성되어 있는 일정 게시판에서 작성한 일정을 표시해주는 기능입니다. 시험에서는 제시된 일정을 일정 페이지로 표시하는 유형의 문제가 주로 출제됩니다.

1

일정 게시판 작성하기

[제목] 글상자에 제목을 입력하고 [추가] 버튼을 클릭합니다.2

등록된 게시물 목록을 클릭하면 캘린더가 나타납니다.3

2�.indd 75 2013-08-22 19:46:22

78

지도 페이지 만들기11[지도] 페이지는 위치 추적 기능을 이용하여 입력한 주소에 해당하는 위치를 지도로 보여주는 기능입니다. 시험에는 지정된 주소로 위치를 찾고 제시된 결과 사진을 보고 지도의 확대 비율까지 지정하는 문제가 출제됩니다.

[앱 쿠커] 홈페이지의 편집 화면에서 [탭 추가] 버튼을 클릭한 후 [일정]을 클릭합니다.1

탭 이름과 탭 아이콘을 설정한 다음 [주소 검색] 항목에 검색할 주소를 입력하고 [검색] 버튼

을 클릭합니다.2검색 목록이 나타나면 검색 목록을 클릭합니다.3

2�.indd 78 2013-08-22 19:46:22

80

연락처 페이지 만들기12[연락처] 탭은 친구들의 전화번호, 이메일, 홈페이지 주소 목록을 등록할 수 있도록 해주는 기능으로 스마트폰에서 등록된 목록을 탭하여 전화걸기, 이메일 보내기, 홈페이지 접속을 할 수 있습니다.

[앱쿠커]의 편집 화면에서 [탭 추가] 버튼을 클릭한 후 [연락처]를 클릭합니다.1

탭 이름과 탭 아이콘을 설정한 다음 [타입] 항목에 [전화번호]를 선택하고 지시사항에 맞게 이

름, 내용, 설명을 작성한 후 [추가] 버튼을 클릭합니다.2

[타입]에 [이메일]을 선택한 경우

[타입]에 [사이트]를 선택한 경우

2�.indd 80 2013-08-22 19:46:23

82

탭 컨테이너로 그룹 메뉴 만들기13탭 컨테이너는 하위 메뉴를 만들어 주는 도구입니다. 비슷한 내용의 메뉴이 많을 경우 그룹으로 묶어주면 손쉽게 메뉴를 간략하게 구성할 수 있습니다. 시험에서는 2~3개 정도의 메뉴를 그룹으로 묶는 문제가 주로 출제됩니다.

그룹 메뉴 만들기

[앱쿠커] 홈페이지의 편집 화면에서 [탭 추가] 버튼을 클릭한 후 [탭 컨테이너]를 클릭합니다.1

탭 이름과 탭 아이콘을 설정한 다음 [저장] 버

튼을 클릭합니다.2

탭 메뉴에서 추가한 메뉴에 표시되어 있는 [항목추가] 버튼을 클릭합니다.3[탭 메뉴 선택] 창이 열리면 [노

트] 버튼을 클릭합니다.4

2�.indd 82 2013-08-22 19:46:23

84

팟 캐스트와 유투브 페이지 만들기 14팟 캐스트와 유투브는 대표적인 멀티미디어 콘텐츠로 앱 쿠커를 이용하여 팟 캐스트와 유투브를 삽입해서 메뉴를 구성할 수 있습니다. 시험에서는 주로 유투브로 검색한 결과 페이지를 구성하는 문제가 주로 출제되고 있지만 팟 캐스트를 이용한 문제도 출제되리라 예상합니다.

팟 캐스트와 유투브에 대해서

팟 캐스트(Podcast)는 비디오나 오디오 자료를 배포하여 사용자들이 구독해서 볼 수 있도

록 해주는 서비스입니다. 팟 캐스트라는 단어는 애플의 아이팟과 브로드캐스트의 합성어로

등장한 것인 만큼 애플의 팟 캐스트가 대표적입니다. 애플의 아이튠즈(iTunes) 프로그램으

로 팟 캐스트 스토어에 접속하면 다양한 비디오나 오디오 자료를 검색해서 구독해서 볼 수

있습니다.

유투브는 전세계 수많은 사용자들이 올린 다양한 동영상 정보를 볼 수 있도록 해주는 서비스

입니다. 유투브는 전문적인 정보부터 개인이 올린 소소한 이야기들까지도 함께 볼 수 있습니

다. 유투브 서비스를 이용하려면 [유투브] 홈페이지(http://www.youtube.com)에 접속

하거나 모바일 기기인 경우에는 [유투브] 앱을 설치해서 서비스를 이용할 수 있습니다.

▲ 애플 [iTunes]의 팟 캐스트 스토어 ▲ 아이폰에서 팟 캐스트 검색하는 장면

▲[유투브] 홈페이지(http://www.youtube.com) ▲ [유투브] 앱으로 검색하는 장면

2�.indd 84 2013-08-22 19:46:24

88

미투데이 페이지 만들기15미투데이는 친구끼리 실시간으로 정보를 주고받을 수 있는 서비스로 앱 쿠커를 이용하여 메뉴에 미투데이 페이지를 연결시킬 수 있습니다. 시험에서는 지시사항으로 제시되는 미투데이 홈페이지 주소를 이용하여 메뉴를 추가하는 유형이 출제됩니다.

SNS와 미투데이에 대해서

미투데이는 친구들의 소식을 보거나 서로 대화하고 정보를 공유할 수 있는 서비스입니다.

이와같이 친구끼리 대화를 나누거나 정보를 공유하는 서비스를 SNS라고 하는데 대표적인

SNS에는 트위터, 미투데이, 페이스북 등이 있습니다. 트위터나 미투데이는 홈페이지 접속

해서 서비스를 이용할 수 있지만 스마트폰에서도 관련 앱을 설치해서 서비스를 이용할 수 도

있습니다. 스마트폰을 이용하면 바로바로 정보를 확인할 수 있다는 장점을 가지고 있습니다.

최근 자연재해가 발생했을 때 뉴스보다 SNS를 이용한 정보 공유가 더 빨리 알려져 큰 사고

를 막을 수 있었다는 기사를 통해 SNS의 특징을 알 수 있습니다.

SNS를 이용하려면 회원가입을 해야 합니다. 미투데이같은 경우에는 [미투데이] 홈페이지

(http://me2day.net)에 접속해서 회원가입을 하면 서비스를 바로 이용할 수 있습니다. 이

때 홈페이지 주소가 부여되는데 이 주소에 접속하면 자신의 웹페이지가 열리며 이곳에서 친

구들과 정보를 공유할 수 있습니다.

친구신청 버튼을 클릭해서 친구가 올린 글을 내 미투데이 홈페이지에서 볼 수 있습니다.

회원가입할 때 제공되는 미투데이 홈페이지 주소에 접속해서 친구나 내가 올린 글들을 볼 수 있습니다.

게시물이 공감되면 [미투] 버튼을 눌러 주세요.

게시물에 대한 친구들이 올린 글들을 보거나 댓글을 달 수 도 있습니다.

2�.indd 88 2013-08-22 19:46:24

90

앱 스타일과 메뉴 위치 변경하기16앱 쿠커의 스타일을 이용하면 앱 페이지의 요소의 색상을 한 번에 변경할 수 있고, 탭 순서 변경 기능을 이용하여 이미 제작한 탭 메뉴의 위치도 자유롭게 변경할 수 있습니다. 위 두 가지 방법은 매 회 시험에 출제되므로 잘 알아두도록 합니다.

앱 요소 색상 꾸미기

[앱쿠커] 홈페이지의 편집 화면에서 오른쪽에 위치

해 있는 [스타일] 항목에서 색을 바꿀 항목의 색상

단추를 클릭합니다. 색상표가 나타나면 변경할 색

을 클릭합니다.

1

같은 방법으로 각 요소의 색을 변경한 후 [적용] 버튼을 클릭합니다.2

탭 메뉴

컨트롤

리스트

리스트 배경: 홀수

리스트 배경: 짝수

2�.indd 90 2013-08-22 19:46:25

3�.indd 93 2013-08-22 19:46:27

94

시험장에서 알려주는 [모바일앱 개발전문가(MAP) 2급] 검정용 사이트에 접속한 후 이름과

수험번호를 입력해서 로그인합니다. 여기서는 연습용 [앱 쿠커] 사이트(http://app.ihd.

or.kr )로 소개합니다.

시험 준비 작업1시험을 치르기 전에 모바일앱 개발전문가 사이트에 접속해서 로그인하여 문제를 풀 준비를 미리 해둡니다.

1

[나만의 앱 만들기] 버튼을 클릭해서 시험 준비를 완료합니다.2

실제 시험을 치를 때는 시험장에서 알려주는 검정용 사이트에 접

속하며 수험번호와 이름을 입력해서 로그인합니다.

3�.indd 94 2013-08-22 19:46:28

95

모바일앱 개발전문가 2급 시험은 온라인으로 시행되는 시험입니다. 시험이 시작되면 감독관의 지시에 따라 시험 홈페이지에 접속한 다음 시작단추를 클릭해서 문제지를 확인합니다.

시험 문제지 확인하기2

총점 : 100점 시간 : 50분

주의 사항 안내

3�.indd 95 2013-08-22 19:46:28

Part3.기출문제 따라해보기

96

작업 선택

기본 디자인 구성

디자인 스타일 변경

문제 1

3�.indd 96 2013-08-22 19:46:28

97

2.시험 문제지 확인하기

노트 게시판

•새글 작성

•하이퍼링크 연결

일정 게시판

•그룹추가

•일정 등록

RSS 또는 사진 게시판

•폴더명 변경

•사진 등록

•내용 작성

문제 2

3�.indd 97 2013-08-22 19:46:29


98

노트 탭

•아이콘 변경

•노트 게시판 연동

지도 탭

•아이콘 변경

•지도 검색

•지도 배율조정

문제 3

3�.indd 98 2013-08-22 19:46:29

99

탭 컨테이너와 유투브

•아이콘 성정

•유투브 항목 추가

•검색어 기능 활용

RSS 또는 사진 탭

•아이콘 변경

•사진 추가 등록

•RSS 또는 사진 게시판 연동

2.시험 문제지 확인하기

문제 4

3�.indd 99 2013-08-22 19:46:30


100

연락처 탭

•아이콘 변경

•연락처 등록

앱 메뉴 순서변경

일정 탭

•아이콘 변경

•일정 추가 등록

•연락처 게시판 연동

문제 5

3�.indd 100 2013-08-22 19:46:30

101

[문제1] 풀어보기3[문제1]은 플랫폼 형식 지정, 앱 이름, 기본 이미지 등록, 스타일 지정 등 모바일 앱의 기본 환경을 설정하는 문제가 출제됩니다. 대부분 유사한 형태로 출제되므로 작업 순서대로 과정을 잘 숙지하도록 합니다.

제작하는 앱은 안드로이드 플랫폼의 확장형 타입으로 작업합니다.

제작하는 앱의 이름은 “KAIT 수검용 앱”으로 작성하시오.

[플랫폼 선택] 항목에서 [안드로이드], [타입 선택] 항목에서 [확장형]을 순서대로 선택한 다

음 [계속] 버튼을 클릭합니다.

[앱 이름] 항목의 글상자를 클릭한 다음 ‘KAIT 수검용 앱’을 입력한 후 [적용] 버튼을 클릭

합니다.

《처리조건》

《처리조건》

플랫폼 형식 설정하기

앱 이름 지정하기

3�.indd 101 2013-08-22 19:46:30

106

노트 게시판을 아래 조건에 맞게 작성하시오. (내용은 ‘문제풀이.txt’를 이용)

•노트1 ⇒ 제목 : “문제풀이”, 내용 : ‘문제풀이.txt’ 파일의 <문제> 내용 작성

하이퍼링크 : 보기 (2) 번은 ‘정답노트’

보기 (1), (3), (4) 번은 ‘오답노트’에 링크

•노트2 ⇒ 제목 : “정답”, 내용 : ‘문제풀이.txt’ 파일의 <정답> 내용 작성

•노트3 ⇒ 제목 : “오답”, 내용 : ‘문제풀이.txt’ 파일의 <오답> 내용 작성

새 노트를 작성하기 위해서 [게시판 관리]-[노트] 탭을 클릭하고 [새 글] 버튼을 클릭합니다.

[제목] 항목에는 ‘문제풀이’, [내용] 항목에는 ‘문제풀이.txt’ 파일의 <문제> 내용을 작성하고

[저장] 버튼을 클릭합니다.

《처리조건》

[문제2] 풀어보기4[문제2]에서는 페이지 구성할 때 사용할 노트, 게시판, 일정 게시판을 제작하는 문제가 출제됩니다. 특히 노트 작성시 하이퍼링크를 이용한 질의응답을 풀는 문제는 까다로우므로 하이퍼링크 기능이 무엇이고 어떻게 동작시키는지 숙지하도록 합니다.

노트 작성하고 하이퍼링크 걸기

1

2

3�.indd 106 2013-08-22 19:46:31

111

[문제3] 풀어보기5[문제3]에서는 처음으로 페이지를 제작하는 문제가 출제됩니다. 입력한 주소에 대한 지도가 나타나는 페이지와 앞에서 제작한 노트를 표시하는 페이지를 만듭니다.

지도 페이지 만들기

지도 도구를 이용하여 시험장 위치를 안내하는 메뉴를 작성하시오.

•탭 이름 : “시험장”

•탭 아이콘 : “ ” 아이콘으로 변경

•검색주소 : “서초구 서초동 1678-4 서초지웰타워”

•표시제목 : “강남시험장”

•표시설명 : “KAIT 자격검정 사업단”

•표시방법 : 지도 배율을 조정하여 ‘결과화면’과 동일하게 표시 (지도 축적 : 50m)

[앱 관리] 메뉴에서 [탭 메뉴 구성]-[탭 추가] 버튼을 클릭합니다.

[탭 메뉴 선택] 창에서 [지도] 버튼을 클릭합니다.

《처리조건》

1

2

3�.indd 111 2013-08-22 19:46:32

116

RSS 도구를 이용하여 시행물품을 안내하는 메뉴를 작성하시오.

•메뉴제목 : “시행물품”

• 메뉴 아이콘 : “ ” 아이콘으로 변경

• ‘RSS 관리하기’를 이용하여 ‘KAIT’에 새글 작성(제목 : “속지”, 이미지 : “속지.jpg”)

• 내용 : 작성한 ‘RSS 게시판’의 ‘KAIT’를 연동하여 등록된 내용 표시

[앱 관리] 메뉴에서 [탭 메뉴 구성]-[탭 추가] 버튼을 클릭하면 나타나는 [탭 메뉴 선택] 창에

서 [RSS(게시판)]을 클릭합니다.

《처리조건》

[문제4] 풀어보기6

메뉴의 제목은 “시행물품”, 탭 아이콘은 “ ” 아이콘으로 변경합니다.

1

2

RSS 게시판 페이지 만들기

[문제4]에서는 앞에서 작성한 RSS 게시판을 페이지로 추가하고 탭 컨테이너를 이용하여 여러 개의 SNS 게시물을 추가하는 문제가 출제됩니다. 특히 RSS 게시판은 기존에 등록한 게시물 이외에 새로운 게시물을 추가해야 하므로 추가 작업을 빼먹지 않도록 합니다.

3�.indd 116 2013-08-22 19:46:32

120

일정 도구를 이용하여 검정일정을 안내하는 메뉴를 작성하시오.

• 탭 이름 : “검정일정”

• 탭 아이콘 : “ ” 아이콘으로 변경

• ‘일정 관리하기’를 이용하여 ‘KAIT 자격검정’에 일정 추가 등록

(제목 : “시험문제 공개”, 시작일 : “2013. 06. 25”, 종료일 : “2013. 06. 25”, ‘종일’)

•일정관리 : 작성한 ‘일정 게시판’의 ‘KAIT 자격검정’을 연동하여 검정일정 표시

[앱 관리] 메뉴에서 [탭 메뉴 구성]-[탭 추가] 버튼을 클릭하면 나타나는 [탭 메뉴 선택] 창에

서 [일정]을 클릭합니다.

《처리조건》

[문제5] 풀어보기7

일정 관리 페이지 만들기

[탭 이름] 항목에 ‘검정일정’을 입력하고 [탭 아이콘]의 [선택] 버튼을 클릭해서 아이콘 모양을

아이콘으로 변경합니다.

1

2

[문제5]에는 새로운 일정 관리 페이지를 추가하고 전화번호 페이지를 만드는 문제가 출제됩니다. 그리고 앞에서 작업했던 메뉴 탭을 조건에 따라 순서를 정리하여 작업을 마무리하는 단계입니다.

3�.indd 120 2013-08-22 19:46:33

1.모의고사 풀어보기

��.indd 125 2013-08-22 19:46:47

126

1 모의고사

A

모바일앱개발전문가 2급(MAP)(MAP ; Mobile Application development Professlonal)

��.indd 126 2013-08-22 19:46:48

127

제 1회 모의고사

▶ 제작하는 앱은 안드로이드 플랫폼의 확장형 타입으로 작업합니다.

▶ 제작하는 앱의 이름은 “제1회 모의고사”로 작성하시오.

▶ 제공된 이미지를 이용하여 기본 디자인을 구성하시오.

·앱 아이콘 : “아이콘.gif” 이미지를 이용하여 아이콘 등록

·앱 상단 배너 : “앱상단배너.gif” 이미지를 이용하여 상단 배너 등록

·앱 시작 이미지 : “앱시작이미지.gif”를 이용하여 시작 이미지 등록

·홈 이미지 : “홈이미지1.gif”, “홈이미지2.gif” 이미지를 이용하여 홈이미지 2개를 각각 등록 하고, 이미지 순서

는 “홈이미지2.gif”, “홈이미지1.gif”의 순서로 적용

▶ 디자인 스타일을 아래 조건에 맞게 작성하시오.

·탭 메뉴 : ‘제목’ 색상(“#b8dbc2”), ‘배경’ 색상(“#2a21cf”)

·컨트롤 : ‘제목’ 색상(“#e3cae3”), ‘배경’ 색상(“#780978”)

·글 리스트 : ‘제목’ 색상(“#c2f2ff”), ‘설명’ 색상(“#c4b6c4”)

·글 리스트 배경 : ‘홀수’ 리스트 색상(“#804880”), ‘짝수’ 리스트 색상(“#615561”)

▶ 지시사항이 없는 경우는 기본값을 사용하시오.

<처리조건>

<결과화면>

문제1 다음 《처리조건》에 따라 앱제작을 위한 기본사항을 작업하시오.(20점)

��.indd 127 2013-08-22 19:46:48

Part4.모의고사 풀어보기

128

<결과화면>

문제2 다음 《처리조건》에 따라 제작 앱에 사용할 게시판을 작업하시오.(25점)

▶ 노트 게시판을 아래 조건에 맞게 작성하시오. (내용은 ‘여행지도.txt’를 이용)

·노트1 ⇒ 제목 : “여행지도”, 내용 : ‘여행지도.txt’ 파일의 <여행지도> 내용 작성

하이퍼링크 : 보기 A 조는 ‘경기도 가평’, 보기 B 조는 ‘강원도 춘천’에 링크

·노트2 ⇒ 제목 : “경기도 가평”, 내용 : ‘여행지도.txt’ 파일의 <경기도 가평> 내용 작성

·노트3 ⇒ 제목 : “강원도 춘천”, 내용 : ‘여행지도.txt’ 파일의 <강원도 춘천> 내용 작성

▶ 사진 게시판을 아래 조건에 맞게 작성하시오.

·기본으로 생성되어 있는 폴더를 “여행”으로 변경

·사진등록 : “돌.jpg”, “펜션.jpg”, “하늘창.jpg” 이미지 각각 등록

·제목 및 메모 : 각각 “돌”, “펜션배경”, “하늘창사진”으로 내용 작성

▶ 일정 게시판을 아래 조건에 맞게 작성하시오.

·그룹추가 : “MOBILE 여행” 일정 그룹 추가

·일정등록 : 제목(“여행 안내”), 위치(“서울시 청소년 수련관”),

시작일(“2013. 08. 08”), 시작시간(“10시 00분”), 종료일(“2013. 08. 08”),

종료시간(“13시 30분”), 설명(“여행 예비 교육”)


<처리조건>

��.indd 128 2013-08-22 19:46:48

129

<결과화면>

문제3 다음 《처리조건》에 따라 앱에서 사용할 기능을 작업하시오.(15점)

▶ 지도 도구를 이용하여 위치를 안내하는 메뉴를 작성하시오.

·탭 이름 : “여행안내”

·탭 아이콘 : “ ” 아이콘으로 변경

·검색주소 : “중구 수표동 27-2”

·표시제목 : “서울청소년수련관”

·표시설명 : “여행 안내장소”

·표시방법 : 지도 배율을 조정하여 ‘결과화면’과 동일하게 표시(지도 축적 : 100m)

▶ 노트 도구를 사용하여 아래 조건에 맞게 노트 메뉴를 작성하시오.

·탭 이름 : “여행지도”


·내용 : 작성한 ‘노트 게시판’의 ‘여행지도’를 연동하여 내용 표시


<처리조건>


��.indd 129 2013-08-22 19:46:48

Part4.모의고사 풀어보기

130

<결과화면>


▶ 사진 도구를 이용하여 여행사진을 안내하는 메뉴를 작성하시오.

·탭 이름 : “여행사진”


·‘사진 관리하기’를 이용하여 ‘여행’에 사진 추가 (사진 : “분수.jpg”, 제목 : “분수”, 메모 : “분수 이미지”)

·내용 : 작성한 ‘사진 게시판’의 ‘여행’을 연동하여 등록된 사진 표시

▶ ‘탭 컨테이너’와 ‘유투브 도구’를 사용하여 아래 조건에 맞게 작성하시오.

·탭 컨테이너 ⇒ 제목 : “여행영상”, 아이콘 : “ ” 아이콘으로 변경

서브메뉴 : 아래 작성한 유투브1, 유투브2 추가

·유투브1 ⇒ 탭 이름 : “A조 여행영상”, 탭 아이콘 : “ ” 아이콘으로 변경

동영상 표시 : 검색어 기능을 이용하여 “가평”으로 검색되는 영상을 표시

·유투브2 ⇒ 탭 이름 : “B조 여행영상”, 탭 아이콘 : “ ” 아이콘으로 변경

동영상 표시 : 검색어 기능을 이용하여 “춘천”으로 검색되는 영상을 표시

▶ 적용된 유투브 동영상의 목록은 ≪ 결과화면 ≫과 다를 수 있음.


<처리조건>

��.indd 130 2013-08-22 19:46:48

131

<결과화면>


▶ 일정 도구를 이용하여 여행일정을 안내하는 메뉴를 작성하시오.

·탭 이름 : “여행일정”


·‘일정 관리하기’를 이용하여 ‘MOBILE 여행’에 일정 추가 등록

(제목 : “여행기간”, 시작일 : “2013. 08. 15”, 종료일 : “2013. 08. 15”, ‘종일’)

·일정관리 : 작성한 ‘일정 게시판’의 ‘MOBILE 여행’을 연동하여 여행일정 표시

▶ 연락처 도구를 사용하여 아래 조건에 맞게 고객센터를 안내하는 메뉴를 작성하시오.

·탭 이름 : “문의센터”


·연락처 등록 : 이름(“여행접수”), 내용(“02-987-1234”), 설명(“여행접수/입금”),

이름(“여행문의”), 내용(“02-987-6543”), 설명(“문의/안내”)

▶ 제작된 앱의 전체 메뉴의 순서를 아래와 같이 변경하시오.

·‘여행안내’ ⇒ ‘여행일정’ ⇒ ‘여행지도’ ⇒ ‘여행영상’ ⇒ ‘여행사진’ ⇒ ‘문의센터’


<처리조건>


��.indd 131 2013-08-22 19:46:48

1.기출문제 풀어보기

��.indd 187 2013-08-22 19:46:59

188

모바일앱개발전문가 2급(MAP)1 기출문제(MAP ; Mobile Application development Professlonal)

A

��.indd 188 2013-08-22 19:46:59

189

제 1회 기출문제

▶ 제작하는 앱은 안드로이드 플랫폼의 확장형 타입으로 작업합니다.

▶ 제작하는 앱의 이름은 “제1회 기출문제”로 작성하시오.

▶ 제공된 이미지를 이용하여 기본 디자인을 구성하시오.

·앱 아이콘 : “아이콘.gif”를 이용하여 아이콘 등록

·앱 상단 배너 : “앱상단배너.gif”를 이용하여 상단 배너 등록

·앱 시작 이미지 : “앱시작이미지.gif”를 이용하여 시작 이미지 등록

·홈 이미지 : “홈이미지1.gif”, “홈이미지2.gif”, “홈이미지3.gif”를 이용하여 홈이미지 3개를 각각 등록 하고,

이미지 순서는 “홈이미지2.gif”, “홈이미지1.gif”, “홈이미지3.gif”의 순서로 적용

▶ 디자인 스타일을 아래 조건에 맞게 작성하시오.

·탭 메뉴 : ‘제목’ 색상(“#f2748d”), ‘배경’ 색상(“#420042”)

·컨트롤 : ‘제목’ 색상(“#debfde”), ‘배경’ 색상(“#ff0048”)

·글 리스트 : ‘제목’ 색상(“#8bb8f7”), ‘설명’ 색상(“#05044a”)

·글 리스트 배경 : ‘홀수’ 리스트 색상(“#9ce5e8), ‘짝수’ 리스트 색상(“#0c8577”)


<처리조건>

<결과화면>

문제1 다음 《처리조건》에 따라 앱제작을 위한 기본사항을 작업하시오.(20점)

��.indd 189 2013-08-22 19:47:00

Part4.기출문제 풀어보기

190

<결과화면>

문제2 다음 《처리조건》에 따라 제작 앱에 사용할 게시판을 작업하시오.(25점)

▶ 노트 게시판을 아래 조건에 맞게 작성하시오. (내용은 ‘공룡어원.txt’를 이용)

·노트1 ⇒ 제목 : “공룡어원”, 내용 : ‘공룡어원.txt’ 파일의 <공룡어원> 내용 작성

하이퍼링크 : “리처드 오언” 단어를 ‘리처드 오언’ 노트, “멸종” 단어를 ‘멸종’ 노트에 링크

·노트2 ⇒ 제목 : “리처드 오언”, 내용 : ‘공룡어원.txt’ 파일의 <리처드 오언> 내용 작성

·노트3 ⇒ 제목 : “멸종”, 내용 : ‘공룡어원.txt’ 파일의 <멸종> 내용 작성

▶ 사진 게시판을 아래 조건에 맞게 작성하시오.

·기본으로 생성되어 있는 폴더를 “KAIT”로 변경

·사진등록 : “실내전시.jpg”, “실외전시.jpg”, “관람코스.jpg” 이미지 각각 등록

·제목 및 메모 : 각각 “실내전시”, “실외전시”, “관람코스”로 내용 작성

▶ 일정 게시판을 아래 조건에 맞게 작성하시오.

·그룹추가 : “견학일정” 일정 그룹 추가

·새 일정등록 : 제목(“가족과 함께 공룡박물관 견학”), 위치(“고성공룡박물관”),

시작일(“2013. 06. 29”), 시작시간(“13시 00분”), 종료일(“2013. 06. 30’),

종료시간(“17시 30분”), 설명(“고성공룡박물관 체험을 통한 공룡학습”)


<처리조건>

��.indd 190 2013-08-22 19:47:00

191

<결과화면>


▶ 지도 도구를 이용하여 위치를 안내하는 메뉴를 작성하시오.

·탭 이름 : “견학장소”


·검색주소 : “경남 고성군 하이면 자란만로 618”

·표시제목 : “고성공룡박물관”

·표시설명 : “가족과 함께 견학할 박물관 위치”

·표시방법 : 지도 배율을 조정하여 ‘결과화면’과 동일하게 표시(지도 축적 : 50m)

▶ 노트 도구를 사용하여 아래 조건에 맞게 노트 메뉴를 작성하시오.

·탭 이름 : “공룡어원”


·내용 : 작성한 ‘노트 게시판’의 ‘공룡어원’을 연동하여 내용 표시


<처리조건>


��.indd 191 2013-08-22 19:47:00

Part4.기출문제 풀어보기

192

<결과화면>


▶ 사진 도구를 이용하여 공룡박물관을 안내하는 메뉴를 작성하시오.

·탭 이름 : “고성공룡박물관”


·‘사진 관리하기’를 이용하여 ‘KAIT’에 사진 추가

(사진 : “약도.jpg”, 제목 : “약도”, 메모 : “약도 이미지”)

·내용 : 작성한 ‘사진 게시판’의 ‘KAIT’를 연동하여 등록된 사진 표시

▶ ‘탭 컨테이너’와 ‘유투브 도구’를 사용하여 아래 조건에 맞게 작성하시오.

·탭 컨테이너 ⇒ 제목 : “관련영상”, 아이콘 : “ ” 아이콘으로 변경

서브메뉴 : 아래 작성항 유투브1, 유투브2 추가

·유투브1 ⇒ 탭 이름 : “점박이”, 탭 아이콘 : “ ” 아이콘으로 변경

동영상 표시 : 검색어 기능을 이용하여 “점박이”로 검색되는 영상을 표시

·유투브2 ⇒ 탭 이름 : “아기공룡둘리”, 탭 아이콘 : “ ” 아이콘으로 변경

동영상 표시 : 검색어 기능을 이용하여 “아기공룡둘리”로 검색되는 영상을 표시

▶ 적용된 유투브 동영상의 목록은 ≪ 결과화면 ≫과 다를 수 있음.


<처리조건>

��.indd 192 2013-08-22 19:47:00

193

<결과화면>


▶ 일정 도구를 이용하여 견학일정을 안내하는 메뉴를 작성하시오.

·탭 이름 : “견학일정”


·‘일정 관리하기’를 이용하여 ‘견학일정’에 일정 추가 등록

(제목 : “2차 박물관 견학”, 위치 : 해남공룡박물관, 시작일 : “2013. 09. 07”, 종료일 : “2013. 09. 08”)

·일정관리 : 작성한 ‘일정 게시판’의 ‘견학일정’을 연동하여 일정 표시

▶ 연락처 도구를 사용하여 아래 조건에 맞도록 메뉴를 작성하시오.

·탭 이름 : “문의처”


·연락처 등록 : 이름(견학담당자), 내용(“02-123-4567”), 설명(“견학관련 안내”),

이름(박물관담당자), 내용(“055-789-0123”), 설명(“고성공룡박물관 안내”)

▶ 제작된 앱의 전체 메뉴의 순서를 아래와 같이 변경하시오.

·‘견학장소’ ⇒ ‘견학일정’ ⇒ ‘고성공룡박물관’ ⇒ ‘공룡어원’ ⇒ ‘관련영상’ ⇒ ‘문의처’


<처리조건>


��.indd 193 2013-08-22 19:47:00

��.indd 200 2013-08-22 19:47:01

MAP 모바일앱개발전문가 2급

Documents

Transcript of MAP 모바일앱개발전문가 2급