[1단계] 마이 셀파 웹 앱 1일차. 설계

*본 글은 필자가 진행한 프로젝트 '마이 셀파'의 작업 일기입니다. 재밌게 봐주세요. 위의 pdf도 참고 해주세요! 

프로젝트 제안서.pdf

마이 셀파 리부트 1단계 Spring MVC를 활용한 웹 앱

1일차 작업. 프로젝트 설계

프로젝트 및 포스팅 동기

2018년 2월 대학교를 졸업한 저는 백수 생활 동안 나름 꾸준히 취업 준비와 개발 공부를 꾸준히 진행해왔습니다. 그러던 중 저의 포트폴리오가 굉장히 빈약해보여서 보완할 겸 여태까지 공부해온 기술도 써볼 겸 이번 프로젝트를 진행하게 되었습니다. 이에 대한 저의 하루 하루 작업을 일기 형식으로 프로젝트 경험을 공유해보고 싶어서 포스팅을 시작하게 되었습니다. 

개요

간단히 이번 프로젝트 마이 셀파 리부트를 설명하자면 원래 마이 셀파란 프로젝트는 저의 졸업 작품인데 TCP 서버로 이루어진 실시간 자동 자울 주차 시스템의 서버를 스프링 부트와 코틀린을 활용해 웹앱으로 변경하는 프로젝트입니다. 프로젝트의 복잡도를 낮추기 위해서 몇 가지 제약 사항을 다음과 같이 정의해보았습니다.

프로젝트 제약 사항

1. 국내의 모든 주차장은 이제 한 단체에서 관리한다. 따라서 한 서버에 모든 주차장의 정보가 들어있다. 여기서는 4개의 주차장 각 주차장은 자리가 4개만 존재한다.
2. 이 시스템의 사용자는 웹을 통해서만 주차장에 자리를 예약할 수 있다.
3. 사용자가 주차를 예약하면 차가 알아서 그 자리로 알아서 주차를 하러 간다. 주차 시의 발생할 수 있는 예외는 없다고 가정한다. 예는 다음과 같을 수 있다.
• 수동 주차는 존재하지 않는다.
• 주차 이동 중에 사고는 발생하지 않는다.

이 프로젝트를 What, Why, How 방식으로 설명해보겠습니다. 

What! 무엇을 만들 것인가?

궁극적으로는 가상 주차 예약 시스템을 만들 예정입니다. 기능적으로는 위처럼 사용자(유저)/관리자(마스터)에 따른 화면 이동 웹앱을 만들 겁니다. 제가 구현할 기능 사항은 다음과 같습니다.

--------------------------------------------------------------------------

1. 공통

• 로그인

• 주차장 검색

• 시스템에 저장된 주차장 목록 정보

• 각 주차장 상세 정보

2. 유저

• 회원가입

• 자신의 차 상태 정보

• 주차 예약

• 출차

3. 마스터

• 시스템 전체 혹은 주차장 별 유저의 주차 예약 정보

• 유저 강제 추방

--------------------------------------------------------------------------

Why! 왜 만들까요?

이번 프로젝트를 진행한 이유는 앞서 언급했지만 한번 더 언급하겠습니다. 이유는 다음과 같습니다.

1. 포트 폴리오 업그레이드 
   이번 프로젝트는 Web Back-End 개발자가 되기 위한 포트폴리오 업그레이드의 첫번째 작업입니다. 이후 추가될 프로젝트는 계속해서 이 블로그에 올릴 예정입니다.
2. 스프링 부트와 코틀린 사용해보기
   자바의 최고의 웹 프레임워크 스프링은 현재 버전 스프링5부터 Java 2.0이라고 불리우는 코틀린이 정식으로 지원하기로 했습니다. 이에 따라 코틀린과 스프링 부트를 함께 경험해보는 것이 이번 프로젝트의 두번째 목표입니다.
3. 작더라도 작은 서비스 완성하기
   이번 프로젝트의 최종적인 목표는 실제 서비스처럼 AWS등의 클라우드에 제 프로젝트를 배포하는것입니다. 음 이 부분은 웹앱 단계에서 올릴지 아니면 REST API를 만들어서 올릴지는 결정하지 않았습니다만.. 어쨌든 이 프로젝트는 AWS에 올릴 예정입니다.

How! 어떻게 만들까요?

이 How 부분은 작업하면서 조금씩 혹은 많이 변경될 듯 합니다만 일단 제가 생각한 개발 언어와 도구, 프레임워크와 라이브러리는 다음과 같습니다.

--------------------------------------------------------------------------

1. 개발 언어
• Kotlin
• HTML
• CSS
• Javascript
• SQL
2. 개발도구
• IntelliJ Community Edition(Back-End 작업을 위한 IDE)
• VS code (Front-End 작업을 위한 텍스트 에디터)
• Gradle  (빌드 도구)
• MySQL DB(데이터베이스)
3. 프레임워크/라이브러리
• 스프링 부트 
• Spring Web (화면 이동 MVC 구조)
• Spring JDBC (데이터베이스 연결)
• Spring Security (유저 정보 보안)
• Spring Thymeleaf(프론트엔드 템플릿)
• 부트스트랩(디자인)

