반려동물 MBTI, 이렇게 만들었습니다 (바이브코딩 후기)

티스토리 뷰

개발 일기

반려동물 MBTI, 이렇게 만들었습니다 (바이브코딩 후기)

WegglePlus 2025. 10. 8. 15:13

첫 개인 사이드 프로젝트로, 바이브코딩을 통해 반려동물 MBTI 서비스를 만들기로 했습니다.

이 아이디어를 생각하게 된 계기는, 누군가와 대화를 하다가. 새로운 사이드 프로젝트인 MBTI와 관련된 프로젝트를 만든다고 했다. 그리고 같은 날에 강아지를 엄청 좋아한다는 이야기를 들었다.

아이디어의 시작은 우연한 대화였습니다. 누군가의 사이드 프로젝트 아이디어를 들었고, MBTI 관련이였으며, 같은날 다른 사람이 강아지를 정말 좋아한다는 얘기를 했습니다.

“그렇다면 MBTI를 사람뿐 아니라 반려동물에게도 적용할 수 있지 않을까?“라는 생각이 들었습니다.

예를 들어, 손님을 반기는 강아지가 있는가 하면, 그렇지 않은 강아지도 있죠.

이런 차이를 통해 재미있게 E/I 성향을 가늠할 수 있을 것 같았습니다.

아이디어 구체화

해당 글에서 이야기 했듯이, “그냥 질러보는 도전하는 마음”을 가지고 처음으로 시도해볼만하다고 생각했습니다.

그렇게 아주 단순한 아이디어에서 출발했습니다.

하지만 곧 이런 의문이 들었습니다.

“MBTI와 반려동물에 대한 얕은 지식만 가지고 내가 이걸 만들 수 있을까?”

답은 바로 나왔습니다. AI를 활용하자!

서비스 제작 과정은 보통 기획 → 디자인 → 개발 → 완성 단계로 나눌 수 있다고 생각했습니다.

그래서 먼저 기획을 시작합니다.. 가장 중요한건, 질문을 만들고 그 질문을 통해 결과를 도출해내는것이라고 생각했습니다.

ChatGPT 활용

이 과정을 먼저 Chat GPT에게 물어봤다. 일단 실제로 동물 MBTI가 있는지 체크한다.

[질문]

동물도 MBTI가 있을까? 그걸 측정할수 있는 재미있는 프로젝트가 있을까?

[답변 - 일부분 발췌]

반려동물 MBTI 테스트 웹앱

주인이 반려동물 행동에 대한 질문에 답하면, 그 결과를 MBTI 유형으로 매핑해줌.

“새로운 장난감이 오면 바로 달려든다 → E(외향) 경향”, “혼자 있는 걸 잘 참는다 → I(내향) 경향” 등.

[질문]

반려동물 MBTI 테스트 웹앱을 만드는것이 목표였어. 이거에 대한 기획서를 작성해줘

[답변 - 일부분 발췌]

🐾 반려동물 MBTI 프로젝트 설계

(1) 플로우

사용자 진입 → “우리 반려동물의 MBTI를 알아보세요!”

설문 시작 → 주인이 반려동물의 행동을 보고 선택지에 답함

결과 계산 → 각 질문을 MBTI 축(E/I, S/N, T/F, J/P)에 매핑

결과 페이지 → MBTI 유형 + 설명 + 재미있는 별명(“고양이 INTP → 철학자형 집사킬러”)

(2) 샘플 질문 (10문항)

외향/내향 (E/I)

낯선 사람이 집에 오면 바로 다가가서 반긴다 (E) vs 숨어버린다 (I)

새로운 동물이 집에 오면 호기심 가득하게 다가간다 (E) vs 멀찍이서 지켜본다 (I)

감각/직관 (S/N)

산책할 때 냄새 맡으며 꼼꼼히 탐색한다 (S) vs 새로운 길을 먼저 가보려 한다 (N)

같은 장난감을 계속 가지고 논다 (S) vs 금방 질려서 다른 걸 찾는다 (N)

사고/감정 (T/F)

