feed.xml

<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom" ><generator uri="https://jekyllrb.com/" version="3.8.6">Jekyll</generator><link href="https://bylee.github.io/blog/feed.xml" rel="self" type="application/atom+xml" /><link href="https://bylee.github.io/blog/" rel="alternate" type="text/html" /><updated>2019-10-17T14:48:24+09:00</updated><id>https://bylee.github.io/blog/feed.xml</id><title type="html">DOO</title><subtitle>Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.</subtitle><author><name>Bonyong Lee</name></author><entry><title type="html">북마클릿을 이용한 지갑 만들기</title><link href="https://bylee.github.io/blog/blockchain/bookmarklet-wallet/" rel="alternate" type="text/html" title="북마클릿을 이용한 지갑 만들기" /><published>2019-09-20T00:33:21+09:00</published><updated>2019-09-20T00:33:21+09:00</updated><id>https://bylee.github.io/blog/blockchain/bookmarklet-wallet</id><content type="html" xml:base="https://bylee.github.io/blog/blockchain/bookmarklet-wallet/">&lt;p&gt;이번 블로그에서는 웹 환경에서 키스토어 파일을 사용해서 지갑을 활성화하는 기능을 개선하는 과정을 담고 있습니다. 글을 읽기에 부담이 없도록 세가지 소주제로 나누어 진행합니다.&lt;/p&gt;

&lt;ol&gt;
  &lt;li&gt;웹 환경에서 키스토어 파일을 사용하는 지갑&lt;/li&gt;
  &lt;li&gt;북마클릿&lt;/li&gt;
  &lt;li&gt;북마클릿을 활용한 지갑&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;블록체인을 사용하기 위해서는 지갑이라고 불리는 앱이 필수적입니다. 콜드 월렛이라고 불리는 실물 형태의 지갑도 있고, 모바일 앱이나 브라우져의 플러그인 형태도 있습니다. 또 이러한 설치형 지갑이 아닌 서비스형 지갑의 형태가 존재하는데 바이낸스 분산 거래소나 마이 이더 월렛같은 것이 있습니다. 오늘은 웹 앱에서 지갑을 사용하는 것에 대해서 살펴보고 어떤 문제가 있는지 알아보도록 하겠습니다.&lt;/p&gt;

&lt;h1 id=&quot;웹-환경에서-키스토어-파일을-사용하는-지갑&quot;&gt;웹 환경에서 키스토어 파일을 사용하는 지갑&lt;/h1&gt;

&lt;p&gt;아르고를 바이낸스 분산 거래소에 상장하는 과정에서 지갑을 생성하고, 사용해보면서 많이 놀랐는데 그 이유는 사용하기가 매우 불편했기 때문입니다. 블록체인 기술이 충분히 성숙되지 않아 기술에 더 많이 신경을 쓴 탓이겠지만, 일반 사용자를 대상으로 하는 서비스 치고는 UX가 좋지 못합니다. 이후에 마이 이더 월렛이라는 지갑도 비슷한 방식으로 사용하는 것을 보고 단지 바이낸스만의 문제는 아닌 것을 알게되었습니다. 그리고, 이런 문제를 어떻게 해결하고 더 편리하게 서비스를 사용할 수 있을까하는 고민을 시작하게 되었습니다.(왜 니가 남의 서비스를 고민하냐고 한다면 할 말이 없습니다)
먼저 바이낸스 거래소를 사용하는 형태를 살펴보겠습니다.&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/blog/assets/images/bookmarklet-wallet/binance-step1.png&quot; alt=&quot;Binance Exchange&quot; title=&quot;Binance Exchange&quot; /&gt;&lt;/p&gt;

&lt;p&gt;우측 상단에 Connect Wallet이라는 버튼이 보이는데, 이 버튼을 사용해서 지갑을 활성화할 수 있습니다.&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/blog/assets/images/bookmarklet-wallet/binance-step2.png&quot; alt=&quot;Select wallet type&quot; title=&quot;Select wallet type&quot; /&gt;&lt;/p&gt;

&lt;p&gt;네 가지 종류의 지갑을 지원하는데, 오늘 살펴볼 지갑은 Keystore File을 사용한 지갑입니다.&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/blog/assets/images/bookmarklet-wallet/binance-step3.png&quot; alt=&quot;Wallet step&quot; title=&quot;Wallet step&quot; /&gt;&lt;/p&gt;

&lt;p&gt;지갑을 활성화하기 위해서는 총 네 단계를 거쳐야 합니다.&lt;/p&gt;

&lt;ol&gt;
  &lt;li&gt;지갑의 종류를 선택한다.&lt;/li&gt;
  &lt;li&gt;개인키 파일을 선택한다.&lt;/li&gt;
  &lt;li&gt;패스워드를 입력한다.&lt;/li&gt;
  &lt;li&gt;해제 버튼을 누른다.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;바이낸스 거래소를 사용하면서 매우 불편하게 느꼈던 지점이었습니다.&lt;/p&gt;

&lt;p&gt;이더리움 지갑으로 유명한 마이이더월렛도 비슷합니다.&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/blog/assets/images/bookmarklet-wallet/mew-step1.png&quot; alt=&quot;My ehterwallet&quot; title=&quot;My ehterwallet&quot; /&gt;&lt;/p&gt;

&lt;p&gt;지갑의 유형을 선택하고&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/blog/assets/images/bookmarklet-wallet/mew-step2.png&quot; alt=&quot;Select file in my ehterwallet&quot; title=&quot;Select file in my ehterwallet&quot; /&gt;&lt;/p&gt;

&lt;p&gt;키스토어를 눌러서 파일을 선택하고&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/blog/assets/images/bookmarklet-wallet/mew-step3.png&quot; alt=&quot;Input password&quot; title=&quot;Input password&quot; /&gt;&lt;/p&gt;

&lt;p&gt;패스워드를 입력합니다.&lt;/p&gt;

&lt;p&gt;UI가 조금 다른 형태지만 전체적인 흐름은 같다고 볼 수 있습니다.&lt;/p&gt;

&lt;p&gt;이 UX의 불편함을 해결하기 위한 기반 기술인 ‘북마클릿’에 대해 알아보겠습니다.&lt;/p&gt;

&lt;h1 id=&quot;북마클릿&quot;&gt;북마클릿&lt;/h1&gt;

&lt;p&gt;북마클릿은 표준 웹 기술로 분류되지만 크게 관심받지 못하는 기술입니다. W3C 스펙에 Favelets라는 기술로 소개되지만 개인적으로는 북마클릿이라는 이름이 이 기술을 잘 드러내기 때문에 선호합니다.&lt;/p&gt;

&lt;p&gt;모든 브라우저는 북마크(책갈피)라는 기능을 가지고 있습니다. 북마크는 미리 홈페이지의 주소를 저장해 놓고 북마크를 클릭하는 것만으로 해당 홈페이지로 이동할 수 있는 기능입니다. 일종의 단축 아이콘 같은 것이죠.&lt;/p&gt;

&lt;p&gt;북마크에 저장되는 홈페이지의 주소는 Uniform Resource Locator, 즉 URL이라는 형태로 표현됩니다.&lt;/p&gt;

&lt;p&gt;(예시) https://www.blocko.io/resource/blog/&lt;/p&gt;

&lt;p&gt;‘://’ 앞 부분은 URL을 어떻게 처리해야 하는지를 지칭하는 부분으로 ‘schema’ 또는 ‘protocol’로 부릅니다. ‘www.blocko.io’는 ‘서버의 이름’ 또는 ‘IP 주소’가 들어가는 부분이고, 그 뒤의 나머지 부분은 ‘경로’라고 하는 부분입니다.&lt;/p&gt;

&lt;p&gt;URL은 더 많은 부분으로 구성되어 있지만, 본 문서에서 기억해야 할 것은 ‘스키마(schema)’입니다. 브라우저는 스키마(schema)에 따라 URL을 처리하는 주체가 달라지는데, http나 https뿐만 아니라 file이나 ftp 같은 다양한 스키마(schema)를 처리할 수 있습니다.&lt;/p&gt;

&lt;p&gt;그중에서도 javascript라는 스키마(schema)를 가진 URL은 자바 스크립트 엔진에 전달됩니다. javascript라는 스키마(schema)를 가진 URL을 북마크에 저장하면 어떤 일이 벌어질까요?&lt;/p&gt;

&lt;p&gt;네, 방금 당신은 북마클릿이라는 기술을 배웠습니다. 단지 북마크에 ‘javascript://’로 시작하는 URL을 넣으면 그것을 우리는 북마클릿이라고 부릅니다. 어떻게 동작하는지 간단히 확인해보겠습니다.&lt;/p&gt;

&lt;p&gt;먼저 북마크 툴바에서 우 클릭을 하면 “새 북마크”라는 메뉴가 나타납니다.&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/blog/assets/images/bookmarklet-wallet/bookmark-step1.png&quot; alt=&quot;Start bookmarklet&quot; title=&quot;Start bookmarklet&quot; /&gt;&lt;/p&gt;

&lt;p&gt;이 메뉴를 누르고 북마크 이름에 Hello, world를 입력하여 북마크 주소에 아래와 같이 입력합니다.&lt;/p&gt;

&lt;div class=&quot;language-javascript highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;nx&quot;&gt;javascript&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;alert&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;'&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;북마클릿의 세계에 오신 것을 환영합니다.&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;&lt;img src=&quot;/blog/assets/images/bookmarklet-wallet/bookmark-step2.png&quot; alt=&quot;Input hello, world&quot; title=&quot;Input hello, world&quot; /&gt;&lt;/p&gt;

