Page 0: Page 1: Ruby on Rails와 함께하는 애자일 웹 개발 2007-05-31 유스풀 패러다임 김석준(sjoonk@gmail.com) Page 2: Start! RoR과 함께하는 애자일 웹 개발, 2007-05-31 2 Page 3: 1. 프로젝트 준비 미션 타겟팅 & 사용자 조사 서비스 Ideation 개발 프레임워크의 선택 개발 환경 RoR의 기본 개념들 RoR과 함께하는 애자일 웹 개발, 2007-05-31 3 Page 4: 미션(Mission) “사람들의 인맥관리를 도와주는 서비스” RoR과 함께하는 애자일 웹 개발, 2007-05-31 4 Page 5: 타겟팅 SI vs. 웹서비스 – 사용자의 특정성? User Segmentation – 브레인스토밍 + 직관(?) 타겟 프로파일 – 20대후반 ~ 40대 – 직장인 또는 자영업자 – 인터넷 사용자 타겟 유저 인터뷰 RoR과 함께하는 애자일 웹 개발, 2007-05-31 5 Page 6: 사용자 조사 “일주일에 한 번 ‘전화Day’를 정하거나 하루 한 시간정도 시간을 내어 친지, 지인에 안부를 묻는다.” “상대방에 대해 지속적으로 관심을 가질 수 있어야.” “인맥관리 리스트가 있으면 좋겠다.” “인맥은 연결될수록 강해지는 근육질 같은 것. 좋은 인맥을 많은 사람에게 소개해 줄 수 있으면...” “처음 소개받고 명함 교환하고 정답게 인사했다 하더라도 차츰 잊혀지기 시작… 잠자는 인맥을 ‘깨우고’, ‘연결하고’, ‘각성시켜주는’ 그런 장치가 있으면 좋겠다.” RoR과 함께하는 애자일 웹 개발, 2007-05-31 6 Page 7: 페르소나(Persona) • 김일점 / 34세(남) • 직업: 외국계 IT회사 시스템 관리자 • 자주가는 사이트: SCR클럽, DC인사이드 “인맥보다는 일처리가 더 중요하다고 생각했어요. 사교적이지 못하기도 하구요. 그러나 최근 인맥의 중요성을 실감합니다. 이런 내가 인맥을 관리할 수 있도록 도와주는 도구가 있으면 좋겠습니다.” • 허무회 / 40세(남) • 직업: 개인사업가(부동산) • 자주가는 사이트: 머니투데이, 조선닷컴 “아는 사람은 많은데, 그렇게 친하다고는 생각되지 않습니다. 막상 혼자 있을 때 전화를 걸거나 만날 사람을 떠올리면? 글쎄요. 지속적으로 관계를 이어 나갈 수 있는 무언가가 있으면 좋을 것 같군요.” RoR과 함께하는 애자일 웹 개발, 2007-05-31 7 Page 8: 서비스 Ideation : 주요 기능 도출 RoR과 함께하는 애자일 웹 개발, 2007-05-31 8 Page 9: 서비스 Ideation : Paper Prototyping RoR과 함께하는 애자일 웹 개발, 2007-05-31 9 Page 10: 개발 프레임워크의 선택 Ruby on Rails Django ErlyWeb Struts ASP.NET PHP ... ? W y h 10 RoR과 함께하는 애자일 웹 개발, 2007-05-31 Page 11: 개발 환경 RadRails LAMP Subversion Team Wiki – 모임 기록 – 피드백 – 정보공유 RoR과 함께하는 애자일 웹 개발, 2007-05-31 11 Page 12: RoR의 기본 개념들 MVC 아키텍처 – 액티브레코드, 액션팩(액션뷰, 액션컨트롤러) 구성보다 관례(Convension over Configuration) 스캐폴딩 ERb 템플릿 레일스 라우팅 ORM 데이터베이스 마이그레이션 자바스크립트 & Ajax 통합 RoR과 함께하는 애자일 웹 개발, 2007-05-31 12 Page 13: 2. Iteration I – 1차 개발 가치중심 사용자 스토리 즉석 설계 개발 시작 사용자별 페이지 만들기 첫 릴리즈 자바스크립트와 Ajax Ajax 어디까지 적용할 것인가? RJS or Not? RoR과 함께하는 애자일 웹 개발, 2007-05-31 13 Page 14: 가치중심 사용자 스토리 RoR과 함께하는 애자일 웹 개발, 2007-05-31 14 Page 15: 스토리 : 선택과 추정 xxx xx 3 xxxxx xxx 4 4.5 사용자 가치 우선 – 무엇을 했을 때 사용자가 가장 가치를 느낄까? 0.5 xxxxxxx 시 단위 작업 추정 – 1주 단위로 구분 4 xxxx xx xxxxx 4 간략한 서술 – 알아볼 수만 있으면… 4 xxxxxxx 기능/비기능 포함 – 예: 테스터에 이메일 발송 xxxxx 4 4 xxxx xx 4 xxx xxx RoR과 함께하는 애자일 웹 개발, 2007-05-31 15 Page 16: 스토리 : 작업 관리 새로운 가치 발견 오늘 할 일 4 xxxx xx 4 피드백 할 일 목록 xxxxx 배포 완료한 일 (Wiki에 기록) 적용(구현) 테스트 RoR과 함께하는 애자일 웹 개발, 2007-05-31 16 Page 17: 즉석 설계 Paper Prototyping 스토리 보드 … RoR과 함께하는 애자일 웹 개발, 2007-05-31 17 Page 18: 개발 시작 “인맥 리스트 만들기” “새 스토리 추가하기” Person 모델 만들기 – script/generate model Person / migration person Scaffold 생성하고 수정하기 – script/generate scaffold people main index – 헬퍼 메서드 만들기와 각종 폼 헬퍼들 사용하기 Data-only migration Story 모델 추가하기 – Post-back 액션 – has_many :stories, :order => ‘created_at DESC’ 18 RoR과 함께하는 애자일 웹 개발, 2007-05-31 Page 19: 사용자별 페이지 만들기 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_aut hentication/ http_authentication RoR과 함께하는 애자일 웹 개발, 2007-05-31 19 Page 20: 첫 릴리즈 RoR과 함께하는 애자일 웹 개발, 2007-05-31 20 Page 21: 사용자별 페이지 라우팅 http://localhost:3000/me http://localhost:3000/me/recent user.connect ‘:user’, :controller => ‘main’ map.connect ‘:user/:action’, :controller => ‘main’ 식별(recognize) :controller => ‘main’, :action => ‘index’, :user => ‘user’ :controller => ‘main’, :action => ‘recent’, :user => ‘user’ 생성(generate) url_for :user => ‘me’ url_for :user => ‘me’, :action => ‘recent’ user_url ‘me’ RoR과 함께하는 애자일 웹 개발, 2007-05-31 21 Page 22: 사용자 로그인 기능 구현 가장 간단한 방법? 직접 구현 – Rails Recipes #31, #32 등 HTTP Authentication – 직접 구현? or 플러그인 • Httpasswd, http_authentication 등 3rd Party Library & Plugins 활용 – Login Engine – Login Generator – Acts as authenticated 등 RoR과 함께하는 애자일 웹 개발, 2007-05-31 22 Page 23: 자바스크립트와 Ajax “특정인의 상세정보를 집중해서 볼 수 있었으면..” “지난 스토리를 다 볼 수 있었으면..” Prototype을 이용한 Ajax 호출 구현 – link_to_remote – pagination_links_remote Control.Modal – Modal Window Lightbox (http://livepipe.net/projects/control_modal/) RoR과 함께하는 애자일 웹 개발, 2007-05-31 23 Page 24: Ajax Pagination list.rhtml 파셜 _summary.rhtml 더보기 Close more_msg.rhtml 123 RoR과 함께하는 애자일 웹 개발, 2007-05-31 24 Page 25: pagination_links_remote module ActionView module Helpers module PaginationHelper def 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] = n ajax_options[:url] = params link_to_remote(n.to_s, ajax_options, html_options) end end end # PaginationHelper end # Helpers end # ActionView RoR과 함께하는 애자일 웹 개발, 2007-05-31 25 Page 26: Ajax, 어디까지 적용할 것인가? RoR과 함께하는 애자일 웹 개발, 2007-05-31 26 Page 27: RJS or Not? remote_form_for :user, :update => ‘userlist’, :position => :bottom, :url => { :action => … } do … 액션: render :partial => :user, :locals => … <div id=“userlist”> 파셜 Vs. remote_form_for :user, :url => { :action => … } do … rjs: page.insert_html :bottom, ‘userlist’, :partial => :user, :locals => … RoR과 함께하는 애자일 웹 개발, 2007-05-31 27 Page 28: 3. ClosedAlpha 사용자 테스트와 피드백 회고와 코드 리뷰 RoR과 함께하는 애자일 웹 개발, 2007-05-31 28 Page 29: 사용자 테스트와 피드백 RoR과 함께하는 애자일 웹 개발, 2007-05-31 29 Page 30: 회고와 코드 리뷰 “ThreeFs”* – Facts/ 사실, 한 일 – Feelings/ 느낌, 감정 – Findings/ 배운점, 교훈 코드 리뷰 – 중복 제거(Don’t Repeat Yourself!) – 고약한 냄새 – 새로운 가치의 발견? * http://xper.org/wiki/xp/ThreeFs RoR과 함께하는 애자일 웹 개발, 2007-05-31 30 Page 31: 4. Iteration II - 2차 개발 코드 리팩터링 사용자 가치 추가해 나가기 vCard와 ERb (인맥)관계지도 그리기 미처 구현하지 못한 가치들 레일스 테스팅 프레임워크 RoR과 함께하는 애자일 웹 개발, 2007-05-31 31 Page 32: 코드 리팩터링 MVC : 역할 분담 컨트롤러 나누기 파셜 뷰와 헬퍼의 활용 before_filter Post-back 액션 respond_to ... RESTful ? RoR과 함께하는 애자일 웹 개발, 2007-05-31 32 Page 33: 사용자 가치 추가해 나가기 “인맥이 한 눈에 들어오는 관계지도...” “개인별 정보를 다운로드 받을 수 있게...” “오늘 연락할 사람을 콕 찍어줘!” “. . .” RoR과 함께하는 애자일 웹 개발, 2007-05-31 33 Page 34: 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:VCARD VERSION:3.0 N:<%= @person.name %> FN:<%= @person.name %> BDAY:<%= @person.birthday.strftime("%Y%m%d") %> PHOTO;VALUE=URI:http://example.com/image.png TEL:<%=@person.phone %> TEL;TYPE=office,pref:<%= @person.phone_office %> EMAIL;TYPE=pref:<%= @person.email %> END:VCARD RoR과 함께하는 애자일 웹 개발, 2007-05-31 34 Page 35: (인맥)관계지도 그리기 “The Rails Way” – – – – Prototype & Script.aculo.us 라이브러리 레일스 내장 헬퍼메서드 인라인(inline) 자바스크립트 High-level abtraction “The jQuery Way” – Low-level JavaScript 접근 – Unobtrusive, 다수의 플러그인 – Prototype과 공존? * 그림 출처: Google 이미지 검색 RoR과 함께하는 애자일 웹 개발, 2007-05-31 35 Page 36: 미처 구현하지 못한 가치들 오늘 꼭 연락해야 할 사람 (자동) 추천하기 내가 아는 사람을 다른 사람과 연결짓기 사용자 정의 필드 추가하기 내가 지금 인맥관리를 제대로 하고 있나? 통계 좀 더 쉽고 편한 사용자 인터페이스 – 예: ㄱ, ㄴ, ㄷ, .., 기타 별 탭 네비게이션 예쁜 디자인 성능(최적화) RoR과 함께하는 애자일 웹 개발, 2007-05-31 36 Page 37: 레일스 테스팅 프레임워크 Unit 테스트 Functional 테스트 Integration 테스트 RSpec Selenium, Waitr, Fitnesse RoR과 함께하는 애자일 웹 개발, 2007-05-31 37 Page 38: 5. ClosedBeta 배포와 확장 검색기능과 RESTful 레일스 사용자테스트, 측정과 분석 RoR과 함께하는 애자일 웹 개발, 2007-05-31 38 Page 39: 배포와 확장(scaling) WEBrick (Apache & FCGI) Mongrel Mongrel cluster REQ httpd mongrel mod_proxy_balance Rails App. static (cache) RoR과 함께하는 애자일 웹 개발, 2007-05-31 39 Page 40: 검색 기능과 RESTful 레일스 검색기능 추가하기 – SELECT * … WHERE ooo LIKE ‘%뭐뭐%’ – Ferret / Acts As Ferret – Any other? RESTful 레일스? – – – – – 리소스 URL CRUD 컨트롤러 map.resources 추가 다양한 클라이언트 응대(respond_to) ActiveResource 라이브러리 40 RoR과 함께하는 애자일 웹 개발, 2007-05-31 Page 41: 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 } end end # GET /stories/1 # GET /stories/1.xml def show @story = Story.find(params[:id], :conditions => {:person_id => params[:person_id]}) ... RoR과 함께하는 애자일 웹 개발, 2007-05-31 41 Page 42: 레일스의 미래 현재 모델 뷰 컨트롤러 자바스크립트 통합 웹 서비스 테스팅 배포 액티브 레코드 ERb 일반 컨트롤러 Prototype 중심 액티브 웹서비스 기능테스트 Apache + mongrel 레일스 2.0 액티브 레코드 Markaby, DRYML, HAML, Liquid, … CRUD 컨트롤러 (리소스) jQuery 수용 액티브 리소스 Rspec Nginx + mongrel RoR과 함께하는 애자일 웹 개발, 2007-05-31 42 Page 43: 사용자테스트, 측정과 분석 베타 테스팅 – ASAP – 초대 방식과 커뮤니케이션 측정과 분석 – 로그 분석 – Survey – 사용자 인터뷰 RoR과 함께하는 애자일 웹 개발, 2007-05-31 43 Page 44: 6. Lessons Learned 프로젝트반추 – 성공의 이유 – 다시 시작한다면? – 고민거리와 개인적으로 얻은 것들 Why RoR? – 높은 추상화의 DSL... 쉬운 접근, 높은 생산성 – 관례에 따르기 – 개방성(루비언어 자체, 플러그인 등) RoR과 함께하는 애자일 웹 개발, 2007-05-31 44 Page 45: Thank you! RoR과 함께하는 애자일 웹 개발, 2007-05-31 45 Page 46: