Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
tree: 85fec6672c
Fetching contributors…

Cannot retrieve contributors at this time

272 lines (222 sloc) 19.475 kb
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>H3 Conference 2012 참가 후기 | day-by-day</title>
<meta name="description" content="인터넷, 기술, 영화, 음악 그리고 내 이야기">
<meta name="author" content="nezz">
<meta name="keywords" content="internet,tech,dev,movie,music,story" />
<meta name="generator" content="haroopress v0.9.0" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link href="/rss.xml" rel="alternate" title="day-by-day" type="application/rss+xml">
<!-- Le styles -->
<link rel="canonical" href="http://nezz.pe.kr">
<link href="/css/bootstrap.min.css" rel="stylesheet">
<link href="/css/bootstrap-responsive.css" rel="stylesheet">
<link href="/css/font-awesome.css" rel="stylesheet">
<link href="/css/markdown.css" rel="stylesheet">
<link href="/css/haroopress.css" rel="stylesheet">
<link href="/css/theme.css" rel="stylesheet">
<link href="/css/code/default.css" rel="stylesheet">
<!-- Le fav and touch icons -->
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
<link rel="apple-touch-icon" sizes="72x72" href="/favicon-64.png">
<!-- Le javascript -->
<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/jquery.jsonp.js"></script>
<script src="/js/mustache.js"></script>
<script src="/js/apps/github.js"></script>
<script src="/js/apps/twitter.js"></script>
</head>
<body data-spy="scroll" data-target=".subnav" data-offset="50">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="pull-right" href="/rss.xml"><img src="/img/buttons/rss.png" /></a>
<div class="nav-collapse">
<ul class="nav">
<li>
<a href="/">Home</a>
</li>
<li>
<a href="/archives">Archives</a>
</li>
<li>
<a href="/slides">Slides</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<link href="/css/code/default.css" rel="stylesheet">
<div class="container page-archive">
<div class="row">
<div class="span3">
<div id="author" class="well">
<div>
<h3>About Author</h3>
<ul class="thumbnails">
<li>
<a class="thumbnail">
<img src="http://www.gravatar.com/avatar/d1ca68e62108265ddf2e62b347aa716e?r=pg&amp;s=128.jpg&amp;d=identicon" />
</a>
</li>
</ul>
<p>
<strong>nezz</strong><br/>
blog: <a href="undefined" target="_blank">http://nezz.pe.kr</a><br/>
twitter: <a href="http://twitter.com/undefined" target="_blank">@imtaehyun</a><br/>
github: <a href="https://github.com/undefined" target="_blank">imtaehyun</a>
</p>
<p>
<a href="https://twitter.com/imtaehyun" class="twitter-follow-button" data-show-count="true">Follow @imtaehyun</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</p>
<p>
<p>잠시나마 스티브잡스와 같은길을 걸어본 사람</p>
</p>
</div>
<div>
<h3>About this Article</h3>
<p>
<h5>Date Released:</h5>
<span>Thursday, November 1 2012 10:42 PM</span>
</p>
</div>
</div>
<div class="well">
<ul class="nav nav-list">
<li class="nav-header">Categories</li>
<li class=""><a href="/category"><i class="icon-home"></i> Home</a></li>
<li><a href="/category/story"><i class="icon-book"></i> story</a></li>
<li><a href="/category/haroopress"><i class="icon-book"></i> haroopress</a></li>
</ul>
</div>
<div class="well">
<ul class="nav nav-list">
<li class="nav-header">Recent Articles</li>
<li>
<a href="/post/haroopress-on-cloud-9" target="_blank">Cloud9 IDE에 하루프레스 설치하기!
<span class="label">nezz</span></a>
</li>
<li>
<a href="/post/harupeureseu-gaeindomein-seoljeongbangbeob" target="_blank">하루프레스 개인도메인 설정방법
<span class="label">nezz</span></a>
</li>
<li>
<a href="/post/h3-conference-2012" target="_blank">H3 Conference 2012 참가 후기
<span class="label">nezz</span></a>
</li>
</ul>
</div>
</div>
<div class="span9">
<div class="row">
<div class="span9">
<div class="well bg">
<div class="page-header">
<h1>H3 Conference 2012 참가 후기</h1>
</div>
<div class="markdown-wrapper">
<p>어제 KTH에서 매년 진행하는 <a href="http://h3.kthcorp.com/2012/">H3 컨퍼런스</a>를 다녀왔다. 작년에는 사전등록 시간을 잘못 알아서 신청하지 못했었는데, 이번엔 사전등록을 모바일 앱으로만 할 수 있었는데다가 시간이 되니까 알아서 푸쉬노티를 보내줘서 사전등록에 성공했다. 컨퍼런스를 시작하면서 <a href="http://twitter.com/xguru">@xguru</a>님이 말씀하시길 7분만에 사전등록이 완료되었다고 하니 난 운이 좋았던것 같다.</p><p><strong>H3 2012 행사 스케치 영상</strong></p><p><iframe class="youtube " style="100%" src="https://www.youtube.com/embed/7QhC7gflC04"></iframe><br/></p><p>주제는 꽤 다양했는데 나는 최근 Node.js에 관심이 생기기 시작 했고 또한 최근 사용하고 있는 블로그 툴인 하루프레스를 만드신 <a href="http://twitter.com/rhiokim">@rhiokim</a>님이 발표를 하셔서 관련 세션들을 들었다. 들었던 세션들을 정리해보았다.</p>
<h2 id="toc_0">&lt;모두의 도구&gt;로 프로토타이핑을 시작하라!</h2>
<p>이 세션에서 전달하고자 한 내용은 Evernote의 공유 및 몇가지 편한기능과 아웃풋으로 PNG파일을 내보내는 Adobe Fireworks를 이용해서 기획자, 디자이너, 개발자 사이의 커뮤니케이션을 잘할 수 있고 그 방법에 대해서 설명했다.</p><p>그동안 사람들은 포토샵 파일 또는 파워포인트 슬라이드 문서를 만들어 커뮤니케이션을 해왔는데 Fireworks를 이용하면 페이지 기능과 라이브러리에 여러 페이지에서 공통으로 사용하는 심볼들을 라이브러리로 관리하여 쉽고 효율을 높일 수 있었다. 한개 파일에 150개 이상 관리가 가능하고 용량도 크지 않아 Evernote에 첨부하여 공유하기 적합하다.</p><p>에버노트에는 무료계정에서도 psd, ai, 이미지 파일, pdf, audio 등을 모두 첨부할 수 있다. 또한 Fireworks의 png파일을 첨부하면 에버노트에서 바로 열어 수정하고 변경사항이 바로 적용되어 편리하다. 검색기능도 매우 훌륭한데 PDF 문서안의 텍스트도 검색이 되고(옵션에서 PDF를 첨부파일 형태가 아닌 inline형태로 삽입되도록 설정하여야만 가능), 이미지에 포함된 텍스트도 검색이 된다. 그 외에도 특정 텍스트를 암호화 할 수 있는 등 공유하는데 매우 적합하다.</p><p>지금까지 그 누구도 Fireworks + Evernote 조합으로 사용하는 것을 본 적이 없었기에 매우 참신한 방법이었다. 그러나 단점을 찾자면, Fireworks는 비싼 라이센스 비용을 부담하고 사용하여야 하므로 자금력이 있는 큰 회사 이외에는 적용하기 힘들것으로 보이고, Evernote는 무료 계정에서 노트를 공유하고 보는것은 가능하지만 수정까지 하려면 적어도 공유한 계정은 프리미엄 계정이어야 한다는 단점이 있다.</p><p>하지만 &#39;돈&#39; 문제를 제외한다면 지금까지의 커뮤니케이션 방법을 대체 할 수 있을 것으로 보인다.</p>
<h2 id="toc_1">우리가 모르는 Node.js로 할 수 있는 몇가지</h2>
<p>내가 들었던 세션 중에서 내가 가장 관심을 가졌었고, 가장 흥미로웠던 세션이었다.</p><p>자바스크립트 개발자이신 <a href="http://twitter.com/rhiokim">@rhiokim</a>님의 세션. 세션 제목이 <code>우리가 모르는 Node.js로 할 수 있는 몇가지</code>이기 때문에 node.js를 이용한 여러가지를 경험을 들려주셨다.</p><p>첫번째는 <a href="https://github.com/rhiokim/locally">locally</a>. 로컬에서 간단하게 로컬 디렉토리를 기반으로 웹서버를 실행할 수 있는 미들웨어. 프론트앤드 개발자는 테스트를 위해 항상 웹서버환경을 구축을 해야했지만 너무 무겁고 번거롭기에 개발하게 되셨다고. locally는 현재 위치를 root해서 localhost를 지정할 수 있다.</p><p>두번째로 내가 요즘 블로그 글을 작성하고 있는 <a href="http://haroopress.com">Haroopress</a>에 대한 내용이였다. node.js와 여러가지 모듈과 오픈소스를 이용해서 만든 블로깅 툴로 정적 페이지 기반이라서 별도의 서버가 필요없이 github에 블로깅 할 수 있다는 장점이 있다. 또한 계속 새로운 기능이 추가되고 업데이트 되는것이 큰 매력이라고 할 수 있겠다. 또한 Markdown을 이용해서 Geek 한 사람들에게는 큰 매력일 수 있겠다.</p><p>마지막은 node.js와 <a href="http://www.arduino.cc/">아두이노</a>를 이용한 Home Automation 이였다. 구성은 node, 소켓, 아두이노, 각종 기기들로 구성되어 있었다. <a href="http://twitter.com/rhiokim">@rhiokim</a>님이 아이패드를 멀리 가지고 다니시면서 직접 아두이노를 제어하셨고, 아두이노에 연결된 기기들이 On/Off가 되었다. </p><p><img src="./@img/A6ggkeBCQAAVHUH.jpeg" alt="아이패드로 제어하는 모습"></p><p>그리고 아두이노에 연결된 온도센서와 조도센서가 아두이노에 데이터를 전달하면 그것이 아이패드에 직접 표시가 되는것을 볼 수 있었다. 상당히 신기한 경험이었다. 아두이노 이외에도 <a href="http://beagleboard.org/bone">Beagle Bone</a>, <a href="http://www.raspberrypi.org/">Raspberry Pi</a> 라는 것이 있고, 이것들에 적용하면 더 만들기 쉽다고 알려주셨다.</p><p>상당히 많은것들을 보고 느낄수 있었던 세션이었다.</p>
<h2 id="toc_2">봄날은 간다</h2>
<p>인터넷의 시작과 동시에 발전되온 프로그래밍 기술 등에 대해서 정리해보고 미래에는 어떻게 변할지에 대해서 고민해 보는 세션이었다. <code>봄날은 간다</code>라는 세션의 이름은 특정 프로그래밍 언어, 프레임워크들이 유행하고 시들해지는 흐름을 말하는 것이었다.</p><p>항상 그래왔다. 언어는 이게 좋다 저게 좋다 싸우고 동기식/비동기식 따지는데, 결론은 여러가지 기술들을 적절히 조합해서 쓰는것이 가장 좋다는 것.</p>
<h2 id="toc_3">Three.js로 시작하는 WebGL</h2>
<p>웹브라우저에서 제공하는 3차원 그래픽 자바스크립트 API인 WebGL과 3차원 그래픽 왕초보를 위한 경량 자바스크립트 라이브러리인 Three.js를 소개하는 세션이었다. 그래픽 분야에 별 관심이 없는 나이지만 웹에서도 구현이 된다고 하니 관심이 생겨 듣게 되었다.</p><p>하나 하나 소개해주시면서 일일이 예제를 보여주셔서 이해가 정말 잘 되었다. Three.js는 그래픽 표현을 해주는 것은 물론 일반 3D 그래픽 툴로 만든 모델들을 그대로 가져다 쓸 수 있다는것이 너무나도 신기했다. 컴퓨터 성능의 발전과 네트워크 속도의 향상이 그래픽 기술에도 큰 영향을 주는것도 알게되었다.</p>
<h2 id="toc_4">OAuth2 - API인증을 위한 만능 도구상자</h2>
<p>예전에 Daum 에서 인턴할때 DNA Lab팀에서 API에 대해서 많이 보곤 했어서 궁금해서 들어가본 세션. </p><p>최근 <a href="http://oauth.net/2/">OAuth 2.0</a>이 표준으로 확정되었다고 한다. 2.0은 상당히 많은 부분이 변한것 같다. 일단 1.0에서는 Protocol이라고 했었는데, 2.0에서는 Framework으로 변했다. 또 Signature를 필요로했던 복잡한 인증과정을 HTTPS로 바뀌었고, 다양한 인증타입을 지원하게 되었다는 것.</p>
<h2 id="toc_5">오픈소스로 개발 실력 쌓기</h2>
<p>회사에서 요즘 오픈소스를 가지고 프로젝트를 진행하고 있어서 관심을 가지고 들었던 세션.</p><p>오픈소스를 분석하는것은 소스를 짠 사람의 생각을 읽는것. 오픈소스를 분석하면서 구조를 파악하고 좋은 코드들을 보면서 공부를 할 수 있다. 그리고 분석하는 것을 넘어 버그를 찾거나, 의견을 내는 것도 좋다. 그리고 궁극적으로 자신이 직접 만든 코드를 오픈소스화 해볼것.</p><p><em class="label label-info"><strong><i class="icon-info-sign icon-white"></i> 관련링크</strong></em></p>
<ul>
<li><a href="http://h3.kthcorp.com/2012/">H3 Conference</a></li>
<li><a href="http://dev.kthcorp.com/2012/11/01/h3-2012-thankyou/">H3 개발자 컨퍼런스 2012 후기</a></li>
<li><a href="http://www.youtube.com/watch?v=7QhC7gflC04">H3 2012 행사 스케치 영상</a></li>
<li>H3 개발자 컨퍼런스 자료집
<ul>
<li><a href="http://dev.kthcorp.com/wp-content/uploads/2012/11/H3_2012_single_sided.pdf">H3 개발자 컨퍼런스 2012 자료집 – 단면.PDF ( 25.4MB )</a></li>
<li><a href="http://dev.kthcorp.com/wp-content/uploads/2012/11/H3_2012_double_sided.pdf">H3 개발자 컨퍼런스 2012 자료집 – 양면.PDF ( 25.4MB )</a></li>
<li><a href="http://dev.kthcorp.com/wp-content/uploads/2012/01/KTH_H3_Developer_Conference_EBook_Single_Sided.pdf">H3 개발자 컨퍼런스 2011 자료집 – 단면.PDF ( 65.2MB )</a></li>
<li><a href="http://dev.kthcorp.com/wp-content/uploads/2012/01/KTH_H3_Developer_Conference_EBook_Double_Sided.pdf">H3 개발자 컨퍼런스 2011 자료집 – 양면.PDF ( 65MB )</a></li>
</ul></li>
</ul>
</div>
<hr />
<div class="row-fluid">
<div class="pull-right">
<a href="/post/haroopress-on-cloud-9" class="btn btn-info">Cloud9 IDE에 하루프레스 설치하기! <i class="icon-white icon-chevron-right"></i></a>
</div>
</div>
<div class="row-fluid">
<div id="disqus_thread"></div>
<script type="text/javascript">
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = 'nezz-blog'; // required: replace example with your forum shortname
/* * * DON'T EDIT BELOW THIS LINE * * */
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<a href="http://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a>
</div>
</div>
</div>
</div>
<div class="row">
</div>
</div>
</div>
<!--<div class="row">-->
<!--<div class="offset3 span9">-->
<!--<strong>tags</strong> :-->
<!---->
<!--<a href="/tag/H3">H3</a>&nbsp;-->
<!---->
<!--<a href="/tag/dev">dev</a>&nbsp;-->
<!---->
<!--</div>-->
<!--</div>-->
</div><!-- /container -->
<footer class="footer">
<div class="container">
<div class="row">
<div class="span12 ">
<div class="well">
<p class="pull-right"><a href="#">Back to top</a></p>
<strong>haroopress</strong> developed by <a href="http://twitter.com/rhiokim" target="_blank">@rhiokim</a>,<a href="http://twitter.com/haroopress" target="_blank">@haroopress</a> and source in <a href="https://github.com/rhiokim/haroopress" target="_blank">github</a><br/>
Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.<br />
Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.
</div>
</div>
</div>
</div>
</footer>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36216394-3']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.