<?xml version="1.0"?>
<?xml-stylesheet href="http://hyeonseok.com/share/css/rss.css" type="text/css"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
	<channel>
		<title>신현석(Hyeonseok Shin)</title>
		<link>http://hyeonseok.com/</link>
		<description>웹표준, 웹접근성, 웹퍼블리싱, 웹개발 이야기</description>

		<language>ko-kr</language>
		<managingEditor>hyeonseok@gmail.com (Hyeonseok Shin)</managingEditor>
		<webMaster>hyeonseok@gmail.com (Hyeonseok Shin)</webMaster>
		<docs>http://blogs.law.harvard.edu/tech/rss</docs>
		<atom:link href="http://hyeonseok.com/rss/" rel="self" type="application/rss+xml" />
		<image>
			<url>http://hyeonseok.com/hyeonseok.png</url>
			<title>신현석(Hyeonseok Shin)</title>
			<link>http://hyeonseok.com/</link>
		</image>
<item><title>CSS3 2D Transforms Module Example</title><link>http://hyeonseok.com/docs/css/css3-2d-transform.php</link><guid>http://hyeonseok.com/docs/css/css3-2d-transform.php</guid><description><![CDATA[<p>W3C <a href="http://www.w3.org/TR/css3-2d-transforms/">CSS 2D Transforms Module Level 3(working draft)</a> 예제입니다. 스펙이 완성되지 않아서 제조사 접두어(-moz, -o-, -webkit-, -ms-)를 사용하였습니다.</p>

<h2>non-transformed</h2>
<p>트랜스폼이 적용되지 않은 박스입니다.</p>
<div class="example"><div></div></div>

<h2>transform</h2>
<p>트랜스폼 함수(transform function)를 값으로 하여 2D 트랜스폼을 적용합니다. 트랜스폼 함수는 SVG의 것과 비슷합니다.</p>
<pre><code>div {
	trasform: scale(0.7);
}</code></pre>
<div class="example"><div style="-webkit-transform: scale(0.7); -gecko-transform: scale(0.7); -o-transform: scale(0.7); -ms-transform: scale(0.7); transform: scale(0.7)"></div></div>

<h2>transform-origin</h2>
<p>트랜스폼의 기준점을 변경할 수 있게 해줍니다.</p>
<pre><code>div {
	trasform: scale(0.7);
	trasform-origin: 0 0;
}</code></pre>
<div class="example"><div style="-webkit-transform: scale(0.7); -gecko-transform: scale(0.7); -o-transform: scale(0.7); -ms-transform: scale(0.7); transform: scale(0.7); -webkit-transform-origin: 0 0; -gecko-transform-origin: 0 0; -o-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0"></div></div>

<h2>transform functions</h2>
<p>transform 속성의 값으로 사용할 수 있는 트랜스폼 함수들입니다.</p>

