[UI: 1] Powermockup으로 화면을 그려보자.

많은 IT종사자 분들중에 화면정의서 또는 개발정의서와 같은 문서를 본적 있을것이다. 보통은 파워포인트로 작성된 경우가 많을 것이다. 필자도 개발시에 SK에서 사용되었다는 틀을 가져다가 쓰는 경우가 많았다. 그중에 예전엔 중구난방식으로 그려진 화면정의서를 많이 봐왔을것이다.

이미 IT는 많은 발전을 해왔다. 그중에 UI도 눈부시게 발전했음은 누구도 부정못할거라 생각한다.
오늘은 그 UI를 위해 탄생한 수 많은 Wireframe(mockup) 툴 중에 최고라 할 수 있는 Powermockup에 대해서 알아보자.

많은 사람들은 이런 질문할 것 같다.
정말 좋은가요?
쓰기 쉬운가요?
공짜인가요?
이런 질문에 대답이 될만한 내용으로 하나씩 알아보자.

먼저 다운받을 수 있는 사이트를 알아보자.
http://www.powermockup.com/을 방문하면 아래와 같은 화면에 다운로드를 할 수 있는 링크가 바로 보인다. 'Download Free Trial' 버튼을 클릭하자.
트라이얼 버전이라고는 하지만 기간적 제한이 아닌 기능적 제한을 가지고 있을 뿐이다. 써보면 왠만한 기능들은 다 있을거라고 본다.

설치를 완료하면 파워포인트를 실행시켜보자. 아래 이미지와 같이 파워목업이라는 탭이 생성되었음을 알 수 있다. 탭을 클릭해보자.

처음엔 아무것도 안 보일 수 있다. 아래의 '스탠실 라이브러리 보기'를  선택하자.

우측에 아래와 같은 패널이 생성된다. 아래로 쭉 스크롤해보면, 화면 구성에 쓸 수 있는 많은 아이템들을 확인할 수 있을 것이다.

아래 이미지는 패널 전체를 캡쳐한 화면이다. 상당히 많은 양의 내용을 작성할 수 있을 자신감이 생기는거 같다. ㅎㅎ
다른 블로그에서 본 내용인거 같지만, 이 스텐실은 변경 및 추가 등이 가능하다고 했었다.
자기만의 프리셋을 만들어두면 유용하게 쓸 수 있을거라 본다.

마지막으로 간단하게 파워포인트에서 모바일 인트로화면 느낌으로 하나 만들고, 나머지 몇가지 스텐실을 추가해본것이다.

여기까지면 처음에 말한 3가지 질문에 답변을 두가지는 할 수 있다고 본다.
좋고, 쓰기 편하다. 유료이긴 하지만, 물론 공짜로 라이센스를 받는 방법이 있다.
필자와 같이 블로그를 하는 경우라면, 블로거를 대상으로 'Free Single License'를 취득하는 방법이 있다.

회사에서 업무용도로 사용할 목적이라면 라이센스를 구매해도 하나의 방법이겠지만, 필자는 굳이 파워목업 홈페이지에서 메일을 작성해서 라이센스를 구걸을 시도하였다.
라이센스를 받으면 좀 더 많은 내용을 작성해보도록 하겠다. 부디...

[node.js: 3] 4줄짜리 웹서버를 띄워보자.

필자는 기본을 이해하는것이 정말 중요하다고 생각한다.
아래 4줄짜리 파일을 만들어서 실행해보고, 앞으로 하나씩 업그레이드 해보도록 하자. 물론 되도록이면 이미 유행하는 모듈들을 활용하겠지만, 다시 언급하자면 기본 이해를 위해 쓰는 글임을 잊지말자.

1. 아래 내용을 'http.js'라고 저장하자.

require("http").createServer(function (req, res) {

   res.writeHead(200, {"Content-Type": "text/plain"});

   res.end("Hello World\n");

}).listen(80);

2. node로 실행해보자. 아무런 log 조차찍지 않았지만, 80으로 동작되는 웹서버가 구동되었을 것이다. 브라우저를 통해서 'http://localhost'로 접속해보자. 'Hellow World'가 반길것이다.
#> node http.js

[node.js: 2] npm을 사용해보자.

npm은 Node Packaged Modules의 약자라고 한다. node.js에서 사용할 수 있는 모듈을 관리해주는 툴인것이다. 필자가 npm을 사용하면서 느꼈던 소소한 것들의 기록을 남겨본다.

1. 설치된 npm의 버전은 뭘까?
이전 게시글을 보면 binary node.js를 설치하면 npm도 같이 설치됨을 알 수 있다.
#> npm --version

