[Java 웹 개발] 세미 프로젝트 3. 화면 정의서 (UI 설계)

febCho·2024년 1월 20일

Semi-AllCampus

목록 보기
3/6
post-thumbnail

1. 화면 정의서

1-1. 카카오 오븐을 사용한 결과물

https://ovenapp.io/

  1. 카카오 오븐을 활용해 화면 정의서를 작성하였다.
    다음은 내가 작성한 화면 정의서의 일부다.
  • main.jsp
    메인
  • loginForm.jsp
    로그인폼
  • home.jsp
    홈
  • registerForm.jsp
    회원가입
  • sc_detail.jsp
    책방 상세글

1-2. 카카오 오븐의 장단점

1-2-1. 장점

  1. 카카오 오븐은 별다른 인증 없이 메일 주소만으로 간편하게 가입할 수 있다.
  2. 또한 사용 방법이 직관적이고 간편하다. 아래와 같이 원하는 규격의 화면 사이즈를 지정한 뒤, 제공되는 요소/아이콘/효과 등을 이용해 만들고자 하는 화면을 구현하면 된다.
    프로젝트 생성
    카카오 오븐 화면
  3. 아이콘 등으로 구현하기 애매할 경우, 이미지를 첨부해 표시할 수 있다. 그리고 header나 footer와 같이 모든 페이지에 반복적으로 들어가야 하는 UI나 템플릿처럼 여러 번 재사용될 UI는 그룹으로 묶은 다음 보관해 필요할 때마다 불러올 수도 있다.
    이미지
    보관함
  4. 이외에도 별도의 메모를 작성해 추가적인 기능 설명을 할 수도 있고
  5. 페이지를 png/jpg/pdf(메모 포함/미포함)로 저장할 수도 있다.

1-2-2. 단점

  1. 카카오 오븐의 가장 큰 단점은 구글닥스나 스프레드시트처럼 동시 작업이 불가능하다는 점이다.
    이를 해결하기 위해서는 (내가 아는 한) 2가지 방법이 존재한다.

1) 공유 기능 활용
ⓐ 팀원들 각자가 사이즈가 통일된 개별의 프로젝트를 만들어 담당하는 페이지의 화면 정의서를 작성한다.
ⓑ 그 다음 페이지별로 만든 UI 구성요소들을 모두 묶어 그룹화 해둔다.
ⓒ 한 사람이 프로젝트 공유 기능을 통해 팀원들이 만든 개개별의 프로젝트를 사본 떠오기 한다.
ⓓ 그 프로젝트를 하나씩 열어 보관함에 저장한다.
ⓔ 하나의 프로젝트에 보관함에 저장된 UI들을 꺼내어 합친다.
ⓕ 팀원들과의 공유를 원한다면, 다시 그 프로젝트를 공유하여 팀원들이 사본 떠오기를 해 자신의 계정에 카피본을 저장해둔다.
프로젝트 공유

2) 하나의 계정에 동시에 로그인
1번 방법에 비해 훨씬 간단하고 덜 수고스럽지만 치명적인 단점이 있다.
바로 '작업물이 날라갈 수 있다'라는 점이다.
ⓐ 최선의 방법은 '페이지를 미리 할당한 뒤, 상대의 페이지를 절대 건드리지 말고 자신의 페이지만 작업한다'이다.

2. 느낀 점

개인적으로 화면 정의서 작성에 있어서는 아쉬움이 많다. 우리는 1번 방법을 선택했고, 내가 메인/헤더 UI까지 담당했기 때문에 프로젝트를 합치는 역할을 맡았는데 품이 너무 많이 들었다.

포토샵이나 일러스트레이터를 사용하는 것보다는 수월했고, 접근성도 좋은 편이었지만 Beta 버전이다 보니 UI/UX 디자인도 미흡했던 것 같다.

그리고 툴 자체에 대한 아쉬움 외에도 UI를 설계하며 기능 구현적인 측면을 크로스체크했으면 좋았겠다고 생각했다. 테이블 설계와 요구사항 정의서를 번갈아 확인하며 누락된 부분은 없는지, 2D 상의 단편적인 화면에는 다 명시할 수 없는 동작 과정들은 무엇이 있는지 그 흐름들을 함께 체크했다면 실제 UI를 처리할 때 덜 헤맸을 것 같다.

잘한 점은 필요한 페이지들의 jsp 이름을 미리 생각해둔 것, 구현 가능 여부를 철저히 따진 덕에 실제 UI와 화면 정의서가 유사하다는 점이다.

profile
Done is better than perfect.

0개의 댓글