Project : DKUPUB

1. 프로젝트 배경 및 목표

1. 프로젝트 배경 학교 주변에 위치한 다양한 주점들이 존재한다. 하지만 새로 입학한 학생이나 지역을 잘 모르는 학생들은 이러한 장소를 찾기 어려울 수 있다. 또한, 모임을 쉽게 구성하지 못하는 상황도 발생할 수 있다. 따라서 학교 앞 주점 및 주류 검색 정보를 제공하는 정보 서비스, 학생들이 모임을 구성하고자 할 때 편리하게 도움을 주는 모임 서비스, 채팅 서비스를 개발하여 학생들에게 편리한 정보 제공과 모임 구성을 돕고자 한다.

2. 프로젝트 목표 본 프로젝트의 목표는 다음과 같이 설정하였다.

(1) 학교 주변 주점 및 주류 검색 정보를 제공하여 학생들이 원하는 장소를 쉽게 찾을 수 있도록 하기 (2) 학생들이 모임을 자유롭게 구성하고 참여할 수 있는 서비스 제공하기 (3) 학생들 간의 소통을 위한 채팅 서비스 제공하기

이를 통해 학생들은 학교 주변의 주점을 더욱 쉽게 이용할 수 있을 뿐만 아니라, 새로운 사람들과의 교류와 친목을 형성할 수 있는 모임을 구성할 수 있으며, 채팅을 통해 학생들은 소통과 정보 공유를 할 수 있어 학교 생활을 보다 풍요롭게 만들 수 있을 것이다.

2. 제공기능

제공기능 이번 웹사이트 주요기능은 총 3가지로, 학교 앞 주점 및 주류 정보를 제공하고 모임을 구성할 수 잇도록 게시판 기능과 채팅기능을 제공한다.

1. 학교 앞 주점 및 주류 검색 정보 제공 학교 앞 주점 및 주류 검색은 단국대 앞 지역에서 주점과 주류 정보를 검색하고 확인할 수 있는 기능이다. 이 기능은 주종페이지와 주점페이지를 통해 제공된다. 먼저 주종페이지에서는 사용자가 원하는 종류의 주류를 선택하면 해당 종류에 대한 다양한 정보를 제공한다. 사용자는 학교앞 주점에서 판매하고 있는 다양한 주류의 종류를 확인할 수 있다. 주점페이지에서는 사용자가 선택한 특정 주점의 상세 정보를 제공한다. 사용자가 선택한 주점의 위치, 영업 시간, 메뉴등의 정보를 확인할 수 있다. 또한 주점에 대한 리뷰와 위치도 확인할 수 있다.

2. 모임 서비스 (게시판 기능) 모임 서비스는 사용자들이 모임을 구성할 수 있도록 게시글을 작성할 수 있는 기능을 제공한다. 게시판은 모임게시판, 정보게시판, 잡담게시판으로 총 3가지로 분류되어있다. 먼저, 모임게시판에서는 사용자들이 게시글을 작성하여 자신의 모임을 구성할 수 있다. 모임을 구성하고자 하는 사용자는 일정, 인원 수, 참여 조건등을 스스로 설정하여 모인을 모집할 수 있다. 또한 사용자들은 정보 게시판 기능을 통해 서비스 내에서 주점에 관한 정보를 공유할 수 있다. 그리고 잡담게시판을 통해 사용자들은 모임 이외의 다양한 주제로 잡담하고 소통할 수 있다. 온라인 커뮤니티 형태로 구성된 잡담 게시판에서는 사용자들이 음주 문화, 다양한 주류 종류, 맛집이야기등에 대한 이야기를 나눌 수 있다. 이렇게 제공되는 게시판 기능을 통해 사용자들은 모임을 구성하고 서로의 경험을 공유하며 취향과 관심사를 나눌 수 있고, 다양한 사람들과의 만남과 소통을 즐길 수 있는 기회도 제공한다.

