[봄싹] 점진적인 개발

봄싹에서 Agile 방법론을 공부한 적은 없지만, 자연스럽게 그와 비슷한 형태의 개발이 진행되는걸 보는 재미가 쏠쏠 합니다. 그 중 하나로 점진적인 개발을 들 수 있습니다. 다들 바쁜 생업을 하는 중에 짬을 내서 개발을 하는 중인데다가, 배포 주기를 될 수 있으면 짧게 가져가고 있기 때문에 ‘설계’에 많은 시간을 투자할 여유도 없거니와 전부 개발자이자 고객이기 때문에 ‘요구사항 정리’나 ‘문서화’에 시간을 들여야 할 이유가 별로 없습니다. 그 대신 구글 그룹스에서 활발한 토론을 통해서 필요한 기능에 대한 대충의 윤곽을 잡은 다음, 해당 기능을 만들고 싶은 개발자가 스스로 원하는데로 만듭니다. 그 뒤에 누군가 피드백을 주면, 다시 개발자는 그 피드백을 고객의 요구사항이라고 생각하고 되도록이면 반영해줍니다. 또는 피드백을 준 개발자가 직접 해당 기능을 손보기도 합니다. 그 과정 중에 자연스럽게 점진적인 개발을 실천하게 됩니다.

봄싹 사이트 0.9

지금 보시는 화면은 봄싹 0.9 버전의 메인 화면입니다. 전부가 정적인 구성요소로 HTML 파일로 만든것과 다를바 없는 JSP 파일이었습니다.

현재는 아래처럼 바뀌었습니다.

1. 제일 처음 디자인이 바뀌었습니다. 페이지는 여전히 HTML과 다를바 없었습니다. 낙서장, 공지사항, 스터디, 위키, 세미나, 커버플로우, 협찬 로고 등 아무것도 동적인 데이터는 없었습니다.

2. 그러다 낙서장 기능이 추가됩니다. 낙서장도 처음에는 정적인 디자인부터 시작했고, 동적으로 li를 추가하게 바뀌었습니다. 여기서 사용한 기술이 조금 재미있습니다. 페이지 릴로딩을 하지 않고 Ajax로 요청을 주기적으로 보내서 HTML을 업데이트 하는 방식입니다. 사용자는 가만히 첫 페이지를 열어두면 다른 사람들의 낙서가 업데이트 되는걸 볼 수 있습니다.

3. 다음은 공지 사항이 추가되었습니다. 그러면서 낙서장은 계속해서 디자인이 바뀌고 스크롤 방식이 바뀌어 나갑니다. 공지는 제이쿼리 플러긴을 이용해서 이쁜 팝업을 띄우게 되었고, 공지 목록이 길어지면 스크롤링을 하기 위해 처음부터 모든 데이터를 가져오지 않고 애초에 Ajax로 필요한 만큼의 데이터만 가져옵니다. 하지만 아직 스크롤링이 완전히 구현되어 있지는 않습니다. 아직도 개발 중인거죠.

4. 다음은 스터디 목록을 추가했습니다. 이 부부는 Ajax를 사용하지 않았었습니다. 처음에는 스터디 목록만 전부 읽어와서 랜더링 될 때 보여주고 끝이었습니다. 그러나 조금 뒤에 바뀌게 됩니다. 공간이 넉넉하고 스터디에 속한 모임을 주로 참조하는 관계로, 모임 목록까지 보여줘야할 필요가 생겼습니다. 하지만 사용자가 어떤 스터디의 모임목록을 원하는지도 모르면서 모든 모임 목록을 가져오고 싶지는 않았습니다. 그래서 Ajax를 적용했고, 하이버네이트 쿼리 캐쉬를 적용해서, 일단 한번 DB에서 가져온 모임 목록은 일정 시간동안 다시 쿼리를 날리지 않고도 보여주게 했습니다. Ajax 요청 캐시까지 적용하면 더욱 좋겠지만, 그건 아직 다음 과제로 남겨뒀습니다.

5. 마지막은 위키였습니다. 위키 목록은 스터디 목록을 뿌리는 것과 동일했습니다. 다만 위키 제목이 길어질 여지가 있어서 길이를 어느정도로 짜른다음 …을 붙이도록 개선했습니다.

이와 같이 메인 페이지를 구성하는 것들 중에 어느 하나도 한 번에 개발이 끝난것이 없으며, 지금도 사실 완전히 끝났다고 볼 수 없는 기능들이 많습니다. 메인 페이지의 구성요소 하나 하나도 자세히 히스트로리를 들여다보면 점진적으로 개발되고 있는 모습을 볼 수 있습니다. 낙서장이 대표적입니다. 처음에는 정적인 리스트였다가. Ajax로 추가할 수 있게 바뀌고, 스크롤바를 추가했다가, 지금은 마우스 드래그로 바뀌었고, 무한 드래그에서 끝이 막히는 드래그로 바뀌었습니다. 공지, 스터디, 위키도 그렇게 매우 자연스럽게 진화를 거듭하고 있습니다.

조금씩.. 쓸 수 있는 상태를 유지하면서.. 발전하기.

바로 이런게 점진적인 개발 아닐까요?

참조: 롤러스케이트 구현

[웹 사이트 속도 향상 베스트 프랙티스 8] 자바스크립트와 CSS 외부화하기

