OOO Paint

Transcription

1 Webtoon Paint OSP Stage 2040 Team 김민철 김진현 정명권

2 REF. Activity Define Domain Model

3 Activity Design Real Use Case Use Case Actors Purpose Overview Type R1.1 파일불러오기 사용자 이미지파일을불러와컷위에표시한다 사용자가불러오기버튼을누르면불러올파일을선택하는인터페이스를표시한다. 사용자가파일을선택하면컷위에그이미지를조절하여추가한다. Primary Cross Reference R4.2 Pre-Requisites Window-1 이활성화되어있어야한다. UI Widgets Typical Courses of Events Alternative Courses of Events Exceptional Courses of Events Window-1, Window-2 (A) : 사용자, (S) : 시스템 1. (A) Window-1 의불러오기버튼 (A) 클릭 2. (S) 파일의경로를입력받는 Window-2 를출력 3. (A) Window-2 의 (A) 에경로입력하고 (B) 를클릭 4. (S) 파일이존재하는지검사하고 Window-2 를종료 5. (S) Project 에새로운 Cut 을생성하고 (R4.2) filename 과 width, height, picture 을입력 6. (S) Cut 을 Window-1 의 (Q) 영역에출력 Line 3. 파일의경로가올바르지않으면재입력을요청 Line 4. 파일이존재하지않으면경고후재입력을요청

4 Activity Design Real Use Case Use Case Actors Purpose Overview Type Cross Reference R1.2 파일저장하기 사용자 컷위에표시된이미지를파일로저장한다 사용자가저장하기버튼을누르면저장할위치를선택하는인터페이스를표시한다. 사용자가저장할위치를선택하면현재컷을이미지파일로저장한다. Primary Pre-Requisites Window-1 이활성화되어있어야한다. UI Widgets Typical Courses of Events Alternative Courses of Events Exceptional Courses of Events Window-1, Window-2 (A) : 사용자, (S) : 시스템 1. (A) Window-1 의저장하기버튼 (B) 클릭 2. (S) 파일의경로를입력받는 Window-2 를출력 3. (A) Window-2 의 (A) 에저장할경로입력 4. (S) picture 를파일로출력 Line 3. 파일의이름이중복되면경고후재입력을요청

5 Activity Design Real Use Case Use Case Actors Purpose Overview Type Cross Reference R2.1.1 브러시 사용자 컷위에자유선을그린다 사용자가브러시버튼을누르면마우스포인터가점으로표시된다. 마우스왼쪽버튼을누르면그위치에선택된색상과굵기로컷위에점이그려진다. Primary Pre-Requisites Window-1 이활성화되어있어야한다. Project 에 Cut 이하나이상존재해야한다. UI Widgets Typical Courses of Events Alternative Courses of Events Exceptional Courses of Events Window-1 (A) : 사용자, (S) : 시스템 1. (A) Window-1 의브러시버튼 (C) 클릭 2. (S) 마우스포인터를변경 3. (A) 원하는위치에서마우스왼쪽버튼클릭 4. (S) 마우스의좌표를 DrawingTool 로넘기고 Drawing 의 linesize 와 Brush 의 color 를참조하여 Cut 의 picture 를편집 Line 3. 마우스포인터의위치가컷바깥이면입력을무시

6 Activity Design Real Use Case Use Case Actors Purpose Overview Type Cross Reference R2.1.2 지우개 사용자 컷상의이미지를지운다 사용자가지우개버튼을누르면마우스포인터가흰색점으로표시된다. 마우스왼쪽버튼을누르면그위치가선택된영역만큼흰색으로바뀐다. Primary Pre-Requisites Window-1 이활성화되어있어야한다. Project 에 Cut 이하나이상존재해야한다. UI Widgets Typical Courses of Events Alternative Courses of Events Exceptional Courses of Events Window-1 (A) : 사용자, (S) : 시스템 1. (A) Window-1 의지우개버튼 (D) 클릭 2. (S) 마우스포인터를변경 3. (A) 원하는위치에서마우스왼쪽버튼클릭 4. (S) 마우스의좌표를 Eraser 로넘기고 Drawing 의 linesize 를참조하여 Picture 를편집 Line 3. 마우스포인터의위치가컷바깥이면입력을무시

7 Activity Design Real Use Case Use Case Actors Purpose R2.2 굵기조절 사용자 브러시와지우개의적용범위를변경한다 Overview 사용자가원하는굵기의버튼을누르면브러시와지우개가적용되는범위가조절된다. Type Cross Reference Pre-Requisites UI Widgets Typical Courses of Events Alternative Courses of Events Exceptional Courses of Events Primary Window-1 (A) : 사용자, (S) : 시스템 1. (A) 적용할굵기버튼 (N 또는 O) 클릭 2. (S) Drawing 의 linesize 편집

8 Activity Design Real Use Case Use Case Actors Purpose R2.3 색상선택 사용자 브러시와지우개의적용색상을변경한다 Overview 사용자가원하는색상을누르면브러시와지우개에적용되는색상이조절된다. Type Cross Reference Pre-Requisites UI Widgets Typical Courses of Events Alternative Courses of Events Exceptional Courses of Events Primary Window-1 (A) : 사용자, (S) : 시스템 1. (A) 적용할색상버튼 (T) 클릭 2. (S) Brush 의 color 편집

9 Activity Design Real Use Case Use Case Actors R3.1 영역선택 사용자 Purpose 불러온이미지파일에자신이원하는영역을선택한다. Overview 사용자가영역선택버튼을누른후원하는영역을정한다. Type Cross Reference Pre-Requisites UI Widgets Typical Courses of Events Alternative Courses of Events Exceptional Courses of Events Primary Window-1 (A) : 사용자, (S) : 시스템 1. (A) 영역선택요청버튼 (E) 2. (S) 마우스포인터변경 3. (A) 영역의시작점을마우스로클릭 4. (S) Area 의 startx, starty 를클릭한마우스좌표로설정 5. (A) 영역의끝점까지마우스로드래그 6. (S) endx, endy 에현제마우스의좌표로설정. 7. (S) startx,starty,endx,endy 의좌표로선택영역을 (R) 로표시 8. (A) 사용자가드래그를끝냄 9. (S) 선택된영역 (R) 의이미지를 Area 의 picture 으로복사 Line 4. 컷밖으로마우스포인터이동불가

10 Activity Design Real Use Case Use Case Actors R3.2 영역삭제 사용자 Purpose 선택된영역을삭제한다. Overview 사용자가 del 키를누르면선택된영역이지워진다. Type Cross Reference Primary Pre-Requisites 영역이선택되어있어야함. UI Widgets Typical Courses of Events Alternative Courses of Events Exceptional Courses of Events Window-1 (A) : 사용자, (S) : 시스템 1. (A) 영역선택후버튼 (F) 를누름 2. (S) 선택영역 (R) 이지워지고하얀공백이생김. 3. (S) 선택영역이해제됨.

11 Activity Design Real Use Case Use Case Actors R3.3 영역크기조절 사용자 Purpose 선택된영역의크기를조절한다. Overview 사용자가선택된영역의가장자리를드래그해서크기를조절함. Type Cross Reference Primary Pre-Requisites 영역이선택되어있어야함. UI Widgets Typical Courses of Events Alternative Courses of Events Window-1 (A) : 사용자, (S) : 시스템 1. (A) 선택된영역 (R) 의가장자리위에마우스가올라감. 2. (S) 마우스포인터를양쪽화살표로변경 3. (A) 마우스를드래그함 4. (S) Area 의 startx,starty,endx,endy 가바뀌고선택영역의테두리가바뀜. 5. (A) 마우스의드래그가끝남 6. (S) Area 에 picture 가선택영역만큼늘어나거나줄어듬. 7. (S) 컷 (Q) 의 picture 에 (R) 의그림이덮어씌워짐 Exceptional Courses of Events Line 4 선택영역 (R) 의이미지와컷 (Q) 의이미지는바뀌지않음. Line 6. 4 에서선택영역을줄였으면그차이만큼이공백이됨. Line 6. 4 에서선택영역이늘어나면늘어난크기에비례해서선택영역이확대됨

12 Activity Design Real Use Case Use Case Actors R3.4 영역이동 사용자 Purpose 선택된영역을이동한다. Overview 사용자가선택된영역의가운데를드래그해서위치를이동함. Type Cross Reference Primary Pre-Requisites 영역이선택되어있어야함. UI Widgets Typical Courses of Events Alternative Courses of Events Window-1 (A) : 사용자, (S) : 시스템 1. (A) 사용자가선택된영역의가운데를마우스로클릭 2. (S) 마우스커서를 4 방향화살표로변경 3. (A) 사용자가마우스를클릭한채로선택영역을드래그 4. (S) 마우스를따라 (R) 의크기를유지한체 startx,starty,endx,endy 의값이바뀜. 5. (A) 드래그가끝남. 6. (S) 컷 (Q) 의 pirture 에 (R) 의 pirture 가덮어씌워점 Exceptional Courses of Events Line4 드래그가끝나기전까지 (Q) 나 (R) 의이미지변경은없음.

