We are connected » Web http://blog.werconnected.info Season 3 Thu, 09 Feb 2012 13:10:58 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 센차 터치 2와 안드로이드 http://blog.werconnected.info/%ec%84%bc%ec%b0%a8-%ed%84%b0%ec%b9%98-2%ec%99%80-%ec%95%88%eb%93%9c%eb%a1%9c%ec%9d%b4%eb%93%9c/ http://blog.werconnected.info/%ec%84%bc%ec%b0%a8-%ed%84%b0%ec%b9%98-2%ec%99%80-%ec%95%88%eb%93%9c%eb%a1%9c%ec%9d%b4%eb%93%9c/#comments Thu, 09 Feb 2012 04:28:51 +0000 입명이 http://blog.werconnected.info/?p=2561 오랜만에 포스트를 남깁니다. 1년 되나요?

센차 터치가 국내에 상륙하고 스터디 모임도 만들어지고 조금씩 활기를 띄고 있는데요. 개발은 글쌔? 하시는 분들을 위한 짤막한 글입니다. 개발을 시작하기 전에서의 가장 큰 질문일지도 모릅니다. 결론부터 말씀드리면 예스! 입니다.

센차 터치(이하 센차) 1.x 는 안드로이드에서 많은 약점을 드러냈습니다. 특히 애니메이션은 최악이었습니다. 그러니 2 가 완전 왕의 귀환입니다. 안드로이드 기본 브라우저는 우선 애니메이션을 빼면 거의 iOS 와 속도는 거의 동일합니다. (안드로이드 폰의 종류가 많아 전체는 테스트 하지 못했습니다.) 그러나 이번에 모바일용 크롬 브라우저 베타가 나온 상황에서는 말이 달라집니다. 약간의 화면 최적화를 제외하면 iOS 의 사파리 브라우저의 속도보다 좋습니다. 제가 이미 테스트를 해 봤기 때문에 자신합니다. 테스트 환경은 센차 터치 베타 1 으로 제가 직접 MVC 개발을 하고 있는 어플을 돌렸었습니다. 또한 오늘 베타 2를 발표하면서 속도가 또 향상됐습니다. 체감적으로 느끼는 향상이 보였습니다. 안드로이드의 크롬이 정식으로 제공되는 시점에서는 기대할 수 있다는 겁니다. 이렇게 되면 센차 진영에서는 환상적인 한 해가 되는 겁니다.

릴리즈 노트에서 Known Issue 에 보면 아래와 같은 문구가 있습니다.

The Chrome Mobile beta was just released this week. We expect to have proper detection and implementation beginning with the next release.

이 문구에서 보면 이제는 개발을 모든 회사에서 한다고 해도 리스크는 곧 아무것도 아니게 된다는 겁니다. 짤막한 글이 도움이 되셨으면 합니다.

센차 터치에 관심 있으신 분은 제가 활동하는 페이스북 그룹에 질문하시면 성심 것 답변해 드리겠습니다.

관련 포스트:

]]> http://blog.werconnected.info/%ec%84%bc%ec%b0%a8-%ed%84%b0%ec%b9%98-2%ec%99%80-%ec%95%88%eb%93%9c%eb%a1%9c%ec%9d%b4%eb%93%9c/feed/ 0 메모리 관리 #1 – 패널의 해제 http://blog.werconnected.info/%eb%a9%94%eb%aa%a8%eb%a6%ac-%ea%b4%80%eb%a6%ac-1-%ed%8c%a8%eb%84%90%ec%9d%98-%ed%95%b4%ec%a0%9c/ http://blog.werconnected.info/%eb%a9%94%eb%aa%a8%eb%a6%ac-%ea%b4%80%eb%a6%ac-1-%ed%8c%a8%eb%84%90%ec%9d%98-%ed%95%b4%ec%a0%9c/#comments Tue, 19 Apr 2011 03:57:28 +0000 입명이 http://blog.werconnected.info/?p=2525

메모리의 관리 능력은 여러가지가 있습니다. 그 중에서 패널 관리를 알려드리겠습니다. 모바일 기기는 많이 발전했지만, 사실 아직 하드웨어는 데스크탑보다 떨어지는 것은 사실입니다. 그래서 메모리의 최적화가 필요합니다. 오늘은 패널의 메모리 해제의 과정을 보여드립니다.

사실 Sencha 개발팀의 내용을 잘 이해했는지 몰라도, 태그 엘리먼트의 생성은 메모리 문제와 직결된다고 합니다. 그래서 항상 필요하지 않은 경우 다시 해제하는 습관이 필요합니다. 방법은 간단합니다. 객체를 생성하면서 특정 이벤트가 실행되면 메모리는 해제되게 만드는 것이죠. 방법을 알아봅시다.

간단하죠? deactivate 이벤트는 대부분 패널을 이동하는 이벤트를 사용할 때, 실행됩니다. 따라서 다른 화면으로 전환을 할 경우에는 자동으로 해제하는 방법이 되는 겁니다.

관련 포스트:

  • 관련된 포스트가 없습니다.
]]> http://blog.werconnected.info/%eb%a9%94%eb%aa%a8%eb%a6%ac-%ea%b4%80%eb%a6%ac-1-%ed%8c%a8%eb%84%90%ec%9d%98-%ed%95%b4%ec%a0%9c/feed/ 0 로컬 저장소(Local Storage)를 이용한 내용 저장 http://blog.werconnected.info/%eb%a1%9c%ec%bb%ac-%ec%a0%80%ec%9e%a5%ec%86%8clocal-storage%eb%a5%bc-%ec%9d%b4%ec%9a%a9%ed%95%9c-%eb%82%b4%ec%9a%a9-%ec%a0%80%ec%9e%a5/ http://blog.werconnected.info/%eb%a1%9c%ec%bb%ac-%ec%a0%80%ec%9e%a5%ec%86%8clocal-storage%eb%a5%bc-%ec%9d%b4%ec%9a%a9%ed%95%9c-%eb%82%b4%ec%9a%a9-%ec%a0%80%ec%9e%a5/#comments Fri, 25 Mar 2011 16:29:46 +0000 입명이 http://blog.werconnected.info/?p=2494 스토어를 쓰시면 간단합니다. 먼저 regModel 을 만들어야겠죠? 그 후 Check 라는 모델을 스토어에서 사용합니다. 그리고 사파리의 디버그 화면에서 저장소를 보시면 쿠키말고 보라색 처럼 나온 부분이 새롭게 생깁니다.

