현실 기반 12가지 질문을 통해, 나의 성향을 유쾌하게 분석해주는 MBTI 테스트 웹앱입니다.

---

프로젝트 개요

배포 링크: MBTI 프로필 테스트

• ⏱ 개발 기간: 2025.06.13 ~ 2025.06.14 (2일)
• 🛠 기술 스택 : Next.js, TypeScript, Tailwind CSS

---

주요 기능

1. MBTI 테스트 진행

• 총 12개의 현실 기반 질문
• 각 질문마다 2개의 선택지 제공
• 선택지마다 성향(MBTI 지표) 매핑 → 최종 유형 계산

2. 결과 페이지

• 16가지 MBTI 유형별로 구성된 개성 있는 결과 제공
• 속마음, 좋아하는 것, 극혐 포인트 등 현실 기반 항목 포함
• SNS 공유 가능

3. 이미지는… GPT가 만들어줬습니다. 😇

---

🖼 OG 이미지도 직접 설정해봤습니다!

이번 프로젝트에선 처음으로 OG Image(Open Graph Image) 설정도 적용해봤습니다.
SNS나 링크에서 썸네일 미리보기 이미지가 자동으로 뜨도록 한 건데,
Next.j의 metadata에 이미지랑 title 정보를 설정했습니다.

export const metadata: Metadata = {
  title: "MBTI 테스트",
  description: "팩폭과 귀여움 사이, 당신의 성향은?",
  openGraph: {
    title: "MBTI 테스트",
    description: "팩폭과 귀여움 사이, 당신의 성향은?",
    images: [
      {
        url: "https://mbti-test-app-iota.vercel.app/og-image.png",
        width: 1200,
        height: 630,
        alt: "MBTI 썸네일",
      },
    ],
    type: "website",
  },
  twitter: {
    card: "summary_large_image",
  },
};

• public/og-image.png에 이미지 파일을 두고, 위처럼 메타 정보에 등록
• 어렵진 않았지만, 썸네일이 이런 설정으로 보인다는걸 알게 돼서 신기했음

---

⚡️ 성능 개선은 이거 하나만 ..

사실 큰 기능이 없는 단순 테스트 앱이라 성능 이슈는 없겠지 싶었는데,
Lighthouse를 돌려보니…

LCP가 19초
상세 정보를 보니 텍스트에 적용된 웹폰트가 늦게 렌더링되는 게 원인이었다.

폰트가 다운로드될 때까지 텍스트가 렌더링되지 않아서 지연 발생

@font-face {
    font-family: "Ownglyph_Seung_Hoon-Rg";
    src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/2408@1.0/Ownglyph_Seung_Hoon-Rg.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: swap; // 이거 추가 !
}

font-display: swap이란?
: 폰트가 로딩되기 전에 기본 시스템 폰트로 먼저 렌더링하고, 웹폰트가 도착하면 그때 바꿔치기하는 방식

이거 하나만 추가하고 다시 측정해보니

LCP 1.2초, 성능 점수 75점 -> 100점
덕분에 웹폰트가 렌더링을 막는 방식과 폰트 최적화에 대해 제대로 이해할 수 있었다.

---

😊 짧은 회고

친구들이랑 일상에서 주고받던 대화를 그대로 질문으로 정리해서 빠르게 기획하고, 구현하고, 테스트해볼 수 있어서 재밌었다.
Next.js로 만든 토이 프로젝트는 이번이 두 번째인데, 할수록 너무 편하고 좋다!
이번 프로젝트를 통해 App Router, Zustand, OG 이미지 설정 같은 기능도
직접 써보면서 훨씬 익숙해질 수 있었던 2일이었다. ☺️😊

---

🔗 GitHub

👉 GitHub 바로가기