Tech/InstallShield 사용법2010. 5. 12. 11:49

InstallShield X 사용법 1. 인스톨러 메타데이터 작성하기


준비물 : InstallShiled X, 배포할 프로그램 및 라이브러리

 

인스톨러 메타데이터 작성

a.   InstallShiled X 실행

b.   새로운 프로젝트 작성

InstallShield X를 실행하면 다음과 같은 화면을 볼 수 있는데, 새로운 인스톨러를 작성하기 위해 하단의 그림에 표시된 ‘Create a new Project’를 클릭한다.

 

그 다음 생성된 다이얼로그에서, InstallScriptProject를 선택하고, Project Name에 배포할 프로그램의 이름을 기입하고, Location에는 프로젝트 파일을 저장할 폴더를 지정한다. 


 

c.   인스톨러 프로젝트 작성

 

프로젝트를 생성하면 상단과 같은 화면을 볼 수 있는데, 프로그램 상단의 탭중에서 Installation Designer를 선택한다. 좌측에 여러 항목들이 나열된 것을 볼 수 있는데, 각 항목별로 인스톨러 작성을 위한 설정을 해주어야 한다.

 

i.          Installation Information

General Information은 말 그대로 일반적인 프로젝트의 정보들을 설정하는 항목이다. 프로젝트 이름이나 버전, 언어, 설치할 폴더 위치 등을 지정할 수 있다. 그리고 다음에 나올 스크립트 작성에서 사용할 문자열들을 설정할 수 있다. 여기서 주로 수정하는 부분은 Product Properties이다.

여기서 배포할 프로그램의 이름이나 버전, 설치 경로, 회사 이름, 홈페이지 등을 설정할 수 있다. Executable File항목은 메인 실행파일의 이름을 등록하는 것으로, 다음(c.ii)에 나올 컴포넌트들을 추가한 다음에 작성하면 된다. Product GUID는 OS에서 설치된 프로그램을 구분하는 key값으로 같은 인스톨러라도 이 값이 다르면 OS에서는 서로 다른 프로그램으로 인식한다.

(Update Service는 사용해 본 후에 작성하겠습니다.)

 

ii.         Organization

설치할 프로그램의 구성을 설정하는 항목이다. Setup Design, Features, Components, Setup Types등의 항목을 포함하고 있는데, 각각의 항목은 프로그램을 구성하는 단위들이다. 여기서부터는 임시로 작성한 프로젝트를 가지고 설명하겠다. Component는 최하위 단위로 설치할 파일들을 포함하고, 설치에 관련된 설정을 할 수 있다.

그림과 같이 Components 항목을 우클릭하면 ‘New Component’라는 항목이 나온다. 클릭하여 Component를 추가해주자. 컴포넌트를 추가한 후, 해당 컴포넌트를 클릭하면 다음과 같은 항목들을 볼 수 있다.


Destination은 파일들이 설치될 경로를 나타내고, <TARGETDIR>은 2.c.i에서 지정한 설치 폴더의 경로이다. 다른 프로그램과 공용으로 사용하는 라이브러리나 시스템 파일들의 컴포넌트는 Destination을 시스템 폴더인 <WINSYSDIR>로 지정해 주자.

Shared는 다른 프로그램과 해당파일들을 공유하는지의 여부이다. Ocx나 dll등 여러 프로그램에서 공용으로 사용하는 라이브러리나 리소스 파일들의 경우, 이 항목을 ‘Yes’로 해주지 않으면, 프로그램을 Uninstall할 때, 다른 프로그램의 사용여부에 관계없이 파일을 지워버리기 때문에 꼭 ‘Yes’로 해주어야 한다.

Uninstall은 uninstall시 해당 컴포넌트의 삭제 여부이다. 기본적으로 ‘Yes’로 설정되어 있다.

.NET Scan at Build의 경우 ‘None’외의 항목을 선택하면 빌드시 수많은 경고와 긴 시간을 소모하므로, 꼭 필요한 경우가 아니라면 ‘None’을 선택하자.

Self-Register항목은 registry에 자동으로 파일들을 등록하는지의 여부이다. OCX와 같은 active X들의 경우 ‘Yes’로 지정해 주자.

Link Type는 컴포넌트에 파일을 연결하는 방식을 말하는 것으로 ‘Static’과 ‘Dynamic’이 있다. Static의 경우, 폴더나 파일 하나하나를 추가하는 방식이고, Dynamic의 경우 경로를 지정해서 해당 폴더의 모든 하위 항목을 연결하는 방식이다.

 

컴포넌트의 속성들을 설정해 준 후, 컴포넌트를 append 하면 Static(or Dynamic)File Links항목을 볼 수 있는데, 여기에 다음과 같이 컴포넌트에 포함될 파일들을 추가해주자.

 

 

필요한 컴포넌트들을 모두 작성한 후, Setup Design항목을 클릭하여 작성한 컴포넌트들을 아래 그림과 같이 Feature에 연결해 주자.

 

Associate Components를 클릭하면 다음과 같이, 작성한 컴포넌트들의 목록이 나타난다. 여기서 연결할 컴포넌트를 선택하고 OK를 클릭하면 연결이 완료된다.

 

 

모든 컴포넌트들을 연결하고 나면, 추가적인 설정이나 프로그램설치가 필요 없는 경우, 여기서 인스톨러 작성이 끝날 수 도 있다.

iii.          System Configuration

시스템 구성에는 두가지 항목이 있는데, 하나는 인스톨시 바로가기를 작성해주는 Shorcuts와 레지스트리를 등록하는 Registry이다.

Shortcuts의 경우 아래와 같이 트리구조 상에서 폴더를 지정할 수 있다. 바로가기를 추가할 폴더를 우클릭하면, New Shortcut, New Internet Shortcut, New Shortcut to preexisting file세가지 항목이 나오는데, New Shortcut을 선택하면, 앞서 컴포넌트에 등록한 파일 중에 하나를 선택할 수 있고, New Internet Shortcut은 URL을 지정하여 웹페이지를 연결할 수 있다.

 

Registry의 경우, 설치 후 Registry에 기록할 내용을 설정하는 항목이다. 현재 컴퓨터의 레지스트리 구조도 함께 표시되므로 참고하여 작성할 수 있다.

 

iv.         Behavior and Logic

Behavior and Logic은 설치과정을 설정하는 항목으로, 예를들어 설치시에 컴포넌트들을 선택적으로 설치할 수 있게 해주는 typical등의 형식이나, 설치완료 후, 재부팅이나 프로그램 실행 등의 전반적인 설치과정을 설정할 수 있다.

InstallScript는 설치과정중에 필요한 사항들을 코드를 통해 작성하는 항목으로 작성하지 않고 빌드하면 기본적인 설치과정을 포함한다.

Support Files/Billboards는 설치시 언어별로 따로 설치를 해야 하거나, 추가적인 구성요소를 설치할 필요가 있을 때 설정하는 항목이다. 그리고 Splash Screen을 통해, 인스톨러를 실행했을 때, 처음에 나타나는 로고나 배경을 설정할 수 있다.

이 항목들은 작성자의 의도에 따라 매우 다양한 경우의 수를 포함하고 있기 때문에 예를 들어 설명하겠다. 만약에 해당 프로그램을 설치하는데, 반드시 필요한 구성요소가 있다면, 이미 로컬머신에 해당 구성요소가 설치되어있는지를 체크하고, 없다면 설치를 진행하는 경우를 설명하겠다. 캠을 이용해 동영상을 녹화하는 프로그램을 배포하는 경우, Windows Media Endcor(WME)가 필요하기 때문에, 먼저 Support Files에 다음과 같이 WME설치 파일을 추가한다.


파일을 추가한 후에, InstallScript항목으로 이동해서, WME의 설치여부를 판단하고 없다면 설치를 진행하는 코드를 작성한다. 코드는 Visual Basic기반으로 작성한다.

아래의 코드는 WME 9.1의 설치여부를 체크해주는 메소드이다.


코드를 보면, Registry를 검색해서 설치여부를 판단하는 것을 알 수 있다. WME외에 다른 프로그램들도 Registry에 버전정보나 설치정보를 기록하는 경우가 많기 때문에 이를 검색해서 사용할 수 있다. (기존 프로젝트의 코드를 참조하면 이해에 도움이 된다.)


코드를 작성하는 Editor에서 상단을 보면 위와 같이 두개의 콤보박스가 있는데, 여기서 인스톨이 진행되는 동안 발생하는 기본적인 이벤트핸들러들을 추가할 수 있다. 인스톨러가 시작할 때 발생하는 OnBegin이벤트나 언인스톨을 진행할 때 발생하는 OnUninstallingFile등 각각의 경우에 대한 이벤트핸들러가 존재하기 때문에 필요에 따라 선택하여 추가해주면 된다.


위 코드의 경우, 첫번째 UI가 실행되기 전에 발생하는 이벤트인 OnFirstUIBefore에 WME의 설치여부를 체크하고, 설치를 진행하는 과정을 추가한 것으로, WME가 설치되어 있지 않거나 필요버전보다 하위버전인 경우 다이얼로그를 띄워서 유저에서 알려주고, Support Files에 추가한 WME설치파일을 실행한다. 그림에 보이는 여타 다른 코드들은 상단의 콤보박스에서 선택시 자동으로 추가된다.

여기까지하면 인스톨러 메타데이터 작성은 완료된 것이다.


'Tech > InstallShield 사용법' 카테고리의 다른 글

InstallShield X 사용법 2. 인스톨러 빌드하기  (1) 2010.05.12
Posted by 알 수 없는 사용자
Tech2010. 5. 11. 15:32

[블렌드 스터디를 마치며...6]




  드디어 마지막이다! 두근두근 거리고, 아쉽기도 하고, 속이 시원하기도 했다. 6주차 스터디는 각 조마다 발표를 마치고, 회식자리를 갖기로 예정되어 있었다.

      
       


이게 바로 우리 팀에서 구현한 고스톱 패를 이용한 시계 가젯이다. 카드 시계 화면은 패를 잘못 연동해서 찍힌 사진이다. 현재 잘 나온다... (히히)

BlendStudy.zip

다운 받으셔서 default.html을 열면 결과물을 확인할 수 있다.

강 경미씨와 송 경희씨가 있었던 젊은 피 팀의 작품이다.



OB팀의 작품이다.


그리고 회식... ㅋㅋ



  힘들기도 했고, 지치기도 했지만, 주변에서 잘 해보라고 응원해주시고 격려해주셔서 계속 스터디를 진행할 수 있었던 것 같다.

  마지막으로 가젯의 형태로 마무리 하지 못했단 점에서 큰 아쉬움을 남겼지만 무사히 6주간의 스터디를 완수할 수 있었단 점에 큰 기쁨을 느끼며! 블렌드 스터디 후기를 마친다...

끗!!!
저작자표시 비영리 변경금지

'Tech' 카테고리의 다른 글

Selenium 튜토리얼  (0) 2011.07.19
[IE 비보호 모드에서 외부 프로그램 실행 허용 경고창 처리]  (0) 2010.08.27
[블렌드 스터디를 마치며...5]  (1) 2010.05.11
[블렌드 스터디를 마치며...4]  (0) 2010.05.11
Posted by 알 수 없는 사용자
Tech2010. 5. 11. 15:31

[블렌드 스터디를 마치며...5]



  5주차가 되었다. 이제 거의 개발은 완료가 되었어야 한다. 하지만... 아쉽게도 허 석씨 부분이 완료되지 못했다. 아쉬웠지만, 아직 1주일이 남은 상태였고 6주차때 알람 울림 기능 구현을 완료하면서 동시에 기능 연동을 허 석씨가 맡기로 하였다. 

  여튼 그렇게 우리 조는 발표하게 되었다. 이 찬헌씨가 준비한 부분, 내가 준비한 부분 따로따로 시연을 시키게 되었지만, 대략 예측이 되는 정도였던지라 다른 분들도 이해해주셨던 것 같다. 이 찬헌씨가 개발한 시계 기능에서 고스톱 패가 현재 시간에 맞춰 휙휙 패가 회전하면서 시간을 알려주는 것을 보고 다들 아이디어가 재밌고 참신하다 해주셨다. 이 찬헌씨는 실버라이트나 WPF에 있어 초보라고 하셨으면서도 완벽하게 구현해내셔서 속으로 나도 감탄했었다.
  내가 맡은 알람 기능 부분에서는 내가 만든 애니메이션이 들어가있어서 진희님께서 어떻게 구현했는지에 대해 물어보셨었다. Behavior로 만든 것이라고 대답해드리자, 굉장히 반응을 해주셔서 마음 속으로 기뻤었다. 우리 회사에서 내가 Behavior로 애니메이션을 만들고, 깨작깨작거리다가 내보이면 반응이 시큰둥했었다. 별로 소용이 없지 않느냐라거나 등의 얘기를 들었었기 때문에... (사실 상황에 그다지 맞지 않았던 탓도 있고) 디자이너분께서 좋아해주시니까 기분이 좋았다. 우리 회사 디자이너분들도 블렌드 많이 써주시고, 내가 만든 Behavior 써 주시면 좋을텐데라는 생각이 들었다.

  이제 다들 제법 구현이 완료되어 가는 상황이었다. 젊은 피 팀은 개발자 분들이 불참하게 되어 송 경희씨와 다른 디자이너 분(황 영지씨)까지 둘이서 블렌드 상에서 애니메이션을 수행시키는 것까지 하여 완료하기로 목표를 정하셨다. OB팀은 디자이너 분과 개발자 분 둘이서 서로 많은 협의 과정을 거치시며 수행하시는 것 같았다. 게다가 OB팀의 디자인은 굉장히 화사하고 산뜻한 느낌이 들어 기대가 많이 되고 있었다.

  5주차 스터디 본래 내용은 이펙트 및 비헤이비어였던 것 같은데, 바뀐 것 같다. Pixel Shade Effect 같은 경우, 만드는 것은 좀 까다롭지만 여러 가지 재미있는 효과를 만들 수 있을 것 같은 가능성이 높아 흥미가 있어서 다양한 예제들을 볼 수 없어 조금 아쉬웠다. 물론 디자이너분들도 같이 듣는 스터디였기 때문에 구현 내용까진 아니더라도 다양한 예제를 볼 수 있었으면 좋았지 않았을까 하는 것이 나의 개인적인 의견이다. 나는 이펙트와 비헤이비어는 디자이너와 개발자가 서로 의견을 나누거나 협업을 할 수 있도록 만들어주는 기능에 포함되기 때문에 중요하다고 생각한다.

  리소스에 관련한 강의를 하셨는데, 사실 리소스 정리 같은 작업은 중요한 일이라고 생각한다. 한 번 템플릿이나 스타일을 생성할 때마다 무한하게 늘어나는 XAML 코드를 보면 감당할 수 없음을 느끼게 된다. 이러한 것들을 Resource Dictionary로 묶는다거나 하는 등의 작업을 하게 된다. 중요하다는 인식은 갖고 있지만 항상 사용하는데 익숙하지 않아 나에겐 조금 부담이 되거나 어떻게 다뤄야 할 지 난감함을 갖게 하는 존재였다.

  이렇게 5주차 스터디는 마감이 되었다.

  순조롭게 될 거라고 예상했던 것은 착오였다. 5주차 스터디 기간동안 회사에선 프로젝트 막바지를 향해 한창 달리고 있었고, XEM행사 종료 시기와도 겹쳐 이전보다 더욱 더 정신없는 하루를 보내고 있었다. 주말이 되어 모든 일들이 끝났고, 나는 벌써부터 해방되는 느낌을 받았다.
  그리고 막상 월요일이 되자 남은 시간이 별로 없다는 것이 온 몸으로 느껴지는 것 같았다. 마지막 스터디인만큼 다른 분들이 구현하신 내용만이라도 연동하고 끝내야겠다는 생각이 들었고, 점심시간에 남아서 스샥스샥 연결시켰다. (헤롱)
저작자표시 비영리 변경금지

'Tech' 카테고리의 다른 글

[IE 비보호 모드에서 외부 프로그램 실행 허용 경고창 처리]  (0) 2010.08.27
[블렌드 스터디를 마치며...6]  (2) 2010.05.11
[블렌드 스터디를 마치며...4]  (0) 2010.05.11
[블렌드 스터디를 마치며...3]  (0) 2010.05.11
Posted by 알 수 없는 사용자
Tech2010. 5. 11. 15:30