13 Activity Design Real Use Case Use Case Actors R3.5 영역잘라내기 사용자 Purpose 선택된영역을클립보드에저장하고선택된영역은지워진다. Overview 사용자가영역잘라내기를하면선택된영역이지워지고클립보드에복사된다. Type Cross Reference Primary Pre-Requisites 영역이선택되어있어야한다. UI Widgets Typical Courses of Events Alternative Courses of Events Exceptional Courses of Events Window-1 (A) : 사용자, (S) : 시스템 1. (A) 영역잘라내기버튼 (G) 를누름 2. (S) 선택된영역을클립보드에복사 3. (S) 선택된영역삭제

14 Activity Design Real Use Case Use Case Actors R3.6 영역복사하기 사용자 Purpose 선택된영역을클립보드에저장한다. Overview 사용자가영역복사하기를하면선택된영역이클립보드에복사된다. Type Cross Reference Primary Pre-Requisites 영역이선택되어있어야한다. UI Widgets Typical Courses of Events Alternative Courses of Events Exceptional Courses of Events Window-1 (A) : 사용자, (S) : 시스템 1. (A) 영역복사버튼 (H) 를누름 2. (S) 선택된영역을클립보드에복사

15 Activity Design Real Use Case Use Case Actors R3.7 영역붙여넣기 사용자 Purpose 클립보드에저장된이미지를붙여넣음. Overview 사용자가붙여넣기를누르면클립보드에저장된이미지가화면에복사됨. Type Cross Reference Primary Pre-Requisites 클립보드에저장된이미지가있어야함. UI Widgets Typical Courses of Events Alternative Courses of Events Exceptional Courses of Events Window-1 (A) : 사용자, (S) : 시스템 1. (A) 영역붙여넣기버튼 (I) 를누름 2. (S) 기존의영역설정해제 3. (S)(Q) 의최좌측상단에클립보드의이미지크기만큼영역 (R) 을생성 4. (S)(R) 의 pirture 에클립보드의이미지를복사함. Line 2. 저장된이미지가컷보다크면영역크기조절을통해컷최대크기로조절

16 Activity Design Real Use Case Use Case Actors R3.8 문자입력 사용자 Purpose 선택된영역에문자를입력한다. Overview 사용자가문자입력을선택하면문자를입력할수있다. Type Cross Reference Primary Pre-Requisites 영역이선택되어있어야한다. UI Widgets Typical Courses of Events Alternative Courses of Events Window-1 (A) : 사용자, (S) : 시스템 1. (A) 문자입력버튼 (J) 을누름 2. (S)(R) 이문자입력영역이되며좌측상단에커서가생김 3. (A) 사용자가문자를입력 4. (S)(R) 에사용자가입력한문자를차례대로출력 Exceptional Courses of Events Line 5. 문자를입력하다영역의가로크기를넘어가면자동으로줄이넘어감. Line 5. 문자를입력하다영역의세로크기를넘어가면영역이모자란크기에맞춰늘어남. Line 5. 영역이늘어나다가컷크기를넘어가게되면문자가입력되지않음. Line 6. 사용자가입력없이영역을해제하면문자입력을취소

17 Activity Design Real Use Case Use Case Actors Purpose Overview Type Cross Reference R4.1 컷전환하기 사용자 다른컷으로이동한다 사용자가다른컷의번호를클릭하면컷이전환된다 Primary Pre-Requisites Window-1 이활성화되어있어야한다. Project 에 Cut 이둘이상존재해야한다. UI Widgets Typical Courses of Events Alternative Courses of Events Exceptional Courses of Events Window-1 (A) : 사용자, (S) : 시스템 1. (A) Window-1 의영역 P 에있는 Cut 들중에이동하고자하는탭을클릭 2. (S) 클릭한컷의 cutstat 이 TRUE 일경우현상태유지 3. (S) 클릭한컷의 cutstat 이 FALSE 일경우현재 TRUE 인컷의 cutstat 을 FALSE 로전환 4. (S) 사용자가클릭한컷의 cutstat 을 TRUE 로전환

18 Activity Design Real Use Case Use Case Actors R4.2 컷추가하기 사용자 Purpose 새로운컷을추가한다. Overview 컷추가버튼을클릭하여탭형식으로새로운컷을생성한다. Type Cross Reference Primary Pre-Requisites Window-1 이활성화되어있어야한다. UI Widgets Typical Courses of Events Alternative Courses of Events Exceptional Courses of Events Window-1 (A) : 사용자, (S) : 시스템 1. (A) 컷추가버튼 (K 버튼 ) 클릭 2. (S) 현재가장마지막컷의 cutnum 확인 3. (S) cutnum+1 번컷을생성 4. (S) P 영역에탭이추가된후 cutstat 을 TRUE 로전환

