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

2,430 views

Published on

2007.5 세미나 발표자료

Published in: Technology
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,430
On SlideShare
0
From Embeds
0
Number of Embeds
68
Actions
Shares
0
Downloads
0
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide
  • 브레인스토밍 과정을 통해 이 서비스에 필요한 기능을 식별 기술적인 요소와 무관 바로 구현할 수 있는 기능들도 있는 반면 , 조금 더 구체화시켜야 하는 것들도 있음
  • 종이로 서비스에 대한 개략적인 프로토타입을 만들고 사용자들의 needs 를 다시 들음 ( 일종의 사용자 테스트 )
  • Ruby on Rails와 함께 하는 애자일 웹 개발

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

    ×