HMS

동아리 홈페이지
in     3.3722222222222222 minutes read

개요

  • 기간 : 2013년 10월 ~ 3주
  • 인원 : 1명
  • 사용기술 : Django, Bootstrap, jQuery, MySQL

2013년도 하반기 학교 데이터베이스 수업 중에 만든 최초의 프로젝트로 동아리 활동에 필요한 정보를 공유하는 동아리 사이트로, 주 사용 대상자는 동아리 회원이며 일반 사람들도 이용할 수는 있으나 컨텐츠에 제한이 있다. 홈페이지에는 동아리 회원들의 사진, 공연 영상, 게시판, 음악파일, 캘린더 등의 기능이 있으며 회원들간에 컨텐츠를 자유롭게 공유하며 이용하는데 목적이 있다. 프로젝트 명은 HMS(Hamsung Management Service) 로 함성은 동아리 이름이다.

기획 의도

대학교 밴드 동아리 활동(베이스 담당)을 하고 있었는데 수업과 관련하며 프로젝트 기획 중 마땅히 생각나는 아이디어가 없었고, 우리 동아리 관련해서 음원과 사진, 게시물 등을 공유할 수 있는 우리 동아리만의 사이트를 만들고 싶어서 개발하게 되었다.

시스템 구성도

시스템

  1. 사용자는 자신이 이용하고 있는 웹 브라우저를 이용하여 원하는 동아리 홈페이지에 접속 후 원하는 컨텐츠를 클릭한다.
  2. 웹브라우저는 서버로 해당 데이터를 요청한다.
  3. 서버에서는 데이터베이스에 원하는 데이터를 요청한다.
  4. 데이터베이스는 요청받은 데이터를 검색 후 서버에 전달한다.
  5. 서버는 웹브라우저에 데이터를 전달한다.
  6. 사용자는 요청했던 컨텐츠를 이용할 수 있게 된다.

데이터 모델링

###회원 관리

  • 홈페이지는 가입한 회원만 이용이 가능하다.
  • 회원가입 정보로는 아이디, 닉네임, 이메일, 악기, 지역, 핸드폰, 학과가 있다.
  • 기본적인 사용자 정보와 프로필 정보로 나누어져 있다.

###컨텐츠 관리

  • 제공 되는 컨텐츠로는 음악 파일, 공연 영상, 사진이 있으며 회원이라면 모두 제약 없이 이용할 수 있으며 업로드 및 다운로드 할 수 있다.
  • 컨텐츠들은 다양하게 분류가 되며 관리 되어야한다.

###테이블

  • 회원 – 아이디, 이메일, 비밀번호
  • 프로필 – 전화번호, 주소, 닉네임, 악기, 전공, 자기소개
  • 음악 – 제목, 보컬, 파일정보
  • 사진 – 사용자, 제목, 내용, 카테고리, 파일정보, 생성된시간
  • 공지사항 – 제목, 내용, 사용자, 글쓴시간
  • 메시지 – 내용, 사용자, 글쓴시간
  • 라이크 – 사용자, 사진정보

모델링 논리적 모델링

프로세스 기능 설계

기능 구성 요소

전체기능 전제 기능 구성 요소

  1. 처음 화면은 로그인 화면으로 로그인을 해야 홈페이지 이용이 가능하다.
  2. 로그인하여 들어 갈 경우 공지사항, 공연영상, 사진, 음악, 연락처, 게시판, 타임라인을 이용할 수 있다.
  3. 음악은 듣거나 음원파일을 다운로드 할 수 있다.
  4. 사진은 공연사진, 축제, 엠티, etc로 구분이 된다.
  5. 연락처에는 가입한 사람들의 이름과 전화번호를 알 수 있다.
  6. 타임라인에서 익명으로 간단한 한 줄 글을 작성할 수 있다.

각 기능별 상세 설계

로그인 기능

로그인 로그인 기능

  1. 로그인을 했을 시 아이디와 패스워드를 입력한다.
  2. 데이터베이스에서 확인을 한 후 일치하면 성공하여 홈페이지로 들어가지고 불일치하면 로그인을 다시 시도하게 된다.

갤러리 기능

갤러리 갤러리 기능

  1. 사진을 등록할 수 있다.
  2. 카테고리 별로 등록을 할 수 있다.
  3. 제목과 사진에 대한 자세한 내용이 들어간다.

음원 공유 기능

음원 음원 공유 기능

  1. 음악 관리도 영상, 사진과 유사하나 검색 기능이 추가된다.
  2. 음악 제목 및 장르 등 검색 조건에 따라 데이터베이스를 조회하여 검색을 하게된다.
  3. 조회한 음악을 듣거나 다운로드가 가능하다.
  4. 조회한 음악의 정보를 수정할 수 있다.
  5. 음악 등록과 삭제는 관리자만 가능하다.

UI 설계

로그인

로그인 로그인화면

  1. 사이트 주소 입력 시 처음에 나타나는 화면이다.
  2. 동아리 홈페이지라는걸 알 수 있게 로고만 띄우는 심플한 화면을 구성한다.
  3. 로그인 없이는 홈페이지에 접속을 할 수가 없다.

메인

메인 메인화면

  1. 회원 로그인 했을 시 메인 화면이다.
  2. 메인비주얼을 크게 잡고, 공지사항, 기타 다른 정보 하나만 띄워서 심플하게 구성한다.
  3. 메뉴에는 공지사항, 갤러리, 공연영상, 음악파일, 게시판, 연락처, 타임라인으로 구성된다.
  4. 메인화면에 동아리 회원의 단체사진을 썸네일로 여러장 넣어서 동아리에 대한 친숙한 느낌을 갖을 수 있게 한다.

갤러리

갤러리 갤러리화면

  1. 기본적인 갤러리 및 공연 영상 화면의 UI이다.
  2. 가로 슬라이드 형식이며 카테고리 별로 분류가 되어있다.
  3. 정렬이 될 때 애니메이션이 된다.
  4. 좋아요를 누르면 하트가 카운트가 되며 하트가 많은 순으로 나타나는게 기본이다.
  5. Isotopejs 플러그인 사용

음원 공유

음원 음원공유화면

  1. 음악 메뉴 탭의 화면이다.
  2. 검색을 클릭하여 원하는 노래를 찾을 수 있다.
  3. 검색시 노래가 나타나며 클릭 시 다운로드가 진행된다.
  4. 음원을 Dropbox에 올려 링크를 건다.

타임라인

타임라인 타임라인화면

  1. 익명으로 간단한 한 줄 글을 남길 수 있는 공간이다.
  2. 작성자만 글을 지울 수 있으며 20글 이상시 페이징이 된다.

마무리

프로젝트를 개발하면서 모든 기술들이 처음 접해본 기술들이어서 배우고 익히는데 시간이 많이 소요됬으며 삽질을 많이 했다. 백엔드쪽 기능이 원활히 돌아가는 것이 목표였고 프론트쪽은 부트스트랩 테마를 가져와서 약간의 수정만 했는데 더 이쁘게 꾸미고 싶었지만 기술력이 없었고 Django의 기능들을 코딩하기에 급급했다. 관리자 페이지의 부재와 디자인의 미흡함 캘린더 기능을 구현 못한점은 아쉬움으로 남는다.


  Tagged with  •   •