본문 바로가기
Internet

MBTI 이상형 여친 찾기 / MBTI 이상형 남친 찾기 App 소개

by 즐코딩 2022. 12. 21.
반응형

 

첫 개인 프로젝트로 진행해본 Web앱 입니다.

 

MBTI 이상형 여친 찾기 / MBTI 이상형 남친 찾기

 

MBTI-이상형-찾기-테스트-앱화면
MBTI 이상형 찾기 테스트

 

여기서 해보실 수 있어요.

 

https://app.kincoding.com/girl/

 

MBTI 이상형 여친 찾기

AI가 당신의 이상형을 추천해드려요

app.kincoding.com

 

https://app.kincoding.com/boy/

 

MBTI 이상형 남친 찾기

AI가 당신의 이상형을 추천해드려요

app.kincoding.com

 

 

화면구성

 

화면구성은 다음과 같습니다.

 

시작화면-여성-유저용
시작화면-여성 유저용

 

메인 페이지 입니다. 그냥 [시작하기] 버튼을 당장 클릭하면 끝!

 

시작화면-남성-유저용
시작화면-남성 유저용

 

남성 사용자라면 <이상형 여친 찾기>로, 여성 사용자라면 <이상형 남친 찾기>로 진행해보세요.

 

그러면 이렇게 성격분석을 위한 몇 가지 질문을 하게 되구요, 느낌이 빡! 오는대로 선택해주시면 됩니다.

진행하시다 하단에 붙은 걸 눌러버리게 된다면, 저로서는 대단히 감사합니다.(_ _)

 

MBTI-테스트-진행과정
MBTI 테스트 진행과정

 

질문에 모두 대답을 하고 나면, 설정상 AI가 고민하는 연출 단계를 잠시 보여줍니다. 언젠가는 진짜로 AI가 실시간으로 분석하여 추천해주는 날이 오겠죠?

 

AI가-매칭중인-연출화면
AI가 매칭중(연출입니다...)

 

답변 내용을 토대로 MBTI 결과가 나타나면서, 해당 성격이 선호하는 이상형 형태의 상대방을 표시해주게 됩니다.

 

MBTI-테스트-결과-및-이렇게-말해주는-사람을-추천
MBTI 테스트 결과 및 이렇게 말해주는 사람을 추천
연락이-안되는-이유도-살짝-추가
연락이 안되는 이유도 살짝 추가

 

근거 있냐구요? 나름 근거 있는 자료들을 조사해서 구성하고자 노력했습니다.(_ _;)

그리고, 저거 제 성격 아닙니다. 그냥 아무거나 선택한 결과입니다.

 

 

 

이하 프로덕트 개발기록입니다. 나중에 다시 회고할 때를 위해 조금 기록해놓아둡니다.

 

 

 


 

 

최근에 몰입할 수 있는 시간이 좀 생겨서, 그 동안 계획해두기만 했던 것들을 실행해보는 시간을 가질 수 있게 되었습니다.

그래서 당장 시작해봤습니다. 나도 내 프로젝트로 결과물 하나 만들어보자.

 

MBTI 이상형 여친 찾기 / MBTI 이상형 남친 찾기

 

기획 - 무조건 남녀, 연애 관련이지!

 

이미 유행(?)은 많이 지난 소재이지만, 비교적 작업 범위가 크지 않을 것 같아서 당장 도전해보았습니다. 평소에 머릿속으로 생각하고 정리를 해두었기에 방향을 잡는 시간(기획)에는 큰 시간을 들이지 않을 수 있었습니다.

MBTI-이상형-찾기-메인-이미지
MBTI 이상형 찾기 메인 이미지

 

곧 크리스마스 및 연말연시 시즌이니, 송년 인사 안부를 서로 주고 받는 트래픽이 몰리겠다 싶어, 크리스마스 전에 배포를 계획했습니다.

 

 

디자인 - 소스 만드는 게 큰 일

 

최대한 인터넷에 널려 있는 무료 소스를 찾아서 활용했습니다. 디자이너가 아니라 뭘 예쁘게 잘 만든다는 것은 꿈도 꾸지 말고, 대충 가져다가 잘 활용해보자! 크리에이티브를 얼른 포기하고, 에디터로 방향을 잡자 생각했습니다. 한편, 직접 그려낼 수 없는 실력으로는 세계를 방황하며 소스를 찾는 게 일이더라구요.

 

 

HTML/CSS 코딩

 

Bootstrap을 사용했습니다. 몇달 전 공부해놓고 까먹을만 해졌길래 사용해보자고 마음먹었습니다.

간단하게 뭘 만들어야 할 때, 부트스트랩은 역시나 정말 빠르고 편리하더군요.

 

 

Javascript / JQuery

 

프로그래밍 언어는 자바스크립트와 제이쿼리를 사용했습니다. 탈 JQeury가 한창 일어나고 있지만, 결과물을 빨리 내보고 싶어서 로직 구현에 시간을 쏟고 헤매지 말자고 생각했습니다. 그래도 정말 신경 쓰고 구현을 해야 하는 과제들이 많더라구요. 개인 프로젝트 직접 수행해보면서 많은 것을 깨닫고 느끼게 되는 순간들이 있었는데, 그런게 바로 공부가 되는거구나! 하고 느꼈더랬습니다.

 

 

광고 붙이기

 

티스토리에 붙여 놓았던 구글 애드센스를 서브 도메인을 생성해서 추가로 활용하고 있습니다. 진작에 이럴라고 티스토리 블로그를 kincoding.com이라는 도메인에 연결해두었고, 애드센스 승인도 kincoding.com으로 받았더랬습니다. 그래서 app.kincoding.com으로 서브 도메인을 만들어서 광고를 재승인 없이 붙일 수 있었습니다.

 

 

그 밖에...

 

구글 애널리틱스, 구글 서치콘솔도 등록했습니다. 하는 김에 다 해보는 거죠 뭐.

궁금하긴 합니다. 이렇게 앱을 만들어 두면, 사람들이 얼마나 사용을 할까? 정말 트래픽이 발생할까? 광고 같은 건 누르기는 할까? 저도 처음이라, 궁금한 건 많지만 경험한 게 없으니 일단 추이와 결과를 지켜봐야 알 수 있을 것 같습니다.^^

 

 

인스타그램

 

SNS 별로 좋아하지 않지만... 시간이 된다면 요즘 사람들 해보는 건 편견없이 한번 다 해보자... 라고 마음 먹고 있어서 그냥 한번 활용해보았습니다. 뭐가 이렇게 복잡해보이는지...

 

 

아무튼 저도 배포 이후의 결과가 궁금합니다. Merry Chiristmas !!

 

 

 

즐거운 코딩생활, 즐코딩.

KINcoding.

반응형

댓글