[web] Eat:WHA

 

2022 오픈SW플랫폼 프로젝트 - 이화 캠퍼스 맛집 웹 어플리케이션

 

처음으로 백엔드를 담당했던 프로젝트! 하지만 생각보다 백과 프론트가 상호작용하는 부분들이 많아서 마치라잌 풀스택 개발자가 된 기분이었다. 전반적인 기획은 이대 주변 맛집 정보를 잘 모르셨던 교수님께서 해주셨고, 우리는 우리 팀만의 특색있는 웹 어플리케이션을 만들기 위한 추가 기능 기획만 하면 되었다.

좌측의 리스트가 요구안, 우측은 잇화만의 컨셉

 

1. 차별성 있는 기능(화면) 기획

우선 가장 눈에 띄는 홈 화면에 힘을 줬다. 깔끔하고 귀여운 지도를 가빈님이 그려주기로 했고, 지도의 각 조각이 해당 구역의 맛집 리스트로 연결되는 버튼으로 작동하게 해 사용자가 직관적으로 서비스를 이용할 수 있도록 기획했다. 지도 아래는 검색창이 있고, 또 우리만의 특색을 담은 맛집 추천 리스트를 배치하기로 했다.

다음으로 로그인/로그아웃 기능을 구현하여, 신원이 확인된 로그인 한 사용자만이 리뷰를 남길 수 있게끔 하기로 했다. 또한 마이페이지 화면을 추가해 사용자가 작성한 리뷰와 찜한 맛집 목록을 모아볼 수 있다.

마지막으로, 비건메뉴가 있는 식당에는 비건 뱃지를 달아주어, 세부화면으로 들어가지 않고도 한눈에 파악할 수 있도록 했다.

백문이 불여일견이니 다음 단계의 화면 설계 사진을 보면 더욱 쉽게 화면을 그려볼 수 있을 것이다.

 

2. 화면 설계

위의 차별성 있는 화면들을 포함한 잇화의 화면 설계를 진행했다. 

화면.. 다시 봐도 짱많다

UI를 설계하며 가장 중점적으로 고려했던 것은 좌우 여백을 크게 잡아 불필요한 정보를 줄여, 최대한 빠르고 직관적이게 필요한 정보만을 찾을 수 있도록 하는 것이었다.

 

3. 화면 디자인

프론트 팀원들이 html 작업에 들어간 동안, 통일된 CSS를 위해 화면 디자인을 진행했다. (내가 했다😊)

100배로 귀여워진 잇화

그리고.. 대망의 지도 !! 가빈님이 너무너무 귀엽게 그려주심..!!!! 지도 구현은.. 무책임하게 미래의 우리에게 맡겼는데, 역시 미래의 우리는 믿을만한 놈들이었다!

👇🏻조각조각땃따따 다각형 div를 구현하는 법은 진영님 티톨에 자세히 설명되어있다..❤️

https://jinya.tistory.com/1

HTML, CSS로 다각형 div 구현 및 호버링하기

 

4. 개발 개발 개발 그리고 또 개발

졸프를 하기 전까지 학교에서 밤새며 팀플을 할 일이 있을 줄은 몰랐다.. 새벽 귀가정돈 생각했어도,, 셔틀 첫 차와 하이파이브하기는 상상하지 못했단 말이다.. 하지만 보다시피 화면이 위와 같이 무지막지하게 많았기 때문에 사실 당연한 일이었다.

밤샘 스타트를 끊은 건 프론트 팀이었다. 과제 제출일이 먼저였기 때문..! html과 CSS를 먼저 얼추 완성한 뒤 백 파트 과제가 나오기 시작했다. = 본격 밤샘의 시작

백 과제는 매주 나왔는데, 매주 가빈님과 팀토방에 붙어 앉아 이게 왜 안되조.. 에서 어? 이게 왜 되조로 돌아오기를 반복했다. 끝까지 해낸 우리가 너무너무 자랑스럽다! 개발 과정에서 참 많은 수난을 겪었는데.. 몽땅 적자니 투머치라 팀원들의 글로 대신하겠다!

🍀 프론트 예린님의 비건 뱃지 구현 (장고 if문 활용) https://shingy.tistory.com/16

[디버깅] flask로 if문 구현하기, CSS에서 객체 위치 설정

💻 백 한나님(나!)의 파이썬 플라스크 개발환경 구축 https://gamddalki.tistory.com/5

03. VScode 파이썬 플라스크 개발환경 구축하기

🤗 백 가빈님의 회원 가입 및 탈퇴 기능 구현 (파이썬 플라스크) https://billyboo.tistory.com/5

[Python/Firebase] 회원가입 기능 구현 (+ 탈퇴 기능)

꼭.. 꼭 어필하고 싶은 부분은 잇화에 단 하나의 기능도 겉으로만 되는 것처럼 보이게 얼레벌레 구현한 것이 없다는 거다..!!!!! 개발에 정말 많은 공을 들였다.. 그런 의미에서 마지막에 시연 영상 링크까지 첨부할 것이다!

 

5. 완성!!

화면만 보면 고생한 백이 보이지 않으니 발표 때 사용한 시연 영상과 깃허브 링크를 첨부한다! 진영님이 뚝딱 만들어낸 또 다른 작품!! 금쪽이가 귀엽게 알려주니까 꼭 봐주시길..!!❤️❤️

https://drive.google.com/file/d/1TjuZtZ6ihcilshCnWNRC9Msfl_G95CAb/view?usp=sharing 

잇화시나리오.mp4

중간중간 대사가 비어있는 부분은 발표하는 중간에 가빈님과 내가 채워넣어서, 금쪽이와 대화하듯 연출했다. 다시 생각해도 좀 귀엽다.

🌺잇화 깃허브 https://github.com/Gamddalki/EatWHA

GitHub - Gamddalki/EatWHA

 

지난 학기를 돌아보면 모든 과목들이 여러모로 고통스러웠지만, 잇화만 봐도 그 모든 고통이 헛되지 않다는 것이 느껴져 정리하는 내내 기분이 좋았다. 참으로 참으로 뿌듯한 학기였다. 그래도 다시 만나지는 않았으면..😊😊