2. local 디렉토리에 설치된 node 모듈은 뭐가 있을까?
특정 디렉토리에서 작업하는 경우 npm으로 모듈을 install 시작하면 'node_modules' 디렉토리가 만들어지는 것을 확인할 수 있다. /root/nodejs/에 test라는 디렉토리에서 local 설치된 node 모듈을 확인할 땐 다음과 같이 입력하면 된다.
#> npm ls

3. local 디렉토리에 설치된 node 모듈은 어떻게 모두 삭제할까?
사실 이 내용은 불필요한 내용일 수 있다. 왜냐면 local 디렉토리에 설치된 모든 node 모듈의 삭제는, local 디렉토리 자체를 삭제해주면 되기 때문이다. 그래도 알아보자. 다음 명령어를 입력하면 node_modules의 디렉토리 내의 모듈을 listing해서 삭제한다.
#> for package in `ls node_modules`; do npm uninstall $package; done;
4. npm을 -g 옵션을 통해서 전역 설치를 하면, 나중에 전역 설치된 npm 모듈을 어떻게 확인할 수 있을까?
이미 인터넷에 많은 답변들이 있겠지만 나도 한번 달아본다. ㅎㅎ
#> npm ls -g
필자의 vmware centos에서는 expressjs 4에 해당하는 'express-generator', node로 구동되는 js를 백그라운드로 관리할 수 있게 도와주는 'forever', node의 결과를 client에서 확인할 수 있게 해준다는 'node-inspector'가 깔려있었다.

5. 마지막으로 설치된 모든 global module을 찾아서 삭제해보자.
#> npm ls -gp --depth=0 | awk -F/node_modules/ '{print $2}' | grep -vE '^(npm|)$' | xargs npm -g rm

[node.js: 1] node.js를 binary로 설치해보자.

필자의 게시물은 어쩌면 자세한 내용을 원하는 독자들에게 맞지 않을거라는 생각이 문득들었다. 그래도 어떤 누군가에겐 도움이 되길 바라며 간단한 글을 다시 써본다.

node.js를 설치하는 환경과 방법은 여러가지가 있겠지만 필자는 vmware에 설치한 centos 6.5 x64를 대상으로 한다. 특히 centos가 6버전이면 git을 통한 컴파일 설치가 쉽게 되지만,  centos가 5.8버전에서 원할하지 않았다. 따라서 되도록이면 편하게 binary 파일을 이용하는것을 추천한다.

1. 먼저 설치하고자하는 node.js를 다운 받을 위치를 파악해보자. 'http://nodejs.org'를 입력하면 아래와 같은 화면이 나타난다. 
  1.1. 'DOWNLOADS' 화면으로 이동을 해보면 'Linux Banaries (tar.gz)'를 확인할 수 있다.


  1.2. '64-bit'를 오른클릭해서 '링크 주소 복사'를 선택해둔다.

2. 여기서부터가 중요하다.
  2.1. 먼저 디렉토리를 이동한다.
  #> cd /usr/local/lib

  2.2. 복사해둔 링크를 'wget'을 통해서 다운로드 받는다.
  #> wget http://nodejs.org/dist/v0.10.33/node-v0.10.33-linux-x64.tar.gz

  2.3. 다운로드 완료된 tar파일의 압축을 푼다.
  #> tar xfz node-v0.10.33-linux-x64.tar.gz

  2.4. 이제 가장 중요한 부분이라고 할 수 있겠다. binary로 설치된 node.js는 특정 위치에서만 실행할 수 있으므로, 아무곳에서나 node 명령어를 실행할 수 있도록 '심볼릭 링크'를 걸어주자.
  #> ln -s /usr/local/lib/node-v0.10.33-linux-x64/bin/* /usr/local/bin/

  2.5. 설치를 위한 모든 과정은 끝났다. 참고로 node의 버전을 확인해보면 잘 설치되었음을 확인할 수 있으며, node.js를 설치하면 'npm'도 같이 설치되는것을 확인할 수 있다.

[vmware: 4] 가상OS를 윈도우 시작시 background mode로 자동 실행시키기

vmware의 설치가 완료되서 개발을 하다보면 불편한 점 중에 하나가, 바로 컴퓨터 부팅시 vmware workstation 등을 직접 실행해서 가상OS를 수동으로 시작하는 것이다. 이런 불편함을 해보자.

필자의 시스템은 Win8.1임을 감안하길 바란다.

1. 시작프로그램의 위치를 찾자. 개인별로 계정이 다를 수 있으므로, 이점만 유의하면 쉽게 찾을 수 있다. [C:\Users\정대규\AppData\Roaming\Microsoft\Windows\Start Menu\Programs\Startup] 폴더를 열어두자.

2. 열린 Startup 폴더에서 batch 파일 작성을 해보자. batch 파일명은 'centos.bat'로 해보자. 내용은 아래와 같이 입력해주면 된다. 가상OS가 설치된 폴더를 감안해서 vmx 확장자를 찾아서 등록해주면 된다.