밥 시간 늦으면 화내며 짖거나 울음 (T) vs 얌전히 기다리며 눈치본다 (F)

집사의 기분이 안 좋으면 곁에 와서 가만히 앉아준다 (F) vs 그런 거 신경 안 쓰고 자기 할 거 한다 (T)

판단/인식 (J/P)

정해진 루틴(산책, 밥 시간)을 좋아한다 (J) vs 변화를 잘 받아들인다 (P)

산책 중 항상 같은 길을 가려 한다 (J) vs 즉흥적으로 다른 방향으로 튼다 (P)

(3) 결과 출력 예시

“당신의 반려동물은 ENFP, 자유로운 탐험가형 🐕🌍”

설명: 늘 새로움을 찾고, 집사와 함께 어디든 떠나고 싶어합니다.

추천 활동: 새로운 산책 코스, 다양한 장난감 실험.

바로 제가 구상했던 아이디어와 일치했습니다.

놀랍게도, 불과 2분 만에 제가 머릿속에서만 생각하던 흐름이 정리돼버린 겁니다.

사실 핵심은 두 가지뿐이었습니다.

질문 목록

MBTI의 4가지 축(E/I, S/N, T/F, J/P)을 기준으로 각 2~3문항씩 총 12문항을 준비합니다.
사용자는 예/아니오 또는 선택형으로 답변합니다.

⸻

(1) 외향(E) / 내향(I)
	1.	낯선 사람이 집에 오면 바로 다가가 반기나요?
	•	(E) 그렇다
	•	(I) 숨거나 조용히 지켜본다
	2.	새로운 동물을 만나면 먼저 다가가 인사하나요?
	•	(E) 적극적으로 다가간다
	•	(I) 거리를 두고 지켜본다
	3.	산책 중 다른 사람/동물과 쉽게 교류하나요?
	•	(E) 그렇다
	•	(I) 무관심하다

⸻

(2) 감각(S) / 직관(N)
	4.	산책할 때 냄새 맡고 세세하게 탐색하나요?
	•	(S) 그렇다
	•	(N) 큰 틀만 보고 빨리 이동하려 한다
	5.	장난감을 오랫동안 질리지 않고 가지고 노나요?
	•	(S) 같은 걸 반복적으로 좋아한다
	•	(N) 금방 질려서 새로운 걸 찾는다
	6.	집안의 작은 변화(물건 위치, 가구 이동)에 민감하게 반응하나요?
	•	(S) 작은 변화에도 신경 쓴다
	•	(N) 크게 개의치 않는다

⸻

(3) 사고(T) / 감정(F)
	7.	밥 시간이 늦어지면 화내듯 반응하나요?
	•	(T) 그렇다
	•	(F) 얌전히 기다리거나 집사를 바라본다
	8.	집사가 기분이 안 좋으면 눈치를 보고 다가오나요?
	•	(F) 위로하듯 곁에 온다
	•	(T) 별로 상관 안 하고 자기 할 걸 한다
	9.	놀아달라고 할 때 집사가 거절하면?
	•	(F) 삐치거나 슬퍼한다
	•	(T) 곧 포기하고 딴 걸 한다

⸻

(4) 판단(J) / 인식(P)
	10.	정해진 루틴(밥 시간, 산책 시간)을 지켜야 하나요?
	•	(J) 꼭 지켜야 한다
	•	(P) 융통성 있게 다 다를 수 있다
	11.	산책할 때 항상 같은 길을 가려 하나요?
	•	(J) 익숙한 길만 고집한다
	•	(P) 즉흥적으로 다른 길로 간다
	12.	새로운 환경(이사, 여행)에 적응을 잘하나요?
	•	(P) 적응을 금방 한다
	•	(J) 힘들어한다

⸻

2. 결과 산출 방식

(1) 점수 매핑
	•	각 질문은 MBTI 축에 대응 (E vs I, S vs N, T vs F, J vs P)
	•	사용자의 답변에 따라 각 축에 점수 +1
	•	예:
	•	1번 질문에서 “다가간다” → E +1
	•	1번 질문에서 “숨는다” → I +1

