[Info]Tags categorized posts and contents patterns..

[AJAX] Ajax Code E xamples.. [Book] About the book.. [CSS] CSS Code E xamples.. [DB] Sql Code E xamples.. [DEV] All development stor...

2016년 10월 18일 화요일

[Book] 린 스타트업..

출처 : Outsider's Dev Story https://blog.outsider.ne.kr/

린 스타트업 - 8점
에릭 리스 지음, 이창수.송우일 옮김/인사이트

이 책은 린 스타트업 운동을 만든 에릭 리스(Eric Ries)가 린스타트업에 대해서 설명한 책이다. 린 스타트업은 도요타의 린 방법론에 착안(아마도?)해서 스타트업에 적용한 방법론이도 에릭 리스가 3D 아바타 채팅 서비스를 만드는 IMVU라는 스타트업에서 일하면서 배우고 알아낸 것을 시작으로 린스타트업을 본격적으로 연구하게 되고 이 책은 그 결과인 린 스타트업에 대해서 정리한 책이다.

요즘의 추세대로 린 스타트업도 애자일과 비슷한 면이 있다. 애자일이 개발부분에 포커싱이 되어 있다면 린 스타트업은 이러한 부분이 스타트업이라는 사업 분야까지 확장되어 있기 때문에 평소에 이러한 부분이나 애자일에 관심이 있다면 완전히 새로운 개념을 얘기해 주거나 하진 않겠지만 에릭 리스의 경험과 연구를 하면서 다른 회사들로부터 얻어낸 사례등을 통해서 꽤 정리가 잘 되어 있고 사업적으로 생각할 수 있는 많은 관점을 제공해 주고 있다고 생각한다. 여러 모로 인상깊은 부분이 많이 있었다.

에릭 리스는 린 스타트업을 지속적인 혁신을 만드는 새로운 방법으로 정의하고 있고 여기서 말하는 스타트업을 우리가 일반적으로 얘기하는 소규모로 새로 시작해서 도전한 회사들만을 얘기하는 것이 아니라 극심한 불확실성 속에서 새로운 제품과 서비스를 만드는 조직을 모두 스타트업으로 정의하고 있기 때문에 대기업이라고 하더라도 비슷한 도전을 하고 있는 조직은 린 스타트업을 적용할 수 있다고 얘기하고 있다. 그래서 린 스타트업은 창업가는 어디에다 존재할 수 있고, 스타트업은 제품만으로 성공할 수 없으므로 창업가의 정신은 관리이고 유효한 학습을 계속 할 수 있어야 하며 만들고 측정하고 배우는 과정을 최대할 빨리 반복하면서 혁신 회계에 집중해야 한다.

그리고 에릭 리스는 기존의 스타트업들이 실패하는 이유를 시장조사나 정교한 전력/기획등에 현혹되서 이를 성공의 지표로 여겼고 기존 경영방식의 실패를 보면서 "일단 해보자"라는 방식에 길들여졌기 때문이라고 보고 있다. 스타트업을 만든다는 것은 조직을 만드는 것인데 기존의 관리 기법이 창의성을 죽여버릴까봐 걱정하는 경우가 많은데 오히려 "일단 해보자"라는 방식이 조직을 혼란스럽게 만드는 경우가 많다는 것이다.