"C:\Program Files (x86)\VMware\VMware Workstation\vmrun.exe" -T ws start "C:\Users\정대규\Documents\Virtual Machines\CentOS6.5X64\CentOS6.5X64.vmx" nogui

두 개의 단계를 거쳐서 모든 준비는 끝났다. 재부팅해보면 CMD 창이 한번 떴다가 자동으로 닫히는 것을 확인할 수 있다. 편하게 가상OS를 다뤄보자.

[vmware: 3] virtual centos의 공유폴더 사용을 위한 vmtools 설치하기

이전에 필자가 쓴 글을 참조하여 centos를 minimal server를 설치하고, ip를 설정 완료한 상태라는 가정하에 vmtools 설치하는 과정을 알아보자.

windows 계열의 virtual machine에 vmtools를 설치하면 vmware workstation에서 마우스를 자유롭게 이동하기 편리하다. 내가 virtual centos에 vmtools를 설치하는 궁극적인 목적은 host os에서 또는 virtual centos에서 폴더를 공유하여 쉽게 파일을 관리하기 위함이다.

1. vmware의 shared folders와 CD/DVD 드라이브 설정하기
  1.1. 혹시 이전 게시물대로 따라한 사람들이 있을까봐, CD/DVD를 설정하는 방법을 알아보고 다음 단계로 넘어가자. 먼저 vmware의 설정 화면이다. 'Edit virtual machine settings'를 클릭하자.

  1.2. 'Hardware' 탭에서 아래의 'Add' 버튼을 클릭해서 그림과 같이 'CD/DVD'가 보이도록 생성해보자.

  1.3. 이번엔 'Options' 탭이다. 공유폴더 설정을 위해 우측 하단의 'Add' 버튼을 클릭하자.

  1.4. 공유 설정 마법사 창이 시작된다.

  1.5. 'Host PC'에서 공유할 폴더를 선택하자. 필자는 C드라이브로 정했다.

  1.6. 공유 폴더 속성은 아래와 같이 가뿐하게 'Enable this share'로 선택하면 끝!

  1.7. 공유폴더가 항상 사용할 수 있는 상태로 설정된 상태이다. 'OK'를 클릭하자.

  1.8. 아래와 같이 CD/DVD가 잘 설치되었음을 확인할 수 있다.

2. vmtools 설치를 위한 GUI 환경만들기

  2.1. Windows 계열의 가상OS를 생성하는 경우엔 vmtools 설치가 쉽게 이뤄진다. 하지만 command line interface의 가상OS를 사용하고자하는 경우엔, GUI형태의 OS 상태를 만들어주어야 설치하기가 쉬워진다. 그 과정을 따라해보자. 아래 경우는 CD/DVD를 가상OS에 설정해도, 실제 CD/DVD가 없어서 나타난 내용이다. 그냥 'Yes'를 선택하면 된다.

  2.2. centos를 부팅하고나서 다음과 같이 'yum'을 이용해 설치할 group package를 검색해보자. #> yum grouplist | egrep "Window|Desktop"을 검색해보니, 'Desktop'과 'X Window System'이 검색됨을 확인할 수 있다.

  2.3. 검색된 group package의 설치를 #> yum -y groupinstall "Desktop" "X Window System" 명령어를 통해서 완료하면 아래와 같은 화면이 나온다. 

  2.4. #> startx 명령어를 입력하면 아래와 같이 GUI desktop이 시작된다. 아래와 같은 경고 메세지는 다시 열리지 않도록 처리하고 닫자.

  2.5. GUI desktop이 load 완료된 상태이다. vmtools의 설치를 위한 기본준비가 완료됐다.

3. vmtools 설치하기

  vmtools는 VMWARE에서 제공해주는 것이니, 그냥 vmware workstation에서 설치를 시작하면 되겠다.

  3.1. [vmware workstation > VM > Install VMware Tools]를 선택하고 잠깐 기다리자.


  3.2. vmtools가 centos의 바탕화면에 삽입된 것을 확인할 수 있다. centos에서 'terminal'을 열어서 설치를 시작해보자.


  3.3. 현재 root 계정으로 로그온되어있는 상태이다. 바탕화면을 가리키는 desktop 디렉토리로 #> cd ~/Desktop 명령어를 통해 이동해보자.
