본문 바로가기
Vibe Coding

Mocha - 테토/에겐 테스트 만들기

by _션샤인 2026. 2. 15.

Google AI studio

JSON
[
  {
    "id": 1,
    "question": "거울을 볼 때, 내 얼굴에서 가장 먼저 눈에 들어오는 것은?",
    "options": [
      { "text": "선명한 T존, 턱선, 짙은 눈썹 (직선적)", "type": "teto" },
      { "text": "부드러운 얼굴형, 맑은 눈, 웃는 입매 (곡선적)", "type": "egen" }
    ]
  },
  {
    "id": 2,
    "question": "힘든 일이 생겼을 때, 나는 어떻게 반응하는가?",
    "options": [
      { "text": "원인을 분석하고 빠르게 해결책을 찾는다.", "type": "teto" },
      { "text": "감정을 추스르거나 주변에 털어놓고 위로받는다.", "type": "egen" }
    ]
  },
  {
    "id": 3,
    "question": "내가 선호하는 패션 스타일이나 분위기는?",
    "options": [
      { "text": "시크함, 깔끔한 정장/가죽, 모노톤", "type": "teto" },
      { "text": "부드러움, 포근한 니트/캐주얼, 파스텔톤", "type": "egen" }
    ]
  },
  {
    "id": 4,
    "question": "데이트나 모임에서 나는 주로?",
    "options": [
      { "text": "장소와 코스를 주도적으로 결정하고 리드한다.", "type": "teto" },
      { "text": "상대의 의견을 존중하며 함께 맞춰가는 편이다.", "type": "egen" }
    ]
  },
  {
    "id": 5,
    "question": "나에게 더 잘 어울리는 향기는?",
    "options": [
      { "text": "묵직한 우디, 머스크, 시원한 스킨향", "type": "teto" },
      { "text": "달콤한 과일, 은은한 꽃, 포근한 비누향", "type": "egen" }
    ]
  },
  {
    "id": 6,
    "question": "갈등 상황에서 나는?",
    "options": [
      { "text": "할 말은 확실하게 하고 넘어가야 직성이 풀린다.", "type": "teto" },
      { "text": "좋은 게 좋은 거라고, 부드럽게 넘어가려 한다.", "type": "egen" }
    ]
  },
  {
    "id": 7,
    "question": "나의 말투나 목소리 톤은?",
    "options": [
      { "text": "낮고 차분하며 단호한 편이다.", "type": "teto" },
      { "text": "다정다감하고 감정 표현이 섞여 있다.", "type": "egen" }
    ]
  },
  {
    "id": 8,
    "question": "주말에 더 끌리는 활동은?",
    "options": [
      { "text": "활동적인 운동, 등산, 드라이브", "type": "teto" },
      { "text": "집에서의 휴식, 맛집 탐방, 카페 수다", "type": "egen" }
    ]
  },
  {
    "id": 9,
    "question": "목표를 달성하는 나의 방식은?",
    "options": [
      { "text": "경쟁심을 발휘해 빠르고 효율적으로 쟁취한다.", "type": "teto" },
      { "text": "꾸준함과 성실함으로 안정적으로 해낸다.", "type": "egen" }
    ]
  },
  {
    "id": 10,
    "question": "사람들이 나를 보고 자주 하는 말은?",
    "options": [
      { "text": "\\"카리스마 있다\\", \\"기 쎄 보인다\\", \\"멋있다\\"", "type": "teto" },
      { "text": "\\"착해 보인다\\", \\"순해 보인다\\", \\"편안하다\\"", "type": "egen" }
    ]
  }
]

결과텍스트 생성 Javascript
// userGender: 'male' or 'female'
// tetoScore: 0 ~ 10 (선택 횟수)

const percent = tetoScore * 10;
let finalPercent = 0;
let finalType = "";
let genderText = userGender === 'male' ? "남" : "녀";

if (percent >= 50) {
    // 테토가 우세한 경우
    finalPercent = percent;
    finalType = "테토";
} else {
    // 에겐이 우세한 경우 (50% 미만일 때 반전)
    finalPercent = 100 - percent;
    finalType = "에겐";
}

// 최종 출력 예시: "80% 테토남", "60% 에겐녀"
const resultTitle = `${finalPercent}% ${finalType}${genderText}`;

 