린 스타트업은 책 내내 "만들기-측정-학습"의 과정을 강조하고 있는데 여기서 중요한 것은 유효한 학습이어야 한다는 것이다. 그래서 어떻게 측정하고 상황에 따라 어떤 측정 경과를 보고 어떤 부분은 조심해야 하는지를 설명하고 실패해도 학습했으니 괜찮다는 변명을 주의하라고 하고 있다. 즉, 결과가 나온 후에 끼워 맞추거나 실패를 감추는 것이 아니라 극심한 불확실성 속에서 성과를 측정하기 위한 까다로운 방법론이라는 것이다. 그래서 어떤 부분이 가치를 창출하는 부분이고 어떤 부분이 낭비인지를 찾는 것이 중요하고 "얼마나 많이 만들었느냐"가 아니라 "얼마나 제대로 된 학습을 했느냐"를 가지고 생산성을 측정해야 한다는 것이다. 회사를 바쁘게 움직이게 하는 것이 목적이 아니라 정말 필요한 일에만 하게 하는 것에 집중하게 해야 한다는 말은 특히 많이 와닿았다. 그러면서 예를 든 것이 어떤 기능을 몇개월에 걸쳐서 개발해서 공개했더니 소비자들이 원하지 않는 기능이었다는 것이었다.(실제로 바쁘고 열심히 했지만 그것 자체가 의미 없었다는 얘기다.) 그래서 린 스타트업에서는 "만들기-측정-학습"의 과정을 빠르게 반복하는 것을 강조하고 있고 MVP(minimal viable product)가 그 핵심 중 하나이다.

그리고 스타트업은 "이 제품을 만들수 있을까?"하는 것이 주요 질문이 되기 보다는 "이 제품이 과연 만들 가치가 있는가?", " 이 제품과 서비스를 기반으로 우리가 지속가능한 사업을 만들 수 있는가?"가 되어야 한다.(여기에는 무척 공감한다. 이 질문이 선행되어야 어떻게 만들지.. 혹은 그 방법이 안되었을 때 다른 방법으로 해결할 수 있을지를 고민할 수 있다.) 그래서 가설을 실제 과학적으로 테스트하면서 실험을 하고 이 실험으 목표를 비전을 바탕으로 지속가능한 사업을 구축하는 방법을 찾는데 있다. 책에서 모든 스타트업이 정기적으로 "방향을 전환할 지 아니면 고수할지"에 대한 회의를 진행하는 것을 권장하고 있다. 에릭 리스의 경험에 따르면 수주이내면 너무 잦고 수개월 이상은 너무 뜸하다고 하는데 이런 회의를 정기적으로 하는 것은 참 좋은것 같다.

린 스타트업의 목적은 제품을 더 효율적으로 만드는 것이라기 보다는 "지속 가능한 살업을 만드는 방법"을 최대한 빨리 배우는 것이다. 대기업이라면 내부 혁신팀이 자리를 잡아가면서 실험을 지속해 나갈수 있는 플랫폼을 만들어야 하는데 이런 것들은 모두 최고 경영진의 책임이다. 린 스타트업에 대한 실천적인 방법도 여러가지로 제시하고 있는데 인상적인 것은 큰 일괄 작업 크기를 줄이라는 것이다. 여기서 큰 일괄작업 크기라는 것은 제품의 완성형이 나오기까지 돌아가는 프로세스를 얘기하고 이 부분이 클수록 중간에 잘못되었음을 깨달았을 때 작업 크기가 너무 커서 오히려 비효율적이 된다는 것이다. 이 부분은 오히려 시스템의 문제인데 이를 줄이기 위해서 더욱 더 큰 작업 크기를 요구하는 악순환이 된다는 것이다. 그리고 다섯번 '왜'라고 묻는 과정을 권장하고 있다. 이는 도요타에서 사용한 방법인데 어떤 문제가 발생했을 때 그 문제가 왜 발생한 것인지 다섯번 물어봄으로써 그 문제를 막기 위한 근본적인 해결책을 찾는 과정인데 참 괜찮아 보인다.
책에서 많은 이론적인 설명과 함께 실천적인 얘기도 하고 있어서 유용하지만 당연히 다루는 문제 자체가 쉽지 않으므로 이 책대로 한다고 성공한다거나 그러진 않을 것이다. 각 회사나 조직마다 자신만에 맞는 방법을 찾아가는 과정이 필요하겠지만 이 책이 얘기하는 부분은 여러가지로 곰곰히 생각해 볼만 하다고 생각하고 조직을 이끄는 사람이라면 읽어보라고 권하고 싶을 정도다. 마지막으로 이 책에서 에릭 리스는 "린 스타트업은 틀이지 따라야 할 청사진이 아니다"라고 얘기하고 있다.

