[Java Wep Application] 파이널 프로젝트 Ⅲ. 화면 레이아웃 구성(스토리보드/UI 설계)

목차
1. 관리자 페이지
  1.1 메인 페이지(adminMain.jsp)
  1.2 시터 승인 요청 목록(adminSitRegList.jsp)
  1.3 시터 회원 정보(adminSitList.jsp)
  1.4 부모 회원 정보(adminParList.jsp)
2. 공지사항
  2.1 공지사항 리스트(noticeList.jsp)
  2.2 공지사항 게시물 등록(noticeInsertForm.jsp)
  2.3 공지사항 게시물 수정(noticeUpdateForm.jsp)
  2.4 공지사항 상세 열람(noticeDetail.jsp)
3. 긴급 돌봄
  3.1 부모 회원 메인 페이지 (genMain.jsp)
  3.2 일반 돌봄 1차 필터 결과 (genSearchResult.jsp)
  3.3 일반 돌봄 상세 열람 (genRegDetail.jsp)
  3.4 일반 돌봄 신청 폼 (genReqInsertForm.jsp)
4. 일반 돌봄
  4.1 시터 회원 메인 페이지(emgMain.jsp)
  4.2 긴급 돌봄 요청 리스트 열람(emgReqList.jsp)
  4.3 긴급 돌봄 요청 작성(emgReqWrite.jsp)
  4.4 긴급 돌봄 요청 결제 입력 폼(emgReqInsertForm.jsp)

 

엄밀히 따지면 스토리보드나 화면 정의서는 보다 상세한, 실제 구현되었으면 하는 정보를 담고 있다. 스토리보드를 정밀히 구성했을 때의 장점이 분명 더 크지만, 우리 팀의 경우 페이지 레이아웃을 구성하는 정도로 해당 단계를 진행했다. 다만, 가급적이면 웹 페이지나 구성 엘리먼트를 촘촘히 나누어 생략되는 부분이 없도록 노력했다.

 

또한 화면 레이아웃 구성 시 동일한 Tool 을 사용해 각자의 작업물을 쉽게 공유하고자 했다. 우리가 사용한 Tool은 Miro이며, 대게 브레인 스토밍에 최적화된 Tool이다. 이 부분에 대한 여담도 회고에서 다룰 수 있다면 다뤄보고자 한다.

 

아래는 내가 작업한 웹 페이지의 화면 레이아웃 중 일부이다.

1. 관리자 페이지

1.1 메인 페이지(adminMain.jsp)

관리자 메인 페이지(adminMain.jsp)

1.2 시터 승인 요청 목록(adminSitRegList.jsp)

시터 승인 요청 목록(adminSitRegList.jsp)

1.3 시터 회원 정보(adminSitList.jsp)

시터 회원 정보(adminSitList.jsp)

1.4 부모 회원 정보(adminParList.jsp)

부모 회원 정보(adminParList.jsp)

---

2. 공지사항

2.1 공지사항 리스트(noticeList.jsp)

공지사항 리스트(noticeList.jsp)

2.2 공지사항 게시물 등록(noticeInsertForm.jsp)

공지사항 게시물 등록(noticeInsertForm.jsp)

2.3 공지사항 게시물 수정(noticeUpdateForm.jsp)

공지사항 게시물 수정(noticeUpdateForm.jsp)

2.4 공지사항 상세 열람(noticeDetail.jsp)

공지사항 상세 열람(noticeDetail.jsp)

---

3. 일반 돌봄

일반 돌봄의 경우, 팀원 중 임** 학우, 정** 학우가 작성한 레이아웃이다. (다음 포스팅에서도 언급하겠지만) 페이지 레이아웃 단계까지 내가 담당하기로 한 주 영역은 관리자 페이지였다. 그러나 팀원의 요청으로 정적 페이지 구성 및 동적 기능 구현은 메인 기능(일반 돌봄) 영역을 담당했다.

3.1 부모 회원 메인 페이지 (genMain.jsp)

부모 회원 메인 페이지 (genMain.jsp)

3.2 일반 돌봄 1차 필터 결과 (genSearchResult.jsp)

일반 돌봄 1차 필터 결과 (genSearchResult.jsp)

3.3 일반 돌봄 상세 열람 (genRegDetail.jsp)

일반 돌봄 상세 열람 (genRegDetail.jsp)

3.4 일반 돌봄 신청 폼 (genReqInsertForm.jsp)

일반 돌봄 신청 폼 (genReqInsertForm.jsp)

---

4. 긴급돌봄

긴급 돌봄 영역에 대한 구현은 메인 기능에 해당하는 일반 돌봄 영역에 밀려 현재 레이아웃 작성 및 정적 페이지 구성에 그쳐있는 상태다. 페이지 레이아웃을 내가 구성한 만큼, 틈틈이 이 부분도 동적 기능이 작동하도록 수정해가고 싶다.

4.1 시터 회원 메인 페이지(emgMain.jsp)

시터 회원 메인 페이지(emgMain.jsp)

4.2 긴급 돌봄 요청 리스트 열람(emgReqList.jsp)

긴급 돌봄 요청 리스트 열람(emgReqList.jsp)

4.3 긴급 돌봄 요청 작성(emgReqWrite.jsp)

긴급 돌봄 요청 작성(emgReqWrite.jsp)

4.4 긴급 돌봄 요청 결제 입력 폼(emgReqInsertForm.jsp)

긴급 돌봄 요청 결제 입력 폼(emgReqInsertForm.jsp)