필요 이미지 생성

 

쿠팡 파트너스 링크

3. 결과별 쿠팡 파트너스 추천 상품 (총 4가지 케이스)
남녀 구분이 있으므로, 결과 페이지에서 성별 + 유형 조합에 따라 노출 상품을 다르게 설정합니다.

🧔‍♂️ [남성] 테토남 (Teto High)
키워드: 남성미, 자기관리, 피지컬
풀업바 / 아령 세트: "완벽한 피지컬을 위한 필수템"
전동 면도기 (브라운/필립스): "깔끔하고 강인한 턱선을 위해"
활력 영양제 (아르기닌/마카): "지치지 않는 에너지를 충전하세요"
🐶 [남성] 에겐남 (Egen High)
키워드: 훈남, 피부관리, 댄디함
남성 올인원 스킨케어: "부드러운 피부결, 훈남의 기본"
니트/가디건: "여심을 자극하는 남친룩의 정석"
섬유향수/드레스퍼퓸: "은은한 비누향으로 호감도 UP"
👩 [여성] 테토녀 (Teto High)
키워드: 걸크러시, 커리어우먼, 시크
스마트워치 (애플워치/갤럭시워치): "프로페셔널한 그녀의 시간 관리"
트렌치코트/자켓: "시크한 도시 여자의 분위기 완성"
다이어트 보조제/효소: "자기관리 끝판왕을 위한 선택"
🌸 [여성] 에겐녀 (Egen High)
키워드: 러블리, 감성, 힐링
무드등/캔들 워머: "당신의 공간을 더 아늑하게"
파자마/홈웨어 세트: "사랑스러운 집순이를 위한 힐링템"
바디로션/핸드크림 (향기 좋은 것): "촉촉하고 향기로운 살결 관리"

+) 활동시 주의사항 문구 add

 

 

 

 

 

프롬프트

이제 테토/에겐 테스트 웹사이트를 만들기 위한 PRD를 만들어줘.
아래는 쿠팡 파트너스 링크 및 활동 시 주의사항이야

Mocha

Mocha: AI-Powered No‑Code App Builder for Entrepreneurs

 

Mocha: AI-Powered No‑Code App Builder for Entrepreneurs

Mocha is an AI-powered no‑code app builder that turns your idea into a live website in minutes. No coding skills needed – perfect for ambitious entrepreneurs.

getmocha.com

 

 

 

만들어진 테스트 썸네일 변경하기

https://y2ykfrpm7c3p4.mocha.app

 

Mocha: AI-Powered No‑Code App Builder for Entrepreneurs

Mocha is an AI-powered no‑code app builder that turns your idea into a live website in minutes. No coding skills needed – perfect for ambitious entrepreneurs.

getmocha.com

 

https://netlify.com

 

Push your ideas to the web | Netlify

Build with AI or code, deploy instantly. One platform with everything you need to make real apps live.

www.netlify.com

 

폴더 생성 후 index.html 및 thumbnail.png 넣기 + share/index.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8" />

  <!-- 썸네일 정보 -->
  <meta property="og:title" content="테토/에겐 성향 테스트" />
  <meta property="og:description" content="나는 테토? 에겐? 10초 만에 결과 확인하기" />
  <meta property="og:image" content="https://여기에-이미지-주소-넣기.png" />
  <meta property="og:type" content="website" />

  <!-- 자동 이동 -->
  <meta http-equiv="refresh" content="0; url=https://y2ykfrpm7c3p4.mocha.app" />

  <title>테토/에겐 테스트</title>
</head>
<body>
</body>
</html>

 

https://yourtetoegentest.netlify.app/share/

 

테토/에겐 테스트

나는 테토? 에겐? 지금 바로 확인!

yourtetoegentest.netlify.app

 

'Vibe Coding' 카테고리의 다른 글

Cursor - 이메일 자동화  (0) 2026.02.23
Cursor - 코인 정보 자동화 홈페이지  (0) 2026.02.21
Cursor - Making Personal Link in Bio page  (0) 2026.02.17
Bolt.new - Creator Support Gallery  (0) 2026.02.16
Replit - Making 3D game  (0) 2026.02.15

관련글

티스토리툴바