[Book] 엔터프라이즈급 애자일 방법론..

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

엔터프라이즈급 애자일 방법론 - 딘 레핑웰 지음, 김택구 외 옮김/에이콘출판

애자일에 대한 책은 이제는 꽤 충분한 상태까지 온 것 같습니다. 애자일은 개념적으로나 의도, 방법적인 면에서는 크게 공감하고 있지만 약간은 이상적인 면이 있다고 생각하기 때문에 현실에 적용하기에는 이런 저런 어려움이 있다고 생각합니다. 작업을 혼자하는게 아니다 보니요....

기존의 애자일책들이 애자일 방법론 자체나 소규모팀에 대한 중심으로 설명을 했다면 이책은 좀 더 현실적인 엔터프라이즈급 애자일 방법론에 대해서 다루고 있습니다.(책 제목만으로도 알 수 있는 뻔한 얘기를 너무 장황하게 했나요? ㅎ)

이책은 목차가 크게 3가지로 분류되어 있습니다.

1. 소프트웨어 애자일 방법론
2. 애자일 확장 적용하는 7가지 팀단위 애자일 활동
3. 엔터프라이즈 환경에 맞는 애자일 방법론

1부 소프트웨어 애자일 방법론에서는 일단 애자일에 대해서 독자들이 알아야 하기 때문에 애자일이 무엇인지에 대해서 설명을 하고 있습니다. 애자일이 어떤 개념인지.. 기존의 대부분의 회사에서 적용하고 있는 폭포수방법론이 어떤 문제가 있고 애자일은 어떻게 접근하고 있는지... 그리고 애자일내에서 여러가지 방법론이라고 할 수 있는 것들 중에 대표적인 XP(eXtreme Programming), 스크럼, RUP, 린소프트웨어 등에 대해서 설명합니다.

 

이부분은 내용도 깔끔하고 아주 깊게까지는 파악하지 못하더라도 여러가지 방법론의 개념을 파악하는데는 크게 도움이 되었습니다.

 

2부 애자일 확장 적용하는 7가지 팀단위 애자일 활동에서는 애자일을 적용하기 위해서 중요한 개념에 대해서 자세히 설명하고 있습니다. 현업에 새로운 방법론을 적용하기 위해서 적용되어야 하는 내용을 자세히 설명하고 있으며 정의/빌드/테스트의 컴포넌트 팀 구성, 계획과 추적, 반복, 짧은 릴리즈 주기, 동시테스트, 지속적 통합, 정기적인 반성의 7가지 활동입니다.

 

이부분에 대해서도 디테일하게 설명하고는 있지만 약간은 개념적인 부분을 위주로 설명하고 있습니다. 개념적이라고 하는 것은 제목에서는 약간 현업적용에 초점이 맞춰져 있을거라는 개인적인 예상을 하고 있었는데 그런부분보다는 원론적인 방법 및 개념 위주로의 설명에만 그치는 것이 약간 안타깝습니다.

 

3부 엔터프라이즈 환경에 맞는 애자일 방법론에서는 이제 엔터프라이즈급에서 애자일을 적용하기 위한 것을 설명하고 있는데 2부부터 약간 그렇기는 했지만 급격하게 책을 읽는 집중감을 잃어가면서 책의 내용이 눈에 잘 안들어왔습니다. 여기서는 엔터프라이즈급에 대해서 어떤 식으로 접근하는지에 대해서 설명하면서 여러기업들의 적용사례를 보여주고 조직에 대한 변화를 얘기하고 있습니다.

 

실제 이부분이 이책이 얘기하고 싶었던 부분이고 이책을 고른 사람들이 가장 관심있어할 부분인것 같은데 그 내용은 너무 빈약하게 느껴집니다. 너~무 추상적인 개념얘기만 하는 느낌이 강했기 때문에 이걸 보고 어떻게 적용을 하나(머 적용은 각 조직이 시행착오를 거치면서 이뤄가야하는 것이긴 하지만요.)하는 생각이 들었습니다.

 

마케팅과 영업의 반대는 어떻게 하는가? 애자일방법론이 더 높은 가치를 줄수있음을 설득한다. 머 이런식이다 ㅡ..ㅡ 약간은 비약적인 예일수도 있겠지만 말은 맞지만 상당부분은 애자일을 고민하면 엔터프라이즈급에 적용한다고 했을  때 충분히 생각해 낼 수 있는 정도의 내용이 아닌가 하는 생각이 들었습니다. 책하나로 실무에 바로 적용하는 실버블렛같은 내용을 기대한 것은 아니지만 좀더 현실적인 내용을 기대했는데 그러지 못한 부분은 좀 아쉬웠습니다.

 

앞의 개념설명쪽은 꽤 괜찮았는데 뒤로 갈수록 좀 실망하게 된 책이네요.

 

RUP는 UP를 구체화한 IBM 레셔널소프트웨어의 UML기반의 개발방법론 상용제품으로 판매하고 있습니다. 저도 RUP는 여기서 처음 알았는데 저자가 RUP와 연관있다보니 포함되어 있는듯 합니다.

[JS]veign.com이 공개한 CSS3 Cheat Sheet (PDF)..

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

지난 주에 HTML 5 Cheat Sheet에 대해서 포스팅을 했는데 SMASHING MAGAZINE에 이번에는 CSS3에 대한 Cheat Sheet가 공개되었습니다.

SMASHING MAGAZINE에서 HTML5 CheatSheet를 공개한 이후 CSS3도 만들어 달라는 요청을 받아서 veign.com의 Chris Hanscom한테 만들어 달라고 요청했다고 합니다. CSS3는 Firefox 3.5, Opera 9.6, Safari 3+, Google Chrome에서 지원하고 있습니다.

이 Cheat Sheet에는 현재 CSS3 W3C 스펙의 properties, selectors type과 가능한 값들의 리스트가 정리되어 있습니다.

CSS3 Cheat Sheet Download

같은 형식으로 CSS2의 Cheat Sheet도 제공하고 있습니다.

My Comment..
글씨 크기를 변경했다.. 원래는 보통 사이즈였지만, 크게로 바꾼 것.. 이유는 특별한 건 아니고, 이전 글들을 보면 너무 작은 느낌이 들었기 때문이다.. 핸드폰으로 봐도 그렇고 말이지..

원래는 형태가 바뀌는 거라서 Talk 카테고리로 뺄까 했지만, 약간의 수정인데 구태여 글을 따로 올리는것도 좀 우습지 싶어서 이렇게 남겨본다.. 아직은 갈길이 멀기에 지속적으로 변화가 있을성 싶당..

[HTML]veign.com이 공개한 HTML 5 Cheat Sheet (PDF)..

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

SMASHING MAGAZINE에서 veign에서 만든 HTML 5 Cheat Sheet를 공개했습니다.

위 기사에 따르면 XHTML은 끝나고 이제 HTML 5가 살아날꺼라고 합니다. W3C의 XHTML2 워킹그룹이 2009년 말에 작업을 중단할 것으로 예상되며 대신 HTML5의 키울계획이라고 합니다. 비록 HTML 5는 2022년까지 완전히 지원되지 않는다고 하더라도 이것이 앞으로 HTML이 넓게 퍼지지 않는다는 것을 의미하지는 않는다고 합니다.

그래서 현재 지원하는 HTML5의 Cheat Sheet를 공개하기로 했고 Final Recommendation 스펙이 나올때까지 업데이트할 예정이라고 합니다.