vmtools의 tar 파일의 압축을 #> tar xfz VMwareTools-9.2.0-799703.tar.gz 명령어를 입력해서 해제해보자. 'vmware-tools-distrib' 디렉토리가 생성되었음을 확인할 수 있다.
#> cd ./vmware-tools-distrib; ./vmware-install.pl -default 명령어를 통해 간단하게 vmtools 설치를 본격적으로 시작하자.


  3.4. vmtools의 설치가 완료된 모습이다. 즐기랜다.


  3.5. 경우에 따라서인지는 정확히 몰라도, 몇초지나니 mount되어있던 vmtools 설치 파일이 자동으로 unmount되었다.


  3.6. desktop 디렉토리의 불필요한 파일을 모두 삭제해버리자.


  3.7. [Ctrl + Alt + Backspace] 키를 입력해서 GUI 상태에서 CLI 상태로 돌아가자.


  3.8. 공유된 디렉토리를 확인해보기위해 다음과 같이 경로 이동을 시작해보자. 왼쪽 아래에 한글이 깨지는 디렉토리가 보이는 것을 확인할 수 있다. 필자의 host pc에 설정된 디렉토리이다.

  3.9. SecureCRT를 통해서 접속하고, host pc의 한글명 디렉토리를 접근해보니 listing이 잘되는 것을 확인할 수 있다. 이로써 공유 폴더 설정이 완료되었다. centos로의 파일 복사나 이동을 쉽게 할 수 있다. 끝!

[vmware: 2] 설치된 centos의 ip와 방화벽 설정하기

vmware에 centos 설치하기 글에 이어서, vmware의 활용도를 높이거나 필수로 적용해야할 내용들에 대해서 알아보자.

이번에 알아볼 항목은 ip와 방화벽 설정이다.

먼저 vmware 설치된 centos의 network type을 NAT로 설정했다고 가정하고 설명을 시작한다.

1. ip설정

  1.1. linux에서 #> setup 명령어를 입력하면 아래와 같은 화면이 나타난다. 'Network Configuration'을 선택하고 'Run Tool'을 실행하자.


  1.2. 'Device configuration'을 선택한다.


  1.3. 'eth0'를 선택한다.


  1.4. 내 host에 설치된 vmware를 토대로 아래와 같이 내용을 작성했다. 설정이 완료되면 'Ok'를 선택한다. 자세한 사항은 아래에 설명되어 있다.


    1.4.1. vmware의 network type을 NAT로 지정하면 host pc의 'VMnet8' adapter를 기본적으로 사용하게 된다. 'ipv4' 부분을 보면 '192.168.205.1'의 값을 가지고 있다. 이 ip값의 마지막 자릿수를 +1하면 기본적인 'NAT gateway ip'가 된다. 즉 '192.168.205.2'가 되는 것이다.

    1.4.2. 이번엔 직접 vmware의 설정을 열어보자. 'Edit > Virtual Network Editor'를 선택하자.

    1.4.3. 화면에서 VMnet8을 선택하면 오른쪽 중간에 'NAT Settings'라는 버튼이 나온다. 클릭하자.

   1.4.4. 위에 [1.4.1.]에서 설명한것처럼 'Gateway IP'가 설정된 것을 확인할 수 있다. 

  1.5. 설정이 완료되면 'Save'해서 저장한다.



  1.6. 'Save & Quit'을 선택해서 ip 설정을 나가자.


  1.7. 여기서 끝이 아니다. 'eth0'는 기본 설정이 centos 부팅시에 '꺼짐' 상태이므로, 이 값을 '켜짐'으로 변경해주어야 한다. #> vi /etc/sysconfig/network-scripts/ifcfg-eth0로 설정된 값을 확인해보자. 'ONBOOT=yes'로 변경하고 vi를 저장하고 닫는다.


  1.8. 마지막으로 NIC의 변경사항을 반영하기 위해, NIC를 재시작한다. #> service netwrok restart를 입력하자.


  1.9. 이제 잘 설정된 것인지 host에서 확인해보자. cmd 창을 열어서 centos에 설정된 ip를 대상으로 telnet 연결을 해보자. ssh는 '22번 포트'를 기본적으로 사용한다.

  1.10. 연결이 잘 된것을 확인할 수 있다.

  1.11. centos에서도 #> ifconfig 명령어를 통해서 ip를 확인해보면 아래와 같이 설정됐음을 확인할 수 있다. 이렇게 ip 설정은 끝났다.

2. 방화벽 설정
  2.1. 방화벽을 '사용 안함' 상태로 바꾸자. 'Firewall configuration'을 선택하자.


  2.2. 'Enabled'에 선택된 값을 'checkout'하고 'Ok'를 선택하자.


  2.3. 방화벽 설정값을 덮어쓰기위해 'Yes'를 선택하면 된다.


  2.4. 방화벽 설정까지 마쳤으니 'Quit'을 선택하면 모든 과정이 끝난다.

3. 다른 게시물에 추가할까하다가 하나 더 넣어본다.
yum을 이용한 update를 편하게 해보자. 일단 위의 ip 설정을 잘 따라왔다면 yum을 실행하는데 있어 문제점은 없을거라고 본다. yum을 실행할때는 정신건강을 위해서 -y 옵션을 주고 실행하자. 끝! #> yum -y update