[가계부 프로젝트 - Java] 화면 설계 - pc버젼

프로젝트/가계부(2)  2015.01.23 01:27
안녕하세요 명월입니다.
이번 포스팅에서는 UI - 화면설계를 해 보겠습니다.
개발하는 방법에 대해서는 여러가지 방법이 있습니다. 부품 별로 개발을 하고 한번에 붙이는 작업부터 저의 경우처럼 화면설계부터 진행하는 방법 등등 여러 방법이 있다고 생각됩니다.
저도 예전부터 이런저런 방법으로 개발을 해보았지만 가장 효과적이었던건 화면 개발 후 DB설계, 상세설계 순으로 일을 하는 경우가 제일 빠르게 작업을 하는 것 같습니다. 사람마다 각자의 방식이 있기에 굳히 제 방법이 옳다는 건 아니니 각자의 스타일의 맞는 개발방법을 찾는게 중요할 것 같네요..
블로그에서 작업하는 프로젝트들은 기본적으로 돈을 받고 작업을 하는 게 아니기 때문에 도큐멘트는 다 생략하겠습니다. 뭐 결제 받을 것도 아니고 개인적으로 공부 겸 정보공유식으로 하는 개발이라 자유롭게 하겠습니다.
화면 설계에 앞서 간단하게 화면설계에 도움이 되는 툴을 소개 하겠습니다. 툴로 따지면 여러 좋은 툴이 많이 있다고 생각하는데 그래도 일단 가장 보편적인게 드림위버가 아닌가 싶네요. 그러나 저는 드림위버를 써 본 적 없네요.. 다들 드림위버가 좋다고 해서 소개는 하는데 저는 에디트 플러스로 그냥 짜는 편입니다. 그게 제일 빠르더라구요.. 가끔식 Css에서 모르는 부분이 있으면 웹 툴에서 F12눌러서 수정하는 방식을 고집합니다.

화면설계는 말이 설계라고 표현을 해서 거창할지는 모르겠지만 간단하게 설명하면 가계부프로젝트를 앞으로 진행하기 위해서 만드는 HTML 태그라고 생각하면 좋을 듯 싶습니다.
일단 기존에 만든 프로그램이 있기에 소스 보기로 쭉 긁어보도록 하겠습니다.

로그인 화면입니다.



(소스는 별도 첨부하니 다운로드 하셔서 확인해 주세요)

메인 화면입니다.


카테고리 설정화면입니다.


카테고리 화면은 Jquery UI를 써서 만들었습니다. 이 부분은 별도 포스팅 작업으로 올려놓겠습니다.
여기까지 기본 화면설계가 완료가 되었습니다.


화면 설계는 코딩이 필요없는 html 작업 만으로 화면을 만듭니다... 실제 작업을 하게 되면 화면설계할 때 의외로 실제 코딩보다 시간을 많이 사용하게 됩니다. 유저가 확인을 하는 화면이니 만큼 세심한 부분도 체크를 해야하는 것도 있고 일반 코딩 같은 경우는 반복작업등은 알고리즘등으로 커버할 수 있지만 html 작업은 일일히 수작업이기 때문에 시간이 많이 걸립니다. 저의 경우는 에디터 플러스를 써서 그런면도 없지 않아 있지만 가능하다면 화면설계를 도와주는 프로그램을 사용하는 것도 괜찮을 듯 싶네요…( 좋은 거 있으면 추천해 주세요..)
좀 더 디테일한 부분은 코딩을 하면서 고쳐나가 보도록 합시다.

오늘은 여기까지 입니다.


Html-kr.zip

댓글 0개가 달렸습니다.
댓글쓰기