대학축제 프로젝트

대학축제

• 개발 기간 : 2016년 5월 15일 - 2016년 5월 17일

• 개발 인원 : 6명

• 개발도구 : cloud9 ide

• 개발언어 : ruby on rails , html/css/js

• 서버 호스팅: 아마존 웹 서비스, 가비아 도메인 호스팅

• 코드 보기

사이트 소개

대학들의 축제기간 각 대학교 축제의 특징을 소개한 사이트가 없다는 점에 착안, 멋쟁이 사자처럼 동아리 멤버들과 실전 연습을 위해 운영했던 사이트입니다.

메인 페이지에는 단순한 검색창으로 각 대학교를 검색해 보는 기능으로 단순함을 추구하였고, 대학교를 검색하면 축제 진행 기간과 각 날짜별로 오는 연애인의 이름이 나열되게 하였습니다. 날짜를 누르면 그 날짜에 축제를 하는 다른 대학을 볼수 있도록 하였습니다.

또한 매일마다 다가오는 축제 일정들을 한눈에 볼수 있는 페이지를 만들어서 다음 날이나 당일 어느 축제를 갈지 계획할 수 있도록 하였습니다.

페이스북을 통한 마케팅을 주된 홍보원 이용하였으며, 이후 SEO검색 최적화를 통해 구글이나 네이버를 통한 지속적인 검색 유입을 도모하였습니다.

그 결과 총 1600명의 사용자가 사용했으며, 2200번의 세션수 열람을 기록했습니다.

개발한 주요 기능

저는 백엔드와 프론트엔드 양쪽 모두를 개발하였습니다.

  <!-- Mobile + Unscalable -->

  <meta name="viewport" content="width=device-width, initial-scale=1" maximum-scale=1, user-scalable="no">

  <meta name="author" content="Like_Lion_Hanyang_Univ">



  <!-- Custom Fonts -->

  <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>



  <!-- Bootstrap CDN -->

  <!-- Latest compiled and minified CSS -->

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">



  <!-- Optional theme -->

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">



  <!-- Latest compiled and minified JavaScript -->

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

  <!-- Jquery -->

  <script src="//code.jquery.com/jquery-1.10.2.js"></script>

  <!-- GoogleAnalytics-->

  <script>

  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)

  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-61006192-3', 'auto');

  ga('send', 'pageview');

  </script>

See in github

프론트 엔드 부분에서는 마케팅 부분에 도움을 주기 위해 SEO검색 최적화와 검색 등록 및 유입수 통계데이터를 수집했습니다. 또한 구글 에드센스를 매 페이지에 부착하여 유지비를 벌었습니다.

  get 'result' => 'home#result'

  post 'result' => 'home#result'

  get 'result/:to_find' => 'home#result'

  ...중략...

  get 'upcoming' => 'home#upcoming'

  get 'started' => 'home#started'

  get 'contact' => 'home#contact'

See in github

벡엔드부분에서는 각 검색 결과를 url 라우팅을 하여 검색 유입이 쉽게 가능하도록 하였으며, 각 날짜를 클릭할시 같은 날짜에 어느 대학 어느 연예인이 오는지 알수 있도록 하였습니다.

  get 'result' => 'home#result'

  post 'result' => 'home#result'

  get 'result/:to_find' => 'home#result'

  ...중략...

  get 'upcoming' => 'home#upcoming'

  get 'started' => 'home#started'

  get 'contact' => 'home#contact'

See in github

또한 당일 축제 대학과 다음날 축제를 하는 대학을 일괄적으로 보여주는 페이지를 만들었습니다.

-started.erb
<li class="col-md-4">
  <img src="/assets/<%=n.univ%>.jpg" class ="logo_shape_<%= shape %>"> 
  <h3><%=n.univ%></h3>
  <p>
  <% i=0; @univ.where("univ = ?", n.univ).group(:lineup).each do |u| %>
    <% if i<3 %>
      <%=u.lineup%>
      <%end%><% i+=1 %><%end%>
  </p>
</li>

See in github

다음은 사이트 시연 영상입니다