← 포트폴리오 목록
본인인증 기반 소개팅 매칭 서비스
휴대폰 본인인증, 인앱 카메라 전용 프로필·피드 촬영, 조건별 탐색과 실시간 채팅까지 소개팅 앱의 핵심 사용자 흐름을 React 기반 웹 데모로 구현합니다.
호감-매칭 원자적 트랜잭션 설계상호 호감 감지 시 매칭 레코드·채팅방 생성을 단일 트랜잭션으로 처리해 데이터 정합성을 보장하는 구조를 구현합니다.
인앱 전용 촬영 파이프라인 구축MediaDevices 캡처부터 압축·업로드까지 갤러리 경유 없는 단일 촬영 경로를 설계, 리사이즈 로직을 자체 구현합니다.
신고-차단 즉시 처리 구조 설계신고 접수와 동시에 차단·채팅방 비활성화를 원자적으로 처리하는 안전 트랜잭션을 구현합니다.
Overview
프로젝트 개요
휴대폰 본인인증, 인앱 카메라 전용 프로필·피드 촬영, 조건별 탐색과 실시간 채팅까지 소개팅 앱의 핵심 사용자 흐름을 React 기반 웹 데모로 구현합니다. 갤러리 접근을 차단한 촬영 파이프라인과 호감-매칭 원자적 트랜잭션으로 신뢰성과 안전성을 함께 설계합니다.
요구사항 정의
프로젝트 핵심 과제
프로젝트 진행 시 해결한 핵심 기술 과제입니다.
상호 호감 성립과 채팅방 자동 개설 사이의 동시성 제어 및 트랜잭션 격리 수준 설계가 필요합니다
인앱 카메라 촬영 사진만 허용하고 갤러리 접근을 완전히 차단하는 UI/플랫폼 권한 설계가 필요합니다
신고 접수 즉시 차단·채팅 비활성화까지 이어지는 안전 트랜잭션의 원자성 보장이 필요합니다
대화량이 많은 채팅방에서도 메시지 렌더링 성능을 유지하는 가상 스크롤 구조 설계가 필요합니다
구현 내용
핵심 기능 상세
핵심 기능 1
상대 탐색 & 매칭
사용자가 조건별 필터로 상대를 탐색하고 호감을 보내면, 상호 호감 성립 시 자동으로 매칭과 채팅방이 생성되는 흐름을 구현합니다
핵심 기능 2
인앱 카메라 프로필·피드
프로필·피드 사진은 반드시 인앱 카메라로 촬영하도록 강제하고, 기기 갤러리 접근은 원천 차단하는 촬영 플로우를 구현합니다
핵심 기능 3
본인인증 회원가입
휴대폰 본인인증을 거쳐야 가입이 완료되는 온보딩 플로우와 약관 동의 이력 저장 구조를 구현합니다
핵심 기능 4
실시간 채팅
매칭된 상대와 텍스트·이미지 메시지를 실시간으로 주고받고, 대화 중 신고·차단이 가능한 채팅 화면을 구현합니다
구현 과정
프로젝트 진행 단계
STEP 1
매칭 도메인 모델링 & DB 설계
회원·프로필·호감·매칭·채팅 테이블 22개 설계, 인증 어댑터 인터페이스 정의
STEP 2
인증 & 온보딩 API 개발
본인인증 위임 인터페이스, 약관 동의 이력, JWT 인증 플로우 API 14개 구현
STEP 3
인앱 카메라 & 피드 화면 개발
MediaDevices 카메라 캡처, 이미지 압축·업로드, 피드 CRUD 화면 6개 구현
STEP 4
탐색·매칭·실시간 채팅 개발
필터 탐색, 호감 매칭 트랜잭션, Socket.io 채팅 네임스페이스 구현
STEP 5
신고·차단 & 통합 테스트
신고 처리 트랜잭션, 차단 로직, E2E 시나리오 30개 검증
프로젝트 성과
주요 성과
호감-매칭 원자적 트랜잭션 설계상호 호감 감지 시 매칭 레코드·채팅방 생성을 단일 트랜잭션으로 처리해 데이터 정합성을 보장하는 구조를 구현합니다.
인앱 전용 촬영 파이프라인 구축MediaDevices 캡처부터 압축·업로드까지 갤러리 경유 없는 단일 촬영 경로를 설계, 리사이즈 로직을 자체 구현합니다.
신고-차단 즉시 처리 구조 설계신고 접수와 동시에 차단·채팅방 비활성화를 원자적으로 처리하는 안전 트랜잭션을 구현합니다.
본인인증 어댑터 패턴 구현인증 제공사 교체에 대응 가능한 어댑터 인터페이스를 설계, 약관 동의 이력을 버전별로 테이블화합니다.
Review
기술적 주안점
- 상호 호감 감지 시 매칭 생성과 채팅방 개설을 하나의 DB 트랜잭션으로 묶어 데이터 정합성을 보장하는 구조를 구현합니다
- 촬영부터 업로드까지 갤러리 경유 없이 인앱 카메라 단일 경로로 강제하는 보안 지향 촬영 파이프라인을 구현합니다
- 본인인증 결과를 어댑터 인터페이스로 추상화해 인증 제공사가 바뀌어도 온보딩 로직 변경 없이 대응 가능한 구조를 구현합니다