물론 저도 HTML 5에 대해 기대하는 바가 크고(최근 릴리즈된 Firefox 3.5에서 HTML 5의 일부를 지원하고 있습니다.) 트위터에서도 많은 개발자들이 HTML 5에 대해서 얘기하고 있습니다. 하지만 웹표준의 보급에도 큰 장애가 되고 있는 것과 마찬가지로 일정점유율이상의 브라우저가 지원하기 전까지는 실험적 또는 특수한 경우를 제외하고는 사용하기가 어려운 것이 사실이고 새로운 스펙은 좋고 나쁨을 떠나서 개발자에게 부담되는 것도 사실입니다. 수년이 걸릴거라고는 예상하고 있었지만 2022년까지는 전혀 생각지 못하고 있었네요. 어찌보면 현실적인 예상일 수도 있겠습니다.

어쨌든 HTML은 좋은 스펙이라고 생각하지만 새로운 Needs에 대한 충족을 못하고 있는 것도 사실이기에 HTML5의 성장을 기대해 봅니다.

HTML5 Cheat Sheet Download

[JS]Thomas Fuchs 새로은 비쥬얼이펙트 라이브러리 : scripty2..

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

Prototype.js기반의 비쥬얼 이펙트 라이브러리인 Script.aculo.us를 만든 Thomas Fuchs가 새로운 비쥬얼 이펙트 라이브러리를 만들고 있었네요. scripty2입니다.

현재 버전은 Alpha1 버전으로 가져다가 적용하기에는 약간 꺼려질만한 버전이긴 합니다. 사이트에는 딱히 명시되어 있지는 않지만 디자인도 그렇고 이름도 그렇고 Script.aculo.us의 후속버전으로 제작하고 있는 것이 아닐까 합니다. 네임스페이스도 S2라는 네임스페이스로 쓰고 있군요. 디자인도 이전 사이트와 거의 동일하고요.

사이트에 나온대로 아직 알파버전이기 때문에 문서화도 많이 부족하고 메서드나 내용도 계속 작성중이라서 아직 완전히 확정된 형태는 아닙니다. script.aculo.us의 개발계획이 어떻게 되는 건지는 잘 모르겠네요.

Scripty2는 크게 scripty2 core, scripty2 fx, scripty2 ui 3가지로 나누어집니다. 아직 문서화도 많이 되어 있지 않은데다가 능력도 안되서 소스까지 분석할 능력은 없습니다. script.aculo.us를 하면서 배운 경험을 가지고 비쥬얼효과와 UI에 대해서만 최적화한 듯합니다.

현재 토마스퍽스가 만든 twistori와 freckle에서 쓰이고 있습니다. 저장소는 GitHub를 이용하고 있고 커뮤니티는 구글 그룹스를 이용하고 있습니다.

현재 데모는 2가지가 제공되고 있습니다. Cards Demo와 Puzzle Demo가 있습니다. 요즘은 비쥬얼 효과가 워낙 많아서 놀랄만한 데모는 아니지만 깔끔하니 괜찮아 보니는군요. 나중에 시간내서 좀 만져봐야겠습니다.

덧) Thomas Fuchs와 Amy Hoy가 이글에 대해서 포스팅한 것을 모르고 있었네요. Amy Hoy의 글에 따르면 Scripty2는 Script.aculo.us 2가 맞고 Thomas Fuchs의 포스팅에 따르면 script.aculo.us라는 이름을 좋아하지만 더 외우기 좋은 이름으로 바꾸어야 될 때라는 것에 동의한다고 합니다.(사실 외우기 쉽지 않긴 하죠.. ㅎㅎㅎ) scripty2라는 이름도 앞으로 바뀔수도 있다는군요.
애니메이션을 그래프로 동작타임을 조절하는 데모는 참으로 맘에 드는군요.

[jQuery]jQuery로 iPhone스타일의 Checkbox 만들기..

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

아이폰이 전세계적으로 히트친 뒤로 아이폰의 UI는 하나의 상징이 되어버렸습니다.(요즘도 루머때문에 국내에서 난리죠.)

Thomas Reynolds라는 사람이 jQuery를 이용해서 iPhone스타일의 checkbox를 웹에서 구현할 수 있는 스크립트를 만들어서 공개했습니다. 실제 아이폰의 체크박스처럼 아주 부드럽게 잘 동작합니다.

