project logo
TaskStock

주식과 Todo 서비스를 결합한 웹 플랫폼

  • 민세원
  • 김선우
  • 안정근
  • 오지수
  • 정환희
project logo
Pirot

깔 - 끔한 업무용 채팅 웹 서비스, 피롯입니다.

  • 양원채
  • 김선우
  • 박석류
  • 장민서
  • 정혜인
project logo
마이패스

나만의 경험공유 플랫폼. 마이패스입니다.

  • 장준석
  • 김도은
  • 백서경
  • 이정한
  • 채리원
project logo
Taxi_ROKA

군인들을 위한 택시 동승 인원 매칭서비스

  • 노영진
  • 김현수
  • 백승민
  • 오경린
  • 이현지
project logo
Daily VS

매일 매일 투표와 통계로 느끼는 즐거움

  • 김정곤
  • 송우진
  • 왕한솔
  • 조성민
  • 곽민경
project logo
TaskStock

주식과 Todo 서비스를 결합한 웹 플랫폼

  • 민세원
  • 김선우
  • 안정근
  • 오지수
  • 정환희
portfolio-screenshot portfolio-screenshot
About Us
Problem

우리는 모두 성장하고 싶어합니다. 그런데 성장은 하루아침에 이루어지는 것이 아니라, 하루하루가 쌓여서 장기적인 성과가 나타나는 것입니다. 사람들이 쉽게 중독되는 술, 담배, 게임의 경우 우리에게 도파민 분비와 같은 즉각적인 보상을 줍니다. 그러나 성장의 경우, 즉각적인 보상보다는 견뎌야 하는 숙제로 인식될 수 있습니다.
우리는 이러한 문제점을 해결하기 위해, TaskStock이라는 서비스를 개발하였습니다. 사용자들은 TaskStock에서 성장의 기반이 되는 매일의 성과들을 달성하고, 달성할 때마다 즉각 가치가 지급되는 보상을 받을 수 있습니다. 이를 통해 나만의 성장 그래프를 그려나가며 성장의 정도를 가시적으로 확인하고, 이를 다른 유저들과 비교하며 상호작용할 수 있습니다.

Solution: 기능들

1. Todo 기능: 사용자는 자신의 목표를 설정하고 해당 목표를 달성하면 완료 체크합니다.

2. 난이도 반영: 사용자는 목표의 난이도에 따라 5개 레벨 중 하나를 선택하여 설정합니다. 설정한 레벨에 따라서 완료 시에 획득하는 가치가 달라집니다.

3. 사용자가 목표를 달성하면 설정한 레벨에 따른 가치가 상승하고, 사용자가 상승한 가치에 기반한 그래프가 즉각적으로 형성됩니다.

4. 그룹 기능: 사용자는 다른 사용자들과 친구를 맺을 수 있으며, 그룹을 만들어 함께 목표를 달성하고 가치를 획득할 수 있습니다.

5. 프로젝트 기능: 사용자는 프로젝트를 생성하고 그에 따른 할 일을 생성합니다. 프로젝트가 마무리되면 회고록을 작성하며 장기적인 성장을 돌아봅니다.

Tech

백엔드의 경우 python 기반 프레임워크인 Django를 사용했고, 프론트엔드는 바닐라 자바스크립트로 구현했습니다. 디자인적으로는 할 일을 완료 체크하면 즉각적으로 그래프에 반영되고, 사용자의 가치를 나타내는 숫자를 바로바로 업데이트하여 즉각적인 피드백을 구현하는 데에 집중했습니다. 주식 그래프는 apexcharts.js라는 라이브러리를 사용하였으며, 반응형을 꼼꼼하게 구현하여 웹 서비스지만 모바일, 태블릿, PC에 완벽하게 최적화되어 있습니다. 백엔드에서 글로벌 대응을 위해서 파이썬의 arrow 모듈을 사용하였고 각종 스케줄링된 작업은 django apscheduler를 이용해 구현했습니다. 배포는 AWS EC2를 이용하여 진행했습니다.

Team

민세원: 팀장, 백엔드
정환희: UI/UX, 프론트엔드 총괄
안정근: 백엔드 총괄
김선우: 프론트엔드
오지수: 프론트엔드

project logo
Pirot

깔 - 끔한 업무용 채팅 웹 서비스, 피롯입니다.

  • 양원채
  • 김선우
  • 박석류
  • 장민서
  • 정혜인
portfolio-screenshot
portfolio-screenshot
portfolio-screenshot
About Us
Problem

피로그래밍 활동에 필요한 여러 채팅방이 사적인 채팅방과 뒤섞여 정보를 취득•검색하기 어려운 상황에 다가오는 불편함을 해소하고자 하였습니다.
상용화된 업무용 채팅 서비스는 많지만, 광범위한 용도로 활용되다 보니 불필요하게 많은 기능들과 함께 대화형이 아닌 공지형 채팅의 형태를 띠고 있어 우리 동아리가 사용하기에는 부담스럽게 다가왔습니다.
과도하게 많은 기능을 소거하고 우리 동아리에게 꼭 필요한 기능을 집약하여 피로그래밍 동아리만을 위한, 나아가 개발 프로젝트 동아리를 위한 업무용 채팅 서비스를 기획하게 되었습니다.

Solution

피롯(Pirot)은 개발 동아리에게 꼭 필요한 핵심 기능만 담기로 기획하였습니다.

✅ 코드 스니펫 전송
✅ 마크다운 문법 채팅 지원
✅ Visual Studio Code 코드 입력창 지원
✅ 이미지 전송 및 저장

✅ 단체 채팅방, 익명 채팅방, 개인 채팅방 개설 및 초대, 퇴장
✅ 익명 채팅방 프로필 익명성 강화
✅ 채팅방 별 게시글 작성 및 공감
✅ 채팅방 입력창 잠금

✅ 채널 개설 및 관리
✅ 채널 기본 프로필 지정
✅ 채널 운영진 권한 관리
✅ 채널 구성원 퇴출
✅ 개인 프로필 설정
✅ 라이트 모드, 다크 모드, Black & White 모드

Tech

- 채팅 기능 구현
Django에서 채팅을 구현할 수 있는 손 쉬운 라이브러리인 Django Channels가 존재했지만 Django 프로젝트 이후에도 채팅 시스템 구축에 도움이 되는 하나의 공부가 되었으면 하는 마음에 실시간 양방향 소켓 통신 분야에서 가장 활용도가 높은 Socket.IO를 접목하였습니다.
Socket.IO와 Django를 함께 사용한 프로젝트가 많이 존재하지 않아 새로운 도전이 되었습니다.
피롯은 SSR로 구현이 되었으며 따라서 소켓 클라이언트 코드는 JavaScript로 작성한 뒤 웹 브라우저에게 전달하여 Python 코드로 구현된 소켓 서버와 통신하는 방식으로 구축하였습니다.

- 채팅 페이지네이션 구현
채팅방에 들어갔을 때 채팅 내역 전체가 보여지는 것이 아니라 최근 채팅 20여개를 먼저 읽어들인 후 스크롤이 올라간 경우 그 이전 채팅 20여개를 다시 읽어들이는 페이지네이션을 구현하였습니다.
채팅 페이지네이션을 구현하기 위해 말풍선은 위에서 아래로 쌓이는 것이 아니라 아래에서 위로 쌓이는 방식을 선택하였으며 Vanilla JavaScript의 Ajax로 구현하였습니다.

- 마크다운 문법 채팅 지원
Python-Markdown 라이브러리를 활용하여 평이한 텍스트 형태의 채팅이 아니라 마크다운 문법을 지원하는 채팅을 구현하였습니다.
간단한 마크다운 문법을 활용하여 채팅을 이용할 수 있어 텍스트의 강조 표시, 리스트 표시, 그리고 가장 중요한 코드스니펫을 전송할 수 있게 되었습니다.
개발 동아리 특성 상 자주 코드 스니펫을 전송하게 되는데 텍스트로 전달되는 것보다 Pygments 라이브러리를 활용한 코드스니펫 스타일링까지 더하여 전달되는 것이 더욱 가독성 좋고 원활한 소통에 기여할 수 있을 것으로 전망하고 있습니다.

