Skip to content

Surfurtone/.github

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 

Repository files navigation

1

소개

  • 투페이스(TWOFACE)는 의미 그대로 ‘두 얼굴’이라는 뜻이에요.
  • 사용자의 성향을 반영한 AI 클론을 통해 특정 호스트와 참여자의 궁합을 예측하고, 이를 기반으로 적합한 기숙사 룸메이트나 대외활동 팀원 등을 매칭해주는 역할을 해요.
  • 투페이스는 이러한 매칭 과정에서 사용자의 본래 성향AI 클론이 만들어내는 새로운 가능성을 동시에 반영한다는 의미를 담고 있어요.
  • 투페이스(TWOFACE)라는 이름은 사용자가 가진 성향과 AI 클론의 능력을 결합하여 새로운 환경에서의 만남을 지원한다는 서비스의 핵심 아이디어를 반영한다고 판단하여 본 이름을 서비스 명으로 선정했어요.

2

특징

  1. 사용자가 혼자서 대화를 시작하는 어려움을 덜어주고, AI 클론을 통해 나와 잘 맞는 사람들과의 만남을 주선해줘요.
  2. 이를 통해 새로운 관계 형성과 팀 구성이 보다 자연스럽고 부담 없이 이루어질 수 있게 해줘요.
  3. 매칭 된 사람들과의 초기 소통을 부담 없이 시작할 수 있는 환경을 제공하여, 대학 생활에서의 불안감을 줄이고 더욱 원활한 팀 구성과 관계 형성을 지원해요.
  4. 특히 대화에 어려움을 느끼는 학생들에게 큰 도움을 주며, 새로운 환경에서 자신감을 가지고 인연을 만들어가는 과정을 도와주는 역할을 해요.
  5. 또한, 투페이스는 새로운 사람들과의 만남을 보다 쉽게 만들어 줘요.
  6. 대학 생활에서의 다양한 도전 과제를 해결하는 데 유용한 도구에요.
  7. 대학생들이 자신과 잘 맞는 팀원이나 룸메이트를 찾는 데 있어서 큰 도움을 줄 수 있고, AI와 타로의 조화를 통해 보다 신뢰성 있고 인터렉티브한 매칭 경험을 제공해요.
✅ AI 클론과의 대화 ✅ GPT를 활용한 타로 궁합
AI 클론은 사용자의 성향과 요구를 반영하여, 표현하기 어려운 감정과 생각을 대신 전달해줘요. OpenAI Assistant를 활용하여 사용자와 호스트 간의 궁합을 예측하고 최적의 매칭을 제공합니다.
이를 통해 사용자는 부담 없이 자연스럽고 편안한 대화를 시작하고, 사용자의 성향, 관심사, 커뮤니케이션 스타일 등을 분석하여 상대방과의 조화를 평가하고,
대화에 대한 두려움을 극복하며 자신감 있게 새로운 관계를 형성할 수 있어요. 기숙사 룸메이트나 대외활동 팀원 같은 적합한 파트너를 찾을 수 있도록 도와줘요.

개발 동기

투페이스(TWOFACE), 왜 만들게 되었을까요?

image 대학생 현황
→ 대학생 사이의 은둔형 외톨이 증가

  • 최근 대학생들 사이에서 은둔형 외톨이, 즉 ‘히키코모리’ 현상이 점점 더 확산되고 있다고 해요. (발표자료에 근거 첨부)
  • 대학이라는 사회적 환경에서도 타인과의 소통에 어려움을 느끼고, 외부와 단절된 채 홀로 지내는 학생들이 늘어나고 있는 현실을 마주하게 되었어요.

image 문제 인식
→ 소통의 어려움과 고립으로 인한 부정적 영향

  • 이러한 현상은 학업 스트레스, 사회적 불안, 자존감 저하 등 다양한 요인으로 인해 더욱 심화되고 있어요.
  • 많은 학생들이 대화에 대한 두려움과 사회적 부담감을 느끼며, 점차적으로 자신을 고립시키고 있는데 이는 사회적 관계의 단절과 대학 생활의 어려움으로 이어지고 있어요.

image 해결 방안
→ AI 클론을 통한 소통 지원과 관계 형성

  • 이러한 문제를 해결하기 위해 투페이스 서비스를 만들었어요.
  • 우리 서비스의 키포인트는 대학 생활을 알차게 보내기 위해 필요한 ‘사람’을 쉽게 만날 수 있도록 해주는 점이에요.
  • 투페이스는 사용자가 직접 대화하지 않고도 AI 클론을 통해 타인과 소통할 수 있도록 도와줘요.
  • 또한, 적합한 기숙사 룸메이트나 대외활동 팀원을 찾아줌으로써 학생들이 건강하고 활기찬 대학 생활을 영위할 수 있도록 지원해요.
  • 투페이스는 학생들이 자신감을 회복하고, 새로운 사회적 관계를 형성할 수 있는 기회를 제공하는 것을 목표로 하고 있어요.

세부 내용

이렇게 사용할 수 있어요

✦ 대화를 시작하기 어려워도, AI 클론이 대신 소통을 주도하니 부담 없이 이용할 수 있어요.

✦ 그렇다고 모든 대화를 AI가 하는 건 아니랍니다. 초기 대화만 진행한 후 상대방이 마음에 들면 직접 대화할 수 있어요.

✦ 디스크립션만 입력하면 자신만의 클론 봇을 만들어 잘 맞는 성향의 사람들과 친해질 수 있는 초기 기회를 많이 얻을 수 있어요.

✦ 초기 기회를 얻기 위해서 많은 신경을 쓸 필요가 없어요.

✦ 나와 잘 맞는 팀원이나 룸메이트를 AI 클론이 알아서 찾아주니, 맞춤형 매칭이 쉬워요.

✦ 소통이 서툴러도 AI 클론이 대신 대화해 주니, 자연스럽게 새로운 관계를 형성할 수 있어요.

✦ AI 클론과의 대화를 통해 매칭 상대에 대해 미리 알아보고, 더 편안한 만남을 준비해요.

비즈니스 모델

'B2B & B2C'

3

B2B B2C
기업은 우리 서비스에 돈을 지불하면 자기 기업의 클론 봇을 만들 수 있고, 공고 카드에 광고를 올릴 수 있어요. 사용자 개개인 별로 ‘클론 봇’을 만들어 상호참여할 수 있어요. 단, 하루에 제한 횟수가 있어요.
단순한 광고가 아니에요! 정보를 알리기만 하는 광고가 아닌, 사용자가 직접 필요한 정보를 물어보면 그에 적절한 답을 빠르게 해줄 수 있는 ‘참여형’ 광고에요. 제한 횟수 이상으로 호스트가 되려 하거나, 채팅을 하려 하거나, 궁합을 보기 위해서는 보상형 광고를 시청해야해요.
기업에게 맞춤형 AI 솔루션을 제공하여 협업과 프로그램 홍보를 최적화 해줘요. 추가적으로 기획중인 기능은 구독 기능이에요. 월정액을 지불할 시, 모든 횟수제한을 해제하는 구독형 모델을 생각중이에요.
기업은 타겟 맞춤형 광고를 통해 자사 제품과 서비스를 효과적으로 홍보할 수 있어요.

핵심 기술

생성형 AI를 활용한 ‘클론 봇’

4

개발 기술 스택

FrontEnd
My Skills OpenAI
BackEnd
My Skills OpenAI ngrok

UI / UX 디자인

UI / UX에 사용한 색상

5

기대 효과

  1. 맞춤형 팀원 및 룸메이트 매칭

    • 투페이스는 사용자의 성향, 요구, 관심사 등을 반영한 AI 클론과의 대화를 통해 적합한 기숙사 룸메이트나 대외활동 팀원을 찾아줘요.
    • 이로 인해 학생들은 자신과 잘 맞는 사람들과 팀을 이루어 보다 원활하고 만족스러운 대학 생활을 할 수 있어요.
    • 맞춤형 매칭을 통해 갈등을 줄이고, 협업의 효율성을 높이는 동시에, 장기적으로 더 좋은 친구 관계를 형성할 수 있어요.
  2. 원활한 초기 소통 지원

    • 투페이스의 AI 클론을 통해 초기 대화를 시작하여, 사용자가 새로운 사람들과의 첫 대화에서 느끼는 긴장과 불안을 덜어줘요.
    • 사용자의 생각과 감정을 반영한 AI와의 대화를 기반으로, 학생들은 부담 없이 소통을 시작할 수 있어요.
    • 이로써 학생들은 더 편안한 환경에서 관계를 형성할 수 있으며, 이후의 대화도 더 쉽게 이어갈 수 있는 기회를 얻을 수 있어요.
  3. 대학생활 적응력 향상

    • 투페이스는 새로운 환경에서 적응하기 어려워하는 학생들에게 큰 도움을 줄 수 있어요.
    • AI 클론의 도움으로 새로운 상황에 대한 불안감이 감소하고, 팀 구성이나 룸메이트와의 관계 형성이 더 쉬워져요.
    • 이러한 적응력 향상을 통해 학생들은 대학 생활에 더 잘 적응할 수 있고, 학업 및 대외활동에서 더 큰 성과를 이룰 수 있어요.
  4. 사회적 관계 확장

    • 투페이스는 학생들이 다양한 사람들과 교류할 수 있는 기회를 제공해요.
    • 이를 통해 학생들은 더 넓은 사회적 관계망을 형성할 수 있으며, 이는 대학 생활뿐만 아니라, 졸업 이후의 사회생활에서도 중요한 자산이 될 거에요.
    • 더 많은 사람들과의 관계를 통해 얻는 다양한 경험은 학생들의 성장에 큰 기여를 할 수 있어요.