[블렌드 스터디를 마치며...4]


  4주차 스터디에 갔을 때 아쉽게도 우리 팀은 발표하지 못했다.

  젠장.

  파일을 이메일로 보내놨었는데, 인터넷 접속이 원활히 되지 않아 매우 당황했었다. 결국 나의 엉성한 실수로 발표를 하지 못해 나는 민망해 얼굴을 들지 못했었다. 다른 팀 같은 경우에는 4주차쯤 되자, 디자인들이 입혀져서 굉장히 예뻐보여서 난 발표준비를 제대로 못했단 생각에 더욱 더 팀원들에게도 미안해졌었다. 젊은 피 팀 같은 경우에는 지난 3주차 때에 비해서 디자인이 확 바뀌어서 깜짝 놀랐었다. 검정색과 붉은색의 강렬한 계열 색상으로 멋드러지게 입혀져서 눈에 확! 들어왔다. 분위기도 확 바뀌었고 기능 하나하나가 더 눈에 알기 쉽게 구분된 느낌이었다.

  4주차 스터디 내용은 애니메이션과 비헤이비어 관련 내용들이었는데, 나같은 경우 블렌드에서 애니메이션을 생성해서 다루는 것이 덜 익숙하달까... 항상 코드로 애니메이션들을 만들어서 작업을 했었기 때문에 간단한 애니메이션이 아닌 이상 블렌드에서 애니메이션을 다루는 것이 조금 엉성항 편이었다. 그런 면에 있어서 디자이너분이 직접 애니메이션 사용하는 모습을 시연해주신다는 것은 배울 점이 있다. 예를 들어, Storyboard를 생성하여 애니메이션을 만들 때 목표 지점만 설정해주는 경우에, 시작 지점이 어디든 상관없이 목표 지점으로 애니메이션을 실행시킬 수 있다는 것은 처음 알게 되어, 이런 방식으로 응용할 수도 있구나 라는 것을 깨닫게 되었다.
  게다가 진희님께서 본인이 직접 제작했던 예제들도 시연해주셨는데, 디자인들이 아기자기한 것도 있고, 귀여운 느낌의 것들이 있어서 나는 눈이 반짝반짝 거렸다. 내가 탄성을 지를 때마다, 진희님께선 "감사합니다" 라고 말씀하시면서 쑥스러워 하셨다. 괜히 허 석씨 옆구리를 찌르면서 진희님이 보여주셨던 귀여운 디자인을 만들어달라고 졸랐던 기억이 난다.
  (쓰다보니 깨달은 거지만, 왠지 진희씨는 진희님이라고 쓰게 되네요. 아이디처럼 느껴져서 그런가... 흐흐)

  강의가 끝난 후, 서로의 작업을 확인하는데 나야 -_- 파일을 이메일로 보내놨으니 확인 불가였고... 이 찬헌씨는 본인이 담당했던 시계 기능 구현을 거의 완료해놓은 상태였었다. 이제사 얘기하는 거지만 감동했다. 동시에 부끄러웠다. 이 찬헌씨에 비해 노력하지 않은 내가 부끄럽고 죄송스러웠다. 이 찬헌씨는 자신이 만든 코드를 좀 더 좋게 수정하기로 하고, 나와 허 석씨는 담당 기능을 다음주까지 완성하기로 했다. 즉, 5주차때까지 개발 쪽에서 구현하기로 했던 모든 기능들을 완성하기로 했다.

  4주차 메일 발송 내용
 

안녕하세요 앗싸! 고도리팀 개발자 박경민입니다.

역할 분담 리스트 확정 사항들을 공지하고자 이렇게 메일을 보냅니다.
이번 주는 특히 빠듯할 것 같은데요.
다들 힘내보아요.

선 수현 : 알람 시계 화면이었을 때 이전 단계의 시계 화면으로 돌아가는 기능용 버튼 이미지(normal, over, down), 각 시계 화면의 배경, 알람 시계 화면에서 쓰일 시간 조정용 화살표 버튼 이미지(normal, over, down), 화면 전환 애니메이션

한 은정 : 화투 패와 카드 이미지, 시계 화면이 Load되었을 때 화투 패와 카드가 각각 제 위치로 돌아가는 애니메이션

이 찬헌 : 시계 기능 구현 및 시간을 알려주는 패와 카드의 회전 애니메이션 구현

허 석 : 알람 시간이 되었을 때, 알람을 울리는 애니메이션 및 알람 시간을 조정할 때 휠 기능 구현

박 경민 : 알람 기능 구현 및 알람 시간 조정 애니메이션

한 은정 대리님의 화투 패와 카드 이미지에 관해서는 이미지를 구하셨었기 때문에 이 부분도 선 수현님께 부탁드려야 할 지 고민이 되었지만, 일단 적어놓았습니다.
만약 수정 사항이 필요하면 디자이너 두 분이서 말씀을 나눠주시길 바랍니다.

우선 이미지들은 다음 주 스터디 때까지 나와 주길 기대합니다.
저희 개발자들은 다음 주 스터디까지 기능 구현 완료를 목표로 하겠습니다.

화이팅

추신 : 원래 어제 공지를 하려 했으나, 개인적으로 힘들어서 보내지 못했습니다. 늦은 공지 죄송합니다.

 
  사실 이 때부터 디자이너분들로부터의 협조를 구하기 어려운 시점이 되었던 것은 사실이었다. 한 은정 과장님께선 평일엔 계속된 야근, 그리고 주말엔 아이를 보러 가시느라 심신이 지치셨고, 선 수현씨도 학교 시험 기간과 일들이 겹쳐서 정신없는 나날들을 보내고 계셨다. 그래도, 두 분 모두 본인이 할 수 있는 것들을 충실히 수행해주시려고 노력해주셨다. 한 은정 과장님께선 기본 레이아웃 시안 및 카드 패 들을 모두 완성해주셨고, 카드 패가 로딩될 때 나타나는 애니메이션도 늦게까지 남아 만들어주셨다. 선 수현씨도 버튼 컨트롤과 종이 벗기기 식 환면 전환 애니메이션을 만들어주셨고, 계속 죄송스러워 하셨었다.

  -ㅁ-)/ 그렇다고 우리가 못 만들 것도 없잖은가! 괜찮다! 만들 수 있는 자료들은 모두 모였고, 우린 할 수 있었다.

  라고... 생각했건만... 이런 젠장!

  토요일이 되자마자 난 독한 감기에 시달리게 되었다. 뭐 이런 시궁창 같은 일이 나에게 벌어지는가 싶어 눈물이 났다. XEM도 그 다음 주에 마무리 되는 시점인지라 무사히 마무리를 하려면 나의 진도는 한참 남은 상태였었다. 집중하려 해도, 열이 40도까지 올라가는 바람에 머리가 어지러워 결국 감기는 월요일까지도 회복이 되지 않아 휴가를 내버리는 사태를 일으켰다. 주말부터 3일동안 잠 자는 것밖에 내가 한 일은 없었다.
  그나마 스터디 같은 경우, 내가 담당했던 알람 시계 기능은 짬짬이 집에서 만들어 두었었기 때문에 큰 무리는 없었다. 애니메이션 같은 경우에도 1주차 스케치 플로우에서 만들어두었던 Behavior를 갖다 붙이면 되었기 때문에 내가 해야했던 내용들은 약간의 수정과 알람 시간 설정 기능과 설정된 알람 시간을 반환하는 것이었다.

  그렇게 나의 4주차 스터디 시간은 정신없이 또 지나갔다. 압박감과 함께...
저작자표시 비영리 변경금지

'Tech' 카테고리의 다른 글

[블렌드 스터디를 마치며...6]  (2) 2010.05.11
[블렌드 스터디를 마치며...5]  (1) 2010.05.11
[블렌드 스터디를 마치며...3]  (0) 2010.05.11
[블렌드 스터디를 마치며...2]  (0) 2010.05.11
Posted by 알 수 없는 사용자
Tech2010. 5. 11. 15:29

