엘리스 AI 트랙 - flask를 이용한 개인 프로젝트

엘리스에서 개인 프로젝트로 flask를 이용하여 도서관 웹 페이지를 구현하는 프로젝트를 진행했다.

 

 

 

그냥 필수 구현만 해도 되는 프로젝트지만 나는 이왕 하는 거 좀 재밌게 하자라는 마인드로 진행했기 때문에

도서관에 맞지 않는 기능들도 다 때려 박았다. ㅋㅋㅋ(예를 들어 웹 소켓이라는 것으로 실시간 익명 채팅방 구현)

 

 

 

동영상도 편집해서 업로드했는데, 다음은 간략하게 내 도서관 홈페이지를 안내하는 동영상이다.

 

이 동영상은 내가 만든 페이지가 무엇인지 간략하게 안내하는 동영상이다. 편집, 나레이션 다 직접했다. 어려웠지만 나름 꿀잼이었다.

 

 

 

메인 페이지

 

 

홈페이지 첫 화면이다. 구성은 base.html이라는 파일을 하나 만들어 저 위에 있는 navbar를 고정시켜 유저가 홈페이지를 편하게 이용할 수 있게 만들었다. 

 

접속할 수 있는 탭은 왼쪽부터

홈, 책 목록, 휴게실, 오디오북, 엘대숲(채팅방), 추천 도서, FAQ, 로그인, 회원가입 이렇게 있다.

 

 

---

 

 

1. 홈버튼

 

홈버튼을 누르면 메인 페이지로 이동한다.

 

---

 

 

 

2. 책 목록

 

 

 

 

flask_login 라이브러리의 login_required 기능을 사용했기 때문에 로그인하지 않고 접속하면 다음과 같은 화면이 나온다. 

 

 

---

 

 

온 김에 회원가입부터 진행해 보자.

 

 

회원가입 페이지는 위와 같이 생겼다. 아이디는 이메일 형식으로 작성해줘야 하고 비밀번호는 최소 10글자 이상 작성해야 한다. 그리고 만약 회원가입이 이미 되어있다면 밑에 있는 로그인 탭을 클릭해서 로그인하면 된다.

 

 

---

 

 

 

이런 식으로 작성하고 회원가입 탭을 누르면

 

---

 

 

메인 페이지로 리다이렉트 한 후, 환영합니다 라는 메시지를 출력하게 해 줬다. 

 

---

 

 

저 환영 메시지는 회원가입뿐만 아니라, 로그인할 때도 출력된다. like this

 

이젠 이미 우리 회원이기 때문에 편하게 반말을 시전 했다~ "모히또님 어서 오고~"

 

 

---

 

 

다시 우리의 원래의 목표인 책 목록 탭으로 들어가 보자.

 

 

짜잔~ 이렇게 책 목록이 나오는데 누가 벌써 다 빌려갔다... (아마 서버 배포했을 때 들어오신 분들이 다 대여하고 반납 안 하셨나 보다... 뭐야 제 책 돌려조요)

 

 

---

 

 

 

1페이지에는 남아 있는 책이 없으니 2페이지로 가보자. 아 그리고 밑에 있는 페이지 네이션은 부트스트랩에 있는 기본 기능으로 구현을 했다.

 

 

---

 

 

 

 

오 다음 페이지로 오니 그래도 남아 있는 책이 있다. 

 

 

---

 

 

우선 책을 빌리기 전에 책 제목을 누르면 상세정보가 뜨는데 modal이라는 기능을 사용했기 때문에 직접 다른 페이지로 리다이렉트 할 필요 없이 팝업창처럼 현재 페이지 내에서 상세정보 창이 출력되게 만들었다.

 

 

 

이런 식으로 창이 뜨고 좋아요를 누르면 좋아요 개수가 늘어나고 좋아요의 버튼이 검은색으로 칠해진다.

 

 

---

 

 

그럼 본격적으로 책을 빌려보자.

 

 

 

대여 버튼을 누르면 이런 대출하기 modal창이 하나 뜨게 된다. 대출을 원하면 대출하기 버튼을 클릭하면 된다.

 

 

---

 

 

 

그럼 아까 1권 남아있던 책이 0권으로 남고, 대여 버튼은 대여 불가 처리가 되고 페이지 상단에는 성공적으로 대출했다는 메시지가 뜬다.

 

 