19 Activity Design Real Use Case Use Case Actors R4.3 컷삭제하기 사용자 Purpose 현재활성화된컷을삭제한다. Overview 컷삭제버튼을클릭하여현재활성화된컷탭을삭제한다. Type Cross Reference Primary Pre-Requisites Window-1 이활성화되어있어야한다. Project 에 Cut 이하나이상존재해야한다. UI Widgets Typical Courses of Events Alternative Courses of Events Exceptional Courses of Events Window-1 (A) : 사용자, (S) : 시스템 1. (A) 컷삭제버튼 (L 버튼 ) 클릭 2. (S) 현재 cutstat 이 TRUE 인컷을삭제 3. (S) P 영역의현재컷탭삭제 4. (S) 삭제한컷의 cutnum 보다뒤에있는컷의 cutnum 을 1 씩감소

20 Activity Design Real Use Case Use Case Actors R4.4 컷크기조절 사용자 Purpose 현재활성화된컷의크기를조절한다. Overview 컷의모서리에있는크기조절포인트를클릭하여컷을확대 / 축소한다. Type Cross Reference Primary Pre-Requisites Window-1 이활성화되어있어야한다. Project 에 Cut 이하나이상존재해야한다. UI Widgets Typical Courses of Events Alternative Courses of Events Exceptional Courses of Events Window-1 (A) : 사용자, (S) : 시스템 1. (A) 컷의모서리에있는크기조절포인트 (S) 를클릭 2. (A) 마우스를드래그하여크기를조절후마우스를놓음 3. (S) 현재까지조절된크기를 width( 가로 ) 와 height( 세로 ) 에저장 4. (S) 컷크기와이미지크기를비교 Line 4. 컷크기가이미지크기보다작아질경우 R3.3 을이용해이미지의크기를조절

21 Activity Design Real Use Case Use Case Actors R4.5 컷합치기 사용자 Purpose 모든컷들을합쳐서새로운컷으로만든다. Overview 컷합치기버튼을클릭하면현재까지작성된컷들을하나로합쳐새로운컷을만든다. Type Primary Cross Reference R4.2, R3.1, R3.6, R3.7 Pre-Requisites Window-1 이활성화되어있어야한다. Project 에 Cut 이하나이상존재해야한다. UI Widgets Typical Courses of Events Alternative Courses of Events Exceptional Courses of Events Window-1 (A) : 사용자, (S) : 시스템 1. (A) 컷합치기버튼 (M 버튼 ) 클릭 2. (S) 새로운컷생성 (R4.2) 3. (S) 현재작성되어있는컷마다전체영역선택 (R3.1) 후복사 (R3.6) 4. (S) cutnum 순서대로새로만들어진컷에붙여넣기 (R3.7)

22 Window 1 Activity Define UI A B C D E F G H I J K L M N O Q T R S P

23 Activity Define UI Window 2 A B

24 Activity Refine System Architecture

25 Activity Define Interaction Diagrams Use case 1. 파일불러오기

26 Activity Define Interaction Diagrams Use case 2. 파일저장하기

27 Activity Define Interaction Diagrams Use case 3. 브러시

28 Activity Define Interaction Diagrams Use case 4. 지우개

29 Activity Define Interaction Diagrams Use case 5. 굵기조절

30 Activity Define Interaction Diagrams Use case 6. 색상선택

31 Activity Define Interaction Diagrams Use case 7. 영역선택

32 Activity Define Interaction Diagrams Use case 8. 영역삭제

33 Activity Define Interaction Diagrams Use case 9. 영역크기조절

34 Activity Define Interaction Diagrams Use case 10. 영역이동

35 Activity Define Interaction Diagrams Use case 11. 영역잘라내기

36 Activity Define Interaction Diagrams Use case 12. 영역복사하기

37 Activity Define Interaction Diagrams Use case 13. 영역붙여넣기

38 Activity Define Interaction Diagrams Use case 14. 문자입력

39 Activity Define Interaction Diagrams Use case 15. 컷전환하기

40 Activity Define Interaction Diagrams Use case 16. 컷추가하기

41 Activity Define Interaction Diagrams Use case 17. 컷삭제하기

42 Activity Define Interaction Diagrams Use case 18. 컷크기조절

43 Activity Define Interaction Diagrams Use case 19. 컷합치기

44 Activity Define Design Class Diagrams