<h3>transform: matrix(1, 0, 0, 1, 10, 10);</h3><div class="example"><div style="-webkit-transform: matrix(1, 0, 0, 1, 10, 10); -gecko-transform: matrix(1, 0, 0, 1, 10, 10); -o-transform: matrix(1, 0, 0, 1, 10, 10); -ms-transform: matrix(1, 0, 0, 1, 10, 10); transform: matrix(1, 0, 0, 1, 10, 10)"></div></div>
<h3>transform: translate(10px, 10px);</h3><div class="example"><div style="-webkit-transform: translate(10px, 10px); -gecko-transform: translate(10px, 10px); -o-transform: translate(10px, 10px); -ms-transform: translate(10px, 10px); transform: translate(10px, 10px)"></div></div>
<h3>transform: translateX(10px);</h3><div class="example"><div style="-webkit-transform: translateX(10px); -gecko-transform: translateX(10px); -o-transform: translateX(10px); -ms-transform: translateX(10px); transform: translateX(10px)"></div></div>
<h3>transform: translateY(10px);</h3><div class="example"><div style="-webkit-transform: translateY(10px); -gecko-transform: translateY(10px); -o-transform: translateY(10px); -ms-transform: translateY(10px); transform: translateY(10px)"></div></div>
<h3>transform: scale(1.5);</h3><div class="example"><div style="-webkit-transform: scale(1.5); -gecko-transform: scale(1.5); -o-transform: scale(1.5); -ms-transform: scale(1.5); transform: scale(1.5)"></div></div>
<h3>transform: scaleX(1.5);</h3><div class="example"><div style="-webkit-transform: scaleX(1.5); -gecko-transform: scaleX(1.5); -o-transform: scaleX(1.5); -ms-transform: scaleX(1.5); transform: scaleX(1.5)"></div></div>
<h3>transform: scaleY(1.5);</h3><div class="example"><div style="-webkit-transform: scaleY(1.5); -gecko-transform: scaleY(1.5); -o-transform: scaleY(1.5); -ms-transform: scaleY(1.5); transform: scaleY(1.5)"></div></div>
<h3>transform: rotate(45deg);</h3><div class="example"><div style="-webkit-transform: rotate(45deg); -gecko-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg)"></div></div>
<h3>transform: skewX(30deg);</h3><div class="example"><div style="-webkit-transform: skewX(30deg); -gecko-transform: skewX(30deg); -o-transform: skewX(30deg); -ms-transform: skewX(30deg); transform: skewX(30deg)"></div></div>
<h3>transform: skewY(30deg);</h3><div class="example"><div style="-webkit-transform: skewY(30deg); -gecko-transform: skewY(30deg); -o-transform: skewY(30deg); -ms-transform: skewY(30deg); transform: skewY(30deg)"></div></div><p><a href="http://me2day.net/posts/new?new_post[body]=&quot;CSS3 2D Transforms Module Example&quot;:http://hyeonseok.com/docs/css/css3-2d-transform.php" >미투데이로 한마디</a> | <a href="http://twitter.com/?status=CSS3 2D Transforms Module Example http://hyeonseok.com/docs/css/css3-2d-transform.php">트위터로 한마디</a> | <a href="http://www.facebook.com/share.php?u=http://hyeonseok.com/docs/css/css3-2d-transform.php">페이스북에 한마디</a></p>]]></description></item>
<item><title>프로토타이핑</title><link>http://hyeonseok.com/soojung/book/2012/01/15/691.html</link><guid>http://hyeonseok.com/soojung/book/2012/01/15/691.html</guid><description><![CDATA[<p><img src="http://hyeonseok.com/soojung/contents/upload/prototyping.jpg" class="major" alt="UX 디자이너가 반드시 알아야 할 프로토타이핑 기법 표지" /> 웹을 제작하는 과정에서의 폭포수 모델은 PPT - PSD - HTML - CSS - JavaScript - Java와 같이 일련의 과정을 통해서 이루어진다. 만약, 버튼의 레이블이 하나 변경되더라도 PPT, PSD, HTML, CSS가 순차적으로 변경되어야 한다. 기능이 변경되는 것이라면 말할 것도 없다. 로드맵이 명확하고 각 단계에서 결과물을 확실하게 보증할 수 있는 검증과정이 들어간다면 폭포수 모델도 아주 나쁜 것은 아니라고 생각한다. 다만 웹이라는 제작물의 특성상 적합하지 않을 뿐이다. 잦은 수정과 개선이 계속해서 반복되는 웹사이트 제작에서 폭포수 모델은 프로젝트의 피로도를 쌓이게 하는 좋지 않은 방법론이다.</p>

<p>왜 수정사항은 계속 생기는 것일까? 왜 프로젝트는 막판에 뒤집어 지는 것일까? 왜 개발자들은 불가항력적으로 과도한 업무 환경에 놓이는 것일까? 누구나 한번쯤은 생각해 봤을 것이다. 정말로 스토리 보드에 도장찍고 PSD 수정을 막고 프로젝트를 진행할 수 있을까? 웹쪽 일을 계속 하다가 내린 결론은 '그렇게 할 수 없다'였다.</p>

<p>그렇다면 어떤 방법이 필요할까? 최종 결과물을 수정함에 있어서 기민하게 반응할 수 있는 프로세스를 만들고 또한 개선안이 후반부에 나오지 않도록 시제품을 만들고 많은 테스트를 시행하는 것이다. <a href="http://www.aladin.co.kr/shop/wproduct.aspx?ISBN=8966260020">프로토타이핑</a>은 이 시제품을 통해서 많은 테스트를 어떻게 해야하는지에 대해서 이야기 하고 있는 책이다.</p>

