화면 설계서

· 개발자와 디자이너가 최종적으로 참고하는 설계 산출 문서이다.

1. 화면 설계 도구

카카오 오븐 https://ovenapp.io/

 

OvenApp.io

Oven(오븐)은 HTML5 기반의 무료 웹/앱 프로토타이핑 툴입니다. (카카오 제공)

ovenapp.io

2. 주의할 점

· 반복되는 부분(header, footer)은 한번만 설명한다.

· '버튼이 있다.' 같이 바로 보이는 부분 말고 '~로 이동한다./~창이 보여진다.' 같은 부분을 자세히 설명해야한다.

· 개발자가 화면설계서만 보고 개발할 수 있게 상세히 작성해야한다.

3. 예시

회원가입 화면설계
게시판 화면설계

 

유스케이스 정의서

· 유스케이스 다이어그램에서 정의된 유스케이스 별로 액터로부터 시작하여 시스템 범위 내에 있는 특정 기능(functionality)을 수행하는 일련의 작업흐름(일련의 사건) 또는 트랜잭션의 순차적인 흐름을 기술한 것

 

1. 유스케이스 다이어그램

유스케이스 다이어그램

1) 의존 관계

- include : 포함관계

아이디 중복검사를 해야만 회원가입을 할 수 있다.

- extend :  선택적 수행, 확장 가능

글을 등록할 때 파일을 첨부할 수 도 있다.

 

 

2. 유스케이스 

· 주 시나리오는 무조건 '사용자', '시스템' 순서로 진행되어야 한다.

· '시스템'은 연속으로 진행될 수 있다.

· 부 시나리오는 매번 존재한다.

· '시스템'은 '출력 후 요청한다.' 같이 쓸 수 없고 '~를 출력한다.'로 끝나야 한다. 

· '페이징 기능'은 사용자가 하는 일이 아니기 때문에 유스케이스가 아니다.

 

1) 로그인 유스케이스

유스케이스ID  UC_BRD_004
사전 조건  회원가입이 되어있어야 한다.
주 시나리오  1. 사용자는 ID와 비밀번호를 입력하고 로그인을 요청한다.
 2. 시스템은 입력된 ID와 비밀번호로 사용자 등록 여부를 확인하고 로그인 처리한다.
부 시나리오  [인증정보가 없는 경우]
 1. 사용자는 존재하지 않는 로그인정보를 입력한다.
 2. 시스템은 “회원정보가 없습니다.”라는 메시지를 보여준다.

 

2) 게시글 검색 유스케이스

유스케이스ID  UC_BRD_009
사전 조건  
주 시나리오  1. 사용자는 게시글 목록에서 제목 또는 작성자명으로 검색 옵션 선택과 원하는 단어를 입력하고
    검색을 요청한다.

 2. 시스템은 입력한 조건에 해당하는 게시글을 검색하여 보여준다.
부 시나리오  [검색 조건에 해당하는 게시물이 없을 경우]
 1. 사용자는 원하는 단어 입력 후 검색을 요청한다.
 2. 시스템은 “검색 결과가 없습니다.”라는 메시지를 보여준다.
 [검색 키워드를 입력하지 않고 검색했을 경우]
 1. 사용자는 검색 키워드를 입력하지 않고 검색을 요청한다.
 2. 시스템은 “검색어를 입력해주세요.”라는 메시지를 보여준다.

 

 

3. 시퀀스 다이어그램

· 어떠한 순서로 어떤 객체들과 어떻게 상호작용했는지를 표현하는 다이어그램

· 요청하면 반드시 응답이 와야 한다.

로그인 시퀀스 다이어그램 / 게시글 검색 시퀀스 다이어그램

 

‖ 버튼 2개 나란히 가운데 정렬하기

 

1. <div>로 정렬 할 버튼을 감싼다.

2. <div>에 text-align: center로 중앙정렬 한다.

3. 버튼에 inline-block 속성을 준다. 

 

html

<div class="find-btn">
    <button type="button" class="btn btn-navy navbar-btn find-btn1" onclick="location.href='/login'">로그인</button>
    <button type="button" class="btn btn-grey navbar-btn find-btn1" onclick="location.href='/findIdPw'">비밀번호 재설정</button>
</div>

 

css

.find-btn{
	text-align: center;
}
.find-btn1{
	display :inline-block;
}

 

결과

 요구사항 정의서 

· 말 그대로 요구사항이 정의된 문서이다.

 

1. 구성

1) 문서번호

     - RDF(Resource Description Framework) : 웹상의 자원의 정보를 표현하기 위한 규격

2 ) 요구사항 ID 

      - 유일한 ID를 부여해야 한다.

      - FR : 기능 / NFR : 비기능 

3) 요구사항명 : 요구사항을 요약할 수 있는 명칭을 기입한다.

4 ) 요구사항 내용

      - "세션 값을 할당한다.", "메시지 창을 보여준다." 등 구체적인 내용은 정의서에서 작성하는 게 아니다.

      - "로그인을 한다.", "회원가입을 한다."와 같이 간단하게 작성한다. 

 

요구사항 정의서

 

더보기

개발자로 입사하고 첫 과제가 주어졌다.

단순히 "게시판 만들기!"가 아니라 요구사항 정의부터 개발까지 단계별로 해나가는 과제다.

솔직히 문서작성(?)하는 거 너무 지루해하고 실제 잘 못하기도 해서 걱정을 했다..(실제로 지금도 걱정하면서 하는 중이다..^^)

완벽하다고 할 수는 없지만 그래도 쓰면서 어떻게 작성해야 하는 건지 대충 이해가 됐다.

얼른 개발을 시작하고 싶다..

+ Recent posts