3. 채팅 서비스 채팅 서비스는 사용자들 간에 실시간으로 메시지를 주고받을 수 있는 페이지를 제공한다. 채팅 서비스는 사용자들이 메시지를 주고받을 수 있는 환경을 제공한다. 사용자들은 방을 제목을 검색하여 원하는 채팅방에 참여할 수 있으며, 이를 통해 채팅을 주고받을 수 있다. 이 서비스는 다양한 목적으로 사용되며, 사용자들은 채팅을 통해 소통하고 정보를 교환할 수 있다.

2. 시스템 구조 및 설계

1. 시스템 아키텍처 프로젝트의 시스템 아키텍처는 일반적인 웹 애플리케이션의 구조를 따르고 있다. 주요 구성 요소로는 클라이언트, 서버, 데이터베이스가 있다. 클라이언트 측에서는 HTML, CSS, JavaScript 등을 활용하여 사용자와의 인터페이스를 제공다. 사용자는 웹 브라우저를 통해 해당 인터페이스를 통해 서비스에 접속하고 상호작용할 수 있다. 서버 측에서는 Django 프레임워크를 활용하여 웹 애플리케이션의 핵심 로직과 데이터 처리를 담당한다. Django는 MVC (Model-View-Controller) 아키텍처 패턴을 기반으로 한 프레임워크로, 웹 애플리케이션의 요청을 받아 처리하고 응답을 반환한다. 데이터베이스는 웹 애플리케이션의 데이터를 저장하고 관리하는 역할을 수행한다. 일반적으로 SQL 기반의 관계형 데이터베이스를 사용하며, 사용자 정보, 게시물, 설정 정보 등이 저장된다. Django의 ORM (Object-Relational Mapping)을 통해 데이터베이스와의 연동을 편리하게 처리하였다. 시스템 아키텍처에서 클라이언트와 서버는 HTTP 프로토콜을 통해 통신하며, 서버는 클라이언트의 요청을 받아 처리하고 필요한 데이터를 데이터베이스에서 조회, 생성, 수정, 삭제한다. 이렇게 처리된 결과는 다시 클라이언트에게 응답되어 사용자에게 제공된다.

2. 사용된 기술 스택 및 프레임워크 이번 프로젝트에서 다양한 기능을 갖춘 웹페이지를 개발하기 위해 수업시간에 배운 Django 프레임워크를 사용하여 진행하였다. Django는 파이썬 기반의 웹 프레임워크로, 웹 애플리케이션을 빠르게 개발할 수 있는 풍부한 기능을 제공한다. Django는 모델-뷰-템플릿 (MTV) 아키텍처를 따르며, 데이터베이스 관리, 사용자 인증, URL 라우팅, 템플릿 엔진, 폼 처리 등을 편리하게 처리할 수 있도록 지원한다. 또한, 웹페이지의 디자인과 레이아웃을 구성하기 위해 HTML, CSS, JavaScript 등의 웹 기술을 사용하였다. HTML은 웹페이지의 구조를 정의하고, CSS는 스타일과 레이아웃을 지정하며, JavaScript는 동적인 기능과 상호작용을 구현하는 데 사용되었다. 데이터베이스와의 상호작용을 위해 프로젝트에서는 Django에서 기본적으로 제공되는 데이터베이스 엔진 중 하나 SQLite를 사용하였다. 또한, 프로젝트의 협업과 버전 관리를 위해 Git을 사용하였다. Git을 사용하여 각자의 작업 내용을 관리하고 버전을 관리하여 프로젝트의 효율성과 안정성을 높였다. 위의 기술 스택 및 프레임워크를 활용하여 프로젝트의 구조를 설계하고 개발을 진행하여, 유지보수가 가능하고, 확장성 있는 시스템을 구축할 수 있었다.

3. 구현

1. 주점 및 주류 검색 정보 제공 기능의 구현 주점 및 주류 페이지는 주점 또는 주류에 대한 상세한 설명을 텍스트 형식으로 제공하고, 사진 클릭 시 url로 이동하도록 구현하였다. 주점 페이지에서 url로 이동했을 때, 해당 주점의 위치를 지도로 볼 수 있도록 하였다. 주종 페이지에서도 주종의 상세 정보를 알 수 있도록 주종의 정보를 알려주는 url로 이동한다.

