ruby on rails와함께하는 애자일웹개발pds3.egloos.com/pds/200706/01/44/workshop.pdf · ......

Ruby on Rails와 함께하는애자일 웹 개발

2007-05-31

유스풀 패러다임김석준([email protected])

2RoR과 함께하는 애자일 웹 개발, 2007-05-31

Start!


1. 프로젝트 준비

미션타겟팅 & 사용자 조사서비스 Ideation개발 프레임워크의 선택개발 환경RoR의 기본 개념들


미션(Mission)

“사람들의 인맥관리를도와주는 서비스”


타겟팅

SI vs. 웹서비스– 사용자의 특정성?

User Segmentation– 브레인스토밍 + 직관(?)

타겟 프로파일– 20대후반 ~ 40대– 직장인 또는 자영업자– 인터넷 사용자

타겟 유저 인터뷰


사용자 조사

“일주일에 한 번 ‘전화Day’를 정하거나 하루 한 시간정도시간을 내어 친지, 지인에 안부를 묻는다.”

“상대방에 대해 지속적으로 관심을 가질 수 있어야.”

“인맥관리 리스트가 있으면 좋겠다.”

“인맥은 연결될수록 강해지는 근육질 같은 것.좋은 인맥을 많은 사람에게 소개해 줄 수 있으면...”

“처음 소개받고 명함 교환하고 정답게 인사했다 하더라도차츰 잊혀지기 시작… 잠자는 인맥을 ‘깨우고’, ‘연결하고’,

‘각성시켜주는’ 그런 장치가 있으면 좋겠다.”


페르소나(Persona)

“인맥보다는 일처리가 더 중요하다고 생각했어요.사교적이지 못하기도 하구요. 그러나 최근 인맥의중요성을 실감합니다. 이런 내가 인맥을 관리할 수있도록 도와주는 도구가 있으면 좋겠습니다.”

• 김일점 / 34세(남)• 직업: 외국계 IT회사 시스템 관리자• 자주가는 사이트: SCR클럽, DC인사이드

“아는 사람은 많은데, 그렇게 친하다고는 생각되지않습니다. 막상 혼자 있을 때 전화를 걸거나 만날사람을 떠올리면? 글쎄요. 지속적으로 관계를 이어나갈 수 있는 무언가가 있으면 좋을 것 같군요.”

• 허무회 / 40세(남)• 직업: 개인사업가(부동산)• 자주가는 사이트: 머니투데이, 조선닷컴


서비스 Ideation : 주요 기능 도출


서비스 Ideation : Paper Prototyping


개발 프레임워크의 선택

Ruby on RailsDjangoErlyWebStrutsASP.NETPHP. . .

Why

?


개발 환경

RadRailsLAMPSubversionTeam Wiki– 모임 기록– 피드백– 정보공유


RoR의 기본 개념들

MVC 아키텍처– 액티브레코드, 액션팩(액션뷰, 액션컨트롤러)

구성보다 관례(Convension over Configuration)

스캐폴딩ERb 템플릿레일스 라우팅ORM데이터베이스 마이그레이션자바스크립트 & Ajax 통합


2. Iteration I – 1차 개발

가치중심 사용자 스토리즉석 설계개발 시작사용자별 페이지 만들기첫 릴리즈자바스크립트와 AjaxAjax 어디까지 적용할 것인가?RJS or Not?


가치중심 사용자 스토리


스토리 : 선택과 추정

사용자 가치 우선– 무엇을 했을 때 사용자가

가장 가치를 느낄까?

시 단위 작업 추정– 1주 단위로 구분

간략한 서술– 알아볼 수만 있으면…

기능/비기능 포함– 예: 테스터에 이메일 발송

xxx xx3

xxxxx4

xxxxxxx0.5

xxx4.5

xxxx xx xxxxx

xxxxxxx

xxxxx xxxx xx xxx xxx

4

4

4

4

44


스토리 : 작업 관리

오늘 할 일

할 일 목록xxxx xx xxxxx

4 4

완료한 일(Wiki에 기록)

적용(구현)

테스트

배포

피드백

새로운 가치발견


즉석 설계

Paper Prototyping스토리 보드…


개발 시작

Person 모델 만들기– script/generate model Person / migration

Scaffold 생성하고 수정하기– script/generate scaffold people main index– 헬퍼 메서드 만들기와 각종 폼 헬퍼들 사용하기

Data-only migration

Story 모델 추가하기– Post-back 액션– has_many :stories, :order => ‘created_at DESC’

“인맥 리스트 만들기”“새 스토리 추가하기”

person


사용자별 페이지 만들기

User 모델 추가– script/generate model User– migration 추가하기

Route 추가– user.connect ‘:user’, :controller => ‘main’,

:action => ‘list’

HTTP_Authentication 플러그인– svn co

http://dev.rubyonrails.org/svn/rails/plugins/http_authentication/ http_authentication


첫 릴리즈


사용자별 페이지 라우팅

http://localhost:3000/me

user.connect ‘:user’, :controller => ‘main’map.connect ‘:user/:action’, :controller => ‘main’

http://localhost:3000/me/recent

:controller => ‘main’, :action => ‘index’, :user => ‘user’:controller => ‘main’, :action => ‘recent’, :user => ‘user’

url_for :user => ‘me’

url_for :user => ‘me’, :action => ‘recent’

user_url ‘me’

식별(recognize)

생성(generate)


사용자 로그인 기능 구현

가장 간단한 방법?직접 구현– Rails Recipes #31, #32 등

HTTP Authentication– 직접 구현? or 플러그인

• Httpasswd, http_authentication 등

3rd Party Library & Plugins 활용– Login Engine– Login Generator– Acts as authenticated 등


자바스크립트와 Ajax

Prototype을 이용한 Ajax 호출 구현– link_to_remote– pagination_links_remote

Control.Modal– Modal Window Lightbox