http://developer.yahoo.com/performance/rules.html#external

Make JavaScript and CSS External

tag: javascript, css

많은 성능관련 규칙들이 어떻게 관리중인 컴포넌트들을 외부화 하는지를 다루고 있다. 하지만, 그 전에 보다 기본적인 질문에대해 생각해봐야 한다. 자바스크립트와 CSS는 외부 파일에 들어있어야 하는가 아니면 페이지 자체에 포함되어 있어야 하는가?

실제로는 외부 파일을 사용함으로써, 브라우저가 자바스크립트와 CSS를 캐시하여 페이지 로딩 속도를 향상시킬 수 있다. HTML 문서에 들어있는 자바스크립트와 CSS는 매번 HTML 문서를 요청받을 때마다 다운로드 된다. 이렇게 하면 필요한 HTTP 요청을 줄일 수 있기는 하지만, HTML 문서 크기를 증가시킨다. 반면에, 만약 자바스크립트와 CSS를 외부 파일로 두고 브라우저가 캐시할 수 있게 하면 HTML 문서 사이즈도 줄이고 HTTP 요청 수의 증가도 없다.

그렇다면, 중요한 것은 요청되는 HTML 문서의 양에 비해 상대적으로 캐시 해야하는 자바스크립트와 CSS 컴포넌트 빈도이다. 수치화하기 어려울 수 있지만, 이 요소는 다양한 척도를 통해 계산할 수 있다. 만약 사이트의 사용자가 세션 당 여러 페이지를 요청하고 페이지의 대부분에서 동일한 스크립트와 스타일시트를 재사용한다면, 외부 파일 캐시를 통해 얻을 수 있는 잠재적인 장점이 더 크다.

대부분의 웹 사이트는 이러한 척도 중간에 놓여있다. 그러한 사이트에서 최선은 선택은 보통 자바스크립트와 CSS를 외부 파일로 배포하는 것이다. 페이지에 포함시키는 것이 더 좋을 수 있는 예외로 야후의 첫 페이지와 마이 야후 같은 홈 페이지가 있다. 홈 페이지는 세션당 페이지 뷰가 거의 없다. (대부분 하나다) 따라서 자바스크립트와 CSS를 페이지에 포함시키는 것이 최종 사용자 응답 시간을 줄일 수 있다.

여러 페이지 뷰로 연결되는 첫 페이지의 경우, 외부 파일을 통해 캐시 장점을 이용하는 것 말고도 HTTP 요청을 줄이는 기술들이 있다. 그런 기술 중 하나가 자바스크립트와 CSS를 첫 페이지에 두지만, 외부 파일을 페이지 로딩이 끝난 뒤에 동적으로 다운로드하는 것이다. 그 다음 연쇄적으로 호출되는 페이지들은 이미 브라우저의 캐시된 외부 파일을 참조할 것이다.

오늘은 내가 요리사 – 탕수육

주말은 원래 집청소와 요리가 제 담당입니다. 주중에는 아내가 다 해주지만, 주말 만큼은 제가 하려고 노력중이죠. 하지만;; 생각만큼 많이 도와주진 못합니다.ㅋ 할 줄 아는게 있어야죠.ㅋㅋㅋ 결혼하기 전에 라면 끓여먹을줄만 알았지 전기밥솥으로 밥하는 방법도 몰랐으니 말이죠.

어찌됐든, 오늘의 요리는 탕수육이었습니다. 물론 아내가 메인 주방장이었고 저는 보조였습니다.

만들면서는 이 손 많이 가는걸.. 그냥 사먹고 말지.. 괜히 탕수육을 먹는다고 그랬나.. 했었는데, 직접 만든 탕수육을 먹어보니 감회가 새롭더군요. 캬캬캬 재밌고 맛있었습니다.

봄싹 사이트 1.0 M1 오픈 임박!!

현재 봄싹 사이트(0.9)에서 보다 더 스터디 관리 기능을 보강했으며, 위키 디자인을 개선하여 편의성을 높였습니다. 트위터와 이메링을 비롯한 다양한 알림 서비스도 이용하실 수 있습니다. 특히 구글 토크를 사용하시는 분들은 스터디나 모임이 있을 때 메시지를 받을 실 수 있는것은 기본이고, 채팅창에서 study? meeting? 으로 현재 진행중인 스터디와 모임 정보를 확인하실 수도 있습니다. 홈 페이지에는 낙서장과 공지 사항을 추가했으며 스터디-모임 목록, 위키 목록으로 바로 이동할 수 도 있습니다. 또한 컨텐츠 작업으로, 스프링 3.0 레퍼런스 번역이 활발히 진행중입니다. 위키를 더 개선하고나면 저도 본격적으로 봄싹 컨텐츠 만들기 작업에 돌입할 생각입니다. 스프링소스 블로그 번역, 각종 웹 아티클 번역 자료를 봄싹 위키에 정리할 겁니다. 아무래도 제 블로그 보다는 위키가 찾아보기 편하니까요. (블로그에도 올리긴 할 겁니다.ㅋ)

내용적인 면이나 기능적인 면을 떠나서 이번 배포의 가장 큰 주안점은 바로 디자인입니다.

불과 두 달 사이에 획기적으로 달라진 봄싹 1.0 M1은 내일 낮에 오픈합니다.


Develop with passion! Evolve with SpringSprout!!