[블렌드 스터디를 마치며...3]



  3주차 스터디 날이 되어 허 석씨가 본인이 완성한 프로젝트 파일을 들고 발표를 하게 되었다. 1주차 때의 계획회의에 참여했었던 게 아니었던데다가, 기존의 기획내용들에 대한 설명이 부족했음에도 불구하고 허 석씨는 개별과제(레이아웃 작성)를 무사히 수행해내고 발표를 하였다. (박수) 우리 팀의 프로젝트 방향은 기존 기획내용에서 벗어나지 않는 선에서(결과적으론 부족했지만...) 수행했었기 때문에 특별한 레이아웃 변경 내용은 없어서 딱히 할 말은 없지만, 고스톱 패 모양이 작아서 귀여웠다는 점이 좋았달까?

  젊은 피 팀에서는 전주 러프하게 그려진 스케치 플로우 프로젝트에 디자인이 가미되어져 있었다. 얕은 하늘색과 회색 계통으로 깔끔하고 차분한 느낌이었다. 아쉽게도 WPF는 젊은 피 팀의 개발자 분의 부재로 발표가 이루어지지 않았다.

  OB팀에서는 기존의 스케치 플로우의 방향을 완전 뒤엎고, 새로운 프로그램을 제시하였다. 하지만 더 단순해진 느낌은 절대 아니었다! 오히려 더 재밌어진 느낌이었다. 요일에 따라 날씨에 따라 사용자에게 추천 아이템을 제시한다라는 컨셉이었고, 메뉴를 선택하려고 할 때 빙글빙글 회전하는 애니메이션이 멋드러졌다. '우와! 만들어지면 짱 멋있겠다' 라는 생각이 들었다.

  3주차 스터디 내용은 스타일과 템플릿 관련 내용들이었다. 나같은 경우 여러 번 컨트롤 템플릿들을 수정해본 경험이 있었기 때문에, 스터디 내용이 어렵거나 하진 않았다. 다만, 스타일과 템플릿에 대한 정확한 구분선 즉, 개념에 대해 좀 더 명확하게 알 수 있었던 것 같다. 예를들어, 나같은 경우엔 정확하게 이건 이거다, 저건 저거다 라는 식으로 사용했던 것이 아니라, 이건 이렇게 바꾸면 된다 라는 식으로 알고 작업했었기 때문에 정확한 구분선이 없었다고 봐야 할 것이다.
 
  강의가 끝난 후, 지난 주에 리스팅해두었던 목록들을 두고 실제 역할 분담을 하였다. 시계 기능 구현은 이 찬헌씨가, 알람시간이 되면 알람을 울리는 기능 및 휠 기능 구현은 허 석씨가, 알람 기능 및 시계 화면에서 알람 화면으로 화면 전환될 때의 애니메이션 구현은 내가 하는 식으로 역할 분담을 하고 그 주의 스터디 미팅은 마쳤다.

  3주차 메일 발송 내용은 없다.
  이때부터 스터디 참여 인원은 줄어들었고, 조금씩 열기가 가라앉는 듯한 느낌이 들었다. 우리 회사 사람들만 그런 것은 아니겠지만, 당시 프로젝트가 진행 중이었기 때문에 스터디를 제외한 날에는 대부분 야근을 했었고, 회사 내에서는 독서 모임과 XEM이라는 행사가 진행되고 있어서 평일이고, 주말이고 모든 것들이 겹쳐서 점점 정신줄을 놓기 시작했던 것 같다. 컨트롤 템플릿 작성은 쉬운 일이라 생각했고, 다들 각자 만들어보기로 약속을 했기 때문에 문제 없을 거라는 생각도 했었다.

  하지만, 3주차기간동안의 나는 우울해졌다. 2주차 때 개별과제 완성자는 3명... 3주차때는 확인 불가... ㅠ_ㅠ) 사실 속으로 폭포수 눈물을 쏟았다. 무언가 내 생각대로 수월히 되지 않는 듯한 느낌이 들자 가슴이 먹먹해졌다. 조장인 내가 공지 메일을 정확하게 보내지 않은 탓도 있었고 ... 힘들었었다. 무엇보다도 작업을 할 때 필요한 부분에 있어 서로 커뮤니케이션이 원활히 진행되지 않았던 점도 나를 더욱 힘들게 했었다.

  나는 우울해했었다.
저작자표시 비영리 변경금지

'Tech' 카테고리의 다른 글

[블렌드 스터디를 마치며...5]  (1) 2010.05.11
[블렌드 스터디를 마치며...4]  (0) 2010.05.11
[블렌드 스터디를 마치며...2]  (0) 2010.05.11
[블렌드 스터디를 마치며...1]  (0) 2010.05.11
Posted by 알 수 없는 사용자
Tech2010. 5. 11. 15:29

[블렌드 스터디를 마치며...2]


  2주차가 되어 각 조에서 작성한 스케치 플로우 프로젝트의 내용을 발표하기로 했다.
  우리 팀의 발표는 고스톱 패를 이용한 시계 가젯이라는 것을 주제로 설명을 시작하였다. 시계 화면은 크게 두 가지로 나뉘어져, 기본으로는 고스톱 패를 이용한 시계 화면이지만, 스위칭 버튼을 이용하여 화면을 전환하면 포커 카드를 이용한 시계 화면이 나타나도록 되어있다. 또한 알람 기능이 있어 알람 화면으로 이동하면 알람 시간을 설정할 수 있다라는 것이 우리 팀의 컨셉이었다. 대략적인 애니메이션은 시계 화면 전환이 있을 때마다 애니메이션이 있을 것이라는 점, 알람 시간을 설정할 때, 휠 기능을 지원하는 것을 목표로 하는 등의 여러 부가기능 적인 것들을 추가적으로 설명하고 발표를 마쳤다.

  다행히 반응은 괜찮았던 것 같다. 가젯인지라 워낙 사이즈가 작아서 발표를 할 때, 크기를 확대하여 발표해야했던 점만 빼면 말이다. (웃음)

  다른 조들의 경우, 강 경미씨와 송 경희씨가 있었던 B팀(팀명 : 젊은 피)은 WPF와 Silverlight를 혼용하여 개발하는 방향으로 설명하였다. 홈페이지의 북마크 기능을 WPF와 Silverlight 양 쪽 모두를 통해 가능한 프로그램이라는 컨셉이었다. Silverlight의 경우 B팀의 디자이너분들이 힘쓰신 덕분에 이뻐보였고, 모션도 멋있었다. 예를 들어, 북마크 카테고리 선택 버튼들이 시계톱 모양으로 되어있어, 버튼으로 누를 때마다 시계톱이 회전하면서 선택된다거나, 들쑥날쑥 움직이는 애니메이션들이 멋있었다. (글로 설명하려니 부족하군.) WPF같은 경우, 디자인 요소가 배제되어 직관적이지 않았던 것 같지만, 프로그램이 완성되면 둘이 어떤 식으로 연동될 지 매우 궁금지는 컨셉이었다.

  C팀(팀명 : OB)의 경우엔, 숙련도가 높아보이는 분들이 계셨다고 생각한다. 쇼핑몰 사이트가 컨셉이었는데, DeepZoom을 이용하여 제품을 확대/축소하여 볼 수 있고, 해당 제품의 색상을 사용자가 원하는 대로 변경해가며 미리보기를 할 수 있는 등의 난이도가 꽤 높아보이는 프로그램이었다. 속으로 "허겅!" 했었다. 이런 난이도라니! 굉장하다! 라는 생각과 정말 6주동안의 스터디 기간동안 완성된 모습을 볼 수 있을까! 하는 걱정이 함께 내 머릿 속을 지나쳐갔다. 하지만, 쇼핑몰이라고 하더라도 신발 카테고리에 한해서만 구현된다하여, 만일 완성된다면 완전 멋지겠구나라며 기대감이 부풀어올랐다.

  각 조의 발표를 마치고,  진희님께서 레이아웃에 관한 간단한 강의를 하신 후, 우리 팀은 각자의 역할을 분담할 수 있도록 리스팅을 하였다. 필요한 기능과 애니메이션을 칠판에 다시 재정렬한 후, 디자이너가 맡는 부분, 개발자가 맡는 부분을 나누었다. 그렇게 어려운 부분들도 없었고, 역할 분담에 대한 논의는 순조롭게 되었다.

  2주차 메일 발송 내용

안녕하세요, 앗싸 고도리의 개발자 박 경민입니다.
4월인데도 불구하고, 날씨가 너무 쌀쌀해서 오그라들 것 같은데 다들 괜찮으신지요.

어제 스터디에 참석하지 못한 이 찬헌님에게 안내드릴 겸 공지 메일을 보냅니다. ^-^)

1. 4월 6일 블렌드 스터디 2주차
  저희 조원이셨던 김 다정님이 블렌드 스터디를 그만 두게 되셔서 쓸쓸했는데, 새로운 멤버를 영입하게 되었습니다. 24살 꽃곰 허 석님입니다.
저희 조에 회사 사람이 3명이나 되어 다른 팀원분들께서 거부감이 들거나 불편해하지 않을까 매우 걱정은 됩니다만 그런 일 없도록 스터디 기간동안 서로 잘 화합도록 노력하면 되지 않을까 기대해봅니다.

  어제 준비도 안 되어 있는 상태에서 제 마음은 블랙홀과 같았는데요. 너무 떨려서 발표도 제대로 못하고 엉성하게 했었는데 -_-);; 다행히 반응을 좋게 받아서 안심했습니다. 히히.
