"1분반-팅글(tingle)"의 두 판 사이의 차이

2025년 12월 16일 (화) 03:46 판

프로젝트 개요

과제 팀명

TINGLE

지도교수

박관용 교수님

개발기간

2025년 3월 ~ 2025년 6월 (총 4개월)

구성원 소개

서울시립대학교 컴퓨터과학부 2020920039 이강민(팀장)

서울시립대학교 컴퓨터과학부 2020920030 서동준

서울시립대학교 컴퓨터과학부 2020920059 조종빈

서울시립대학교 행정학과 2021120009 김고은

서론

개발 과제의 개요

가. 개발 과제 요약

본 과제는 대학생 소속 인증 기반 매칭 플랫폼(Tingle)을 개발하는 것을 목표로 한다.기존의 불특정 다수를 대상으로 한 데이팅 애플리케이션이 지닌 신뢰도 부족 및 안전성 미흡의 문제점을 개선하고자 한다. 이를 위해 학교 이메일을 활용한 소속 인증 절차를 도입하여 사용자의 신뢰성을 확보하며,관심사 기반 매칭 시스템과 직관적이고 간결한 UI/UX를 제공함으로써 이용 편의성을 높인다. 또한 본 플랫폼은 단순한 이성 간 만남을 넘어,동아리, 스터디, 취미 교류 등 비교적 가벼운 목적의 만남을 지향한다.이를 통해 온라인 환경에서 대학생 간의 안전하고 활발한 교류를 촉진하는 것을 궁극적인 목표로 한다.

나. 개발 과제의 배경 및 효과

◇ 기존 매칭 서비스는 허위 계정·불투명한 이용자 정보 문제로 인해 신뢰성이 낮고, 대학생 집단에 특화된 기능이 부족하다.◇ 대학생 전용 인증 시스템을 적용하면, 이용자 신원 보장 및 불법적·비건전 활동 차단이 가능하다.◇ 안전한 교류 환경 제공을 통해 대학생들의 사회적 관계망 확장을 돕는다. ◇ 궁극적으로는 기존 매칭 플랫폼이 제공하지 못한, 대학생 맞춤형 소셜 경험과 긍정적 만남 문화 형성을 달성할 수 있다.

다. 개발 과제의 목표와 내용

◇ 대학생 인증 체계(학교 이메일, 재학 여부 검증 등)를 도입하여 신뢰성 있는 사용자 풀을 확보한다. ◇ 관심사·전공·가치관 기반 매칭 알고리즘을 통해 단순 이성 매칭을 넘어, 다양한 교류 형태를 지원한다. ◇ 사용자 피드백과 데이터 분석을 바탕으로 매칭 품질을 지속적으로 고도화한다. ◇ MVP 검증을 거쳐 장기적으로는 매칭을 넘어, 스터디·취미·커뮤니티 기능까지 확장하여 대학생 전용 플랫폼으로 발전시킨다.

라. 개발과제의 경제적 및 사회적 파급효과

본 개발과제는 대학생 소속 인증 기반 매칭 플랫폼 Tingle을 통해, 기존 매칭 서비스의 신뢰도 및 안전성 한계를 개선하고 대학생 맞춤형 소셜 플랫폼의 가능성을 제시한다.대학생 인증을 기반으로 한 차별화된 사용자 풀을 확보함으로써, 향후 프리미엄 매칭 및 커뮤니티 확장 등 지속 가능한 서비스 성장과 경제적 가치 창출이 기대된다.또한 안전한 교류 환경을 조성하여 대학생들의 사회적 관계망 확장을 지원하고, 건전하고 긍정적인 온라인 만남 문화를 형성하는 데 기여할 수 있을 것이다.의 개요===

설계

사용자 요구사항

번호	요구사항	D or W	우선순위(상/중/하)
F1	랜딩 페이지 - 프로덕트 랜딩 페이지 UI 렌더링 - 로그인/회원가입 페이지 이동	D	중
F2	로그인/회원가입 페이지 a. 로그인 페이지 - ID/PW 입력창을 통한 로그인 기능 - 로그인 유저 검증 및 라우팅	D	상
F2	b. 회원가입 페이지 - ID 중복 여부 검증 - 비밀번호/비밀번호 재입력 검증	D	중
F3	정보입력 및 대학교 인증 페이지 a. 정보 입력 페이지 - 닉네임 입력 - 생년월일 입력 - 성별 입력 - MBTI 입력 - 학과 입력 - 학번 입력 - 카카오톡 ID 입력 - 관심사/취미 입력 - 졸업 여부 입력 - AI 이미지 생성 및 입력 - AI 이미지 생성 횟수 제한 검증 - 프로필 form 제출 검증 b. 대학교 인증 페이지 - 인증 메일 재발송 횟수 검증 - 입력 인증 번호 검증	D / W	상
F4	마이페이지 - 본인 프로필 조회(보유 코인, 매칭 횟수 등) - 상세 프로필 수정 및 AI 이미지 재생성 - 로그아웃, 회원 탈퇴 기능	D	상
F5	코인 충전 페이지 - 사용자가 보유한 코인 표시 - 상품 목록 표시 및 코인 충전 기능	D	중
F6	유저카드 목록 페이지 (목록 보기) - 접속했을 시, 필터링이 적용되지 않으며 등록 최신순으로 등록된 유저 카드가 보인다.	D	상
	- 카드는 스와이프 형태 또는 하단의 X/하트 등의 버튼을 통해 친구 신청 및 패스를 조작할 수 있다.	W / D	하
	- 친구 신청(X/하트) 외에, 유저를 찜할 수 있다.	W / D	하
	- 유저 카드에는 닉네임, 나이, 성별, MBTI, 학과, 학번, 관심사 및 취미, 졸업·재학 여부, AI 생성형 이미지가 보여진다.	D	상
F7	유저카드 목록 페이지 (필터링) - 나이/성별/학과/졸업·재학 여부에 대한 정보를 기반으로 목록을 필터링할 수 있다.	D	중
F7	- 필터링 여부는 상단에 chip 형태로 볼 수 있으며, 초기화 버튼을 통해 한 번에 해제 가능하다.	W / D	하
F8	나를 관심있어 하는 유저 보관함 - 유저카드 목록에서 나에게 친구 신청을 보낸 유저들의 목록을 볼 수 있다. (일부 프로필 카드 정보 + 카톡 ID 제공)	D	상
	- 관심을 보낸 친구에 대해서, 유저에게 개별적으로 카카오톡 ID를 통한 매칭을 성사시킨다.	D	상
	- 별도의 거절 없이 개별 카드는 3일의 보관 기간을 가지며, 이후에는 자동으로 삭제된다.	W	하
	- 나를 관심있어 하는 유저가 생길 때, 푸시 알림이 전송된다.	W	하
	- 아직 친구 신청을 보내진 않았지만, 몇 명의 친구가 나를 찜했는지(관심친구로 설정했는지) count를 좌측 상단에 공개한다.	W	하
F9	내가 찜한 유저 보관함 - 찜한 유저들을 따로 모아둔 목록으로, 유저 카드 목록과 마찬가지로 해당 페이지 내에서 친구 신청이 가능하다.	W	하
F6-메인	메인 페이지 a. 상단 상태 표시 영역 - 사용자 상태 정보 표시 - 각 항목별 클릭 이벤트 처리 - 남은 코인 → 마이페이지(프로필) 이동 - 오늘 받은 좋아요 → 보관함 이동 - 내가 보낸 좋아요 → LIKE 페이지 이동	D	상
	b. 탐색 구역 카테고리 구성 - 기본 무작위 탐색 구역 - 친구찾기/연인찾기/취미찾기 등 카테고리 구역 구성	D	하
	c. 하단 네비게이션바 - 홈(둘러보기)/보관함/LIKE/마이페이지 탭 구성 - 선택된 탭 강조 표시 및 탭 간 이동 기능 구현	D	상

사용자 요구사항 만족을 위한 기능 정의 및 기능별 정량목표

본 목표는 프론트엔드·백엔드·AI의 주요 성능 및 품질 지표를 정량화하여,서비스의 안정성, 반응성, 품질 신뢰성을 객관적으로 평가할 수 있는 기준으로 활용된다.

클라이언트(Client)

구분	항목	목표 기준	비고
Q1. 성능 지표	INP (Interaction Next Paint)	80% 이상 달성	사용자 상호작용 응답 속도
	LCP (Largest Contentful Paint)	80% 이상 달성	주요 콘텐츠 로드 속도
	CLS (Cumulative Layout Shift)	80% 이상 달성	시각적 안정성 확보
