인하미식회

24
유유유 유유유 유유유 유 유 유유 유유유 유유유 http://inhatastingpart y.com/

Transcript of 인하미식회

Page 1: 인하미식회

유호균황대경

진정한 맛 을 아는 그들을 위하여‘ ’

http://inhatastingparty.com/

Page 2: 인하미식회

INDEX1. 개발 배경 1) 상황 분석 2) 컨셉 도출2. 사이트맵 1) 페이지 소개 및 사용법3. 기술적 배경 1) 파일 목록 및 설명 2)DB 구성 및 상세4. 참고

Page 3: 인하미식회

20 대 대학생들에게 불어오는 혼밥 트렌드

3

4

2

1최근 취업난 등의 이유로 대학생들이 저학년 때부터 스펙 쌓기에 열중하면서 시간을 좀 더 효율적으로 쓰고자 하는 것도 혼밥의 이유가 된 것 같다 .

“ 내가 혼자 밥을 먹을 때나 , 다른 사람들이 혼자 밥을 먹는 것을 볼 때의 느낌은 말 그대로 아무렇지도 않다 . 그만큼 자연스러운 일이기 때문이다 .”

최근 1 인 가구가 증가하는 추세인 만큼 대학가의 원룸 고시촌이 밀집된 지역에는 혼자 밥먹는 사람들을 배려해주는 식당이 점점 많아지는 것 같다 .

그들에게 혼자먹는 밥은 이제 특별한 일이 아니다출처 : 아시아 투데이

Page 4: 인하미식회

혼자먹는밥 사회성 결여

친구가 없다

대인관계를 중시하는 모습과 남의 시선에 크게 영향을 받는 성향으로 혼자 밥먹는 것을 부담스러워 하는 한국인그들에게 내재된 함꼐하는 식사에 대한 욕구

3

4

2

1

하지만 그들의 속마음은 어떨까 ?

출처 : 위키백과

출처 : 소셜메트릭스

혼밥이 트렌드이며 쿨한척 하지만 SNS 조사 결과 그들은 누군가와 함께 밥을 먹고픈 욕구를 여전히 갖고 있는 것으로 드러났다

혼밥하는 새내기 타이틀은 면했습니다

난 바빠서 혼자먹는거야 자신감을 가져 따위의 생각을 하며 출처 : 인하대학교 대나무숲

Page 5: 인하미식회

효율적인 시간관리도 좋다 !하지만 혼자먹는 밥은 싫다 !

3

4

2

1

시간의 효율성과 함께하는 즐거움 ,둘 다 놓치고 싶지 않은 그들에게 어떻게 다가가야 할까 ?

여유 시간이 같은 익명의 사람들을 연결하여함께 맛있는 음식을 먹도록 한다면 어떨까 ?

TV 채널 및 각종 SNS 에 불어닥친 ‘맛’에 관한 트렌드

Page 6: 인하미식회

진정한 맛 을 아는 그들의그들에 의한그들을 위한‘ ’

주요타겟인 친구가 없어 개인활동을 한다는 의미의 아웃사이더를 맛을 공유하고픈 미식가로 재정의 함으로써 타겟들의 거부감을 없앰

동시에 서비스의 이름을 인하미식회로 정의함으로써서비스를 이용하는 사람들로 하여금 맛있는 식사를 연상시키고 참가자들로 하여금 자부심과 소속감을 형성

마주앉아 식사를 하는 사람드르이 모습과 식사를 하는 사람의 모습을 동시에 형상화

Page 7: 인하미식회

인하미식회 사용방법

데스크탑 접속 시 메인화면 모바일 접속 시 메인화면편의성을 위해 사이드스크롤 지원

모든 페이지는 responsive web 기술을 사용해서 구현하여하나의 ui 로 다양한 플랫폼과 기기에 대응하도록 함

3

4

2

1

Page 8: 인하미식회

인하미식회 사용방법

처음 이용하는 사용자를 위해메인페이지를 원페이지 사용 설명서로 구성

인스타그램의 # 인하대맛집 관련 최신 정보를 메인페이지에 띄움으로써