&lt;p&gt;이제 버튼을 눌러 보면, 작은 대화 상자에 “북마클릿의 세계에 오신 것을 환영합니다.”를 볼 수 있습니다.&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/blog/assets/images/bookmarklet-wallet/bookmark-step3.png&quot; alt=&quot;Run hello, world&quot; title=&quot;Run hello, world&quot; /&gt;&lt;/p&gt;

&lt;p&gt;북마클릿으로 사용되는 자바스크립트는 약 5kb의 길이 제한을 가지고 있지만, 미리 자바스크립트를 서버에 올려두고 이를 로딩하는 부트스트랩 코드를 북마클릿으로 만드는 방법을 통해 해결할 수 있습니다.&lt;/p&gt;

&lt;p&gt;북마클릿이 재미있는 이유는 브라우저가 다른 사이트를 방문한 상태에서 북마클릿을 실행하면 사이트를 떠나지 않을 뿐만 아니라 사이트의 정보에 접근할 수 있다는 점입니다.&lt;/p&gt;

&lt;p&gt;앞에서 만든 북마클릿을 다음과 같이 수정해보겠습니다.&lt;/p&gt;

&lt;div class=&quot;language-javascript highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;nx&quot;&gt;javascript&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;alert&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nb&quot;&gt;document&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;title&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;+&lt;/span&gt; &lt;span class=&quot;dl&quot;&gt;'&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;의 세계에 오신 것을 환영합니다.&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;&lt;img src=&quot;/blog/assets/images/bookmarklet-wallet/bookmark-step4.png&quot; alt=&quot;Run in daum&quot; title=&quot;Run in daum&quot; /&gt;&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/blog/assets/images/bookmarklet-wallet/bookmark-step5.png&quot; alt=&quot;Run in facebook&quot; title=&quot;Run in facebook&quot; /&gt;&lt;/p&gt;

&lt;p&gt;북마클릿을 사용한 멋진 사이트를 한번 구경해보시죠.&lt;/p&gt;

&lt;p&gt;&lt;a href=&quot;[https://eatponies.com/]&quot;&gt;https://eatponies.com/&lt;/a&gt;-&amp;gt;홈페이지 위에 펜으로 글씨를 쓰거나 그림을 그릴 수 있게 해줍니다.&lt;/p&gt;

&lt;p&gt;&lt;a href=&quot;[http://www.memonic.com/]&quot;&gt;http://www.memonic.com/&lt;/a&gt;-&amp;gt;홈페이지를 메모에 기록해 둘 수 있습니다.&lt;/p&gt;

&lt;p&gt;이렇게 북마클릿은 어떤 사이트에 마치 플러그인처럼 기능을 부가할 수 있도록 해줍니다.&lt;/p&gt;

&lt;h1 id=&quot;북마클릿을-활용한-지갑&quot;&gt;북마클릿을 활용한 지갑&lt;/h1&gt;

&lt;p&gt;북마클릿으로 키스토어 지갑을 개선하는 개략적인 방법은 UX를 개선하는 자바스크립트를 만들고 이것을 북마클릿에 등록하는 것입니다. 예시로 바이낸스 거래소의 로그인 과정을 개선해보겠습니다.&lt;/p&gt;

&lt;p&gt;바이낸스 로그인 화면에서 파일 업로드를 위한 입력을 개발자 도구로 찾아봅니다.&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/blog/assets/images/bookmarklet-wallet/inject-step1.png&quot; alt=&quot;Check upload button&quot; title=&quot;Check upload button&quot; /&gt;&lt;/p&gt;

&lt;p&gt;안타깝게도 id와 class를 가지고 있지 않습니다. 태그 이름으로 확인해보겠습니다.&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/blog/assets/images/bookmarklet-wallet/inject-step2.png&quot; alt=&quot;Check upload button&quot; title=&quot;Check upload button&quot; /&gt;&lt;/p&gt;

&lt;p&gt;두 개의 input이 있고 그중에 첫 번째가 파일을 위한 input입니다. 이 input에 파일의 내용을 입력하도록 프로그래밍을 하겠습니다.&lt;/p&gt;

&lt;div class=&quot;language-javascript highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;kd&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;fileInput&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nb&quot;&gt;document&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;querySelector&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;'&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;input[type=&quot;file&quot;]&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;&lt;img src=&quot;/blog/assets/images/bookmarklet-wallet/inject-step3.png&quot; alt=&quot;Check upload button attrs&quot; title=&quot;Check upload button attrs&quot; /&gt;&lt;/p&gt;

&lt;p&gt;react를 사용해 만들어진 것 같습니다. react의 컴포넌트의 이벤트 핸들러를 트리거해야 합니다.&lt;/p&gt;

&lt;div class=&quot;language-javascript highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;kd&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;instanceAttr&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nb&quot;&gt;Object&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;keys&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;fileInput&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;).&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;find&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;key&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&amp;gt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;key&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;startsWith&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;__reactInternalInstance$&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;));&lt;/span&gt;
&lt;span class=&quot;kd&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;reactComponent&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;fileInput&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;instanceAttr&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;];&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;&lt;img src=&quot;/blog/assets/images/bookmarklet-wallet/inject-step4.png&quot; alt=&quot;Find handler&quot; title=&quot;Find handler&quot; /&gt;&lt;/p&gt;