2. 모임 서비스(게시판) 기능의 구현

게시판 목록 페이지에서는 정보 게시판, 모임 게시판, 잡담게시판으로 게시판 종류에 따라 구분되어 출려된다. 게시판 목록에는 ‘information_boards’, ‘meeting_boards’, ‘chat_boards’와 같은 Django 뷰에서 전달된 데이터를 사용하여 게시판의 제목, 작성일, 작성자, 내용 등을 표시한다. 게시판 목록에서는 해당 게시판에 등록된 게시물 목록을 표시한다. 각각 게시물은 반복문을 통해 하나씩 출력되도록 구현 하였다. 각 게시물을 클릭하면 해당 게시물의 상세 페이지로 이동하도록 하였다. 게시글 작성페이지를 구현하기 위해 Django 폼에서 게시글 제목을 입력받는 필드, 게시글을 입력받는 필드, 게시글 내용을 입력받는 필드를 정의하였다. 리스트를 사용하여 필드의 순서를 지정하였다. 그래서 게시판 작성페이지에서는 제목을 입력하고 어떤 게시판에 작성할 건지 선택하고 내용을 입력할 수 있도록 하였다. 필요한 경우 {% if error %}와 {{ error }}를 사용하여 오류 메시지를 출력하도록 구현하였다. 게시판 상세페이지에서는 게시판의 이름이 표시되는 부분이 있으며, 해당 게시판의 이름은 조건문을 사용하여 동적으로 결정되도록 구현하였다. 게시글을 표시하는 컨테이너가 있으며, 게시글의 제목, 작성일, 작성자 프로필 이미지, 작성자 정보, 내용이 표시된다. 페이지 하단에는 필요한 버튼들이 표시되며, 권한 검사를 통해 특정 조건에 따라 버튼이 표시되도록 구현하였다.

3. 채팅 서비스 기능의 구현

채팅방 입장을 위한 입력 폼이 제공되며, 사용자는 채팅방 이름을 입력할 수 있도록 하였다. 사용자가 채팅방 이름을 입력하고 ‘Enter’ 버튼을 클릭하거나 엔터 키를 누르면 채팅방으로 이동한다. 채팅방 페이지는 사용자가 실시간으로 메시지를 주고받을 수 있는 환경을 제공한다. 채팅 메시지를 표시하기 위한 textarea가 있으며, 이곳에 채팅 내용이 표시된다. 사용자는 메시지를 입력할 수 있는 input 필드를 사용하여 새로운 메시지를 작성할 수 있다. 메시지 입력 후 "Send" 버튼을 클릭하거나 엔터 키를 누르면 작성한 메시지가 전송된다. JavaScript 코드를 사용하여 WebSocket을 생성하고 채팅 메시지를 처리하도록 하였다. WebSocket은 클라이언트와 서버 간의 실시간 양방향 통신을 가능하게 하는 프로토콜이다. 클라이언트는 채팅 서버와 WebSocket 연결을 수립하여 데이터를 주고받을 수 있다. 채팅 서버는 WebSocket 연결을 관리하고, 클라이언트로부터 전송된 메시지를 다른 클라이언트에게 브로드캐스트한다. 클라이언트는 채팅 메시지를 수신하면 채팅 로그에 표시하여 사용자에게 실시간으로 보여준다.

4. 회원가입/ 로그인 기능 구현 사용자는 회원가입/로그인 페이지에 접속하여 필요한 정보(아이디, 비밀번호, 이메일 등)를 입력한다. 만약 사용자가 잘못된 아이디나 비밀번호를 입력한 경우, 오류 메시지가 표시되어 사용자에게 알려준다. CSRF(Cross-Site Request Forgery) 공격으로부터 보호하기 위해 토큰이 생성되어 폼 데이터와 함께 서버로 전송된다. 이를 통해 인증된 사용자만이 서비스에 접근할 수 있도록 하였다. 사용자가 올바른 아이디와 비밀번호를 입력하고 "Submit" 버튼을 클릭하면, 입력한 정보가 폼 데이터로 서버로 전송된다. 이를 통해 서버는 로그인 정보를 검증하고 사용자에게 해당하는 데이터를 제공할 수 있도록 하였다.

5. 발생한 문제 및 해결 내용 (1) 페이지 게시글 작성 권한 문제 홈페이지에 처음에 가입하지 않은 사용자도 마음대로 게시글을 작성할 수 있는 문제가 발생하였다. 이는 비인가 사용자가 임의로 게시글을 작성하여 시스템의 안전성과 신뢰성을 저해하는 결과를 초래할 수도 있다. 이를 해결하기 위해 로드인 기능을 추가하였다. 사용자는 가입 후 자신의 계정을 로그인하여야만 게시글 작성 권한을 얻을 수 있다. 게시글 작성 시, 시스템은 사용자의 로그인 상태를 확인하도록 하였다. 로그인 상태를 확인하는 함수를 작성하였다. 로그인하지 않은 사용자는 게시글 작성페이지로 진입할 수 없고 로그인 페이지로 이동하도록 설계하였다.

(2) 채팅방 개설 시 상대방에게 보이지 않는 문제 해결 채팅 시스템을 구현하는 과정에서, 채팅방 개설 시 상대방에게 보이지 않는 문제사 발생하였다. 채팅방을 입장한 사용자가 작성한 채팅 내용이 채팅방에 접속한 다른 사용자들에게는 보이지 않는 문제가 발생하였다. Redis는 고성능 키-값 데이터 저장소로, 메모리 기반 데이터 구조 저장소로써 자주 사용된다. 따라서 문제를 해결하기 위해 Redis를 백엔드로 도입하여 실시간 채팅 데이터를 저장하고 관리하는 데 활용하였다. Redis는 PUB/SUB 메커니즘을 지원하여, 데이터의 발행(Publish)과 구독(Subscribe)을 통해 실시간 데이터 전달을 구현할 수 있다. 채팅방에서 작성된 새로운 채팅 내용을 Redis에 발행하고, 채팅방에 접속한 다른 사용자들은 해당 채팅방을 구독하여 실시간으로 새로운 채팅 내용을 수신할 수 있도록 구현하여 문제를 해결하였다. 문제 해결 후, 채팅방에 접속한 사용자가 작성한 채팅 내용이 실시간으로 채팅방에 접속한 다른 사용자들에게 전달되었다. Redis를 백엔드로 활용하여 데이터를 신속하고 효율적으로 저장하고 전달함으로써 실시간 대화의 흐름이 원활하게 이루어질 수 있었다.

4. 테스트 결과 및 분석

1. 각 기능의 테스트 방법과 결과 (1) 메인페이지 (로그인 전)

(로그인 후)

로그인 전과후를 구분하기 위해서 로그인후에는 회원가입버튼과 로그인버튼이 사라지고 로그아웃 버튼이 생성되도록 구현하였다. 페이지의 각 아이콘을 클릭하면 해당 페이지로 연결되도록 구현하였다.

(2) 주종 페이지

(3) 주점 페이지

(4) 커뮤니티(채팅방)

채팅방에 입장 페이지로 채팅방 제목을 입력하면 해당하는 채팅방에 입장할 수 있도록 하였다.

엔터 아래에는 입장할 채팅방이 없는 사용자들을 위해서 바로 모임을 구할 수 있도록 게시글 목록으로 이동할 수 있도록 배너를 추가하였다.

(5) 커뮤니티 (채팅창)

사용자들 사이의 원활한 의사소통을 위해 채팅창을 구현하였다. 이를 통해 사용자들은 쉽고 편리하게 실시간으로 메시지를 주고받을 수 있다.

(6) 게시판 목록