음식선택 및 학생들의 맛집관련 최신 동향를 알 수 있게 했다

3

4

2

1

Page 9: 인하미식회

인하미식회 사용방법

학생들이 어제 많이 먹은 카테고리를 통계형식으로 보여줌으로써

음식 선택에 도움을 주도록 하였다

3

4

2

1

최근 학생들이 먹었던 음식들의 리뷰들을 보여준어 학생들의 흥미를 돋군다 . 좋아요와 댓글 기능이 있다 .

Page 10: 인하미식회

인하미식회 사용방법

화면을 맨 아래로 스크롤하거나메뉴에서 로그인하기를 선택 로그인을 하면인하미식회의 핵심기능인 밥파티를 이용할 수 있다회원가입은 이메일과 이름정도만으로도 간단하게 가입이 가능하며페이스북 아이디로도 가입이 가능

1)

3

4

2

1

Page 11: 인하미식회

인하미식회 사용방법

카테고리는 한식 , 중식 , 양식 , 일식 , 기타로 제공원하는 카테고리를 선택하면 카테고리별 파티 분류

2)

전체글보기를 누르면생성되어있는 파티들이 시간 순서대로 나타난다

3

4

2

1

Page 12: 인하미식회

3)

인하미식회 사용방법

카테고리는 한식 , 중식 , 양식 , 일식 , 기타로 제공파티를 어필 할 수 있는 제목과시간과 날짜 , 최소인원을 적는 것만으로 간단하게 파티생성 가능생성한 파티는 자동으로 참가중인 파티 메뉴에 등록된다

만약 원하는 파티를 찾을 수 없다면 ..?

3

4

2

1

Page 13: 인하미식회

3)

인하미식회 사용방법

카테고리는 한식 , 중식 , 양식 , 일식 , 기타로 제공파티를 어필 할 수 있는 제목과시간과 날짜 , 최소인원을 적는 것만으로 간단하게 파티생성 가능생성한 파티는 자동으로 참가중인 파티 메뉴에 등록된다

만약 원하는 파티를 찾을 수 없다면 ..?

3

4

2

1

파티생성은 약속시간 한시간 전 부터 생성 가능약속시간 30 분 전에 채팅창이 생성되며 그 후에는 새로운 사람 입장

불가설정한 최소인원을 충족하지 못한 파티는 생성 불가

Page 14: 인하미식회

인하미식회 사용방법4)

설정한 약속시간 30 분 전이 되면채팅창이 생성된다채팅을통해 자유롭게 연락처를 교환하는 등 대화를 나누고맛있는 식사를 하러 나가면 끝 !

만약 정해진 시간에 약속장소에 나오지 않거니비매너의 행동을 할 경우 신고하기 메뉴를 통하여 해당 유저를 신고할 수 있다

3

4

2

1채팅 페이지는 poling 방식을 채용하려 했으나 서비스의 특성상짧은 poling 주기는 서버에 부담을 줄 것을 예상하여 websocket 으로 구현하였다

Page 15: 인하미식회

인하미식회 사용방법

3

4

2

1

페이지 하단부에는 footer 를 제공함으로써서비스 운영에 필요한 버그리포트 및 운영상의 Q&A 접근을 용이하도록

하였다

Page 16: 인하미식회

인하미식회 사이트맵

Index

Login(index)

unLogin(index)

설명서

현재모집중인파티

오늘의음식어제

로그인

참가중인파티

모집중인파티

파티만들기카테고리별

전체파티

한식중식양식일식기타기타 신고하기

Contact

3

4

2

1

Page 17: 인하미식회

웹사이트 파일 목록 및 설명 (View)Path Group FileName Descriptionapp/view/main 메인페이지 index.erb 메인 화면 ( 로그인 , 비 로그인 페이지당 모든 기능 view

포함 )app/view/main 메인페이지 bobparty_read.erb 밥파티 조회 ( 채팅화면 생성 )

app/view/main 메인페이지 bobparty_correct.erb 밥파티 수정 ( 기능은 만들어 놓았으나 제공하지 않음 )

