Power Mockup - 강력한 스토리보드 플러그인

프로그램 기획을 할 떄 스토리보드툴이 있으면 굉장히 편리하다.

그중 Power Point 의 플러그인인 'Power Mockup' 을 소개한다.


Power Mockup 은 설치 후 Power Point 와 자동 연계가 되어 

Power Point를 사용할 줄 아는 사람이라면 손쉽게 사용이 가능하다는 장점이 있다.


사이트에 들어가서 'Download Free Trial' 메뉴를 클릭하면 프로그램을 다운 받을 수 있다.


프로그램 다운로드

http://www.powermockup.com/


설치후의 화면이다.



위와 같이 미리 준비된 템플릿을 가져다가 쓸 수 있다.

모양도 깔끔하고 굉장히 편하다.

Trial 버전의 경우 연한 회색의 템플릿들은 사용할 수가 없다.

정식으로 사용하려면 개인 User 의 경우 30일에 60$ 씩 비용을 지불해야 하지만, 블로그에 소개글을 작성한 후 홈페이지의 'Buy Now' 메뉴로 들어가서 작성한 블로거 주소 등을 메일로 보내면 블로거 들을 위한 무료라이선스를 발급해 준다고 한다.






모바일 기획을 위한 템플릿도 지원한다.

간단한 클릭과 드래그&드롭으로 깔끔한 기획이 가능할듯 하다.





티스토리 소스 코드 입력하기 : syntaxhighlighter 3.0.83


 티스토리 소스 코드 입력하기 : syntaxhighlighter 3.0.83



티스토리에 소스코드를 이쁘게 입력하고 싶을 때 syntaxhighlighter라는 css와 js 파일을 설치하여 블로깅 할 때 깔끔하게 표현해주는 방법을 적어보고자 합니다. 사이트를 통해 최신 파일을 다운로드 하여 하나하나 진행해 보겠습니다.


현재는 3.0.83버전이 최신 버전이므로 아래 파일을 다운로드 합니다.


 syntaxhighlighter_3.0.83.zip






위의 파일이 최신버전이 아닐 때 사이트를 통해 최신 파일을 받아 진행해 보겠습니다. syntaxhighlighter 사이트에 접속하여 최신 버전 파일을 다운로드(새창으로 링크) 받아야 합니다. 아래 그림처럼 사이트에 가게 되면 상단명칭중 3.0.83 whats new? 라는 글씨가 보입니다. 여기에서 whats new?를 클릭합니다.






다음 페이지로 이동하게 되는데 syntaxHighlighter의 기능을 설명되고 스크롤을 마지막까지 내리면 download라는 버튼이 보입니다. 누르게 되면 압축 파일을 다운로드 하게 됩니다.





압축파일을 풀면 compass, scripts, src, styles, tests 의 폴더와 index.html, LGPL-LICENSE, MIT-LICENSE 파일들이 보이게 됩니다. 다 사용하진 않고 scripts, styles 두 개의 폴더만 사용합니다.






먼저 scripts 폴더에 들어가면 아래처럼 파일이 여러개 나타납니다. 모조리 카피해서 사용할 수 있으나 js 파일이 많아지면 블로그에 접속했을 때 js 파일 읽어드리는 시간이 좀 더 걸릴 수 있으니 필요한 파일만 파일업로드에 추가해야 합니다. 가장 필수 파일은 shAutoloader.js shCore.js 두 개 파일입니다. ☆표시를 해뒀습니다.  그 외에는 소스코드를 작성할 때 어느 형태로 표현해 줄지 사용할 파일입니다. shBrushXml.js 파일은 html과, xml, xslt, xhtml 형태를 잘 표현해줍니다. 쿼리문을 작성하는 분은 shBurshSql.js 파일을 자바 파일은 shBrushJava.js 파일을 넣으면 됩니다. 아래에 그림으로 표현해줍니다.





css 파일도 마찬가지로 필수 파일은 shCore.css와 shThemeDefault.css 파일 두 개 입니다. 두 개 파일을 파일업로드에 추가 하면 됩니다. 아래에서 그림으로 표현해줍니다.





계정 관리자 페이지에 들어와서 [꾸미기] - [HTML/CSS 편집] - [파일업로드 탭]으로 이동합니다. 추가 버튼을 눌러 위에서 보여준 *.js파일와 *.css 파일을 업로드 시킵니다. 아래 그림은 업로드된 파일이며, 여기서 경로 "images/파일들" 이 있습니다.





파일이 업로드 되었으니 실제 페이지에 적용시켜야 합니다. 우선 css 파일은 [HTML/CSS 탭]에서 추가 해야 합니다. skin.html 에서 상단에 사용되고 있는 href="./styels.css /> 밑에 다음내용을 추가합니다.


skin.html에 css파일 링크 추가하기
1
2
<link rel="stylesheet" type="text/css" href="./images/shCore.css">
<link rel="stylesheet" type="text/css" href="./images/shThemeDefault.css">





마찬가지로 skin.html 밑에 </body> 바로 위에 아래 그림처럼 내용을 추가합니다.

skin.html에 js파일 포함 시키기
1
2
3
4
5
6
7
8
9
10
<script type="text/javascript" src="./images/shCore.js"></script>
<script type="text/javascript" src="./images/shAutoloader.js"></script>
<script type="text/javascript" src="./images/shBrushCpp.js"></script>
<script type="text/javascript" src="./images/shBrushJava.js"></script>
<script type="text/javascript" src="./images/shBrushPlain.js"></script>
<script type="text/javascript" src="./images/shBrushSql.js"></script>
<script type="text/javascript" src="./images/shBrushXml.js"></script>
<script type="text/javascript">
    SyntaxHighlighter.all();
</script>






글을 작성할 때 HTML 모드(우측상단) 체크박스를 눌러서 아래 내용을 추가하고 소스코드1과 소스코드2 부분에 실제 들어갈 내용을 입력하면 됩니다.

글 작성시(HTML모드) 소스코드 추가하기
1
2
3
4
<pre class="brush: plain" title="임의로 타이틀명 입력">    
     소스코드1 입력
     소스코드2 입력
</pre>




pre class="brush: plain" 작성시 빨간색 부분을 아래와 같이 용도에 맞게 변경 사용가능합니다.

1. plain, text : 일반 텍스트 문서를 표현해줍니다.

2. css : css 문서를 보여줍니다.

3. xml : html, xslt, xhtml, xml 파일을 이쁘게 보여줍니다.

4. js, jscript, javascript : 자바스크립트 관련 소스를 이쁘게 보여줍니다.

5. java : java파일을 보여줍니다.

6. c, cpp : c와 c++을 이쁘게 보여줍니다.

7. sql : 쿼리문을 깔끔하게 보여줍니다.



출처: http://seohc.tistory.com/106

네이버 svn 멤버관리 방법

svn에 자신외의 다른 팀원들을 추가하려면..


마이페이지에서 해당 프로젝트 홈으로 간뒤에

프로젝트 관리 -> 멤버관리로 들어가봅니다.


그럼 다음과 같은 화면에서 멤버를 추가할 수 있습니다.

그리고 추가된 멤버 또한 코드저장소 비밀번호가 

자신의 것으로 설정이 되어 있지 않다면 변경해주어야합니다. (기존 사용자라면 바꿀 필요 x)



네이버 svn과 이클립스 연동하기

네이버 svn을 등록하고 코드저장소 비밀번호까지 바꿨다면 이클립스 설정을 해줍시다.




1. 이클립스를 키고 Help -> Eclipse Marketplace...를 선택합니다. 