게시판 목록에는 정보게시판, 모임게시판, 잡담게시판에 해당하는 게시글이 표시되도록 구현하였다. 이렇게 함으로써 사용자들은 관심 있는 게시판을 선택하여 해당 게시글을 확인하고 참여할 수 있다. 각각의 게시판은 고유한 주제와 목적이 있어, 사용자들은 자신에게 맞는 게시판을 선택하여 원하는 정보를 얻거나 다른 사용자들과 소통할 수 있다.

(7) 게시판 상세

게시판 목록에서 게시글을 클릭하면 해당 게시글의 상세페이지가 표시되도록 구현하였다. 상세페이지에서는 게시글 작성자에게는 삭제와 수정 기능이 제공되어 게시글을 관리할 수 있다. 이를 통해 게시글 작성자는 필요에 따라 게시글을 수정하거나 삭제할 수 있어 사용자 간 원활한 커뮤니케이션과 게시글 관리가 가능하다.

(8) 게시글 작성

게시판 목록에서 "글쓰기" 버튼을 클릭하면 게시판 작성 페이지로 이동하도록 구현하였다. 게시글 작성 페이지에서는 사용자가 어떤 게시판 목록에 작성할지 선택할 수 있으며, 제목과 내용을 입력하여 게시글을 작성할 수 있다. 이를 통해 사용자는 손쉽게 원하는 게시판에 게시글을 작성할 수 있으며, 게시글의 주제와 내용을 자유롭게 작성하여 다른 사용자들과 정보를 공유하거나 의견을 나눌 수 있다.

(9) 회원가입/로그인 페이지

회원가입과 로그인 페이지이다. 사용자가 입력한 정보가 올바르지 않을 경우, 자연스럽게 오류 메시지가 발생하도록 구현하였다. 회원가입 페이지에서는 사용자가 필요한 정보를 입력하고, 입력한 정보가 유효하지 않을 경우에는 적절한 오류 메시지가 표시된다. 이를 통해 사용자는 올바른 형식으로 정보를 입력하도록 유도할 수 있다. 마찬가지로, 로그인 페이지에서도 사용자가 잘못된 정보를 입력하거나 필수 정보를 누락할 경우에는 오류 메시지가 표시되어 로그인을 할 수 없도록 안내한다. 이러한 구현을 통해 사용자는 정확하고 완전한 정보를 제공하여 원활하게 회원가입하고 로그인할 수 있다.

2. 향후 개선 및 확장 가능성 (1) 현재 사항 현재 프로젝트는 학교 앞 주점 및 주류 검색 정보 제공서비스, 술 모임 서비스, 채팅 서비스를 기반으로 웹페이지를 개발하였다. 사용자들의 요구사항을 반영하여 본 프로젝트는 학생들이 학교 주변의 주점을 쉽게 찾을 수 있고, 술 모임을 조직하고 참여할 수 있는 서비스를 제공하기 위해 설계되었다. 현재 구현된 기능들은 안정적으로 작동하고 있으며, 사용자들의 요구에 부합하는 기능을 제공하고 있다.

(2) 개선 및 확장 가능성 - 추가 기능 개발 이번 프로젝트는 다양한 확장 가능성을 가지고 있다. 먼저, 위치 기반 서비스를 활용하여 사용자의 현재 위치를 파악하여 주변의 주점 정보를 자동으로 제공하여 사용자들이 더욱 쉽고 빠르게 원하는 주점을 찾을 수 있도록 개발할 수 있다. 또한, 리뷰 및 평점 시스템을 도입하여 사용자들이 주점을 방문하고 후기와 평점을 남길 수 있는 기능을 추가 할 수 있습니다. 이를 통해 다른 사용자들은 신뢰할 수 있는 정보를 얻을 수 있고, 주점의 품질과 서비스를 평가할 수 있다. 이벤트 및 할인 정보 제공 기능을 추가하여 주점에서 진행되는 이벤트나 할인 정보를 제공할 수 있다. 사용자들은 더욱 다양한 혜택을 받을 수 있으며, 주점들은 마케팅 효과를 얻을 수 있다. 또한, 음식 및 주류 추천 시스템을 개발하여 사용자들의 선호도와 과거 이용 기록을 분석하여 개인 맞춤형 추천을 제공할 수 있다. 사용자들은 자신에게 맞는 음식과 주류를 더 쉽게 찾을 수 있고, 주점들은 고객들에게 특화된 추천 서비스를 제공함으로써 만족도를 높일 수 있다. 또한, 사용자들의 선호도와 행동 패턴을 분석하여 맞춤화된 서비스를 제공할 수 있으며, 사용자들의 피드백과 평가를 수집하여 서비스 개선에 반영할 수 있다.