(2) 최종 유형 결정
	•	각 축의 점수 비교
	•	E vs I → 더 높은 쪽 선택
	•	S vs N, T vs F, J vs P도 동일
	•	4글자가 합쳐져 최종 MBTI 유형 결정

예:
	•	E=2, I=1 → E
	•	S=3, N=0 → S
	•	T=1, F=2 → F
	•	J=1, P=2 → P
	•	최종 결과: ESFP

결과 목록

export const results: Record<string, {
  name: string;
  description: string;
  recommendation: string;
}> = {
  ENFP: {
    name: "탐험가형 🐕",
    description: "새로움과 모험을 사랑하며, 집사와 함께하는 걸 즐기는 성격.",
    recommendation: "새로운 산책 코스, 다양한 장난감을 시도해 보세요."
  },
  ENTP: {
    name: "발명가형 🐶",
    description: "호기심이 많고 늘 새로운 놀이를 만들어내는 재간둥이.",
    recommendation: "퍼즐 장난감이나 두뇌를 자극하는 새로운 놀이를 제공하세요."
  },
  ENFJ: {
    name: "리더형 🐕",
    description: "사람과 동물 모두 잘 이끄는 사회적 리더.",
    recommendation: "다른 반려동물 친구들과의 모임에서 리더 역할을 할 기회를 주세요."
  },
  ENTJ: {
    name: "지휘관형 🐕",
    description: "목표 지향적이고 강한 리더십을 가진 성격.",
    recommendation: "훈련이나 미션을 주면 성취감을 느낍니다."
  },

  INFP: {
    name: "몽상가형 🐱",
    description: "조용하고 내면 세계가 풍부하며 집사에게 헌신적.",
    recommendation: "조용한 공간에서 함께 휴식하거나 교감하는 시간을 주세요."
  },
  INTP: {
    name: "철학자형 🐱",
    description: "혼자만의 시간을 좋아하고 깊이 있는 탐구를 즐깁니다.",
    recommendation: "창밖 구경, 퍼즐 장난감으로 생각거리를 주세요."
  },
  INFJ: {
    name: "상담가형 🐱",
    description: "집사의 감정을 잘 읽고 위로해주는 따뜻한 성격.",
    recommendation: "집사가 힘들어할 때 옆에 있어주는 시간을 즐깁니다."
  },
  INTJ: {
    name: "전략가형 🐱",
    description: "조용하지만 똑똑하고 계획적인 성격.",
    recommendation: "두뇌를 쓰는 놀이, 규칙적인 훈련을 제공해 보세요."
  },

  ESFP: {
    name: "흥부자형 🐶",
    description: "에너지가 넘치고 어디서든 주목받는 분위기 메이커.",
    recommendation: "야외 활동과 즉흥적인 놀이로 즐겁게 해주세요."
  },
  ESTP: {
    name: "모험가형 🐕",
    description: "즉흥적이고 활동적인 성격, 위험도 두려워하지 않음.",
    recommendation: "새로운 장소 탐험, 자유로운 산책 코스를 즐기게 해주세요."
  },
  ESFJ: {
    name: "사교가형 🐶",
    description: "사람과 교류를 좋아하고 친밀감을 추구합니다.",
    recommendation: "다른 반려동물 친구들과의 모임을 만들어 보세요."
  },
  ESTJ: {
    name: "관리자형 🐕",
    description: "규칙과 질서를 좋아하고, 리더십이 강한 성격.",
    recommendation: "정해진 산책 시간과 훈련 루틴을 철저히 지켜주세요."
  },

  ISFP: {
    name: "예술가형 🐱",
    description: "감성이 풍부하고 자유분방한 성격, 혼자 노는 걸 즐김.",
    recommendation: "혼자 놀 수 있는 장난감을 다양하게 제공해 주세요."
  },
  ISTP: {
    name: "장인형 🐱",
    description: "조용하지만 상황에 잘 적응하고 관찰력이 뛰어남.",
    recommendation: "새로운 장난감 실험, 탐험 놀이를 주기적으로 해주세요."
  },
  ISFJ: {
    name: "수호자형 🐱",
    description: "집사와 가족에게 헌신적이고 충실한 성격.",
    recommendation: "집사 곁에서 시간을 보내며 안정감을 느낍니다."
  },
  ISTJ: {
    name: "관리자형 🐱",
    description: "규칙적이고 안정적인 성격으로, 일관된 루틴을 좋아합니다.",
    recommendation: "일정한 식사와 산책 루틴을 유지해 주세요."
  }
};

여기서 흥미로운 점은, 한국에서 가장 흔한 반려동물이 강아지와 고양이이기에, 결과 화면에도 🐶/🐕, 🐱 이모지를 활용했습니다.

Figma Makers 활용

아래의 기획서를 그대로 프롬프트에 넣어 Figma Makers를 실행했습니다.

## 배경
- 사람에게 적용되는 MBTI를 반려동물에게 적용하는 서비스를 만듭니다.
- 질문지들이 있고 질문을 선택하면 MBTI를 볼수 있습니다.

## MVP 기능
- 질문지가 있고 그에 대한 질문에 대해 선택할수 있습니다.
- 질문에 따른 MBTI의 결과를 볼수 있습니다.
- 결과에 대한 이미지 카드로 다운로드받아 공유를 할수 있습니다.

## 비지니스 모델
- 구글 애드센스
- buy a coffee

## 질문지
(1) 외향(E) / 내향(I)
	1.	낯선 사람이 집에 오면 바로 다가가 반기나요?
	•	(E) 그렇다
	•	(I) 숨거나 조용히 지켜본다
	2.	새로운 동물을 만나면 먼저 다가가 인사하나요?
	•	(E) 적극적으로 다가간다
	•	(I) 거리를 두고 지켜본다
	3.	산책 중 다른 사람/동물과 쉽게 교류하나요?
	•	(E) 그렇다
	•	(I) 무관심하다

⸻

(2) 감각(S) / 직관(N)
	4.	산책할 때 냄새 맡고 세세하게 탐색하나요?
	•	(S) 그렇다
	•	(N) 큰 틀만 보고 빨리 이동하려 한다
	5.	장난감을 오랫동안 질리지 않고 가지고 노나요?
	•	(S) 같은 걸 반복적으로 좋아한다
	•	(N) 금방 질려서 새로운 걸 찾는다
	6.	집안의 작은 변화(물건 위치, 가구 이동)에 민감하게 반응하나요?
	•	(S) 작은 변화에도 신경 쓴다
	•	(N) 크게 개의치 않는다

⸻

(3) 사고(T) / 감정(F)
	7.	밥 시간이 늦어지면 화내듯 반응하나요?
	•	(T) 그렇다
	•	(F) 얌전히 기다리거나 집사를 바라본다
	8.	집사가 기분이 안 좋으면 눈치를 보고 다가오나요?
	•	(F) 위로하듯 곁에 온다
	•	(T) 별로 상관 안 하고 자기 할 걸 한다
	9.	놀아달라고 할 때 집사가 거절하면?
	•	(F) 삐치거나 슬퍼한다
	•	(T) 곧 포기하고 딴 걸 한다

⸻