--------------------------------------------------------------------------

현재 제가 생각한 ER 다이어그램은 다음과 같습니다.

먼저 예약, 유저, 주차장으로 엔티티를 나누었습니다. 셍각해봤는데 시스템 복잡도가 낮아서 이것만으로도 충분할 듯 합니다. 지금 생각할 때는 유저 번호가 삭제되고 예약에는 유저 아이디가 외부 키로 들어갈 것 같습니다. ER 다이어그램 설계는 다음 도구의 힘을 빌려서 했습니다.

http://aquerytool.com/

굉장히 좋더라구요. 저는 비로그인 상태로 진행했는데도 만족! 다음은 화면 설계입니다. 화면 설계는 '오븐'이란 도구를 사용했습니다. 

https://ovenapp.io/

화면의 설계와 사양은 다음과 같습니다.

1. 로그인 화면(URL : /)

최대한 간단하게 로그인이 진행되지 않을 시에는 입력은 지줘진 채로 이 페이지로 돌아옵니다. 회원가입을 누르면 회원가입 페이지 /join으로 아이디/비밀번호를 입력하고 로그인 버튼을 누르면 아이디와 비밀번호만 맞으면 유저/마스터에 따라 다음 단계가 진행됩니다. 

2. 회원가입 페이지 (/join)

이 페이지에서는 아이디, 비밀번호, 전화 번호, 차량 번호를 입력하면 됩니다. 입력하고 등록만 하면 일반 유저가 생성됩니다. 그 후 로그인 페이지로 이동합니다. 마스터는 시스템에서 생성하는 걸로 제한합니다. 즉 시스템 개발자가 DB를 통해서만 마스터 유저를 생성해낼 수 있습니다.

3. 유저 상태 페이지 (/user)

사용자가 주차가 되어 있을 경우 위쪽 화면이 아니라면 아래쪽 화면이 됩니다. 주차되어있을 경우 차가 주차된 정보가 나타납니다. 만약 출자 버튼을 누르면 아래 페이지로 다시 리다이렉트되고 로그아웃을 누르면 로그인 화면으로 이동합니다. 자신의 차가 주차되지 않았을 경우 주차 버튼을 누르면 /search 페이지로 이동합니다.

4. 유저 주차장 페이지 (/search)

유저가 주차 버튼을 클릭했을 때 나타나는 페이지입니다. 시스템에 저장된 주차장을 검색할 수 있으며 검색을 하면 검색 목록이 결과에 맞춰 달라집니다. 검색된 주차장의 여석/총 자리수를 알 수 있습니다. 자리가 남은 주차장을 클릭하면 상세 정보 페이지로 이동합니다. 그러나 다 차 있다면 페이지 이동은 불가능합니다. 돌아가기 버튼을 누르면 원래 개인 페이지로 이동하고 로그아웃을 누르면 로그인 화면으로 이동합니다.

 

5. 유저 주차장 상세 정보 (/search/{lot_no})

주차장 상세 정보 페이지입니다. 주차가 가능한 자리는 밝은 회색 불가능한 자리는 어두운 회색으로 표현됩니다.(페이지 화면 작업 중에 색은 변경될 수 있습니다.) 불가능한 자리는 클릭해도 이벤트는 이루어지지 않습니다. 반면 주차가 가능한 자리를 클릭하면 어두운색으로 변경되며 자신의 페이지로 돌아갑니다. 이 때 주차 예약이 이루어지며 유저의 상태는 주차 상태가 됩니다. 마찬가지로 돌아가기 버튼은 주차 검색 페이지로 로그아웃 버튼은 로그인 페이지로 이동합니다.

6. 마스터 주차장 정보 (/master_search)

기본적으로 유저 주차장 검색 페이지와 동일하나 시스템 전체의 유저의 예약 정보가 추가적으로 화면에 표시됩니다. 주차장 검색을 하면 해당 목록에 맞는 예약 정보를 표시해줍니다. 유저의 열을 클릭하면 유저를 강제적으로 주차장에서 출차시킬 수 있습니다.

7. 마스터 주차장 상세 정보 (/master_search/{lot_no})

역시 유저 주차장 상세 정보에 주차장에 존재하는 유저 관리 기능을 할 수 있습니다.

이렇게 해서 프로젝트를 대략적으로 설계해보았습니다. 원래는 클래스와 메소드 생명 주기등 더 깊은 것들을 상세히 설계해야 하지만 개인 프로젝트라는 점과 한 번 진행해봤던 프로젝트이기에 이 정도만 하고 넘어갔습니다. 내일은 스프링 이니셜라이저로 프로젝트를 생성하고 프로젝트를 구성해보겠습니다.