&lt;p&gt;우리가 원하는 이벤트 핸들러가 저기 보이는군요. 이젠 이벤트 핸들러에 전달할 인자를 만들어보겠습니다.&lt;/p&gt;

&lt;div class=&quot;language-javascript highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;kd&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;content&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;dl&quot;&gt;'&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;{&quot;version&quot;:1,&quot;id&quot;:&quot;784517f5–5dc1–437b-b154-ed1759414a08&quot;,&quot;crypto&quot;:{&quot;ciphertext&quot;:&quot;f4c000cb92df43055568591a1a51c5f7f5eb83f73a73c7933c3dc26e0a1cdb76&quot;,&quot;cipherparams&quot;:{&quot;iv&quot;:&quot;2e2f8e2e2b9a10c3770aa19b7dfb92f9&quot;},&quot;cipher&quot;:&quot;aes-256-ctr&quot;,&quot;kdf&quot;:&quot;pbkdf2&quot;,&quot;kdfparams&quot;:{&quot;dklen&quot;:32,&quot;salt&quot;:&quot;f4f609e63c16c6133ff68967c2c33ba0872603fa09e8efd6d098a1685a7c0228&quot;,&quot;c&quot;:262144,&quot;prf&quot;:&quot;hmac-sha256&quot;},&quot;mac&quot;:&quot;9615f559373167aaf099e0487325cf21a10041a5401f477c75c337ca17fdcf5db0b4adaf6ff62509 a8b36dbae9a7ed3df794c66901b4e0b69fe8d8fb919307a3&quot;}}&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;kd&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;blob&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;new&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;Blob&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;([&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;content&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;],&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;na&quot;&gt;type&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;dl&quot;&gt;'&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;application/json&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;});&lt;/span&gt;
&lt;span class=&quot;kd&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;outputfile&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;k&quot;&gt;new&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;File&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;([&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;blob&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;],&lt;/span&gt; &lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;adhoc.keystore&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;키 스토어 파일의 내용을 기반으로 파일 객체를 만듭니다.&lt;/p&gt;

&lt;p&gt;이 객체를 핸들러에게 전달합니다.&lt;/p&gt;

&lt;div class=&quot;language-javascript highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;nx&quot;&gt;reactComponent&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;memoizedProps&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;onChange&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;({&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;currentTarget&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;files&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;outputfile&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;]&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;이 과정을 실행하면, 화면에 파일이 선택되었다는 체크박스가 나타납니다.&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/blog/assets/images/bookmarklet-wallet/inject-step5.png&quot; alt=&quot;File selected&quot; title=&quot;File selected&quot; /&gt;&lt;/p&gt;

&lt;p&gt;편의를 개선하기 위해 처음에 지갑의 종류를 선택하는 동작과 패스워드 입력에 포커스가 가도록 합니다.&lt;/p&gt;

&lt;p&gt;지갑 선택은 다음의 스크립트로 가능합니다.&lt;/p&gt;

&lt;div class=&quot;language-javascript highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;nb&quot;&gt;document&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;querySelector&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;'&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;[data-cy=&quot;menu-KeyStore File&quot;]&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;).&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;click&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;마지막으로 패스워드 입력에 포커스를 보내는 명령입니다.&lt;/p&gt;

&lt;div class=&quot;language-javascript highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;nb&quot;&gt;document&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;querySelector&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;'&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;input[type=&quot;password&quot;]&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;).&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;focus&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;필요한 모든 기능을 자동화하였습니다. 공간을 절약하기 위해 임시변수들을 제거하면 전체 스크립트는 다음과 같습니다.&lt;/p&gt;

&lt;div class=&quot;language-javascript highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;nb&quot;&gt;document&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;querySelector&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;'&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;[data-cy=&quot;menu-KeyStore File&quot;]&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;).&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;click&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;();&lt;/span&gt;

&lt;span class=&quot;nb&quot;&gt;document&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;querySelector&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;'&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;input[type=&quot;file&quot;]&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)[&lt;/span&gt;&lt;span class=&quot;nb&quot;&gt;Object&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;keys&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nb&quot;&gt;document&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;querySelector&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;'&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;input[type=&quot;file&quot;]&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)).&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;find&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;key&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&amp;gt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;key&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;startsWith&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;__reactInternalInstance$&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;))].&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;memoizedProps&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;onChange&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;({&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;currentTarget&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;files&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;k&quot;&gt;new&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;File&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;([&lt;/span&gt;&lt;span class=&quot;k&quot;&gt;new&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;Blob&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;([&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;'&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;{&quot;version&quot;:1,&quot;id&quot;:&quot;784517f5–5dc1–437b-b154-ed1759414a08&quot;,&quot;crypto&quot;:{&quot;ciphertext&quot;:&quot;f4c000cb92df43055568591a1a51c5f7f5eb83f73a73c7933c3dc26e0a1cdb76&quot;,&quot;cipherparams&quot;:{&quot;iv&quot;:&quot;2e2f8e2e2b9a10c3770aa19b7dfb92f9&quot;},&quot;cipher&quot;:&quot;aes-256-ctr&quot;,&quot;kdf&quot;:&quot;pbkdf2&quot;,&quot;kdfparams&quot;:{&quot;dklen&quot;:32,&quot;salt&quot;:&quot;f4f609e63c16c6133ff68967c2c33ba0872603fa09e8efd6d098a1685a7c0228&quot;,&quot;c&quot;:262144,&quot;prf&quot;:&quot;hmac-sha256&quot;},&quot;mac&quot;:&quot;9615f559373167aaf099e0487325cf21a10041a5401f477c75c337ca17fdcf5db0b4adaf6ff62509a8b 36dbae9a7ed3df794c66901b4e0b69fe8d8fb919307a3&quot;}}&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;],&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;na&quot;&gt;type&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;dl&quot;&gt;'&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;application/json&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;})],&lt;/span&gt; &lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;adhoc.keystore&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)]&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;});&lt;/span&gt;

&lt;span class=&quot;nb&quot;&gt;document&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;querySelector&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;'&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;input[type=&quot;password&quot;]&lt;/span&gt;&lt;span class=&quot;dl&quot;&gt;'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;).&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;focus&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;();&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;이제 이 자바스크립트를 북마크에 등록하기만 하면 됩니다.&lt;/p&gt;

&lt;p&gt;javascript: 를 앞에 붙여주시는 것 잊지마시고요&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/blog/assets/images/bookmarklet-wallet/inject-step6.png&quot; alt=&quot;Input complete bookmarklet&quot; title=&quot;Input complete bookmarklet&quot; /&gt;&lt;/p&gt;

&lt;h1 id=&quot;마치며&quot;&gt;마치며&lt;/h1&gt;

&lt;p&gt;지금까지 북마클릿을 사용하여 지갑의 사용성을 향상시키는 내용이었습니다. 블록체인 기술은 그 혁신성으로 많은 관심을 받고 있는 것에 비해 서비스/앱의 사용성을 등한시하는 경우가 많아 안타까운 경우가 많습니다. 앞으로 좋은 블록체인 서비스와 앱들이 더욱 사랑받고, 탈중앙화의 혜택이 모두에게 돌아가길 바랍니다.&lt;/p&gt;</content><author><name>Bonyong Lee</name></author><category term="blockchain," /><category term="wallet," /><category term="bookmarklet" /><summary type="html">이번 블로그에서는 웹 환경에서 키스토어 파일을 사용해서 지갑을 활성화하는 기능을 개선하는 과정을 담고 있습니다. 글을 읽기에 부담이 없도록 세가지 소주제로 나누어 진행합니다.</summary></entry><entry><title type="html">블로그 시작하기</title><link href="https://bylee.github.io/blog/blog/welcome-to-jekyll/" rel="alternate" type="text/html" title="블로그 시작하기" /><published>2019-07-12T13:56:21+09:00</published><updated>2019-07-12T13:56:21+09:00</updated><id>https://bylee.github.io/blog/blog/welcome-to-jekyll</id><content type="html" xml:base="https://bylee.github.io/blog/blog/welcome-to-jekyll/">&lt;h1 id=&quot;글을-어디에-쓸까&quot;&gt;글을 어디에 쓸까?&lt;/h1&gt;
&lt;p&gt;처음에는 미디엄이나 브런치에 쓰려고 했는데, 생각보다 자유도가 떨어진다는 것을 알고나서 아예 정적 페이지 생성기쪽으로 생각을 바꿜다. 요즘 뜨고 있는 게츠비를 고려했는데, 커스터마이징이나 문제 해결에 시간을 쓰다보면 주객인 전도될 것같아 지킬로 작성해서 깃헙에 올리기로 하였다.&lt;/p&gt;

&lt;h2 id=&quot;지킬이란&quot;&gt;지킬이란?&lt;/h2&gt;
&lt;p&gt;간단한 명령으로 정적 사이트를 생성할 수 있는 오픈 소스이다. 간단한 사용법과 많은 테마, 쉬운 커스터마이징으로 많은 인기를 끌고 있다. 나같은 경우는 사이트의 모양이나 기능을 크게 따지지 않고 무난하게 쓸 수 있는 것을 선택하였다.&lt;/p&gt;

&lt;p&gt;지킬 사이트에 들어가 보면 간단한 명령어 몇 개로 사이트를 생성할 수 있음을 알 수 있다.&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/blog/assets/images/welcome-to-jekyll/intro-jekyll.png&quot; alt=&quot;Jekyll site&quot; title=&quot;Jekyll site&quot; /&gt;&lt;/p&gt;

&lt;p&gt;그런데, 첫번째 명령은 루비의 gem을 사용하는 것이다. 우선 루비를 설치해야겠군.&lt;/p&gt;

&lt;h1 id=&quot;루비-설치하기&quot;&gt;루비 설치하기&lt;/h1&gt;

&lt;p&gt;루비 설치를 위해 &lt;a href=&quot;https://rubyinstaller.org&quot; target=&quot;_blank&quot;&gt;https://rubyinstaller.org&lt;/a&gt;에 들어가보면, 큼지막하게 Download라는 버튼을 볼 수 있다. 눌러보자.&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/blog/assets/images/welcome-to-jekyll/install-ruby01.png&quot; alt=&quot;Install ruby #1&quot; title=&quot;Install ruby #1&quot; /&gt;&lt;/p&gt;

&lt;p&gt;다운로드를 위한 링크들이 보이고, Ruby+Devkit 2.5.X (x64) 를 추천한다는 문구가 보인다. 왼쪽에 추천하는 버젼의 링크가 눈에 띄인다.&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/blog/assets/images/welcome-to-jekyll/install-ruby02.png&quot; alt=&quot;Install ruby #2&quot; title=&quot;Install ruby #2&quot; /&gt;&lt;/p&gt;

&lt;p&gt;다운로드 후에 설치 프로그램을 실행해보자. 사용 동의를 요구하는 화면이 나타나면 동의를 선택하고, Next 버튼을 누른다.&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/blog/assets/images/welcome-to-jekyll/install-ruby03.png&quot; alt=&quot;Install ruby #3&quot; title=&quot;Install ruby #3&quot; /&gt;&lt;/p&gt;

&lt;p&gt;이후에 계속 Next 버튼을 누르면, 설치가 성공했다는 메시지와 함께 툴체인 설치를 할지 물어본다. 툴체인은 루비가 아닌 c나 c++를 빌드하는데 필요한 프로그램이라고 이해하면 된다.&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/blog/assets/images/welcome-to-jekyll/install-ruby04.png&quot; alt=&quot;Install ruby #4&quot; title=&quot;Install ruby#4&quot; /&gt;&lt;/p&gt;

&lt;p&gt;나는 나중을 위해 msys2와 mingw 툴체인 모두 설치하였다. 필요에 따라 선택하면 된다.
&lt;img src=&quot;/blog/assets/images/welcome-to-jekyll/install-ruby05.png&quot; alt=&quot;Install ruby #5&quot; title=&quot;Install ruby#5&quot; /&gt;&lt;/p&gt;

&lt;h1 id=&quot;jekyll-설치하기&quot;&gt;Jekyll 설치하기&lt;/h1&gt;
&lt;p&gt;이제 지킬을 설치해보자. 홈페이지에 나와있는 것처럼, 다음 명령으로 설치할 수 있다.&lt;/p&gt;

&lt;figure class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-bash&quot; data-lang=&quot;bash&quot;&gt;&lt;span class=&quot;nv&quot;&gt;$ &lt;/span&gt;gem &lt;span class=&quot;nb&quot;&gt;install &lt;/span&gt;bundler jekyll&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;

&lt;p&gt;지킬 설치가 끝났다면, 지킬로 홈페이지를 생성할 차례이다. 지킬로 생성할 사이트의 이름은 blog 인데, github에 호스팅될 것이다.&lt;/p&gt;

&lt;figure class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-bash&quot; data-lang=&quot;bash&quot;&gt;&lt;span class=&quot;nv&quot;&gt;$ &lt;/span&gt;jekyll new blog&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;

&lt;p&gt;&lt;img src=&quot;/blog/assets/images/welcome-to-jekyll/install-jekyll01.png&quot; alt=&quot;Generate site using Jekyll&quot; title=&quot;Generate site using Jekyll&quot; /&gt;&lt;/p&gt;

&lt;p&gt;이것으로 사이트 생성까지 끝났다.&lt;/p&gt;

&lt;h1 id=&quot;깃헙에-게시하기&quot;&gt;깃헙에 게시하기&lt;/h1&gt;
&lt;p&gt;생성된 사이트를 깃헙에 게시하려면 간단히 다음 명령으로 가능하다.&lt;/p&gt;