(4) 판단(J) / 인식(P)
	10.	정해진 루틴(밥 시간, 산책 시간)을 지켜야 하나요?
	•	(J) 꼭 지켜야 한다
	•	(P) 융통성 있게 다 다를 수 있다
	11.	산책할 때 항상 같은 길을 가려 하나요?
	•	(J) 익숙한 길만 고집한다
	•	(P) 즉흥적으로 다른 길로 간다
	12.	새로운 환경(이사, 여행)에 적응을 잘하나요?
	•	(P) 적응을 금방 한다
	•	(J) 힘들어한다
	
	## 결과
	{
  ENFP: {
    name: "탐험가형 🐕",
    description: "새로움과 모험을 사랑하며, 집사와 함께하는 걸 즐기는 성격.",
    recommendation: "새로운 산책 코스, 다양한 장난감을 시도해 보세요."
  },
  ENTP: {
    name: "발명가형 🐶",
    description: "호기심이 많고 늘 새로운 놀이를 만들어내는 재간둥이.",
    recommendation: "퍼즐 장난감이나 두뇌를 자극하는 새로운 놀이를 제공하세요."
  },
  ENFJ: {
    name: "리더형 🐕",
    description: "사람과 동물 모두 잘 이끄는 사회적 리더.",
    recommendation: "다른 반려동물 친구들과의 모임에서 리더 역할을 할 기회를 주세요."
  },
  ENTJ: {
    name: "지휘관형 🐕",
    description: "목표 지향적이고 강한 리더십을 가진 성격.",
    recommendation: "훈련이나 미션을 주면 성취감을 느낍니다."
  },

  INFP: {
    name: "몽상가형 🐱",
    description: "조용하고 내면 세계가 풍부하며 집사에게 헌신적.",
    recommendation: "조용한 공간에서 함께 휴식하거나 교감하는 시간을 주세요."
  },
  INTP: {
    name: "철학자형 🐱",
    description: "혼자만의 시간을 좋아하고 깊이 있는 탐구를 즐깁니다.",
    recommendation: "창밖 구경, 퍼즐 장난감으로 생각거리를 주세요."
  },
  INFJ: {
    name: "상담가형 🐱",
    description: "집사의 감정을 잘 읽고 위로해주는 따뜻한 성격.",
    recommendation: "집사가 힘들어할 때 옆에 있어주는 시간을 즐깁니다."
  },
  INTJ: {
    name: "전략가형 🐱",
    description: "조용하지만 똑똑하고 계획적인 성격.",
    recommendation: "두뇌를 쓰는 놀이, 규칙적인 훈련을 제공해 보세요."
  },

  ESFP: {
    name: "흥부자형 🐶",
    description: "에너지가 넘치고 어디서든 주목받는 분위기 메이커.",
    recommendation: "야외 활동과 즉흥적인 놀이로 즐겁게 해주세요."
  },
  ESTP: {
    name: "모험가형 🐕",
    description: "즉흥적이고 활동적인 성격, 위험도 두려워하지 않음.",
    recommendation: "새로운 장소 탐험, 자유로운 산책 코스를 즐기게 해주세요."
  },
  ESFJ: {
    name: "사교가형 🐶",
    description: "사람과 교류를 좋아하고 친밀감을 추구합니다.",
    recommendation: "다른 반려동물 친구들과의 모임을 만들어 보세요."
  },
  ESTJ: {
    name: "관리자형 🐕",
    description: "규칙과 질서를 좋아하고, 리더십이 강한 성격.",
    recommendation: "정해진 산책 시간과 훈련 루틴을 철저히 지켜주세요."
  },

  ISFP: {
    name: "예술가형 🐱",
    description: "감성이 풍부하고 자유분방한 성격, 혼자 노는 걸 즐김.",
    recommendation: "혼자 놀 수 있는 장난감을 다양하게 제공해 주세요."
  },
  ISTP: {
    name: "장인형 🐱",
    description: "조용하지만 상황에 잘 적응하고 관찰력이 뛰어남.",
    recommendation: "새로운 장난감 실험, 탐험 놀이를 주기적으로 해주세요."
  },
  ISFJ: {
    name: "수호자형 🐱",
    description: "집사와 가족에게 헌신적이고 충실한 성격.",
    recommendation: "집사 곁에서 시간을 보내며 안정감을 느낍니다."
  },
  ISTJ: {
    name: "관리자형 🐱",
    description: "규칙적이고 안정적인 성격으로, 일관된 루틴을 좋아합니다.",
    recommendation: "일정한 식사와 산책 루틴을 유지해 주세요."
  }
};

[결과]

내가 원하는 방향의 약 70%, 핵심기능은 90%까지 한번의 프롬프트로 완성을 하였다.

Figma Makers를 처음 사용해본 소감