---

 

 

3. 휴게실

 

 

휴게실 페이지는 별거 없고, 깃허브에 누가 슈퍼마리오를 자바스크립트로 구현한 게 있어서 그걸 따와서 붙여 넣은 것뿐이다. 실제 우리가 사용하는 공공 도서관에 휴식 공간이 존재하듯이 그런 아이디어에서 나도 도서관 웹페이지지만 한번 집어넣어 봤다.

 

---

 

 

4. 오디오 북

 

 

오디오 북 아이디어는 집 앞에 있는 도서관 홈페이지에서 영감을 받았다. 그리고 오디오 북 구현은 

 

 

__python__(using python making pdf text into audio book); PDF파일을 오디오 북으로 만들기!

 

내가 이 블로그에도 포스트 한번 했었는데 PDF 파일을 읽어 오는 PyPDF2와 text를 음성으로 변환시켜 주는 pyttsx3 라이브러리를 사용했다.

 

 

 

오디오 북 페이지는 이렇게 생겼다. 페이지 네이션도 구현했는데 앞서 살펴본 책 목록에서 구현한 기본적인 부트스트랩의 페이지 네이션과 달리 여기서는 캐루셀(Carousel) 기능으로 구현하였다. like this~

 

 

 

뭔가 깔끔해 보여서 좋다.

 

 

---

 

 

 

 

5. 엘대숲(엘리스 대나무 숲; 익명 채팅방)

 

 

 

다음은 익명 채팅방인데 지금 웹 소켓을 꺼놔서 작동은 안 된다. 이용 방법은 닉네임에 자신이 원하는 이름을 작성하고 옆에 있는 칸에 메시지 작성 후 엔터를 입력하면 채팅이 된다. 그리고 채팅만 하면 심심하니까 iframe 태그를 이용해 유튜브 24시간 라이브 lofi음악 영상을 연결해서 자동으로 재생되게 구현했다.

(iframe 태그를 사용하여 유튜브 영상을 자동재생 되게 넣으려면, 음소거 먼저 시켜줘야 한다.)

 

 

---

 

 

6. 추천도서

 

 

아무래도 프로젝트 기간이 여름이다 보니, 여름에 어울리는 납량특집 분위기로 한번 만들어봤다.

 

 

 

엘리스를 대표하는 토끼가 칼 들고 피 묻힌 이미지는 디자인 쪽 일하는 친구한테 부탁해서 만든 거다. ㅋㅋㅋ 공포 분위기에 맞춰서 마우스 커서도 피 자국 아이콘으로 변경되게 만들었고 지금은 gif 파일이어서 소리가 들리지 않는데 페이지에 들어오면 audio 태그의 autoplay기능을 사용해서 착신아리 ost가 자동 재생되게 만들었다. ㅋㅋㅋ 프론트엔드에 전혀 관심 없었는데 이런 페이지를 만들면서 좀 흥미가 붙었다.

 

 

 

---

 

 

 

 

7. FAQ (자주 묻는 질문)

 

 

 

자주 하는 질문의 답변을 확인하고 싶으면, 해당 질문에 버튼을 클릭하면 답변이 나오는 식으로 만들었다.

 

 

 

 

 

---

 

 

 

8. 대여 목록

 

아까 처음에 책 목록에서 대여한 책을 반납할 수 있는 페이지다.

 

 

'대출한 책들' 밑에 아까 대여한 '파이썬으로 데이터 주무루기'라는 책이 있다. 저 책을 반납하고 싶으면 도서 반납하기를 누르면 된다.

 

 

---

 

 

그럼 대여 버튼을 누른 거와 같이 해당 책의 반납하기 modal창이 뜨고 저기서 반납하기를 누르면

 

---

 

 

 

빌린 책은 사라지고 성공적으로 반납했다는 메시지가 나온다.

 

 

---

 

 

개인 프로젝트 나름 재밌었다. 혼자 열심히 구글링 하고 유튜브 보고 레고 맞추는 작업 같았다.

다음은 팀프인데... 이건 나 혼자 하는 게 아니어서 좀 걱정되지만, 열심히 해야지 뭐 어쩔 수 있나.

 

 

 

끝.