1 2 3 4 5 6 7 8

<script src="jquery-1.3.2.js" type="text/javascript" charset="utf-8"></script> <script src="iphone-style-checkboxes.js" type="text/javascript" charset="utf-8"></script> <link rel="stylesheet" href="style.css" type="text/css" media="screen" charset="utf-8" /> <script type="text/javascript" charset="utf-8"> $(document).ready(function() { $(':checkbox').iphoneStyle(); }); </script>

저는 jQuery는 거의 안만져봤지만 사용법은 아주 간단합니다. jQuery를 인클루드하고 iphone스타일로 바꾸기 위한 Thomas Reynolds의 js파일과 CSS와 이미지 5개면 준비가 끝이고 Dom Ready 콜백에 iphoneStyle()함수를 지정만 해주면 간단하게 실행됩니다.

위 스크린샷처럼 아주 깔끔하게 표현이 됩니다. Thomas Reynolds의 아이폰스타일 체크박스 소개페이지를 보면 간단한 예제를 볼 수 있습니다. 머 체크박스를 바뀌주는 것이므로 이 이상의 예제도 없기는 합니다. 옵션을 주면 기본인 ON/OFF 메시지 대신 원하는 글자를 표시해 줄 수도 있습니다. 소스저장소를 보면 처음 소개할때보다 소스가 좀더 나아져서 스타일 class에 대한 지정을 옵션으로 줄 수 있습니다.

가장 좋은 점은 역시 js가 돌아가지 않으면 일반적으로 보는 checkbox를 그대로 볼 수 있기 때문에 접근성에도 문제가 별로 없어보입니다. 전 jQuery를 아직은 안써봐서 이걸 prototype.js기반으로 해볼까 했는데 소스저장소를 보니까 이미 prototype.js기반으로도 제작중이군요.(아직 제대로 돌아가지는 않습니다.)

[JS]IE에서 dom:loaded(domready Event)의 잘못된 호출..

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

포스팅 제목을 짓는데 좀 고민을 했네요. 결과로 보면 제목을 저렇게 짓기는 좀 애매한 부분이 있기는 하지만 해답까지 다 알게 된 후에는 검색할 필요가 없으니 그냥 문제를 겪은 상황으로 제목을 정했습니다. ㅎ

prototype.js를 아주 잘 쓰진 않지만 그래도 어느정도 사용해왔었는데 오늘 처음보는 현상을 겪었습니다. prototype.js에는 dom:loaded라는 이벤트가 있습니다. 이 이벤트는 DOM이 모두 로드되면 발생하는 이벤트이고 보통 많이 쓰는 window.onload와는 약간 다릅니다. window.onload보다는 좀 더 빠른 타이밍이라고 할 수 있습니다. DOM만 다 로드되면 호출되니까요. 저는 prototype.js라서 dom:loaded이지만 통칭 domready Event라고 할 수 있고 대개의 자바스크립트 프레임워크에는 이런 이벤트 리스너가 제공되고 있습니다.

이 이벤트에 대해서 단 한번도 문제를 겪은 적이 없었는데 오늘은 황당한 문제를 겪었습니다. dom:loaded 이벤트가 호출되었는데 엘리먼트를 호출하면 null이 나오면서 못찾는 것이었습니다. 약간의 텀을 주고 나면 당연히 다시 다 로드가 되고요. 즉 dom이 실제 다 로드되지 않았는데 dom:loaded가 호출되었다는 것이지요. 소스가 상당히 꼬여있는 상태였고 그걸 정리할 수도 없는 상황이라 고생을 좀 했는데 어쨌든 이유는 찾았습니다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

