소프트웨어 공학 (Software Engineering ) 상세 설계와 UI 설계 문양세 강원대학교 IT 대학 컴퓨터과학전공

1. 소프트웨어 공학 (Software Engineering) 상세 설계와 UI 설계 문양세 강원대학교 IT대학 컴퓨터과학전공

2. 아케텍처설계와 모듈 설계 상세설계와 UI 설계 아키텍처 설계는 시스템 전체의 구조를 설계하는 개념적 모델링 모듈 설계는 구체적인 컴포넌트 내부 설계

3. We are now … 상세설계와 UI 설계 모듈 내부 설계 클래스 설계 사용자 인터페이스 설계 데이터 설계

4. 알고리즘(프로그램) 설계 (1/2) 상세설계와 UI 설계 • 프로그램을 작성하기 이전에 알고리즘 작성은 필수 요건이다. • 모듈 명세서: 알고리즘은 모듈의 명세서에 해당한다. • 모듈의 세부처리 기능을 기술한 내역 • 시스템 구조도의 박스에 표현되지 않은 자세한 알고리즘을 기술 • 모듈의 내부 자료에 대한 설명을 포함 • 프로그램 구조도와 함께 시스템의 동작 상태를 예측할 수 있는 근거 제공 Module 소수 확인(숫자, 결과) 내부자료: .... 처리기능: 숫자보다 작은 이미 구한 모든 소수로 나누어 나머지가 0이 아니면 결과는 소수이다. 숫자 결과 소수확인

5. 알고리즘(프로그램) 설계 (2/2) 상세설계와 UI 설계 • 상세 설계의 표현 • 설계의 표현과 코딩이 용이해야 할 것 • 수행이 가능해야 할 것 • 유지보수가 용이해야 할 것 • 상세 설계의 표현 • 흐름도(flow chart) • N-S 도표(Nassi-Schneiderman Chart)// 나씨-슈나이더 도표 • 의사 코드(pseudo code) • 의사 결정표(decision table) • 의사 결정도(decision diagram) • PDL(Program Design Language) • 상태천이도(state transition diagram) • 행위도(action diagram)

6. 알고리즘의 선택 기준 (1/4) 상세설계와 UI 설계 • 정확성 • 모듈이 정확하게 수행되지 않는 조건을 점검 • 예: 음수, 0, 경계 값 입력  예외 조건에 대해서 잘 처리해야 함 • 재사용  증명된 알고리즘을 활용하고, 이미 있는 모듈은 그냥 가져다 쓴다. • 효율성 • 기억 공간 최소화  최근 들어서는 일반적으로 큰 문제가 되지는 않는다. • 처리 소요 시간 최소화 • 예: 1에서 N까지의 합 <방법 1> SeriesSum = 0 for Counter = 1 to N do SeriesSum = SeriesSum + Counter write "The sum is", SeriesSum <방법 2> SeriesSum = (1.0 + N)*(N/2.0) write "The sum is", SeriesSum

7. 알고리즘의 선택 기준 (2/4) 상세설계와 UI 설계 효율성 (계속) 복잡도가 높은 경우(N3이상, 특히 exponential인 경우) 휴리스틱을 많이 사용함 대표적 휴리스틱 방법: Greedy Algorithm