(마켓플레이스가 없을 경우 설치해줍시다. http://millo.tistory.com/47 혹은 검색...)





2. subclipse 를 검색하고 Intall 합니다. Confirm.. agree. next... 


2013:08:12 11:27:12





3. 경고는 간단히 무시해줍시다.

2013:08:12 11:28:23





4. subclise까지 설치가 되었다면 이제 svn 저장소를 만들어봅시다.

Open perspective 버튼을 누르고 SVN Repository Exploring 선택합니다. 

2013:08:12 11:40:20




5. 저장소가 생겼다면 우클릭 -> new -> Repository location을 선택합니다.

다음과 같은 화면이 뜨는데 네이버 svn의 url을 복사해주고 finish 해줍니다.

2013:08:12 11:41:13





6. 아이디와 패스워드도 입력해줍니다. 이름은 네이버 아이디이고 패스워드는 코드저장소 비밀번호입니다.

이전에 변경한 코드저장소 비밀번호가 적용이 되었으면 ok 버튼을 클릭 (save password를 꼭 체크해줍니다.)

2013:08:12 11:41:55




7-1 기존에 내 pc에서 작업하던 이클립스 프로젝트를 svn에 등록하려면 

먼저, 프로젝트를 열고 우클릭 -> Team -> Share Project -> Svn 선택 -> 저장소 설정

그리고 프로젝트 우클릭 -> Team -> Commit 을 실행해주면 등록이 완료됩니다.



7-2 svn에 저장이 되어있는 프로젝트를 불러와봅시다. Repository location에 보이는 프로젝트를 우클릭하고 체크아웃을 선택하면 다음      과 같은 창이 뜨게 됩니다. 적당히 옵션을 봐주고 Revision을 최신으로 선택한 다음, finish 


2013:08:12 11:42:50




8. 프로젝트가 정상적으로 내 이클립스에 등록되었습니다.

2013:08:12 11:43:32




9. 변경사항을 svn에 적용을 하려면 Commit을 선택합니다.



출처: http://photo199.tistory.com/230

online용 소스버전관리 : BitBucket - 공짜?

요즘 아마도 가장 많이 쓰이는 소스버전관리는 역시 SVN이다. 그런데, 이 SVN을 아주 싫어해서 GIT이라는 소스 버전관리 프로그램을 만든 것이 내가 알기로는 리눅스를 만든 리누스 토발즈다. 

그래서 현재 코딩하는 많은 사람들이 쓰고 있는 데, 특히 요즘은 클라우드시대를 맞이하여 온라인으로 소스를 올리고 서로 협업해서 사용하는 사람들도 많다.





아마도 가장 핫한 온라인 소스 버전관리는 GItHub가 아닌가 한다. 그런데, 여기서 가입하고 사용을 하려면 좀 그런 것이 프라이빗한 프로젝트를 생성해서 사용하려고 하면 역시 돈을 내야 한다. 물론 머 소스를 공개하면 당연히 공짜다. 그런데, 사람마음이 또 그런 것이 개인적으로 하는 프로젝트 같은 것은 굳이 꼭 여기에 올리고 싶은 마음이 없게 된다. 그래서 얼마전에 JIRA를 사용하다가 알게 된 것이 바로 Bitbucket 이다.





사이트 주소는 http://bitbucket.org 이다. 비트버킷은 지라를 만든 회사에서 운영하는 곳이다. 기능은 점점 현재 보강되고 있는 추세다. 결정적으로 여기서는 5명의 사용자까지는 공짜다. 소스가 공개이든, 비공개이든 말이다.


그리고 여기서는 GIT와 머큐리얼기반의 소스 버전관리 기능을 제공한다. 당연히 이슈 트래킹기능도 제공을 하고, 위키도 지원을 한다. 따라서 비용은 없고 소스버전관리를 하고 싶은 개인개발자는 여기를 사용하는 것도 좋은 방법이다. 


기존의 GIThub/SVN/Google Code에서 컨버팅하여 소스를 가지고 오는 기능도 존재한다. 



소스 랭귀지가 어떤 것인지에 따라서 화면상에 소스의 컬러를 다르게 나타내어서 구분하게도 하여준다. 


내 생각엔 많은 사람들이 Github 만 알고 있는데, 이 Bitbucket 도 한번쯤 사용해보는 것도 좋은 방법일듯 싶다.





출처: http://blueweiv.net/598

네이버 SVN 등록

네이버에서 제공해주는 svn을 이용하여 프로젝트를 관리할 수 있습니다.




1. 네이버 개발자 센터로 들어가서 오른쪽 사이드바의

'나의 프로젝트 등록' 혹은 '마이페이지 바로가기'를 클릭 


2013:08:12 11:33:10




2. 대시보드에는 내가 참여한 프로젝트가 나옵니다.

2013:08:12 11:33:40




3. 프로젝트 등록을 눌러 프로젝트를 등록합니다.프로젝트 아이디 이름은 적당한 것으로 합니다. (변경가능)

@프로젝트 이름 아이디는 신중히 골라주세요 (임의로 삭제불가능, 중복불가, url에 아이디가 들어갑니다.)

2013:08:12 11:34:47




4. 프로젝트를 등록하면 다음과 같은 정보화면이 나오는데 나중에 고쳐줍시다.

2013:08:12 11:35:47





5. 메뉴에서 코드를 누르면 등록되어있는 세부 프로젝트들이 나오는데 

DAV를 통한 개바자의 Subversion 접근 아래에 있는

https://dev.naver.com/svn/sylmoop가 코드저장소 url이 되겠습니다.

제 프로젝트는 프로젝트이름이 sylmoop였기 때문에 url 끝에 sylmoop가 들어가 있는 걸 알 수 있습니다.

2013:08:12 11:37:20




6. https://dev.naver.com/svn/sylmoop 로 접속을 하면 다음과 같은 다이얼로그가 나타나는데

사용자 이름은 자신의 네이버 아이디이고 비밀번호는 코드저장소 비밀번호입니다.
(코드저장소 비밀번호는 자신의 것으로 재설정해주어야합니다. #아래설명참조)

2013:08:12 11:37:44




7. 접속이 되면 다음과 같은 화면이 뜨게 됩니다.

2013:08:12 11:38:31



8. 프로젝트를 제대로 관리하려면 암호를 재설정해주어야합니다. 

아까 보았던 프로젝트 정보페이지의 우측 상단의 마이페이지를 누르고 회원정보로 갑니다.

코드저장소 비밀번호 설정을 눌러 비밀번호를 변경해주십시다. 

2013:08:12 11:36:19



9. 코드저장소 비밀번호는 15분정도 있어야 반영이 됩니다. 그 사이에 이클립스 설정을 해줍시다.