팀원

권혁원 김한나 김민수 정그린 김재형
@ambition-kwon @khanna01 @kimminsu31415 @Green-JEONG @21divcert
Project Manager & Designer Front-end Developer Front-end Developer & Designer Front-end Developer Back-end Developer

시연

1. 서비스 소개화면 (1)

Landing Page 1

이 페이지는 서비스의 첫 인상을 제공하기 위한 화면입니다.

사용자에게 친근하고 부드러운 이미지를 제공하여 서비스에 대한 긍정적인 인식을 심어줍니다.

중앙에는 "TWO FACE"라는 서비스 로고와 함께 사용자가 대화에 대한 두려움을 극복하도록 돕는 메시지가 표시됩니다.

하단에는 "다음으로" 버튼이 있어 사용자가 쉽게 다음 단계로 이동할 수 있도록 안내합니다.

2. 서비스 소개화면 (2)

Landing Page 2

이 페이지는 서비스가 제공하는 주요 기능 중 하나를 소개하는 화면입니다.

사용자에게 "친구 만들기가 어려운 사람들을 위한 새로운 시작"이라는 메시지를 전달합니다.

이 문구는 사용자가 새로운 친구를 사귀는 데 도움을 줄 수 있는 서비스의 핵심 가치를 강조합니다.

텍스트 아래에는 사용자가 자신의 성격에 맞는 인연을 쉽게 찾을 수 있도록 돕는 서비스의 주요 기능이 간략하게 설명되어 있습니다.

또한, 페이지 하단의 "다음으로" 버튼을 통해 사용자가 다음 단계로 자연스럽게 이동할 수 있도록 유도하고 있습니다.

3. 서비스 소개화면 (3)

Landing Page 3

서비스를 대표하는 친근하고 부드러운 이미지로 시작합니다.

이 화면은 사용자가 서비스 이용을 시작하기 전에 서비스의 주요 가치를 강조하는 마지막 소개 페이지입니다.

"나와 꼭 맞는 인연을 찾고 싶은 당신에게"라는 문구를 통해 사용자가 자신의 성향에 맞는 인연을 찾을 수 있는 기회를 제공하는 서비스를 소개합니다.

화면 중앙에는 관련 이미지를 배치하여 시각적으로도 메시지를 강화하고 있으며, 하단의 "투페이스 시작하기" 버튼을 통해 사용자가 서비스 이용을 시작할 수 있도록 유도합니다.

이 페이지는 전체적으로 사용자가 서비스를 긍정적으로 인식하고, 다음 단계로 자연스럽게 진행하도록 설계되었습니다.

4. 로그인 화면

이 화면은 사용자가 투페이스 서비스에 처음으로 접근할 때 표시되는 로그인 페이지입니다.

로고 아래에는 환영 메시지가 표시되어 있습니다.

사용자는 화면에 표시된 입력 필드를 통해 자신의 학교와 학번을 선택 및 입력할 수 있습니다.
이러한 정보는 사용자의 신원을 확인하고, 맞춤형 서비스를 제공하기 위한 중요한 요소입니다. 하단에는 "계속하기" 버튼이 있어, 사용자가 필수 정보를 입력한 후 다음 단계로 진행할 수 있도록 안내합니다.

전체적으로 이 페이지는 직관적이고 간결한 디자인을 통해 사용자가 쉽게 로그인 절차를 완료할 수 있도록 구성되었습니다.

5. 메인 화면 (1)

이 화면은 투페이스 서비스의 메인 페이지로, 사용자가 가장 먼저 접하게 되는 화면입니다.