Q2. 테스트 품질	UI Test 커버리지	90% 이상 달성	주요 컴포넌트 자동화 테스트 포함
Q3. 안정성 관리	센트리(Sentry) 기반 에러 모니터링	정상 구축 및 실시간 대응 가능	에러 발생 시 Slack/Webhook 연동 알림

서버(Server)

구분	항목	목표 기준	비고
Q1. 응답 성능	주요 API 응답 속도	300~500ms 이내	평균 응답 시간 기준
Q2. 처리 안정성	트래픽 처리 능력	50~150 RPS 수준에서 오류 없이 처리	부하 테스트 기준
Q3. 데이터 성능	주요 조회 쿼리 응답 속도	200ms 이내	병목 현상 없이 처리
Q4. 복구 신속성	서버 재시작 / DB 연결 복구 시 정상화 시간	30초 이내	자동 재연결 및 헬스체크 로직 적용

인공지능(AI)

구분	항목	목표 기준	비고
Q1. 응답 성능	이미지 생성 요청 응답 시간	10초 이내	프롬프트 입력 후 결과 수신까지
Q2. 정확도 및 품질	생성 이미지의 프롬프트 반영도	80% 이상	부하 테스트 기준
Q2. 정확도 및 품질	이미지 시각적 완성도	유저 만족도 80% 이상	샘플 기반 품질 검증
Q3. 처리 안정성	동시 요청 처리 성능	5~10건 동시 요청 시 성능 저하 없음	서버 스케일링 및 큐 시스템 적용

시스템 모듈 목표

◇ 서버 장애 복구 자동화 모듈 (Self-Recovery System) 서버 재시작이나 DB 연결 장애 발생 시, 자동으로 서비스 복구 루틴을 수행하는 스크립트를 구축한다.

- 장애 발생 시 즉시 헬스체크 수행 → 자동 복구 트리거 - “30초 이내 정상화” 지표 달성 가능 - 에러 로그는 Sentry로 자동 전송 - 지표 대응: 서버 안정성, 에러 모니터링 항목

기능 구현을 위한 세부기술 선택사항 (디자인)

◇ 스와이프 카드 인터랙션 UI (Swipe-based Matching Interface) 사용자는 카드 형태로 표시된 친구 프로필을 스와이프(좌·우) 하거나, 하단의 버튼을 눌러 손쉽게 친구 신청 또는 패스를 할 수 있다.. 이를 통해 간결하고 직관적인 상호작용을 제공하며, INP(Interaction Next Paint)와 UI 반응성을 높인다.

- UX 향상: 직관적인 카드 인터랙션으로 사용자 몰입도 상승 - 성능 지표 대응: INP 80% 이상 달성 (터치 이벤트 반응 최적화) LCP, CLS 개선 (부드러운 애니메이션 적용): - 기술 포인트: 이벤트 버블링 최소화로 지연 없는 터치 반응 UI 테스트를 통해 커버리지 90% 이상 확보

소프트웨어 설계

본 서비스는 AWS 기반 인프라로 구성되어, Route53과 CloudFront를 통해 안정적인 트래픽 처리와 빠른 콘텐츠 제공을 지원한다.백엔드는 EC2 환경에서 Django 서버로 운영되며, RDS를 통해 사용자·매칭·인증 데이터를 안정적으로 관리하고 SES를 활용해 이메일 인증을 수행한다.또한 ERD는 사용자, 프로필, 관심사, 매칭, 인증 등 핵심 도메인을 중심으로 설계되어, 대학생 소속 인증과 주기적 매칭 흐름을 효율적으로 지원하도록 구성되었다.

결과 및 평가

완료 작품 소개

가. 서비스 소개 페이지

Tingle 서비스의 기획 배경, 주요 기능, 서비스 목적을 전반적으로 확인할 수 있는 소개용 페이지

번호	화면 명	화면 설명
1	서비스 시작 화면	서비스 로고와 슬로건을 노출하여 Tingle의 정체성과 목적을 전달하는 초기 진입 화면
2	로그인 화면	학교 이메일과 비밀번호를 통해 기존 사용자가 로그인하는 화면
3	회원가입 화면	이메일 중복 확인 및 비밀번호 조건 안내를 포함한 회원가입 화면

실행(run)

가. SW 와이어 프레임 별 화면 설명

번호	화면 명	화면 설명
1	서비스 시작 화면	서비스 로고와 슬로건을 노출하여 Tingle의 정체성과 목적을 전달하는 초기 진입 화면
2	로그인 화면	학교 이메일과 비밀번호를 통해 기존 사용자가 로그인하는 화면
3	회원가입 화면	이메일 중복 확인 및 비밀번호 조건 안내를 포함한 회원가입 화면
4	이메일 인증 화면	학교 이메일로 인증 코드를 발송하여 대학생 소속을 검증하는 단계
5	메인 화면	이성 매칭, 친구 매칭 등 탐색 유형을 선택하는 메인 진입 화면
6	마이페이지	사용자 프로필 및 기본 정보를 확인·수정할 수 있는 개인 정보 관리 화면
7	친구 요청 목록 화면	나를 좋아하는 사용자와 내가 좋아요를 보낸 사용자를 확인하는 화면
8	좋아요 목록 화면	찜을 누른 유저 프로필 탐색 및 친구 신청 전송 화면
9	매칭 탐색 화면	필터 조건을 설정해 사용자를 탐색하고 매칭 인터랙션을 수행하는 핵심 화면
10	매칭 필터링 화면	학과/성별/나이/재학 여부를 선택해 프로필·탐색 조건에 반영하는 모달 화면
11	매칭 목록 화면	서로에게 친구 신청을 한 경우, 카카오 ID 정보를 포함한 유저 프로필을 확인하는 화면
12	프로필 입력 화면	자신의 정보를 작성하는 화면

@@ 353번째 줄: / 353번째 줄: @@
 | 회원가입 화면
 | 이메일 중복 확인 및 비밀번호 조건 안내를 포함한 회원가입 화면
+|}
+[[파일:3_1.jpeg]]
+[[파일:3_2.jpeg]]
+[[파일:3_3.jpeg]]
+=== 실행(run) ===
+==== 가. SW 와이어 프레임 별 화면 설명 ====
+{| class="wikitable" style="text-align: center;"
+! 번호 !! 화면 명 !! 화면 설명
+|-
+| 1
+| 서비스 시작 화면
+| 서비스 로고와 슬로건을 노출하여 Tingle의 정체성과 목적을 전달하는 초기 진입 화면
+|-
+| 2
+| 로그인 화면
+| 학교 이메일과 비밀번호를 통해 기존 사용자가 로그인하는 화면
+|-
+| 3
+| 회원가입 화면
+| 이메일 중복 확인 및 비밀번호 조건 안내를 포함한 회원가입 화면
+|-
+| 4
+| 이메일 인증 화면
+| 학교 이메일로 인증 코드를 발송하여 대학생 소속을 검증하는 단계
+|-
+| 5
+| 메인 화면
+| 이성 매칭, 친구 매칭 등 탐색 유형을 선택하는 메인 진입 화면
+|-
+| 6
+| 마이페이지
+| 사용자 프로필 및 기본 정보를 확인·수정할 수 있는 개인 정보 관리 화면
+|-
+| 7
+| 친구 요청 목록 화면
+| 나를 좋아하는 사용자와 내가 좋아요를 보낸 사용자를 확인하는 화면
+|-
+| 8
+| 좋아요 목록 화면
+| 찜을 누른 유저 프로필 탐색 및 친구 신청 전송 화면
+|-
+| 9
+| 매칭 탐색 화면
+| 필터 조건을 설정해 사용자를 탐색하고 매칭 인터랙션을 수행하는 핵심 화면
+|-
+| 10
+| 매칭 필터링 화면
+| 학과/성별/나이/재학 여부를 선택해 프로필·탐색 조건에 반영하는 모달 화면
+|-
+| 11
+| 매칭 목록 화면
+| 서로에게 친구 신청을 한 경우, 카카오 ID 정보를 포함한 유저 프로필을 확인하는 화면
+|-
+| 12
+| 프로필 입력 화면
+| 자신의 정보를 작성하는 화면
 |}

구분	주요특징	한계점
Tinder	글로벌 1위 데이팅 앱으로, 간편한 스와이프 UI를 제공	대학생 특화 기능 부족, 신뢰성 확보 어려움
Glam	국내 인기 앱으로, 추천 알고리즘 기반 매칭 기능 제공	소속 인증이 선택적이며, 신뢰도 낮음
시대팅	서울시립대학교 비공식 매칭 서비스로, 대학생 인증 기반으로 동일 소속 간 매칭 제공	이성 간 매칭에 한정, 주기적 매칭 기능 부재