<html> <head> <title>Untitled Document</title> <script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js"></script> <script type="text/javascript"> //<![CDATA[ document.observe('dom:loaded', function() { alert($("testElement2")); }); //]]> </script> </head> <body> <div id="testElement1"></div> <script type="text/javascript"> //<![CDATA[ $("testElement1").innerHTML = "It's New Text."; //]]> </script> <div id="testElement2"></div> </body> </html>

간단히 보자면 위의 상황이라고 할 수 있습니다.

상황을 설명하자면 DOM중간에 스크립트를 넣어서 DOM이 다 로드되지 않은 상태에서 DOM을 동적으로 핸들링시도한 것입니다. 어찌된 일인지 이렇게 할 경우 실제 DOM이 로드되는 타이밍이 아니라 DOM을 동적으로 핸들링하는 시점에서 dom:loaded가 발생해 버립니다. 물론 IE에서만 그러고(역쉬!!) 파이어폭스, 사파리, 오페라, 크롬 등에서는 위와같은 현상이 발생하지 않습니다.

물론 위와같은 코드는 일단 사용법자체가 잘못되어 있습니다. DOM은 기본적으로 완전히 로드된 후에 다루는 것이 기본이지요. DOM이 load되지 않았는데 다룰려고 잘못하면 실패할 가능성이 높기 때문입니다. 위 코드는 그런 기본적인 룰(강제는 아니죠)을 어긴 것이긴 하지만 실제 사이트 소스들을 보면 동적으로 핸들링은 하지는 않더라도 body곳곳에 script태그를 삽입하는 경우를 많이 보곤 합니다. 현업에서 Obtrusive Javascript를 지향하는 것은 거의 보기가 힘들죠 ㅠ..ㅠ

Example Page

위 예제는 간단히 볼 수 있게 만든 테스트입니다. dom:loaded가 호출되었지만 반이상정도는 null로 찍히는 것을 볼 수 있습니다. 물론 IE에서 테스트했을 때만 발생합니다. 너무 간단한 DOM이라서 위에 설명한 현상이 잘 발생하지 않아서 하단에 스크립트를 약간 두어서 dom load를 지연되도록 했습니다.(로컬에선 반정도만 발생하는데 확실히 웹상에 올리면 거의 발생하는군요.)

prototype.js쪽의 문제라고 해야할지 IE의 문제라고 해야할지 고민을 많이 했는데 이것저것 찾아보니 역시 IE의 문제(?)군요. IE and “Operation Aborted” 이 포스팅을 보면 해당 문제에 대해서 정리를 상당히 할 수 있습니다. 이 포스팅에 나온대로 MS에서도 비슷한 문제에 대해서 정리된 내용이 있지만(위의 포스팅 내용중에 나와 있습니다.) 위 포스팅내용대로 정확히 맞아떨어지지는 않습니다.

정확한 현상은 DOM이 다 로드되지 않았는데 innerHTML이나 appendChild등을 이용해서 동적으로 핸들링을 시도했을 경우 문제가 발생하며 IE는 이를 알려주지도 않습니다. 정확히 어떻게 해결하는지는 모르겠지만 다른 브라우저에서는 원하는대로 잘 작동합니다. IE 6, 7, 8이 다 그런걸 보면 의도적인 걸까요 ㅠ..ㅠ

document.body.appendChild(document.createElement('div'));

오직 dom로드 종료전에 위 코드처럼 dom핸들링이 연속적으로 사용되었을 때만 error 표시를 해줍니다.

IE 8에서는 아주 친절히 알려줍니다. (그냥 단순 innerHTML만 했을때도 알려주면 좀 좋아.. ㅡ..ㅡ) 제가 다 짠 소스는 아니었지만 역시 일반적으로 권장하는 룰은 따라주는게 좋다는 교훈을 다시한번 되새기게 되는군요. 사실 그냥 window.onload를 쓰면 문제 없습니다. 복잡한 소스에 조금이라도 고급(?)기법을 써보려고 하다보니 꼬인 것이긴 하죠. 덕분에 새로운걸 하나 알았지만요.