연애성향 테스트 구조
훌륭한 질문이에요!
당신이 지금까지 구성한 기능 흐름과 인터페이스 구조는, 정확히 말하면 아래와 같은 디지털 제품 구조 방식에 해당합니다:
⸻
✅ 1. 당신의 구조는?
“Feature-driven Information Architecture (기능 중심 정보 구조)”
• 기능 흐름 기반: 사용자가 무엇을 하는지(테스트 → 분석 → 추천 → 공유) 단계별로 나뉨
• 도메인별 분리: 성향 테스트, 마이페이지, 경로 추천 등 기능별 모듈화
• 컴포넌트 기반 UI: 각 기능 단위에 Button, Card, Tabs, Modal 등 공통 컴포넌트 재사용
⸻
✅ 2. 이 구조를 시각화하는 3가지 방법
① 사용자 플로우 다이어그램 (User Flow)
• 사용자가 어떤 화면을 통해 어떤 동작을 하는지 흐름 중심으로
• 예: 시작 → 테스트 진행 → 결과 → 추천 보기 → 비교/공유
• Figma, Whimsical, Miro에서 만들기 좋음
② 기능 모듈 맵 (Feature Map)
• 전체 앱 기능을 도메인별 카드로 나누고, 컴포넌트 레벨까지 분해
• 예: 테스트 → 문항 응답 → 점수화 → 결과 생성 → 저장
• Draw.io 또는 Notion Table로 정리 추천
③ 폴더/컴포넌트 트리 시각화
• 현재처럼 디렉터리 구조를 트리 형식으로 시각화
• 시각적 의존성이나 재사용성을 표현할 수 있음
• Figma Auto Layout or VSCode extension도 가능
⸻
✅ 3. 유사 서비스 및 참고 사례
어플명 주요 기능 비슷한 점
성격유형 테스트 (16personalities.com) 질문 → 결과 분석 → 공유 테스트 → 유형 분석 → 공유 UI 구조
연애능력고사 (by TMI Lab) 연애력 진단 테스트 설문 방식 + 결과 카드 + 공유
테라피컬 (therapycle) 감정 유형 분석 + 연동 콘텐츠 추천 성향 기반 분석 → 콘텐츠/행동 추천
에버랜드 커플 성향 테스트 질문 응답 → 커플 유형 분석 → 데이트 코스 추천 결과 기반 추천 + 캐릭터 연결
심쿵 테스트 (naver.com) 캐릭터 기반 심리테스트 → 결과 → 공유 감성 UI + SNS 공유 특화 구조
⸻
✅ 요약 정리
항목 설명
구조 명칭 Feature-driven Information Architecture
시각화 추천 User Flow / Feature Map / Folder Tree
시각화 툴 Figma / Miro / Notion / Draw.io
유사 앱 16personalities, 연애능력고사, 테라피컬, 에버랜드 성향테스트 등
⸻
필요하시면, 위 중 하나를 Figma 이미지로 바로 만들어드릴 수도 있어요.
예를 들어 “User Flow 다이어그램을 Figma 스타일로 만들어줘“라고 요청하시면 됩니다!
어떤 시각화부터 그려볼까요?
SPA(Single Page Application, 싱글 페이지 어플리케이션) 구조로 구축하면, 전체 앱 구조와 구현 방식에 있어 다음과 같은 변경 사항 또는 고려할 점들이 있습니다:
⸻
✅ 1. 라우팅 방식 변경 (React Router 등)
기존:
• 여러 HTML 페이지 또는 서버 라우팅 기반 이동 (ex. /result, /test)
SPA에서는:
• 클라이언트 사이드 라우팅 사용 (예: React Router)
npm install react-router-dom
} /> } /> } /> } />⸻
✅ 2. 상태 유지 방식 고려 (React 상태 or 상태관리)
SPA는 페이지가 리프레시되지 않기 때문에 중간 상태 유지가 필수입니다.
예:
• 테스트 응답 중간 저장 → useState or Zustand, Recoil 등 사용
• 로그인 세션 유지 (JWT localStorage)
• 추천 결과 → props로 전달 또는 Context API로 전역관리
⸻
✅ 3. 데이터 흐름 설계 정교화
• 모든 데이터를 서버가 아닌 클라이언트에서 구성해야 함
• 결과 페이지, 공유, 비교 등의 흐름은 라우팅 + 상태 전달 기반으로 설계해야 함
예:
navigate('/result', { state: { resultData } });
⸻
✅ 4. Modal / Toast 등 인터랙션 컴포넌트는 SPA에 더 적합
• 컴포넌트 트리 안에서 쉽게 컨트롤 가능
• 백엔드 리디렉션 없이 사용자 경험 유지
• 상태만 바꿔서 뷰 업데이트
⸻
✅ 5. SEO 고려 사항 (SSR이 아님)
SPA는 SEO가 불리할 수 있으므로, 만약 검색 최적화가 중요하다면:
• React + Next.js 로 확장 고려
• 또는 메타태그, Open Graph 처리는 클라이언트에서 직접 구현
⸻
✅ 폴더 구조에서 바뀔 수 있는 것
romance-ai/
├── src/
│ ├── app/ → ❌ 제거하거나
│ ├── pages/ ✅ SPA 라우트별 페이지로 구성
│ │ ├── Home.jsx
│ │ ├── TestPage.jsx
│ │ ├── ResultPage.jsx
│ │ └── MyPage.jsx
│ ├── router/ ✅
│ │ └── AppRouter.jsx
⸻
✅ 요약: SPA 구조에서 달라지는 것
항목 변경 내용
라우팅 React Router로 클라이언트 사이드 전환
상태관리 페이지 이동 시 데이터 유지 필요 (Context, Recoil 등)
SEO 대응 CSR 한계 → 필요시 SSR or 메타처리
컴포넌트 구성 Modal, Tabs, Toast 등 SPA에 최적화
페이지 구성 HTML 분할 → 컴포넌트 기반 route 단위로 나눔
⸻
필요하다면 기존 프로젝트 폴더를 SPA 방식으로 재설계한 예시 트리 + 라우터 구성도 드릴 수 있어요.
원하시면 SPA 전용 구조로 리팩터링해드릴까요?
좋아요! romance-ai 프로젝트를 SPA(Single Page Application) 구조에 맞춰 완전히 리팩토링한 폴더 구조 + 라우터 구성 + 기본 상태관리 틀을 아래와 같이 설계해드릴게요.
⸻
✅ 1. SPA 구조에 맞는 전체 폴더 트리
romance-ai/
├── public/
│ └── index.html
├── src/
│ ├── pages/ # 라우트별 페이지 컴포넌트
│ │ ├── Home.jsx
│ │ ├── Test.jsx
│ │ ├── Result.jsx
│ │ ├── Compare.jsx
│ │ └── MyPage.jsx
│ ├── components/ # 재사용 컴포넌트
│ │ ├── ui/ # 디자인 시스템
│ │ │ ├── Button.jsx
│ │ │ ├── Card.jsx
│ │ │ ├── Modal.jsx
│ │ │ └── Toast.jsx
│ │ ├── form/ # 입력 계열
│ │ │ ├── RadioGroup.jsx
│ │ │ ├── RangeSlider.jsx
│ │ │ └── TextInput.jsx
│ │ └── result/ # 결과 컴포넌트
│ │ └── ResultCard.jsx
│ ├── router/ # SPA 라우팅 관리
│ │ └── AppRouter.jsx
│ ├── context/ # 전역 상태관리 (Context or Recoil 등)
│ │ └── TestContext.jsx
│ ├── hooks/ # 커스텀 훅
│ ├── services/ # API 연동
│ │ └── resultApi.js
│ ├── styles/
│ │ └── globals.css
│ └── App.jsx # 최상위 App
├── tailwind.config.js
├── package.json
└── README.md
⸻
✅ 2. router/AppRouter.jsx 예시 (React Router v6 기준)
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from '../pages/Home';
import Test from '../pages/Test';
import Result from '../pages/Result';
import Compare from '../pages/Compare';
import MyPage from '../pages/MyPage';
const AppRouter = () => (
<Route path="/" element={} />
<Route path="/test" element={} />
<Route path="/result" element={} />
<Route path="/compare" element={} />
<Route path="/mypage" element={} />
);
export default AppRouter;
⸻
✅ 3. src/App.jsx
import AppRouter from './router/AppRouter';
import { TestProvider } from './context/TestContext'; // 전역 응답 상태
function App() {
return (
);
}
export default App;
⸻
✅ 4. 전역 상태 예시 (context/TestContext.jsx)
import { createContext, useState, useContext } from 'react';
const TestContext = createContext();
export const TestProvider = ({ children }) => {
const [answers, setAnswers] = useState([]);
const [result, setResult] = useState(null);
return (
<TestContext.Provider value={{ answers, setAnswers, result, setResult }}>
{children}
</TestContext.Provider>
);
};
export const useTest = () => useContext(TestContext);
⸻
✅ 5. 페이지 이동 + 상태 전달 예시
import { useNavigate } from 'react-router-dom';
import { useTest } from '../context/TestContext';
const SubmitButton = () => {
const navigate = useNavigate();
const { setResult } = useTest();
const handleSubmit = () => {
const calculated = calculateResult();
setResult(calculated);
navigate('/result');
};
return 결과 보기;
};
⸻
✅ 마무리 요약
항목 적용 내용
폴더 구조 도메인 중심 + SPA 페이지 중심 구조
라우팅 react-router-dom 사용
상태 관리 Context 또는 Recoil, Zustand 등
특징 리로드 없는 전환, 빠른 UX, 인터랙션 최적화
⸻
필요하시면 이 구조를 Figma 다이어그램으로 시각화해드릴 수도 있고, 실제 코드 템플릿 .zip도 만들어드릴 수 있어요.
시각화 다이어그램 or 코드 파일 템플릿 중 어떤 걸 원하시나요?
