[활용팁] 스토리보드의 최강좌 PowerMockup 사용후기

시작하기

안녕하세요. 요즘은 데스크톱 애플리케이션, 웹 애플리케이션, 앱 등을 제작하기 이전에 기획을 합니다. 과거에 프로그램 설계와 비슷한 과정이라고 할 수 있죠.
과거에는 절차에 의한 과정을 설명하는 데이터흐름도, 순서도 등을 이용하였지만 지금은 스토리보드와 같은 직관적인 뷰를 활용하여 설계된 내용을 좀 더 현실감 있게 접근하게 됩니다.

다운로드

이와 같은 과정을 손쉽게 작업할 수 있는 도구가 PowerMockup 이란 소프트웨어 인데, 무료로 다운로드를 받아서 이용할 수 있습니다.

구입방법

하지만, 트라이얼 버전에서는 일부 제한된 기능밖에 사용할 수 없어서 아쉬움이 좀 남습니다. 만약에 여러분들이 프리랜서라면 $59.99(한화로 약 68,000) 이라는 적은 비용으로 항상 업데이트된 템플릿을 제공 받으면서 기획자로써 스토리보드의 품질을 높일 수 있을 것입니다.

설치

PowerMockup 사이트를 방문하여 다운로드한 파일을 아래와 같이 설치합니다.
설치가 완료되면 PowerPoint를 실행하여 PowerMockup 리본메뉴가 정상적으로 추가된 것을 확인합니다.

PowerMockup 설치 과정 - (1)

PowerMockup 설치 과정 - (2)

PowerMockup 설치 과정 - (3)

PowerMockup 설치 과정 - (4)

리본메뉴와 스탠실

PowerMockup이 정상적으로 설치가 되면 PowerPoint의 리본메뉴에 "POWERMOCKUP" 이 추가됩니다. 또한, 우측에는 다양한 벡터 모양의 스탠실을 제공하고 있습니다.

리본메뉴에 추가

PowerMockup Shapes 스탠실

트라이얼 버전은 모든 모양이 4개까지 보여지게 됩니다. 단, 라이선스를 구입하면 잠금처리된 모양들이 풀린다고 합니다.

Wireframe Shape 스탠실

작업하기

제약사항이 있더라도 제공되는 모양에서 어떤 기능을 제공하는지 확인해 보기로 합시다. 아래와 같은 절차로 진행합니다.

메시지박스 설정하기

1. 파워포인트의 새 슬라이드 열기
2. PowerMockup Shape > Common Wireframe Shapes > Containers로 이동하기
3. "Alert" 을 마우스로 드래그앤드롭 하여 슬라이드에 올려 놓기

위 과정을 모두 마쳤다면 아래의 화면처럼 될 것입니다. 놀라운것은 아이콘 모양과 버튼의 개수를 제어할 수 있다는 것입니다.

아이콘을 추가하기

PowerMockup에서는 다양한 라인 아이콘을 제공하고 있습니다. 제공되는 아이콘은 색상을 변경할 수도 있습니다.

1. PowerMockup Shape > Line Icons > E-commerce로 이동하기
2. 활성화된 모든 아이콘을 드래그앤드롭하여 슬라이드에 올려 놓기
3. Line Icons > Files and Folders로 이동하기
4. 활성화된 모든 아이콘을 드래그앤드롭하여 슬라이드에 올려 놓기
5. 아이콘을 선택하여 색상을 변경하기

모양 다운로드하기

더 많은 모양을 웹사이트를 이용하여 다운로드 받을 수 있습니다. PowerMockup Shape를 다운로드하려면 아래와 같은 절차로 수행하면 됩니다.

1. POWERMOCKUP 리본메뉴를 클릭
2. Shape Library > Download Shapes 메뉴를 클릭
3. 내가 원하는 모양 템플릿을 다운로드 합니다. 

Download Shapes 메뉴 클릭

원하는 모양을 선택하고 Download Now 버튼을 클릭

다운로드된 Shape (트라이얼 버전은 최대 4개 까지만 활성화 됨)

마무리작업

제한된 모양을 갖고 스토리보드를 제작하기란 역부족입니다. 하지만, 활성화된 스탠실 모양만을 갖고 아래와 같은 웹사이트 화면을 만들어 봤습니다.
이용된 Shape 목록은 아래와 같습니다.

• Common Wireframe Shapes > Containers > Browser
• Common Wireframe Shapes > Containers > Accordion
• Common Wireframe Shapes > Containers > Alert
• Common Wireframe Shapes > Containers > Group Box
• Common Wireframe Shapes > Input > Checkbox Group
• Common Wireframe Shapes > Navigation > Breadcrumbs
• Common Wireframe Shapes > Output > Bar Chart (Horizontal / Vertical)
• Android 5 Phone Mockup Shapes > Example Layouts > Gallery

다양한 기능을 갖고 있으면서 정교하게 만들어진 PowerMockup 은 스토리보드를 제작하는 기획자 뿐만아니라 전문 컨설턴트들도 필요한 도구임에 틀림없습니다. 많은 사람들에게 강추 합니다.

[3교시] 콘솔에 문자열을 출력하기

print() 함수

문자열을 콘솔에 출력하는 기능을 갖고 있는 함수로 디버깅할 때 제일 많이 사용된다.

• 기본형식

print('문자열출력\n')

• 변수 값을 출력

a = 3
print(a)

• format() 함수를 사용하여 출력

양수 10자리와 소수점 3자리로 왼쪽 정렬로 출력한다.
print(format(1.5678, '10.3f'))

• '%' 를 사용하여 데이터 출력