발표는 팀원 에서 한 명씩 돌아가며 발표할 예정이고, 다음 주 발표는 허 석님이 하시기로 했습니다.

  스터디 진행 시간동안 레이아웃 관련한 내용들을 진행했는데요. Grid, Canvas, StackPanel 등 기본적인 Panel들에 대한 설명과 Panel들을 이용하여 어떻게 레이아웃을 만드는지에 대해 스터디하였습니다.
포토샵이나 일러스트 프로젝트 파일을 import하여 블렌드에서 직접 구현할 수 있는 부분들은 제거하고, 레이아웃을 작성하는 모습을 직접 진희님이 시연하셨는데, 디자이너 분들에겐 의미가 컸으리라 예상합니다.
그 후 남은 시간은 레이아웃을 잡는 거였는데, 저희 조는 대략적인 Todo List를 작성하고 서로 역할 분담을 하는 것에 집중하였습니다.
  디자이너와 개발자의 대략적인 역할 분담, 디자이너가 할 일 중에서도 한 은정님과 선 수현님의 역할 분담 등... 에 대해 얘기 하였고, 우리 개발자는 온라인 상에 모여서 개발 사항에 대해 논의하고 역할 분담을 하기로 했습니다.

  결정된 사항은 레이아웃 이미지는 한 은정 대리님께서 하시기로 하셨고, 디자인이 나오면 우리 조원들에게 모두 전송하여 그 디자인에 맞춰 레이아웃을 잡기로 하였습니다.

  이제 개별 과제에 대한 설명을 하겠습니다. 우선 다음 스터디가 있기 전에 데브앤디자인 카페에 레이아웃 결과물을 올려야 하기 때문에 이번주 주말까진 레이아웃을 맞춰주셔야 합니다. 그에 필요한 준비물은 우선 프로젝트 생성인데요, 프로젝트를 생성하고 트리를 구성하는 것은 저희 개발자 쪽에서 하겠습니다. 레이아웃 이미지 디자인은 늦으면 이번 주 금요일에서 토요일까진 나와야 모두에게 전달하여 레이아웃을 작성할 수 있으리라 짐작합니다. 주말을 보내고 월요일날 저녁에 네이트온에서 서로의 결과물을 확인하고 의견을 나누도록 하겠습니다.


2. 개발분들은 저희 프로젝트에서 어떤 부분이 개발 기술이 들어갈 것인지 예측을 하시고, 리스트로 작성하시고 가능한 빠르게 약속시간을 잡아 온라인 상에서 만나도록 해요.
본인이 괜찮은 시간과 날짜를 내일 포함 주말까지 생각해서 말씀해주세요.


  (메일을 쓸 당시에는 한 은정 과장님께서 대리에 계셨을 때였다.)
  그리고 며칠 후 개발자끼리(나 그리고 이 찬헌씨, 허 석씨) 네이트온에서 온라인 미팅을 가졌다. 프로그램을 만들면서 개발 기술이 필요한 부분들을 더 세분화하여 역할분담을 하기 위해서였다.



  위와 같은 내용으로 개발 사항들을 정리한 후, 각자의 몫을 나누기로 한 후 우리는 1시간의 온라인 미팅을 종료하였다. (지금 와서 보니, 정말 미구현 항목들이 너무 많아서 부끄러울 지경이다.)

  2주차 개별 과제 내용은 스케치 플로우의 내용들과 한 은정 과장님께서 디자인해주신 레이아웃 이미지를 기준으로 프로젝트를 생성하고, UI를 배치하는 것이 목표였다. 굉장히 간단하고 쉬운 내용이라 순식간에 스스스슥 뚝딱 하고 만들었던 것 같다.



  당시의 디자인 시안. 사이즈가 작아서 걱정했던 것과는 달리 고스톱 패의 모양을 알 수 있어 만족스러웠었다.

저작자표시 비영리 변경금지

'Tech' 카테고리의 다른 글

[블렌드 스터디를 마치며...5]  (1) 2010.05.11
[블렌드 스터디를 마치며...4]  (0) 2010.05.11
[블렌드 스터디를 마치며...3]  (0) 2010.05.11
[블렌드 스터디를 마치며...1]  (0) 2010.05.11
Posted by 알 수 없는 사용자
Tech2010. 5. 11. 15:28

[블렌드 스터디를 마치며...1]



  나는 지난 6주간 진희님이 진행하셨던 블렌드 스터디에 참여했었고, 5/4일 무사히 스터디를 종료하였다. 
 
  회사에 막 입사했을 때, 실버라이트를 공부하겠다고 관련 싸이트들을 마구잡이로 돌아다니며 열심히 따라해봤던 기억이 난다. 그 중 하나로, 참고를 많이 했던 싸이트 중 하나가 진희님 블로그였다. 예제들이 따라해보기에 딱 좋았고, 디자이너 분이라서 블렌드 예제들이라서 나에겐 더 이점이 컸다. 실버라이트나 WPF를 할 때, 블렌드를 같이 켜 두고 개발 작업을 하면 더 편하다고 느꼈기 때문이다. 게다가 블렌드를 사용하는 디자이너들이 블렌드 사용하는 방법을 보면 굉장히 새롭게 느껴지는 부분들이 많다. 디자이너이기 때문에 할 수 있는 것들이 몇몇 공개 될 때에는 굉장히 자극적이고, 놀랍고, 재미있다.

  서론이 길었다. 이러한 이유들 때문에 나는 지금까지 몇몇 디자이너 분들의 블로그를 즐겨찾기에 저장해놓고 눈팅하며 정보를 얻거나 했었다. 그런데, 마침 진희님의 블로그에 오랜만에 방문하였던 그 날, 스터디를 모집한다는 공지문을 보게 되었다.

  오!

  디자이너뿐 아니라 개발자도 같이 스터디에 모집하여 협업을 이룰 수 있도록 하는 것이 목표라고 되어 있었다.

  오!

  굉장히 구미가 당겼다.
  외부 디자이너나 개발자를 만날 수 있다니. 신기해! 어떤 사람들과 함께 할 수 있을까, 매우 기대되고 궁금해졌다. 나는 회사에서 설레발을 치기 시작했고, 급기야 회사 분들을 동참시키는데 성공했다. 주위분들의 반응은 걱정반, 응원반이었던 것 같다. 스터디가 기대 이하일 수도 있기 때문에 혹시 내가 실망할까봐 걱정해주셨던 분들도 계셨던 것 같다. 하지만 많은 응원과 격려에 힘을 받아 스터디에 참여할 수 있게 되었다.

  첫 주부터 두근두근 마음이 떨렸다. 어떤 사람들이 올까도 궁금했고, 진희님도 볼 수 있겠구나 싶었다.
  실제로 진희님은 생각보다 차분한 목소리로 말씀하시는 분이었다. 20명 정도의 인원 모집 후, 첫 주에 출석한 사람은 대략 12명이었다. 이 때 우리 회사에서 스터디에 참여하게 된 사람은 나 그리고 한 은정 과장님, 강 경미씨, 송 경희씨 이렇게 4명이었다. 다른 회사 사람들 중엔 회사에서 강제적으로 보내어진 사람들도 있었고, 실버라이트 코리아에서 시삽으로 활동 중인 사람, 훈스닷넷 지점장이라는 사람, 그 외에 실버라이트와 WPF에 관심이 많은 사람들... 이 있었다. 팀은 3개 조로 나뉘어져, 나와 한 은정 과장님, 강 경미씨와 송 경희씨로 각각 팀이 갈라지게 되었다.

  드디어 협업이구나!

  라는 생각에 나는 의지가 불타올랐다. 운 좋게 내가 조장으로 뽑히게 되었고, 첫 주 주제를 위해 사람들과 모여 의견을 나누기 시작했다. 우리 팀엔 실버라이트 코리아에서 시삽을 맡고 있다는 디자이너분이 계셔서 더욱 더 활발하게 의견 교환을 할 수 있었다. 회의 시간이 그리 길지 않았기 때문에 대충 큰 방향에 대한 아이디어만 교환하고, 다음 날 오프라인 모임을 가져 다시 논의하기로 하고 헤어졌다.

  그리고 다음 날, 우리 팀은 다시 모여 2시간 동안의 기획 회의 시간을 가졌다. 던킨 도넛 가게 안에서 도넛을 씹으며... 쏟아져나오는 아이디어들, 그리고 의견 마찰, 그 과정에서 협의. 조금 흥분했던 것도 같고, 나름 열띤 토론을 거쳤던 것 같다.
  결국 우리 팀의 주제는 "고스톱 패를 이용하여 시계 가젯을 만들자" 로 정해졌다. 고스톱 패가 숫자를 나타내는 점을 이용하여 시계를 만들면 재미있는 아이디어가 될 것이다 라는 것이 우리 팀원들의 결정이었다. 주제가 정해지고, 필요한 기능들이나 애니메이션들을 나열하자 대략 머릿 속에서 결과물이 상상되었다.
  예를 들어, 우리 팀의 디자이너 분들께서 화면을 '종이 모서리를 잡고 들어올리며 벗기기' 식으로 애니메이션을 넣어 전환시키자고 하거나, 카드 패에 들어갈 애니메이션, 알람 시계 기능 추가 등의 아이디어를 제시하고, 나와 다른 개발자 분은 어떤 기능이 필요하고 어떻게 될 것인지에 대해 의견을 내놓는 식이었던 것 같다. 이렇게 1시간의 회의를 마치고, 마지막으로 간략한 구조를 스케치 플로우에서 작성해봄으로써 저녁 8시부터 10시까지의 계획회의는 그렇게 끝났다. 회의를 마치고 돌아오면서 나는 토론을 벌이며 있었던 마찰의 순간을 떠올렸다. 과연 내가 잘 해낼 수 있을까 하고 걱정이 되었지만, 정신차리고 잘 해야지! 라는 마음으로 그 걱정을 밀어냈다.

  바로 그 다음 날, 전 날의 계획회의 내용과 1주차 스터디에 있었던 사항들을 정리하여 팀원들에게 메일을 전송하였다. 이 일은 나에게 있어서 새로운 업무가 되었고, 매주마다 불참하는 팀원들을 위해 메일을 전송하게 되었다.

  1주차 메일 전송 내용

안녕하세요, A조 개발자 박경민입니다.
(이 멘트 너무 여러 번 해서 식상하실 듯...)

어제 오프 모임 관련 사항 및 여러 공지 사항들이 있어 이렇게 메일을 보냅니다.

우선,

1. 3/31 오프 모임

어제 저녁 사당역 4번 출구 던킨 도넛 가게 구석에 모여 8시 조금 넘은 시각부터 9시까지 A조 팀명과 UI 기획 관련 내용들을 얘기를 했었습니다.
우선 팀명은 우리 팀 프로젝트의 주제에 맞춰, "아싸! 고도리"로 정해졌고 그 이외에는
기본 기능 및 스펙에 대한 것들이었는데요.

주제는 고스톱 시계로 정해져, 기본 기능에 사용자의 취향에 따라 시계의 모양(이미지)을 고스톱 뿐만 아니라 트럼프 카드로 바꿀 수 있도록 하자는 얘기가 있었습니다.
또한 알람 기능을 추가하여, 최대한 가볍고 쉽고 빠르게 알람 시간을 설정할 수 있도록 하자는 얘기가 있었습니다.

그 외 추가 의견은, 알람이 울렸을 때 1분 후 다시 울림, 5분 후 다시 울림, 10분 후 다시 울림 설정 화면을 추가하자는 의견도 있었으나, 이것은 프로젝트 진행 속도를 보아 판단하는 게 더 좋을 것 같습니다.
애니메이션 관련 얘기들은 사용자가 버튼에 마우스를 올렸을 때, 효과를 주는 것과 각 화면으로 이동할 때 나타나는 화면 전환 효과에 대한 것이 있었습니다.
이러한 토론들을 모두 정리하고 9시부터 10시까지 스케치 플로우를 이용하여 기본틀을 잡았습니다.

어제 작업한 기본틀이 있는 스케치 플로우는 첨부 파일로 추가하여 보내니, 확인하여 주시고 이제 개별과제에 관하여 말씀드리겠습니다.
개별 과제 내용은 첨부한 기획 프로젝트에 따라 기본 구조를 본인이 직접 스케치 플로우를 이용하여 제작하고 기본 구조에서 크게 벗어나지 않는 한에서 본인의 아이디어를 추가하는 등의 작업을 해주시면 됩니다.
우선 버튼은 세 가지 종류가 있는데, 고스톱 화면으로 이동하는 버튼, 트럼프 카드 화면으로 이동하는 버튼, 알람 시간 설정 화면으로 이동하는 버튼 세 가지가 있어 버튼을 클릭하면 각 버튼에 관련한 페이지로 이동할 수 있도록 해주시면 됩니다.
그리고 각 페이지로 이동할 때 나타나는 화면 전환 효과로는 다음에 나타날 화면이 위에서 아래로 이동하여 나타나는 식으로 해주시면 될 것 같습니다.
위에서 아래로 이동하는 애니메이션 외에 본인의 새로운 아이디어가 있으시면 그 아이디어로 구현해주셔도 됩니다.

시한은 월요일까지이고, 월요일 저녁 9시에 네이트온에 모두 접속하여 서로의 결과물을 교환하고 의견을 주고 받는 시간을 갖기로 하였습니다.

어제 진행을 하면서 제 스스로 부족한 점이 많았던 것 같은데 이해해주려고 하시는 우리 팀원 분들에게 감사했습니다. (폭풍눈물)

이 외에 다른 의견이나 의문 사항들이 있으시면 네이트온이나 문자로 말씀해주세요 ^-^)


2. 다음 주 화요일

다음 주 화요일에는 이 찬헌님께서 개인 사정으로 스터디에 참가하실 수 없다 하십니다. 참고해주세요 ^-^)

3. 위젯에 대해서

제가 위젯에 대한 기본 지식이 없어 검색해 본 결과 어느 분의 블로깅을 보게 되었습니다.
http://shoner.pe.kr/187

이 곳에 가시면 포스팅하신 분이 직접 만든 위젯에 대한 정보가 있는데, 위젯에 대한 사이즈에 대해서 좀 논의를 해야하겠다는 생각이 드네요.
글을 쓰신 분은 width를 125로 주셨기에 제 윈도우 화면을 스샷해서 사이즈를 확인해본 결과 width가 125쯤 되더라구요.

현재 스케치 플로우는 사이즈가 350*150이기 때문에 현실적으로 사이즈가 많이 오버되는 것 같습니다.

위젯이 사이즈 제한이 확실한 건지 분명하지 않지만, width 125를 기준으로 잡아야 하지 않을까 하는 게 제 생각입니다.

이상 모든 공지 내용을 다 말씀드렸구요 ^-^)
오늘 비가 축축히 와서 믕글믕글하지만 좋을 하루 보내시길 바랍니다.

아싸! 가오리 화이팅!

추신 : 저희 팀에 대한 내용은 오늘 일을 마친 후, 저녁 7시 이후쯤에 devndesign 카페에 올릴 예정입니다.


  문제는, 항상 메일을 전송할 때마다 실수를 한다는 것이다.

  파일을 첨부하지 않은 채로 전송한다거나 우리팀은 앗싸! 고도리! 인데, 앗싸! 가오리! 로 내 맘대로 바꾼다거나... 하는 식의 실수를 연발하였다.
  메일 발송 때마다 연발하는 나의 실수를 우리 팀원분들은 1-2주가 지나자 너그럽게 이해해주셨다. 우리 팀의 다른 개발자 분(이찬헌님)께선 심지어 '메일을 쓰면서 좀 흥분하셨구나.' 라고 생각해주셨다고 한다. ... oTL (헤헤)

  우리 팀의 1주차 개별과제는 계획회의 내용을 토대로 각자 스케치 플로우로 구조를 잡아보자였다. 주말을 이용하여 나는 오랜만에 스케치 플로우 프로젝트를 생성하여 간략적인 구조를 만들기 시작했다. 기획용 프로그램으로 코드를 썼다고 하면 왠지 부끄러운 일인 듯한 느낌이 들어서 내가 원하는 형태의 애니메이션같은 경우에는 Behavior형태로 만들어서 붙였다. (그게 그건가...) 코드 쓴거 아니냐고 누가 물어보면, 그냥 dll참조로 갖다 붙인거다 라는 식으로 잡아뗄 생각이었다. (헤헤) 

 
스케치 플로우란, 특정 프로그램을 위한 기획용 프로그램이다. 실제 프로그램을 만들기 전에 UI나 기능에 대해 외부에 설명이 필요한 경우, 실제 만들어질 프로그램의 기능과 흡사하게 또는 예측이 되는 정도로 작성할 수 있도록 해주는 프로그램이다.
저작자표시 비영리 변경금지

'Tech' 카테고리의 다른 글

[블렌드 스터디를 마치며...5]  (1) 2010.05.11
[블렌드 스터디를 마치며...4]  (0) 2010.05.11
[블렌드 스터디를 마치며...3]  (0) 2010.05.11
[블렌드 스터디를 마치며...2]  (0) 2010.05.11
Posted by 알 수 없는 사용자
Tech/Silverlight2010. 4. 21. 20:28

[Silverlight 함수를 Javascript에서 호출]



Silverlight 함수 중에서 Dictionary를 매개변수로 받는 함수 호출 하는 법에 대해 글을 쓰겠습니다.

우선 Silverlight 응용 프로젝트를 생성하신 후,
간단하게 생성자에서

HtmlPage.RegisterScriptableObject("slInternal", this);
 
을 호출합니다.
HtmlPage.RegisterScriptableObject이 하는 역할은 JavaScript 코드의 스크립트 가능한 액세스 기능을 위해 관리되는 개체를 등록합니다.
즉, slInternal이라는 이름으로 this라는 객체를 JavaScript 코드에서 접근 가능하도록 등록해준다는 말입니다.
 
그리고, 이제 JavaScript에서 호출한 함수를 작성해줍니다.
 
1
2
3
4
5
6
7
8

[ScriptableMember]
public void ShowDictionaryPair(Dictionary<string, int> stringDict)
   {
       foreach (var pair in stringDict)
       {
            MessageBox.Show(pair.ToString());
       }
   }
JavaScript에서 호출할 함수를 작성할 때에는 꼭 [ScriptableMember]를 함수 정의 전에 써 줍니다.
저는 Dictionary를 매개변수로 받아서 foreach문을 돌면서 Dictionary에 있는 Key와 Value를 MessageBox를 통해 보이도록 함수를 만들었습니다.

자 이제, JavaScript가 있는 곳으로 이동해 볼까요.
.Web 프로젝트의 속성에 들어가서 웹 태그에 특정 페이지로 설정되어진 .html이나 .aspx파일을 확인한 후,
그 페이지로 들어가서 작업하시면 됩니다.

우선 하단에 있는 Body 태그를 확인하시고, Object 태그에 id 속성을 추가하여 정의해주세요.
바로 요렇게 말입니다.

<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%" id="silverlightControl">
저는 silverlightControl이라고 정의하였습니다.
그리고 Load가 되면 silverlight에서 정의한 함수를 호출하도록 하겠습니다.
Param 태그에 이벤트 함수를 추가해주세요.
바로 요렇게 말입니다.
 
<param name="onLoad" value="onSilverlightLoad" />
 
그 후에, 상단으로 올라가셔서 대략 onSilverlightError이벤트 함수가 정의된 곳에서 onSilverlightLoad이벤트 함수를 추가해주시면 됩니다.
 
1
2
3
4
5
6

function onSilverlightLoad(sender, args) {
    var slObj = document.getElementById("silverlightControl");
        var dict = slObj.content.slInternal.createManagedObject("Dictionary<string, int>");
        dict["Color"] = 1;
        slObj.content.slInternal.SayHelloToMe(dict);
    }
slObj에 아까 object 태그에 id로 정의했던 silverlightControl을 getElementById함수를 이용하여 호출한 뒤,
createManagedObject함수를 이용하여 Dictionary를 생성해주세요.

주의할 점은 Javascript에서 생성할 수 있는 Dictionary는 항상 Key의 Type이 string이여야 합니다.

그 후에, 생성한 Dictionary 객체에 원하는 아이템을 설정한 후,
silverlight에서 정의했던 함수를 호출해주시면 됩니다.

그러면 이제, 디버깅을 해보면!




Good Job!!
저작자표시 비영리 변경금지

'Tech > Silverlight' 카테고리의 다른 글

[Silverlight MEF - Export UserControl]  (2) 2010.06.02
[Silverlight MEF - Dynamic XAP Loading]  (1) 2010.05.12
[Silverlight Custom Font 적용]  (0) 2010.01.12
Custom Animation in Silverlight  (1) 2010.01.06
Posted by 알 수 없는 사용자
Tech/닷넷 일반2010. 3. 16. 19:23

[코드 주석 문서화하자]


우엉 코드 주석 문서화 컴파일 작업 한 번 하려는데 이렇게 힘들 줄이야! 피눈물 쥘쥘입니다...

일단 =ㅅ=) 코드 주석 문서화에 필요한 모든 유틸들을 최신버전으로 받는 것이 좋습니다.
최신버전들끼리 호환이 되고 있기 때문에 직접 프로그램을 제공하는 사이트를 찾아서 다운로드 받는 것이 제일 현명합니다.

이제부터 차근차근 프로그램들을 설치해보아요.

 주의 사항 : 설치 폴더는 항상 C:\Programfiles\로 설정하세요.



1. HTML Help Workshop 설치
HTML Help Workshop 다운로드

위의 경로를 따라 다운로드 페이지에 가셔서 "Download Htmlhelp.exe"를 클릭하셔서 설치파일을 저장하고 설치하도록 하세요.



위의 사진처럼 핑크색으로 박스쳐진 부분을 클릭하시면 됩니다. ^-^)v


2. SandCastle 설치
SandCastle 다운로드

위의 경로를 따라 다운로드 페이지에 가셔서 우측의 "Download"라고 쓰여진 녹색 버튼을 클릭하셔서 설치파일을 저장하고 설치하도록 하세요.
(구 버전의 SandCastle은 언어 속성 중에 Korea가 없을 수도 있으므로, 확인해주세요. 최신 버전은 이미 한국어가 추가되어 있어 따로 설정이 필요없습니다.)


3. SandCastle Help File Builder 설치
SandCastle Help File Builder 다운로드

위의 경로를 따라 다운로드 페이지에 가셔서 우측의 "Download"라고 쓰여진 녹색 버튼을 클릭하셔서 설치파일을 저장하고 설치하도록 하세요.

여기까지 하셨다면 .chm포맷으로 Help file을 생성하는 필요 프로그램들이 준비된 것입니다.

이제 SHFB가 설치된 폴더로 가셔서 "SandcastleBuilderGUI.exe" 를 실행하신 후, 몇 가지 설정들을 해주시면 됩니다.
프로그램이 시작되면 프로젝트를 생성하신 후, "Project Properties"에서 설정들을 수정해주세요.



위의 사진에서처럼 핑크색 박스로 쳐진 탭을 확인하시면 됩니다.

Help file을 .chm형식으로 내보내고 싶은 경우 아래처럼 HelpFileFormat을 HtmlHelp1으로 설정하시면 됩니다.



언어를 한국어로 조정해주시고, VisualStudio2005나 2008버전을 사용하시는 분들은 PresentationStyle을 vs2005로 설정해주시면 됩니다.



임의대로 결과물 출력 경로를 설정해주고 싶은 경우 아래처럼 OutputPath를 본인 마음대로 설정하시면 됩니다.




자! 이제 ProjectProperties 설정은 마쳤습니다. ^ㅁ^)/
이제 우측으로 시선을 돌려주세요!

Project Explorer에 Help file을 뽑아내기 위한 희생양을 추가시킬 시간이 왔습니다.



"Documentation Source"를 우클릭하시면 파일 열기 다이얼로그가 뜨는데요.
유심히 Open file format을 살펴봐주세요.



.dll과 .xml뿐만 아니라 .exe, .sln, .csproj까지 제공합니다!
우왕ㅋ굳ㅋ 구버전에는 없었던지라 이런 서비스까지도 감격에 빠지게 만드네요.
일일이 참조 .dll들을 넣어주는 작업들이 여간 귀찮은 일이 아니었거든요.

.sln을 넣어주면 해결된다는 사실은 매우 감격스런 일이라는 것을 다시 한 번 말씀드려봅니다.

물론 System.Winodws등의 프로젝트 외부에서 제공하는 .dll파일들은 직접 파일을 찾아서 "References"에 추가해주셔야 합니다.


응헝헝헝응앵으아아앙...
이제사 코드 주석 문서화 작업을 시작할 모든 준비가 갖추어졌습니다. ㅠ_ㅠ...

이제 빌드를 시켜주시면 "Build Output"탭이 생기면서 빌드를 시작합니다.
빌드 로그들이 꽈득 채워지는 모습을 보며 흐믓한 표정을 지으시고 계시겠지만, 곧 모니터를 보며 멍한 표정을 짓게 되실 겁니다.
굉 - 장 - 히 오랜 시간동안 빌드가 될 테니까요...
빌드가 되고 있을동안 다른 작업이나 휴식을 가지시는 것이 좋습니다.

