Potato

키워드기반 일기메이트 추천 서비스

1. 기획배경

안녕하세요! 저희 팀은 취향, 키워드 기반 일기메이트 추천 서비스 버디어리를 소개해드리겠습니다.

많은 사람들이 일기를 쓰는것도 시간이고 굳이 필요성을 못느끼는 사람이 많다고 생각합니다
하지만 개발자들이 TIL을 통해 성장하듯이, 일기를 통해 오늘 있었던일을 정리하고 자기성찰을 통한 내적 성장을 할 수 있습니다.

 

 

 
박보영씨가 일기를 열심히 쓰는거로 굉장히 유명하다고 합니다.
다음은 실제로 박보영씨가 작성한 일기인데요.
"이런 상황에서 못하는것은 부끄러운 일이라고 생각했는데 그 일을 내가 저지르고 말았다.."
연기를 하다가 본인에게 굉장히 실망했었던 일이 있었는데 박보영씨는 이 일을 일기에 적음으로써 스트레스가 많이 풀렸다고 합니다

여러분 예전에 교환일기 다들 써보셨나요?
앞선 사례처럼 혼자서 일기를 쓰는것만으로도 스트레스가 풀릴 수도 있지만, 누군가 내 얘기를 들어주는 것만으로도 큰 힘이 나는 경우도 있고, 혹은 좋은일이 있었는데 자신과 성향이 비슷한 누군가와 공유하고 싶은 순간이 있습니다.

그런 분들을 위해 기획한게 저희 버디어리 입니다 !






2. 서비스 소개

완전 반응형

기본적으로 저희 버디어리는 완전 반응형으로 구현되어 있습니다
PC,패드,모바일 언제 어디에서나 저희 버디어리를 사용하실 수 있도록 어떠한 환경에서도 일관적인 디자인을 제공해드립니다

 





OAuth 로그인

저희는 그룹일기의 접근성을 위해 OAuth를 통한 카카오톡 회원가입과 로그인을 구현하였습니다
단순 OAuth가 아닌 시큐리티와 결합하여 표준화된 OAuth를 구현했습니다.
저희 서비스에 로그인하시게 되면 jwt 인증 필터를 통해 1차적으로 요청이 중간이 변조, 탈취되었는지 확인할 수 있습니다.
덕분에 안전하게 서비스 제공을 할 수 있으며 카카오톡 알람을 통한 그룹일기 초대 메세지를 보낼 수 있습니다.

 

 





메인 페이지

메인 페이지는 풀페이지로 섹션별로 구성되어있으며
여러 애니메이션을 통해 버디어리를 소개해드리고 있습니다.

 

 

 





실시간 알람

저희는 SSE를 통한 실시간 알람을 전송해드립니다.
1:1 채팅 요청을 받을 때, 본인이 속한 그룹에 새 글이 올라왔을 때 메세지가 전송됩니다
Web Socket은 양방향으로 데이터를 주고받을 수 있지만 SSE를 사용하게 되면 클라이언트는 데이터를 받기만 합니다.
SSE는 별도의 프로토콜을 사용하지 않고 HTTP 프로토콜만으로 사용할 수 있기 때문에 Web Socket 에 비해 훨씬 가볍기도 하고 저희 프로젝트 특성상 웹소켓보다 SSE를 사용하는게 더 적합하다고 판단해 SSE를 사용하게 되었습니다.

 

 





취향 기반 유저 추천

최초 회원가입시 진행했던 설문조사를 토대로 랜덤의 익명 유저와 자신과의 유사도를 비교하여 확인하실 수 있습니다
저희는 spring 서버와 fast api서버가 분리 되있는데 fastapi서버에선 최초 회원가입시 진행하는 설문조사의 답변을 기반으로 tf-idf 및 코사인 유사도 계산 과정을 거쳐 다른 유저와의 유사도를 보여줍니다.





키워드 기반 유저 추천

취향 기반 추천은 랜덤의 유저라면, 키워드 기반 유저 추천은 본인이 작성했던 일기를 기반으로 자신과 비슷한 키워드를 주제로 일기를 작성한 유저들을 추천하는 방식입니다.
일기 작성 시 soynlp를 활용해 키워드를 추출 후 단어의 빈도수와 비례한 키워드 점수 형태로 저장하여 마찬가지로 tf-idf 및 코사인 유사도 계산 과정을 거쳐 키워드가 비슷한 유저를 추천하게됩니다.





감정 분석

저희는 유저가 사용했던 일기의 감정분석을 제공해드리고 있습니다.
유저가 일기를 쓰게 되면 AI를 통해 감정을 분석해서 그 결과를 다이어리의 해당 날짜에 이모티콘 형태로 보여주게됩니다.





스티커

유저가 방을 만들거나 일기를 작성하게되면 포인트를 얻게 되는데 해당 포인트로 저희가 직접 제작한 스티커를 상점을 통해 구매하여 이용하실 수 있습니다.





그룹일기

카카오톡 초대를 통해 원하는 사람과 그룹일기를 만들 수 있습니다
그룹에 속한 인원을 볼 수 있고
해당 그룹에 올라온글에 반응과 댓글을 남길 수 있습니다.
또한 남의 다이어리에 스티커를 붙일 수 있습니다





일기 작성

유저는 텍스트와 사진을 첨부하여 일기를 작성할 수 있고 해당 일기를 원하는 그룹에 동시에 올릴 수 있습니다.
혹은 아무것도 선택하지 않고 개인일기에만 저장할 수 있습니다
일기 작성이 마무리 되고 나면 가지고 있는 스티커를 원하는 위치에 붙일 수 있습니다.

 





마이페이지

프로필 수정을 통해 프로필 이미지와 닉네임과 소개글을 수정할 수 있고 설문조사를 다시 할 수 있습니다
달력에 본인이 작성한 날짜에 감정 이모지와 본인이 일기에 자주 쓰는 키워드들은 크게, 많이 사용하지 않은 단어들은 작게 워드 클라우드를 제공해줍니다
또한 일기를 작성한 날짜의 이모티콘을 확인하여 그 날의 일기 디테일을 볼 수 있습니다.





3. 시스템 아키텍쳐

저희는 향후에 서비스 규모가 커진다고 가정하였을 때를 고려하여 어플리케이션 로드 밸런서를 사용하여 http 트래픽에 대해 로드 밸런싱을 하기 때문에 경로를 확인하고 해당 서버에 적절하게 트래픽을 분배 할 수 있었습니다.

 





4. 팀원 소개

 

프로젝트 명

 

프로젝트 소개

 

요즘 정말 많은 2030 세대가 주식투자를 하고 있습니다. 2021년 설문에서는 성인 3명 중 2명이 주식투자를 한다는 결과가 나오기도 했습니다.
이렇게 많은 사람들이 리스크를 감수하면서 돈을 투자하는데,얼마나 전문적으로 투자를 하고 있을까요?
저희가 사전에 유저들을 상대로 한 설문에서, 63%의 응답자가 전혀 경제 경영 관련 전문적인 교육을 이수한 적이 없다고 답했습니다.
전문적인 교육을 받지 않았다면 어디에서 주로 지식을 습득할까요?설문결과에 따르면 온라인 커뮤니티와 주변 지인이 상위 2개 응답인 것을 확인하실 수 있습니다.이러한 출처들은 전문성이 있는 정보와 없는 정보를 판별하기가 매우 어렵기 때문에 투자자들에게 혼란을 더 야기하곤 합니다.
그런데, 친구들과 온라인 커뮤니티에서 주식 관련 지식을 습득하는 재미는 동일하게 가져가면서,더 전문적인 정보를 바탕으로 투자할 수 있다면 어떨까요?
투자의 진입장벽을 낮추면서! 쉽고 재미있고 투자자들에게 양질의 정보를 제공하는 투자 연습 사이트 그게 바로 저희 리턴즈입니다.

 

프로젝트 소개 UCC

 

 

진행기간

  • 2023.02.20 ~ 2023.04.07(총 7주)

 

팀원 구성 및 역할

 

 

 

 

 

기술 스택

 

  • Front-end
    • JSX / CSS / JavaScript
    • React / Redux
    • Tailwind
    • Styled-component
  • Back-end
    • Spring / SpringBoot
    • JPA
    • AWS (EC2)
  • BataBase
    • Redis
    • MariaDB
  • Distributed Computing
    • Spark
    • hadoop
  • Tools
    • Jenkins
    • SonarQube
    • Zeplin

활용 API

  • Yahoo query
  • ALPHA VANTAGE

 

피그마 디자인

ERD

서비스 기능

(담당기능은 색깔 표시)

 

  • 로그인
  • 회원가입

  • 메인페이지 
    • 실시간 달러 환율, 일본 환율, 유로 환율, 비트코인, 원유 가격 확인 가능
    • 수익률 TOP 10 표시
    • 오늘의 추천 종목 표시
    • 오늘의 단어 표시

  • 튜토리얼페이지
    • 게임 진행방식 설명

튜토리얼

  • 게임 대기방
    • 여러 테마 설정 가능
      • 테마별 설명
      • 사용자가 원하는 날짜를 설정할 수 있음
    • 친구 초대 가능
    • 친구와 채팅 가능
    • 유저의 평균 수익률 표시

  • 게임 내부
    • 과거의 환율, 한국금리, 미국금리 표시
    • 각 컴포넌트 별 도움말 표시
    • 게임에 상장종목 랜덤으로 10개 표시
      • 전턴대비 상승, 하락 대비 표시
      • 매수, 매도 시 모달 표시
        • 자신이 보유한 종목 표시
          • 평가손익, 매도가능(보유 수), 손익률, 평균단가, 평가금, 매입금 표시
          • 전턴대비 상승, 하락 대비 표시
        • 현재 턴 표시
        • 현재 턴 남은시간 표시
        • 주식 그래프, 거래량 시각화
        • 선택된 종목의 간략한 소개
        • 선택된 종목의 주가 정보
        • 선택된 종목의 해당하는 날짜의 뉴스
        • 게임에 참여한 유저들의 총 평가자산 및 등수 표시
        • 레디 기능
          • 참가자가 모두 레디가 완료되거나 제한시간이 지나면 다음턴으로 넘어감
        • 유저들끼리 실시간 채팅

실시간 채팅

  • 결과 페이지
    • 최종 등수 확인
    • 프로필사진 해금
    • 선택한 유저의 수익률 추이 그래프와 턴 매수매도 데이터 확인

 

  • 사이드바
    • 친구 닉네임을 검색하여 추가 가능
    • 친구 요청 수락 거절 가능
    • 게임 초대 수락 거절 가능
    • 친구 온 오프라인 상태 실시간 확인 가능

  • 404 페이지
    • 에러 메세지 출력 후 메인페이지로 이동

프로젝트 명

프로젝트 소개

🤚 안녕하세요 ! 저희 팀은 움짤 공유, 탐색, 그리고 채팅 서비스인 Zzalu를 만들었습니다.

Zzalu의 유래는 Zzal + U 로 짤과 너와 잇다라는 뜻을 가지고 있습니다 !

짤로 소통하는 고독방,
매일 개설되는 제목학원,
마지막으로 프로필에 전시되는 본인의 짤BTI까지!
저희 서비스의 "제목학원"에 참여하여 드립력을 뽐내주세요!

그럼 저희 프로젝트 일상의 모든 순간을 짤로! Zzalu 를 소개하겠습니다

주제 선택 이유

여러분들과 실시간으로 소통하면서 자유롭게 놀 수 있는 그러한 공간을 만들고싶었습니다.

하지만 그저 ‘즐거움’으로 비롯된 것은 아닙니다.

비의 깡의 gif가 불러온 역주행 , 그리고 giphy가 무려 5000억에 페이스북에 인수되었다는 사실!

움짤은 그저 개인이 재미를 느낄 수 있을 뿐만 아니라 실제로 수익성도 있을 수 있는 서비스라는 점입니다.

움짤, 밈은 시장성과 수요는 넘치지만 아직 다른 서비스가 선점하지 않았다고 판단했고,

저희는 저희만의 차별성을 더하면 이 서비스가 앞으로 실제 프로덕트로도 충분히 발전 가능이 있다 생각하여 프로젝트를 진행해 보았습니다 :)

프로젝트 소개 UCC

(유튜브 링크)

 

진행기간

  • 2023.01.03 ~ 2023.02.17(총 7주)

팀원 구성 및 역할

기술 스택

  • front-end
    • HTML / CSS / JavaScript
    • Vue / Vuex
    • Tailwind
    • PostCss
    • ApexChart
  • back-end
    • Spring / SpringBoot
    • AWS (EC2)
    • Gradle
    • ZooKeeper
    • kafka
  • DataBase
    • Redis
    • MariaDB
  • Tools
    • Jenkins
    • Docker
    • JIRA
    • GitLab

활용 API

  • GIPHY

와이어 프레임

ERD

서비스 기능

(담당기능은 색깔 표시)

  • 로그인
    • 이메일 인증메세지를 통한 회원가입

 

 

  • 메인페이지
    • 제목학원 명예의 전당
      • 해당 제목학원의 1등한 유저의 아이디, 댓글 받은 좋아요 수 출력
    • 사용자 맞춤 추천 짤 리스트
      • 롱클릭 시 조회수, 즐겨찾기 유/무 확인, 보드 저장
    • 오늘의 인기 짤 리스트
      • 롱클릭 시 조회수, 즐겨찾기 유/무 확인, 보드 저장
    • 오늘의 핫한 고독방 리스트
      • 클릭 시 상세 내용 조회 가능

 

 제목학원이란 ?
    유머 짤에 재치있게 적절한 제목을 달아준 사람에게 마치 학원에서 배운 것처럼 제목을 잘 달았다는 데에서 온 말
  • 제목학원
    • 웹 통신을 통한 실시간 댓글 확인 및 실시간 좋아요 반영
    • 인기순 / 최신순 / 과거순으로 댓글 정렬
    • 대댓글 작성 가능
    • 다른 탭에서 새로운 댓글이 조회될 때 알림
    • 댓글의 작성시간을 알려줌
    • 역대 제목학원
      • 과거의 제목학원의 짤, 1등한 유저의 아이디, 댓글 받은 좋아요 수 출력
      • 디테일 페이지 확인 가능 ( 더 이상의 댓글 입력 불가 )

 

  • 짤 상세페이지
    • 짤 조회수, 짤에 해당하는 태그, 짤의 유래, 관련 링크, 짤을 마지막으로 수정한 사람의 아이디, 짤을 마지막으로 수정한 날짜 조회 가능
    • 보드에 스크랩 가능
    • 로그인 상태라면 편집 가능
      • 편집 시, 해시태그 추가 제거 가능
      • 짤의 유래 수정 가능
      • 관련 링크 (유튜브 등으로)링크 가능
      • 무분별한 수정 방지를 위해 바로 수정되는게 아닌 관리자에게 수정 요청 전송

 

 고독방이란 ?
    카카오톡 등 SNS에서 아이돌 덕후들이 스타를 응원하기 위해 만든 오픈 채팅방으로 텍스트 채팅없이 오직 짤로만 대화하는게 특징이다

  • 고독방 
    • 고독방 생성
    • 고독방 필터링
      • 1차 : 검색
      • 2차 : 전체 / 내가 개설한 / 즐겨찾기(좋아요)
      • 3차 : 최신 대화순 / 좋아요 순
      • 3차로 구성된 필터링을 통한 자신이 원하는 조건의 고독방 서치 가능
      • ex) "짱구"를 검색한 후, 즐겨찾기, 좋아요순을 누른다면 짱구 고독방 5개중 좋아요한 3개의 고독방을 좋아요 순으로 정렬해줌
    • 고독방 디테일
      • 방장, 고독방제목, 고독방 소개, 고독방 해시태그, 최신 대화시간, 나의 좋아요 여/부, 좋아요 총 개수 조회 가능
    • 고독방 내부
      • 과거 채팅 기록 불러오기
      • 고독방 좋아요/좋아요취소 가능
      • 서치모달에 본인의 보드를 포함해서 랜덤짤 출력
        • 고독방 내부에선 짤 클릭시 짤 디테일로 가는게 아닌 전송 유무를 표시
      • 나의 메세지와 다른 유저의 메세지 구분
      • 채팅을 친 사람이 방장이라면 방장표시
      • 채팅 시간 표시
    • 고독방은 3주 이상 활동이 없는 방이면 자동 삭제

 

 

 

  • 프로필
    • 내 정보 수정을 통해 닉네임 수정
    • 팔로워, 팔로잉 확인 가능
      • 다른 유저의 프로필이라면 팔로잉가능
    • 자신의 프로필 이미지, 아이디, 닉네임, 관리자 여/부 확인 가능
    • 짤BTI 확인 가능
      • 고독방 내 짤 사용, 보드 저장 데이터를 통해 짤BTI 출력
      • ex) TV와 관련된 데이터 빈도수가 높다면 짤BTI에 '뭐해? 나 누워서 TV봐..' 가 나옴
      • 해당 데이터를 apex graph를 통해 시각화
    • 자신의 제목학원 수상내역 확인가능
      • 제목학원에서 수상한 기록들이 저장됨
      • 인기순/최신순 정렬가능
    • 유저가 저장한 보드 확인 가능
      • 자신의 프로필이라면 보드 이름 수정, 보드 내부 짤 삭제 가능

 

 

 

  • 짤 업로드
    • 원하는 짤 선택 후 태그와 유래 링크 입력 후 관리자에게 업로드 요청

 

  • 관리자 기능
    • 유저의 업로드 요청, 짤 수정 요청을 확인 가능
    • 승인이 5회 이상이라면 수정,업로드 반영
    • 한명이라도 거절을 누르면 요청 취소

  • 기타 기능
    • 다크모드
      • 모든 UI가 다크모드로 바뀜 
        • 서치 모달
          • 랜덤 짤방 출력
          • 롱클릭 시 조회수, 즐겨찾기 유/무 확인, 보드 저장
          • 스크롤 이동 시 무한 스크롤
          • 검색
        • 보드 모달
          • 보드 추가 가능
          • 원하는 보드에 다중 저장 가능
        • 404페이지 / 500페이지 / 로그인 필요 페이지

 

프로젝트 명

  • Willump TV

진행기간

  • 2022.11.16 ~ 2022.11.24

팀원 구성

  • front-end(1명) : 김준영(팀장)
  • back-end(1명) : 박태신

기술 스택

  • front-end
    • HTML / CSS
    • JavaScript
    • Vue
  • back-end
    • Python
    • Django

활용 API

  • TMDB
  • Youtube API

서비스 기능

  • 회원
    • 회원가입
    • 로그인
    • 마이페이지
    • 포인트
  • 메인페이지
    • 추천영화 소개
    • 장르별 영화 분류
    • 영화 검색 기능
  • 영화 상세정보
    • 해당 영화의 이름 + '결말 포함' 으로 검색된 해당 영화의 유튜브 링크
    • 출연진 소개
    • 댓글 입력
  • 명장면 게시판
    • 본인이 생각하는 해당 영화의 명장면과 본인의 생각을 적은 카드 생성
    • 카드 상세정보

 


프로젝트 소개

우리 팀만의 특색을 살리고 싶어서 평소에 사용하진 않지만 이름은 익히 들어온 누누TV를 모티브로 B급 감성(영상으로 보면 무엇이 B급감성인지 알것이다.)으로 컨셉을 잡은 Willump TV다.

해당 프로젝트에서는 회원별 영화 추천 알고리즘이 있는데, 커뮤니티 기능인 명장면 게시판을 이용하여 작성을 했을 시, 해당 영화의 장르를 바탕으로 영화들을 추천해준다.

 

 

WillumpTV 소개영상

WillumpTV 소개영상

 

 

 

 

 


프로젝트를 하며 느낀 점..

9일동안 프로젝트를 진행하면서 팀원과 나의 실력이 부족하다고 생각해 걱정이 앞섰는데, 일단 부딪히고 보자라는 마음으로 첫 날 오전에 설계를 시작했고, 당일 오후에 바로 구현에 돌입했다. 하지만 돌이켜보면 이 방법은 20%는 맞고 80%는 틀렸다고 생각한다.

일단 부딪히고자 하는 마음만은 좋았으나 프로젝트를 진행하면서 계속해서 설계의 중요성을 절실하게 깨달았기 때문이다.

1일 차에 영화 추천 사이트를 만들 때 필요한 기능이 아닌 넣을 수 있는 기능을 우선으로 생각했고, 그렇기에 구현해야 할 것들이 엄청 많아지면서 데이터 DB를 어떻게 짜야 할 것인지 테이블간 관계는 어떻게 할 것인지 설계를 완벽하게 했어야 했고, 그렇게 완성된 ERD를 바탕으로 최적의 컴포넌트를 구성했어야 했었으나, 주먹구구식으로 할 수 있는 기능 부터 구현했다가 다음 구현해야 할 기능에서 그에 해당하는 데이터 베이스가 없어서 DB를 다시 만드는 경우도 생겼고, 정돈이 안된 설계로 컴포넌트가 끝없이 증식되는 기적을 볼 수 있었다... 

9일 이라는 시간안에 프로젝트를 끝냈어야 했기에 끝없는 절충의 절충을 거치며 개인적으로는 초기 설계에비해 많이 아쉬운 결과물이 나왔으나 어떻게 첫 술에 배부르랴.. 첫 번째 프로젝트에서 굉장히 많은 것을 배워갔다고 생각한다.

(매일 같이 당일의 회고록을 MarkDown을 작성하고자 했으나 중반 이후로는 시간이 촉박하여 후에 여유있을 때 새로 작성하자는 마음으로 키워드 위주로 작성했는데.. 굉장히 후회했다.. 블로그에 다시 정리해서 올릴 때 무슨 생각으로 이 키워드를 적었는지조차 기억이 안나서 컴포넌트를 돌아다니면서 코드를 다시 전부 들여다보고 작성하는 비효율의 극치..)

강사님이 설계의 중요성을 그렇게 그렇게~~ 강조했는데 꼭 그걸 몸으로 경험해봐야 알아버린 나... 다음에는 그러면 안된다는걸 뼈저리게 느꼈다... 앞으로 진행될 프로젝트에서는 같은 실수를 반복하지 말아야겠다고 다짐했다.

 

 

 

아래는 해당 프로젝트의 깃허브 링크이다.

 

https://github.com/ats166/-PJT-WillumpTV
 

GitHub - ats166/-PJT-WillumpTV

Contribute to ats166/-PJT-WillumpTV development by creating an account on GitHub.

github.com

 

+ Recent posts