검색 입력창으로 사용자가 찾고자 하는 이벤트나 활동을 검색하여 찾을 수 있고, 그 아래에는 주요 카테고리(예: 대외활동, 기숙사, 동아리) 버튼이 있어 사용자가 쉽게 원하는 정보를 찾을 수 있습니다.

메인 콘텐츠 영역에는 현재 진행 중인 주요 이벤트나 공모전을 홍보하는 배너가 표시됩니다.
예시로 "국가기술표준원 어린이 포스터 공모전"에 대한 정보가 제공되고 있으며, 사용자는 이 배너를 통해 관련 세부 내용을 확인할 수 있습니다.

하단에는 사용자가 선택할 수 있는 몇 가지 옵션이 제공됩니다:

호스트 AI와 대화하기: AI와의 대화를 시작할 수 있는 버튼입니다.

"다음 추천: 다음 추천 활동이나 정보를 확인할 수 있는 버튼입니다.

호스트와 궁합보기: 사용자와 호스트 간의 궁합을 확인할 수 있는 재미 요소를 제공합니다.

6. 메인 화면 (2)

메인 화면(1)에서 ‘다음 추천’ 버튼을 누르면 현재 진행 중인 이벤트나 공모전을 홍보하는 배너가 갱신되어 표시됩니다.>

7. 메인 화면 - 광고일 경우

이 화면은 투페이스 서비스의 메인 페이지입니다.

‘다음 추천’ 버튼을 눌러 정보가 갱신되어 나온 광고가 포함된 배너를 보여줍니다.

이 페이지는 광고가 포함된 경우에도 사용자에게 명확하고 유용한 정보를 제공하며, 다양한 상호작용 옵션을 통해 서비스를 보다 풍부하게 활용할 수 있도록 설계되었습니다.

8. 마이페이지

이 화면은 사용자의 개인 정보를 확인하고 관리할 수 있는 마이페이지입니다.

상단에는 사용자의 프로필 이미지와 함께 "남은 궁합확인수" 및 "남은 대화회수"가 표시되어, 사용자가 남은 서비스 이용 횟수를 쉽게 확인할 수 있습니다.

중앙에는 사용자의 닉네임이 표시되며, 그 아래에 "내 정보" 버튼이 있어 사용자가 자신의 정보를 업데이트할 수 있는 기능을 제공합니다.

기본정보 섹션에서는 사용자의 이름, 별명, 학교, 학과, 학번, 학년, 성별, 전화번호, MBTI와 같은 개인 정보가 정리되어 있습니다.
또한 사용자가 설정한 나만의 TAG가 표시되어 있어, 사용자의 관심사나 성향을 쉽게 파악할 수 있습니다.

AI 추천설정 섹션에서는 사용자가 자신의 성격과 선호도를 기반으로 AI가 제공하는 추천 설정을 확인할 수 있습니다.
사용자의 활동 패턴과 성향에 맞춘 추천 내용이 포함되어 있으며, 사용자는 이 정보를 바탕으로 자신의 경험을 최적화할 수 있습니다.

9. 호스트 채팅 화면

이 화면은 사용자가 호스트 AI와 상호작용할 수 있는 호스트 채팅 화면입니다.

상단에는 "호스트 AI"라는 제목과 함께 안내 문구가 표시되어, AI가 제공하는 답변이 실제 당사자의 의견과 다를 수 있음을 사용자에게 알려줍니다.

화면 상단 부분에는 호스트의 기본 정보가 카드 형태로 제공됩니다.
여기에는 호스트의 이름(예: 라봉이), 소속 학교, 학과, 학년, 성별, MBTI, 그리고 호스트를 나타내는 태그들이 표시되어 있습니다. 이 정보는 사용자가 호스트에 대해 더 잘 이해할 수 있도록 돕습니다.

중앙 채팅 영역에서는 호스트 AI와의 대화 내용이 표시됩니다.
사용자는 AI에게 질문을 던질 수 있으며, AI는 이에 대한 답변을 제공합니다.

하단에는 사용자가 추가 질문을 입력할 수 있는 입력란과 함께 "호스트와 함께하기" 버튼이 있어, 사용자가 호스트 AI와 더 깊이 있는 상호작용을 할 수 있도록 유도합니다.

10. 호스트 채팅 화면(확인 모달)

이 화면은 사용자가 호스트 AI와의 상호작용 중 특정 행동을 선택할 때 나타나는 확인 모달입니다.