(http://livepipe.net/projects/control_modal/)

“특정인의 상세정보를 집중해서 볼 수 있었으면..”“지난 스토리를 다 볼 수 있었으면..”

http://livepipe.net/projects/control_modal/


Ajax Pagination

list.rhtml

_summary.rhtml

more_msg.rhtml

더보기

1 2 3

Close

파셜


pagination_links_remote

module ActionViewmodule Helpers

module PaginationHelperdef pagination_links_remote(paginator, page_options={}, ajax_options={}, html_options={})

name = page_options[:name] || DEFAULT_OPTIONS[:name]params = (page_options[:params] || DEFAULT_OPTIONS[:params]).clone

pagination_links_each(paginator, page_options) do |n|params[name] = najax_options[:url] = paramslink_to_remote(n.to_s, ajax_options, html_options)

endend

end # PaginationHelperend # Helpers

end # ActionView


Ajax, 어디까지 적용할 것인가?


RJS or Not?

remote_form_for :user,:update => ‘userlist’,:position => :bottom,:url => { :action => … } do …

render :partial => :user, :locals => …파셜

Vs.

remote_form_for :user,:url => { :action => … } do …

page.insert_html :bottom, ‘userlist’, :partial => :user, :locals => …rjs:

액션:

<div id=“userlist”>


3. ClosedAlpha

사용자 테스트와 피드백회고와 코드 리뷰


사용자 테스트와 피드백


회고와 코드 리뷰

“ThreeFs”– Facts/ 사실, 한 일– Feelings/ 느낌, 감정– Findings/ 배운점, 교훈

코드 리뷰– 중복 제거(Don’t Repeat Yourself!)– 고약한 냄새– 새로운 가치의 발견?

*

* http://xper.org/wiki/xp/ThreeFs

http://xper.org/wiki/xp/ThreeFs

http://xper.org/wiki/xp/ThreeFs


4. Iteration II - 2차 개발

코드 리팩터링사용자 가치 추가해 나가기vCard와 ERb(인맥)관계지도 그리기미처 구현하지 못한 가치들레일스 테스팅 프레임워크


코드 리팩터링

MVC : 역할 분담컨트롤러 나누기파셜 뷰와 헬퍼의 활용before_filterPost-back 액션respond_to. . .RESTful ?


사용자 가치 추가해 나가기

“인맥이 한 눈에 들어오는 관계지도...”

“개인별 정보를 다운로드 받을 수 있게...”

“오늘 연락할 사람을 콕 찍어줘!”

“. . .”


vCard와 ERb

vCard, hCard, Microformats루비 vCard 라이브러리ERb 템플릿

def export_vcard@person = Person.find(params[:id])render :layout => false, :content_type => 'text/x-vcard'

end

BEGIN:VCARDVERSION:3.0N:<%= @person.name %>FN:<%= @person.name %>BDAY:<%= @person.birthday.strftime("%Y%m%d") %>PHOTO;VALUE=URI:http://example.com/image.pngTEL:<%[email protected] %>TEL;TYPE=office,pref:<%= @person.phone_office %>EMAIL;TYPE=pref:<%= @person.email %>END:VCARD


(인맥)관계지도 그리기

“The Rails Way”– Prototype & Script.aculo.us 라이브러리– 레일스 내장 헬퍼메서드– 인라인(inline) 자바스크립트– High-level abtraction

“The jQuery Way”– Low-level JavaScript 접근– Unobtrusive, 다수의 플러그인– Prototype과 공존?

* 그림 출처: Google 이미지 검색


미처 구현하지 못한 가치들

오늘 꼭 연락해야 할 사람 (자동) 추천하기내가 아는 사람을 다른 사람과 연결짓기사용자 정의 필드 추가하기내가 지금 인맥관리를 제대로 하고 있나? 통계좀 더 쉽고 편한 사용자 인터페이스– 예: ㄱ, ㄴ, ㄷ, .., 기타 별 탭 네비게이션

예쁜 디자인성능(최적화)


레일스 테스팅 프레임워크

Unit 테스트Functional 테스트Integration 테스트RSpecSelenium, Waitr, Fitnesse


5. ClosedBeta

배포와 확장검색기능과 RESTful 레일스사용자테스트, 측정과 분석


배포와 확장(scaling)

WEBrick(Apache & FCGI)MongrelMongrel cluster

httpd

mongrel Rails App.

REQ

static (cache)

mod_proxy_balance


검색 기능과 RESTful 레일스

검색기능 추가하기– SELECT * … WHERE ooo LIKE ‘%뭐뭐%’– Ferret / Acts As Ferret– Any other?

RESTful 레일스?– 리소스 URL– CRUD 컨트롤러– map.resources 추가– 다양한 클라이언트 응대(respond_to)– ActiveResource 라이브러리


RESTful 레일스로 리팩터링

class StoriesController < ApplicationController

# GET /stories# GET /stories.xml def index

@person = Person.find(params[:person_id])@stories = Story.find(:all,

:conditions => {:person_id => params[:person_id]})respond_to do |format|

format.html { render :layout => false }format.xml { render :xml => @stories.to_xml }

endend

# GET /stories/1# GET /stories/1.xmldef show

@story = Story.find(params[:id],:conditions => {:person_id => params[:person_id]})

. . .


레일스의 미래

현재 레일스 2.0

모델 액티브 레코드 액티브 레코드

뷰 ERb Markaby, DRYML, HAML, Liquid, …

컨트롤러 일반 컨트롤러 CRUD 컨트롤러(리소스)

자바스크립트 통합 Prototype 중심 jQuery 수용

웹 서비스 액티브 웹서비스 액티브 리소스

테스팅 기능테스트 Rspec

배포 Apache + mongrel Nginx + mongrel


사용자테스트, 측정과 분석

베타 테스팅– ASAP– 초대 방식과 커뮤니케이션

측정과 분석– 로그 분석– Survey– 사용자 인터뷰


6. Lessons Learned

프로젝트반추– 성공의 이유– 다시 시작한다면?– 고민거리와 개인적으로 얻은 것들

Why RoR?– 높은 추상화의 DSL... 쉬운 접근, 높은 생산성– 관례에 따르기– 개방성(루비언어 자체, 플러그인 등)


Thank you!

ruby on rails와함께하는 애자일웹개발pds3.egloos.com/pds/200706/01/44/workshop.pdf · ......

Documents