app/view/main 메인페이지 category_view.er 카테고리별 조회 ( 한식 , 중식 , 양식 , 일식 , 기타 )

app/view/devise/confirmations 회원 new.erb 인증메일 새로 보내기app/view/devise/mailer 회원 confirmation_instruction.erb 인증메일 양식app/view/devise/mailer 회원 reset_password_instructions.ht

ml.erb비밀번호 초기화 메일

app/view/devise/mailer 회원 sessionsunlock_instructions.html.erb

Lock 풀기 메일app/view/devise/password 회원 edit.html.erb 비밀번호 수정app/view/devise/password 회원 new.html.erb 비밀번호 잊었을때 찾아주기app/view/devise/registrations 회원 edit.html.erb 회원정보 수정

app/view/devise/registrations 회원 new.html.erb 회원가입app/view/devise/session 회원 new.html.erb 로그인

3

4

2

1

Page 18: 인하미식회

웹사이트 파일 목록 및 설명 (View)Path Group FileName Descriptionapp/view/devise/shared 회원 _flash_messages.html.erb partial: 플래시 메시지app/view/devise/shared 회원 _links.html.erb partial: 회원그룹 하단 링크app/view/devise/unlocks 회원 new.html.er Resend unlock instructionsapp/view/bobparty_chattings

채팅 _bobparty_chatting.html.erb

partial: 채팅 하나하나 코멘트app/view/bobparty_chattings

채팅 _form.html.erb partial: 채팅 작성 양식app/view/bobparty_chattings

채팅 new.html.erb 채팅3

4

2

1

Page 19: 인하미식회

웹사이트 파일 목록 및 설명 (Controll)Path Group FileName Descriptionapp/controllers 게시글 / 파티 main_controller.rb 모든 파티 기능들app/controllers 채팅글 bobparty_chattings_controller.

rb채팅 기능

app/controllers/users 회원 omniauth_callbacks_controller.rb

페이스북 회원가입

3

4

2

1

Page 20: 인하미식회

웹사이트 파일 목록 및 설명 (Model)Path Group FileName Descriptionapp/models 밥파티 bobparty.rb 밥파티 모델app/models 밥파티 채팅 bobparty_chatting.rb 채팅 모델app/models 밥파티 멤버 bobparty_member.rb 멤버 모델app/models 신고 report_article.rb 신고글 모델app/models 회원 user.rb 회원 모델

3

4

2

1

Page 21: 인하미식회

테이블 목록 및 상세회원

column PK NN AIid V

email V V

encrypted_password V

reset_password_token

reset_password_sent_at

remember_created_at

sign_in_count V V

current_sign_in_at

last_sign_in_at

current_sign_in_ip

last_sign_in_ip

회원column PK NN AI

category_western_style

V

category_chinese_style

V

category_eastern_style

V

category_japanese_style

V

category_etc_style Vconfirmation_token

confirmed_at

confirmation_sent_atunconfirmed_email

provideruid

nameimage

3

4

2

1

Page 22: 인하미식회

테이블 목록 및 상세

밥파티 멤버column PK NN AI

id V V

bobpartymember_email V

bobpartymember_name V

bobparty_id V

bobpartymember_datetime

V

밥파티 채팅column PK NN AI

id V

comment V

comment_name V

comment_email V

bobparty_id V

comment_datetime

3

4

2

1

Page 23: 인하미식회

테이블 목록 및 상세신고글

Column PK NN AI

id V V

report_title V

report_content V

report_username V

report_email V

report_image

3

4

2

1

Page 24: 인하미식회

참고 ( 사용기술 )

Client : HTML 5.0, CSS3, Javascript, Jquery, Bootstrap

FrameWork: Ruby On Rails 4Server : Ruby, Fusion Passenger, Nginx

Atom Editor, Cloud9 IDE, Git(협업 )

SQLite3

Google Chrome, Safari ( 모바일 포함 )

AWS EC2 t2.micro

적용 개발 언어

서버 환경

데이터베이스

개발 툴

클라이언트 환경

3

4

2

1