<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>shallaa&#039;s blog</title>
	<atom:link href="http://www.shallaazm.com/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.shallaazm.com</link>
	<description></description>
	<lastBuildDate>Sun, 08 Jan 2012 15:31:45 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.6</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Singleton: Good or Evil?</title>
		<link>http://www.shallaazm.com/my/example/303/</link>
		<comments>http://www.shallaazm.com/my/example/303/#comments</comments>
		<pubDate>Sat, 07 Jan 2012 10:18:55 +0000</pubDate>
		<dc:creator>shallaa</dc:creator>
				<category><![CDATA[ACTION SCRIPT]]></category>
		<category><![CDATA[ActionScript]]></category>
		<category><![CDATA[shallaa]]></category>
		<category><![CDATA[Singleton]]></category>

		<guid isPermaLink="false">http://www.shallaazm.com/?p=303</guid>
		<description><![CDATA[Singleton usage is commonly considered an anti-pattern in the OOP world. Its static factory method means you can reach the one allowed instance of the class from anywhere in your application. Inappropriate usage can turn your code into spaghetti as every class couples itself to the Singleton rather than get what it needs through a more appropriate actor.]]></description>
			<content:encoded><![CDATA[<p><a href="http://shop.oreilly.com/product/0636920022459.do">ActionScript Developer&#8217;s Guide to PureMVC</a> 책에서.</p>
<blockquote><p>Singleton usage is commonly considered an anti-pattern in the OOP world. Its static factory method means you can reach the one allowed instance of the class from anywhere in your application. Inappropriate usage can turn your code into spaghetti as every class couples itself to the Singleton rather than get what it needs through a more appropriate actor.</p></blockquote>
<p>대략 해석하면.</p>
<blockquote><p>싱글톤 패턴의 사용은 일반적으로 OOP 세계에서 안티 패턴으로 간주됨. 싱글톤의 정적인 팩토리 메소드는 어플리케이션의 어느곳에서든 클래스의 한 인스턴스에 접근할 수 있다는 것을 의미. 부적절한 사용은 스파게티 코드를 만들어 낼 수 있음.</p></blockquote>
<p>라는 이야기.</p>
<p>예전에 as2.0에서 as3.0으로 넘어온 분이 하도 _root를 찾으시길래 Singleton을 보여드리면서 이게 _root 보다 훨씬 기똥찬 거라고 알려드렸던 일이 생각난다. ㅎㅎ</p>
<p>그 분이 작업하신 것은 아니지만 전체 Class들이 다 Singleton으로 되어있는 황당한 소스도 본 적이 있다.</p>
<p>나부터도 도저히 이해가 안가는 신기한 소스를 받아서 손봐야 할때는 애용하기도 했다.</p>
<p>이게 그러니까&#8230;</p>
<p>적절하게 한방 놓으면 그보다 좋을 수가 없는데 과하거나 엄한 곳에 쓰면 전체 소스의 신뢰가 땅에 떨어지는. 뭐 그런.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.shallaazm.com/my/example/303/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>IDropInListItemRenderer, BaseListData</title>
		<link>http://www.shallaazm.com/my/example/274/</link>
		<comments>http://www.shallaazm.com/my/example/274/#comments</comments>
		<pubDate>Tue, 14 Dec 2010 07:52:29 +0000</pubDate>
		<dc:creator>shallaa</dc:creator>
				<category><![CDATA[ACTION SCRIPT]]></category>
		<category><![CDATA[ActionScript]]></category>
		<category><![CDATA[BaseListData]]></category>
		<category><![CDATA[IDropInListItemRenderer]]></category>
		<category><![CDATA[shallaa]]></category>

		<guid isPermaLink="false">http://www.shallaazm.com/?p=274</guid>
		<description><![CDATA[IDropInListItemRenderer 인터페이스를 사용하면서 구현해 주어야 할 것은 get/set 메소드 하나밖에 없다.
set함수에서는 BaseListData 타입의 값을 넘겨주고 있다.
BaseListData 클래스에는 4개의 속성이 있다.]]></description>
			<content:encoded><![CDATA[<p>뭔가.. itemRenderer를 만드려고 한 것 같은데&#8230;<br />
컴포넌트 안에 이런 식으로 반복적으로 소스가 들어있었다.</p>
<pre class="brush: as3; title: ; notranslate">

var targetDataGrid:AdvancedDataGrid = this.parent.parent.parent as AdvancedDataGrid;
if (targetDataGrid == null) {
    targetDataGrid = this.parent.parent as AdvancedDataGrid;
}
trace(&quot;targetDataGrid&quot;+targetDataGrid);
if (targetDataGrid == null) {
    return;
}
</pre>
<p>이게 제대로 작동하는지도 잘 모르겠지만..;; 일단 눈에 보기부터 너무 거슬리는 코드다.<br />
itemRenderer에서 AdvancedDataGrid에 접근을 하려는 의도였던 것 같은데.. 이런 식으로 뭐가 떨어질지도 모르는 parent.parent.. 식으로 null체크 하면서 찾아 들어가기 보다는 IDropInListItemRenderer 인터페이스를 구현하는 것을 추천한다.<br />
IDropInListItemRenderer 인터페이스를 찾아보면</p>
<pre class="brush: as3; title: ; notranslate">

public function get listData():BaseListData
public function set listData(value:BaseListData ):void
</pre>
<p>참고: <a href="참고: http://flexdocs.kr/docs/flex2/langref/mx/controls/listClasses/IDropInListItemRenderer.html" target="_blank">http://flexdocs.kr/docs/flex2/langref/mx/controls/listClasses/IDropInListItemRenderer.html</a></p>
<p>인터페이스를 사용하면서 구현해 주어야 할 것은 get/set 메소드 하나밖에 없다.<br />
set함수에서는 BaseListData 타입의 값을 넘겨주고 있다.<br />
BaseListData 클래스에는 4개의 속성이 있다.</p>
<blockquote><p><span style="color: #0000ff;">label:String</span> 리스트 클래스의 itemToLabel() Methods에 근거한 아이템 데이터의 텍스트 표현입니다.<br />
<span style="color: #0000ff;">owner:IUIComponent</span> 이 아이템을 소유하는 리스트 object에의 참조입니다.<br />
<span style="color: #0000ff;">rowIndex:int</span> 데이터 프로바이더내의 아이템의 인덱스입니다.<br />
<span style="color: #0000ff;">uid:String</span> 이 아이템의 일의의 식별자입니다.</p></blockquote>
<p>참고: <a href="http://flexdocs.kr/docs/flex2/langref/mx/controls/listClasses/BaseListData.html" target="_blank">http://flexdocs.kr/docs/flex2/langref/mx/controls/listClasses/BaseListData.html</a></p>
<p>이 중에 owner속성이 itemRenderer가 속한 AdvancedDataGrid 객체이다.<br />
대략 보면</p>
<pre class="brush: as3; title: ; notranslate">

private var _listData:BaseListData;
private var _dataGrid:AdvancedDataGrid;
private var _dataField:String;
private var _dataProvider:ArrayCollection;

public function get listData():BaseListData
{
    return _listData;
}

public function set listData(value:BaseListData):void
{
    if (value == null) return;

    _listData = value;
    _dataGrid = value.owner as AdvancedDataGrid;
    _dataField = (value as AdvancedDataGridListData).dataField;

    _dataProvider = _dataGrid.dataProvider as ArrayCollection;
}
</pre>
<p>이런 식으로 사용이 가능하다.<br />
AdvancedDataGrid에 접근한 이후에는 dataProvider라던지 기타 속성에 얼마든지 접근할 수 있다. 특히 자주 쓰이는- AdvancedDataGrid에 CheckBox를 itemRenderer로 사용하는 경우 등등에 매우 유용하다.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.shallaazm.com/my/example/274/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Kick-Off Meeting</title>
		<link>http://www.shallaazm.com/my/uiux/139/</link>
		<comments>http://www.shallaazm.com/my/uiux/139/#comments</comments>
		<pubDate>Tue, 27 Jul 2010 08:56:10 +0000</pubDate>
		<dc:creator>shallaa</dc:creator>
				<category><![CDATA[UI/UX]]></category>
		<category><![CDATA[Kick-Off Meeting]]></category>
		<category><![CDATA[shallaa]]></category>
		<category><![CDATA[UI / UX]]></category>

		<guid isPermaLink="false">http://www.shallaazm.com/?p=139</guid>
		<description><![CDATA[프로젝트가 수주된 후에 프로젝트 팀과 클라이언트가 처음 만나 팀과 클라이언트의 구성원을 소개하고 각 구성원의 역할을 논의하는 회의를 말한다.
기본 형식은 이해관계자로부터 역할의 정의, 클라이언트를 포함 기타 기본 요소(일정, 상태 보고서)등에 대해 논의한다.

위험과 관련된 문제 -특히 일정에 영향을 미칠 수 있거나, 고객 만족도 감소로 이어질 수 있는 부분-에 대해 이해관계자로부터 명시적으로 언급함으로써 어떤 해결방안이 필요한지 상의할 수 있다.

품질 기준을 유지하기 위해 새로운 팀 구성원에게 설명이 필요할 경우, 프로젝트의 리더가 명료이 설명해 준다.

프로젝트 팀은 프로젝트의 목표, 일정, 프로젝트에 관한 지식 등을 보여줌으로써 고객들의 신뢰를 얻을 수 있다.]]></description>
			<content:encoded><![CDATA[<p><img class="aligncenter size-full wp-image-151" title="kickoff" src="http://www.shallaazm.com/blog/wp-content/uploads/2010/07/kickoff.jpg" alt="kickoff" width="360" height="297" /></p>
<p><strong>What</strong></p>
<p style="padding-left: 30px; ">프로젝트가 수주된 후에 프로젝트 팀과 클라이언트가 처음 만나 팀과 클라이언트의 <span style="color: #3366ff;">구성원을 소개</span>하고 <span style="color: #3366ff;">각 구성원의 </span><span style="color: #3366ff;">역할을 논의</span>하는 회의를 말한다.</p>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">프로젝트의 프로젝트 팀과 클라이언트가 처음만나 프로젝트 팀과 클라이언트의 구성원을 소개하고 각 팀 구성원의 역할을 논의하는</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">회의를 말한다.</div>
<p><strong>Why</strong></p>
<p style="padding-left: 30px; ">기본 형식은 이해관계자로부터 <span style="color: #3366ff;">역할의 정의,</span> 클라이언트를 포함 기타<span style="color: #000000;"> </span><span style="color: #000000;">기본 요소(일정, 상태 보고서)등에 대해 논의</span>한다.</p>
<p style="padding-left: 30px; "><span style="color: #3366ff;">위험과 관련된 문제</span> -특히 일정에 영향을 미칠 수 있거나, 고객 만족도 감소로 이어질 수 있는 부분-에 대해 이해관계자로부터 명시적으로 언급함으로써 어떤 해결방안이 필요한지 상의할 수 있다.</p>
<p style="padding-left: 30px; ">품질 기준을 유지하기 위해 새로운 팀 구성원에게 설명이 필요할 경우, 프로젝트의 리더가 명료이 설명해 준다.</p>
<p style="padding-left: 30px; ">프로젝트 팀은 프로젝트의 목표, 일정, 프로젝트에 관한 지식 등을 보여줌으로써 고객들의 신뢰를 얻을 수 있다.</p>
<p><strong>Procedure</strong></p>
<p style="padding-left: 30px; ">1) Introduction of meeting participants</p>
<p style="padding-left: 60px; ">팀과 클라이언트의 구성원을 소개한다.</p>
<p style="padding-left: 30px; ">2) Project Review</p>
<p style="padding-left: 60px; ">Purpose of the project</p>
<p style="padding-left: 60px; ">Scope</p>
<p style="padding-left: 60px; ">Major deliverables</p>
<p style="padding-left: 60px; ">Risks</p>
<p style="padding-left: 60px; ">Assumptions</p>
<p style="padding-left: 60px; ">Estimated effort, budget and duration</p>
<p style="padding-left: 60px; ">목표와 범위, 중요한 산출물, 위험요소들 , 가정과 어느정도의 일정들이 포함된다.</p>
<p style="padding-left: 30px; ">3) Roles and responsibilities</p>
<p style="padding-left: 60px; "><span style="color: #3366ff;"><span style="color: #000000;">역할</span><span style="color: #000000;">(</span></span><span style="color: #000000;">이슈, 의사소통의 핵심 역할 등</span><span style="color: #000000;">)</span>과  <span style="color: #3366ff;"><span style="color: #000000;">책임</span><span style="color: #000000;">(</span></span><span style="color: #000000;">유지보수의 책임 등</span><span style="color: #000000;">)</span>에 대해서 이야기한다.</p>
<p style="padding-left: 30px; ">4) Project approach and overall timeline</p>
<p style="padding-left: 60px; ">진행방법과 타임라인에 대해서 이야기한다.</p>
<p style="padding-left: 30px; ">5) Questions</p>
<p style="padding-left: 30px; ">6) Recap / summary</p>
<p><strong>How</strong></p>
<p style="padding-left: 30px; "><strong>1. 사이트의 목적/ 비전에 대한 정의</strong></p>
<p style="padding-left: 30px; "><strong>2. 사이트의 개발 목표</strong></p>
<p style="padding-left: 60px; "><span style="color: #3366ff;">사용자 관점</span>에서의 만족도.</p>
<p style="padding-left: 60px; "><span style="color: #3366ff;">클라이언트 관점</span>에서의 만족도.</p>
<p style="padding-left: 30px; "><strong>3. 대상과 목표에 대한 정의</strong></p>
<p style="padding-left: 60px; "><span style="color: #3366ff;">누가</span> 이 사이트를 이용하는가? (사용자 분석- 나이, 경험, 교육 등&#8230;)</p>
<p style="padding-left: 60px; "><span style="color: #3366ff;">왜</span> 이 사이트를 방문하는가? (필요, 흥미, 목적)</p>
<p style="padding-left: 60px; "><span style="color: #3366ff;">언제 어디서</span> 이 사이트에 접속할 것인가? (사용자 환경)</p>
<p style="padding-left: 60px; "><span style="color: #3366ff;">어떻게</span> 이 사이트에 접속할 것인가? (사용자의 컴퓨터 설정-연결속도, 해상도 등&#8230;)</p>
<p style="padding-left: 30px; "><strong>4. 수행 작업 분석 및 우선 순위 작업 정의</strong></p>
<p style="padding-left: 60px; ">이 사이트에서 <span style="color: #3366ff;">무엇</span>을 할 것인가? (업무, 컨텐츠, 기능&#8230;)</p>
<p style="padding-left: 60px; ">어떤 작업이 사용자에게 <span style="color: #3366ff;">만족</span>을 주는가?</p>
<p style="padding-left: 60px; ">어떤 작업이 사용자에게 가장 <span style="color: #3366ff;">중요</span>한가?</p>
<p style="padding-left: 60px; ">어떤 작업이 가장 <span style="color: #3366ff;">많이</span> 이용될 것인가?</p>
<p style="padding-left: 60px; ">어떤 작업이 <span style="color: #3366ff;">사용성에 있어 이슈</span>가 있을 수 있는가? (취약점)</p>
<p style="padding-left: 60px; ">얼마나 <span style="color: #3366ff;">자주</span> 이용할 것인가?</p>
<p style="padding-left: 60px;"><span style="color: #3366ff;">무엇이 사용자가 이 사이트를 다시 찾게 할 것인가?</span></p>
<p style="padding-left: 30px; "><strong>5. 사용성의 확인</strong></p>
<p style="padding-left: 60px; ">사용자들이 <span style="color: #3366ff;">쉽게 적은 에러로</span> 작업을 완료할 수 있는가?</p>
<p style="padding-left: 60px; ">사용자들이 <span style="color: #3366ff;">능률적으로 빠르게</span> 작업을 완료할 수 있는가?</p>
<p style="padding-left: 60px; ">사이트 <span style="color: #3366ff;">이용 후에</span> 사용자들은 어느 정도의 <span style="color: #3366ff;">만족</span>을 가질 수 있는가?</p>
<p style="padding-left: 30px; "><strong>6. 기대, 요구사항 및 환경 설정에 대한 토론</strong></p>
<p style="padding-left: 30px; "><strong>7. 접근성, 요구사항의 결정</strong></p>
<p style="padding-left: 30px; "><strong>8. 가능한 자원과 요구되는 기술 수준의 정의</strong></p>
<p style="padding-left: 60px; ">사이트를 업데이트 하고 유지하는데 어느정도 수준의 기술인력을 필요로 하는가?</p>
<p style="padding-left: 30px; "><strong>9. 초기 필수 기술의 논의</strong></p>
<p style="padding-left: 30px; "><strong>10. 일정 및 프로젝트 계획</strong></p>
<p style="padding-left: 30px; ">
]]></content:encoded>
			<wfw:commentRss>http://www.shallaazm.com/my/uiux/139/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>One-Window Drilldown</title>
		<link>http://www.shallaazm.com/my/uiux/124/</link>
		<comments>http://www.shallaazm.com/my/uiux/124/#comments</comments>
		<pubDate>Thu, 08 Jul 2010 15:30:58 +0000</pubDate>
		<dc:creator>shallaa</dc:creator>
				<category><![CDATA[UI/UX]]></category>
		<category><![CDATA[designing interfaces]]></category>
		<category><![CDATA[One-Window Drilldown]]></category>
		<category><![CDATA[UI / UX]]></category>

		<guid isPermaLink="false">http://www.shallaazm.com/?p=124</guid>
		<description><![CDATA[윈도우 하나로 애플리케이션의 모든 페이지들을 보여준다. 옵션 메뉴나 오브젝트의 세부 내용으로 들어가면 윈도우 전체가 새로운 페이지로 대체된다.
handheld 디바이스, 휴대폰등의 소형 스크린과 같이 공간적 제한을 가졌거나 마우스가 없기 때문에 한 panel에서 다른 panel로 네비게이션이 어려운 TV와 같은 컨트롤상에 제한이 있는 경우.

복잡함의 정도에 제한을 두어야 하는 경우. 한꺼번에 많은 애플리케이션 윈도우가 열려있는 상황은 능수능란한 사용자에게 마저도 혼란을 야기할 수 있다. 또는 사용자들이 복잡한 스크린이나 미세한 인풋 디바이스를 잘 다루지 못하는 경우도 있다.]]></description>
			<content:encoded><![CDATA[<p><img class="aligncenter size-full wp-image-125" title="ipod" src="http://www.shallaazm.com/blog/wp-content/uploads/2010/07/ipod.gif" alt="ipod" width="500" height="191" /></p>
<p><strong>What</strong></p>
<p style="padding-left: 30px;">윈도우 하나로 애플리케이션의 모든 페이지들을 보여준다. 옵션 메뉴나 오브젝트의 세부 내용으로 들어가면 윈도우 전체가 새로운 페이지로 대체된다.</p>
<p style="padding-left: 30px;">
<p><strong>Use When</strong></p>
<p style="padding-left: 30px;">handheld 디바이스, 휴대폰등의 소형 스크린과 같이 <span style="color: #3366ff;">공간적 제한</span>을 가졌거나 마우스가 없기 때문에 한 panel에서 다른 panel로 네비게이션이 어려운 TV와 같은 <span style="color: #3366ff;">컨트롤상에 제한</span>이 있는 경우.</p>
<p style="padding-left: 30px;"><span style="color: #3366ff;">복잡함의 정도에 제한</span>을 두어야 하는 경우. 한꺼번에 많은 애플리케이션 윈도우가 열려있는 상황은 능수능란한 사용자에게 마저도 혼란을 야기할 수 있다. 또는 사용자들이 복잡한 스크린이나 미세한 인풋 디바이스를 잘 다루지 못하는 경우도 있다.</p>
<p><strong>Why</strong></p>
<p style="padding-left: 30px;">One-Window Drilldown은 <span style="color: #3366ff;">인터페이스를 단순하게 유지</span>해야 할 때 사용된다. 하나의 윈도우에 모든 내용이 포함되어 있고 각 단계의 옵션들이 명확한 경우에는 사용자들이 다른 곳으로 시선을 돌릴 필요가 없다. 오늘날 모든 사람들이 단일 윈도우 내에서 뒤로가기/앞으로가기 페이지 모델을 통해 웹 브라우저를 사용하는 법에 대해서 알고 있다. 링크나 버튼을 클릭할 때는 현재 보고 있는 페이지가 다른 페이지로 대치될 것을 예상하며, &#8220;뒤로가기&#8221;를 클릭할 때는 이전에 있었던 페이지로 돌아갈 것을 기대한다.</p>
<p><strong>How</strong></p>
<p style="padding-left: 30px;"><span style="color: #3366ff;">단 하나의 윈도우</span>만을 사용한다. 윈도우에 비해서 컨텐츠가 너무 크지도 너무 작지도 않게 세련되게 들어갈 수 있도록 panel을 구성한다.</p>
<p style="padding-left: 30px;">panel에서 언더라인 링크, 버튼, 혹은 클릭 가능한 테이블과 같은 요소들이 <span style="color: #3366ff;">다른 공간으로 들어갈 수 있는 &#8220;출입구&#8221;</span>가 된다. 이들 중 하나를 클릭했을 때 <span style="color: #3366ff;">현재의 panel은 새로운 내용으로 변경</span>된다. 이렇게 해서 사용자들은 애플리케이션의 컨텐츠 안으로 더 깊이 뚫고 들어갈(drills down) 수 있다.</p>
<p style="padding-left: 30px;"><span style="color: #3366ff;">뒤로가기/앞으로가기 버튼들을 윈도우 내에 고정된 위치</span><span style="color: #3366ff;">에 놓은다.</span> 일반적으로 브라우저들은 이 버튼들을 상단 왼쪽에 둔다. &#8220;완료&#8221; 혹은 &#8220;취소&#8221; 버튼은 사용자들이 태스크나 선택을 완료하는 panel에 두어야 한다. 이러한 컨트롤은 사용자에게 &#8220;완료된 것을 닫는다.&#8221;라는 인식을 심어 준다.</p>
<p style="padding-left: 30px;">원 윈도우 애플리케이션의 구조는 애플리케이션 구조에 대한 어떠한 그래픽 묘사도, 현재 위치에 대한 정보도 없기 때문에 사용자가 모든 공간을 종합하여 멘탈 그립을 형성해 내는 데 의존하고 있다. 이 패턴은 <span style="color: #3366ff;">단순한 연속적 구조</span> 혹은 <span style="color: #3366ff;">계층적 구조</span>에서 가장 효과적으로 쓰인다. 보조 장치로 Breadcrumbs와 Sequence Maps 패턴을 사용할 수도 있다.</p>
<p style="padding-left: 30px;">특히 Hub and Spoke는 웹과 소형 디바이스에서 One-Window Drilldown 방식을 사용하여 구현되는 패턴이다.</p>
<p style="padding-left: 30px;">
<p><strong>Example</strong></p>
<p style="padding-left: 30px;"><img class="aligncenter size-full wp-image-126" title="osx" src="http://www.shallaazm.com/blog/wp-content/uploads/2010/07/osx.gif" alt="osx" width="632" height="248" />맥 OSX 시스템의 모든 속성 툴은 한 윈도우 안에 들어 있다. 왼쪽에 있는 시스템 속성이 메인 panel이고, 오른쪽의 독이 메인 panel에서 독을 선택하여 들어간 드릴다운 panel이다. 여기에는 오직 한 단계의 드릴다운 panel만이 존재한다. 상단 왼쪽의 &#8220;모두보기&#8221;버튼을 통해 메인 panel로 되돌아갈 수 있다.</p>
<p style="padding-left: 30px;">맥 OS의 화면은 대게 넓은 공간에서 사용되지만 One-Window Drilldown 접근 방법을 선택하는 이유는 공간을 절약하기 위해서가 아니라 속성의 항목들이 많고 서브 panel의 형태가 다양하기 때문이다. 실제로 이 메인 panel은 많은 공간을 차지하고 있다. 만일 One-Window Drilldown 대신에 타일 형식의 <a href="http://www.shallaazm.com/my/uiux/58/" target="_blank">Two-Panel Selector</a> 윈도우를 썼다면 효율적이지 못했을 것이다.</p>
<p style="padding-left: 30px;">
<p style="padding-left: 30px;">
]]></content:encoded>
			<wfw:commentRss>http://www.shallaazm.com/my/uiux/124/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Accessibility</title>
		<link>http://www.shallaazm.com/my/example/77/</link>
		<comments>http://www.shallaazm.com/my/example/77/#comments</comments>
		<pubDate>Tue, 06 Jul 2010 11:17:57 +0000</pubDate>
		<dc:creator>shallaa</dc:creator>
				<category><![CDATA[ACTION SCRIPT]]></category>
		<category><![CDATA[Accessibility]]></category>
		<category><![CDATA[ActionScript]]></category>
		<category><![CDATA[shallaa]]></category>

		<guid isPermaLink="false">http://www.shallaazm.com/?p=77</guid>
		<description><![CDATA[Accessibility를 위해 구현해야 하는 부분은 크게 두가지이다.

키보드만으로 서비스 이용이 가능할 것.
스크린 리더 사용자를 배려할 것.]]></description>
			<content:encoded><![CDATA[<p><img class="aligncenter size-full wp-image-99" title="accessibility" src="http://www.shallaazm.com/blog/wp-content/uploads/2010/07/accessibility.gif" alt="accessibility" width="300" height="293" /></p>
<p><strong>What</strong></p>
<p style="padding-left: 30px; "><span style="color: #3366ff;">시각 장애가 있는 사용자</span>를 위해 <span style="color: #3366ff;">화면 내용을 음성으로 들려주는 스크린 리더</span>와의 통신을 관리하는 클래스.</p>
<p><strong>Use When</strong></p>
<p style="padding-left: 30px; ">웹사이트 이용에 있어 필수인 부분은 필히 Accessibility를 구현해 주어야 하지 않을까? 특히 <span style="color: #3366ff;">swf</span><span style="color: #3366ff;">로 제작되는 네비게이션의 경우에는 필수</span>라고 생각됨.</p>
<p><strong>Why</strong></p>
<p style="padding-left: 30px; ">1. 법률상의 이유</p>
<p style="padding-left: 30px; ">2. 윤리상의 이유</p>
<p style="padding-left: 30px; ">3. 공공봉사의 이유</p>
<p style="padding-left: 30px; ">4. 상업적인 이유</p>
<p style="padding-left: 30px; ">5. 공익적인 이유</p>
<p style="padding-left: 30px; ">
<p style="padding-left: 30px; ">2008년 4월부터 실행된 <span style="color: #3366ff;">장애인 차별 금지법</span>에 의해 웹사이트가 웹접근성에 맞추어 제작되지 않을 경우 처벌함.</p>
<p style="padding-left: 30px; ">2013년 4월 부터는 모든 법인 웹사이트에 장애인 차별 금지법이 적용될 예정.</p>
<p><strong>How</strong></p>
<p style="padding-left: 30px; ">Accessibility를 위해 구현해야 하는 부분은 크게 두가지이다.</p>
<p style="padding-left: 30px; "><span style="color: #3366ff;">키보드만으로 서비스 이용이 가능</span>할 것.</p>
<p style="padding-left: 30px; "><span style="color: #3366ff;">스크린 리더 사용자를 배려</span>할 것.</p>
<p style="padding-left: 30px; ">
<p style="padding-left: 30px; "><strong>1. 키보드 만으로 서비스 이용이 가능할 것.</strong></p>
<p style="padding-left: 60px; ">DisplayObjectContainer 에서 상속된 모든 클래스에는 tabIndex 라는 public 속성이 있다.</p>
<p style="padding-left: 60px; ">탭키를 누르면 tabIndex값이 작은 객체부터 큰 객체까지 순서대로 포커스가 이동한다.</p>
<p style="padding-left: 60px; ">경험적으로 tabIndex는 하나의 클래스에서 일괄관리 하는편이 나은 듯. 예를 들면 메뉴의 데이터를 핸들링하는 클래스에서 tabIndex라는 int타입 변수를 하나 두고 메뉴를 생성할 때마다 숫자를 하나씩 올려주는 방식.</p>
<p style="padding-left: 60px; ">마우스의 클릭 이벤트를 받는 객체에는 필히 키보드 이벤트를 같이 걸어주고 enter 키가 눌러진 경우 클릭 이벤트를 dispatch 해주거나 클릭 이벤트와 동일한 기능을 구현해 준다.</p>
<p style="padding-left: 60px; ">그렇게 되면 장애가 있는 유저는 <span style="color: #3366ff;">탭키로 이동</span>하여 <span style="color: #3366ff;">엔터키로 선택</span>할 수 있다.</p>
<p style="padding-left: 60px; ">탭키로 메뉴를 이동하는 경우 마우스 오버 / 아웃의 경우는 구현이 곤란하게 된다. 예를 들어 마우스를 오버하면 확장되면서 하위메뉴가 나오는 네비의 경우는 구현이 고민 될 수 있다. 하지만 생각을 조금 달리 해보면 오버시 메뉴가 확장되고 하위메뉴를 바로 선택한다는 개념은 눈이 보이는 사람의 경우에는 맞지만 눈이 안보이는 사용자에게는 오히려 혼란이 될 수 있다. 탭키로 대메뉴를 이동하고 선택된 메뉴의 페이지에서만 확장해서 하위 메뉴를 보여주는 것이 맞다.</p>
<p style="padding-left: 60px; ">마찬가지로 혼란을 피하기 위해 선택되지 않는 하위메뉴 객체의 경우는 visible을 확실히 꺼주는게 좋다. visible을 꺼주면 tabIndex 값에 상관없이 포커스를 받지 않는다.</p>
<p style="padding-left: 60px; ">
<p style="padding-left: 30px; "><strong>2. 스크린 리더 사용자를 배려할 것.</strong></p>
<p style="padding-left: 60px; ">Accessibility 클래스를 사용한다.</p>
<p style="padding-left: 60px; ">Accessibility가 기능을 하기 전에 Flash Player에서 스크린 리더에 연결할 수 있는 <span style="color: #3366ff;">1~2초간의 지연 시간</span>이 필요하다. setTimeout 메소드를 이용해 2초의 딜레이를 준 후에 Accessibility의 active 속성을 이용해 스크린 리더가 사용가능한지 여부를 체크한다. Accessibility의 속성이나 메소드등은 정적이므로 인스턴스를 생성할 필요가 없다. <span style="color: #3366ff;">Accessibility.active</span> 속성은 스크린 리더가 사용가능할 경우에 true를 리턴한다. true가 리턴된 경우(스크린 리더 사용가능) Accessibility클래스의 <span style="color: #3366ff;">updateProperties</span> 메소드를 호출해 스크린 리더에 엑세스 가능성 변경 사항을 업데이트 해준다. updateProperties 메소드의 경우는 한번만 호출해 주면 된다. 여러번 호출하면 성능이 떨어진다고 함.</p>
<p style="padding-left: 60px; ">스크린 리더에 의해 읽혀질 내용을 객체의 accessibilityProperties 속성에 설정해 주어야 한다. 모든 DisplayObject 에서 상속된 클래스에는 accessibilityProperties라는 AccessibilityProperties타입의 속성이 있다. AccessibilityProperties타입의 객체를 생성한 후에 생성된 객체의 name속성에 스크린 리더에서 읽혀질 내용을 설정해 주고 스크린 리더에 의해 읽혀질 객체의 accessibilityProperties속성에 설정해 준다. 스크린 리더 프로그램을 설치, 실행한 후에 탭키를 이용해 객체에 포커스를 옮기면 스크린 리더가 설정한 name 속성의 글을 읽어주는 것을 볼 수 있다.&#8217;</p>
<p style="padding-left: 60px; ">참고로 무료 스크린 리더기를 찾는 것도 쉽지 않았다. (Accessibility 관련해서는 자료가 별로 없는 편인 듯) 검색창에 &#8220;소리눈&#8221;을 검색하면 관공서 게시판에 올려진 스크린 리더 프로그램(소리눈)을 받을 수 있다. 제작사 사이트는 문을 닫은 듯(?)</p>
<p style="padding-left: 60px; ">덧붙여- swf를 html에 붙일때 wmode param값이 transparent(배경투명)이면 스크린 리더가 작동하지 않는다. 필히 window(default)로 처리할 것.</p>
<p><strong>Example</strong></p>
<p style="padding-left: 30px;">1. 메인 클래스에서</p>
<pre class="brush: as3; title: ; notranslate">
private function init():void {
    setTimeout(updateAccessibility, 2000);
}

private function updateAccessibility():void {
    if (Accessibility.active)
        Accessibility.updateProperties();
}
</pre>
<p style="padding-left: 30px;">2. 데이터를 처리하는 클래스에서</p>
<pre class="brush: as3; title: ; notranslate">
private var _tabIndex:int;

public function getMenuDatas():Array {
    var i:int, len:int = sampleDatas.length();
    var menuData:MenuData;
    var menuDatas:Array = [];

    for (i = 0; i &lt; len; i++) {
        menuData = new MenuData();
        menuData.name = sampleDatas[i][&quot;@name&quot;];
        menuData.tabIndex = _tabIndex++;
        menuDatas.push(menuData);
    }

    return menuDatas;
}
</pre>
<p style="padding-left: 30px;">3. 실제 스크린 리더에서 읽혀질 객체의 클래스에서</p>
<pre class="brush: as3; title: ; notranslate">
private function initListener():void {
    addEventListener(KeyboardEvent.KEY_UP, onKeyUpHandler);
}

private function onKeyUpHandler(e:KeyboardEvent):void {
    switch (e.keyCode) {
        case Keyboard.ENTER:
            dispatchEvent(new MouseEvent(MouseEvent.CLICK));
        break;
    }
}

public function set menuData(value:MenuData):void {
    var accessProps:AccessibilityProperties = new AccessibilityProperties();
    accessProps.name = value.name;
    accessProps.description = value.name;
    accessibilityProperties = accessProps;

    tabIndex = value.tabIdx;
}
</pre>
]]></content:encoded>
			<wfw:commentRss>http://www.shallaazm.com/my/example/77/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>twitter, facebook list</title>
		<link>http://www.shallaazm.com/my/tip/66/</link>
		<comments>http://www.shallaazm.com/my/tip/66/#comments</comments>
		<pubDate>Mon, 05 Jul 2010 06:31:22 +0000</pubDate>
		<dc:creator>shallaa</dc:creator>
				<category><![CDATA[TIP]]></category>
		<category><![CDATA[shallaa]]></category>
		<category><![CDATA[twitter facebook list]]></category>

		<guid isPermaLink="false">http://www.shallaazm.com/?p=66</guid>
		<description><![CDATA[트위터, 페이스북에서 친구가 많아지면 필수인 리스트 관리.]]></description>
			<content:encoded><![CDATA[<p>트위터, 페이스북에서 친구가 많아지면 필수인 리스트 관리.</p>
<p><strong>1. twitter</strong></p>
<p><img class="aligncenter size-full wp-image-67" title="twitter-list" src="http://www.shallaazm.com/blog/wp-content/uploads/2010/07/twitter-list.png" alt="twitter-list" width="224" height="365" /></p>
<p><span style="color: #3366ff;">Home 화면</span>에서 프로필 아래 <span style="color: #3366ff;">followin</span><span style="color: #3366ff;">g</span> 선택.</p>
<p>following 리스트 우측에 <span style="color: #3366ff;">리스트 버튼</span>을 클릭하면 위와 같은 창이 나온다.</p>
<p>가장 아래에 <span style="color: #3366ff;">New List</span> 를 클릭하여 리스트를 추가하고 추가된 리스트에서 <span style="color: #3366ff;">체크박스</span>를 선택하면 리스트에 추가된다.</p>
<p><strong>2. facebook</strong></p>
<p><img class="aligncenter size-full wp-image-73" title="facebook-list" src="http://www.shallaazm.com/blog/wp-content/uploads/2010/07/facebook-list3.png" alt="facebook-list" width="600" height="181" /></p>
<p><span style="color: #3366ff;">Home 화면</span>에서 우측 상단에 <span style="color: #3366ff;">계정</span> 선택후 <span style="color: #3366ff;">친구편집</span> 선택.</p>
<p>좌측의 <span style="color: #3366ff;">관계 모두 보기</span> 선택.</p>
<p>친구 리스트 상단에 <span style="color: #3366ff;">새 목록 만들기를</span> 선택하면 리스트가 추가된다.</p>
<p>친구 리스트 우측의 <span style="color: #3366ff;">목록에 추가</span>를 선택하고 리스트를 <span style="color: #3366ff;">체크</span>해 주면 리스트에 추가된다.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.shallaazm.com/my/tip/66/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Two-Panel Selector</title>
		<link>http://www.shallaazm.com/my/uiux/58/</link>
		<comments>http://www.shallaazm.com/my/uiux/58/#comments</comments>
		<pubDate>Sat, 03 Jul 2010 05:12:59 +0000</pubDate>
		<dc:creator>shallaa</dc:creator>
				<category><![CDATA[UI/UX]]></category>
		<category><![CDATA[designing interfaces]]></category>
		<category><![CDATA[Two-Panel Selector]]></category>
		<category><![CDATA[UI / UX]]></category>

		<guid isPermaLink="false">http://www.shallaazm.com/?p=58</guid>
		<description><![CDATA[인터페이스 안에 두개의 panel을 나란히 놓고 첫번째 panel에는 선택할 수 있는 아이템들을 나타내고 다른 panel에는 선택된 아이템의 내용을 보여주는 인터페이스 패턴.]]></description>
			<content:encoded><![CDATA[<p><img class="aligncenter size-full wp-image-59" title="mac-mail" src="http://www.shallaazm.com/blog/wp-content/uploads/2010/07/mac-mail.gif" alt="mac-mail" width="360" height="290" /></p>
<p><strong>What</strong></p>
<p style="padding-left: 30px;">인터페이스 안에 두개의 panel을 나란히 놓는다. 첫번째 panel에는 선택할 수 있는 아이템들을 나타내고 다른 panel에는 선택된 아이템의 내용을 보여준다.</p>
<p><strong>Use when</strong></p>
<p style="padding-left: 30px;">사용자에게 리스트의 전체 구조를 보여주는 동시에 스스로 선택한 순서에 따라 사용자의 페이스로 아이템을 보여주기를 원할때.</p>
<p style="padding-left: 30px;">물리적으로 작업하는 화면은 충분히 넓기 때문에 분리된 두개의 panel을 보여줄 수 있다. 반면 휴대폰처럼 매우 작은 화면은 이 패턴을 사용할 수 없다. 그러나 블랙베리와 같은 화면은 가능하다.</p>
<p style="padding-left: 30px;"><img class="aligncenter size-full wp-image-60" title="blackberry" src="http://www.shallaazm.com/blog/wp-content/uploads/2010/07/blackberry.gif" alt="blackberry" width="236" height="258" /></p>
<p><strong>Why</strong></p>
<p style="padding-left: 30px;"><span style="color: #3366ff;">Two-Panel Selector는 이미 학습에 의해서 익숙해져 있다.  -</span>윈도우 탐색기, 이메일 클라이언트, 웹사이트 등</p>
<p style="padding-left: 30px;">사람들은 한 panel에서 아이템을 선택하고 다른 panel에서는 그에 해당되는 내용을 본다는 개념을 빠르게 이해한다.</p>
<p style="padding-left: 30px;">두 개의 패널이 나란히 보여지면 시선을 쉽게 이동할 수 있음으로 사용자의 시선이 panel 사이의 긴 거리를 이동하는 <span style="color: #3366ff;">물리적인 노력을 줄여준다.</span></p>
<p style="padding-left: 30px;"><span style="color: #3366ff;">시각적인 인지 부담을 줄여준다.</span> 윈도우 전체가 변하지 않고 대부분의 영역이 고정되어 있음으로 사용자들은 변하는 영역에만 초점을 맞추어 볼 수 있다.</p>
<p style="padding-left: 30px;">사용자가 <span style="color: #3366ff;">기억해야 할 부담을 줄여준다.</span> 이미 목록이 스크린 위에 떠있으며 &#8220;당신은 이곳에 있다&#8221;라는 이정표로 작용하기 때문에 사용자는 자신이 선택한 목록을 기억을 더듬지 않고도 바로 옆의 panel을 쳐다보기만 함으로써 인지할 수 있다.</p>
<p style="padding-left: 30px;"><img class="aligncenter size-full wp-image-61" title="windows-explorer" src="http://www.shallaazm.com/blog/wp-content/uploads/2010/07/windows-explorer.gif" alt="windows-explorer" width="488" height="296" /></p>
<p><strong>How</strong></p>
<p style="padding-left: 30px;"><span style="color: #3366ff;">선택할 수 있는 리스트 panel은 상단이나 왼쪽에 둔다.</span> 왼쪽에서 오른쪽으로 글을 읽고 쓰는 사용자들의 시각적 흐름에 있어서 리스트를 보고 선택된 아이템에 해당하는 내용을 보는 흐름이 유리하다.</p>
<p style="padding-left: 30px;">사용자들이 <span style="color: #3366ff;">아이템을 선택하면 해당하는 내용을 즉시 두번째 panel에 나타낸다.</span> 선택은 단 한번의 클릭으로 완료되어야 한다. 키보드-특히 화살표 키-로 선택을 변경할 수 있도록 해야 한다. 사용자의 물리적인 노력과 브라우징을 위해 소요되는 시간을 줄여주고 키보드의 사용성에도 기여한다.</p>
<p style="padding-left: 30px;"><span style="color: #3366ff;">선택된 아이템을 시각적으로 명확히 만든다.</span> 선택된 아이템과 선택되지 않은 아이템을 명확히 구분지어 주어야 한다.</p>
<p style="padding-left: 30px;">또한 Tow-Panel Selector에 리스트와 트리 같은 단순한 구성 요소들을 더하여 Sortable Table이나 Tree-Table과 같은 정보 표현 패턴으로 사용할 수 있다. Card Stack과 Overview Plus Detail은 Tow-Panel Selector와 밀접하게 관련되어 있는 패턴이다.</p>
<p style="padding-left: 30px;">선택하고 보여주기 컨셉이 멀티플 패널을 통해 확장될 때, 계층구조를 통한 내비게이션을 용이하게 하기 위해서 Cascading Lists를 사용할 수 있다.</p>
<p style="padding-left: 30px;">
]]></content:encoded>
			<wfw:commentRss>http://www.shallaazm.com/my/uiux/58/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Big Five personality traits (OCEAN model)</title>
		<link>http://www.shallaazm.com/my/psychology/30/</link>
		<comments>http://www.shallaazm.com/my/psychology/30/#comments</comments>
		<pubDate>Sun, 27 Jun 2010 14:58:06 +0000</pubDate>
		<dc:creator>shallaa</dc:creator>
				<category><![CDATA[PSYCHOLOGY]]></category>
		<category><![CDATA[Big Five personality traits]]></category>
		<category><![CDATA[shallaa]]></category>

		<guid isPermaLink="false">http://www.shallaazm.com/?p=30</guid>
		<description><![CDATA[5가지 성격 특성 요소(Big Five personality traits)는 심리학에서 경험적인 조사와 연구를 통하여 정립한 성격 특성의 다섯 가지 주요한 요소 혹은 차원을 말한다. 신경성, 외향성, 친화성, 성실성, 경험에 대한 개방성의 다섯 가지 요소가 있으며, 성격 연구의 모델일 뿐 공식적인 이론은 아니다.

5가지 성격 요소

Openness to experience (경험에 대한 개방성)
Conscientiousness (성실성)
Extraversion (외향성)
Agreeableness (친화성)
Neuroticism (신경성)]]></description>
			<content:encoded><![CDATA[<p style="text-align: center;"><img class="size-full wp-image-38 aligncenter" title="Big Five" src="http://www.shallaazm.com/blog/wp-content/uploads/2010/06/five_facets.gif" alt="Big Five" width="572" height="425" /></p>
<p>=============</p>
<p>5가지 성격 특성 요소(Big Five personality traits)는 심리학에서 경험적인 조사와 연구를 통하여 정립한 성격 특성의 다섯 가지 주요한 요소 혹은 차원을 말한다. 신경성, 외향성, 친화성, 성실성, 경험에 대한 개방성의 다섯 가지 요소가 있으며, 성격 연구의 모델일 뿐 공식적인 이론은 아니다.</p>
<p>=============</p>
<p>출처: <a href="http://ko.wikipedia.org/wiki/5%EA%B0%80%EC%A7%80_%EC%84%B1%EA%B2%A9_%ED%8A%B9%EC%84%B1_%EC%9A%94%EC%86%8C" target="_blank">위키백과</a></p>
<p>5가지 성격 요소</p>
<ul>
<li><strong>Openness to experience</strong> (경험에 대한 개방성)</li>
<li><strong>Conscientiousness</strong> (성실성)</li>
<li><strong>Extraversion</strong> (외향성)</li>
<li><strong>Agreeableness</strong> (친화성)</li>
<li><strong>Neuroticism</strong> (신경성)</li>
</ul>
<p>다섯가지 요소의 영문 스펠링 첫 자를 따서 <strong>OCEAN</strong> 모델이라고 불리기도 한다.</p>
<p>다섯가지 요소들은 각각 평가되어지고 평가되어진 대상이 모두 다섯가지 성격 요소에 대한 점수를 가진다는 특징이 있으며, 그로 인해 유형별로 분류해내는 분류방식과 구분된다.</p>
<p><strong>1. Openness to experience (경험에 대한 개방성)</strong></p>
<p>상상력과 호기심, 모험심, 예술적 감각 등으로 보수주의에 반대되는 성향.</p>
<p><span style="color: #3366ff;">개방성이 높은 사람들은</span> 창조적이고 상상력이 풍부하며, 추상적이고 호기심이 많다. 사색을 좋아하고 독창적이며, 발명에 재능이 있고 예술적이며, 심미적인 경험을 소중히 여긴다.</p>
<p><span style="color: #3366ff;">개방성이 낮은 사람들은</span> 관습적, 구체적, 전통적이며, 미지의 것을 좋아하기보다는 이미 잘 알고 있는 것을 선호한다.</p>
<p><strong>2. Conscientiousness (성실성)</strong></p>
<p>목표를 성취하기 위해 성실하게 노력하는 성향</p>
<p><span style="color: #3366ff;">성실성이 높은 사람들은</span> 빈틈없고 의지가 되며, 믿음직스럽고 열심히 일하며, 목표 중심적이고 효율적이며 계획성이 뛰어나다.</p>
<p><span style="color: #3366ff;">성실성이 낮은 사람들은</span> 계획성이 없고 지각을 잘하며, 부주의하고 충동적이다.</p>
<p><strong>3. Extraversion (외향성)</strong></p>
<p><span style="font-size: 10pt;">다른 사람과의 사교</span><span style="font-size: 10pt;">, </span><span style="font-size: 10pt;">자극과 활력을 추구하는 성향</span></p>
<p><span style="font-size: 10pt;"><span style="color: #3366ff;">외향성이 높은 사람들은</span> 수다스럽고 에너지가 넘치며, 열정적이고 자기주장이 강하며 사교적이다.</span></p>
<p><span style="font-size: 10pt;"><span style="color: #3366ff;">외향성이 낮은 사람들은</span> 말수가 적고 조용하며, 수줍음이 많다.</span></p>
<p><span style="font-size: 10pt;"><strong>4. Agreeableness (친화성)</strong></span></p>
<p><span style="font-size: 10pt;">타인에게 반항적이지 않은 협조적인 태도를 보이는 성향</span></p>
<p><span style="font-size: 10pt;"><span style="color: #3366ff;">친화성이 높은 사람들은</span> 남에게 도움을 주고, 사심이 없으며, 동정심이 많고, 친절하며, 용서하고, 신뢰하고, 사려 깊으며, 협조적이다.</span></p>
<p><span style="font-size: 10pt;"><span style="color: #3366ff;">친화성이 낮은 사람들은</span> 단점이나 잘못된 점을 찾는 데 예리하고, 다투기를 좋아하며, 비판적이고, 가혹하며, 냉담하고, 퉁명스럽다.</span></p>
<p><span style="font-size: 10pt;"><strong>5. Neuroticism (신경성)</strong></span></p>
<p><span style="font-size: 10pt;"><span style="font-size: 10pt;">분노</span><span style="font-size: 10pt;">,</span><span style="font-size: 10pt;">우울함</span><span style="font-size: 10pt;">, </span><span style="font-size: 10pt;">불안감과 같은 불쾌한 정서를 쉽게 느끼는 성향</span></span></p>
<p><span style="font-size: 10pt;"><span style="font-size: 10pt;"><span style="color: #3366ff;">신경성이 높은 사람들은</span> 불안해하고 쉽게 동요하거나 우울해지며, 걱정이 많고 침울하다.</span></span></p>
<p><span style="font-size: 10pt;"><span style="font-size: 10pt;"><span style="color: #3366ff;">신경성이 낮은 사람들은</span> 침착하고 편안하며, 스트레스를 잘 다스릴 줄 알고 감정적으로 안정되어 있다.</span></span></p>
<p><span style="font-size: 10pt;"><span style="font-size: 10pt;"><strong>OCEAN 테스트</strong></span></span></p>
<p><span style="font-size: 10pt;"><span style="font-size: 10pt;"><span style="color: #3366ff;">평가 항목</span>별로 <span style="color: #3366ff;">답변유형</span>을 참고해 점수로 환산해 테스트하고, 아래 <span style="color: #3366ff;">계산식</span>으로 채점.</span></span></p>
<p><span style="color: #3366ff;">평가 항목</span></p>
<ol>
<li>Extraverted, enthusiastic.(외향적이며, 열정적이다.)</li>
<li>Critical, quarrelsome.(비판적이며, 화를 잘 낸다.)</li>
<li>Dependable, self-disciplined.(믿을 만하며, 자기관리를 잘한다.)</li>
<li>Anxious, easily upset.(불안하며, 쉽게 우울해진다.)</li>
<li>Open to new experiences, complex.(새로운 경험에 개방적이며, 복잡하다.)</li>
<li>Reserved, quiet.(수줍어하며, 과묵하다.)</li>
<li>Sympathetic, warm.(동정심 많으며, 따뜻하다.)</li>
<li>Disorganized, careless.(계획성 없으며, 부주의하다.)</li>
<li>Calm, emotionally stable.(침착하며, 감정적으로 안정되어 있다.)</li>
<li>Conventional, uncreative.(전통적이며, 창의성이 없다.)</li>
</ol>
<p><span style="color: #3366ff;">답변 유형</span></p>
<p style="padding-left: 30px; ">1 = Disagree Strongly(완전히 부정한다.)</p>
<p style="padding-left: 30px; ">2 = Disagree Moderately(다소 부정한다.)</p>
<p style="padding-left: 30px; ">3 = Disagree a little(약간 부정한다.)</p>
<p style="padding-left: 30px; ">4 = Neither agree nor disagree(동의하지도 부정하지도 않는다.)</p>
<p style="padding-left: 30px; ">5 = Agree a little(약간 동의한다.)</p>
<p style="padding-left: 30px; ">6 = Agree moderately(다소 동의한다.)</p>
<p style="padding-left: 30px; ">7 = Agree Strongly(완전히 동의한다.)</p>
<p><span style="color: #3366ff;">계산식</span></p>
<p style="padding-left: 30px;">개방성 = ( 8 &#8211; 10문항의 점수) + 5문항의 점수</p>
<p style="padding-left: 30px;">성실성 = ( 8 &#8211; 8문항의 점수) + 3문항의 점수</p>
<p style="padding-left: 30px;">외향성 = ( 8 &#8211; 6문항의 점수) + 1문항의 점수</p>
<p style="padding-left: 30px;">친화성 = ( 8 &#8211; 2문항의 점수) + 7문항의 점수</p>
<p style="padding-left: 30px;">신경성 = ( 8 &#8211; 9문항의 점수) + 4문항의 점수</p>
<p><span style="color: #3366ff;">예 </span></p>
<p style="padding-left: 30px;">개방성 = (8 &#8211; 2) + 6</p>
<p style="padding-left: 30px;">성실성 = (8 &#8211; 4) + 5</p>
<p style="padding-left: 30px;">외향성 = (8 &#8211; 5) + 5</p>
<p style="padding-left: 30px;">친화성 = (8 &#8211; 5) + 6</p>
<p style="padding-left: 30px;">신경성 = (8 &#8211; 4) + 5</p>
<p><span style="color: #3366ff;">평균 </span></p>
<table border="1" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="205" valign="top">5대 성격 유형</td>
<td width="205" valign="top">여성</td>
<td width="205" valign="top">남성</td>
</tr>
<tr>
<td width="205" valign="top">개방성</td>
<td width="205" valign="top">10.8</td>
<td width="205" valign="top">10.7</td>
</tr>
<tr>
<td width="205" valign="top">성실성</td>
<td width="205" valign="top">11.0</td>
<td width="205" valign="top">10.4</td>
</tr>
<tr>
<td width="205" valign="top">외향성</td>
<td width="205" valign="top">9.1</td>
<td width="205" valign="top">8.5</td>
</tr>
<tr>
<td width="205" valign="top">친화성</td>
<td width="205" valign="top">10.6</td>
<td width="205" valign="top">10.1</td>
</tr>
<tr>
<td width="205" valign="top">신경성</td>
<td width="205" valign="top">6.7</td>
<td width="205" valign="top">5.7</td>
</tr>
</tbody>
</table>
]]></content:encoded>
			<wfw:commentRss>http://www.shallaazm.com/my/psychology/30/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>에어 디스크립터 파일</title>
		<link>http://www.shallaazm.com/my/example/19/</link>
		<comments>http://www.shallaazm.com/my/example/19/#comments</comments>
		<pubDate>Fri, 25 Jun 2010 06:49:23 +0000</pubDate>
		<dc:creator>shallaa</dc:creator>
				<category><![CDATA[ACTION SCRIPT]]></category>
		<category><![CDATA[ActionScript]]></category>
		<category><![CDATA[shallaa]]></category>
		<category><![CDATA[에어 디스크립터 파일]]></category>

		<guid isPermaLink="false">http://www.shallaazm.com/blog/?p=19</guid>
		<description><![CDATA[에어 어플리케이션의 여러가지 설정을 담당하는 디스크립터 파일의 내용.]]></description>
			<content:encoded><![CDATA[<pre class="brush: xml; title: ; notranslate">
&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;
&lt;application xmlns=&quot;http://ns.adobe.com/air/application/1.0&quot;&gt;
    &lt;!-- 어플리케이션 ID(필수) --&gt;
    &lt;id&gt;com.example.HelloWorld&lt;/id&gt;
    &lt;!-- 파일이름(필수) --&gt;
    &lt;filename&gt;Hello World&lt;/filename&gt;
    &lt;!-- 설치할 때 표시되는 이름(제어판 추가삭제에도 나타남) --&gt;
    &lt;name&gt;Example Co. AIR Hello World&lt;/name&gt;
    &lt;!-- 어플리케이션 버젼(필수) --&gt;
    &lt;version&gt;2.0&lt;/version&gt;
    &lt;!-- 설명(어플리케이션 설치 시 나타남) --&gt;
    &lt;description&gt;
        The Hello World sample file from the Adobe AIR documentation.
    &lt;/description&gt;
    &lt;!-- 카피라이트 정보 --&gt;
    &lt;copyright&gt;Copyright (c) 2006 Example Co.&lt;/copyright&gt;
    &lt;initialWindow&gt;
        &lt;!-- 실제 실행될 swf 또는 html 파일 --&gt;
        &lt;content&gt;[This value will be overwritten by Flex Builder in the output app.xml]&lt;/content&gt;
        &lt;!-- 메인 윈도우 타이틀 --&gt;
        &lt;title&gt;Hello World&lt;/title&gt;
        &lt;!-- 사용할 윈도우크롬(기본값 : standard) --&gt;
        &lt;systemChrome&gt;none&lt;/systemChrome&gt;
        &lt;!-- 윈도우의 투명여부(systemChrome이 none일 경우에만 동작) --&gt;
        &lt;transparent&gt;true&lt;/transparent&gt;
        &lt;!-- 시작시 윈도우의 가시여부 설정 --&gt;
        &lt;visible&gt;true&lt;/visible&gt;
        &lt;!-- 어플리케이션 최소와 기능 설정 --&gt;
        &lt;minimizable&gt;true&lt;/minimizable&gt;
        &lt;!-- 어플리케이션 최대화 기능 설정 --&gt;
        &lt;maximizable&gt;true&lt;/maximizable&gt;
        &lt;!-- 어플리케이션 크기조절 가능여부 설정 --&gt;
        &lt;resizable&gt;true&lt;/resizable&gt;
        &lt;!-- 윈도우의 초기 너비 --&gt;
        &lt;width&gt;640&lt;/width&gt;
        &lt;!-- 윈도우의 초기 높이 --&gt;
        &lt;height&gt;480&lt;/height&gt;
        &lt;!-- 윈도우의 x위치 --&gt;
        &lt;x&gt;100&lt;/x&gt;
        &lt;!-- 윈도우의 y위치 --&gt;
        &lt;y&gt;100&lt;/y&gt;
        &lt;!-- 윈도우의 최소 사이즈 정의 --&gt;
        &lt;minSize&gt;400 200&lt;/minSize&gt;
        &lt;!-- 윈도우의 최대 사이즈 정의 --&gt;
        &lt;maxSize&gt;1600 800&lt;/maxSize&gt;
    &lt;/initialWindow&gt;
    &lt;!-- 어플리케이션을 설치할 경로 --&gt;
    &lt;installFolder&gt;Example Co/Hello World&lt;/installFolder&gt;
    &lt;!-- 어플리케이션이 프로그램 폴더에 위치할 경로 --&gt;
    &lt;programMenuFolder&gt;Example Co&lt;/programMenuFolder&gt;
    &lt;!-- 어플리케이션에 사용되는 아이콘 파일(PNG 포맷) --&gt;
    &lt;icon&gt;
        &lt;image16x16&gt;icons/smallIcon.png&lt;/image16x16&gt;
        &lt;image32x32&gt;icons/mediumIcon.png&lt;/image32x32&gt;
        &lt;image48x48&gt;icons/bigIcon.png&lt;/image48x48&gt;
        &lt;image128x128&gt;icons/biggestIcon.png&lt;/image128x128&gt;
    &lt;/icon&gt;
    &lt;!-- 업데이트 할 때 사용자 정의 UI를 사용할지 여부 --&gt;
    &lt;customUpdateUI&gt;true&lt;/customUpdateUI&gt;
    &lt;!-- 브라우저에서 어플리케이션을 실행할 수 있는지 여부 --&gt;
    &lt;allowBrowserInvocation&gt;false&lt;/allowBrowserInvocation&gt;
    &lt;!-- 어플리케이션에 연결된 파일 타입 --&gt;
    &lt;fileTypes&gt;
        &lt;fileType&gt;
            &lt;!-- 이름 --&gt;
            &lt;name&gt;adobe.VideoFile&lt;/name&gt;
            &lt;!-- 확장자(필수) --&gt;
            &lt;extension&gt;avf&lt;/extension&gt;
            &lt;!-- 설명 --&gt;
            &lt;description&gt;Adobe Video File&lt;/description&gt;
            &lt;!-- The MIME 타입 --&gt;
            &lt;contentType&gt;application/vnd.adobe.video-file&lt;/contentType&gt;
            &lt;!-- 파일에 사용되는 아이콘 파일(PNG 포맷) --&gt;
            &lt;icon&gt;
                &lt;image16x16&gt;icons/avfIcon_16.png&lt;/image16x16&gt;
                &lt;image32x32&gt;icons/avfIcon_32.png&lt;/image32x32&gt;
                &lt;image48x48&gt;icons/avfIcon_48.png&lt;/image48x48&gt;
                &lt;image128x128&gt;icons/avfIcon_128.png&lt;/image128x128&gt;
            &lt;/icon&gt;
        &lt;/fileType&gt;
    &lt;/fileTypes&gt;
&lt;/application&gt;
</pre>
]]></content:encoded>
			<wfw:commentRss>http://www.shallaazm.com/my/example/19/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>badge.swf</title>
		<link>http://www.shallaazm.com/my/example/17/</link>
		<comments>http://www.shallaazm.com/my/example/17/#comments</comments>
		<pubDate>Fri, 25 Jun 2010 06:46:50 +0000</pubDate>
		<dc:creator>shallaa</dc:creator>
				<category><![CDATA[ACTION SCRIPT]]></category>
		<category><![CDATA[ActionScript]]></category>
		<category><![CDATA[badge.swf]]></category>
		<category><![CDATA[shallaa]]></category>

		<guid isPermaLink="false">http://www.shallaazm.com/blog/?p=17</guid>
		<description><![CDATA[빌더에서 샘플로 제공하는 배포파일 (badge.swf) 에 대한 내용.]]></description>
			<content:encoded><![CDATA[<p>Flex Builder 3 설치후<br />
Adobe\Flex Builder 3\sdks\3.0.0\samples\badge 폴더를 보면</p>
<p>badge</p>
<blockquote><p>AC_RunActiveContent.js<br />
AIRBadge.as<br />
badge.fla<br />
badge.swf<br />
default_badge.html<br />
readme.txt<br />
red_badge.html<br />
test.jpg</p></blockquote>
<p>이 있다.</p>
<p>필요한 파일</p>
<blockquote><p>AC_RunActiveContent.js : 플래시 플레이어 버젼 확인 및 임베딩<br />
badge.swf : 에어 어플리케이션을 설치해주는 링크를 가진 플래시 파일<br />
default_badge.html : badge.swf를 임베딩하는 html파일 (이름은 바꿔도 됨)</p></blockquote>
<p>위에 보이는 필요한 파일들을 웹서버에 업로드 해준다. (참고로 그대로 올릴 시 test.jpg를 업로드 하지 않으면 badge.swf에서 파일오류를 일으킨다. AIRBadge.as를 살펴보자.)<br />
그리고 default_badge.html에서 badge.swf으로 넘기는 파라미터(FlashVars)를 수정해 준다.</p>
<p>default_badge.html</p>
<pre class="brush: xml; title: ; notranslate">
'flashvars','appname=HelloAIR&amp;appurl=http://도메인/경로/HelloAIR.air&amp;airversion=1.0&amp;imageurl=test.jpg'
</pre>
<p>** 파라미터</p>
<blockquote><p>appname       : 에어 어플리케이션 이름<br />
appurl           : 에어 어플리케이션의 패키지 파일(.air)의 웹 서버 링크<br />
airversion      : 에어 런타임 환경의 버젼<br />
imageurl        : badge에 표시할 설치 아이콘 이미지<br />
buttoncolor     : 설치 버튼의 색을 hex 컬러 값으로 지정<br />
messagecolor : 버튼 밑에 나타나는 설치정보 관련 메시지 폰트 색깔 지정</p></blockquote>
<p>파라미터 외에도 수정할 부분이 있으면 적당히 수정해 준다.<br />
파라미터를 수정할 때에는 appurl가 중요하다.<br />
파라미터를 받는 badge.swf의 소스파일을 보면</p>
<p>AIRBadge.as</p>
<pre class="brush: plain; title: ; notranslate">
...(생략)
_appURL = validateURL(encodeURI(parameters[&quot;appurl&quot;]));

    // Validate URL: only allow HTTP, HTTPS scheme or relative path
    // Return null if not a valid URL
    private static function validateURL(url:String):String {
        if (url &amp;&amp; url.length &gt; 0) {
            var schemeMarker:int = url.indexOf(&quot;:&quot;);
            if (schemeMarker &lt; 0) {
                schemeMarker = url.indexOf(&quot;%3a&quot;);
            }
            if (schemeMarker &lt; 0) {
                schemeMarker = url.indexOf(&quot;%3A&quot;);
            }
            if (schemeMarker &gt; 0) {
                var scheme:String = url.substr(0, schemeMarker).toLowerCase();
                if (scheme != &quot;http&quot; &amp;&amp; scheme != &quot;https&quot; &amp;&amp; scheme != &quot;ftp&quot;) {
                    url = null;
                }
            }
        }
        return url;
    }
</pre>
<p>부분이 있다.<br />
appurl에는 도메인, 경로를 정확히 적어주자.<br />
여기까지가 필수.<br />
필요하다면 badge.fla, AIRBadge.as를 수정해서 다운로드 받는 화면을 더 이쁘게 꾸며줄 수 있다.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.shallaazm.com/my/example/17/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

