<?xml version="1.0" encoding="UTF-8" ?>
<feed xmlns="http://www.w3.org/2005/Atom">
   <title type="text">Textyle (텍스타일)</title>
      <updated>2010-03-11T12:12:31+09:00</updated>
   <id>http://www.textyle.kr/?module=rss&amp;act=atom</id>
   <link rel="alternate" type="text/html" hreflang="ko" href="http://zero.textyle.kr/"/>
   <link rel="self" type="application/atom+xml" href="http://www.textyle.kr/?module=rss&amp;act=atom"/>
   <generator uri="http://www.xpressengine.com/" version="1.4.0.5">XpressEngine</generator>
   <entry>
      <title>Vertical CSS Navigation Bar.</title>
      <id>http://www.textyle.kr/38973</id>
      <published>2010-03-10T22:15:50+09:00</published>
      <updated>2010-03-10T22:15:50+09:00</updated>
      <link rel="alternate" type="text/html" href="http://www.textyle.kr/38973"/>
      <link rel="replies" type="text/html" href="http://www.textyle.kr/38973#comment"/>
      <author>
         <name>정찬명</name>
               </author>
            <content type="html">&lt;div class=&quot;xe_content&quot;&gt;&lt;p&gt;얼마 전 공유했던 &apos;&lt;a href=&quot;http://naradesign.net/wp/2010/02/11/1185/&quot; target=&quot;_self&quot;&gt;CSS Navigation Bar&lt;/a&gt;&apos;는 &lt;b&gt;&apos;수평+서브메뉴 드롭다운&apos;&lt;/b&gt; 네비게이션 이었는데요. 오늘 공유하는 것은 &lt;b&gt;&apos;수직+서브메뉴 드롭다운&apos;&lt;/b&gt; 네비게이션 입니다. 수평 메뉴보다 수직 메뉴가 모든 면(HTML/CSS/JS)에서 코드가 더 간결하고 만들기도 쉽네요.&lt;/p&gt;&lt;div class=&quot;iframe&quot; style=&quot;display: block; &quot;&gt;&amp;lt;iframe frameborder=&quot;0&quot; width=&quot;100%&quot; style=&quot;display: block; height: 331px; &quot; src=&quot;http://naradesign.net/ouif/uio/navigation/vertical/bar/xhtml.html&quot; title=&quot;예제를 새 창에서 보기&quot;&gt;&amp;lt;/iframe&gt;&lt;span&gt;&lt;a href=&quot;http://naradesign.net/ouif/uio/navigation/vertical/bar/xhtml.html&quot; target=&quot;_blank&quot;&gt;예제를 새 창에서 보기&lt;/a&gt;&lt;/span&gt;&lt;/div&gt;&lt;h3 id=&quot;h1268225323246&quot;&gt;특징&lt;/h3&gt;&lt;ul&gt;&lt;li&gt;중첩 목록(ul&amp;gt;li&amp;gt;ul&amp;gt;li) 구조로 마크업 했습니다.&lt;/li&gt;&lt;li&gt;키보드만으로도 조작이 가능하고 키보드의 접근 순서는 논리적으로 처리되어 있습니다.&lt;/li&gt;&lt;li&gt;서브메뉴 토글에 jQuery의 .slideDown() 및 .slideUp() 효과를 사용 했습니다.&lt;/li&gt;&lt;li&gt;이미지를 한 번 사용 했습니다.&lt;/li&gt;&lt;/ul&gt;&lt;h3 id=&quot;h1268225579696&quot;&gt;유의사항&lt;/h3&gt;&lt;p&gt;간혹 이런 수직 메뉴의 서브 메뉴 펼침 동작을 &lt;b&gt;onmouseover&lt;/b&gt; 이벤트 헨들러로 처리하는 경우가 있는데요. 그런 경우 사용성이나 접근성이 정말 나빠집니다.&amp;nbsp;&lt;/p&gt;&lt;p&gt;사용성이 나빠지는 이유는 아래쪽에 있는 메뉴를 선택하기 위하여 링크 위를 &lt;b&gt;onmouseover&lt;/b&gt; 하는 순간 해당 링크의 서브 메뉴가 펼쳐지는데 이는 보통 원치 않는 동작이기 때문입니다.&amp;nbsp;&lt;/p&gt;&lt;p&gt;접근성이 나빠지는 이유는 마우스와 동등하게 키보드가 접근할 수 있도록 &lt;b&gt;onmouseover&lt;/b&gt; 헨들러와 &lt;b&gt;onfocus&lt;/b&gt; 헨들러를 병행해서 작성하지 않는 경우 입니다. 이런 경우 키보드가 서브 메뉴를 펼칠 수 없기 때문에 키보드 사용자는 서브 메뉴에 접근할 수 없습니다. &lt;b&gt;onmouseover&lt;/b&gt; 헨들러를 사용했다면 반드시 &lt;b&gt;onfocus&lt;/b&gt; 헨들러를 병행 작성하여 동등한 기능을 처리할 수 있도록 해야 합니다.&lt;/p&gt;&lt;p&gt;따라서 수직 메뉴를 드롭다운 형태로 열고 닫는 오늘의 예제와 같은 경우&amp;nbsp;&lt;b&gt;onmouseover&lt;/b&gt; 이벤트 헨들러 사용은 절대적으로 피하는 것이 좋고 &lt;b&gt;onmouseover&lt;/b&gt; 이벤트 헨들러 사용은 보편적인 다른 모든 경우에도 최소화 하는 것이 좋습니다.&lt;/p&gt;&lt;/div&gt;</content>
                  
   </entry>
   <entry>
      <title>NHN Burning Day 2010 참가.</title>
      <id>http://www.textyle.kr/38523</id>
      <published>2010-03-07T09:20:10+09:00</published>
      <updated>2010-03-07T17:38:08+09:00</updated>
      <link rel="alternate" type="text/html" href="http://www.textyle.kr/38523"/>
      <link rel="replies" type="text/html" href="http://www.textyle.kr/38523#comment"/>
      <author>
         <name>정찬명</name>
               </author>
            <content type="html">&lt;div class=&quot;xe_content&quot;&gt;&lt;p&gt;NHN은 2008년부터 사내에서 &lt;a href=&quot;http://diary.naver.com/150045392699&quot; target=&quot;_self&quot;&gt;Burning Day&lt;/a&gt; 라는 행사를 시작 했습니다. 이 행사의 기본적인 개념은 개발자들이 평소에 생각하고 있던 아이디어를 구체화 시켜서 사내에 공유하는 것입니다. 일년에 한 번쯤은 각자의 아이디어와 열정으로 밤을 하얗게 불살라 보자는 거죠.&lt;/p&gt;&lt;blockquote class=&quot;citation&quot;&gt;&lt;p&gt;이건 정말 대박 아이디어인데 사람들은 왜 몰라줄까?&lt;/p&gt;&lt;/blockquote&gt;&lt;p&gt;이런 생각은 평소에 누구나 가질 수 있죠. 그래서 1박 2일 동안 어떤 주제를 막론하고 원하는 것을 만들어 사람들에게 보여줄 수 있습니다. 이런 행사에서 공감을 많이 받게 되면 그 아이디어는 사업이 되거나 적어도 기존의 서비스들을 개선하는데 훌륭한 밑천이 될 것입니다.&lt;/p&gt;&lt;p class=&quot;img&quot; style=&quot;text-align: left; &quot;&gt;&lt;img src=&quot;http://xeui.textyle.kr/./files/attach/images/6468/523/038/burningday1.jpg&quot; width=&quot;500&quot; height=&quot;375&quot; rawsrc=&quot;http://xeui.textyle.kr/./files/attach/images/6468/523/038/burningday1.jpg&quot; class=&quot;xe_filesrl_10065&quot;&gt;&lt;br&gt;명찰과 생존킷&lt;/p&gt;&lt;p&gt;저는 올해 저희 XE 팀원들과 함께 처음으로&amp;nbsp;참가를 했습니다. 개인적으로 평소에 갈망하던 아이디어가 있던 것은 아니었지만 팀원들과 좋은 추억을 만들 수 있다는 기대감이 더 컸습니다. 다양한 주전부리를 제공하는 것도 그렇구요.&amp;nbsp;휴대폰으로 미투데이에 생존킷을 찍어 올렸더니 궁금해하시는 분들이 있어서 노트북 위에&amp;nbsp;펼쳐놓고 한 번 더 찍었죠. 평소에는 손도 안대던 것들인데 이렇게 지급해 주니까 먹게 되네요. 이 밖에도 각종 먹거리들이 행사장 밖에 수북히 쌓여 있어서 오며가며 집어먹게 되어 있습니다.&lt;/p&gt;&lt;p class=&quot;img&quot; style=&quot;text-align: left; &quot;&gt;&lt;img src=&quot;http://xeui.textyle.kr/./files/attach/images/6468/523/038/burningday2.jpg&quot; width=&quot;500&quot; height=&quot;375&quot; rawsrc=&quot;http://xeui.textyle.kr/./files/attach/images/6468/523/038/burningday1.jpg&quot; class=&quot;xe_filesrl_10064&quot;&gt;&lt;br&gt;생존킷 내용물&lt;/p&gt;&lt;p&gt;행사에 참여하기 위해 평소부터 뭔가 준비를 할 수도 있었습니다. 꼭 단 하루만에 무언가를 해야 하는것은 아닌거죠. 아마도 미리 준비를 해왔다면 좀 더 여유있게 즐길 수 있었을지도 모르겠네요. 하지만 저희 팀처럼 정말 아무 준비도 없이 노트북만 딸랑 들고와서 시작해도 괜찮은것 같아요. 기획, UI, 프로그램 산출물까지 단 하루만에 완성시켜야 한다는 제약을 즐기는 것도 매력 있던데요.&lt;/p&gt;&lt;p class=&quot;img&quot; style=&quot;text-align: left; &quot;&gt;&lt;img src=&quot;http://xeui.textyle.kr/./files/attach/images/6468/523/038/burningday3.jpg&quot; width=&quot;500&quot; height=&quot;375&quot; rawsrc=&quot;http://xeui.textyle.kr/./files/attach/images/6468/523/038/burningday1.jpg&quot; class=&quot;xe_filesrl_10066&quot;&gt;&lt;br&gt;새벽 4시 버닝데이 행사장 풍경&lt;/p&gt;&lt;p&gt;행사장은 이렇게 작은 테이블과 의자들이 빼곡히 들어서 있는데 사람들은 정말 밤 새도록 이러고 있답니다. 오래간만에 딱딱한 의자에 오래 않아 있으려니까 사무실에 있는 허먼밀러 에어론 의자가 무지하게 그립더라구요. 물론 이렇게 않아서 개발만 하는것은 아니구요. 개발자들에게는 가볍게 즐길 수 있는 프로그래밍 문제도 제공이 되는데 제한 시간 내에 누가 가장 정확하고 빠르게 풀었는지가 실시간으로 화면에 중계 되기도 합니다. 그리고 순위별로 10만원에서 5천원까지의 상금이 즉시 지급 됩니다. 이 밖에 휴게실에 가면 각종 보드게임과 닌텐도 게임도 즐길 수 있구요.&lt;/p&gt;&lt;p class=&quot;img&quot; style=&quot;text-align: left; &quot;&gt;&lt;img src=&quot;http://xeui.textyle.kr/./files/attach/images/6468/523/038/burningday4.jpg&quot; width=&quot;500&quot; height=&quot;375&quot; rawsrc=&quot;http://xeui.textyle.kr/./files/attach/images/6468/523/038/burningday1.jpg&quot; class=&quot;xe_filesrl_10067&quot;&gt;&lt;br&gt;중식으로 제공된 아웃백 도시락&lt;/p&gt;&lt;p&gt;버닝데이의 또 다른 이름은 사육데이 입니다. 식사부터 야식에 군것질 꺼리까지 1박 2일동안 계속해서 나오기 때문에 그런 별칭이 붙었다죠. 도시락은 식성따라 즐길 수 있도록 여러 종류가 나오는데 그 중 아웃백 도시락이 비주얼이 좋길래 집어 들었습니다.&lt;/p&gt;&lt;p class=&quot;img&quot; style=&quot;text-align: left; &quot;&gt;&lt;img src=&quot;http://xeui.textyle.kr/./files/attach/images/6468/523/038/burningday5.jpg&quot; width=&quot;500&quot; height=&quot;375&quot; rawsrc=&quot;http://xeui.textyle.kr/./files/attach/images/6468/523/038/burningday1.jpg&quot; class=&quot;xe_filesrl_10068&quot;&gt;&lt;br&gt;소스코드 등록 및 발표자에게 지급된 무선 키보드 마우스 세트&lt;/p&gt;&lt;p&gt;먹거리도 먹거리지만 이 행사의 백미는 가장 마지막에 있는 &apos;발표&apos; 시간 입니다. 수십여 참가 팀들은 하루동안의 결과물들을 정확히 &apos;4분&apos;동안 다른 참여자들에게 소개할 수 있습니다. 물론 이건 의무적인것은 아니지만 대부분의 지원자들이 발표를 한답니다.&amp;nbsp;&lt;/p&gt;&lt;p&gt;개인적으로 모든 아이디어에 흥미가 있었던 것은 아니었지만 대부분의 결과물들은 일단 독창적 입니다. 참가자들은 서로 다른 참가팀들의 발표를 보면서 평가를 하게 되는데 공감을 많이 받은 아이디어는 본선에 오르게 되고 본선 진출자는 몇 일 후에 다시 만나서 경합을 벌이게 된답니다.&amp;nbsp;본선에 오른 아이디어들이 빨리 세상의 빛을 볼 수 있다면 좋겠네요.&lt;/p&gt;&lt;p class=&quot;img&quot; style=&quot;text-align: left; &quot;&gt;&lt;img src=&quot;http://xeui.textyle.kr/./files/attach/images/6468/523/038/burningday6.jpg&quot; width=&quot;500&quot; height=&quot;375&quot; rawsrc=&quot;http://xeui.textyle.kr/./files/attach/images/6468/523/038/burningday1.jpg&quot; class=&quot;xe_filesrl_10072&quot;&gt;&lt;br&gt;버닝데이 행사를 총괄하고 있는 권순선님&lt;/p&gt;&lt;p&gt;마지막으로 버닝데이에 참가하면서 느낀 점은 &apos;버닝데이=개발자들의 축제&apos; 라는 것입니다. 공대생들의 유머가 통하고 개발 오덕들이 기를 활짝 펼 수 있는 그런 시간과 공간을 경험할 수 있었습니다. 저는 공대생도 아니고 프로그래머도 아니지만 앞으로 기회가 된다면 매년 참가하고 싶습니다.&amp;nbsp;이런 즐거운 자리를 만들어준 회사와 담당자분들 그리고 함께 했던 동료들에게 감사한 마음입니다.&lt;/p&gt;&lt;/div&gt;</content>
                  
   </entry>
   <entry>
      <title>토트 블로그 유명해 진건가?</title>
      <id>http://www.textyle.kr/38342</id>
      <published>2010-03-05T13:41:34+09:00</published>
      <updated>2010-03-05T13:41:34+09:00</updated>
      <link rel="alternate" type="text/html" href="http://www.textyle.kr/38342"/>
      <link rel="replies" type="text/html" href="http://www.textyle.kr/38342#comment"/>
      <author>
         <name>새봄아빠</name>
               </author>
            <content type="html">&lt;div class=&quot;xe_content&quot;&gt;&lt;div class=&quot;eArea xe_content xe_dr_img&quot;&gt;&lt;p style=&quot;text-align:left; display:block;&quot;&gt;
						&lt;img alt=&quot;&quot; class=&quot;xe_file_srl_1143177&quot; src=&quot;http://yoon.textyle.kr/./files/attach/images/14578/342/038/토트블로그.jpg&quot; width=&quot;600&quot; height=&quot;393&quot; rawsrc=&quot;http://yoon.textyle.kr/./files/attach/images/14578/342/038/토트블로그.jpg&quot;&gt;
					&lt;/p&gt;&lt;/div&gt;&lt;div class=&quot;eArea xe_content xe_dr_txt&quot;&gt;&lt;p&gt;&lt;span style=&quot;font-size: 14px; &quot;&gt;&lt;b&gt;작년&lt;/b&gt;에 토트(thoth.kr)를 개발하고&lt;b&gt; &quot;토트&quot;&lt;/b&gt;라는 검색어를 치면&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style=&quot;font-size: 14px; &quot;&gt;&quot;&lt;b&gt;토트백&quot; &quot;토트넘&quot; 등이 검색만 되었었다.&lt;/b&gt;&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style=&quot;font-size: 14px; &quot;&gt;다시 &lt;b&gt;수개월만에 다시한번 구글링&lt;/b&gt;을 해 보았다.&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style=&quot;font-size: 14px; &quot;&gt;&quot;토트백&quot; &quot;토트넘&quot; 아직도 나온다.&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style=&quot;font-size: 14px; &quot;&gt;하지만, &lt;b&gt;대부분이 토트블로그와 관련된 블로그 포스트라는 것에 놀랐다.&lt;/b&gt;&lt;/span&gt;&lt;/p&gt;&lt;/div&gt;&lt;div class=&quot;eArea xe_content xe_dr_txt&quot;&gt;&lt;p&gt;&lt;span style=&quot;font-size: 16px; &quot;&gt;&lt;b&gt;&quot;토트초대장&quot; &amp;nbsp;167,000건&lt;/b&gt;&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style=&quot;font-size: 16px; &quot;&gt;&lt;b&gt;&quot;토트블로그&quot; &amp;nbsp;626,000건&lt;/b&gt;&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;b&gt;&lt;span style=&quot;font-size: 16px; &quot;&gt;헉!!&lt;/span&gt;&lt;/b&gt;&lt;/p&gt;&lt;/div&gt;&lt;div class=&quot;eArea xe_content xe_dr_img&quot;&gt;&lt;p style=&quot;text-align:left; display:block;&quot;&gt;
						&lt;img alt=&quot;&quot; class=&quot;xe_file_srl_1143205&quot; src=&quot;http://yoon.textyle.kr/./files/attach/images/14578/342/038/토트블로그2.jpg&quot; width=&quot;600&quot; height=&quot;393&quot; rawsrc=&quot;http://yoon.textyle.kr/./files/attach/images/14578/342/038/토트블로그2.jpg&quot;&gt;
					&lt;/p&gt;&lt;/div&gt;&lt;div class=&quot;eArea xe_content xe_dr_txt&quot;&gt;&lt;p&gt;&lt;span style=&quot;font-size: 14px; &quot;&gt;위키백과에서(&lt;span class=&quot;Apple-style-span&quot; style=&quot;line-height: 18px; font-size: 12px; &quot;&gt;&lt;a href=&quot;http://ko.wikipedia.org/wiki/%EB%B8%94%EB%A1%9C%EA%B7%B8&quot;&gt;http://ko.wikipedia.org/wiki/블로그&lt;/a&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style=&quot;font-size: 14px; &quot;&gt;&lt;b&gt;가입형 블로그&lt;/b&gt;에 당당에 자리를 차지한 &lt;b&gt;&quot;토트&quot;&lt;/b&gt;&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style=&quot;font-size: 14px; &quot;&gt;&lt;b&gt;설치형 블로그&lt;/b&gt;에 멋지게 나오는&lt;b&gt; &quot;텍스타일&quot;&lt;/b&gt;&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style=&quot;font-size: 14px; &quot;&gt;토트를 만들어 나가는 입장에서 너무 뿌듯하다.(물론 토트는 사용자들이 만들어 갑니다.^^;;)&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style=&quot;font-size: 14px; &quot;&gt;&lt;b&gt;텍스타일 + 큐브리드 + 리눅스&lt;/b&gt;&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style=&quot;font-size: 14px; &quot;&gt;&lt;b&gt;순수한 오픈소스로만 구성된 IT 전문 블로그 토트&amp;nbsp;&lt;/b&gt;&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style=&quot;font-size: 14px; &quot;&gt;앞으로 더 열심히 만들어 가겠습니다.&lt;/span&gt;&lt;/p&gt;&lt;/div&gt;&lt;div class=&quot;eArea xe_content xe_dr_img&quot;&gt;&lt;p&gt;&lt;img src=&quot;http://gwanwoo.pe.kr/files/attach/images/6444/662/881/881662.jpg&quot; alt=&quot;&quot;&gt;&lt;/p&gt;&lt;p class=&quot;desc&quot;&gt;대단해! 드디어 알아낸거야!&lt;/p&gt;&lt;p&gt;&lt;/p&gt;&lt;p class=&quot;cite&quot;&gt;&lt;cite&gt;출처: &lt;a href=&quot;http://www.google.co.kr/imglanding?q=%EC%9E%A5%EB%82%9C%20%EC%A7%A4%EB%B0%A9&amp;amp;imgurl=./files/attach/images/6444/869/855/855869.gif&amp;amp;imgrefurl=http://www.kimgiza.com:8888/%3Fmid%3Dsumgal%26page%3D4%26document_srl%3D7531&amp;amp;usg=__ljUzpZ86YKYgGQYPYOxm1jTUOWU=&amp;amp;h=264&amp;amp;w=418&amp;amp;sz=17&amp;amp;hl=ko&amp;amp;itbs=1&amp;amp;tbnid=lOa5AbGt8R1sVM:&amp;amp;tbnh=79&amp;amp;tbnw=125&amp;amp;prev=/images%3Fq%3D%25EC%259E%25A5%25EB%2582%259C%2B%25EC%25A7%25A4%25EB%25B0%25A9%26ndsp%3D21%26hl%3Dko%26sa%3DG%26newwindow%3D1&amp;amp;ndsp=21&amp;amp;sa=G&amp;amp;newwindow=1&amp;amp;start=0#tbnid=2pWjQVJEckpY2M&amp;amp;start=595&quot;&gt;장난 짤방 - Google 이미지&lt;/a&gt;&lt;/cite&gt;&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;</content>
                  
   </entry>
   <entry>
      <title>Modal Windowed Login UI.</title>
      <id>http://www.textyle.kr/38264</id>
      <published>2010-03-04T23:47:44+09:00</published>
      <updated>2010-03-04T23:47:44+09:00</updated>
      <link rel="alternate" type="text/html" href="http://www.textyle.kr/38264"/>
      <link rel="replies" type="text/html" href="http://www.textyle.kr/38264#comment"/>
      <author>
         <name>정찬명</name>
               </author>
            <content type="html">&lt;div class=&quot;xe_content&quot;&gt;&lt;p&gt;오늘은 XE에 사용하려고 모달 윈도우 처리된 로그인 UIO(User Interface Object)를 하나 만들었습니다. jQuery를 이용해서 스크립트도 직접 작성해 봤는데 잘 한건지 한 번 봐주시면 좋겠네요.&amp;nbsp;&lt;/p&gt;&lt;p&gt;미리 알려드립니다만 저는 주로 인터렉션을 프로토타이핑 해서 보여줄 목적으로 자바스크립트를 작성하기 때문에 제 블로그에서 보여드리는 예제 코드가 모두 XE에 반영되는 것은 아닙니다.&lt;/p&gt;&lt;div class=&quot;iframe&quot; style=&quot;display: block; &quot;&gt;&amp;lt;iframe frameborder=&quot;0&quot; width=&quot;100%&quot; style=&quot;display: block; height: 336px; &quot; src=&quot;http://naradesign.net/ouif/uio/login/mw/xhtml.html&quot; title=&quot;예제를 새 창으로 열기&quot;&gt;&amp;lt;/iframe&gt;&lt;/div&gt;&lt;p&gt;&lt;a href=&quot;http://naradesign.net/ouif/uio/login/mw/xhtml.html&quot; target=&quot;_blank&quot;&gt;예제를 새 창으로 보기&lt;/a&gt;&lt;/p&gt;&lt;h3 id=&quot;h1267712226002&quot;&gt;HTML&lt;/h3&gt;&lt;ul&gt;&lt;li&gt;&apos;LOG-IN&apos; 링크에 accesskey 속성을 사용. &apos;Alt+L&apos; 또는 &apos;Alt+Shift+L&apos; 키를 사용하면 링크에 직접 접근.&lt;/li&gt;&lt;li&gt;논리적인 키보드 접근 순서. 로그인 레이어를 열거나 닫더라도 포커스는 초기화 되지 않고 문맥에 알맞게 순서를 유지.&lt;/li&gt;&lt;/ul&gt;&lt;h3 id=&quot;h1267711812402&quot;&gt;CSS&lt;/h3&gt;&lt;ul&gt;&lt;li&gt;화면 전체를 덮는 반투명 레이어.&lt;/li&gt;&lt;li&gt;로그인 상자를 화면의 정 중앙에 배치.&lt;/li&gt;&lt;li&gt;서밋 버튼을 텍스트로 처리해서 텍스트를 교체할 수 있음.&lt;/li&gt;&lt;/ul&gt;&lt;h3 id=&quot;h1267711822626&quot;&gt;Javascript&lt;/h3&gt;&lt;ul&gt;&lt;li&gt;&apos;LOG-IN&apos; 링크를 클릭해서 모달 윈도우 처리된 레이어 띄우기.&lt;/li&gt;&lt;li&gt;인풋에 포커스가 들어가거나 빠질 때 기본 &apos;밸류 값&apos;을 지우거나 남겨두기.&lt;/li&gt;&lt;li&gt;&apos;로그인 유지&apos; 항목에 체크하면 경고문 보여주기.&lt;/li&gt;&lt;li&gt;&apos;ID/PW&apos;를 입력하지 않았을 때 상황에 맞는 알럿 띄우기.&lt;/li&gt;&lt;li&gt;&apos;Open ID&apos; 링크를 클릭하면 오픈 아이디 화면으로 전환하기.&lt;/li&gt;&lt;li&gt;&apos;X&apos; 버튼을 누르면 창 닫기.&lt;/li&gt;&lt;/ul&gt;&lt;h3 id=&quot;h1267713492795&quot;&gt;P.S.&lt;/h3&gt;&lt;p&gt;저는 얼마 전부터 &lt;a href=&quot;http://www.textyle.kr/&quot; target=&quot;_self&quot;&gt;텍스타일&lt;/a&gt;에서 글을 쓰고 있습니다. 여러분이 만약 이 글을 &lt;a href=&quot;http://naradesign.net/&quot; target=&quot;_self&quot;&gt;제 워드프레스&lt;/a&gt;에서 보셨다면 배달된 글을 보고 계신 겁니다. 텍스타일에서 작성한 글은 워드프레스, 미투데이, 트위터 등으로 자동으로 배달 된답니다. 번거롭게 퍼다 나르고 다닐 일이 없어서 좋네요. 텍스타일 한 번 사용해 보세요. 즐거운 글쓰기 경험도 해 볼겸 해서 말이죠. ^^&lt;/p&gt;&lt;/div&gt;</content>
                  
   </entry>
   <entry>
      <title>CSS Drop Down : Emulate Select/Option.</title>
      <id>http://www.textyle.kr/36541</id>
      <published>2010-02-18T02:37:30+09:00</published>
      <updated>2010-02-18T02:37:30+09:00</updated>
      <link rel="alternate" type="text/html" href="http://www.textyle.kr/36541"/>
      <link rel="replies" type="text/html" href="http://www.textyle.kr/36541#comment"/>
      <author>
         <name>정찬명</name>
               </author>
            <content type="html">&lt;div class=&quot;xe_content&quot;&gt;&lt;p&gt;서식 제어 요소(Form Control Element)를 디자인 하는 것은 &lt;a href=&quot;http://naradesign.net/wp/2008/10/11/159/&quot; target=&quot;_self&quot;&gt;상황에 따라 접근성을 떨어뜨리는 경우가 있기 때문에 제한되어야&lt;/a&gt; 하고 신중하게 사용해야 합니다. 이미 이전에 포스팅을 했지만 다시 한번 환기하는 차원에서 제한되어야 하는 서식 요소들은 어떤 것들이 있는지 살펴보겠습니다.&lt;/p&gt;&lt;p&gt;&lt;span class=&quot;Apple-style-span&quot; style=&quot;line-height: 19px; font-size: 13px; font-family: AppleGothic, 나눔고딕, NanumGothic, &apos;맑은 고딕&apos;, &apos;Malgun Gothic&apos;, 돋움, Dotum, 굴림, Gulim, sans-serif; &quot;&gt;&lt;/span&gt;&lt;/p&gt;&lt;table border=&quot;1&quot; style=&quot;font-family: AppleGothic, 나눔고딕, NanumGothic, &apos;맑은 고딕&apos;, &apos;Malgun Gothic&apos;, 돋움, Dotum, 굴림, Gulim, sans-serif; font-size: 1em; border-top-width: 1px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 1px; border-top-style: solid; border-right-style: initial; border-bottom-style: initial; border-left-style: solid; border-top-color: rgb(204, 204, 204); border-right-color: initial; border-bottom-color: initial; border-left-color: rgb(204, 204, 204); margin-bottom: 15px; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; &quot;&gt;&lt;caption style=&quot;text-align: left; font-weight: bold; padding-top: 0px; padding-right: 0px; padding-bottom: 0.5em; padding-left: 0px; &quot;&gt;스타일 변경이 제한된 서식 제어 요소들&lt;/caption&gt;&lt;thead&gt;&lt;tr&gt;&lt;th scope=&quot;col&quot; style=&quot;border-top-width: 0px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 0px; border-top-style: initial; border-right-style: solid; border-bottom-style: solid; border-left-style: initial; border-top-color: initial; border-right-color: rgb(204, 204, 204); border-bottom-color: rgb(204, 204, 204); border-left-color: initial; text-align: left; vertical-align: top; padding-top: 2px; padding-right: 5px; padding-bottom: 2px; padding-left: 5px; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(244, 244, 244); background-position: initial initial; background-repeat: initial initial; &quot;&gt;HTML Markup&lt;/th&gt;&lt;th scope=&quot;col&quot; style=&quot;border-top-width: 0px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 0px; border-top-style: initial; border-right-style: solid; border-bottom-style: solid; border-left-style: initial; border-top-color: initial; border-right-color: rgb(204, 204, 204); border-bottom-color: rgb(204, 204, 204); border-left-color: initial; text-align: left; vertical-align: top; padding-top: 2px; padding-right: 5px; padding-bottom: 2px; padding-left: 5px; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(244, 244, 244); background-position: initial initial; background-repeat: initial initial; &quot;&gt;View&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tfoot&gt;&lt;/tfoot&gt;&lt;tbody&gt;&lt;tr&gt;&lt;th scope=&quot;row&quot; style=&quot;border-top-width: 0px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 0px; border-top-style: initial; border-right-style: solid; border-bottom-style: solid; border-left-style: initial; border-top-color: initial; border-right-color: rgb(204, 204, 204); border-bottom-color: rgb(204, 204, 204); border-left-color: initial; text-align: left; vertical-align: top; padding-top: 2px; padding-right: 5px; padding-bottom: 2px; padding-left: 5px; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(244, 244, 244); background-position: initial initial; background-repeat: initial initial; &quot;&gt;input type=&quot;checkbox&quot;&lt;/th&gt;&lt;td style=&quot;border-top-width: 0px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 0px; border-top-style: initial; border-right-style: solid; border-bottom-style: solid; border-left-style: initial; border-top-color: initial; border-right-color: rgb(204, 204, 204); border-bottom-color: rgb(204, 204, 204); border-left-color: initial; text-align: left; vertical-align: top; padding-top: 2px; padding-right: 5px; padding-bottom: 2px; padding-left: 5px; &quot;&gt;&lt;input type=&quot;checkbox&quot; style=&quot;font-family: AppleGothic, 나눔고딕, NanumGothic, &apos;맑은 고딕&apos;, &apos;Malgun Gothic&apos;, 돋움, Dotum, 굴림, Gulim, sans-serif; font-size: 1em; &quot;&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th scope=&quot;row&quot; style=&quot;border-top-width: 0px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 0px; border-top-style: initial; border-right-style: solid; border-bottom-style: solid; border-left-style: initial; border-top-color: initial; border-right-color: rgb(204, 204, 204); border-bottom-color: rgb(204, 204, 204); border-left-color: initial; text-align: left; vertical-align: top; padding-top: 2px; padding-right: 5px; padding-bottom: 2px; padding-left: 5px; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(244, 244, 244); background-position: initial initial; background-repeat: initial initial; &quot;&gt;input type=&quot;radio&quot;&lt;/th&gt;&lt;td style=&quot;border-top-width: 0px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 0px; border-top-style: initial; border-right-style: solid; border-bottom-style: solid; border-left-style: initial; border-top-color: initial; border-right-color: rgb(204, 204, 204); border-bottom-color: rgb(204, 204, 204); border-left-color: initial; text-align: left; vertical-align: top; padding-top: 2px; padding-right: 5px; padding-bottom: 2px; padding-left: 5px; &quot;&gt;&lt;input type=&quot;radio&quot; style=&quot;font-family: AppleGothic, 나눔고딕, NanumGothic, &apos;맑은 고딕&apos;, &apos;Malgun Gothic&apos;, 돋움, Dotum, 굴림, Gulim, sans-serif; font-size: 1em; &quot;&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th scope=&quot;row&quot; style=&quot;border-top-width: 0px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 0px; border-top-style: initial; border-right-style: solid; border-bottom-style: solid; border-left-style: initial; border-top-color: initial; border-right-color: rgb(204, 204, 204); border-bottom-color: rgb(204, 204, 204); border-left-color: initial; text-align: left; vertical-align: top; padding-top: 2px; padding-right: 5px; padding-bottom: 2px; padding-left: 5px; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(244, 244, 244); background-position: initial initial; background-repeat: initial initial; &quot;&gt;input type=&quot;file&quot;&lt;/th&gt;&lt;td style=&quot;border-top-width: 0px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 0px; border-top-style: initial; border-right-style: solid; border-bottom-style: solid; border-left-style: initial; border-top-color: initial; border-right-color: rgb(204, 204, 204); border-bottom-color: rgb(204, 204, 204); border-left-color: initial; text-align: left; vertical-align: top; padding-top: 2px; padding-right: 5px; padding-bottom: 2px; padding-left: 5px; &quot;&gt;&lt;input type=&quot;file&quot; style=&quot;font-family: AppleGothic, 나눔고딕, NanumGothic, &apos;맑은 고딕&apos;, &apos;Malgun Gothic&apos;, 돋움, Dotum, 굴림, Gulim, sans-serif; font-size: 1em; &quot;&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th scope=&quot;row&quot; style=&quot;border-top-width: 0px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 0px; border-top-style: initial; border-right-style: solid; border-bottom-style: solid; border-left-style: initial; border-top-color: initial; border-right-color: rgb(204, 204, 204); border-bottom-color: rgb(204, 204, 204); border-left-color: initial; text-align: left; vertical-align: top; padding-top: 2px; padding-right: 5px; padding-bottom: 2px; padding-left: 5px; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(244, 244, 244); background-position: initial initial; background-repeat: initial initial; &quot;&gt;input type=&quot;hidden&quot;&lt;/th&gt;&lt;td style=&quot;border-top-width: 0px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 0px; border-top-style: initial; border-right-style: solid; border-bottom-style: solid; border-left-style: initial; border-top-color: initial; border-right-color: rgb(204, 204, 204); border-bottom-color: rgb(204, 204, 204); border-left-color: initial; text-align: left; vertical-align: top; padding-top: 2px; padding-right: 5px; padding-bottom: 2px; padding-left: 5px; &quot;&gt;화면 출력 안됨&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th scope=&quot;row&quot; style=&quot;border-top-width: 0px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 0px; border-top-style: initial; border-right-style: solid; border-bottom-style: solid; border-left-style: initial; border-top-color: initial; border-right-color: rgb(204, 204, 204); border-bottom-color: rgb(204, 204, 204); border-left-color: initial; text-align: left; vertical-align: top; padding-top: 2px; padding-right: 5px; padding-bottom: 2px; padding-left: 5px; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(244, 244, 244); background-position: initial initial; background-repeat: initial initial; &quot;&gt;select, option&lt;/th&gt;&lt;td style=&quot;border-top-width: 0px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 0px; border-top-style: initial; border-right-style: solid; border-bottom-style: solid; border-left-style: initial; border-top-color: initial; border-right-color: rgb(204, 204, 204); border-bottom-color: rgb(204, 204, 204); border-left-color: initial; text-align: left; vertical-align: top; padding-top: 2px; padding-right: 5px; padding-bottom: 2px; padding-left: 5px; &quot;&gt;&lt;select name=&quot;select&quot; style=&quot;font-family: AppleGothic, 나눔고딕, NanumGothic, &apos;맑은 고딕&apos;, &apos;Malgun Gothic&apos;, 돋움, Dotum, 굴림, Gulim, sans-serif; font-size: 1em; &quot;&gt;&lt;option&gt;Option&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;p&gt;&lt;/p&gt;&lt;h3 id=&quot;h1266424559111&quot;&gt;서식 제어 요소의 디자인을 제한하는 이유&lt;/h3&gt;&lt;p&gt;이런 서식 제어 요소들의 디자인을 변경하는 것은 일단 브라우저들이 지원하지 않습니다. 이런 이유 때문에 이것을 디자인 하려는 시도는 실제로는 기능하지 않는 가짜 마크업을 남발하게되고 웹 접근성을 떨어뜨리는 요인으로 작용합니다. 하나의 콘트롤을 디자인 하기 위하여 화면에 보이는 마크업과 실제로 기능을 수행하는 마크업을 각각 따로 작성하게 되면 화면낭독기 사용자들은 화면 표시를 위한 가짜 마크업 때문에 곤경에 빠지는 상황이 연출됩니다.&lt;/p&gt;&lt;p&gt;그리고 간혹 단순한 텍스트 링크 기능을 수행함에도 불구하고&lt;span class=&quot;Apple-style-span&quot; style=&quot;line-height: 19px; font-size: 13px; font-family: AppleGothic, 나눔고딕, NanumGothic, &apos;맑은 고딕&apos;, &apos;Malgun Gothic&apos;, 돋움, Dotum, 굴림, Gulim, sans-serif; &quot;&gt;&lt;input type=&quot;radio&quot; style=&quot;font-family: AppleGothic, 나눔고딕, NanumGothic, &apos;맑은 고딕&apos;, &apos;Malgun Gothic&apos;, 돋움, Dotum, 굴림, Gulim, sans-serif; font-size: 1em; &quot;&gt;&lt;span class=&quot;Apple-style-span&quot; style=&quot;font-family: Gulim; line-height: 18px; font-size: 12px; &quot;&gt;&amp;nbsp;라디오 버튼을 장식적인 요소로 사용한 다음 라디오 콘트롤에 자바스크립트를 입혀서 페이지 이동을 처리하는 고품격(?) 사용자 경험을 제공하기도 하는데 매우 잘못된 방법중의 하나 입니다.&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;&lt;p&gt;모든 서식 제어 요소들은 사용자가 &apos;전송&apos; 버튼을 누르기 직전까지 아무짓도 하지 않고 기다려야 할 의무가 있습니다. 왜냐하면 그것이 바로 서식 제어 요소들의 올바른 사용법이고 시각 장애인들은 그런 표준화된 그리고 전통적인 사용자 인터렉션에 의지해서 웹을 탐색하고 있기 때문입니다.&lt;/p&gt;&lt;blockquote class=&quot;citation&quot;&gt;&lt;p&gt;&quot;라디오 버튼을 눌렀을 뿐인데 페이지가 이동할 줄은 몰랐어요. 저는 전송 버튼을 누르지도 않았거든요.&quot;&lt;/p&gt;&lt;/blockquote&gt;&lt;h3 id=&quot;h1266424626801&quot;&gt;&amp;lt;select&amp;gt; 콘트롤을 본래 목적에 맞게 사용하기&lt;/h3&gt;&lt;p&gt;한편 서식 제어 요소를 사용할 때 사용자 입력을 전송하는데 쓰지 않았다고 해서 무조건 틀렸다고 말할 수도 없습니다. CSS가 일반적으로 널리 퍼지기 이전에 서식 제어 요소들은 다른 HTML 요소들이 흉내낼 수 없는 효과적인 UI 콘트롤을 제공했기 때문에 그 이점만을 취하기 위한 활용사례가 많았습니다. 현재까지도 흔하게 볼 수 있는 예가 바로 &amp;lt;select&amp;gt; 콘트롤 입니다. 본래의 목적은 단일 또는 다중 선택된 사용자의 선택값을 서버측에 전송하기 위한 목적이었지만 &apos;패밀리 사이트 바로가기, 유관 기관으로 이동&apos;과 같이 단순하게 텍스트 링크로 처리해도 될만한 UI에 지금까지도 여전히 &amp;lt;select&amp;gt; 요소를 사용하고 있습니다. 이 때 자바스크립트로 URL 값을 처리해서 넘기는 경우도 있고 서버측 스크립트로 값을 처리해서 넘기는 경우도 있는데 어느편이 더 유니버설한 설계 방법인지는 여러분이 직접 판단해 보시기 바랍니다.&lt;/p&gt;&lt;p&gt;하지만 한 발 더 나아가 저는 더 이상 &amp;lt;select&amp;gt; 콘트롤을 이용하여 페이지 이동하는 기법을 사용할 필요가 없다고 생각합니다. 자바스크립트나 서버측 스크립트를 작성해서 페이지를 이동하는 방법보다 더 쉬운 방법이 있기 때문입니다. CSS 배워서 이런데 써먹을 수 있습니다. &amp;lt;select&amp;gt; 콘트롤은 이제 그만 휴가 보내고 CSS에게 일을 시켜 보세요. &amp;lt;select&amp;gt; 요소의 드롭다운 콘트롤은 고작 &apos;숨은 링크 목록&apos;을 토글해서 보이거나 숨기는 인터렉션일 뿐입니다.&lt;/p&gt;&lt;h3 id=&quot;h1266425081963&quot;&gt;그럼에도 불구하고 &amp;lt;select&amp;gt; 콘트롤이 사랑받는 이유&lt;/h3&gt;&lt;p&gt;요소 본래의 목적에 맞지 않는 마크업과 복잡한 스크립트의 사용을 유발함에도 불구하고 &amp;lt;select&amp;gt; 콘트롤은 여전히 기획자, 디자이너, 개발자에게 사랑받고 있습니다. 왜 그럴까요?&lt;/p&gt;&lt;ul&gt;&lt;li&gt;좁은 공간을 효과적으로 사용할 수 있기 때문에&lt;/li&gt;&lt;li&gt;클릭하면 숨은 목록을 볼 수 있는 전통적인 인터페이스로써 이미 대중에게 학습되었기 때문에&lt;/li&gt;&lt;li&gt;오랜 세월에 걸쳐 잘 작성된 레거시 코드가 있고 새로 만들 때 복사 후 붙여넣기만 하면 되니까&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;정도로 요약할 수 있겠습니다. 결국 우리는 &amp;lt;select&amp;gt; 라는 콘트롤을 본래의 목적에 맞게 사용하되 &apos;긴 직사각형의 우측 끝에 화살표가 달린 모양&apos;만 취하면 되는 겁니다.&lt;/p&gt;&lt;h3 id=&quot;h1266425651963&quot;&gt;결론 : &amp;lt;select&amp;gt; 형태는 취하고 마크업은 버리자&lt;/h3&gt;&lt;div class=&quot;iframe&quot; style=&quot;display: block; &quot;&gt;&amp;lt;iframe frameborder=&quot;0&quot; width=&quot;100%&quot; style=&quot;display: block; height: 230px; &quot; src=&quot;http://naradesign.net/ouif/uio/select/xhtml.html&quot; title=&quot;&quot;&gt;&amp;lt;/iframe&gt;&lt;/div&gt;&lt;p&gt;위의 두 예제는 같은 모양을 하고 있지만 첫 번째 예제는 링크이고 두 번째 예제는 단일 선택을 위한 폼 콘트롤 입니다. 폼 콘트롤 우측에 &apos;GO&apos; 버튼이 보이시나요? &apos;사용자가 폼을 전송하기 전까지는 아무짓도 하지 않아야 한다&apos;는 원칙을 실천하기 위하여 존재하는 버튼 입니다. &apos;GO&apos; 버튼이 없으면 어떻게 되냐구요? 아마도 키보드 사용자는 다른 항목을 선택할 기회를 갖지 못하고 첫 번째 항목을 선택하는 순간 이미 다른 페이지로 이동되어 있거나 또는 전송 버튼을 찾느라 곤경에 빠질 것입니다. 저 &apos;GO&apos; 버튼이 있음으로 인해서 마우스를 사용하는 대부분의 사용자들은 불편함을 느낄 수도 있을 것입니다. 하지만 &apos;누구나 사용&apos;할 수 있도록 유니버설하게 개선되었기 때문에 &apos;인류 행복의 총량&apos;에는 큰 변화가 없을 것입니다.&amp;nbsp;&lt;/p&gt;&lt;p&gt;다행히도 저렇게 단일 선택 옵션이 하나만 존재하는 경우 폼 대신 첫 번째 예제와 같이 링크로 처리할 수 있는 경우가 거의 대부분 입니다. 폼 대신 링크로 처리하게 되면 &apos;GO&apos; 버튼이 필요가 없기 때문에 모든 사람들이 더 기뻐할 것입니다. 링크 목록은 클릭하기 전까지 펼침 상태로 존재하고 Enter 키를 받아야만 페이지 이동을 하기 때문에 &apos;GO&apos; 버튼이 없어도 키보드만으로 제어를 할 수가 있죠.&lt;/p&gt;&lt;p&gt;위 제시된 예제는 처리해야 할 콘텐츠가 &apos;링크&apos; 인지 또는 &apos;진짜 폼의 선택&apos;을 위한 것인지 명확하게 이해한 다음 사용해야 합니다. 단순히 링크로 처리해야 할(처리해도 될) 항목을 두 번째 예제로 마크업 한다면 오늘 제 포스팅은 말짱 도루묵 입니다. 부디 의미와 목적에 맞는 마크업을 선택해서 사용해 주시것을 부탁 드립니다. 이번 예제도 &lt;a href=&quot;http://mygony.com/&quot; target=&quot;_self&quot;&gt;행복한고니&lt;/a&gt;로부터 도움을 받았습니다. 요즈음은 행복한고니가 짬짬이 알려주는 jQuery 덕분에 아주 즐거운 나날들을 보내고 있답니다. ^^&lt;/p&gt;&lt;/div&gt;</content>
                  
   </entry>
   <entry>
      <title>CSS Pagination Without Image.</title>
      <id>http://www.textyle.kr/36164</id>
      <published>2010-02-13T00:27:37+09:00</published>
      <updated>2010-02-13T00:27:37+09:00</updated>
      <link rel="alternate" type="text/html" href="http://www.textyle.kr/36164"/>
      <link rel="replies" type="text/html" href="http://www.textyle.kr/36164#comment"/>
      <author>
         <name>정찬명</name>
               </author>
            <content type="html">&lt;div class=&quot;xe_content&quot;&gt;&lt;p&gt;오늘은 민족 대 명절 기념으로 예전에 만들어 두었던 페이지네이션 예제를 소개해 드립니다. 아래 정도의 레퍼런스만 있다면 더 이상 페이지네이션 디자인을 하지 않아도 될것 같네요. 단 하나의 이미지도 사용하지 않고 만들었기 때문에 그냥 HTML/CSS 소스를 퍼가서 붙여넣기만 하시면 되요. 참 편리 하겠죠? ^^&lt;br&gt;&lt;/p&gt;&lt;div style=&quot;display: block;&quot; class=&quot;iframe&quot;&gt;&amp;lt;iframe title=&quot;예제를 새 창으로 보기&quot; src=&quot;http://naradesign.net/ouif/uio/navigation/pagination/regular/xhtml.html&quot; style=&quot;display: block; height: 131px;&quot; width=&quot;100%&quot; frameborder=&quot;0&quot;&gt;&amp;lt;/iframe&gt;&lt;span&gt;&lt;a href=&quot;http://naradesign.net/ouif/uio/navigation/pagination/regular/xhtml.html&quot; target=&quot;_blank&quot;&gt;예제를 새 창으로 보기&lt;/a&gt;&lt;/span&gt;&lt;/div&gt;&lt;div style=&quot;display: block;&quot; class=&quot;iframe&quot;&gt;&amp;lt;iframe title=&quot;예제를 새 창으로 보기&quot; src=&quot;http://naradesign.net/ouif/uio/navigation/pagination/simple/xhtml.html&quot; style=&quot;display: block; height: 78px;&quot; width=&quot;100%&quot; frameborder=&quot;0&quot;&gt;&amp;lt;/iframe&gt;&lt;span&gt;&lt;a target=&quot;_blank&quot; href=&quot;http://naradesign.net/ouif/uio/navigation/pagination/simple/xhtml.html&quot;&gt;예제를 새 창으로 보기&lt;/a&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;iframe&quot;&gt;&amp;lt;iframe title=&quot;예제를 새 창으로 보기&quot; src=&quot;http://naradesign.net/ouif/uio/navigation/pagination/complex/xhtml.html&quot; style=&quot;display: block; height: 315px;&quot; width=&quot;100%&quot; frameborder=&quot;0&quot;&gt;&amp;lt;/iframe&gt;&lt;span&gt;&lt;a target=&quot;_blank&quot; href=&quot;http://naradesign.net/ouif/uio/navigation/pagination/complex/xhtml.html&quot;&gt;예제를 새 창으로 보기&lt;/a&gt;&lt;/span&gt;&lt;/div&gt;&lt;p&gt;이렇게 페이지네이션을 만들 때 현재 페이지를 향한 링크는 걸지 않는 것이 사용성이 더 좋습니다. 자기 페이지를 향한 링크가 필요하지 않기 때문이구요. 시각장애인들에게는 현재 위치가 어딘지 알려주는 이정표와도 같은 역할을 하기 때문입니다. 저는 현재 페이지를 &lt;span style=&quot;font-weight: bold;&quot;&gt;&amp;lt;a&amp;gt;&lt;/span&gt; 대신 &lt;span style=&quot;font-weight: bold;&quot;&gt;&amp;lt;strong&amp;gt;&lt;/span&gt; 요소로 마크업 했습니다. 현재 페이지의 번호를 &lt;span style=&quot;font-weight: bold;&quot;&gt;&amp;lt;a&amp;gt;&lt;/span&gt; 요소로 마크업 하고 스타일시트를 이용해서 색상이나 글꼴 굵기를 바꾸는 사례는 접근성이 좋지 않은 사례 입니다.&lt;br&gt;&lt;/p&gt;&lt;/div&gt;</content>
                  <category term="CSS"/>
            <category term="Pagination"/>
            
   </entry>
   <entry>
      <title>CSS Navigation Bar.</title>
      <id>http://www.textyle.kr/35991</id>
      <published>2010-02-11T00:38:48+09:00</published>
      <updated>2010-02-11T14:06:51+09:00</updated>
      <link rel="alternate" type="text/html" href="http://www.textyle.kr/35991"/>
      <link rel="replies" type="text/html" href="http://www.textyle.kr/35991#comment"/>
      <author>
         <name>정찬명</name>
               </author>
            <content type="html">&lt;div class=&quot;xe_content&quot;&gt;&lt;p&gt;최근 저희 팀에서는 ProjectXE 라는 것을 준비하고 있습니다. 이슈트래커 또는 버그 트래킹 시스템이라고 불리우는 종류의 프로그램이죠. 현재&amp;nbsp;&lt;a href=&quot;http://issuetracker.xpressengine.net/&quot; target=&quot;_self&quot;&gt;issuetrackerXE&lt;/a&gt; 라는 이름으로 배포되고 있는 모듈의 기능과 디자인을 조금 더 개선시킨 패키지 버전이라고 볼 수 있습니다. 제가 직접 기획도 했으니까 나중에 배포가 시작되면 피드백도 부탁드려야 겠네요.&lt;/p&gt;&lt;p&gt;이번에는 운이 좋게도 디자인팀으로부터 지원을 받았는데요. 이렇게 디자인팀으로부터 지원을 받은 디자인은 품질이 상당히 좋아서 한 번 쓰고 말기에는 정말 아깝더라구요. 재 활용 가치가 있는 UI 콤포넌트는 가끔 처음부터 재 사용을 염두해 두고 설계를 합니다. 물론 시간이 무척 오래 걸리는 단점은 있지만 다른 누군가의 시간을 분명히 단축해 줄꺼라 믿고 있습니다.&lt;/p&gt;&lt;p&gt;오늘 공유해 드릴 UI 콤포넌트는 평범한 네비게이션 바 입니다. 이런 종류의 네비게이션은 너무 흔해서 일년에 열두번도 더 코딩을 하지만 항상 재 사용을 염두하지는 않았기 때문에 할 때마다 새로 만들고 처음부터&amp;nbsp;다르게 코딩 합니다. 물론 디자인이 조금씩 달라지는 것도 이유가 있겠지만 다소 소모적인 부분이 있었던 것도 사실입니다. 보기에 평범해 보이지만 재 사용과 보편적 설계를 위해서 제가 이 네비게이션 바에 얼마나 많은 정성을 쏟았는지 한 번 설명드려 보겠습니다.&lt;/p&gt;&lt;div class=&quot;iframe&quot; style=&quot;&quot;&gt;&amp;lt;iframe frameborder=&quot;0&quot; width=&quot;100%&quot; style=&quot;display: block; height: 200px; &quot; src=&quot;http://naradesign.net/ouif/uio/navigation/bar/xhtml.html&quot; title=&quot;CSS Navigation Bar. 새 창으로 보기&quot;&gt;&amp;lt;/iframe&gt;&lt;span&gt;CSS Navigation Bar. &lt;a href=&quot;http://naradesign.net/ouif/uio/navigation/bar/xhtml.html&quot; target=&quot;_blank&quot;&gt;새 창으로 보기&lt;/a&gt;&lt;/span&gt;&lt;/div&gt;&lt;h3 id=&quot;h1265811047234&quot;&gt;보편적이고 사용성이 좋은&lt;/h3&gt;&lt;p&gt;수평 네비게이션은 보편적인 형태지만 하위 메뉴를 처리하는 방법에는 크게 두 가지 형태가 있습니다. 하위 메뉴를 &lt;a href=&quot;http://www.president.go.kr/kr/index.php&quot; target=&quot;_self&quot;&gt;수평으로 늘어뜨리거나&lt;/a&gt; 또는 위 예제와 같이 &lt;a href=&quot;http://www.whitehouse.gov/&quot; target=&quot;_self&quot;&gt;수직으로 늘어뜨리거나&lt;/a&gt;. 그런데 이 두 가지 형태의 메뉴 구조는 사용성이 크게 다릅니다. 하위 메뉴를 수직으로 늘어뜨리는 것이 사용성과 확장성이 훨씬 좋습니다.&lt;/p&gt;&lt;p&gt;하위 메뉴를 수평으로 열게 되면 사용자는 정확하게 선택하기 위하여 &apos;L&apos;자 모양으로 마우스 포인터를 이동시켜야 합니다. 게다가 하위 메뉴 영역을 벗어날 때 하위 메뉴가 사라지도록 처리하는 경우 사용성은 더 나빠집니다. 원하는 메뉴 링크까지 이동하려면 조심스럽게 마우스 포인터를 옮겨야 하니까요. 하위 메뉴를 수직으로 펼치면 마우스의 이동 괘적은 &apos;I&apos;자 모양을 그리게 되고 마우스를 옮기는 과정에서 메뉴가 닫힐 위험은 사라집니다.&amp;nbsp;&lt;/p&gt;&lt;h3 id=&quot;h1265811982648&quot;&gt;웹 표준과 접근성을 지키는&lt;/h3&gt;&lt;p&gt;이런 메뉴 구조를 테이블 &amp;lt;table&amp;gt; 요소를 사용해서 마크업하면 의미에도 맞지 않고 접근성도 떨어집니다. 네비게이션 요소는 HTML로 표현할 때 &apos;목록&apos; 요소 &amp;lt;ul&amp;gt;, &amp;lt;li&amp;gt;로 마크업 해야 합니다. 동등한 수준의 내용이 같은 계층에서 여러번 반복 된다면 &apos;목록&apos;입니다. 시각장애인이 사용하는 화면 낭독기는 이런 목록에 대하여 목록의 &apos;시작, 끝, 단계 그리고 항목의 개수&apos;를 음성으로 알림으로써 목록에 대한 이해를 돕습니다. 상기 예제에서 &apos;CSS X&apos; 버튼을 누르면 네비게이션이 어떤 HTML 구조로 마크업 되어 있는지 확인할 수 있습니다. 이렇게 코딩된 네비게이션 바는 다음과 같은 장점을 갖습니다.&lt;/p&gt;&lt;ul&gt;&lt;li&gt;상-하위 계층 관계가 논리적으로 처리되어 CSS를 지원하지 않거나 걷어낸 장치(예:모바일)에서도 이해하기 쉽습니다.&lt;/li&gt;&lt;li&gt;모든 항목에 키보드 접근이 가능하고 키보드 접근 순서가 의미있게 처리되어 있습니다.&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;이 네비게이션 바는 키보드만을 사용할 수 밖에 없는 시각장애인과 지체장애인도 사용할 수 있습니다. 키보드만으로 탐색을 시도해 보세요.&lt;/p&gt;&lt;h3 id=&quot;h1265813663055&quot;&gt;유연하고 확장하기 좋은&lt;/h3&gt;&lt;p&gt;하위 메뉴의 개수가 상당히 많이 늘어나는 상황에서 수평으로 열리는 하위 메뉴는 필연적으로 줄바꿈을 동반하거나 메뉴의 개수를 제한하게 되지만 수직으로 열리는 메뉴는 그럴 필요가 없기 때문에 메뉴 데이터가 가변적인 상황에서 확장성이 더 좋습니다.&lt;/p&gt;&lt;p&gt;메뉴의 전체적인 너비는 레이아웃에 맞게 가변폭으로 조절되고 메뉴 항목의 너비도 메뉴 이름의 길이에 따라 모두 가변폭으로 처리되어 있습니다. 디자인 때문에 글자 개수를 자르거나 제한 할 필요가 없습니다.&lt;/p&gt;&lt;p&gt;네비게이션 바의 색상을 바꾸기 위해 새로 이미지를 컷팅할 필요가 없습니다. CSS 편집을 통해 배경색과 보더 색상만 변경해 주면 끝입니다. 은은하게 처리된 그라디언트 효과는 배경색상 위에 반투명 흰색 그라디언트 PNG 이미지를 덧붙이는 기법으로 처리 했습니다.&lt;/p&gt;&lt;h3 id=&quot;h1265813998132&quot;&gt;이미 널리 쓰이고 있는&lt;/h3&gt;&lt;p&gt;&lt;a href=&quot;http://jquery.com/&quot; target=&quot;_self&quot;&gt;jQuery&lt;/a&gt; 자바스크립트 프레임웍을 사용했기 때문에 약간의 자바스크립트 코드를 추가하거나 변형하면 누구나 쉽게 사용할 수 있습니다. 물론 지금 그대로 사용해도 될만큼 이미 스크립트가 잘 처리되어 있습니다. 자바스크립트는 &lt;a href=&quot;http://mygony.com/&quot; target=&quot;_self&quot;&gt;행복한고니&lt;/a&gt;에 의해 처리 되었습니다.&lt;/p&gt;&lt;h3 id=&quot;h1265815149574&quot;&gt;브라우저 호환성&lt;/h3&gt;&lt;p&gt;다음과 같은 브라우저에서 테스트 되었고 호환성이 확보되어 있습니다.&lt;/p&gt;&lt;ul&gt;&lt;li&gt;Internet Explorer 6&lt;/li&gt;&lt;li&gt;Internet Explorer 7&lt;/li&gt;&lt;li&gt;Internet Explorer 8&lt;/li&gt;&lt;li&gt;Firefox 3&lt;/li&gt;&lt;li&gt;Chrome 4&lt;/li&gt;&lt;li&gt;Safari 4&lt;/li&gt;&lt;li&gt;Opera 10&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;이 네비게이션을 처리하기 위하여 테스트 했던 거의 모든 브라우저들의 버그를 다 만났던것 같습니다. 여러분이 보시기에 HTML 코드에 &apos;이건 왜 이렇게 마크업을 했지?&apos; 라고 의문이 든다면 그 부분이 바로 그 흔적 입니다. 특히 IE7 브라우저의 경우 링크 영역(width)을 제대로 렌더링하지 못하는 버그 때문에 상당히 고전을 했는데 결국 방법을 찾지 못하고 자바스크립트의 도움을 받아서 디버깅 했습니다. 코딩하는데 1.5일이 걸렸고 디버깅하는 시간도 1.5일이나 걸렸습니다. 3일동안 쳐다보고 있으니 아주 지겨워 죽겠더라구요.&lt;/p&gt;&lt;/div&gt;</content>
                  <category term="CSS"/>
            <category term="XE"/>
            <category term="웹 기획"/>
            <category term="웹 디자인"/>
            <category term="웹 접근성"/>
            <category term="웹 표준"/>
            <category term="자바스크립트"/>
            
   </entry>
   <entry>
      <title>HTML5로 바라본 애플 그리고 스티브 잡스</title>
      <id>http://www.textyle.kr/35261</id>
      <published>2010-02-02T09:36:17+09:00</published>
      <updated>2010-03-10T13:04:52+09:00</updated>
      <link rel="alternate" type="text/html" href="http://www.textyle.kr/35261"/>
      <link rel="replies" type="text/html" href="http://www.textyle.kr/35261#comment"/>
      <author>
         <name>zero</name>
               </author>
            <content type="html">&lt;div class=&quot;xe_content&quot;&gt;&lt;h3 id=&quot;h1265064174616&quot;&gt;애플&lt;/h3&gt;&lt;p class=&quot;img&quot; style=&quot;text-align: center;&quot;&gt;&lt;img src=&quot;./files/attach/images/4/257/035/35257.jpg&quot; height=&quot;129&quot; width=&quot;107&quot;&gt;&lt;br&gt;apple - 출처: apple - Google 검색&lt;/p&gt;&lt;p&gt;한 입 베어먹힌 사과 모양의 로고 이미지.&lt;br&gt;단순한 사과 그림이지만 이 그림을 보면 누구나 시가총액 1458억 달러 정도로 구글마저 제치며 세계 최고의 IT 회사로 떠오른 Apple Computer Inc. 를 &amp;nbsp;떠올리지 않을 수가 없게 된다.&lt;br&gt;내 기억속에 애플은 1980년대 국민학생(지금은 초등학생이겠지만)시절로 거슬러 올라가게 된다.&lt;br&gt;당시 로드런너(Load Runner) 라는 게임이 동작되던 애플을 너무 갖고 싶어했던 기억이 난다.&lt;br&gt;물론 솔직히 몽환전사가 플레이되던 MSX가 더 갖고 싶었지만...&lt;br&gt;(소망과 달리 처음으로 구입한 PC는 SIMCGA가 필수였던 허큘리스 그래픽 카드의 XT 였다)&lt;/p&gt;&lt;p&gt;아무튼 지금의 난 이 글을 애플 맥북 에어로 쓰고 있으니 어릴 때 소망은 이룬 셈인 것 같다. --;;;&lt;br&gt;&lt;/p&gt;&lt;h3 id=&quot;h1265065141216&quot;&gt;스티브 잡스&lt;/h3&gt;&lt;p style=&quot;text-align: center;&quot; class=&quot;img&quot;&gt;&lt;img src=&quot;./files/attach/images/4/266/035/35266.jpg&quot; height=&quot;115&quot; width=&quot;116&quot;&gt;&lt;br&gt;많이 늙으셨군요.. 흑흑 - 출처: 스티브 잡스 - Google 검색&lt;/p&gt;&lt;p&gt;IT 종사자나 얼리 어답터 외에 요즘은 일반 뉴스에서도 스티브 잡스라는 이름을 흔히 접할 수 있게 되었다.&lt;br&gt;국내에 영원히 들어오지 못할 것 같아 다음달 폰등의 불명예(?)를 얻은 아이폰이 KT를 통해 발매가 되면서 일반인들에게 빌게이츠와 같이 대중적으로 인식이 될 수 있었던 것 같기도 하다.&lt;br&gt;아무튼 애플을 세우고 쫓겨나서 픽사 애니메이션을 운영하다 다시 애플 CEO로 복귀한 파란만장한 인생의 이 아저씨의 걸출한 능력과 카리스마 덕에 애플이 세계 최고의 IT 회사가 된 것은 분명한 것 같다.&lt;br&gt;사실 스티브 잡스의 키노트를 보며 나도 저렇게 멋진 프리젠테이션을 해야겠다라고 맘 먹은게 한 두번이 아니였으며 iWorks를 구매하는 사람이 비단 나 뿐만은 아닐 것이다.&lt;br&gt;췌장암을 앓았지만 이겨냈고 애플 이사회가 가장 신경쓰는게 스티브 잡스의 건강이라는 말이 있을 정도로 막강한 영향력과 능력을 보여주는 이 사람은 많은 사람들의 롤모델이기도 할 것이다.&lt;br&gt;&lt;br&gt;&lt;/p&gt;&lt;h3 id=&quot;h1265065567135&quot;&gt;HTML5&lt;/h3&gt;&lt;p&gt;최근 HTML5에 대한 관심은 스티브 잡스로 인해서 매우 커졌다.&lt;br&gt;웹개발자들은 이미 HTML5에 대한 관심과 기대가 있었지만 이게 일반인들에게까지 알려지게 되었다.&lt;/p&gt;&lt;p&gt;HTML5는 HTML의 차기 주요 제안 버전으로 월드 와이드 웹의 핵심 마크업 언어이다. 2004년 6월 Web Hypertext Application Technology Working Group(WHATWG)에서 웹 어플리케이션 1.0이라는 이름으로 세부 명세 작업을 시작하였다. 2009년 10월 WHATWG의 현재 최종 제안 상태이다.
HTML5는 HTML 4.01, XHTML 1.0, DOM Level 2 HTML에 대한 차기 표준 제안이다. 이것은 어도비 플래시나 마이크로소프트의 실버라이트, 썬의 자바FX와 같은 플러그인 기반의 인터넷 어플리케이션에 대한 필요를 줄이는데 목적을 두고 있다.&lt;cite&gt;출처: &lt;a href=&quot;http://ko.wikipedia.org/wiki/HTML5&quot;&gt;HTML5 - 위키백과, 우리 모두의 백과사전&lt;/a&gt;&lt;/cite&gt;&lt;/p&gt;&lt;p&gt;위키백과에서 보듯이 HTML5 는 이미 2004년부터 워킹그룹에서 세부 작업이 시작되었고 현재 최종 제안 상태이다.&lt;br&gt;마크업 코드의 표준을 보다 쉽고 편하게 하기 위한 목적도 있지만 플래시등 웹브라우저 어플리케이션을 대체하기 위한 용도로도 제안이 되었다.&lt;br&gt;그래서 HTML4나 XHTML에 없던 VIDEO, AUDIO, CANVAS등의 태그가 추가되었다.&lt;br&gt;플래시나 실버라이트등이 가장 많이 쓰이는 곳이 화려한 광고 배너, 동영상, 게임 등일텐데 이런게 모두 HTML5 에서는 모두 자체 구현 가능하다.&lt;br&gt;물론 자체 구현이라는 말이 매우 애매하고 정확히 짚고 넘어가야 할 부분도 있다.&lt;br&gt;HTML5 라는 단순한 태깅 문법으로 가능한 것이 아니라 HTML5 의 VIDEO등의 태그에 대해 브라우저가 직접 내장 플레이어등을 이용하여 동작하도록 한다고 보는 것이 쉬울 것 같다.&lt;br&gt;즉 브라우저내에 동영상 플레이어, 음악 플레이어가 내장되어 있다는 것이고 이런 것들에 대한 표준을 HTML5 를 통해 구현된다는 점에서 차이가 있는 것이지 HTML5라는 태킹 언어에 대해 더 이상의 의미 부여는 불필요하다고 생각된다.&lt;/p&gt;&lt;h3 id=&quot;h1265069438205&quot;&gt;HTML5 는 유명해졌다&lt;/h3&gt;&lt;p&gt;흡사 AJAX와 유사한 행태를 HTML5가 최근 보이고 있다.&lt;br&gt;AJAX를, 이른바 자바스크립트 비동기 통신은 AJAX라는 이름이 생기기 전에도 사용되었던 기술이였다.&lt;br&gt;이 기술이 웹2.0 이라는 마케팅 용어와 더블어 AJAX라는 이름으로 포장되면서 강력한 파괴력을 가지게 되었다.&lt;br&gt;즉 그 기술의 가치보다 마케팅을 통한 파급력이 커지면서 AJAX는 할 줄 알아야 하는 기술이고 서비스에서 사용되어야 할 대상이 된 것이다.&lt;br&gt;지금 yes24에서 AJAX로 검색하면 162건의 결과물이 나올 정도로 AJAX라는 단편적인 기술에 대한 지식은 배워야하고 익혀야 할 대상으로 격상이 되어 버렸고 이 때문에 생기는 사회적 손실과 기술적 차별은 커져버렸다.&lt;br&gt;&lt;/p&gt;&lt;p&gt;이런 마케팅적인 요소로 인해 HTML5가 널리 알려지고 5년 정도의 시간이 걸려야 일반화 될 수 있을거라 예상했던 것이 더 당겨지는 것은 매우 바람직한 현상일 수 있다.&lt;br&gt;단지 오래된 브라우저를 사용하는 계층이 많아서 HTML5와 같은 편리한 기술이 사용되지 못하는 것은 최악이라고 생각되기 때문이다.&lt;br&gt;하지만 마케팅 측면에서 대두된 HTML5는 AJAX만큼이나 부정적이고 좋지 못한 현상이 생길 수 있다고 생각한다.&lt;br&gt;여러 뉴스매체에서 애플, 스티브잡스, HTML5등 매니악한 단어들이 이미 등장하고 여러 웹사이트들에서는 HTML5 라는 신기술에 대한 문의와 HTML5에 대한 맹신이 나타나고 있다.&lt;br&gt;분명 HTML5에 대한 서적들이 봇물 터지듯이 나올테고 HTML5를 할 줄 아는 개발자를 구할 것이고 HTML5 를 할 줄 아는 것은 경력의 중요한 부분이 될 것이다.&lt;br&gt;HTML5가 단지 마크업 랭귀지이며 HTML4나 XHTML보다 조금 더 편리한 태깅 요소를 가지고 있다는 것보다 더 격상되고 필수적인 요소로 자리 잡을 것이다.&lt;br&gt;그리곤 많은 공급이 생길테고 이 &quot;신기술&quot;을 익히는라 소비된 비용들은 결국 아무것도 아닌 것으로 돌변할 것이다.&lt;br&gt;&lt;/p&gt;&lt;h3 id=&quot;h1265070060198&quot;&gt;대립각의 도구로 되어버린 HTML5&lt;/h3&gt;&lt;p&gt;웹개발자로서 HTML5가 이슈화되고 덕분에 더 빨리 일반화 될 수 있다면 분명 좋아해야 할 부분이 있다.&lt;br&gt;IE6가 사라질 수 있는 기회가 더 커진 것이고 더 이상 동영상 플레이를 위해 flv로 변화하여 플래시로 플레이하지 않아도 될 수도 있다.&lt;br&gt;CANVAS로 간단한 게임을 만들거나 UI Design을 위해 불필요한 이미지나 플래시를 쓰지 않아도 된다.&lt;br&gt;더군다나 HTML5를 위해 브라우저 업그레이드가 되면 CSS3도 사용할 수 있다.&lt;br&gt;&lt;/p&gt;&lt;p&gt;하지만 이번 사태는 HTML5가 대상이 아닌 플래시에 대한 대립각으로 HTML5가 회자 되었다는 것에서 걱정이 앞선다.&lt;br&gt;내가 좋아하던 그래서 비싼 비용과 불친절하고 불편한 A/S에도 불구하고 내세우는 가치와 모습에 반해 사랑하고 아끼게 된 애플 그리고 애플의 CEO인 스티브잡스가 Adobe is Lazy라는 극언을 서슴치 않으면서까지 플래시 지원을 하지 않으려는 모습과 그 걸 위해서 HTML5를 꺼내든 것은 매우 걱정스러운 모습이다.&lt;br&gt;애플은 처음부터 폐쇄적이였고 독단적이였다.&lt;br&gt;IBM처럼 조립 PC가 생길 수 없어 비쌌고 애플의 사용법은 대중적인 윈도우와 달라서 학습을 위해 비용과 시간을 낭비하게 하여왔다.&lt;br&gt;하지만 이는 애플이 지향하는 가치가 있었고 그 가치가 폐쇄와 독단이라는 모습보다 더 우위에 있었기에 감수할 수 있었고 동의할 수 있었다.&lt;br&gt;&lt;/p&gt;&lt;p&gt;그렇지만 이번 플래시에 대한 애플, 스티브 잡스의 모습은 걱정이 된다.&lt;br&gt;이미 전 세계 브라우저의 90%이상에서 많은 사용자들에게 유용한 기능을 제공하고 이로 인해 다양한 서비스가 생길 수 있었던 플래시를 단지 자신의 철학과 이상에 맞지 않는다고 하여 게으르다고 폄하하고 대안은 될 수 있지만 대체는 될 수 없는 HTML5를 끄집어 내는 모습은 그간 애플이 보여줬던 카리스마 있는 독단과 폐쇄와 어울리지 않는다고 생각된다.&lt;br&gt;서로 보조할 수 있고 또 다른 가치를 줄 수 있었던 HTML5와 플래시는 이제 대적해야 할 상대로 돌변했다.&lt;br&gt;이게 과연 누구에게 도움을 줄 수 있을까?&lt;br&gt;이젠 애플이 이겨서 플래시가 사라지든지 플래시가 이겨 스티브 잡스가 져야 하는 상황이 오게 된 것인데 이 와중에 겪게 될 사용자들의 혼란과 개발자들의 고민은 누가 책임질 지 모르겠다.&lt;br&gt;고래싸움에 등 터지는 새우들은 우리들일턴데...&lt;/p&gt;&lt;/div&gt;</content>
                  <category term="HTML5"/>
            <category term="애플"/>
            <category term="스티브잡스"/>
            
   </entry>
   <entry>
      <title>이 밤 중에 안 자고 있다.</title>
      <id>http://www.textyle.kr/35113</id>
      <published>2010-01-31T01:06:04+09:00</published>
      <updated>2010-01-31T01:06:04+09:00</updated>
      <link rel="alternate" type="text/html" href="http://www.textyle.kr/35113"/>
      <link rel="replies" type="text/html" href="http://www.textyle.kr/35113#comment"/>
      <author>
         <name>zero</name>
               </author>
            <content type="html">&lt;div class=&quot;xe_content&quot;&gt;&lt;h3 id=&quot;h1264866902172&quot;&gt;프리미어 리그 볼튼 VS 리버풀&lt;/h3&gt;&lt;p&gt;일단 이청용 선발이 무조건 확실한 볼튼 전 때문에 밤 9시에 커피 한 잔 하고 기다렸다.&lt;br&gt;전반전 끝나고 후반전 기다리면서 심심해서 노트북 꺼내 듬.&lt;br&gt;전반 이청용의 50m 단독 드리블 후 슛까지 이어지는 멋진 모습에 밤임에도 불구하고 환호성 소심하게 한번 질렀다.&lt;br&gt;그리고 계속 이어지는 흥미 진진한 게임에 45분이 후딱 지나갔다.&lt;br&gt;리버풀이라는 강팀을 맞이해서도 이청용 진가 완전히 보여주고 있는 모습에 매우 만족 스러움을 느낀다.&lt;/p&gt;&lt;h3 id=&quot;h1264867053943&quot;&gt;트위터&lt;/h3&gt;&lt;p&gt;SBS 그것이 알고 싶다에 트위터가 나왔다.&lt;br&gt;140자로 이루어지는 하지만 7천만명(맞나?) 이상이 가입했고 하루 활동하는 사용자만 천만명이 넘는 엄청난 네트웍을 자랑하는 트위터.&lt;br&gt;대충 보다가 프리미어 리그 중계로 돌렸기에 내용은 잘 모르겠다.&lt;br&gt;하지만 확실한 것은 트위터라는 마이크로 블로그가 가지는 의미는 상상할 수 없다는 것.&lt;br&gt;140자이기에 부담 없이 글을 쓰고 리트윗을 통해 급속도로 전파될 수 있는 매우 심플한 구조의 SNS가 이토록 큰 반향을 불러일으킬 줄 누가 알았을까.&lt;br&gt;내 평생 이런 서비스 한 번 만들어 볼 수 있을까...&lt;/p&gt;&lt;h3 id=&quot;h1264867232521&quot;&gt;요즘 많이 피곤하다&lt;/h3&gt;&lt;p&gt;능력이 되지 않음에도 불구하고 걸맞지 않는 직책을 맡아서 그런지 요즘 회사 생활이 쉽지 않다.&lt;br&gt;지금까지 웹개발자로 있으면서 운 좋게 도전적인 목표를 맡아 왔는데 그와 거의 반대인 매니징 업무를 맡다보니 늘 고민하고 가정하고 생각하며 하루 하루 지내는 것 같다.&lt;br&gt;다행히 XpressEngine 은 잘하는 친구들 덕분에 한결 편하고 믿음직 스럽기에 다른 하나에 더 신경 쓸 수 있어서 그나마 편한듯..&lt;/p&gt;&lt;p&gt;엇. 후반전 시작했다.&lt;br&gt;뻘소리 끝.&lt;/p&gt;&lt;/div&gt;</content>
                  <category term="뻘소리"/>
            
   </entry>
   <entry>
      <title>즐겨보는 웹툰~</title>
      <id>http://www.textyle.kr/34986</id>
      <published>2010-01-29T08:36:21+09:00</published>
      <updated>2010-01-29T08:36:21+09:00</updated>
      <link rel="alternate" type="text/html" href="http://www.textyle.kr/34986"/>
      <link rel="replies" type="text/html" href="http://www.textyle.kr/34986#comment"/>
      <author>
         <name>zero</name>
               </author>
            <content type="html">&lt;div class=&quot;xe_content&quot;&gt;&lt;h3 id=&quot;h1264721429347&quot;&gt;덴마 - 양영순&lt;/h3&gt;&lt;p&gt;예전부터 알고 있었지만 천일야화때부터 푸욱 빠져버렸었다.&lt;br&gt;그림 잘 그리는거야 모두에게 인정 받고 있지만 난 만화의 구성 자체가 너무 아름답다고 생각한다.&lt;br&gt;완전 몰입하게 만들어 버리는 구성과 약간의 과장이 있는 인체는 그야말로 최고!&lt;br&gt;완결되지 못한 작품들이 있지만 그게 작가의 잘못인지 연재하고 있는 매체의 잘못인지 난 모르기에 상관 없고 다시 볼 수 있다는 것만으로 행복~&lt;br&gt;이번에 네이버에서 덴마라는 만화를 연재하는데 주욱 장기 연재 되면 좋겠음.&lt;/p&gt;&lt;p class=&quot;img&quot;&gt;&lt;img src=&quot;./files/attach/images/4/984/034/34984.jpg&quot; alt=&quot;&quot;&gt;&lt;br&gt;덴마 - 양영순 - 출처: 네이버 만화 :: 사각컷 속의 즐거운 상상여행&lt;/p&gt;&lt;p class=&quot;img&quot;&gt;&lt;/p&gt;&lt;h3 id=&quot;h1264721599150&quot;&gt;나이트런 - 김성민&lt;/h3&gt;&lt;p&gt;내가 좋아하는 기사, 우주, 괴물, SF, 마법, 판타지 모든 요소가 다 녹아 들어 있어서 토요일이 오기를 기다리게 하는 만화.&lt;br&gt;역시 네이버 웹툰에서 연재중.&lt;br&gt;도전만화에서 처음 볼 때 아무 기대 없이 보다가 거짓말 안 보태도 수십번을 다시 정주행했었다.&lt;br&gt;이번에 책으로 출간하는 그림체를 보니 역시 그림도 짱.&lt;br&gt;주말 연재에서는 좀 날려그리기에 아쉽지만 내용도 만만치 않게 길어서 일단 스토리 감상 위주로 즐긴다.&lt;br&gt;&lt;/p&gt;&lt;p class=&quot;img&quot; style=&quot;text-align: left; &quot;&gt;&lt;img src=&quot;./files/attach/images/65/986/034/knightrun.jpg&quot; width=&quot;125&quot; height=&quot;101&quot; class=&quot;xe_filesrl_34987&quot;&gt;&lt;br&gt;나이트런 - 김성민 - 출처: 네이버 만화 :: 사각컷 속의 즐거운 상상여행&lt;/p&gt;&lt;p&gt;영화든 만화든 정신없이 푹 빠져서 시간과 현실을 잊게 해줄 수 있는 것은 행복한 것 같다.&lt;br&gt;대리 만족을 통해 얻는 즐거움도 있을테고...&lt;br&gt;&lt;/p&gt;&lt;p&gt;하지만 현실은 척박....&lt;/p&gt;&lt;/div&gt;</content>
                  <category term="웹툰"/>
            <category term="덴마"/>
            <category term="나이트런"/>
            
   </entry>
   <entry>
      <title>iPad 드디어 모습을 보였구나</title>
      <id>http://www.textyle.kr/34871</id>
      <published>2010-01-28T08:32:54+09:00</published>
      <updated>2010-01-28T08:56:26+09:00</updated>
      <link rel="alternate" type="text/html" href="http://www.textyle.kr/34871"/>
      <link rel="replies" type="text/html" href="http://www.textyle.kr/34871#comment"/>
      <author>
         <name>zero</name>
               </author>
            <content type="html">&lt;div class=&quot;xe_content&quot;&gt;&lt;h3 id=&quot;undefined&quot;&gt;iPad&lt;/h3&gt;&lt;p class=&quot;img&quot; style=&quot;text-align: left; &quot;&gt;&lt;img src=&quot;./files/attach/images/65/871/034/ipad.png&quot; width=&quot;570&quot; height=&quot;690&quot; class=&quot;xe_filesrl_34872&quot;&gt;&lt;br&gt;애플 공식 사이트 이미지&lt;/p&gt;&lt;p&gt;iPad 스펙등에 대해서는 글 잘 쓰는 블로거들이 글 쓸테니 난 신경 안 쓸테고...&lt;br&gt;위 이미지 보면서 느낀 것이 애플이 주는 디자인의 힘은 하드웨어의 디자인 뿐 아니라 하드웨어와 너무 잘 어울리는 소프트웨어 디자인도 한 몫 한다는 것이다.&lt;br&gt;저 iPad 스크린에 윈도우7의 모습이 보인다면?&lt;br&gt;아마 무척 어울리지 못할 것 같다.&lt;/p&gt;&lt;div class=&quot;eArea _movie eFocus&quot; type=&quot;movie&quot;&gt;&lt;div class=&quot;embed&quot;&gt;&lt;object width=&quot;560&quot; height=&quot;340&quot;&gt;&lt;param name=&quot;movie&quot; value=&quot;http://www.youtube.com/v/_JNMJ12fr3s&amp;amp;hl=ko_KR&amp;amp;fs=1&amp;amp;&quot;&gt;&lt;param name=&quot;allowFullScreen&quot; value=&quot;true&quot;&gt;&lt;param name=&quot;allowscriptaccess&quot; value=&quot;always&quot;&gt;&lt;embed src=&quot;http://www.youtube.com/v/_JNMJ12fr3s&amp;amp;hl=ko_KR&amp;amp;fs=1&amp;amp;&quot; type=&quot;application/x-shockwave-flash&quot; allowscriptaccess=&quot;always&quot; allowfullscreen=&quot;true&quot; width=&quot;560&quot; height=&quot;340&quot;&gt;&lt;/object&gt;&lt;/div&gt;&lt;/div&gt;&lt;h3 id=&quot;undefined&quot;&gt;난 애플찬양자인가?&lt;/h3&gt;&lt;p&gt;남들처럼 코흘리개 초등학생때 맥을 접하진 못했다.&lt;br&gt;MSX(맞나?)를 첨 접했고 거기서 베이직을 공부한게 컴퓨터와의 첫 인연이고, 그 다음은 PC-XT였다.&lt;br&gt;무려 터보 기능(cpu 속도 줄였다 원복시키는거..)이 있는 허큘리스 그래픽 카드 특유의 녹색 주사선을 가진 흑백 모니터에서 프로그래밍 공부도 하고 게임도 만들고 하였던 나는 애플과는 전혀 어린 시절 아름다운 인연은 없었다.&lt;/p&gt;&lt;p&gt;그러다 인텔 기반의 맥북 화이트가 나왔을때 그 이쁜 디자인이 미쳐서 사버렸다.&lt;br&gt;초기 모델이라 A/S만 십여회를 받았고 결국 배터리 인식 못하는 상태로 아는 동생에게 팔아버렸다.&lt;br&gt;디자인에 미쳐서 샀건만 잘 활용할 줄 몰라 키노트 몇 번 깨작거리고 말았던 게 다 였다.&lt;/p&gt;&lt;p&gt;아이팟이나 아이폰은 사보지도 않았고. --;&lt;br&gt;옴니아 약정 문제도 있지만 KT 사용자는 되기 싫어(SKT의 할인 혜택이 큼) 아직 버티고 있는 중이고 실제로 아이폰의 필요성은 못 느끼고 있다.&lt;br&gt;이젠 디자인만 보고 사지는 않을 정도로 철이 든 것인가...&lt;/p&gt;&lt;p&gt;라고 쓰면서 보니 내가 지금 쓰고 있는 노트북이 맥북 에어다.&lt;br&gt;그래 이 녀석 산다고 아이폰 안 산거지 참... (철은 안 들었다..)&lt;/p&gt;&lt;p&gt;맥북에어를 산 이유는 회사나 집에서 하나의 장비로 연속성을 가지고 싶었고 너저분한 책상을 깔끔히 하고 싶었던 이유가 크다.&lt;br&gt;들고 다녀야 하기에 무거운건 지양하였고 @@@하고 ***했지만.. 결국 너무나 이쁘고 얇고 좋아 보여서..&amp;nbsp;&lt;/p&gt;&lt;p&gt;맥북 에어를 사서 업무환경 싹 다 바꾸고 지금은 OSX 잘 적응해서 잘 쓰고 있다.&lt;br&gt;신한 은행은 맥에서 지원되어서 편리하고 회사 메일과 우리은행, 카드 홈페이지만 빼면 윈도우를 쓸 일이 없다.&lt;br&gt;&lt;br&gt;아무튼 난 점점 애플 찬양자로 돌아서고 있다.&lt;/p&gt;&lt;h3 id=&quot;undefined&quot;&gt;스티브 잡스&lt;/h3&gt;&lt;p&gt;스티브 잡스옹이야 워낙 유명하니 쓸데 없는 설명 집어치우고 키노트때의 그 멋진 모습에 늘 매료된다.&lt;br&gt;그래서 난 iWorks를 정품으로 사서 워드대신 페이지를, 엑셀 대신 넘버스를, PPT대신 키노트로 문서 작업을 한다.&lt;br&gt;물론 그렇다고 결과가 같지는 않다.&lt;br&gt;뭐가 다를까를 고민해 보니 스티브 잡스옹은 늘 자신 있게 보여줄 꺼리가 있다는 것.&lt;/p&gt;&lt;p&gt;난 자신 있게 보여줄 것이 없기에 매번 뭘 채워 넣을까? 뭔 더 꾸며야 할까를 고민하는 것 같다.&lt;br&gt;이번 iPad 키노트때 ? 하나, $ 하나를 그 큰 스크린에 단지 한 글자만 찍어 놓고도 임팩트 있는 프리젠테이션이 가능하다는 것은 그 만큼 자신 있게 보여줄 것이 있다는 것일테다.&lt;/p&gt;&lt;p&gt;아무튼 부러워.&lt;/p&gt;&lt;/div&gt;</content>
                  <category term="ipad"/>
            <category term="apple"/>
            
   </entry>
   <entry>
      <title>네이버 레시피 스마트 파인더 해프닝</title>
      <id>http://www.textyle.kr/34808</id>
      <published>2010-01-27T18:34:43+09:00</published>
      <updated>2010-01-27T18:34:43+09:00</updated>
      <link rel="alternate" type="text/html" href="http://www.textyle.kr/34808"/>
      <link rel="replies" type="text/html" href="http://www.textyle.kr/34808#comment"/>
      <author>
         <name>zero</name>
               </author>
            <content type="html">&lt;div class=&quot;xe_content&quot;&gt;&lt;h3 id=&quot;undefined&quot;&gt;네이버 레시피 스마트 파인더 오픈~&lt;/h3&gt;&lt;p class=&quot;img&quot; style=&quot;text-align: left; &quot;&gt;&lt;img src=&quot;./files/attach/images/65/808/034/recipe.jpg&quot; width=&quot;776&quot; height=&quot;512&quot; class=&quot;xe_filesrl_34809&quot;&gt;&lt;br&gt;네이버 레시피 스마트 파인더&lt;/p&gt;&lt;p&gt;오늘 네이버에서 레시피 스마트 파인더 기능을 오픈했다.&lt;br&gt;네이버에서는 스마트 파인더라는 이름으로 자동차등 전문 정보에 대해 보다 상세하고 잘 정리된 정보를 제공하고 있었다.&lt;br&gt;아무튼 딱 봐도 쓸만한 서비스가 오픈하였는데 어떤 네티즌(그냥 익명처리겸)이 자신이 아이디어를 표절해서 만든거라고 웹상에 글을 남긴게 해프닝의 시작이 되었다.&lt;/p&gt;&lt;h3 id=&quot;undefined&quot;&gt;네이버는 죽일 놈&lt;/h3&gt;&lt;p&gt;뭐 늘 그래왔지만 잘해도 욕먹고 못하면 거의 공공의 적으로 가는 국내 인터넷 포털 1위 기업인 네이버는 된통 욕 들어 먹었다.&lt;br&gt;사실 네이버는 그간 여러 이유로 매도도 당하고 욕도 들어 먹었다.&lt;/p&gt;&lt;h3 id=&quot;undefined&quot;&gt;그런데 아니네?&lt;/h3&gt;&lt;p class=&quot;img&quot; style=&quot;text-align: left; &quot;&gt;&lt;img src=&quot;./files/attach/images/65/808/034/patent.jpg&quot; width=&quot;723&quot; height=&quot;483&quot; class=&quot;xe_filesrl_34810&quot;&gt;&lt;br&gt;2006년에 이미 요리 추천 시스템 특허를 NHN이 제출했었네..&lt;/p&gt;&lt;p&gt;이런.. 각종 검증되지 않은 류머들과는 달리 이 서비스는 이미 특허 출원했었다는...&lt;br&gt;결국 처음 글을 올린 네티즌은 여운이 남는 사과글을 남겼고 이 해프닝은 끝났다.&lt;/p&gt;&lt;h3 id=&quot;undefined&quot;&gt;아님 말고...&lt;/h3&gt;&lt;p&gt;국내외를 막론하고 언론사들이 많은 욕을 얻어 먹는 것은 아님 말고~ 하는 식의 보도 행위때문이기도 하다.&lt;br&gt;하루 이틀 된건 아니지만 키보드만 사용할 줄 알면 누구나 정의의 사도가 되어 아님 말고~ 식의 글을 쓰는건 네티즌들도 똑같다.&lt;br&gt;당연하겠지만 노이즈 잔뜩 끼인 까는 글은 금방 퍼지지만 정정 글은 잘 퍼지지도 않는다.&lt;br&gt;&lt;/p&gt;&lt;h3 id=&quot;undefined&quot;&gt;왜 책임 지지 못할 말을 할까?&lt;/h3&gt;&lt;p&gt;웹상에 글을 올린다는 것 그것도 공개된 곳에 올리는 것은 책임을 질 수 있어야 가능하다고 생각한다.&lt;br&gt;비공개된 곳에서야 뭔 짓을 하든 상관없겠지만.&lt;br&gt;길거리에서 발가벗고 뛰어다니면 범죄이지만 집안에서 발가벗고 뭔 짓을 하든 상관없는 것처럼 말이다.&lt;br&gt;이른바 네티즌이라고 불리는 사용자 중에서 이런 아님 말고~ 혹은 무턱대고 비방/ 비난을 하거나 욕설을 마구 쓰는 사용자들은 아마 웹과 현실과의 거리 차이를 느끼지 못해서 그런게 아닐까 싶다.&lt;br&gt;글을 쓰는 곳은 공개된 장소가 아닌 글쓴이의 보장받은 한정된 공간인데 그 공간과 웹이라는 공간의 거리 차이에 대한 인식을 하지 못해 결국 이런 일들이 생기는게 아닐까 싶다.&lt;/p&gt;&lt;p&gt;특히나 이번 사건처럼 서비스 아이디어는 그 누구도 자신이 창조자라고 자신하지 못할텐데 그 글을 포스팅한 곳을 공개된 곳이 아니라고 생각하였기에 그렇게 자신 있게 글을 적은게 아닐까?&lt;br&gt;&lt;/p&gt;&lt;p&gt;내가 지금 쓰고 있는 이 포스팅도 나중에 보니 잘못된 것일 수 있을 것이다.&lt;br&gt;다만 이 해프닝의 시작 원인과 특허등에 대해서 일일히 체크한 후에 적는 글이기에 그 가능성은 낮을 것이다.&lt;br&gt;한때 책임 진다는 것에 대한 부담으로 웹에 글쓰는 것을 무척 기피한 적이 있다.&lt;br&gt;특히나 제로보드나 XE 메인 개발자라는 것 때문에 어떻게 오해 될까 걱정이 되어 매우 긴 기간동안 웹에 글을 쓰지 않은 적도 있고.&lt;br&gt;&lt;/p&gt;&lt;p&gt;그러면서 느낀 것은 해명할 일이 생기면 해명하고 말하고 싶은게 있으면 해야 한다, 다만 아무 생각없이 글 적지는 말자는 것이다.&lt;br&gt;마이크로 블로그등에서 탈퇴한 이유도 한 줄이라는 짧고 쉽게 쓸 수 있는 서비스들이기에 아무 생각없이 글 적는게 많아져서 이기도 하지만...&lt;/p&gt;&lt;p&gt;네이버든 다음이든 구글이든 잘못한 것들을 웹상에 공개하는 것은 긍정적인 결과가 더 많을 것이지만 근거 없이 비난/ 비방하는 것은 없어졌음 좋겠다.&lt;br&gt;물론 누군가가 나에 대해서도 그러지 않기를 바라지만...&lt;/p&gt;&lt;/div&gt;</content>
                  <category term="신중"/>
            
   </entry>
   <entry>
      <title>두둥! 이청용 시즌 5호골 작렬~</title>
      <id>http://www.textyle.kr/34751</id>
      <published>2010-01-27T08:16:40+09:00</published>
      <updated>2010-01-27T08:16:40+09:00</updated>
      <link rel="alternate" type="text/html" href="http://www.textyle.kr/34751"/>
      <link rel="replies" type="text/html" href="http://www.textyle.kr/34751#comment"/>
      <author>
         <name>zero</name>
               </author>
            <content type="html">&lt;div class=&quot;xe_content&quot;&gt;&lt;p class=&quot;img&quot;&gt;&lt;img src=&quot;./files/attach/images/4/749/034/34749.jpg&quot; alt=&quot;&quot;&gt;&lt;br&gt;이청용, 번리전 결승골!  - 출처: 데일리안&lt;/p&gt;&lt;p class=&quot;img&quot;&gt;&lt;/p&gt;&lt;p&gt;오늘 아침 5시에 일어난 보람이 있다.&lt;br&gt;기습적인 이청용의 시즌 5호골이자 결승골이 터졌다.&lt;br&gt;90분 풀타임 뛰며(후반 연장 2분쯤에 교체되었지만) 맹활약을 보여주고 결승골까지~&lt;/p&gt;&lt;p&gt;오늘 볼튼 vs 번리전은 여러모로 재밌었다.&lt;br&gt;볼튼의 무실점 경기가 올 시즌 처음으로 있었고 번리를 프리미어리그로 승격 시키고 갑작스레 볼튼으로 옮긴 오언코일 감독에 대한 번리의 복수전도 무산을 시켰으니...&lt;/p&gt;&lt;p&gt;번리가 초반 2명의 주전 선수의 부상으로 급교체되면서 공격이 잘 풀리지 않은 탓도 있지만 볼튼이 초기와 다르게 수비도 나름 잘 되어가고 롱볼이 아닌 숏패스로 게임을 풀어가는 분위기도 많이 좋아진 것 같다.&lt;/p&gt;&lt;p&gt;나야 박지성 맨유 입단하면서부터 프리미어리그 본 초짜이고 한국 선순들 뛰는 거 보는 재미로 보는 프리미어리그 골수 팬은 아니지만 이른 아침부터 즐거워서 기쁘다~&lt;br&gt;내일은 맨유 vs 맨시티의 칼링컵 대회가 있는 날이라서 역시 조금 더 일찍 일어나야겠다.&lt;br&gt;박지성 선발 출전하면 좋겠다~&lt;/p&gt;&lt;/div&gt;</content>
                  <category term="이청용"/>
            <category term="볼튼"/>
            <category term="번리"/>
            <category term="시즌5호골"/>
            
   </entry>
   <entry>
      <title>Textyle 점점 좋아진다~</title>
      <id>http://www.textyle.kr/34619</id>
      <published>2010-01-26T16:51:39+09:00</published>
      <updated>2010-03-06T11:06:04+09:00</updated>
      <link rel="alternate" type="text/html" href="http://www.textyle.kr/34619"/>
      <link rel="replies" type="text/html" href="http://www.textyle.kr/34619#comment"/>
      <author>
         <name>zero</name>
               </author>
            <content type="html">&lt;div class=&quot;xe_content&quot;&gt;&lt;p class=&quot;img&quot; style=&quot;text-align: left; &quot;&gt;&lt;img src=&quot;./files/attach/images/65/619/034/textyle.jpg&quot; width=&quot;200&quot; height=&quot;40&quot; class=&quot;xe_filesrl_34621&quot;&gt;&lt;/p&gt;&lt;h3 id=&quot;undefined&quot;&gt;단락편집기 기능 개선 진행 중~&lt;/h3&gt;&lt;p&gt;Textyle이라는 XpressEngine 기반의 블로그 툴은 여러가지 장점을 가진다.&lt;br&gt;일단 널리 알려진 단락편집기, 글감보관함이라는 기능으로 전문적인 콘텐트를 보다 쉽고 구조적으로 작성할 수 있게 하는 기능과 블로그 커뮤니티 구축이 가능하다는 장점이 있다.&lt;br&gt;이 중 블로그 커뮤니티 구축은 좀 더 세밀한 운영 지원이 필요하지만 기본 기능 상 문제될 부분은 적다.&lt;br&gt;다만 단락 편집기라고 하는 일반적으로 웹상에서 글을 쓰는 것과 다른 형태인 이 편집기는 개선해야 할 여지가 많았다.&lt;br&gt;이번 1.2.x 버전대 진입하면서 대폭 좋아졌다고 느껴진다.&lt;br&gt;&lt;/p&gt;&lt;h3 id=&quot;undefined&quot;&gt;뭐가 바뀌었을까?&lt;/h3&gt;&lt;p&gt;일단 기존에 있던 기능인데 버그로 인하여 잘 동작하지 않던 부분들이 많이 안정화 되었다.&lt;br&gt;그리고 단락편집기의 단락 컴포넌트들의 외부 개발자 참여를 통한 기능 확장을 할 수 있게 되었고 기능성에도 많이 개선되었다.&lt;br&gt;지금 맥북에서 크롬으로 포스팅 중인데 그간 발생하였던 문제들은 대부분 개선되었고 UI도 많이 좋아졌다.&lt;/p&gt;&lt;h3 id=&quot;undefined&quot;&gt;이제 슬슬 진검 승부(?) 할 때인가..&lt;/h3&gt;&lt;p&gt;Textyle일은 단락편집기/ 글감보관함 외에도 XE 기반이기에 다양한 모듈을 바로 블로그에서 쓸 수 있다거나 회원 관리나 기타 여러 확장성에서 장점을 가지고 있다.&lt;br&gt;그리고 이런 기능들이 안정화 되지 못했던 부분들은 차츰 안정화 되어 가고 있고 이제 다른 모듈과의 연동을 통한 확장성 강화 정도의 기능 개선이 남았다.&lt;br&gt;2010년 상반기에 XE/ Textyle의 코드 리팩토링을 통해 보다 빠르고 안정적인 모습을 보이도록 할 예정인데 솔직히 기대 된다. ㅎㅎ&lt;br&gt;블로그 툴로서의 기능은 더 이상 추가되기가 어려운 것이 현실이고 이는 비단 Textyle에 국한된 것이 아니다.&lt;br&gt;그럼 블로그 툴의 본연의 모습인 콘텐트 생산과 이를 잘 발행하여 유통하는 것이 결국 관건이 될 터이다.&lt;br&gt;&lt;/p&gt;&lt;p&gt;올해 상반기에 신디케이션과 XE의 업그레이드를 통해 Textyle이 여타 블로그 툴과는 다른 차별점을 확실히 가질 수 있도록 노력해야겠다.&lt;br&gt;&lt;/p&gt;&lt;/div&gt;</content>
                  <category term="텍스타일"/>
            <category term="textyle"/>
            
   </entry>
   <entry>
      <title>기대되는 애플 태블릿~</title>
      <id>http://www.textyle.kr/34601</id>
      <published>2010-01-26T15:00:14+09:00</published>
      <updated>2010-01-26T15:00:14+09:00</updated>
      <link rel="alternate" type="text/html" href="http://www.textyle.kr/34601"/>
      <link rel="replies" type="text/html" href="http://www.textyle.kr/34601#comment"/>
      <author>
         <name>zero</name>
               </author>
            <content type="html">&lt;div class=&quot;xe_content&quot;&gt;&lt;p&gt;애플의 스티브 잡스 CEO가 조만간 선보일 태블릿 PC를 두고 “내가 지금껏 선보인 제품 가운데 가장 중요한 제품이 될 것(This will be the most important thing I’ve ever done)”이라는 발언을 한 것으로 알려져 기대를 모으고 있다.&lt;cite&gt;출처: &lt;a href=&quot;http://www.bloter.net/archives/24141&quot;&gt;Bloter.net  » Blog Archive   » 스티브 잡스, “태블릿이 내 생애 가장 중요한 제품”&lt;/a&gt;&lt;/cite&gt;&lt;/p&gt;&lt;p&gt;잡스옹이 저렇게 자신있게 이야기를 하다니..&lt;br&gt;27일 오전 10시 샌프란시스코에서 발표 하신다네.&lt;br&gt;아.. 기대 된다.&lt;br&gt;&lt;/p&gt;&lt;p class=&quot;img&quot; style=&quot;text-align: left; &quot;&gt;&lt;img src=&quot;./files/attach/images/4/598/034/34598.jpg&quot; width=&quot;300&quot; height=&quot;295&quot;&gt;&lt;br&gt;멋쟁이 잡스옹&lt;/p&gt;&lt;/div&gt;</content>
                  <category term="애플"/>
            <category term="태블릿"/>
            <category term="잡스"/>
            
   </entry>
</feed> 