8. 56 73 89 94 115 62 32 108 49 51 알고리즘의 선택 기준 (3/4) 상세설계와 UI 설계 외판원 문제(TSP: Traveling Salesman Problem) • 문제 정의 • N개의 도시(C1, C2, … CN)와 두 도시 i와 j 사이의 거리 dij가 주어졌을 때, 모든 도시를 한번씩 방문해야 하는 외판원이 다리 품을 가장 적게 파는 경로(shortest tour)는? • 경로의 가짓수 계산 • 첫 번째 도시를 선택할 수 있는 가짓수: N가지 • 두 번째 도시를 선택할 수 있는 가짓수: (N-1)가지 • …  경로의 가짓수 = N(N-1)(N-2)…(2)(1) = N! • TSP를 풀기 위해 얼마나 걸리는가? • 하나의 경로 계산을 위해 1 ns가 걸린다고 가정 (1 GHz  1 flop/1 ns) • N=10: 3,628,800 ns = 0.0036288 sec. • N=50: 3.02 x 1064 ns = 3.02 x 1055 seconds = 3.50 x 1050 days = 9.59 x 1047 years  해결할 수 있는 방법은? (Refer to http://www.tsp.gatech.edu//index.html)

9. 알고리즘의 선택 기준 (4/4) 상세설계와 UI 설계 • 적합성 • 알고리즘이 주어진 문제를 정확히 기술하였는가? • Machine processible specification • 입력은 sequential file인데, 알고리즘은 random access file을 가정하면 되겠나요?

10. 알고리즘 표현 – 흐름도(or 순서도) 상세설계와 UI 설계 • 표현하기 쉽다. • BUT, 제어 흐름이 구조적이 되지 못해서 코드가 엉키는, 이른바 스파게티 코드가 되기 쉽다. • 현재는 거의 사용하지 않는다.

11. 알고리즘 표현 – 의사 코드 (1/4) 상세설계와 UI 설계 일반적으로 가장 많이 사용하는 방법이다. “자바로 쓴 알고리즘”, “C로 쓴 알고리즘”, “Pascal로 쓴 알고리즘” 등이 이 범주에 해당한다고 볼 수 있다. 모듈의 입출력 자료, 내부 자료, 수행 절차 등을 알고리즘의 형태로 기술 실제 프로그램과 유사하나 특정 프로그래밍 언어에는 독립적임 전문적 용어의 사용은 가능하지만 프로그래머의 고유한 스타일이나 특성이 무시될 수 있음 의사 코드를 쓰는 방식이 다를 수 있으므로 한 프로젝트 안에서 표준을 만들 필요가 있음

12. 알고리즘 표현 – 의사 코드 (2/4) 상세설계와 UI 설계 요구 분석에서의 구조적 언어(소단위 명세서)vs. 의사 코드

13. 알고리즘 표현 – 의사 코드 (3/4) 상세설계와 UI 설계 의사 코드 사례 고용자 레코드 = 급여형태 + 성명 + 주간근무시간 급여형태 = [1|2|3] 고용자레코드 주급총액 주급계산 Module주급계산(고용자 레코드; 주급총액) Assume 급여형태 = {1, 2, 3} 0<주간 근무 시간<100 End Assume Define Rate: Real /* 시간 당 급료 */ End Define If (급여형태=1) Then Rate=4.2 Elseif (급여 형태=2) Then Rate=6.0 Else Rate=9.0 Endif Select Using (주간근무시간) From Case (1-40): 주급총액=주간근무시간*Rate Case (41-50): 주급총액=(주간근무시간*Rate)*0.5 Case (51-99): 주급총액=(주간근무시간*Rate)*1.0 Endselect End Module

14. 알고리즘 표현 – 의사 코드 (4/4) 상세설계와 UI 설계 A Real Example (extracted from Numerical Analysis course) proceduregauss-jordan(aij, bi: real numbers, n: integer) { aij are coefficients. (1 i,j n)} { bi are results. (1 i n)} { n is # of variables. (we assume that # of variables = # of equations.} k := 1; while (k n)begin i := 1; while (i n)begin j := k+1; c := aik/akk; while (j n)begin ifi = kthenaij := aij, bi := bi; {actually, this line is not required.} elseif (i k) and (j = k) thenaij := 0; else if (i k) and(j> k) then aij := aij – cakj; j := j + 1; end if ik then bi := bi – cbk; i := i + 1; end k := k + 1; end

15. 알고리즘 표현 – NS 도표 (1/4) 상세설계와 UI 설계 논리 기술의 기본 형태인 순차, 선택, 반복을 박스로 표현 a. 순차 b. 선택(if-then-else) Decision action A F T action B action B action A c. 선택(if-then) d. 다중선택(case) Selector T Decision F Value 1 Value 2 Value 4 Value 5 Value 3 action A action D action E action B action C action A e. 반복(while) f. 반복(repeat-until) Condition action A action A Condition

16. 알고리즘 표현 – NS 도표 (2/4) 상세설계와 UI 설계 • NS 도표의 표현 규칙 • 도표는 항상 사각형 • 도표의 제어 흐름은 위에서 아래로 • 수평으로 그어진 줄은 항상 평행 • 빈 박스 – null statement • 모든 사각형은 다시 하나의 NS 도표

17. While there are records in the correspondence file Read next correspondence Check general format T F Errors Write error message Transaction type Cancellation Other New subscription Renewal Pull sibactiber’s record Pull sibactiber’s record Call Handle New Subscription Print error message Calculate amount of refund Update expire date Call update Account Call update Account 알고리즘 표현 – NS 도표 (3/4) 상세설계와 UI 설계 NS 도표의 예 (잡지 구독 시스템의 구독 레코드 처리)

18. 알고리즘 표현 – NS 도표 (4/4) 상세설계와 UI 설계 • NS 도표의 장점 • 구조적 프로그램 • 배우기 쉽고, 읽기 쉬우며 원시 코드로 전환이 쉬움 • 프로그램의 구조를 쉽게 파악할 수 있다 • 프로그램의 복잡도, 제어구조를 한 눈에 볼 수 있다. • NS 도표의 단점 • 도표를 그려야 하는 불편함 • 수정이 용이하지 않음

19. 알고리즘 표현 – 의사 결정표(Decision Table) 상세설계와 UI 설계 <예> 근속년수 연봉 저축허용비율 직원저축정책 1년 미만 $20,000 미만 → 5% $20,000 이상 → 4% 1년 이상 $30,000 미만 → 6% $30,000 이상 → 5% • 의사 결정표 근속연수 1년 미만 1년 이상 1년 미만 1년 이상 연봉(천$) <20 >=20 <30 >=30 허용비(%) 5 4 6 5

20. We are now … 상세설계와 UI 설계 모듈 내부 설계 클래스 설계 사용자 인터페이스 설계 데이터 설계

21. 클래스 설계란? 상세설계와 UI 설계 • 클래스 내부 부분 중 구현에 필요한 중요한 사항을 결정하는 작업 • 클래스의 서비스 인터페이스에 대한 정확한 정의 • 메소드 내부의 로직(알고리즘) • 주요 설계 내용 • 클래스 서비스 정의 • 클래스 상태 모델링 • 클래스 재사용

22. 클래스 서비스 정의 상세설계와 UI 설계 서비스는 오퍼레이션, 매개변수, 타입, 예외 사항을 포함한 클래스 인터페이스로 정의함 서비스 인터페이스를 일명 API(Application Program Interface)라 부름 인터페이스, 매개변수 등에중점을 두어 설계

23. 클래스 상태 모델링 상세설계와 UI 설계 알고리즘 설계 이외에 오퍼레이션 사이의 관계, 여러 오퍼레이션간의 상호작용을 이해하여야 함 오토마타, 즉 상태 변환을 나타내는 다이어그램을 그림

24. 클래스 재사용 상세설계와 UI 설계 1. 프레임워크 • 재사용 가능한 부분적인 응용 프로그램 • 라이브러리와 달리, 자료처리 혹은 이동통신 등의 응용 도메인을 목표로 함 2. 재구성 • 프레임워크 클래스를 솔루션에 맞게 적용한 후, 목표 시스템에 맞도록 재구성 • 연관관계 구현, 상속 재검토 등을 통해 재사용도를 높임 3. 최적화 • 재사용에 의한 비효율 제거을 위해 응용을 고려한 최적화 수행 • 설계 목표(반응시간, 실행시간, 기억공간 최소화 등) 달성을 위한 최적화

25. We are now … 상세설계와 UI 설계 모듈 내부 설계 클래스 설계 사용자 인터페이스 설계 데이터 설계

26. 사용자 인터페이스 (User Interface) 상세설계와 UI 설계 • 사용자 인터페이스의 중요성 • 초기의 컴퓨터: 알고리즘이 중요 (계산 자체가 중요) • 최근의 컴퓨터: 사용자의 입장이 중요 (이쁘게 보여야~) • 사용자 인터페이스의 평가 기준 • 배우기 쉬워야 • 반응 속도가 빨라야 • 사용 중 오류가 발생하지 않아야 • 다수의 사용자가 만족할 수 있어야 • 사용법이 유지되어야 (한번 써보면, 다음에 더 쉽고, 그 다음에 더 쉽고…)

27. 사용자 인터페이스 예제 (1/5) 상세설계와 UI 설계

28. 사용자 인터페이스 예제 (2/5) 상세설계와 UI 설계

29. 사용자 인터페이스 예제 (3/5) 상세설계와 UI 설계

30. 사용자 인터페이스 예제 (4/5) 상세설계와 UI 설계

31. 사용자 인터페이스 예제 (5/5) 상세설계와 UI 설계

32. 사용자 분석 상세설계와 UI 설계 • 시스템의 최종 사용자에 대한 지식 • 나이, 인원, 성별? • 컴퓨터에 대한 기본 지식, 동기 • 사용자의 부류(초보자, 능숙하지 못한 사용자, 전문가) • 다양한 사용자 부류  일반적인 소프트웨어 (게임, 워드 프로세서, …)

33. 대화설계 원리 (1/2) 상세설계와 UI 설계 사용자와 시스템 간의 대화 설계에서 따라야 하는 원칙… • 일관성이 유지되어야 한다 • 용어, 문법, 화면설계 • 메뉴, 시스템 메시지, 설명서에 같은 의미와 용어 • 오류 메시지 • 익숙한 사용자에게는 지름길을(Hot Key 제공) • 사용자에게 유익한 정보는 피드백(feedback)시킨다 • 잘못했으면 겸손한 정정을, 잘했으면 칭찬을… • 대화의 종결을 표시하도록 설계한다 진행 중인 단계인지, 종료 단계인지…

34. 대화설계 원리 (2/2) 상세설계와 UI 설계 단순한 오류를 처리하는 기능 Undo/Redo 기능 제공 시스템에 지시한 것을 바꾸기 쉽도록 브라우저에서 다른 사이트로 갔다가 “뒤로” … 사용자 중심의 상호작용이 되도록 설계  사용자는 자신이 중심이 되어 도구를 사용하고 있다는 느낌을 가져야 화면의 내용을 너무 복잡하지 않게 무엇이든 복잡하면 일반인의 외면을 받는다(매니아 빼고…) Niche market을 형성한 실버폰이 좋은 예임

35. 메뉴 선택 (1/2) 상세설계와 UI 설계 • 초급이나 중급 사용자에게 적합 • 메뉴의 구조, 동작, 배치를 고려 • 계층구조 (hierarchical structure) • 선형구조 (linear structure) • 네트워크 구조 (network structure) • 메뉴 항목의 분류가 중요 • 논리적으로 같은 항목은 같은 범주에 • 모든 경우를 포함하여 분류 • 중복된 항목은 피한다 • 익숙하지 않은 항목은 피한다 • 메뉴의 종류 • 단일화면 메뉴 • 풀 다운 메뉴 • 고정 메뉴

36. 메뉴 선택 (2/2) 상세설계와 UI 설계 풀 다운 메뉴의 예제

37. 양식 채움 (Form Fill) 인터페이스 (1/2) 상세설계와 UI 설계 • 자료 입력에 많이 쓰임 • 자료 항목, 위치, 길이 • 어느 정도의 교육이 필요(중급, 고급 사용자에게 적합) • 화면 설계 • 관련 항목을 모음 • 화면 이름 작성 • 화면의 배치(항목의 순서) • 입력 자료 항목의 길이 • 정렬 • 선택적 항목 • 항목 간의 이동 • 오류의 정정

38. 양식 채움 (Form Fill) 인터페이스 (2/2) 상세설계와 UI 설계 화면 예제 (네이버 가입)

39. 명령어 방식 (1/2) 상세설계와 UI 설계 • 정형적 언어(formal language) • 운영체제, 텍스트 편집기, 모험 게임 등에 자주 사용 • 고급 사용자에 적합 • 화면 설계 • 어휘, 문법규칙, 명령어의 의미를 익혀야 함 • 융통성 있게 창의적으로 시스템에 지시 <예> vi의 명령어 ^F 앞으로 한 화면 전진 ^B 뒤로 한 화면 후퇴 ^D 반 화면 내림 ^U 반 화면 올림 G 정해 준 줄로 커서를 옮김 /pattern pattern과 같은 다음 줄로 커서를 옮김 ?pattern pattern과 같은 바로 전 줄로 커서를 옮김

40. 명령어 방식 (2/2) 상세설계와 UI 설계

41. 명령어 설계 시 주의사항 상세설계와 UI 설계 1. 명령어의 개수를 가능하면 적게 한다. 2. 의미 있고 구별되는 이름을 사용한다. 3. 약어는 일관성 있게 사용한다. 4. 약어가 사용되더라도 명령어가 제대로 작동해야 한다. 5. 문법 구조는 일관성이 있어야 한다. 6. 초보자를 위하여 문법규칙을 프롬프트로 안내한다. 7. 명령어 메뉴는 중급 사용자에게 도움이 된다.

42. 직접 조작 (Direct Manipulation) 상세설계와 UI 설계 • 간략화 된 작업환경을 보여주고 그 속의 객체를 직접 조작 • 아이콘으로 객체가 표현 • 편집기, 비디오 게임, 터치 스크린, 윈도우 시스템 • 마우스나 조이스틱을 사용 • WYSIWYG  What you see is what you get • 설계 시 고려사항 • 아이콘은 이해하기 쉬워야 • 잘못된 유추는 피해야 • 사용자 계층의 관습에 따라 설계 • 아이콘은 알맞은 목적에 사용되어야 • 조화 및 일관성, 배치가 중요  우리가 현재 쓰고 있는 Windows 환경이 이에 해당한다.

43. 화면 설계 시 주의 사항 상세설계와 UI 설계 1. 사용자의 특성을 염두에 둔다 2. 논리적으로 관련 있는 항목은 반전, 글자꼴, 색상으로 구별하기 쉽게 한다. 3. 정보를 조직적으로 표현하기 위하여 다양한 정렬 방식 사용한다. 4. 다중화면의 경우 화면 사이의 일관성이 중요하다.

44. UI 컨트롤 상세설계와 UI 설계

45. We are now … 상세설계와 UI 설계 모듈 내부 설계 클래스 설계 사용자 인터페이스 설계 데이터 설계

46. 7.4 데이터 설계 • 기본적인 저장은 파일 시스템이 제공 • 디렉토리와 파일 • 애플리케이션에서 데이터를 보는 뷰에 맞게 여러 가지 계층을 제공

47. 데이터베이스 설계 단계 (참고) • ERD를 작성 • ERD 초벌 작성 • 데이터 요소를 엔티티에 배정 • MEMBER(MEMBER-NUMBER, NAME, ADDRESS, CITY, ZIP, HOME-PHONE, WORK-PHONE, CREDIT-CARD-CODE, CREDIT-CARD-NUMBER, (VIDEO-ID, TITLE, DATE-RENTED, DATE-RETURNED)) • VIDEO(VIDEO-ID, TITLE) • 모든 테이블을 3차 정규형으로 만듦

48. 데이터베이스 설계 단계 (참고) • M:N의 관계를 1:N으로 바꿈 • MEMBER(MEMBER-NUMBER, NAME, ADDRESS, CITY, ZIP, HOME-PHONE, WORK-PHONE, CREDIT-CARD-CODE, CREDIT-CARD-NUMBER) • VIDEO(VIDEO-ID, TITLE) • RENTAL(MEMBER-NUMBER, VIDEO-ID, DATE-RENTED, DATE-RETURNED)

49. 클래스와 테이블의 매핑(참고) 단순 데이터 구조를 가진 클래스는 테이블로 매핑 객체 식별자는 기본 키 다른 클래스의 인스턴스를 속성으로 가지고 있는 클래스는 그 클래스를 위하여 별도의 테이블을 생성 컨테이너 클래스가 여러 객체를 포함하는 관계에 있을 때 2개의 필드를 가진 별도의 테이블을 생성 M대 N의 관계는 별도의 테이블 1대 1 연관은 외부 키 속성으로 구현

50. 클래스와 테이블의 매핑(참고) 클래스(왼쪽)와 테이블(오른쪽)의 매핑