(장점) 디자인에 대해 전혀 몰라도 기본 디자인 컴포넌트가 제공됩니다. 프로젝트 내 components/figma 폴더에 실제 코드 형태로 존재해 바로 활용할 수 있었습니다.
(장점) 기본적으로 React 코드로 제공되며, UI뿐만 아니라 UX적인 요소와 mock data까지 포함되어 있어 굉장히 편리했습니다.
(장점) 대화를 이어갈 수 있어 후속 작업이 수월했습니다.
(장점/단점) 모든 디자인 컴포넌트가 자동 생성됩니다. 사용하지 않는 컴포넌트도 포함되어 개발자 입장에서는 신경 쓰일 수 있지만, 장기적으로 고도화를 고려한다면 오히려 도움이 될 수 있다고 생각했습니다.
(단점) 스타일이 CSS 파일로 생성되는데 구조가 꽤 복잡합니다. 개발 경험이 부족하다면 직접 수정하기 어려울 수 있습니다.
(단점) 라이브러리 코드가 버전까지 포함되어 있어, 바로 쓰기에는 괜찮지만 기존 프로젝트에 통합하려면 수정이 필요했습니다.
(단점) 공유하기 기능이 이미지 저장이 아닌 버튼 클릭 시 동작하지 않았습니다.
- 이 부분은 GPT + Copilot Agent + 직접 구현을 조합해 해결했습니다. (추후 별도로 글을 작성해보겠습니다.)

추가 적용

현재 페이지는 초기 생성본과 조금 다릅니다.

footer를 제거하고,
구글 애드센스를 직접 붙였습니다. (애드센스를 서비스에 처음 적용해본 경험이라, 자동 삽입 기능이 있다는 걸 몰랐습니다. 이 부분도 나중에 별도 글로 정리할 예정입니다.)

결국 Next.js 기반 제 서비스에 코드를 그대로 복사해 적용했습니다.

배포

첫 바이브코딩 결과, 기획부터 배포까지 약 30분밖에 걸리지 않았습니다.

프론트엔드만으로 가능한 서비스였고, Vercel Pro를 결제해 바로 배포했기 때문에 큰 어려움은 없었습니다.

👉 결과물: Pet MBTI 서비스

Pet MBTI - 반려동물 성격 유형 테스트

귀여운 반려동물의 성격 유형을 MBTI 스타일로 알아보세요! 지금 바로 테스트해보세요 🐶🐱

weggle-plus.co.kr

느낀 점

아주 간단한 아이디어라면 짧은 시간 안에 충분히 만들어볼 수 있습니다. → 빠른 실험이 가능합니다.
AI가 모든 걸 한 번에 만들어주진 않습니다. 컨텍스트를 유지하면서 차근차근 완성해 나가는 것이 중요합니다.
일정 수준의 개발 지식은 필요합니다. 노코드 툴은 아니기 때문에, 간단한 수정 정도는 직접 해야 할 확률이 높습니다.
Base(기반) 가 중요합니다. 예를 들어, 디자인 컴포넌트나 개발 보일러플레이트가 있으면 훨씬 빠르게 진행할 수 있습니다.

About WegglePlus

WegglePlus는 문제를 정의하고, 이를 해결하는 여러 개의 서비스를 설계·개발·운영합니다.
이 블로그는 그 과정에서의 기술적 선택과 시행착오를 공유합니다.

https://weggle-plus.co.kr

'개발 일기' 카테고리의 다른 글

디자인 시스템을 위한 로딩 스피너 컴포넌트 제작기 (0)	2025.11.06
혼자 개발하다 보니 코드가 제멋대로… 그래서 Prettier를 깔았다 (1)	2025.10.19
데이터 수집을 위한 Clarity 설정기 (0)	2025.10.08
데이터 수집을 위한 Google Analytics 설정기 (0)	2025.10.08
바이브 코딩을 시작한 이유 (0)	2025.10.08

최근에 올라온 글

최근에 달린 댓글

링크

서비스 주소

티스토리 뷰