Transcript UI 설계

소프트웨어 공학 응용 및 실습
제 5 장 : 상세 설계
이형원
강릉대학교 컴퓨터공학과
1
학습 내용
프로그램 설계
• pseudo code
• N-S chart
자료구조 설계
사용자 인터페이스 설계
상세 설계서
2
프로그램 설계
모듈 명세서(module spec.)
•
•
•
•
각 모듈의 세부 처리 기능을 기술한 내역
구조도에 표현되지 않은 자세한 알고리즘을 기술
모듈의 내부 자료에 대한 설명을 포함
구조도와 함께 시스템의 동작 상태를 예측할 수 있는 근거
제공
<예>
숫자
결과
소수확인
Module 소수 확인(숫자, 결과)
내부자료: ....
처리기능: 숫자보다 작은 이미 구한
모든 소수로 나누어 나머지가
0이 아니면 결과는 소수이다.
3
알고리즘 선택의 원칙
정확성
• 제공된 자료를 정확히 처리 & 정의된 기능을 정확히 수행
• 테스트와의 상관 관계 : 음수, 0, 경계 값 입력, ...
• 재사용 : 정확성 보장 및 개발 비용과 시간 절약
효율성
• 기억 공간 및 처리 소요 시간
• 예: 1에서 N까지의 합
방법 1: SeriesSum = 0
for Counter = 1 to N do SeriesSum = SeriesSum+Counter
방법 2: SeriesSum = (1.0 + N)*(N/2.0)
적합성
• 구현 PL와의 적합성 (예. 동적/정적 기억장소 할당)
• 목표 시스템과의 적합성 (예. 순차/직접 접근 파일)
4
모듈 명세화 기법
흐름도(flow chart)
N-S 도표(Nassi-Schneiderman Chart)
의사 코드(pseudo code)
의사 결정표(decision table)
의사 결정도(decision diagram)
상태전이도(state transition diagram)
행위도(action diagram)
…..
5
의사 코드
 모듈의 입출력/내부 자료, 수행 절차를 알고리즘 형태로 기술
 실제 프로그램과 유사하나 특정 P.L.에 독립적
 한 프로젝트 안에서 표준을 만들 필요
 구조적 영어와 유사, but 더 구체적 표현
특성
논리 구조
구조적 언어
의사 코드
동일한 논리 구조 사용 : 순차, 선택, 반복
사용 단계
분석 단계
설계 단계
명세 대상
DFD의 functional primitives
구조도의 모든 모듈
명세 방법
사용자 중심
상세 정도
프로세스의 기본적인
기능 수행 절차
프로그래머 중심
모듈의 기본적인 기능
수행 절차 및 세부적 방법
6
의사 코드(계속)
고용자레코드
주급총액
주급계산
모듈 명세서 :
고용자 레코드 = 급여형태 + 성명 + 주간근무시간
급여형태 = [1|2|3]
Module 주급계산(고용자 레코드; 주급총액)
Assume
1<급여형태<3
0<주간 근무 시간<100
EndAssume
Define
Rate: Real /* 시간 당 급료 */
EndDefine
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
EndModule
7
N-S 도표 : 기본 요소
 논리 기술의 기본 형태인 순차, 선택, 반복을 박스로 표현
a. 순차
b. 선택(if-then-else)
Decision
F
T
action A
action B
action A
action B
c. 선택(if-then)
T
Decision
action A
e. 반복(while)
Condition
d. 다중선택(case)
Selector
F
Value 1
Value 2
action A
action B action C action D
Value 3 Value 4
Value 5
action E
f. 반복(repeat-until)
action A
action A
Condition
8
N-S 도표 : 표현 및 해석 규칙
도표는 항상 사각형
도표의 제어 흐름은 항상 맨 위에서 시작
제어 흐름은 위에서 아래로 (반복 구조 제외)
수평으로 그어진 줄은 모두 평행
사각형 안의 내용이 수행되면 아래 방향으로 빠져
나옴
빈 사각형은 null action을 의미
모든 사각형은 다시 하나의 N-S 도표로 간주 가능
9
N-S 도표 : 예
 잡지구독 시스템의 구독 레코드 처리에 대한 N-S 도표
While there are records in the correspondence file
Read next correspondence
Check general format
Errors
T
F
Write error message
Transaction type
New subscription
Renewal
Pull subactiber’s
record
Call Handle
New Subscription Update expire
date
Call update
Account
Cancellation
Pull subactiber’s
record
Calculate amount
of refund
Call update
Account
Other
Print error
message
10
N-S 도표의 장단점
장점
• 배우기 쉽고, 읽기 쉬우며 원시 코드로 전환이 쉬움
• 구조적 프로그램으로의 변환이 용이
• 프로그램의 복잡도 및 제어 구조를 한 눈에 파악
단점
• 도표를 그려야 하는 불편함
• 수정이 용이하지 않음
• 분기 명령을 허용하지 않음
11
자료 구조 설계
자료 구조의 구체적인 설계
<예> 인사기록 마스터
int
Sawon_no;
char Name[10];
int
Depart;
int
Position;
...
자료 구조 설계의 원칙
• 정보은닉 : 중요한 자료구조에 직접 접근하고 변경하는
것을 피함
• 자료 추상화 : 사용자 정의 type을 사용
12
UI 설계 : 개요
사용자 인터페이스의 중요성
• 초기의 SW: 알고리즘이 중요 (batch software)
• 최근의 SW: 사용자의 입장이 중요 (interactive software)
==> 기능 + 사용자 인터페이스
사용자 인터페이스의 평가 기준
1) 배우기 쉬움
2) 속도
3) 사용 중 오류의 빈도
4) 사용자의 만족
5) 사용법의 기억
While reduced cost allows people to buy,
Improved user interface allows people to use.
13
UI 설계 : 사용자 분석
시스템의 최종 사용자에 대한 지식
• 나이, 인원, 컴퓨터에 대한 기본 지식, 능력, 동기
• 사용자의 부류
1) 초보자
– 최소한의 명령어 제공
– feedback이 필요
– 자세한 오류 메시지
2) 능숙하지 못한 사용자
– 명령어, 메뉴, 용어의 일관성
– 파급 효과가 큰 기능(시스템 초기화, 환경 변경)의 사용을 제한
– 도움말 기능
3) 전문가
– 단축키의 제공
– 메시지의 단순화
• 다양한 사용자 부류 : 계층적 메뉴
14
UI 설계 : 대화 설계 원리
일관성
• 메뉴, 시스템 메시지, 설명서에 같은 의미와 용어
in IBM/VM, DELETE, ERASE, PURGE, DISCARD
• 화면 설계
• 오류 메시지 출력 영역
익숙한 사용자에게는 메뉴 선택의 지름길을 제공
사용자에게 유익한 정보는 feedback
• 반응의 형태
메시지 : 오류 메시지(자세히), 일반적 반응 메시지
소리, 대상 객체의 변화, 아이콘의 변화
• 오류 메시지는 모호하거나 사용자를 discourage해서는 안됨
core dumped, beep, invalid data, ….
15
UI 설계 : 대화 설계 원리(계속)
 명령 지시의 정확한 수행 단계
• 명확한 시작, 중간, 종료 단계를 거침
• 지시의 취소
 오류 처리 기능
• undo
• 오류 메시지는 오류 수정 방법을 포함
 지시한 것을 쉽게 변경 가능
• 입력란의 수정
• 메뉴 경로간 이동
 사용자 중심의 상호작용
• easy log-on procedure
• 규칙의 예외가 극소화 예 : 명령어의 option
• file 삭제, 대량의 정보 검색 등에는 사용자에게 confirm
 화면 내용의 단순성
16
UI 설계 : 상호 작용 형태
1. 메뉴 선택
• 초급이나 중급 사용자에게 적합
• 메뉴의 구조, 동작, 배치를 고려: 계층 구조, 선형 구조,
네트워크 구조
• 메뉴 항목의 분류가 중요
논리적으로 같은 항목은 같은 범주에
모든 경우를 포함하여 분류
중복된 항목은 피한다
익숙하지 않은 항목은 피한다
• 메뉴의 종류
단일/다중 화면 메뉴
풀 다운/팝업 메뉴
고정 메뉴
17
UI 설계 : 상호 작용 형태(계속)
2. 양식 채움(form-fill) 인터페이스
•
•
•
•
자료 입력에 많이 쓰임
항목의 배치 및 순서가 중요
어느 정도의 숙련도가 필요 : 중급, 고급 사용자에게 적합
자료 입력 항목의 설계
입력 자료 항목의 길이를 밑줄이나 역상으로 표시
숫자 채움 방식
다중 선택/배타적 선택
항목을 설명해 주는 메시지
커서의 이동 : 마우스 & 키보드
오류의 정정
의미있는 오류 메시지
18
UI 설계 : 상호 작용 형태(계속)
3. 명령어 방식
• 정형적 언어(formal language)
• 운영 체제, 텍스트 편집기
• 고급 사용자에 적합 : 어휘, 문법규칙, 명령어의 의미를
익혀야 함
• 융통성있게 창의적으로 시스템에 지시
<예> vi의 명령어
–
–
–
–
–
–
–
^F
^B
^D
^U
G
/pattern
?pattern
앞으로 한 화면 전진
뒤로 한 화면 후퇴
반 화면 내림
반 화면 올림
정해 준 줄로 커서를 옮김
pattern과 같은 다음 줄로 커서를 옮김
pattern과 같은 바로 전 줄로 커서를 옮김
19
UI 설계 : 상호 작용 형태(계속)
•
명령어 설계 시 주의 사항
1)
2)
3)
4)
5)
6)
7)
명령어의 개수를 가능하면 적게 한다.
의미 있고 구별되는 이름
약자는 일관성 있게 사용
약자가 사용되더라도 명령어가 제대로 작동
문법 구조는 일관성
초보자를 위하여 문법 규칙을 프롬프트로 안내
명령어 메뉴는 중급 사용자에게 도움이 된다.
20
UI 설계 : 상호 작용 형태(계속)
4. 직접 조작
• 간략화된 작업 환경을 보여주고 그 속의 객체를 직접 조작
• 아이콘으로 객체가 표현
• 화면 편집기(WYSIWYG), 게임, 터치 스크린, 윈도우
시스템
• 마우스나 조이스틱을 사용
• 설계시 고려사항
아이콘은 이해하기 쉬워야
잘못된 유추는 피하도록
사용자 계층의 관습에 따라 설계
아이콘은 알맞는 목적에 사용되어야 예. 계산기
다른 인터페이스 요소와의 조화, 일관성, 배치가 중요
21
UI 설계 : 화면 설계 시 주의 사항
1. 사용자의 특성을 염두에 둔다
2. 논리적으로 관련 있는 항목은 빈 줄, 빈 칸,
박스, 강조, 반전, 색상, 글자꼴 등으로
구별하기 쉽게 한다.
3. 정보를 조직적으로 표현하기 위하여 다양한
정렬 방식 사용
4. 다중 화면의 경우 화면사이의 일관성이 중요
5. 여러 가지 다른 배치로 시험
22
상세 설계서 작성
1.
개요
1.1 시스템의 개요
1.2 시스템의 구조
2. 모듈 별 상세 설계
2.1 논리적 절차
2.2 자료 구조와의 관계
3. 자료 설계
3.1 자료 구조(혹은 데이타베이스 설계)
3.2 모든 자료에 대한 구체적인 자료 사전
4. 문제 해결을 위한 프로그래밍 기법
5. 사용자 인터페이스의 설계
6. 시험 계획
6.1 시험 환경 및 기법
6.2 모듈 시험 계획
7. 참고 문헌
23