<p>프로토타이핑을 할 때에 가장 어려운 선택 과제는 프로토타이핑의 범위이다. 모든 기능이 다 작동되는 시제품을 만든다면 확실한 테스트와 재사용성을 높일 수 있겠지만 개선안을 미리 뽑는다는 취지에서 벗어나게 된다. 최소한의 기능만을 테스트 하기에는 테스트 범위가 너무 협소할 수 있고 제작된 코드가 재사용되지 않을 수 있다. 이 책에서도 이 범위의 산정은 어려운 문제로 다루고 있고 범위산정을 위해서는 프로토타이핑의 목적을 명확하게 할 필요가 있다고 한다. '시제품을 통한 UX 테스트'가 목적이 아니라 아주 구체적인 목적이 필요하고 그 목적이 정해진다면 범위도 명확하게 제한할 수 있게 된다.</p>

<p>기존 프로세스에 희망이 없었다면 프로토타이핑을 통해서 개선점을 찾을 수 있을 것 같다. 프로세스에 있어서의 창의성을 가장 쉽게 끌어올릴 수 있는 기법이 아닌가 싶다. 특히나 콘텐츠, 구조, 표현, 동작을 모두 다루는 웹 퍼블리셔들은 한번쯤 읽어보고 '중간자'로서의 자리매김보다는 '클라이언트 기술의 리더'로서 위치를 고민해봤으면 좋겠다.</p><p><a href="http://me2day.net/posts/new?new_post[body]=&quot;프로토타이핑&quot;:http://hyeonseok.com/soojung/book/2012/01/15/691.html" >미투데이로 한마디</a> | <a href="http://twitter.com/?status=프로토타이핑 http://hyeonseok.com/soojung/book/2012/01/15/691.html">트위터로 한마디</a> | <a href="http://www.facebook.com/share.php?u=http://hyeonseok.com/soojung/book/2012/01/15/691.html">페이스북에 한마디</a></p>]]></description></item>
<item><title>웹 접근성을 고려한 콘텐츠 제작 기법 2.0</title><link>http://hyeonseok.com/soojung/book/2012/01/07/690.html</link><guid>http://hyeonseok.com/soojung/book/2012/01/07/690.html</guid><description><![CDATA[<p></p><img src="http://hyeonseok.com/soojung/contents/upload/kwcag2-technique.jpg" class="major" alt="웹 접근성을 고려한 콘텐츠 제작 기법 2.0" /> 한국 정보화 진흥원에서 '웹 접근성을 고려한 콘텐츠 제작 기법 2.0'을 제정하였습니다. 이 책은 '<a href="http://hyeonseok.com/soojung/book/2009/04/11/523.html">웹 접근성을 고려한 신기술 콘텐츠 제작기법</a>'의 두번째 버젼이기도 하고 <a href="http://hyeonseok.com/soojung/accessibility/2011/01/04/626.html">KWCAG 2.0</a>을 실사례를 중심으로 이해를 돕기위해 만들어진 것입니다. 그동안 제작에 같이 고생하신 모든 분들께 감사드립니다. <a href="http://wah.or.kr/Board/brd_view.asp?page=1&amp;brd_sn=4&amp;brd_idx=741">PDF 문서도 같이 배포</a>하고 있습니다.<p><a href="http://me2day.net/posts/new?new_post[body]=&quot;웹 접근성을 고려한 콘텐츠 제작 기법 2.0&quot;:http://hyeonseok.com/soojung/book/2012/01/07/690.html" >미투데이로 한마디</a> | <a href="http://twitter.com/?status=웹 접근성을 고려한 콘텐츠 제작 기법 2.0 http://hyeonseok.com/soojung/book/2012/01/07/690.html">트위터로 한마디</a> | <a href="http://www.facebook.com/share.php?u=http://hyeonseok.com/soojung/book/2012/01/07/690.html">페이스북에 한마디</a></p>]]></description></item>
<item><title>https로 접속하면 다른 사이트가 나온다?</title><link>http://hyeonseok.com/soojung/daily/2012/01/02/689.html</link><guid>http://hyeonseok.com/soojung/daily/2012/01/02/689.html</guid><description><![CDATA[<p>오늘 회사 동료가 아주 황당한 것을 알려줬습니다. 구글에서 'site:hyeonseok.com'을 검색하니 영창출판사라는 저는 전혀 모르는 사이트가 제 도메인으로 서비스가 되고 있었습니다. http로 접속을 하면 제 사이트가 정상적으로 나오고 https로 접속을 하면 다른 사이트가 나오는 것입니다. 서버 설정상의 문제라고 생각을 하고 호스팅 업체에 문의를 해 봤습니다. 저는 당연히 고쳐질 것으로 기대를 했는데 고쳐줄 수 없다고 하네요.</p>

<p>요지는, https는 ssl 관련 보안설정이 되어 있는 부분이고 내가 사용하는 호스팅 서버는 공용서버이고 같은 서버를 사용하는 사람중의 하나가 보안인증서를 구매하여 https 서비스를 받고 있기 때문에 별도 설정은 해줄 수 없다는 것입니다. "기본적인 https으로 연결되는 사이트를 변경은 진행이되지 않습니다."라는 좀 이상한 답변이 왔는데 안된다는 말 같습니다. 저와 같은 서버를 사용하는 다른 사이트도 https로 접속을 하니 영창출판사페이지가 나오더군요.</p>

<p>별 생각이 다 들었습니다. 저가 상품 사용자라고 무시하는 건가? 서버를 변경해 달라고 신청해야 하나? 다른 호스팅 업체들도 이런식으로 관리하나? 인증서 장사를 하려는 건가? 보안상 문제있는 것 아닌가? 내가 인증서를 구매하면 다른 서버로 이전해주고 그 서버의 모든 도메인을 내가 사용 할 수 있게 되나? 기술적으로 가능하고 말고 까지는 잘 모르겠습니다. 하지만 프로토콜은 다르지만 제 도메인으로 다른 사이트가 서비스되고 있는 문제를 그냥 방치하는 자세는 이해 할 수가 없습니다.</p>

<p>CAFE24가 저렴한 비용에 안정적인 서비스를 제공해주고 있어서 나름 굉장히 오래 이용해 왔는데 이런 관리는 정말 납득이 안갑니다. 보안서비스를 적용했다고 하면서 덤으로 다른 사이트를 피싱할 수 있게 서비스를 제공하고 있네요. 좋은 호스팅 업체 있으면 추천 부탁드립니다.</p><p><a href="http://me2day.net/posts/new?new_post[body]=&quot;https로 접속하면 다른 사이트가 나온다?&quot;:http://hyeonseok.com/soojung/daily/2012/01/02/689.html" >미투데이로 한마디</a> | <a href="http://twitter.com/?status=https로 접속하면 다른 사이트가 나온다? http://hyeonseok.com/soojung/daily/2012/01/02/689.html">트위터로 한마디</a> | <a href="http://www.facebook.com/share.php?u=http://hyeonseok.com/soojung/daily/2012/01/02/689.html">페이스북에 한마디</a></p>]]></description></item>
<item><title>다사다난(多事多難)</title><link>http://hyeonseok.com/soojung/daily/2011/12/31/688.html</link><guid>http://hyeonseok.com/soojung/daily/2011/12/31/688.html</guid><description><![CDATA[<p>오페라 소프트웨어 퇴사, 신예주 탄신, 제주대, 마인드블룸, 앱창작센터, KTH 입사, 자바스크립트 개발자, 신대방동 이사, 핫스팟, 파란 초기화면, R&D, 모션, 웹접근성 전문과정, H3, 반응형 웹디자인, CA...</p>

<p>개인적으로 어려운 일도 있었지만 그만큼 좋은일도 있었던  정말 다사다난(多事多難)했던 한 해였던 것 같습니다. 내년에는 더 좋은 일이 많기를 기원합니다.</p>

<p>새해 복 많이 받으세요!</p><p><a href="http://me2day.net/posts/new?new_post[body]=&quot;다사다난(多事多難)&quot;:http://hyeonseok.com/soojung/daily/2011/12/31/688.html" >미투데이로 한마디</a> | <a href="http://twitter.com/?status=다사다난(多事多難) http://hyeonseok.com/soojung/daily/2011/12/31/688.html">트위터로 한마디</a> | <a href="http://www.facebook.com/share.php?u=http://hyeonseok.com/soojung/daily/2011/12/31/688.html">페이스북에 한마디</a></p>]]></description></item>
	</channel>
</rss>