오랜시간 견딘 끝에 빌드 완료 메시지가 뜨면 OutputPath로 가셔서 결과물을 확인해보세요!
이쁘장하게 .chm파일이 당신을 향해 미소짓고 있을 것입니다!


요런 눈망울로?


이제 다른 형식으로 Help file 결과물을 만들어보도록 하겠습니다.
.HxS포맷인데요.

이 형식으로 결과물을 만들기 위해선 또 다시 필요한 기능을 설치해야 합니다.

4. Visual Studio 2008 SDK 1.1 설치
Visual Studio 2008 SDK 1.1 다운로드

.chm을 위해서 필요한 것이 HTML Help Workshop이라면, .HxS를 위해서 Visual Studio 2008 SDK 1.1를 설치해 주셔야 합니다.

설치를 다 하셨다면, 다시 SHFB를 실행하셔서 .chm을 생성했을 때와 같은 방식으로 빌드해주시면 됩니다.

단!
"Project Properties"에서 "HelpFileFormat"을 "MSHelp2"로 변경하신 다음에 말입니다.

비교적으로 .chm때보다 .HxS를 생성하기 위한 빌드 시간이 짧은 편입니다.
행복하죠.

.chm은 프로젝트가 크면 클 수록 빌드 시간이 경악스러우니까요.

빌드를 완료한 후, 결과물 폴더를 향해 빠르게 이동하셨겠지만 .HxS파일을 읽을 수가 없습니다. 엉엉앙앙으해해해흐애애앵 ㅠ_ㅠ...
생성한 .HxS파일을 읽기 위해서 Viewer를 다운로드 받으셔야 합니다.

5. H2Viewer 다운로드
H2Viewer 다운로드



위의 사진에 나와있는 "H2Viewer146.zip"을 다운받아 원하는 위치에 압축을 푸시고, "H2Viewer.exe"를 실행하신 후, 적절한 네임스페이스를 선택하시면 아래처럼 실행화면이 뜹니다.



상단에 있는 file탭에서 파일 열기를 클릭하셔서 .HxS파일을 여시면 원하는 결과물을 보실 수 있습니다. ^ㅁ^)/

응어어어어헝헝헝헝 험난한 코드 주석 문서화 작업을 이제 모두 마쳤습니다.

참고로 .chm파일로 배출하시다가 빌드 오류가 발생되면 저처럼 포기하시고 .HxS로 Output하시는 것도 하나의 방법이겠습니다. ㅠ_ㅠ)...

그럼, 이것으로 포스팅을 마칠게요우!
수고하셨습니다! >ㅅ<)/



추신 : Sandcastle을 사용한 간단 문서화 라 하여 공도님의 블로그에도 Sandcastle을 이용한 문서화 방법에 대해 포스팅이 되어있는데요, DocProject라는 것을 설치하여 VisualStudio에서 직접 문서화를 실행할 수 있는 Proejct Template을 제공합니다. 다만, English Only라는 점... 그것도 모르고 설치하고 왜 안되나 끙끙대다 피눈물 쏟았네요.
저작자표시 비영리 변경금지

'Tech > 닷넷 일반' 카테고리의 다른 글

메서드 하나로 .NET 비동기 패턴 연습하기  (0) 2013.09.17
NuGet 패키지 관리자를 이용한 TDD 초기 환경 구축하기  (0) 2013.07.16
ActiveX를 사용하는 닷넷 Windows Service 만들기 (1)  (0) 2010.09.19
Windows Service 프로젝트 만들기  (1) 2010.09.01
Posted by 알 수 없는 사용자
Tech/Silverlight2010. 1. 12. 15:32

[Silverlight Custom Font 적용]


매우 오랜만에 글을 쓰네요 창피창피...

그다지 Font에 관해서 신경을 쓰지 않고 넘어갔었는데, 이번에 디자이너 분들에게 요청을 받은 것이 기회가 되어 Custom Font 적용 방법을 찾아볼 수 있게 되었던 것 같아요.

우선 블렌드에서 Custom Font 적용하는 방법을 알아보도록 하죠.


1. 프로젝트를 생성하고 LayoutRoot의 Background 색상을 지정하고 TextBlock을 추가하였습니다.



2. TextBlock의 FontFamily를 Silverlight 에서 지원하지 않는 폰트로 지정해보겠습니다. 저는 Bradley Hand ITC 폰트를 선택하였습니다.



3. 폰트를 지정한 후, 텍스트 속성에서 몇 가지 작업을 수행해야 합니다.
- 포함을 체크합니다.
- 아니면,글꼴 관리자를 눌러 응용프로그램에 포함할 글꼴로 선택을 해줍니다.




4. 이후에 프로젝트 폴더를 확인해보면 Fonts 폴더가 생성된 것을 볼 수 있을 것입니다.



5. .XAML 파일에 생성된 코드도 확인해보죠 ^-^

<TextBlock Text="Good Day" TextWrapping="Wrap" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="48" FontFamily="Fonts/Fonts.zip#Bradley Hand ITC"/>

다른 건 다 필요없고 FontFamily="Fonts/Fonts.zip#Bradley Hand ITC" 요 부분에 집중해 주세요!
생성된 Fonts 폴더 아래에 압축된 Fonts.zip에 있는 폰트 정보를 설정해주고 있습니다.

으잉? Fonts.zip?
갑자기 왠 .zip 파일일까요.

탐색기로 들어가 직접 프로젝트 폴더를 열어보도록 하죠.



프로젝트 하위 폴더의 Fonts 폴더가 생성되어 있습니다. 하지만 저 폴더를 열어도 Fonts.zip 파일은 없습니다.
obj → Debug 폴더로 경로를 이동하면,



여기에도 Fonts 폴더가 있네요. 한 번 열어볼까요?



옹, 여기에 있었군요. 이 .zip 파일을 열어보면 폰트가 들어있는 것을 확인할 수 있답니다.

자, Custom Font를 적용하였을 경우, 생성되는 결과물들을 확인하였고...
이제 프로젝트를 빌드시킨 후, 실행시켰을 때 본인이 원하는 폰트가 적용되었음을 확인할 수 있을 것입니다.

음... 그런데 한 가지 문제가 더 있습니다.
한글 폰트를 이 방법으로 적용시키려 할 경우, 적용이 쉽게 되지 않음을 알 수 있으실 거에요.

다음과 같이 나눔명조 폰트를 적용시켰을 경우, 생성되는 .XAML 코드는 똑같습니다.

<TextBlock Text="안녕하세요" TextWrapping="Wrap" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="48" FontFamily="Fonts/Fonts.zip#나눔명조"/>

하지만 프로젝트를 빌드한 후, 실행을 시켜봐도 본인이 원하는 폰트가 적용되지 않았음을 확인하게 됩니다.



이 문제의 원인은 FontFamily에 폰트를 적용시킬 때, 한글 이름을 주어서 발생하는 문제입니다.
때문에 해당 폰트의 속성으로 들어가서 자세히 탭에서 영어 이름을 알아내어 적용시켜 주시면 됩니다.



나눔명조의 영어 이름을 알아내었으니 실제 .XAML 코드에 적용시켜 보도록 하죠!

<TextBlock Text="안녕하세요" TextWrapping="Wrap" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="48" FontFamily="Fonts/Fonts.zip#NanumMyeongjo"/>

자~ 이제 빌드하고, 실행시켜보면...



예쁘게 나눔명조 폰트가 적용되었습니다! ^-^)/

이렇게 해당 폰트의 속성창으로 들어가서 영어 이름을 확인하시는 방법도 있지만, 공도씨의 블로그에 가 보시면 폰트의 영어 이름을 검색하여 쉽게 알아낼 수 있는 프로그램이 공개되어 있습니다.
그 프로그램을 다운받아 검색란에 폰트의 이름을 검색하면 영어 이름을 보다 간편하게 알아낼 수 있습니다.
검색 기준 폴더는 윈도우즈 폴더의 Fonts 폴더같고요.

이상 Blend 에서 Custom Font 적용 방법에 대한 글을 마치도록 하겠습니다.

아쟈아쟈아쟈!
저작자표시 비영리 변경금지

'Tech > Silverlight' 카테고리의 다른 글

[Silverlight MEF - Dynamic XAP Loading]  (1) 2010.05.12
[Silverlight 함수를 Javascript에서 호출]  (0) 2010.04.21
Custom Animation in Silverlight  (1) 2010.01.06
Commands in Silverlight with SLExtensions - 2  (0) 2010.01.01
Posted by 알 수 없는 사용자

티스토리툴바