나머지는 일반 스토어 사용과 거의 같습니다. var check = store.first() 를 사용하면 가장 처음에 생성된 값을 불러와서 check 변수에 저장합니다. 값은 Object 로 들어갑니다. 그리고 값이 없을 경우, if 구문에서 구현한 값을 넣으면 되는데, id 는 자동으로 수치가 1, 2, 3 … 으로 증가합니다. SQL 데이타베이스 같이요. 배열의 인덱스라고 생각하시면 됩니다. 삭제는 remove() 메서드로 간단히 됩니다.(store.remove(check)) 그리고 sync() 를 꼭 시키세요. store 는 getCount() 메서드로 갯수를 얻은 후 getAt() 으로 인덱스의 값을 가져오면 되겠죠?

초반에 약관을 불러오고 체크로 구분해서 다시 불러오느냐 아니면 확인 했으니 안보이게 하는게 가능하겠죠? 로컬 저장소는 한번 저장하면 삭제하지 않는 이상 유지되므로 신경쓰시지 않아도 됩니다. 다만, 브라우저 캐시를 지우면 아마 같이 날라갈겁니다.

관련 포스트:

]]> http://blog.werconnected.info/%eb%a1%9c%ec%bb%ac-%ec%a0%80%ec%9e%a5%ec%86%8clocal-storage%eb%a5%bc-%ec%9d%b4%ec%9a%a9%ed%95%9c-%eb%82%b4%ec%9a%a9-%ec%a0%80%ec%9e%a5/feed/ 0 JSON 목록을 통한 간단한 리더 만들기 http://blog.werconnected.info/json-%eb%aa%a9%eb%a1%9d%ec%9d%84-%ed%86%b5%ed%95%9c-%ea%b0%84%eb%8b%a8%ed%95%9c-%eb%a6%ac%eb%8d%94-%eb%a7%8c%eb%93%a4%ea%b8%b0/ http://blog.werconnected.info/json-%eb%aa%a9%eb%a1%9d%ec%9d%84-%ed%86%b5%ed%95%9c-%ea%b0%84%eb%8b%a8%ed%95%9c-%eb%a6%ac%eb%8d%94-%eb%a7%8c%eb%93%a4%ea%b8%b0/#comments Fri, 25 Mar 2011 16:18:11 +0000 입명이 http://blog.werconnected.info/?p=2488 PHP 가 필요합니다. 없이도 만들 수 있지만, ScriptTagProxy 즉, 다른 도메인의 값을 불러오는데 약간 손봐주는 방법보다 PHP 의 CURL 을 사용해도 간단하게 만들 수 있습니다. 우선 PHP 부분부터 살펴봅시다. 매킨토시를 사용해서 아파치, PHP 서버를 간단하게 만들 수 있습니다.

저는 resources/php/ 에 getFavorite.php 이란 파일을 만들고 다음과 같이 작성했습니다. Grooveshark 의 제 좋아하는 목록을 가져오겠습니다. 제 API 인데 그냥 쓰세요.

제가 PHP 는 좀 약하니 더 좋은 방법이 있으면 주저 말고 밑에 달아주세요. 이제 Sencha Touch(이하 센차) 의 스토어에 담는 작업을 해야합니다. Ext.List 를 생성하여, store 와 itemTpl 을 만들어줍니다.

툴바는 만드실 줄 아신다는 전제 하입니다. 그렇게 간단하게 만든 예제를 이 곳에서 보실 수 있습니다. CSS 부분을 약간 추가했는데, resources/css/style.css 에 있습니다.

관련 포스트:

]]> http://blog.werconnected.info/json-%eb%aa%a9%eb%a1%9d%ec%9d%84-%ed%86%b5%ed%95%9c-%ea%b0%84%eb%8b%a8%ed%95%9c-%eb%a6%ac%eb%8d%94-%eb%a7%8c%eb%93%a4%ea%b8%b0/feed/ 0 Store 를 읽을 때 딜레이가 있는 경우 http://blog.werconnected.info/store-%eb%a5%bc-%ec%9d%bd%ec%9d%84-%eb%95%8c-%eb%94%9c%eb%a0%88%ec%9d%b4%ea%b0%80-%ec%9e%88%eb%8a%94-%ea%b2%bd%ec%9a%b0/ http://blog.werconnected.info/store-%eb%a5%bc-%ec%9d%bd%ec%9d%84-%eb%95%8c-%eb%94%9c%eb%a0%88%ec%9d%b4%ea%b0%80-%ec%9e%88%eb%8a%94-%ea%b2%bd%ec%9a%b0/#comments Thu, 24 Mar 2011 10:44:42 +0000 입명이 http://blog.werconnected.info/?p=2480 대부분 스토어를 AJAX 나 ScriptTag 형식 등으로 호출하면 딜레이가 있습니다. 모든 비동기 호출이 그런 식이죠. 그래서 가끔은 setTimeout 같은 함수를 사용하곤 합니다. 약 1초 정도면 데이터가 로딩이 끝나거든요. 그러나 원래 호출하는 방법이 있습니다. 이벤트를 잘 활용하신다면 쉬운 문제입니다. 저도 처음엔 전자의 방식을 취했습니다.

위 load 이벤트를 쓰면 됩니다. this.onLoadStore 는 메서드의 이름입니다.

관련 포스트:

]]> http://blog.werconnected.info/store-%eb%a5%bc-%ec%9d%bd%ec%9d%84-%eb%95%8c-%eb%94%9c%eb%a0%88%ec%9d%b4%ea%b0%80-%ec%9e%88%eb%8a%94-%ea%b2%bd%ec%9a%b0/feed/ 0 CSS 클래스 이름으로 탭(클릭) 했을 때 메서드로 넘기기 http://blog.werconnected.info/css-%ed%81%b4%eb%9e%98%ec%8a%a4-%ec%9d%b4%eb%a6%84%ec%9c%bc%eb%a1%9c-%ed%83%ad%ed%81%b4%eb%a6%ad-%ed%96%88%ec%9d%84-%eb%95%8c-%eb%a9%94%ec%84%9c%eb%93%9c%eb%a1%9c-%eb%84%98%ea%b8%b0%ea%b8%b0/ http://blog.werconnected.info/css-%ed%81%b4%eb%9e%98%ec%8a%a4-%ec%9d%b4%eb%a6%84%ec%9c%bc%eb%a1%9c-%ed%83%ad%ed%81%b4%eb%a6%ad-%ed%96%88%ec%9d%84-%eb%95%8c-%eb%a9%94%ec%84%9c%eb%93%9c%eb%a1%9c-%eb%84%98%ea%b8%b0%ea%b8%b0/#comments Thu, 24 Mar 2011 10:26:09 +0000 입명이 http://blog.werconnected.info/?p=2458 this.el.on('tap', this.onTap, this, { delegate: 'div.ontap img' });

탭 이벤트 발생시의 처리입니다. div.ontap 아래에 img 태그를 선택시 onTap 메서드로 이동하라는 뜻입니다. 주의 할 점은 initComponent 함수에 넣으면 에러가 날겁니다. 이유는 initComponont 는 이 컴포넌트가 초기화를 하지만, 렌더링은 완료되지 않은 상태라 .ontap img 는 존재하지 않은 상태에서 사용할 수 없습니다. 렌더링 후 사용해야기 때문에 afterRender 이 후의 메서드에 사용가능합니다.

관련 포스트:

]]> http://blog.werconnected.info/css-%ed%81%b4%eb%9e%98%ec%8a%a4-%ec%9d%b4%eb%a6%84%ec%9c%bc%eb%a1%9c-%ed%83%ad%ed%81%b4%eb%a6%ad-%ed%96%88%ec%9d%84-%eb%95%8c-%eb%a9%94%ec%84%9c%eb%93%9c%eb%a1%9c-%eb%84%98%ea%b8%b0%ea%b8%b0/feed/ 0 Sencha Touch 를 이용한 웹 사이트가 쏟아진다. http://blog.werconnected.info/sencha-touch-%eb%a5%bc-%ec%9d%b4%ec%9a%a9%ed%95%9c-%ec%9b%b9-%ec%82%ac%ec%9d%b4%ed%8a%b8%ea%b0%80-%ec%8f%9f%ec%95%84%ec%a7%84%eb%8b%a4/ http://blog.werconnected.info/sencha-touch-%eb%a5%bc-%ec%9d%b4%ec%9a%a9%ed%95%9c-%ec%9b%b9-%ec%82%ac%ec%9d%b4%ed%8a%b8%ea%b0%80-%ec%8f%9f%ec%95%84%ec%a7%84%eb%8b%a4/#comments Sat, 05 Feb 2011 02:43:59 +0000 입명이 http://blog.werconnected.info/?p=2394 간단한 소개

요즘 Sencha Touch 를 접하고 매력에 빠져 직장에서 두세번의 개발을 해보고, 포럼을 만들었습니다. 오늘 피드를 보는데 소개를 엄청 하네요. 얼마전의 리뉴얼도 색달랐는데, 홍보에 박차를 가하나 봅니다. 잠깐 소개를 하자면, jQuery 는 개발을 빠르게 해주는 라이브러리라 한다면 이 것은 모바일 사이트의 개발을 예쁘게 구현해주게 합니다. 프레임워크이며 폰갭을 씌우면 앱으로도 가능합니다.

쇼핑몰과 CCM

쇼핑몰 사이트가 새로 나올까 했더니 나왔네요. 아이팟 터치나 아이폰으로 보세요. 아직 아이패드로는 안되네요. 예전에 이 쇼핑몰을 보면서 연습했다죠? 기본으로 소개하는 데모입니다. 기본 데모는 Infinite Ajax Carousel 로 멋진 UI 를 만들어냈것이 특징입니다. 많은 악세사리 류가 끝도 없이 Carousel 에 표현됩니다. 이번 쇼핑몰은 저도 구현할 수 있는 정도인 듯 합니다.

그리고 Echo Conference 에 대한 정보라는 모바일 웹도 있습니다. 사이트를 가보니 CCM 인거 같기도 하고 아무튼 장르는 음악이네요. 가보니 스케줄 리스트가 있고 한데, 알아보질 못하겠습니다.

이번에는 중고차 시장 웹도 있습니다. 중고가 아닌가? 아무튼, 사이트를 아이폰으로 방문하거나 사파리의 에이전트를 바꿔서 해보세요. 위 사이트들도 에이전트만 바꿔도 됩니다. 검색을 시작으로 기본적인 Sencha Touch 의 폼을 잘 활용했네요. 상당히 심플하면서 갖출건 다 있네요. 이런 모바일 웹을 보면 기존의 한국 모바일 웹은 전부 거품 같아 보입니다. 멜론의 모바일 웹을 보셨나요? 아이패드로 보세요. 보면 Sencha Touch 인데, 너무 느리고 모바일 웹까지 덕지덕지 쓸대어베는 UI 를 많이 쓰고 있습니다. 이런거 보면 외국 모바일 웹이 더 심플하고 빨라 보입니다.

Sencha Touch 의 간단한 장점

Sencha Touch 는 안드로이드까지 가능해서 아이폰용으로 끝내도 안드로이드에서 바로 볼 수 있는 장점도 있습니다. 장점이 많죠. 웹킷을 쓰기 때문에 HTML5, CSS3 를 지원합니다. 사파리나 크롬만 있어도 개발이 쉽습니다. 

new Ext.data.Store({
    model: 'User',
    proxy: {
        type: 'ajax',
        url : 'users.json',
        reader: 'json'
    },
    autoLoad: true
});

Sencha Touch 의 경우 HTML5 의 로컬 스토리지를 API 를 통해 간단히 사용가능합니다. Store 를 사용하는데 여러가지가 있고 모든 Store 는 그저 간단합니다. AJAX 통신도 간단하고 ScriptTag 를 이용해 다른 도메인도 AJAX 통신을 사용할 수 있습니다. 많습니다. DOM 도 만질 수 있으며, 폼의 UI 가 모바일에 맞게 자동 생성이 가능하고, 아이폰의 액션이트나 픽커뷰도 쉽게 생성이 가능합니다. 테마역시 변경이 가능합니다. SASS & Compass 를 사용해서 간단히 변경 가능합니다. 비디오를 봤더니 변경이 쉽더군요.

포럼 홍보

만약 개발시나 공부시 포럼에 질문하시면 아는 한도에서 대답해 드리겠습니다. 잠깐 포럼 홍보를 하자면 아직 만든지 별로 되지 않아 영문으로 되있거나 허접합니다. 계속 변경 중입니다. OpenID 나 구글 아이디로 접속이 가능합니다. 페이스북이나 트위터도 곧 가능합니다. 개발 사이트에 앱 등록하기 귀찮아서 나두고 있긴 합니다. 양해해 주세요. :D

ExtJS

아직 소개가 더 있습니다. 이 것은 ExtJS 로 만들어 졌지만, 같은 Sencha 입니다. ExtJS 와 같은 회사이며 이미 ExtJS 를 할 줄 아신다면 익히기 간단합니다. CodeSmith Insight 는 소프트웨어 헬프 데스크 입니다. 하나 가입해서 써봤는데, 써본 경험이 없어 삽질 중입니다.

마치며

사실 더 소개해 드리고 싶지만, 한손으로는 힘드네요. 이 것으로 게임 개발도 가능합니다. 물론 자바스크립트를 아주 잘 하신다면야… 앱은 제가 굳이 소개를 하지 않아도 사이트에 널려있습니다. 데모를 보셔도 되고 Sencha Touch 의 컨테스트를 보셔도 됩니다. 컨테스트가 페이지가 별도였는데, 데모 하단에 있네요. 리뉴얼 되니 많이 변경됐네요. 포럼에 오시면 답변 잘 해드리겠습니다. 그리고 이 중에 바닐라 포럼을 많이 써보신분이 계시면 댓글 부탁 드려요. :D

관련 포스트:

]]> http://blog.werconnected.info/sencha-touch-%eb%a5%bc-%ec%9d%b4%ec%9a%a9%ed%95%9c-%ec%9b%b9-%ec%82%ac%ec%9d%b4%ed%8a%b8%ea%b0%80-%ec%8f%9f%ec%95%84%ec%a7%84%eb%8b%a4/feed/ 11 Infinite Ajax Carousel http://blog.werconnected.info/infinite-ajax-carousel/ http://blog.werconnected.info/infinite-ajax-carousel/#comments Wed, 15 Dec 2010 03:15:56 +0000 입명이 http://blog.werconnected.info/?p=2240 http://www.sencha.com/blog/2010/08/10/infinite-ajax-carousel-shopstyle-demo-app/

Creating An Infinite Carousel

The infinite carousel (이하: 무한 회전 목마) 은 많은 아이템을 제어 할 수 있습니다. 이 것은 메모리에 저장된 객체를 통해 슬라이드 윈도우를 만들어냅니다. 현재 보여지는 카드, 바로 전 그리고 따라오는 카드 또한 만들어냅니다. 사용자의 스크롤을 통해, 아이템은 동시에 만들어지거나 소멸되고 필요에 따라 항상 최신의 윈도우를 보관합니다. 이 방법으로, 우리는 사실 얼마나 많은 아이템이 회전 목마에서에서 특정한 수에 관계없이 만들어졌는지 알 수 있습니다.

아래 다이어그램에는, 3개의 아이템을 가진 슬라이딩 윈도우가있습니다. 처음에 3번 아이템이 중앙에 위치하고 2번과 4번 아이템이 실제로 만들어져 있습니다. 사용자가 아이템 4번으로 변경할 때, 오른쪽으로 윈도우는 슬라이드 됩니다. 아이템 2는 지워지고 아이템 5가 생성됩니다.

회전 목마의 API 는 상당히 간단합니다. 아이템 설정 프로퍼티(items config property)를 사용하는 대신, createItem 설정 프로퍼티(createItem config property)를 허용합니다. 언제나 필요한 아이템은 생성되고, 인덱스와 함께 함수는 호출하게됩니다. 함수는 그 때 아이템을 반환하고 생성합니다. 같은 결과이지만, 2가지 방법을 선보이려합니다: 일반 화전목마와 우리가 말하는 무한 회전목마를 설명합니다.

슬라이딩 윈도우의 개념은 간단합니다. 초기에 로드되고 아이템이 변경되면, 창이 업데이트 됩니다. So the meat of the implementation is in the window update code. 중앙에 위치한 윈도우의 아이템의 인덱스는 호출됩니다. 풀 코드가 있습니다:

Custom Carousel Indicator

무한 회전목마의 위치 표시기(indicator)는 일반 회전 목마에서는 동작하지 않습니다. 일반 터치 스크롤바 보다 비슷한 위치 표시기 구성요소를 생성하여 해결합니다 . 일반 표시기를 사용한 템플릿이며, 꽤 간단한 코드입니다:

관련 포스트:

]]> http://blog.werconnected.info/infinite-ajax-carousel/feed/ 0 트위터와 팔로우에 관하여 말한다. http://blog.werconnected.info/%ed%8a%b8%ec%9c%84%ed%84%b0%ec%99%80-%ed%8c%94%eb%a1%9c%ec%9a%b0%ec%97%90-%ea%b4%80%ed%95%98%ec%97%ac-%eb%a7%90%ed%95%9c%eb%8b%a4/ http://blog.werconnected.info/%ed%8a%b8%ec%9c%84%ed%84%b0%ec%99%80-%ed%8c%94%eb%a1%9c%ec%9a%b0%ec%97%90-%ea%b4%80%ed%95%98%ec%97%ac-%eb%a7%90%ed%95%9c%eb%8b%a4/#comments Tue, 31 Aug 2010 07:11:23 +0000 입명이 http://blog.werconnected.info/?p=2142 문득 떠오르는 말이 있습니다.

‘상대방이 팔로우를 하면 나도 해야할까?’

사실… 저는 아니라고 생각합니다. 방금 전 까지만해도 이 점에 대해 아무 생각이 없었습니다. 팔로우는 상대방의 타임라인을 볼 수 있는 것이지 친추와는 조금 별개의 단어입니다. 모두들 알고 계시는 말이지만, 지나치시는 것 같습니다. 그래서 맞팔률 같은 말이나 계산기가 생기는 듯 합니다.

저도 역시 상대방이 팔로우 해주면 대부분 다시 팔로우를 합니다. 근데 그럴 필요는 굳이 없을 것 같습니다. 팔로우가 서로 되면 DM 이 보내질 뿐이지 싸이월드 같은 일촌이 많은 과시용 웹 서비스가 아니라고 생각합니다. 만약 그런 과시를 원할 경우 저는 트위터보다는 페이스북을 추천합니다. 외국인들은 페이스북을 많이 사용합니다. 거의 외국에 다녀온 친구들의 대답입니다.

우리는 트위터로 모임도 만들고 하지만, 트위터가 가벼운 마이크로 블로그에서 이제는 거대한 오프라인 모임까지 범위를 넓히니까요. 그럼 더욱 페이스북 모임이 더 어울릴 듯 합니다. 갑자기 페이스북 얘기가 나왔지만, 아무튼 팔로우는 꼭 대칭 관계가 아니어도 된다는 맞팔 강박관념을 가지신 분들께 드리는 말입니다.

관련 포스트:

]]> http://blog.werconnected.info/%ed%8a%b8%ec%9c%84%ed%84%b0%ec%99%80-%ed%8c%94%eb%a1%9c%ec%9a%b0%ec%97%90-%ea%b4%80%ed%95%98%ec%97%ac-%eb%a7%90%ed%95%9c%eb%8b%a4/feed/ 0 리퍼러 통계 보기 http://blog.werconnected.info/%eb%a6%ac%ed%8d%bc%eb%9f%ac-%ed%86%b5%ea%b3%84-%eb%b3%b4%ea%b8%b0/ http://blog.werconnected.info/%eb%a6%ac%ed%8d%bc%eb%9f%ac-%ed%86%b5%ea%b3%84-%eb%b3%b4%ea%b8%b0/#comments Fri, 16 Jul 2010 14:24:33 +0000 입명이 http://blog.werconnected.info/?p=2035 사실 블로그를 뒤집고 하면서 접속자가 아주 많이 줄었습니다. 어떻게 보면 이제 유니크한 방문자와 간간히 접속하는 분들이겠죠. 뭐, 재미없는 분야에 글이 몰려있으니 당연하기도하고 워낙 제가 글을 못 쓰는 것이기도 하고요. 그런데 블로그를 새롭게 오픈하며 맥 OS 사용자들이 많이 늘었다는 점입니다. 그 부분 때문에 전이 부럽지 않습니다. 지금 하루에 평균 150명에서 200명 사이인듯 합니다.

물론 아직도 윈도우 사용자들이 월등합니다. 그런데 기록을 보면 맥 비율은 윈도우 7과 비슷하고 XP 의 경우가 더 많습니다. 간접적으로 보급에 많이 실패했다고 느껴졌습니다. 제 리퍼러 부분만 보면 않되겠지만요.

MS 가 IE 6 를 공식으로 지원하지 않기로 했지만, 아직도 1위를 달리고 있네요. 반대로 국내 웹 사용자들이 웹 오브젝트를 제대로 활용 못하겠다 생각했습니다. 반면 모던 브라우저는 사파리가 1위였습니다. 저도 사파리를 씁니다. 5로 오면서 확장 때문에 너무 좋아진 듯 해요. 물론 플래시와 자주 충돌하긴 하지만, 신경쓰진 않습니다.

마지막으로 접속자의 언어권입니다. 한국이 월등하지만, 영어도 많네요. 6:1 정도 되네요. 재밌는 결과네요. :D

관련 포스트:

  • 관련된 포스트가 없습니다.
]]> http://blog.werconnected.info/%eb%a6%ac%ed%8d%bc%eb%9f%ac-%ed%86%b5%ea%b3%84-%eb%b3%b4%ea%b8%b0/feed/ 0 사파리 확장기능을 제출하세요. http://blog.werconnected.info/%ec%82%ac%ed%8c%8c%eb%a6%ac-%ed%99%95%ec%9e%a5%ea%b8%b0%eb%8a%a5%ec%9d%84-%ec%a0%9c%ec%b6%9c%ed%95%98%ec%84%b8%ec%9a%94/ http://blog.werconnected.info/%ec%82%ac%ed%8c%8c%eb%a6%ac-%ed%99%95%ec%9e%a5%ea%b8%b0%eb%8a%a5%ec%9d%84-%ec%a0%9c%ec%b6%9c%ed%95%98%ec%84%b8%ec%9a%94/#comments Wed, 14 Jul 2010 00:12:19 +0000 입명이 http://blog.werconnected.info/?p=2011

We’ll soon be launching the Safari Extensions Gallery, a new destination that provides you with an opportunity to increase the visibility of your Safari extension beyond your website.
The Safari Extensions Gallery will feature selected extensions that offer an innovative user experience. And a one-click installation process will allow users to seamlessly install extensions from a developer’s website without ever having to leave the Gallery.
Have your extension considered for the Safari Extensions Gallery. Submit your extension download URL and supporting metadata today.

우리는 곧 사파리 확장기능 갤러리를 시작하고, 사파리 확장기능 넘어 당신의 웹사이트의 가시성이 증가하는 기회를 새로운 곳에서 제공하게 됩니다.

사파리 확장기능은 사용자의 혁신적인 경험을 토대로 선택할 수 있습니다. 그리고 개발자 웹사이트의 갤러리를 떠나지 않고 한번 클릭으로 사용자 허락으로 원활하게 설치할 수 있습니다.

사파리 확장기능 갤러리를 생각해봤습니다. 메타데이터와 확장 다운로드 URL 을 오늘 제출하세요.

관련 포스트:

]]> http://blog.werconnected.info/%ec%82%ac%ed%8c%8c%eb%a6%ac-%ed%99%95%ec%9e%a5%ea%b8%b0%eb%8a%a5%ec%9d%84-%ec%a0%9c%ec%b6%9c%ed%95%98%ec%84%b8%ec%9a%94/feed/ 0 구글 크롬이 IE9 에 당하는 모습… http://blog.werconnected.info/%ea%b5%ac%ea%b8%80-%ed%81%ac%eb%a1%ac%ec%9d%b4-ie9-%ec%97%90-%eb%8b%b9%ed%95%98%eb%8a%94-%eb%aa%a8%ec%8a%b5/ http://blog.werconnected.info/%ea%b5%ac%ea%b8%80-%ed%81%ac%eb%a1%ac%ec%9d%b4-ie9-%ec%97%90-%eb%8b%b9%ed%95%98%eb%8a%94-%eb%aa%a8%ec%8a%b5/#comments Fri, 25 Jun 2010 06:15:04 +0000 입명이 http://blog.werconnected.info/?p=1841

HTML5 비디오 영상이며 IE9 가 비디오 가속을 사용하는 장면입니다. 하드웨어 가속이 얼마나 좋은지 보여줍니다. 마치 3D Mark 에서 하나는 전체 성능을 사용하는 것과 하나는 CPU 만 사용하는 모습을 보여주는 듯 합니다.

사실 비디오만 따지면 하드웨어 가속이 더 좋을 수 있으나, 페이지 렌더링이나 다른 요소는 아직 안해봤으니 모르겠죠. 그러나 기대할 수 있는 점은 IE 가 HTML5 를 무장하고 나온다는 점과 이제 속도로 모던 브라우저의 요소들 보다 뛰어날 수 있다는 점입니다. 그래서 기대가 되기도 합니다. 이번에는 릴리즈 되면서 맥용으로도 공식으로 나왔으면 하네요.

Video Shows Off IE9 Speed With Hardware Acceleration

관련 포스트:

]]> http://blog.werconnected.info/%ea%b5%ac%ea%b8%80-%ed%81%ac%eb%a1%ac%ec%9d%b4-ie9-%ec%97%90-%eb%8b%b9%ed%95%98%eb%8a%94-%eb%aa%a8%ec%8a%b5/feed/ 0 새로운 Digg 의 모습 http://blog.werconnected.info/%ec%83%88%eb%a1%9c%ec%9a%b4-digg-%ec%9d%98-%eb%aa%a8%ec%8a%b5/ http://blog.werconnected.info/%ec%83%88%eb%a1%9c%ec%9a%b4-digg-%ec%9d%98-%eb%aa%a8%ec%8a%b5/#comments Mon, 21 Jun 2010 07:15:04 +0000 입명이 http://blog.werconnected.info/?p=1795 지금 알파 테스트 중이라고 합니다. 사실 영어권이 아닌 국내에서는 다른 곳에 비해 사용도가 많이 떨어지는 곳입니다. 그런데 무분별한 메타가 국내에 증가하면서, 계속 괜찮은 모델이다라도 항상 생각해왔습니다.

사이트 디자인도 구조가 심플하니 필요한 색상만을 써서 항상 친근합니다. 백문이불어일견이죠. 한번 보세요.

http://mashable.com/2010/06/19/new-digg-screenshots/

관련 포스트:

]]> http://blog.werconnected.info/%ec%83%88%eb%a1%9c%ec%9a%b4-digg-%ec%9d%98-%eb%aa%a8%ec%8a%b5/feed/ 0 사파리5 확장 기능을 올릴 때 주의 사항 http://blog.werconnected.info/%ec%82%ac%ed%94%bc%eb%a6%ac5-%ed%99%95%ec%9e%a5-%ea%b8%b0%eb%8a%a5%ec%9d%84-%ec%98%ac%eb%a6%b4-%eb%95%8c-%ec%a3%bc%ec%9d%98-%ec%82%ac%ed%95%ad/ http://blog.werconnected.info/%ec%82%ac%ed%94%bc%eb%a6%ac5-%ed%99%95%ec%9e%a5-%ea%b8%b0%eb%8a%a5%ec%9d%84-%ec%98%ac%eb%a6%b4-%eb%95%8c-%ec%a3%bc%ec%9d%98-%ec%82%ac%ed%95%ad/#comments Tue, 15 Jun 2010 00:23:53 +0000 입명이 http://blog.werconnected.info/?p=1703 파일을 만들어 본인의 블로그나 전용 공간에 업로드 하실 때 파일이 다운로드 되지 않고 바이너리 링크로 타고 들어가는 경우가 있으시죠? 그 해결책입니다.

어떤분의 글에서 봤는데, HTML, CSS, JS 만 있으면 확장기능을 만들 수 있다고 했는데, 저도 만들어 볼까요? 음… 아이디어가 없군요. :’(

.htaccess 파일에 위의 내용을 넣어주세요. 블루호스트에는 c-panel 에 확장자 추가하는 곳이 있습니다. 위 그림이 그 위치입니다. 출처는 사파리5 확장 기능을 올리는 텀블러 블로그 주소 입니다.

http://safariextensions.tumblr.com/

If you’re hosting your own .safariextz file using Apache, make sure to add:

=====

AddType application/x-safari-extension safariextz

=====

to .htaccess in the hosting directory, or instead of downloading it as a binary file, users may get a page of gibberish when they click on a link to it.

관련 포스트:

]]> http://blog.werconnected.info/%ec%82%ac%ed%94%bc%eb%a6%ac5-%ed%99%95%ec%9e%a5-%ea%b8%b0%eb%8a%a5%ec%9d%84-%ec%98%ac%eb%a6%b4-%eb%95%8c-%ec%a3%bc%ec%9d%98-%ec%82%ac%ed%95%ad/feed/ 0 확장 기능이 추가된 사파리 5 http://blog.werconnected.info/%ed%99%95%ec%9e%a5-%ea%b8%b0%eb%8a%a5%ec%9d%b4-%ec%b6%94%ea%b0%80%eb%90%9c-%ec%82%ac%ed%8c%8c%eb%a6%ac-5/ http://blog.werconnected.info/%ed%99%95%ec%9e%a5-%ea%b8%b0%eb%8a%a5%ec%9d%b4-%ec%b6%94%ea%b0%80%eb%90%9c-%ec%82%ac%ed%8c%8c%eb%a6%ac-5/#comments Wed, 09 Jun 2010 06:01:01 +0000 입명이 http://blog.werconnected.info/?p=1627 다른 곳에서 들었습니다. 메뉴를 자세히 보지 않아 몰랐는데 파폭이나 크롬처럼 확장 기능이 있습니다. 숨겨져 있기 때문에 잘 알려지기 힘들듯 합니다. 방법은 터미널에서 개발자 메뉴를 우선 활성상태로 만들어야 합니다. 이미 되신 분들은 지나치세요.

Defaults write com.apple.Safari IncludeDebugMenu 1

다시 사파리를 실행하면 개발자(Develop) 메뉴가 생깁니다. 그리고 중간 위쯤에 확장 기능의 활성화 메뉴 목록이 있습니다.

그리고 난 후 확장 파일들을 등록하면 됩니다.

http://safariextensions.tumblr.com/

관련 포스트:

]]> http://blog.werconnected.info/%ed%99%95%ec%9e%a5-%ea%b8%b0%eb%8a%a5%ec%9d%b4-%ec%b6%94%ea%b0%80%eb%90%9c-%ec%82%ac%ed%8c%8c%eb%a6%ac-5/feed/ 0 말도 많고 탈도 있는 사파리 5 http://blog.werconnected.info/%eb%a7%90%eb%8f%84-%eb%a7%8e%ea%b3%a0-%ed%83%88%eb%8f%84-%ec%9e%88%eb%8a%94-%ec%82%ac%ed%8c%8c%eb%a6%ac-5/ http://blog.werconnected.info/%eb%a7%90%eb%8f%84-%eb%a7%8e%ea%b3%a0-%ed%83%88%eb%8f%84-%ec%9e%88%eb%8a%94-%ec%82%ac%ed%8c%8c%eb%a6%ac-5/#comments Tue, 08 Jun 2010 12:53:14 +0000 입명이 http://blog.werconnected.info/?p=1585 사파리 브라우저 5가 공개됐습니다. 겉 보기엔 변함이 없어 보이지만, 조금씩 세세한 부분을 손본 듯 합니다. HTML 5 지원에 초점이 있겠지만, 저는 몇가지 눈에 보이는 기능들이 맘에 드네요. 딱 2가지 입니다.

첫번째는 히스토리 검색입니다. 탑 부분에 새로 탭 메뉴가 생겼고 주소 표시줄에 “ㅎ” 이라는 단어만 검색해도 전에 썼던 내용 중 “ㅎ” 이 있던 글자 까지 검색 되네요.

또한 Instapaper 같은 글만 보는 기능입니다. 특히 뉴스 사이트에서 이 기능이 좋은데요. 광고를 싫어하시는 분이 계신다면 강추하는 기능입니다. 주소 표시줄의 Reader 버튼이 보이시죠? 말보다 다음 뉴스에서 한번 보시죠. :D

마지막으로 플래시 충돌이 잦고 버그나 좋지 않은 쪽으로 흘러가고 있다고 하지만, 저는 아직까지는 모르겠습니다. 참고로 아래 사이트를 방문해보세요. 올플래시입니다.

http://listen.grooveshark.com/

관련 포스트:

]]> http://blog.werconnected.info/%eb%a7%90%eb%8f%84-%eb%a7%8e%ea%b3%a0-%ed%83%88%eb%8f%84-%ec%9e%88%eb%8a%94-%ec%82%ac%ed%8c%8c%eb%a6%ac-5/feed/ 0 이젠 광고도 HTML5 http://blog.werconnected.info/%ec%9d%b4%ec%a0%a0-%ea%b4%91%eb%8f%84%eb%8f%84-html5/ http://blog.werconnected.info/%ec%9d%b4%ec%a0%a0-%ea%b4%91%eb%8f%84%eb%8f%84-html5/#comments Sat, 15 May 2010 16:16:08 +0000 입명이 http://blog.werconnected.info/?p=752 Brightcove 와 FreeWheel 이 파트너쉽으로 트랙킹을 위해 HTML5 비디오를 원한다고 합니다. 그냥 광고가 아니라 Canvas 를 사용할 듯 합니다. Brightcove 는 뉴옥 타임즈, 디스커버리 채널, A&E, 소니 픽쳐스의 비디오 플랫폼을 담당한다고 적혀있습니다.

제대로 해석한지는 모르지만 모바일 장치를 위한 광고인듯한데, FreeWheel 이 처음 들어봤지만, 꽤 큰 광고 매니지먼트 회사네요. 프리젠테이션도 회사도 HTML5 를 선택한듯 하고 여러 회사들이 비디오나 사진 같은 것을 HTML5 로 전환 중인데 이젠 광고 역시 힘을 실어주네요.

이렇게 되면 플래시가 어쩔 수 없이 큰 타격을 받을 수도 있겠네요. 애플에서 받아주려해도 만약 지금 추세면 그럴 필요없이 진행할 수 있겠네요. 이런 뉴스가 나올 때 마다 Adobe 와의 신경전이 재밌을 듯 합니다.

Brightcove and FreeWheel Team Up For HTML5 Ad Solution

관련 포스트:

]]> http://blog.werconnected.info/%ec%9d%b4%ec%a0%a0-%ea%b4%91%eb%8f%84%eb%8f%84-html5/feed/ 2 HTML5 는 국외 웹의 미래 http://blog.werconnected.info/html5-%eb%8a%94-%ea%b5%ad%ec%99%b8-%ec%9b%b9%ec%9d%98-%eb%af%b8%eb%9e%98/ http://blog.werconnected.info/html5-%eb%8a%94-%ea%b5%ad%ec%99%b8-%ec%9b%b9%ec%9d%98-%eb%af%b8%eb%9e%98/#comments Sat, 08 May 2010 16:26:36 +0000 입명이 http://blog.werconnected.info/?p=1480 뭐 다 아시는 내용이니 이유는 적지 않습니다. 웹의 판도를 보면 HTML5, CSS3 같은 기술이 많이 쏟아집니다. 그리고 갖가지 트윅과 응용법이 이미 외국 블로그에는 많이 소개되고 있습니다.

웹에는 솔직히 국경이 없습니다. 그런데 웹을 돌다가도 내가 살고 있는 곳이 한국이라 생각하니 힘이 저절로 빠집니다. 외국은 이미 5년 후의 미래를 다루고 있지만, 우리는 그저 5년 전을 뒤쫒고 있습니다.

참으로 아이러니한 나라죠. 국경도 없는 웹이 국내에선 후진국의 웹이 됐습니다. 게다가 IT 최강국이란 말은 제발 언론에서 이제 빠졌으면 합니다. 왠만한 블로고스피어에서는 벌써 말도 안되는 말이라 합니다.

상상을 해보세요. 차세대 AJAX 기술인 Web Socket 이 등장하고 웹의 OpenGL 이 진화하며 HTML5 의 캔버스와 CSS 트랜스폼 같은 여러 기술이 복합된 어느 웹 사이트를요. 그런데… 그런 기술을 신기술이라 들여놨다며 플래시로 비슷하게 꾸며논 국내의 웹들을… 근데 모던 브라우저에서도 버벅거리는 최적화가 않된 사이트를…

사실 국내 사이트는 전용선의 빠른 확장에 의해 피해를 많이 봤다고 생각합니다. 아무리 최적화를 하지 않아도 빠른 라인이 뒷 받침 해주니까요. 그런데 외국에 거주하시는 한국인이 접할려면 참담했죠. 외국은 느려도 캐시 같은 최적화 기술이 발전되는 반면 국내는 호화 찬란한 패킷 낭비만 진화했습니다. 이제 젊은 IT 인들이 좀 신경써서 만들려고 하면 또 외국에는 새로운 기술들이 생기고…

그렇게 외국은 5년 앞의 미래를 보지만, 국내는 5년 전의 꽁무니만 반복되고… 참… 한탄 스러워서 글을 남깁니다.

관련 포스트:

]]> http://blog.werconnected.info/html5-%eb%8a%94-%ea%b5%ad%ec%99%b8-%ec%9b%b9%ec%9d%98-%eb%af%b8%eb%9e%98/feed/ 0 CSS3 의 3D 에니메이션을 사용한 마우스 오버 효과 http://blog.werconnected.info/css3-%ec%9d%98-3d-%ec%97%90%eb%8b%88%eb%a9%94%ec%9d%b4%ec%85%98%ec%9d%84-%ec%82%ac%ec%9a%a9%ed%95%9c-%eb%a7%88%ec%9a%b0%ec%8a%a4-%ec%98%a4%eb%b2%84/ http://blog.werconnected.info/css3-%ec%9d%98-3d-%ec%97%90%eb%8b%88%eb%a9%94%ec%9d%b4%ec%85%98%ec%9d%84-%ec%82%ac%ec%9a%a9%ed%95%9c-%eb%a7%88%ec%9a%b0%ec%8a%a4-%ec%98%a4%eb%b2%84/#comments Tue, 27 Apr 2010 09:39:42 +0000 입명이 http://blog.werconnected.info/?p=1474 참 재밌는 웹 세상입니다. 이제 웹 디자인에서 CSS3 사용은 마치 자바스크립트를 사용하는 듯한 멋있는 결과가 만들어집니다. 이것을 보세요.

이젠 네비게이션 메뉴도 진화할 수 있는 여건이 만들어졌습니다. 마우스 오버를 활용하여 3D 로 응용하면 웹이 보다 화려해지겠네요. 물론 남용은 금물이겠지만…

3d animation using pure CSS3

출처입니다. 데모와 소스도 제공됩니다. 사파리를 쓰고 있는데 참, 쾌적하고 좋네요. :D

관련 포스트:

]]> http://blog.werconnected.info/css3-%ec%9d%98-3d-%ec%97%90%eb%8b%88%eb%a9%94%ec%9d%b4%ec%85%98%ec%9d%84-%ec%82%ac%ec%9a%a9%ed%95%9c-%eb%a7%88%ec%9a%b0%ec%8a%a4-%ec%98%a4%eb%b2%84/feed/ 0 톰캣(JSP) 컨테이너를 맥에 설치하자. http://blog.werconnected.info/%ed%86%b0%ec%ba%a3jsp-%ec%bb%a8%ed%85%8c%ec%9d%b4%eb%84%88%eb%a5%bc-%eb%a7%a5%ec%97%90-%ec%84%a4%ec%b9%98%ed%95%98%ec%9e%90/ http://blog.werconnected.info/%ed%86%b0%ec%ba%a3jsp-%ec%bb%a8%ed%85%8c%ec%9d%b4%eb%84%88%eb%a5%bc-%eb%a7%a5%ec%97%90-%ec%84%a4%ec%b9%98%ed%95%98%ec%9e%90/#comments Sun, 25 Apr 2010 05:24:18 +0000 입명이 http://blog.werconnected.info/?p=1224 sudo sh Password: #:~> mv ~/Downloads/apache-tomcat-6.0.26 /usr/local/ #:~> cd /usr/local/ #> tar -xzvf apache-tomcat-6.0.26 보통 [...]]]> 이 글을 시작하기 전에 알아둘 것이 있습니다. 바로 너무 쉽다는 점이에요. 쉘이라고 얼지 마세요! 윈도우에도 했지만, 이건 거의 속성에 속성입니다. 참고 페이지를 확인하세요..

http://developer.apple.com/internet/java/tomcat1.html

첫번째는 다운로드 해야겠죠? 바이너리 항목의 tar.gz 파일을 받으세요. 사파리 브라우저는 보통 자동으로 gz 이 풀립니다.

$:~> sudo sh
Password:
#:~> mv ~/Downloads/apache-tomcat-6.0.26 /usr/local/
#:~> cd /usr/local/
#> tar -xzvf apache-tomcat-6.0.26

보통 /usr/local 에 설치하죠? 진행 방식을 미리 해보니 다른 임의의 곳에 풀어도 지장이 없겠다 싶습니다. 시스템 설정도 건들이지 않고 그냥 standalone 라고 말해야 하나요? tar 로 압축을 풀지만, gz 을 아직 풀지 않았다면 gnutar 라고 명령하세요.

80% 완료입니다. 이제 실행만 하면 완료입니다. 원래 환경변수를 등록해야 겠지만, 첫째 우선 맥은 자바가 기본으로 설치가 됩니다. 둘째는 없습니다. 8)

#vi start_tomcat
export CATALINA_HOME=/usr/local/apache-tomcat-6.0.26
export JAVA_HOME=/usr
$CATALINA_HOME/bin/startup.sh

환경 변수를 실행하며 쓰기 때문에 문제 없습니다. 사실 환경변수는 경로 설정일 뿐입니다. 이와 같이 서버를 정지하는 실행 파일도 만들어 줍니다.

#vi stop_tomcat
export CATALINA_HOME=/usr/local/apache-tomcat-6.0.26
export JAVA_HOME=/usr
$CATALINA_HOME/bin/shutdown.sh

vi 를 사용하지 않아도 되고 만드는 곳도 임의로 선택해도 됩니다. 위와 같이 할 경우 wq 로 저장하고 끄는 법은 아시죠? 이제 실행 할 수 있게 권한을 줍니다.

#> chmod ug+x start_tomcat stop_tomcat

이제 ./start_tomcat 으로 실행하면 반가운 실행화면이 나옵니다. 삭제요? 반대로 했던 작업들만 지우면 끝이 납니다.

기본 포트는 8080 입니다. 설정법이나 경로는 모두 같습니다. 만약 이 방법을 쓸 경우 usr 디렉토리가 숨김 속성이어서 불편하실 겁니다. 그래서 링크를 만들어 사용하면 편합니다.

sudo ln -s /usr/local/apache-tomcat-6.0.26/webapps ~/Desktop

관련 포스트:

]]> http://blog.werconnected.info/%ed%86%b0%ec%ba%a3jsp-%ec%bb%a8%ed%85%8c%ec%9d%b4%eb%84%88%eb%a5%bc-%eb%a7%a5%ec%97%90-%ec%84%a4%ec%b9%98%ed%95%98%ec%9e%90/feed/ 1