- 채팅방 실시간 게시판 구현
채팅의 특성 상 대화가 많아지면 중요한 글이 묻히는 경우가 다반사였습니다. 피롯은 이러한 불편함을 해소하고 세션 진행 시 진행자의 편의를 도모하고자 각 채팅방에 실시간 게시판을 구현하였습니다.
채팅방 실시간 게시판 또한 채팅과 마찬가지로 소켓 통신으로 구현이 되었으며 게시글에는 각각 '기뻐요'와 '슬퍼요'를 남길 수 있습니다.

- 회원 인증: Naver Cloud Platform SMS 문자 인증
동아리 내부 메신저이므로 보안 유지가 매우 중요한 서비스입니다. 따라서 채널 내 익명채팅방을 제외하고 모든 활동은 실명으로 진행되어야 했습니다.
소셜로그인 기능을 통해 가입자의 실명 정보를 얻고자 하였으나 실명 정보를 취득하기 어려워 회원가입 시 SMS 문자 인증을 하는 것으로 구현하였습니다.

Team

양원채 [팀장] [백엔드] [채팅]
김선우 [팀원] [프론트엔드]
박석류 [팀원] [프론트엔드] [디자인]
장민서 [팀원] [백엔드] [채팅]
정혜인 [팀원] [백엔드] [인증]

project logo
마이패스

나만의 경험공유 플랫폼. 마이패스입니다.

  • 장준석
  • 김도은
  • 백서경
  • 이정한
  • 채리원
portfolio-screenshot
portfolio-screenshot
portfolio-screenshot
About Us
Problem

어떤 분야를 가던 잘하고 싶지만, 어떻게 해야할지 몰라 막막해 하는 사람들을 타깃으로 잡았습니다. 예를 들어 프로그래밍을 잘 하고 싶지만 어떻게 해야할지 모르겠다. 처럼 말이죠. 인터넷에 검색해보면 카페나 유튜브 등을 통해 많은 정보를 접할 수 있지만, 정작 너무 많은 정보가 있기 때문에 한눈에 파악하기도 어렵고, 원하는 정보만 손쉽게 얻을 수 없다는 문제가 있었습니다.

Solution

그 분야에 경험이 있는 사람들이 자신의 경험을 패스라는 아이템으로 제작해서, 공유할 수 있도록 했습니다. 패스는 기본적으로 단계별로 이루어진 다이어그램인데요, 경험을 패스로 시각화함으로써 그 사람이 어떤 것들을 준비했는지를 효과적으로 파악할 수 있고, 작성하는 사람 또한 이러한 패스를 제작함으로써 자신을 알릴 수 있는 기회를 만들어서, 계속해서 패스를 작성하는 유인을 만들고자 했습니다.

Tech

백엔드와 프론트엔드 모두 django와 바닐라 자바스크립트로 구현했습니다. 배포 프로세스는 대부분 AWS의 인프라를 활용했는데요, DB는 postgreSQL를 AWS RDS로 호스팅, WAS는 Docker 플랫폼으로 AWS elastic beanstalk에서 호스팅했고 , 파일서버의 경우에는 AWS S3을 사용해 스태틱 파일과 미디어 파일을 serving하도록 했습니다.

Team

장준석: 팀장. 백엔드 총괄
백서경: 기획, 프론트엔드
김도은: 프론트엔드 총괄
이정한: 백엔드, 서비스 개발
채리원: 백엔드, 서비스 개발

project logo
Taxi_ROKA

군인들을 위한 택시 동승 인원 매칭서비스

  • 노영진
  • 김현수
  • 백승민
  • 오경린
  • 이현지
portfolio-screenshot portfolio-screenshot
About Us
Taxi_ROKA

안녕하세요. 저희는 웹 개발 동아리 피로그래밍 19기 Taxi_Roka팀 입니다. 합승 매칭을 통한 군인들의 택시비 절감을 목표로 택시로카 서비스를 출시하게 되었습니다.

택시로카는 장성에 위치한 상무대를 기점으로 서비스를 운영 중인 국내 유일의 군인 택시 동승 인원 매칭 서비스입니다. 2019년 군인들의 휴대폰 사용이 가능해졌고 2022년 택시 합승이 합법화 되면서 시작한 택시로카는 택시 동승 인원 매칭 서비스의 선두 주자가 될 수 있었습니다.

Problem

의무복무 중인 군인들이 먼 부대까지 택시를 부르는 과정과 비용에 대한 걱정, 택시 기사님과의 트러블 등 다양한 문제가 발생하는 현장을 직접 경험하였고 그 중에서 택시비용에 대한 문제를 해결하기 위해 택시로카 서비스를 기획하였습니다.
‘택시로카’ 가 가장 먼저 해결하고자 하는 문제는 택시 비용 문제입니다. 국군 장병들이 가장 걱정하는 것도 바로 택시비용입니다. 택시를 혼자 타고 갈 경우, 대중교통이 편리한 도심까지 나가는 것만 해도 군인들은 택시비용에 큰 부담을 느낍니다.
택시를 이용해야만 했던 부대에서 근무하신 분들이라면, 같이 택시를 타고 나갈 인원을 구해본 경험이 있을 거라고 생각합니다. 휴가를 나갈 때 휴가 출발 날짜가 같은 사람을 자신이 속한 중대 안에서 찾기란 쉽지 않습니다. 그래서 같은 장소에서 출발하지만 서로 다른 택시를 각자 타고 가고 있는 경우가 매우 많습니다. 부대의 특성상 다른 부대의 병사와는 일절 접촉이 없기 때문에 같은 시간에 같은 장소를 가는 타부대 병사가 있다고 하더라도 알 방법이 없습니다. 그래서 각자 택시를 따로 타고 가야 하는 비경제적인 상황이 발생하는 것입니다. 택시로카팀은 이 부분에서 가치 잠식 발생된다고 생각하였습니다.

Solution

택시 비용 문제를 해결하기 위해서 제가 생각한 해결 방안은 택시 카풀입니다. 같은 위병소를 사용하지만 부대가 다른 경우, 같은 부대지만 서로 잘 모르는 경우가 서비스 이용 대상입니다. 현재 휴가나 외박, 외출 시 택시를 이용하는 군인들이 서비스의 주요 이용자이고, 비용 절감이 이루어졌을 때 대중교통에 불편함을 느끼고 있던 군인들 또한 저희의 잠재 고객층이 될 수 있습니다.

저희는 상무대를 기점으로 육군훈련소, 신병교육대, 후반기 교육대로 시장을 넓혀나갈 것이며 결국은 택시로카 서비스를 필요로 하는 모든 부대로 확장해 나가는 것이 목표입니다. 택시로카는 장성에 위치한 후반기 교육 부대에서 서비스를 시작하여 간부교육생, 훈련병, 기간병을 통해 전국 각지로 서비스를 확장시킬 계획입니다.

Team

- 노영진 (Team Leader) : 기획과 개발을 담당하고 있습니다. 택시로카 서비스를 사용자 경험 측면에서 기획하고 서비스 개발 전부터 완료 후까지 프로젝트의 전체 여정을 관리합니다. 법적인 문제 해결 방안 고안 및 서비스 홍보 방안을 기획하고 있습니다.
- 이현지 (Back-end) : 서비스의 아키텍처 설계 및 Django Channels를 활용하여 택시로카의 채팅 기능을 담당하고 있습니다. 실시간 채팅과 db 설계를 통해 유저 간 원활한 채팅을 지원합니다.
- 김현수 (Back-end) : 로그인 기능과 서비스 배포를 담당하고 있습니다. 서비스 가입 시 이탈률을 줄이고 재방문율을 높이기 위해 자체로그인 뿐만 아니라 다양한 소셜로그인 기능을 구현합니다. AWS에 서비스를 배포하고 전체적인 기능 개선 및 유지 보수를 하고 있습니다.
- 백승민 (Back-end) : 서비스의 핵심 기능인 매칭 기능과 권한 관리 기능을 구현을 담당하고 있습니다. 서비스의 전체적인 로직을 구현하고 역할 기반 및 속성 기반 권한 제어 및 예외 처리를 통해 오류를 찾고 이를 개선하고 있습니다.
- 오경린 (Front-end) : 팀에서 프론트엔드 개발과 디자인을 담당합니다. 이용자가 웹 서비스를 쉽게 이용할 수 있도록 디자인하고 화면을 구성합니다.

project logo
Daily VS

매일 매일 투표와 통계로 느끼는 즐거움

  • 김정곤
  • 송우진
  • 왕한솔
  • 조성민
  • 곽민경
portfolio-screenshot
About Us
Planning

저희 Daily VS는 일상 속에서 일어나는 의견이 갈릴 만한 주제에 대해서 사람들이 투표를 진행하고 그에 맞는 통계를 접했을 때 재미를 느낄 것 이라는 가정에서부터 시작을 하였습니다. 또한 성별, MBTI, 등 등의 카테고리별 통계가 존재한다면 조금 더 흥미로운 통계를 제공 가능하다고 생각하였습니다. MBTI별 민초 반민초 비율이 어떻게 다를지 생각해보신적 있으신가요? 남성은 제육볶음을 선호하고 여성은 마라탕을 선호한다에 대해서는 어떻게 생각하시나요? 사람들이 이러한 궁금증을 해결하며 의견을 나눌 수 있는 토론의 장을 마련한다면 WEB의 특성 상 한순간에 유행이 될 만한 product라 확신 하였습니다.

Development

저희 팀은 백엔드 개발자 3명, 프론트엔드 개발자 2명으로 구성되었습니다. 모든 팀원이 이 프로젝트의 가능성을 보고 지원을 하였으며, 프로젝트의 독특함 만큼이나 각 팀원들의 개성이 돋보였습니다. 디자인 감각이 뛰어난 민경, 기술적 역량이 돋보였던 한솔, 기획에서의 능력을 보여줬던 성민, 홍보에서 큰 기여를 한 우진, 그리고 팀장인 정곤이 모여 일을 하니 어떤 어려움도 해결 가능 했습니다. Daily VS 프로젝트의 취지에 맞게 모두가 의견을 공유하는데 있어서 자유로운 분위기였으며 모든 기획 및 기술 관련 딜레마는 팀원들과 함께 해결하였습니다.

Product

3주간의 여정이 끝나고 최종발표까지 이틀이 남은 시점에 저희 팀은 배포에 성공하였으며 즉시 홍보에 들어갔습니다. 그 결과로 저희는 단 2일만에 80명의 유저, 1000개 이상의 투표, 200개 정도의 댓글을 모을 수 있었습니다. 저희 공식 인스타그램 DM으로 많은 분들이 굉장히 재미있다며 호평을 해주셨고, 저희 웹페이지가 굉장한 포텐셜을 지님을 즉시 확인할 수 있었습니다. 이러한 가능성을 확인한 저희 팀은 최종발표가 끝나고 총 3명의 팀원이 이 프로젝트를 추가 개발하기로 마음 먹었습니다.

Further Development

아이디어에 더욱 더 확신이 생긴 저희 팀은 피로그래밍 18기 일원이자 19기 교육팀장을 맡은 박신빈님을 영입하여 일에 착수하였습니다. 피로그래밍이 끝나고 각자의 일상으로 돌아간 후에도 저희 팀은 매주 1회 대면으로 만나 회의, 기획 및 개발을 하였고 드디어 2023/11/13 모든 준비를 마친 후 최종 배포 예정입니다. 배포 후 저희 웹사이트가 얼마나 빠른 속도로 성장할지는 아무도 모르지만, 모든 팀원이 애정을 쏟은 프로젝트인 만큼 모두 기대해주시면 감사드리겠습니다.
사이트 도메인: daily-vs.com