&lt;figure class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-bash&quot; data-lang=&quot;bash&quot;&gt;&lt;span class=&quot;nv&quot;&gt;$ &lt;/span&gt;&lt;span class=&quot;nb&quot;&gt;cd &lt;/span&gt;blog
&lt;span class=&quot;nv&quot;&gt;$ &lt;/span&gt;git init
&lt;span class=&quot;nv&quot;&gt;$ &lt;/span&gt;git add &lt;span class=&quot;nb&quot;&gt;.&lt;/span&gt;
&lt;span class=&quot;nv&quot;&gt;$ &lt;/span&gt;git commit &lt;span class=&quot;nt&quot;&gt;-m&lt;/span&gt; &lt;span class=&quot;s2&quot;&gt;&quot;Initial commit&quot;&lt;/span&gt;
&lt;span class=&quot;nv&quot;&gt;$ &lt;/span&gt;git remote add origin git@github.com:bylee/blog.git
&lt;span class=&quot;nv&quot;&gt;$ &lt;/span&gt;git push &lt;span class=&quot;nt&quot;&gt;-u&lt;/span&gt; origin master&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;

&lt;p&gt;정상적으로 깃헙에 올라갔다면 브라우져로 &lt;a href=&quot;https://bylee.github.io/blog&quot; target=&quot;_blank&quot;&gt;https://bylee.github.io/blog&lt;/a&gt;으로 접속해보자&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/blog/assets/images/welcome-to-jekyll/install-jekyll02.png&quot; alt=&quot;Published blog&quot; title=&quot;Published blog&quot; /&gt;&lt;/p&gt;

&lt;p&gt;정상적으로 게시된 블로그를 볼 수 있다.&lt;/p&gt;</content><author><name>Bonyong Lee</name></author><category term="life" /><category term="jekyll" /><summary type="html">글을 어디에 쓸까? 처음에는 미디엄이나 브런치에 쓰려고 했는데, 생각보다 자유도가 떨어진다는 것을 알고나서 아예 정적 페이지 생성기쪽으로 생각을 바꿜다. 요즘 뜨고 있는 게츠비를 고려했는데, 커스터마이징이나 문제 해결에 시간을 쓰다보면 주객인 전도될 것같아 지킬로 작성해서 깃헙에 올리기로 하였다.</summary></entry><entry><title type="html">제주에서 첫 일주일</title><link href="https://bylee.github.io/blog/jeju/start-jeju-life/" rel="alternate" type="text/html" title="제주에서 첫 일주일" /><published>2019-07-01T17:56:21+09:00</published><updated>2019-07-01T17:56:21+09:00</updated><id>https://bylee.github.io/blog/jeju/start-jeju-life</id><content type="html" xml:base="https://bylee.github.io/blog/jeju/start-jeju-life/">&lt;h1 id=&quot;제주-한달-살이&quot;&gt;제주 한달 살이&lt;/h1&gt;
&lt;p&gt;무료한 생활에 변화를 주려고, 제주에서 한달간 살기로 했다. 회사가 제주에 지사를 가지고 있고, 직원들의 지원을 받아 돌아가면서 파견을 가는 근무 형태이다. 사실, 개발직은 장소나 시간에 크게 구애받지 않기 때문에 큰문제는 없다. 이번 주 월요일에 도착하였는데, 갑자기 급한 업무로 주말에야 글을 쓰게 되었다.&lt;/p&gt;

&lt;p&gt;첫날은 도착해서 렌트카를 빌리고 정신없이 인수인계를 하고 나니 저녁이 돼버려서 주변을 돌아볼 여유가 없었다. 다음날 아침에 주위도 둘러볼 겸 산책을 나섰다.&lt;/p&gt;

&lt;p&gt;센터는 단지내에서도 꼭대기 부분에 있어서 다른 곳으로 가보려면 내리막을 걸어야했다. 물론 돌아올 때는 오르막 길이다.&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/blog/assets/images/start-jeju-life/walk-around01.jpg&quot; alt=&quot;Around view&quot; title=&quot;Around view&quot; /&gt;&lt;/p&gt;

&lt;p&gt;내려가다 보니 카카오 건물도 보인다.&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/blog/assets/images/start-jeju-life/walk-around02.jpg&quot; alt=&quot;Kakao&quot; title=&quot;Kakao&quot; /&gt;&lt;/p&gt;

&lt;p&gt;한참을 내려가서 찾은 해장국 집에서 아침을 먹었다.&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/blog/assets/images/start-jeju-life/walk-around03.jpg&quot; alt=&quot;!Breakfast&quot; title=&quot;Breakfast&quot; /&gt;&lt;/p&gt;

&lt;p&gt;나쁘지 않은 첫날이었다. 그렇게 지내다 보니 어느덧 일주일이 지났다. 일주일간의 소감을 말하자면, 예전에 잠깐 살았던 때나 혼자 여행을 했을 때, 그리고 가족 여행을 왔을 때랑은 또 다른 느낌이다. 놀러온 것이 아니라서 그런 것인지 한달살이라 그런지 모르겠다.&lt;/p&gt;

&lt;p&gt;내일의 여행지를 찾아 설레는 날보다는 저녁거리나 내일 아침 거리를 걱정하게 되는 삶이다. 참고로 말하자면, 여기 구내 식당 맛은 상상이상으로 맛이 없다. 내가 맛집을 좋아하긴 하지만, 또 맛이 없더라도 그럭저럭 잘 먹는 편인데 여기 구내식당은 좀 심한 편이다. 그래서, 마트에서 밑반찬을 사와서 직접 밥을 해먹는다. 이것 저것 해먹을 수 있으면 좋겠지만 안타깝게도 조리시설이 없다. 사실 그렇게 불편하거나 싫은 것은 아니고 자취하는 생각도 나고 해서 사실 좋은 느낌이다.&lt;/p&gt;

&lt;p&gt;한가지 불편한 점이 있다면, 숙소에 Wifi가 되지 않는다. 여기가 과연 2019년의 대한민국인가 하는 생각이 든다. 요즘에는 동남아의 허름한 숙소에도 wifi는 되는데… 결국, LTE를 아껴 쓰는 수 밖에 방법이 없다. 그 외에는 특별히 불편한 것없이 아주 만족스럽다.&lt;/p&gt;

&lt;h1 id=&quot;애프터-글로우&quot;&gt;애프터 글로우&lt;/h1&gt;
&lt;p&gt;도착한 날부터 갑자기 급한 일을 처리하게 된 데다가 화요일부터 목요일까지 비가 와서 센터에 박혀 있었다. 생활에 채 적응하기도 전이라 숙소에 돌아오면 곯아떨어졌다. 간만에 날이 좋아져서 외출을 좀 할까 하다 마침 눈에 띄는게 있었다.&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/blog/assets/images/start-jeju-life/cafe01.jpg&quot; alt=&quot;!Cafe Pamphlet&quot; title=&quot;Cafe Pamphlet&quot; /&gt;&lt;/p&gt;

&lt;p&gt;제주에서 원격 근무를 하기 좋은 카페들을 소개하는 팜플렛이다. 펼쳐보면, 앞면은 위치와 이름을 한눈에 정리하였고, 뒷면은 주요 카페들 몇몇을 소개하였다.&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/blog/assets/images/start-jeju-life/cafe02.jpg&quot; alt=&quot;!Cafe Pamphlet&quot; title=&quot;Cafe Pamphlet&quot; /&gt;&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/blog/assets/images/start-jeju-life/cafe03.jpg&quot; alt=&quot;!Cafe Pamphlet&quot; title=&quot;Cafe Pamphlet&quot; /&gt;&lt;/p&gt;

&lt;p&gt;가까운 데를 찾아보니 &lt;a href=&quot;https://www.instagram.com/afterglow.coffee/?hl=ko&quot;&gt;애프터 글로우&lt;/a&gt;라는 카페가 있어서, 점심을 먹고 그곳에서 업무를 보았다.&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/blog/assets/images/start-jeju-life/cafe04.jpg&quot; alt=&quot;!afterflow&quot; title=&quot;afterglow&quot; /&gt;&lt;/p&gt;

&lt;p&gt;주차장이 있어서 편리하긴 한데, 나중에 차에 타려니 뜨끈하게 데워져있어서 곤혹스러웠다.&lt;/p&gt;

&lt;p&gt;분위기는 약간의 소음이 있기는 했는데, 집중을 방해하는 정도는 아니었다. 사람도 많지 않고, 정원이 있어서 일하다 고개를 들어보면 눈이 휴식하는 느낌이 든다.&lt;/p&gt;

&lt;p&gt;노트북 전원을 가져가지 않아서 오래있지는 않았지만, 다음에는 좀 더 오래 머무르고 싶다.&lt;/p&gt;</content><author><name>Bonyong Lee</name></author><category term="life" /><category term="jeju" /><category term="cafe" /><summary type="html">제주 한달 살이 무료한 생활에 변화를 주려고, 제주에서 한달간 살기로 했다. 회사가 제주에 지사를 가지고 있고, 직원들의 지원을 받아 돌아가면서 파견을 가는 근무 형태이다. 사실, 개발직은 장소나 시간에 크게 구애받지 않기 때문에 큰문제는 없다. 이번 주 월요일에 도착하였는데, 갑자기 급한 업무로 주말에야 글을 쓰게 되었다.</summary></entry></feed>