UI디자인을 위해 어떤 방법을 사용하시나요.
연습장에 열심히 그리다 보면 나중엔 지저분해져서 알 수도 없고 레이아웃 좀 바꾸려면 처음부터 다시 그려야 하고, 그래서 포토샵같은 그래픽 프로그램을 써보면 깔끔하고 수정은 편리하지만 처음부터 제공되는 것들이 없으니 하나하나 손으로 그려줘야 하는 불편함이 있죠.

아래에 보이는 사진만큼 깔끔한 디자인을 간단하게 구현할 수 있다면 얼마나 좋을까요
(물론 아래 이미지는 실제로 제작된 것이지요)


아니면 이렇게 해본다면요?
유명한 Gmail 동영상이죠. 이렇게 한다면 레이아웃 하나 그리는데 하루 종일 걸리겠군요.


혹은 이런 도구와 전용 종이를 사용할 수도 있지요.
(이미지는 펀샵에서 퍼왔습니다. 관심 있으신 분들은 http://www.funshop.co.kr 로 방문해보세요)



저도 UI프로그램이 필요해서 찾던 중 우연히 발견한 이것

Balsamiq Mockups 입니다.

간단하게 UI를 그릴 수 있는 프로그램 입니다. 플래시 기반으로 구현되어서 웹이나 데스크탑에서 모두 실행 가능하고 자체 저장기능에(데스크탑의 경우) xml로 export도 가능하고 이미지로 출력 할 수도 있지요.

아주 기본적인 내용부터 웹, 차트, 테이블이라던지, 심지어 아이폰 키보드까지 그릴 수 있습니다.

우선 이 프로그램으로 그린 몇 가지 예제를 보시죠.
- 아이튠즈를 그렸네요.


- 이것은 아이폰 어플 UI입니다.


다들 깔끔하고 이쁘죠.

이 프로그램에선 아래와 같은 컨트롤들을 지원한다고 합니다.
펜으로 슥슥 그린듯한 컨트롤들이 아주 느낌이 좋아요.


이렇게 봐서는 몇 종류 없는것 같은데 실제 사용해 보시면 컨트롤마다 각종 옵션이 제공되고, 자신만의 이미지나 아이콘 등도 넣을 수 있어서 훨씬 다양한 표현이 가능하답니다.


가격은 라이센스당 $79고 볼륨 라이센스등도 제공하는군요. 그리고 잘 읽어보시면 '무료'로 받으실 수 있는 방법도 있답니다 ^^
하지만 그냥 써보고 싶으신 분들은 Try it now만 누르시면 설치라던지 필요 없이 즉시 써 보실 수 있어요.
데스크탑용 데모도 무료로 제공되고요.

웹이나 데모버젼은 저장이 안되지만 xml로 export는 가능하기 때문에 전문적인 작업을 하실것이 아니라면 좀 불편하지만 xml을 노트패드로 저장해 두시면 나중에 import해서 다시 볼 수 있어요. 그려 놓으신 내용만 필요하다면 이미지로 저장도 가능하고요.

더 자세한 내용은 아래 주소에서 확인이 가능하답니다.
http://www.balsamiq.com

지금 당장 연필을 내려 놓으시고 방문해보세요~

어쩔수 없이 쓰고 있지만, 어중간하게 곳곳에서 문제를 일으켜 주시는 플렉스 덕분에 좌우충돌중;;(객체지향은 절반만 지원하고..;;)
TextArea와 달리 X랄 맞게 동작하는 (max)VerticalScrollPosition 때문에 제작.

기본적으로 MSN이나 게임내 채팅창처럼 동작.
1. VBox에 내용이 추가될 때마다 제일 아래로 정렬
2. 내용 확인을 위해 스크롤을 중간으로 이동하면 새로운 메시지가 들어와도 아래로 정렬하지 않음.
3. 스크롤을 제일 아래로 내리면 그 이후로는 다시 아래로 정렬

이벤트 생성했다 지웠다 하는 방법 말고 더 좋은 방법이 있을듯도 한데 귀찮아서 여기까지 -_-;

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="init();" viewSourceURL="srcview/index.html">

    <mx:Script>

        <![CDATA[

            import mx.controls.Text;

            import mx.controls.TextInput;

            import mx.events.ScrollEvent;

            import mx.events.FlexEvent;

           

            public static var UPDATE_EVENT_REMOVED:int = 0;        // 이벤트 없음 혹은 삭제됨

            public static var UPDATE_EVENT_ADDED:int = 1;        // 이벤트 있음

            private var isUpdateEvent:int = VBoxScrollExam.UPDATE_EVENT_REMOVED;

           

            private function init():void {

                // VBox 업데이트 처리할 이벤트 등록

                vb.addEventListener(FlexEvent.UPDATE_COMPLETE, onUpdate);

                isUpdateEvent = VBoxScrollExam.UPDATE_EVENT_ADDED;

 

                // VBox 스크롤을 조작할 처리할 이벤트               

                vb.addEventListener(ScrollEvent.SCROLL, onScroll);

            }

           

            private function onUpdate(event:FlexEvent):void {

                // 스크롤 위치를 아래로 유지

                vb.verticalScrollPosition = vb.maxVerticalScrollPosition;

            }

           

            private function onScroll(event:ScrollEvent):void {

                // UpdateEvent등록이 안된 상태에서, 스크롤 포지션을 아래로 이동하면

                if(isUpdateEvent == VBoxScrollExam.UPDATE_EVENT_REMOVED && event.position >= vb.maxVerticalScrollPosition) {

                    vb.addEventListener(FlexEvent.UPDATE_COMPLETE, onUpdate);

                    isUpdateEvent = VBoxScrollExam.UPDATE_EVENT_ADDED;

                   

                    lblUpdateEventState.text = "UPDATE_EVENT_ADDED";

                }

                // UpdateEvent 등록된 상태에서, 스크롤을 위로 이동하면

                else if(isUpdateEvent == VBoxScrollExam.UPDATE_EVENT_ADDED && event.position < vb.maxVerticalScrollPosition) {

                    vb.removeEventListener(FlexEvent.UPDATE_COMPLETE, onUpdate);

                    isUpdateEvent = VBoxScrollExam.UPDATE_EVENT_REMOVED;

                    

                    lblUpdateEventState.text = "UPDATE_EVENT_REMOVED";           

                }

            }

           

            // 텍스트 추가

            private function onAddItemText(event:MouseEvent):void {

                var t:Text = new Text();

                t.htmlText = "<font color='#ff0000'>텍스트 테스트입니다</font>\n" +

                                "ABCDEFGHIJKLMN\n";

                t.selectable = false;

                t.percentWidth = 100;

                vb.addChild(t);

            }

           

            // 텍스트입력박스 추가

            private function onAddItemTextInput(event:MouseEvent):void {

                var ti:TextInput = new TextInput();

                ti.text = "Text Input";

                ti.percentWidth = 100;

                vb.addChild(ti);

            }

        ]]>

    </mx:Script>

    <mx:HBox>

        <mx:Button label="AddItem(TEXT)" click="onAddItemText(event);"/>

        <mx:Button label="AddItem(TEXTINPUT)" click="onAddItemTextInput(event);"/>

    </mx:HBox>

    <mx:VBox id="vb" height="200" width="280" verticalScrollPolicy="on" horizontalScrollPolicy="off" verticalGap="0" cornerRadius="0" borderStyle="solid">

    </mx:VBox>

    <mx:Label width="250" id="lblUpdateEventState" text="state"/>

</mx:Application>


[실행화면]

해피해킹 키보드를 사고서 몇 년 만에  처음으로 청소를 했다.

키캡이 상당히 깊고, 아래쪽이 직각으로 깍여있어서 키캡을 빼기가 힘들다.
해피해킹 키보드 키캡 빼는 도구만도 따로 팔기도 하는데, 일년에 한번 쓸까말까한 도구를 사기란 아까운 일이다.

따라서 아래처럼 약간 두꺼운 실을 이용하면 경제적이다.
실로 고리를 만들어서 키캡 사이에 끼운 뒤 직각 방향으로 살짝 잡아당기면 쉽게 빠진다.

클립을 U자로 구부려서 하는 사람들도 있던데 키캡 아래쪽에 클립으로 인한 흠이 남는다.
물론 다시 끼우면 보이지 않는 미미한 흔적이지만, 이 비싼 키보드에 상처를 낼 필요는 없지 않겠는가.
(요즘은 그래도 많이 싸졌는데 내가 살때만해도 훨씬 비쌌다)


키캡을 모두 제거한 뒤 먼지를 붓으로 제거하고 키보드 표면과 키캡을 하나하나 닦았다.
그리고는 다시 끼우는데 문제가 발생!!
"무각인 키보드니 하얀건 아무데나 끼워도 되니 수월하네" 라고 생각했던 내 생각과는 다르게 끼우다 보니 울퉁불퉁한게 키들의 높이가 다르다.

이렇게 확 차이가 나는 것부터 거의 차이가 없는 놈들까지;;
그래서 모든 키를 다시 다 빼고-_-;;



키캡을 하나하나 대보며 크기를 재다가 발견한 사실, 키캡 뒷쪽에 A~E까지 알파벳과 숫자가 적혀있었다.
A는 1열, B는 2열,,, 이렇게 하니 쉽게 끝냈다.

다시 새하얗게 변한 내 해피해킹,
30년은 더 써야되니 미리미리 잘 관리해야지ㅋㅋ

'ComputerScience' 카테고리의 다른 글

해피해킹 키보드 청소  (4) 2008.03.18
졸업을 하며,  (0) 2008.03.02
Architectural Styles  (0) 2008.03.02
내 전공~  (0) 2008.01.19
  1. BlogIcon 콩바구니 2008.05.11 03:05 신고

    키캡 실로 빼는방법 잘배웠습니다. 유용한정보 감사합니다 ^^
    저도 그방법으로 제 키보드를 청소했습니다.

    관련글 트랙백 걸고 갑니다.

    • BlogIcon Latino 2008.05.11 14:20 신고

      링크 따라가서 동영상 봤습니다
      그래도 빼는데 상당히 귀찮죠^^
      글에는 그냥 굵은 실이라고 썼는데 저같은 경우는 책만들때 쓰는 코팅된 종이실을 쓴답니다. 일반실보단 딱딱해서 U자 모양으로 구부려 놓으면 따로 핀셋같은 도구를 사용하지 않아도 키캡사이의 공간으로 쏙 들어가지요~

    • BlogIcon 콩바구니 2008.05.11 17:51 신고

      오. 그럼 털실에 풀을 먹인다든지 해서 빴빴하게하여 사용하는 방법이 있겠군요. 그방법이면 더 수월하게 키캡을 뺄수 있겠네요.

      또 하나 배웠습니다. 감사합니다 ^^

  2. preserved flowers 2010.11.06 06:45 신고

    분리할 수도 잇었군여, 신기하네여

수많은 휴학과 군대와 등등... 이제야 힘들게 졸업장을 받았다.
학교에서 배운것을 정리해 보니,

- 쌩기초로는
이산수학
자료구조
프로그래밍실습

- 시스템 분야
컴퓨터 시스템
어셈블리
운영체제
컴퓨터구조
시스템 프로그래밍

- 컴파일러나 언어학 분야
프로그래밍 언어

- 데이타처리 분야
알고리즘
파일처리
데이타베이스
정보처리
산업DB구축

- 네트워크 분야
컴퓨터네트워크
데이타통신
네트워크프로그래밍
정보이론(암호학)
웹서비스컴퓨팅
유비쿼터스통신망

- 소프트웨어공학 분야
시스템분석
소프트웨어 설계
소프트웨어 아키텍쳐/패턴

- 응용분야
윈도우 프로그래밍
게임 프로그래밍(내가 이건 뭐하러 들은건지;;;)
디지털 미디어
IBM컴퓨팅시스템/솔루션

- 인공지능 분야
인공지능 개론 들었다가 드롭-_-a
그 후론 관심없어서 모두 패스

전자공학 분야는 관심밖이어서 들은적도 없고,,


끝까지 학부로 가는 시스템 때문에 수업을 마음대로 골라들을 수 있다는 장점도 있었지만, 막상 끝까지 가보니 이놈저놈 듣는 바람에 한가지 전공도 제대로 못한 것 같기도 하고;;;
하지만 "그럼에도 불구하고" 학부에 교수님이 많고 수업과목이 그만큼 다양하다 보니까 개설되는 전공과목의 절반 조금 더 들은 셈이다.

어려워서 프로그래밍 언어만 듣고 포기한 형식언어-패턴인식-컴파일러 라인을 못 들은게 후회된다고나 할까.
드디어 배움의 끝인가??? 아니면 다른 배움의 시작???


'ComputerScience' 카테고리의 다른 글

해피해킹 키보드 청소  (4) 2008.03.18
졸업을 하며,  (0) 2008.03.02
Architectural Styles  (0) 2008.03.02
내 전공~  (0) 2008.01.19

소프트웨어 유지보수와 재사용에 대한 중요도가 높아지면서, 패턴을 공부하는 사람들이 많아졌다.
그 중 아키텍쳐럴 스타일이라 하면, 보통 패턴이라 불리우는 디자인 패턴보다 좀 더 포괄적인 개념이다. 이 중에는 디자인 패턴과 겹치는 부분도 있지만, 재사용될 수 있는 작은 구조 단위인 디자인 패턴보다는 시스템 전체를 특징짓는 일반적인 개념이라고 할 수 있다.

주로 많이 쓰이는 아키텍쳐 스타일은 다음 10가지 정도로 분류 할 수 있다.

1. Layered Style
2. Model-View-Controller Style
3. Batch Sequential Style
4. Pipe-and-Filter Style
5. Repository Style
6. Blackboard Style
7. Client-Server Style
8. Peer-to-Peer Style
9. Publish-Subscribe Style
10. Broker Style



'ComputerScience' 카테고리의 다른 글

해피해킹 키보드 청소  (4) 2008.03.18
졸업을 하며,  (0) 2008.03.02
Architectural Styles  (0) 2008.03.02
내 전공~  (0) 2008.01.19
거의 7년? 8년? 간 공부한 ComputerScience..
심지어 군대가서도 1년 반동안 프로젝트를 수행했을만큼 질긴 인연
이걸 계속 붙잡고 해야되나 고민하는 중이다.

최근엔 효율적이고도 성능까지 고려한 설계 방법론 분야가 상당히 흥미로워서
아키텍쳐럴 스타일이나 패턴 설계쪽을 가끔 보고 있기는 한데
앞으로 이것을 계속 해야할지 어떨지 회의가 들어서
예전처럼 집중할 수가 없다.

마치 이런느낌??



'ComputerScience' 카테고리의 다른 글

해피해킹 키보드 청소  (4) 2008.03.18
졸업을 하며,  (0) 2008.03.02
Architectural Styles  (0) 2008.03.02
내 전공~  (0) 2008.01.19

+ Recent posts

티스토리 툴바