사용자가 "호스트와 함께하기" 버튼을 눌렀을 때, 추가적인 확인을 위해 이 모달이 나타납니다.

모달에는 "호스트와 함께하시겠습니까?"라는 질문이 표시되며, 이와 함께 사용자가 선택한 경우 호스트에게 제공될 기본적인 정보에 대한 주의 사항이 포함되어 있습니다.
이 정보에는 사용자가 호스트와 연결될 수 있는 연락 가능한 기본 정보가 제공된다는 점이 강조됩니다.

모달 하단에는 두 개의 버튼이 제공됩니다:

안할래요: 사용자가 호스트와의 상호작용을 취소할 수 있는 버튼입니다.

함께할래요: 사용자가 호스트와의 상호작용을 확정하고 진행할 수 있는 버튼입니다.

11. AI 궁합 모달

AI 궁합 모달 궁합 점수 섹션 종합 점수

이 화면은 사용자가 AI와의 궁합을 확인할 수 있는 AI 궁합 모달입니다.

모달은 호스트 AI와 사용자의 성격, 가치관, 협력 가능성, 의사소통 등의 측면에서의 궁합을 점수화하여 시각적으로 제공하는 기능을 갖추고 있습니다.

모달 상단에는 두 개의 카드가 위치해 있으며, 왼쪽에는 사용자를, 오른쪽에는 호스트 AI를 나타내는 이미지가 표시됩니다. 각각의 카드 아래에는 AI의 성격과 역할을 간략히 설명하는 텍스트가 포함되어 있습니다.

모달의 주요 부분에서는 다양한 항목에 대한 궁합 점수가 표시됩니다:

성격궁합: 사용자의 성격과 호스트 AI의 성격이 얼마나 잘 맞는지를 평가합니다.

가치관 일치: 사용자의 가치관과 호스트 AI의 가치관이 얼마나 유사한지를 나타냅니다.

협력 가능성: 두 사람(사용자와 AI)이 함께 작업할 때 얼마나 잘 협력할 수 있는지를 평가합니다.

의사소통: 의사소통 측면에서 얼마나 잘 맞는지를 점수로 표시합니다.

각 항목을 종합한 전체 궁합 점수를 한눈에 확인할 수 있습니다.

12. 광고 채팅 화면

이 화면은 사용자가 광고와 관련된 내용을 확인하고 상호작용할 수 있는 광고 채팅 화면입니다.

AI가 제공하는 답변이 실제와 다를 수 있음을 알리는 안내 문구가 표시되어 있습니다.

메인 콘텐츠 영역에서는 현재 진행 중인 광고 캠페인의 정보를 볼 수 있습니다.

여기에는 모집 일정, 교육 기간 등 중요한 세부 사항이 간단하게 표시되어 있어, 사용자가 관심 있는 프로그램에 쉽게 접근할 수 있습니다.

광고 하단에는 사용자가 취할 수 있는 두가지 옵션이 있습니다:

사이트로 이동하기: 사용자가 광고주 웹사이트로 직접 이동할 수 있는 버튼입니다. 이 버튼은 광고에 대한 추가 정보를 제공하거나, 사용자가 해당 프로그램에 신청할 수 있도록 유도합니다.

호스트에게 궁금한 점을 물어보세요: 사용자가 광고와 관련된 궁금한 점을 호스트 AI에게 직접 물어볼 수 있는 입력창입니다. 이를 통해 사용자는 더 자세한 정보를 얻을 수 있습니다.

13. 광고 채팅 모달

광고 채팅 모달 이미지

사용자가 광고와 관련된 액션을 취하기 전에 확인할 수 있는 창입니다.

"사이트로 이동하기" 버튼을 누르면 모달이 나타나고, 사용자가 광고주의 사이트로 이동할지 선택하게 됩니다.

홈페이지로 이동하시겠습니까?"라는 질문을 통해 사용자는 결정을 재확인할 수 있습니다.

하단에는 두 버튼이 있습니다:

안할래요: 현재 페이지에 머무름

함께할래요: 광고주의 사이트로 이동

이 구조는 사용자의 실수 클릭을 방지하고, 명확한 선택을 유도합니다.

시연 영상

SUBWAY_SUFTHON_.mp4
📆 참가 프로그램

2024.08.19.(월) ~ 08.20.(화)

Surfthon

About

AI 클론을 활용하여 팀원을 찾아주는 매칭 서비스

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors