메가스터디 손주은 원장님의 공부나태해질 때 보는 영상

공부혁명, 이렇게 하라 메가스터티 대표이사 손주은

경제위기 때마다 코카콜라 회장 무타 켄트는

"우리는 위기를 낭비하지 않을 것이다.
(we will not waste our crisis)”

라는 말을 자주 한다.
나 역시 동의한다.
사람에게 투자하고 시스템을 정비하기에
위기만큼 좋은 기회가 없다.
- 조너선 밀든 홀 코카콜라 부사장

국가적인 위기상황입니다. 가슴이 먹먹합니다.
이럴 때 일수록 전 국민이 힘을 합쳐
위기를 돌파할 지혜를 발휘해야 하겠습니다.

위기를 낭비하지 않고 제도와 시스템을 정비하는 계기를
만들 수 있기를 희망합니다.

http://dschool.stanford.edu/

Radical Collaboration - 극단적 협력

디자인 싱킹의 5단계

디스쿨에서 만든 디자인 싱킹의 다섯 가지 단계가 있는데 위의 그림과 같다. 감정이입(Empathize), 정의(Define), 아이디어화(Ideate), 원형(Prototype) 제작, 그리고 테스트(Test)의 단계다.

첫 단계인 '감정이입'은 사람들을 유심히 관찰하고 인터뷰하면서 인사이트(insight)를 얻는 과정이다. 문제해결을 하겠다고 나선 것은 이 문제를 혼자 겪고 있지 않기 때문이다. 많은 사람이 같은 문제를 느끼고 있다고 생각하기 때문에 문제해결에 나서겠다는 것이고, 이를 위해서는 나 말고 다른 사람들은 어떤 문제를 느끼고 있는가를 알아야 한다.

기존의 인사이트를 얻는 과정은 정량적인 마케팅 툴을 사용하거나, 설문조사를 하거나, 포커스 그룹 인터뷰를 하는 방법을 사용했다. 하지만 디스쿨에서는 인사이트를 얻기 위해 대책 없이 사람을 관찰하고 생뚱맞게 인터뷰를 한다. 특히 사람들의 자연스러운 행동을 관찰한다. 이미 많은 정보를 가지고 관찰하면 문제를 제대로 파악할 수 없기 때문이다.

또 감정이입을 위한 인터뷰 방법도 알려주는데 '무엇을(What)?' '어떻게(How)? '왜(Why)?'를 물어보고 행동을 관찰하기 위해 허락된 몰래카메라(user camera)를 설치하기도 하며 마니아(Extreme User)를 인터뷰하라고도 한다.

예를 들어 샌프란시스코 현대미술관(SF MOMA)을 리노베이션해서 재개관하는 프로젝트가 있다고 하면 기전의 MOMA는 어떤 문제가 있었는지, 관객들이 그림을 관람하는 데 불편함은 없었는지, 다른 미술관과 비교해 차이는 무엇인지 알아야 하기 때문에 무작정 관찰하고 관람객들과 대화를 해서 기본 골격을 찾아가는 행동이다. SF MOMA와 협의해 카메라를 설치해서 관객들의 동선과 관람 습관을 파악하기도 하고 매일 오는 관람객이나 오랫동안 연간 회원으로 있는 관객을 찾아서 인터뷰를 하기도 한다. 이 과정에서 인터뷰이가 미술 전문가나 미술관 관계자의 입장이 돼서도 안 되고 현대 미술이나 미술관에 대한 사전 정보도 최대한 배제해야 한다. 그냥 어린이가 SF MOMA를 보고 있다고 생각하고 감정이입을 하는 것이다.

두 번째 단계인 '정의'는 팀원들의 감정이입 결과를 종합하고 범위를 특정하는 단계다. 팀원들이 감정이입 단계에서 모은 자료를 토대로 "과연 무엇이 문제인가?"를 정의 내리는 단계다. 여기서 중요한 것은 '당신의 관점(Your Point of View)'이다. 이것을 디스쿨에서는 POV(Point of View)라고 줄여 부를 정도로 중요하게 생각하고 있다.

문제를 정의하기 위해 팀원들끼리 포스트잇에 적어서 자신의 생각을 공유한다. 이를 '스토리 공유와 저장(Share and Capture)'이라고 부른다. 그리고 이 같은 생각을 몇 개로 모아서 그룹화할 수 있는데 이 과정을 '포화와 그룹(Saturate and Group)'이라고 한다.

이 과정을 통해 팀원 간 아이디어가 모이면 관점 유추(POV Analogy)를 한다. 관점 유추란 한마디로 문제를 해결하고자 하는 것을 다른 멋진 말로 만들어내는 것이다. 예를 들어 개인용 뮤직 플레이어를 만들겠다고 하면 '보석처럼 멋진 개인용 뮤직 플레이어를 만들자'는 것이다. 개인 뮤직 플레이어가 보석이 될 수 있고 그렇다고 하면 귀에다 붙여도 멋진 제품, 팔목에다 차도 멋지게 보이도록 만들자는 상상이 가능하다. 위에서 예시한 SF MOMA의 경우에는 '디즈니랜드처럼 재미있는 미술관을 만들겠다'고 할 수 있을 것이다.

세 번째 단계인 '아이디어화'는 문제점으로 파악된 것에 대한 해결 방법을 만드는 과정이며, 네 번째 문제 해결을 위한 '원형'을 만들고, 다섯 번째 시장에서 '테스트'하는 과정을 거친다. 원형 제품을 만들기 위한 디스쿨 내 작업실도 있다.

"디스쿨은 혁신을 가르치는 곳이 아니다. 혁신가를 만드는 곳이다"로 규정하고 있다. 여기서 만들어진 제품 중에는 최근 링크드인에 인수된 '펄스(Pulse News)'도 있다. 펄스는 2010년 5월 스탠퍼드 석사과정을 밟고 있던 인도계 아크샤 코타리와 안키드 굽타가 디스쿨에서 나온 아이디어를 실행에 옮겨 만든 앱이다. 수업 시간의 숙제를 프로젝트로 연결시킨 펄스는 운이 좋게도 아이패드 출시와 맞물려 스티브 잡스가 "꼭 있어야 하는 앱이다"라고 말하면서 유명세를 탔다. 수업 시간에 아온 아이디어가 훗날 9,000만 달러의 가치로 만들어진 것이다.

지금도 디스쿨에서는 제2, 제3의 펄스를 개발하기 위해 많은 학생들이 실험하며 새로운 아이디어를 내고 무엇인가를 만들어내고 있다.

CSS-Flip: A CSS BiDi flipper

Need to generate left-to-right or right-to-left CSS? CSS-flip does that for you, from your source. It supports a variety of properties, including borders, margins, padding, and more.

jquery ui에서 datepicker 사용할 때, input 뒤에 달력 이미지 넣는 부분

        jQuery("#sdt,#edt").datepicker({
            showMonthAfterYear:true,
            showOn:"button",
            buttonImage:"/common/tbl_st_ca.jpg",
            buttonImageOnly:true,
            dateFormat:'yy-mm-dd',
            nextText:'다음 달',
            prevText:'이전 달',
            dayNamesMin:['일','월','화','수','목','금','토'],
            monthNamesShort:['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월']
        });

사용법 : 아래는 사용법의 일례입니다. 생각보다 많은 옵션을 제공 하고 있습니다. document site 에서 꼭 확인하세요.

<!-- jquery-ui resource embed start -->

<link  href="resources/jqueryui/css/ui-lightness/jquery-ui-1.8.16.custom.css" rel="stylesheet">
<script src="resources/jqueryui/js/jquery-ui-1.8.16.custom.min.js"></script>

<!-- jquery-ui resource embed end -->
 

$(function() {
        $("#startDate").datepicker(   // inputbox 의 id 가 startDate 이겠죠.
                {dateFormat:'yy/mm/dd' // 만약 2011년 4월 29일 선택하면  inputbox 에 '2011/04/29' 로표시
                 , showOn: 'button' // 우측에 달력 icon 을 보인다.
                 , buttonImage: '/images/Icon_calendar.gif'  // 우측 달력 icon 의 이미지 패스 
                 , buttonImageOnly: true //  inputbox 뒤에 달력icon만 표시한다. ('...' 표시생략)
                 , changeMonth: true // 월선택 select box 표시 (기본은 false)
                 ,changeYear: true  // 년선택 selectbox 표시 (기본은 false)
                 ,showButtonPanel: true // 하단 today, done  버튼기능 추가 표시 (기본은 false)
               });

        $("#endDate").datepicker({dateFormat:'yy/mm/dd',showOn: 'button'
                , buttonImage: '/images/Icon_calendar.gif', buttonImageOnly: true
                , changeMonth: true,changeYear: true,showButtonPanel: true});

    });
    
    $('img.ui-datepicker-trigger').attr('align', 'absmiddle'); // css 문제가 있는경우 일부 위치 조절 :)

Twproject Gantt: JavaScript component for creating Gantts

Twproject Gantt is a JavaScript component for Gantts and other charts, like task trees, built on jQuery. It offers in-place editing, zooming, data shortcuts, CSS skinning, and much more.

jQuery로 간트 차트 만들기

jQueryGantt

jQuery Gantt editor has been written by Roberto Bicchierai and Silvia Chelazzi

These are some key features:

• jquery based
• MIT licensed: you can reuse everywhere
• json import-export
• internationalizable
• manage task status –> project workflow
• manage dependecies
• manage assignements (resources, roles efforts)
• server synchronization ready
• full undo-redo support
• cross browser (at least for recent versions)
• keyboard editing support
• SVG visual editor
• print friendly

Try the online working demo here: http://gantt.twproject.com

Read here about latest release: http://roberto.open-lab.com/2014/04/10/jquery-gantt-editor-svg-and-critical-path/

Read the genesis of this component here: http://roberto.open-lab.com/2012/06/14/the-javascript-gantt-odyssey/

Documentation is here: http://roberto.open-lab.com/2012/08/24/jquery-gantt-editor/

jQuery Gantt editor is part of Twproject 5 project