최종 프로젝트, 팀 PS공병은행 (4) -- [스마트인재개발원]

저번 포스팅에 이어서, 이번엔 제작까지 제가 맡았던..! 웹페이지에 대해 소개해드리려고 합니다!

 

지난 포스팅이 궁금하시다면!

최종 프로젝트 (1)편 바로가기 ->

https://jaws-coding.tistory.com/22

최종 프로젝트 (2)편 바로가기 ->

https://jaws-coding.tistory.com/23

최종 프로젝트 (3)편 바로가기 ->

https://jaws-coding.tistory.com/25

---

 

웹 페이지도 어플리케이션과 마찬가지로 스토리보드를 짜며 진행하였습니다.

웹 페이지는 관리페이지로써의 기능을 가진 페이지에요.

그렇기 때문에.. 회수기 / 회원 / 포인트 / 광고의 전반적인 관리를 할 수 있는 내용이 꼭 들어가야 했습니다.

(+ 여담으로 스마트인재개발원 후배님들에게 약간의 조언을 해드리자면.... 웹페이지에 관리 기능만 있을 경우에는.. 빨리 제작하시거나 혹은 애매하게 시간이 모자를 것 같다! 라는 생각이 들면 과감히 포기하거나 어플리케이션에 관리 기능을 포함시키는 것도 나쁘지 않은 것 같아요. 혹은 반응형 웹으로 만들어서 핸드폰으로 접속 시에도 어플리케이션처럼 기능 할 수 있게 두는 것도 좋은 팁입니다!!)

웹 페이지의 스토리보드 입니다.

 

저는 기존의 JSP / Spring을 이용한 HTML / CSS를 활용하지 않고, 랩실 스터디를 하며 독학 했던 Vue.js를 이용하여 웹페이지를 만들게 되었어요.

독학으로만 터득한 Vue.js를 과연 잘 써먹을 수 있을까.. 하는 고민도 있었지만 팀원들에게 피해는 절대 줄 수 없으니 !!

뷰를 쓰기로 결정한 만큼 제가 배로 더 열심히 만들었던것 같아요.

다만 어딘가 오류가 나거나.. 도움을 필요로 할때 바로 선생님께 여쭤볼 수 없다는 점이 힘든 부분이긴 했어요!!

열심히 구선생님과 (google) 유선생님(youtube)를 불러내시어 이것또한.. 혼자 열심히 !!!! 찾아서 했습니다 🤣🤣

여러모도 쉽지 않은 도전이었어요.

하지만 만들고 나서는 그만큼 뿌듯함이 두배!! 였답니다.

 

 

웹 페이지의 화면 구현 이미지를 보실게요!

 

먼저 메인 페이지 입니다.

어디서 많이 본... 이미지죠??? 어플리케이션 로그인 창 부분에도 이 이미지가 들어가 있어요! 😎

gif이미지를 배경이미지로 넣음으로써 좀 더 동적인 메인화면을 만들어 보았습니다.

스마트인재개발원 최종 발표회 날 직접 시연할 때 다음 기수 IoT반 분께서 견학 중에 이런 페이지를 구현할 수 있냐고 신기하게 호기심 가득한 눈으로 물어보셨었는데요,

스마트인재개발원 에서는 이런 것도 만들 수 있다!!! 라고 감히 말씀드리고 싶네요 ㅎㅎ

여러분도 다~~!! 만들 수 있습니다!! (왜냐하면 저도 만들었거든요 ㅠ.ㅠ)

메인 페이지!

 

click me 버튼을 누르면 밑에서 짠! 스낵바 창이 나와요..!

snack bar!

 

 

로그인 페이지는 이렇게 만들었구요...

여기는 관리자 페이지이기 때문에 따로 회원가입창은 만들지않고 admin 계정으로 접속 할 수 있게 로직을 미리 짜두었습니다!

로그인 페이지

 

다음은 회수기 관리 페이지인데요,

사실 여기에 회수기 이미지가 들어가야하지만... 이때 하드웨어 외형이 다 나오지 않았던 터라 임시로 이미지를 넣어둔 거에요! 또한 각 회수기별로 클릭시에 위치를 볼 수 있게 API를 활용하여 넣었습니다!

회수기 관리페이지

 

다음은 회원 관리 페이지 입니다.

회원은 병을 회수해가는 수거자와 병을 반납하는 반환자 두가지 타입으로 분류가 되어있습니다.

반환자/수거자 별 리스트 폼은 같으니 한가지만 올려놓을게요.

이렇게 회원 정보를 리스트로 보여주고, 추가하기 버튼을 눌러서 회원 추가도 가능하고

수정/삭제 기능을 같이 넣었습니다.

회원 관리페이지

 

 

다음은 이벤트 관련 관리 페이지 입니다.

이벤트 리스트와 그 내용을 관리하는 게시판 형식의 페이지가 되겠습니다.

이벤트 상품 페이지는 포인트를 상품으로 교환하는 시스템이 있기 때문에 그 상품들을 관리할 수 있는 재고관리 시스템 형식의 페이지 입니다.

포인트 이벤트 리스트페이지

포인트 상품 페이지

 

마지막으로 광고 관리페이지 입니다.

어플리케이션 내의 광고 배너 -- 광고 노출부분에 대한 스케쥴을 관리할 수 있는 페이지를 만들었습니다!

광고 관리페이지

 

 

 

이렇게 어플리케이션과 웹 페이지 제작과정까지 설명해보았습니다..!!

하나씩 자세하게 다뤄보니 저 또한 프로젝트를 복기하면서 그간의 노력과...팀원들과 한땀한땀 열심히 짜던 그 때가 다시 새록새록 생각나는 것 같아요.. 드디어.. 마지막!! 하드웨어 완성기와 스마트인재개발원 후배님들이 제일 궁금해 하실

마지막 최종 프로젝트 발표회 날!!!의 후기를 마지막 포스팅으로 정리해 보려고 합니다.

그때까지 꼭 읽어봐 주세요!!!! 감사합니다 😙😙 이 글을 읽는 여러분들도 모두 화이팅 입니다!

 

 

---

해당 수업은 '스마트인재개발원'에서 '지능형 IoT 융합 SW 전문가 과정(NCS) 과정'에서 진행한 교육내용입니다.

 

 

스마트인재개발원