이러한 기능들을 추가할 경우 사용자들은 원하는 주점을 쉽게 찾고 평가할 수 있으며, 주점들은 더 많은 고객을 유치하고 만족도를 높일 수 있을 것이라고 예상된다. 또한, 개인화된 서비스를 제공함으로써 사용자들은 보다 편리하고 특화된 경험을 얻을 수 있을 것이다.

3. 결론

1. 프로젝트 후기

1. 팀원 역할 분담 내역 김고은 : 메인페이지 , 회원가입/로그인페이지, 채팅창, 게시판 설계 및 구현 김려린 : 메인페이지, 주종/주점 페이지, 게시판 설계 및 구현

2. 프로젝트 진행 과정에서의 경험과 배운 점 Django를 사용하여 웹페이지를 개발하는 과정에서 Django의 구조와 기능에 대한 이해를 향상시킬 수 있었다. MTV (Model-Template-View) 패턴을 활용하여 웹 애플리케이션을 구성하고, 장고의 다양한 기능과 모듈을 활용하여 효율적인 개발을 경험했다. Django의 인증 및 권한 관리 기능을 사용하여 사용자의 로그인, 회원가입, 세션 관리 등을 구현하였다. 이를 통해 웹페이지의 보안과 사용자 관리에 대한 이해를 높일 수 있었다. 프로젝트 진행 중에 발생한 에러를 처리하고, 디버깅하는 과정에서 문제 해결 능력을 향상시킬 수 있었다. DJANGO의 디버깅 도구와 로그 기능을 활용하여 문제를 진단하고 해결하는 과정에서 실전적인 프로그래밍 경험을 얻을 수 있었던 것 같다.

3. 프로젝트 완료 후의 전체적인 평가 프로젝트가 완료되면서 전반적으로 매우 만족스러운 결과를 얻을 수 있었다. 프로젝트에서 구현한 기능들은 사용자들에게 편의를 제공하고, 정보를 쉽게 얻을 수 있도록 도움을 준다. 또한, DJANGO를 활용한 웹페이지 개발에 대한 경험을 통해 효율적이고 유지보수가 용이한 웹 애플리케이션을 개발하는 방법을 익힐 수 있었다. 프로젝트 진행 과정에서는 팀원들과의 협업을 통해 프로젝트 일정을 맞추고 목표를 달성하는 경험도 할 수 있었다. 팀원 간의 의사소통과 업무 분담을 원활하게 진행하여 효율적인 프로젝트 진행이 가능했다. 또한, 프로젝트를 통해 소프트웨어 개발 과정에서 발생할 수 있는 다양한 문제들을 경험하고 해결하는 능력을 향상시킬 수 있었습니다. 이를 통해 실전적인 개발 역량과 문제 해결 능력을 향상시킬 수 있었던 시간이었다.

목표 내용 달성 여부 프로젝트 목표 오픈소스 도구 및 라이브러리를 활용하여 사용자 인터페이스를 구성하고 동적인 웹 페이지를 구현하는 것 O 오픈소스 적절히 사용 오픈소스 소프트웨어의 장점을 활용하여 소스 코드 검토, 수정, 배포 O 사용할 도구 및 라이브러리 HTML, Bootstrap, CSS, VSCode O 구현 테스트 결과 채팅방, 메인 페이지, 게시판 페이지, 주점/주류 페이지 O 4) 프로젝트 목표 달성 여부

4. 소스 코드 GitHub 링크 https://github.com/ryeorin/DKUPUB

5. 발표영상 링크 https://youtu.be/HYyJfHFITXY