몇가지 책에서 인상적이었던 부분을 얘기하자면...
몇년 전 큰 미디어 회사에 제품을 판매하는 어떤 스타트업이 자기네 엔지니어들이 별로 열심히 일하지 않는 것 같다고 자문을 요청한 적이 있다. 하지만 문제는 엔지니어링 팀에 있지 않았다. 문제는 의사 결정을 하는 회사의 프로세스에 있었다. 고객은 있었지만 고객을 잘 이해하지 못하고 있었다.
실수가 생기면 그 실수를 저지르기 쉽게 만든 우리가 부끄러운 일이다.
1. 첫실수에는 전부 관대하라.
2. 가능한한 실수를 두번 하게 하지 말라.
"전혀 해서는 안 될 일을 매우 효율적으로 하는 것만큼 무용한 짓은 확실히 없다." - 피터 드러커

My Comment..
흠.. 이런 것도 있었구나.. 햄이 올려둔 지식들을 보다보면, 신기한게 많다.. 이 책도 그런 부분중에 하나다.. 참 많은 것을 알게 해주는 햄이다.. 대단하심.. ㅎㅎㅎ..

[DEV] 모바일 사파리에서 스크롤 구현과 관련된 문제..

출처 : Outsider's Dev Story https://blog.outsider.ne.kr/

HTML5가 나오고 나서 웹에도 엄청난 변화가 일어났지만 초반에 열심히 쫓아가다가 너무 많이 쏟아져 나와서 한참동안은 너무 깊게 파지는 않고 있었고 모바일은 딱히 만질일도 없었기 때문에 기본적인 수준 이상으로는 크게 관심을 두지 않았었다. 지금은 프론트앤드쪽 작업을 하고 있으므로 모바일도 좀 알아야 되겠다 싶어서 모바일웹쪽을 만져보고 있는 중이다. 개인 프로젝트에서 모바일 웹을 작업하고 있는데 스크롤을 구현하는게 상당히 골치가 아팠다. 스크롤은 어디나 들어가는 아주 일반적인 기능이라고 생각하고 있었음에도 구현하는데 여러가지 어려움이 상당히 많았다.

모바일에서 스크롤 관련 라이브러리로 가장 유명한 것은 iScroll이다. 현재는 4버전이 최신 버전이고 iScroll 5가 베타상태에 있다. 처음에는 iScroll로 작업을 했는데 처음 사용해봐서 제대로 구현못한 건지 모르겠지만 아주 깔끔하게 안되는 부분이 좀 있었고 안드로이드 기기로 넘어가니 퍼포먼스가 너무 안나왔다. 그래서 OS 탑재된 네이티브 스크롤을 직접 이용하기로 하고 iScroll을 제거하고 직접 구현하고 있는데 그 가운데 스크롤에 관련된 내용을 좀 정리해야 좀더 다양한 기능 구현 및 최적화를 할 수 있을것 같아서 정리를 한다.(이미 다 아는 내용인데 나만 이제 확인한 것 같긴 하지만)
일단 내가 가진게 iOS라서 iOS에 맞추어서 작업을 하고 있다. 안드로이드에서도 동작하리라고 생각하지만 많은 테스트를 해보진 않았다. 예제는 Angular.js를 사용했는데 이벤트나 좌표를 추적해서 보여주기 위한 것이므로 스크롤과는 상관이 없다. 그리고 스크롤을 설명하는 예시일 뿐이므로 퍼포먼스가 많이 고려되어 있지는 않다.(누가 잘아시는 분이 설명을 해주시면 감사.)

스크롤

스크롤 영역으로 지정하는 것은 딱히 모바일 웹에 특화된 것은 아니다. 스크롤을 사용할 곳의 크기를 지정하고 CSS 속성에서 overflow: auto;로 지정하면 된다. 이러면 해당 영역보다 작을때는 상관없지만 해당 영역보다 내용이 많아지면 자동으로 스크롤이 동작하게 된다. 가로나 세로만 하고 싶다면 overflow-x: auto;, overflow-y: auto; 같은 식으로 작성하면 된다. 다음 예제를 보자.(스크롤은 스샷을 찍어서 설명하기가 어렵고 또 동영상을 찍기고 쉽지 않아서 실행해 볼 수 있는 예제를 만들었다. 이벤트가 다르므로 데스크탑에서는 제대로 동작하지 않을 수 있으므로 모바일장비에서 테스트해봐야 한다.)

실행가능한 예제 링크

각 동작을 한눈에 볼 수 있도록 예제를 구성했다.(폭이 좁아서 블로그내에서는 예제를 실행해보기 어려우므로 모바일에서 띄워보는게 확인하기 좋다.) 상단에는 좌표관련 정보를 표시하고 좌측에는 예제의 스크롤 영역이 있다. 우측에는 스크롤 동작과 관련한 이벤트가 출력되도록 했다. 모바일에서는 마우스가 없으므로 터치이벤트를 통해서 스크롤이 동작하게 되는데 터치할 때 touchstart이벤트가 발생하고 움직이면 touchmove가 발생하고 손가락을 뗄 때 touch가 발생한다. 움직이지 않고 바로 떼면 touchmove가 발생하지 않고 바로 touchend가 발생한다. 여기서는 스크롤 영역에 대한 테스트이므로 touchmove를 통해서 스크롤이 될 때 scroll이벤트도 함께 발생한다.

좌표와 관련해서는 스크롤 영역에는 scrollTop이라는 속성이 존재한다. 가장 최상위에 있을 때는 scrollTop이 0이고 스크롤을 내릴 수록 값이 커지게 된다. 각 이벤트에 대한 좌표를 알 수 있도록 touchstart, touchmove, touchend 의 좌표를 따로 표시하도록 했다. 예제소스는 jsFiddle에서 볼 수 있으므로 따로 전체소스를 담지는 않겠다.

모멘텀(momentum) 스크롤

앞에서 본게 기본 스크롤 영역이지만 이 스크롤을 실제로는 사용할 수 없다. 모바일에서 스크롤을 할 경우에는 가속도가 먹어서 손가락을 튕기면 스크롤이 빠르게 이동하는 스크롤을 사용하고 사용자에게도 이게 당연한 동작이다. 이를 모멘텀 스크롤이라고 부르는데 앞에서 본 예제는 손가락을 떼는 순간 스크롤이 멈추기 때문에 사용하기가 아주 불편하다.
iOS 즉 모바일 사파리(웹뷰 포함)에서 모멘텀 스크롤을 사용하려면 스크롤 영역에 -webkit-overflow-scrolling: touch; CSS 속성을 지정한다. 이 스타일만 지정하면 스크롤이 자연스러운 모멘텀 스크롤로 동작하게 된다.

실행가능한 예제 링크

이제 스크롤이 아주 자연스러워 진 것을 볼 수 있다. 하지만 
모멘텀 스크롤에는 몇가지 문제가 좀 있다.(이는 iOS의 버그수준이라고 생각하는데 어쨌든 문제가 있다.)
모멘텀 스크롤 중에는 scrollTop이 업데이트되지 않는다. 모멘텀 스크롤을 손가락으로 스크롤 영역을 튕겨서 동작하므로 즉 touchend이벤트가 발생한 이후에도 스크롤이 계속 이동하게 되는데 tocuchend이벤트까지는 scrollTop이 갱신되지지만 touchend이벤트가 발생한 이후에 모멘텀 스크롤가 동작하는 동안에는 scrollTop이 변하지 않고 모멘텀 스크롤이 시간이 지나서 자동으로 멈춘 순간 scroll이벤트가 발생하면서 scrollTop이 갱신된다. 그래서 현재 스크롤이 어느 위치에 있는지 찾을 수가 없고 심지어 모멘텀 스크롤이 동작하고 있다는 것 조차 알 수가 없다.(나중에 scroll이벤트가 발생하므로 모멘텀 스크롤이 동작했었구나 정도만 알 수 있다.)

모멘텀 스크롤에서 선택영역 사용하기

모멘텀 스크롤에서 선택영역을 함께 사용하지 않는다면 큰 문제는 없다. 아주 자연스럽게 스크롤을 할 수 있지만 나는 다음과 같이 하고 싶었고 어플리케이션에 따라 다르겠지만 당연한 동작이라고 생각했다.
  • 스크롤을 자연스럽게 사용할 수 있어야 한다.(이건 당연히...)
  • 리스트를 터치하면 선택했음을 알 수 있도록 색상을 변환한다.
  • 터치한 상태에서 스크롤을 하기 시작하면 선택하고자 한 것이 아니므로 선택은 취소되고 스크롤이 동작한다.
  • 스크롤도중에 클릭한 것은 선택하기 위한 것이 아니라 스크롤을 멈추고자 하는 것이므로 선택이 되지 않는다.
  • 리스트를 선택한 후에 손가락을 떼면 선택으로 동작한다.
scrollTop이 업데이트되지 않으므로 모멘텀 스크롤중의 터치도 잘못된 좌표가 인식된다. 말로 설명하려니 어려운데 스크롤 영역에 li같은 태그에 클릭 효과가 나도록 :active로 스타일을 주었을 경우 모멘텀 스크롤 중에(멈춘뒤 말고) 클릭을 해서 멈춘다면 현재 클릭한 부분이 선택영역으로 잡히지 않고 모멘텀 스크롤을 시작하기 전에 해당 위치에 있던 엘리먼트가 선택된 것으로 표시가 된다. :active 스타일이 다른 위치에 가서 먹고 실제 이벤트도 여기서 발생한다. 이는 다음 예제에서 확인해 볼 수 있다.

실행가능한 예제 링크

그래서 맨 앞에 얘기한 조건대로 클릭할 경우 리스트의 스타일을 변경해 주기 위해서 :active상태를 쓸 수 없다고 생각했다. 내가 생각한 방법은 선택에 대한 CSS 클래스를 주어서 터치이벤트에 따라 조건에 따라 클래스를 넣었다 빼었다 하는 것이다. 이렇게 하려면 지저분한 플래그가 꽤 필요하고 그래도 해결이 되지 않아서 스크롤에 대한 가속도를 측정하는 방법을 시도했다. 마지막 4개의 이벤트의 시간간격을 측정해서 모멘텀 스크롤처럼 손가락을 튕긴 것인지 아니면 그냥 스크롤을 하다가 손가락을 뗀 것인지를 판단하려고 한 것인데 일단 내 개인 프로젝트에서는 잘 동작하고 있다. 완벽하진 않지만 한 95%의 경우에서는 제대로 동작하는 것으로 보인다. 사실 이 부분도 예제로 만들려고 했지만 이건 잘 안됐다. 내가 만든것에서는 여러가지 UI가 섞여있어서인지 가속도 측정이 예제로 다시 구성하니 전혀 다르게 나와서 구성할 수가 없었다.(어째서!!!) 일단 내가 시도한 방법이 범용적으로는 쓸 수 없다고 생각해서 좀더 고민을 해봐야겠다. 정말 이 버그가 iOS 7에서는 해결이 되었으면 좋겠다. ㅠ

My Comment..
해당 글은 내가 아는 분야가 아닌 모바일 쪽이긴 한데 좀 신기하기도 하고 이런것도 있구나 하는 관점에서 읽어보고서 갖고 왔다..