print('난 나이가 %d'%23)
print('난 나이가 %s'%'스물)
print('난 나이가 %d이고 키가 %f'%(23, 170.6))

• 인덱스 서식을 사용하여 출력

print('이름이 {0} 나이는 {1}'.format('길동', 33))
print('이름이 {} 나이는 {}'.format('길동', 33))
print('이름은 {1} 나이는 {0} {1} {0}'.format('길동', 33))

[2일차] 파이썬 설치가 끝났으면 시작해 보세요.

파이썬의 특징

• 확장자는 .py로 사용한다.
• 메인 모듈은 존재하지만 메인 메소드는 없다.
• 인터프린터 언어이다.

파이썬 주석 및 처리 방식

• # 한줄 주석
• ''' 여러줄 주석
• ; 여러 문장을 한줄로 처리할 경우 사용(하지만, 별로 좋지 않은 방법)

모듈을 구성하는 단위

• Statement
• Function
• Class

파이썬 기본 변수

변수는 참조형으로 되어 있다. 따라서, 값을 전달하는 것이 아니라 주소값을 전달한다.

• a 라는 변수에 1을 넣었을 경우 a라는 메모리 주소는 1010 일 경우
• 값 전달 방식 : a = 1
• 주소 참조 방식 : a = 주소값(1010)

데이터형식

• 숫자형 : int, float
• 복합형 : complex
• 문자형 : str
• 집합형 : tuple, list, set, dict
• 수정 불가능한 데이터형식 : tuple, 집합형을 제외한 기본 형식 
• 수정 가능한 데이터형식 : list, set, dict

문자열 데이터

• 문자열의 첫번째 인덱스는 0부터 시작한다.
• 문자열 수정은 불가하다.
• 변수에 정의할 수 있다.
• print() 함수를 이용하여 문자열 그대로 출력할 수 있다.

[1일차] 파이썬 날기초를 시작합니다.

파이썬 1일차 기초과정

단점을 알자

• 파이썬은 오픈소스라서 버전별 모듈을 정확히 맞춰서 사용해야 한다. 
• 파이썬에서는 새로운 패키지를 하나 만든다.
• 패키지로 만들어야만 모듈로 인정된다.
• 중복되지 않도록 도메인을 거꾸로하여 패키지명을 선언하도록 하자.

파이썬으로 할 수 있는 영역

• 기초과정

1. GUI 프로그래밍
2. DB 연동 프로그래밍

• 빅데이터과정

1. 빅데이터 프로그래밍
2. 수치연산, 통계처리

• 기타교육과정

1. 시스템 유틸리티
2. 각종 텍스트 프로세싱
3. 네트워크 및 인터넷 프로그래밍
4. 네트워크 장비 제어

실습과정

• 실습과정을 위한 준비를 한다.
• http://www.oracle.com : jdk를 최신것으로 다운로드한다.
• https://www.python.org : 파이썬 3.0을 다운로드한다.
• https://www.eclipse.org/downloads/eclipse-packages/ : 이클립스를 다운로드한다.
• iPython 을 사용하면 통계를 이용할 수 있다.
• 이클립스 --> 강좌는 이클립스 툴로 사용한다.

간단한 테스트

• >> a= 5
• >> print a --> 2.0 으로 인식
• >> print (a) --> 3.0 으로 인식
• 3.0 부터 UTF-8을 지원한다.

설치과정

1. jdk를 먼저 설치한다.

다운로드 받은 jdk를 실행

jdk를 설치

2. 파이썬을 설치한다.

파이썬 3.4.3 다운로드 페이지로 이동

다운로드를 실행

파이썬 설치 종료

파이썬 IDLE GUI 실행

간단하게 테스트해 본 결과를 저장(확장자 .py 로 저장됨)

파이썬 경로를 환경설정 변수로 설정

파이썬 루트경로, 스크립트 경로를 설정

3. 이클립스를 설치한다. 설치 절차는 아래와 같이 간단하다.

• 이클립스를 실행하기 전에 c:\week\sou 폴더를 만들어 준다.
• 이클립스를 실행해서 help > marketplace 실행한다.
• pyDev 플러그인을 다운로드하여 설치한다.

다운로드한 이클립스 압축 풀기

이클립스를 실행하고 작업공간 경로를 설정

이클립스 마켓에서 'py' 검색어로 PyDev를 찾아서 다운로드

모든 옵션을 체크하고 '확인'을 클릭

마지막으로 동의하면 끝

체크박스를 선택하고 '확인'을 클릭

4. 이클립스 PyDev 환경 설정하기

• preference 를 선택하여 환경설정을 변경한다.
• 한국어로 설정하기 위해서 언어를 UTF-8로 변경한다.
• PyDev 개발환경을 위한 파이썬 설치위치를 선택한다.
• 개발환경을 pyDev 로 변경한다.

이클립스의 환경설정을 선택하여 UTF-8로 변경

설치된 PyDev 플러그인 환경설정 (New > Apply > OK)

개발환경을 PyDev로 변경

개발환경을 PyDev로 선택

5. 파이썬 프로젝트 만들기

• File > New > PyDev Project 를 클릭
• 신규 패키지를 생성하면 __init__.py 파일이 자동으로 생성된다.
• 만들어진 패키지에 모듈을 추가한다.
• 모듈의 코드를 작성하여 컴파일한다. --> Ctrl + F11 사용

신규 프로젝트 파일 만들기

체크항목을 선택하여 종료

신규 패키지 만들기

__init__.py 파일은 자동으로 생성

신규 패키지에 신규 모듈 추가

ex1.py 모듈에 코드 작성

다음과정에서는 파이썬의 기초적인 문법에 대하여 알아보도록 하겠습니다.
감사합니다.

[Inno Setup] 6. 설치 마법사 절차와 스크립트

스크립트 코드로 설치 마법사 절차 엿보기

Inno Setup으로 만들어진 설치 프로그램을 실행하면 동작하는 설치 마법사의 절차를 스크립트와 비교하면서 학습해 보기로 합시다.
설치 마법사가 동작되는 순서는 스크립트의 [Code] 세션 부분입니다. [Code] 세션은 파스칼 스크립트로 작성되어 있으며 파스칼을 모르는 사람이라도 아래 그림과 스크립트를 비교하면서 설명해 보겠습니다.

1. 입력 박스 추가 페이지 만들기

[Code]
var  UserPage: TInputQueryWizardPage;
procedure InitializeWizard;
begin
{
Create the pages
}  

{  
// edit box가 포함되어 있는 마법사 페이지를 생성한다.  
// AfterID: Integer = wpWelcome  
// ACaption: String = 'Personal Information'  
// ADescription: String = 'Who are you?'  
// ASubCaption: String = 'Please specify your name and the company for whom you work, then click Next.'  
}  

UserPage := CreateInputQueryPage(wpWelcome,  
'Personal Information', 
'Who are you?',  
'Please specify your name and the company for whom you work, then click Next.'); 
{
// edit box 아이템을 추가한다.  
// APrompt: String = 'Name:'  
// APassword: Boolean = False(Password edit가 아니라는 것을 의미)  
}  
UserPage.Add('Name:', False);  
UserPage.Add('Company:', False);

2. 옵션 버튼 추가 페이지 만들기

[Code]
var  UsagePage: TInputOptionWizardPage;
procedure InitializeWizard;
begin 
{
Create the pages 
}  
{  
// 체크 또는 옵션 버튼이 포함되어 있는 마법사 페이지를 생성한다.  
// AfterID: Integer = UserPage.ID  
// ACaption: String = 'Personal Information' 
// ADescription: String = 'How will you use My Program?' 
// ASubCaption: String = 'Please specify how you would like to use My Program, then click Next.'  
// Exclusive: Boolean = True (옵션 버튼이 체크 박스 대신 표시되며 한개만 선택할 수 있음)  
// ListBox: Boolean = False (만약, True일 경우 라디오 버튼 또는 체크 박스를 리스트 박스 안에 위치시킨다)  
}  
UsagePage := CreateInputOptionPage(UserPage.ID,    
'Personal Information', 
'How will you use My Program?',    
'Please specify how you would like to use My Program, then click Next.',    
True, False);  
{  
// 아이템을 추가한다.  
// ACaption: String = 'Light mode (no ads, limited functionality)'  
}  
UsagePage.Add('Light mode (no ads, limited functionality)');  
UsagePage.Add('Sponsored mode (with ads, full functionality)');  
UsagePage.Add('Paid mode (no ads, full functionality)');

3. 메시지출력 페이지 만들기

[Code]
var  LightMsgPage: TOutputMsgWizardPage;
procedure InitializeWizard;
begin  
{ 
Create the pages 
}  
{  
// 메시지가 포함되어 있는 마법사 페이지를 생성한다.  
// AfterID: Integer = UsagePage.ID  
// ACaption: String = 'Personal Information' 
// ADescription: String = 'How will you use My Program?'  
// ASubCaption: String = 'Note: to enjoy all features My Program can offer and to support its development, ' +  
//                              'you can switch to sponsored or paid mode at any time by selecting ''Usage Mode'' ' +  
//                              'in the ''Help'' menu of My Program after the installation has completed.'#13#13 +  
//                              'Click Back if you want to change your usage mode setting now, or click Next to ' +  
//                              'continue with the installation.'  
}  
LightMsgPage := CreateOutputMsgPage(UsagePage.ID,    
'Personal Information', 'How will you use My Program?',    
'Note: to enjoy all features My Program can offer and to support its development, ' +  
'you can switch to sponsored or paid mode at any time by selecting ''Usage Mode'' ' +    
'in the ''Help'' menu of My Program after the installation has completed.'#13#13 +    
'Click Back if you want to change your usage mode setting now, or click Next to ' +    
'continue with the installation.');

4. 디렉토리 선택 페이지 만들기

[Code]
var  DataDirPage: TInputDirWizardPage;
procedure InitializeWizard;
begin  
{ 
Create the pages 
}  
{  
// 디렉토리 선택을 위해서 edit 박스와 찾아보기 버튼이 포함되어 있는 마법사 페이지를 생성한다.  
// AfterID: Integer = wpSelectDir  
// ACaption: String = 'Select Personal Data Directory'  
// ADescription: String = 'Where should personal data files be installed?'  
// ASubCaption: String = 'Select the folder in which Setup should install personal data files, then click Next.'  
// AAppendDir: Boolean = False (True일 경우, ANewFolderName 값은 사용자 클릭한 폴더 이름으로 추가된다)  
// ANewFolderName: String = ''  
// AApendDir = False 이면서 ANewFolderName이 공백일 경우 표시된 기본 이름으로 새로운 폴더를 생성하고 표시한다.  
}  
DataDirPage := CreateInputDirPage(wpSelectDir,    
'Select Personal Data Directory', 
'Where should personal data files be installed?',    
'Select the folder in which Setup should install personal data files, then click Next.',    
False, '');  
{  
// 아이템을 추가한다.  
// APrompt: String = ''  
DataDirPage.Add('');
}

5. 레지스트리 키 입력 페이지 만들기

[Code]
var  KeyPage: TInputQueryWizardPage;
procedure InitializeWizard;
begin  
{ 
Create the pages 
}  
{  
// 입력 창이 포함되어 있는 마법사 페이지를 생성한다. 
// AfterID: Integer = wpSelectDir  
// ACaption: String = 'Personal Information'  
// ADescription: String = 'What''s your registration key?'  
// ASubCaption: String = 'Please specify your registration key and click Next to continue. If you don''t ' +  
//                              'have a valid registration key, click Back to choose a different usage mode.'  
}  
KeyPage := CreateInputQueryPage(UsagePage.ID,    
'Personal Information', 
'What''s your registration key?',    
'Please specify your registration key and click Next to continue. If you don''t ' +    
'have a valid registration key, click Back to choose a different usage mode.');  
{  
// edit box 아이템을 추가한다.  
// APrompt: String = 'Registration key:'  
// APassword: Boolean = False (Password edit가 아니라는 것을 의미)  
}  
KeyPage.Add('Registration key:', False);

6. 진행상태표시 페이지 만들기

[Code]
var  ProgressPage: TOutputProgressWizardPage;
procedure InitializeWizard;
begin  
{ 
Create the pages 
}  
{  
// 진행바가 포함되어 있는 마법사 페이지를 생성한다.  
// 다만, 본 페이지는 기본적으로 숨겨서 처리한다  
// ACaption: String = 'Personal Information'  
// ADescription: String = 'What''s your registration key?'  
}  
ProgressPage := CreateOutputProgressPage('Personal Information',    
'What''s your registration key?');
function NextButtonClick(CurPageID: Integer): Boolean;
var  I: Integer;
begin  
if CurPageID = KeyPage.ID then 
begin    
{ 
Just to show how 'OutputProgress' pages work.      
Always use a try..finally between the Show and Hide calls as shown below. 
}    
ProgressPage.SetText('Authorizing registration key...', '');    
ProgressPage.SetProgress(0, 0);    
ProgressPage.Show;    
try      
for I := 0 to 10 do 
begin        
ProgressPage.SetProgress(I, 10);        
Sleep(100);      
end;    
finally      
ProgressPage.Hide;    
end;  
end;
end;

[Inno Setup] 5. 마법사로 설치 프로그램 만들기

마법사 페이지로 설치 프로그램 만들기

Inno Setup을 실행하여 새로운 설치 프로그램 작성버튼을 클릭하면 마법사 페이지가 호출됩니다.

1. 새로운 설치 프로그램 작성하기

2. 마법사 시작

3. 어플리케이션 정보 입력

체크된 부분은 필수 사항

• Application name: 어플리케이션 이름을 기록하며, 스크립트에서는 [Setup] 세션의 AppName 키로 사용
• Application version: 어플리케이션 버전을 기록하며, 스크립트에서는 [Setup] 세션의 AppVersion 키로 사용
• Application publisher: 어플리케이션 제작자를 기록하며, 스크립트에서는 [Setup] 세션의 AppPublisher 키로 사용
• Application website: 어플리케이션 제작자의 웹사이트를 기록하며, 스크립트에서는 [Setup] 세션의 AppPublisherURL, AppSupportURL, AppUpdatesURL 키로 사용

4. 어플리케이션 폴더 지정

체크된 부분은 필수 사항

• Application destination base folder: 어플리케이션이 설치될 기본 폴더를 지정하며, 스크립트에서는 [Setup] 세션의 DefaultDirName 키로 사용(Program Files folder={pf} 예약어 사용)
• Application folder name: 어플리케이션이 설치될 폴더 이름을 기록하며, 위의 기본 폴더 아래에 입력된 이름의 폴더가 만들진다.

5. 어플리케이션 파일 추가

체크된 부분은 필수 사항

• Application main executable file: 어플리케이션 메인 실행 파일을 선택하며, 스크립트에서는 [Files] 세션의 Source: "파일의 전체 경로"; DestDir: "{app}"; Flags: ignoreversion 
• Add file(s): 파일을 추가하며, 설치시 배포합니다. 스크립트에서는 [Files] 세션의 Source: "파일의 전체 경로"; DestDir: "{app}"; Flags: ignoreversion
• Add Folder...: 폴더를 추가하며, 폴더에 포함된 모든 파일과 폴더를 설치시 배포합니다.
• Edit...: 추가된 파일 또는 폴더를 편집합니다. 파일일 경우, 스크립트에서는 [Files] 세션의 Source: "파일의 전체 경로"; DestDir: "tiff"; Flags: ignoreversion (c:\windows\sysWow64 폴더 아래에 tiff 폴더를 생성하여 해당 파일을 복사한다)

체크된 부분은 필수 사항

• Remove : 추가된 파일 또는 폴더를 제거합니다.

6. 어플리케이션 바로가기 지정

7. 어플리케이션 관련 정보 파일 지정

*.rtf, *.txt 파일을 지정

• License file: 라이선스 파일을 지정한다.
• Information file shown before installation: 설치 전에 보여주는 정보 파일을 선택한다.
• Information file shown after installation: 설치 후에 보여주는 정보 파일을 선택한다.

8. 설치 언어 선택

선택 항목은 필수 사항

9. 컴파일러 설정

• Custom compiler output folder: 컴파일하여 저장할 폴더를 지정하며, 스크립트에서는 [Setup] 세션의 OutputDir 키를 사용
• Compiler output base file name: 컴파일하여 저장할 설치 파일이름을 지정하며, 스크립트에서는 [Setup] 세션의 OutputBaseFilename 키를 사용
• Custom Setup Icon file: 설치 파일에 적용할 아이콘을 지정합니다.
• Setup password: 설치 파일의 비밀번호를 설정합니다.

10. 전처리 선언

스크립트의 #define 을 참조

11. 마법사 종료

12. 스크립트 실행

스크립트 컴파일 알림

스크립트 저장 알림

신규 스크립트를 저장

13. 설치 프로그램 실행

설치 프로그램 만들기 성공

설치 프로그램 실행 화면

14. 마법사로 만든 스크립트

; Script generated by the Inno Setup Script Wizard.
; SEE THE DOCUMENTATION FOR DETAILS ON CREATING INNO SETUP SCRIPT FILES!

#define MyAppName "데브팜"
#define MyAppVersion "0.5"
#define MyAppPublisher "데브팜주식회사"
#define MyAppURL "http://www.devfarm.com/"
#define MyAppExeName "MyProg.exe"

[Setup]
; NOTE: The value of AppId uniquely identifies this application.
; Do not use the same AppId value in installers for other applications.
; (To generate a new GUID, click Tools | Generate GUID inside the IDE.)
AppId={{2CEBDFAB-C3EE-4A46-8118-19A271E9D40D}
AppName={#MyAppName}
AppVersion={#MyAppVersion}
;AppVerName={#MyAppName} {#MyAppVersion}
AppPublisher={#MyAppPublisher}
AppPublisherURL={#MyAppURL}
AppSupportURL={#MyAppURL}
AppUpdatesURL={#MyAppURL}
DefaultDirName={pf}\{#MyAppName}
DisableProgramGroupPage=yes
OutputDir=D:\myWorks\mySetup\InnoSetup\output
OutputBaseFilename=DevFarmSetup
Compression=lzma
SolidCompression=yes

[Languages]
Name: "english"; MessagesFile: "compiler:Default.isl"
Name: "korean"; MessagesFile: "compiler:Languages\Korean.isl"

[Tasks]
Name: "desktopicon"; Description: "{cm:CreateDesktopIcon}"; GroupDescription: "{cm:AdditionalIcons}"; Flags: unchecked

[Files]
Source: "C:\Program Files (x86)\Inno Setup 5\Examples\MyProg.exe"; DestDir: "{app}"; Flags: ignoreversion
Source: "C:\Users\sbscys\Downloads\BLOG HotSpot GC options cheat sheet v2.pdf"; DestDir: "{app}"; Flags: ignoreversion
Source: "C:\Users\sbscys\Downloads\TIFF6.pdf"; DestDir: "tiff"; Flags: ignoreversion
; NOTE: Don't use "Flags: ignoreversion" on any shared system files

[Icons]
Name: "{commonprograms}\{#MyAppName}"; Filename: "{app}\{#MyAppExeName}"
Name: "{commondesktop}\{#MyAppName}"; Filename: "{app}\{#MyAppExeName}"; Tasks: desktopicon

[Run]
Filename: "{app}\{#MyAppExeName}"; Description: "{cm:LaunchProgram,{#StringChange(MyAppName, '&', '&&')}}"; Flags: nowait postinstall skipifsilent