Crime-Fin은 금융 범죄(보이스피싱, 스미싱 등)에 대한 대응과 예방을 위한 서비스를 제공합니다.
전화번호와 링크조회, AI 분석을 통해 범죄 여부를 신속하고 정확하게 판단하며, 이와 관련된 대응 방안을 제시하여 사용자들이 금융 범죄로부터 안전하게 보호될 수 있도록 합니다. 또한 자산 관리 기능과 이상치 알림 기능을 통해 사용자의 금융 활동을 모니터링하고, 위험한 상황이 발생하면 즉각적으로 사용자에게 알림을 보냅니다. 디지털 체험관을 통해 사용자들이 금융 범죄에 대해 어떻게 예방하고 대응해야 하는지에 대한 교육을 받을 수 있습니다.
2023년 8월 25일 ~ 9월 25일 (1개월간)
 맹영욱 |
 강유석 |
 강혜리 |
 박서희 |
 조아름 |
 최윤서 |
Usecase Diagram |
Front UI |
API 명세 |
DB Modeling |
- 스미싱 : 번호 조회, AI 문자 분석, 대응 방안 상세보기 의 순서로 안내합니다.
- 보이스 피싱 : 번호 조회, 대응 방안 상세보기 의 순서로 안내합니다.
- 메신저 피싱 : 링크 조회, AI 내용 분석, 대응 방안 상세보기 의 순서로 안내합니다.
사진 보기
번호를 입력하고 조회합니다.
사진 보기
의심스러운 사이트 링크를 조회할 수 있습니다.
조회와 결과 확인을 마친 후 사용자는 매뉴얼 조회, 체크리스트 조회, 주변 기관 찾기로 대응 방안을 안내받을 수 있습니다. 스팸 문자나 메신저를 이용한 메신저 피싱의 경우에는 AI 내용 분석을 통해 상세 내용을 입력하면 AI 문맥 분석을 통해 해당 내용이 스팸인지 아닌지를 알려드리고 대응 방안 상세보기 페이지로 이동할 수 있습니다.
사진 보기
사용자를 위한 금융 피싱 사기 대처 매뉴얼이 제공되며 우측 상단의 슬라이더를 이용해 글자 크기를 조절할 수 있습니다.
사진 보기
금융 피싱 사기가 발생했을 때 사용자가 취해야 하는 행동을 체크리스트로 안내하고 저장을 누르면 사용자의 계정에 저장됩니다.
사진 보기
위의 네비게이션 바와 대응 방안 상세보기 페이지의 가까운 기관 찾기 버튼을 누르면 사용자의 주소 근처의 은행과 경찰서를 보여줍니다.
사진 보기
스팸으로 의심되는 문자 번호를 조회해본 후 해당 번호가 기록에 존재하지 않는다고 했을 때, 해당 문자의 내용을 인공지능을 이용한 문맥 분석으로 해당 문자가 금융 피싱 사기에 연루되었는지를 판단할 수 있습니다.
사진 보기
사용자가 입력 뿐만 아니라 태그로 빠르게 자신과 유사한 사례를 검색할 수 있습니다.
사용자는 계좌를 생성하고 위험 한계치를 함께 입력하여 자신의 스마트폰으로 언제든지 Crime-Fin 카카오톡 맞춤형 긴급 알림을 수신해 자신의 자산 알림을 받을 수 있습니다. 또한, 대시보드 페이지에서 사용자의 자산 현황을 한눈에 볼 수 있습니다.
사진 보기
사진 보기
사진 보기
도넛 차트에서 전체 구성 현황을 확인할 수 있고 우측 하단의 날짜 상세 조회를 이용하면 특정 날짜 구간의 거래내역 조회와 그래프를 볼 수 있습니다.
간단한 테스트로 피싱 체험을 통해 사용자가 피싱 사기에 항상 주의할 수 있도록 합니다.
사진 보기
사진 보기
간단한 상황 설명과 그 상황에서 자신이 할 법한 대답을 고르면 됩니다.
❗️문제 상황
사용자의 자산을 나타내는 대시 보드에서 도넛 차트와 막대 그래프가 업데이트 되지 않는 문제점 발생
👨💻해결 방안 탐색
- Vue.js 라이프 사이클의 이해
- 공식 API 문서 정독
👍해결
$ref 로 dom 요소에 직접 접근한 뒤 refresh() 메서드로 데이터 업데이트
❗️문제 상황
시작 페이지에서 여러 섹션을 나누어 다양한 컴포넌트를 표시한 후, 특정 페이지로 이동하면 하나의 컴포넌트만
보이게 하는 것이 정상이다. 하지만 시작하는 vue인 App.vue에서 두개의 컴포넌트를 import한 뒤,
페이지 이동버튼을 클릭했을 때 두 컴포넌트가 동시에 한 페이지로 이동하지 않는 문제 발생
👨💻해결 방법
App.vue에서는 하나의 컴포넌트만 보이도록 변경하였고, 시작 페이지에서 필요한 두 컴포넌트를 하나의 컴포넌트로 감싸서 import하는 방식으로 구현
🤔문제 발생 이유 분석
Vue.js의 라우팅 시스템에서는 <router-view/> 태그에 지정된 경로의 컴포넌트만을 렌더링.
App.vue에서 두 컴포넌트를 따로 import하고 섹션을 나누었기 때문에, <router-view/>에 해당하는
영역이 없었던 것으로 예상
📈결과
한 페이지에 하나의 컴포넌트만 보이도록 수정한 결과 원활하게 페이지 이동이 가능.
❗️문제 상황
Vue.js를 활용하여 모달창을 구현하면서 데이터를 주고받는 형식과 모달창을 띄우는 방법에 대한 어려움 발생
👨💻해결 방법
Vue의 lifecycle과 양방향 데이터 전달 방식에 대해 학습하고 이를 적용하여 문제 해결
🤔문제 발생 이유 분석
Vue.js의 특정 기능인 모달창 구현과 데이터 전달 방식에 대한 이해도가 충분하지 않았기 때문에, 이를 제대로 구현하는데 어려움이 있었음
📈결과
번호 조회, AI 조회 등 피싱 대응 기능에 대해 모달창으로 구현하며 페이지 이동 없이 결과를 볼 수 있도록 구현
❗️문제 상황
로그인에 성공한 사용자의 정보를 Session에 바인딩하는 것은 성공했지만, 페이지가 넘어갈 때 마다
Session이 새로 생성되어 사용자의 정보를 활용할 수 없는 문제점 발생
👨💻해결 방안 탐색
- Spring 공식 document를 보며
HttpServletRequest와HttpSession에 대해서 공부 - Front-End 와 Back-End의 포트번호가 달라 CORS를 설정하는 코드에 문제가 발생할것이라고 예상. 따라서 CORS(Cross-Origin Resource Sharing) 코드 부분 수정
👍해결
@Override
public void addCorsMappings(CorsRegistry registry) {
registry
.allowCredentials(true) //수정 사항!!
}
}위와 같이 allowCredentials 를 true로 설정하여 cookie, HTTP 기본 인증 등을 사용할 수 있도록 허용. 따라서 인증된 요청을 처리 가능
❗️문제 상황
클라이언트 측에서 사용자의 피싱 메시지를 바탕으로 AI 맥락 조회 기능을 사용하려 하는 상황에서
JSON Parse 에러 발생
👨💻 문제 인식
JSON 데이터를 역직렬화 하는 동안 발생한 문제
즉, 클라이언트는 단일 객체 형태로 데이터를 보내지만,
Back-End에서는 ArrayList<HashMap<String, Object>> 유형으로 데이터를 기대하여 양자의
불일치로 문제 발생
👍해결
클라이언트 코드에 Content-Type헤더를 설정하고 클라이언트 코드에 데이터 변수에 저장되는 값 앞뒤에 대괄호 [] 를 추가하여 Back-End가 기대하는 데이터 유형으로 만들어서 해결
이 외에도 클라이언트가 데이터 유형을 Back-End가 기대하는 방식이 아닌 다른 방식으로 넘겨준 경우, Back-End가 알아서 역직렬화 하도록 DTO를 만드는 방법을 탐색
❗️문제 상황
뉴스 기사를 크롤링하여 학습시킬 데이터를 csv 형태로 저장하려고 하는 상황에서
timeout 및 connectionError 에러 발생
👨💻 문제 인식
일정 횟수 이상으로 크롤링 요청하여 웹페이지에서 해당 요청을 이상 있는 기계로 받아들여 요청을 차단하여 발생한 문제
👍해결
웹페이지에 해당 요청이 기계가 아닌 사람임을 알려주기 위해 headers에 User-Agent를 명시하여 요청 전송
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent