사례

심리테스트

결과물 새 탭 ↗
프로젝트 시작10월 8일 오전 02:25바로 개발 시작
개발 내용
"나를 동물로 표현하면?" 심리테스트 웹서비스를 만들어줘. 12개 2지선다 질문에 답하면 8가지 동물 유형 중 하나가 결과로 나오고, 그 결과를 친구에게 공유하게 만드는 게 목적이야. 아래 문항·유형·채점 규칙·문구는 확정값이니 글자 그대로 쓰고 바꾸지 마. [페이지] - / : 인트로 — 제목 "나를 동물로 표현하면? 🦁", 부제 "12개 질문으로 알아보는 나의 동물 유형 — 소요시간 1분", 참여자 수, [시작하기] - /test : 질문 — 진행 바(예: 3/12), 선택하면 자동으로 다음 질문, [이전] 버튼으로 앞 질문 다시 고르기 - /result/{code} : 결과 (예: /result/EPW) — 유형별 고유 URL, 새로고침해도 같은 결과 [채점] - 세 축 × 4문항: 에너지 E(함께)/I(혼자) = 1·4·7·10번, 방식 P(계획)/S(즉흥) = 2·5·8·11번, 관계 W(다정)/C(쿨) = 3·6·9·12번. - 축마다 4문항 중 더 많이 고른 쪽. 2:2 동점이면 그 축의 첫 문항(1·2·3번) 선택을 따른다. 랜덤 금지 — 같은 답이면 항상 같은 결과. - 결과 코드 = 에너지(E/I) + 방식(P/S) + 관계(W/C) 세 글자. [문항] (괄호는 그 선택지가 가리키는 성향) 1. 주말에 갑자기 하루가 통째로 비면? — A 친구들한테 연락해서 약속을 잡는다 (E) / B 집에서 혼자만의 시간을 만끽한다 (I) 2. 여행 계획을 세울 때 나는? — A 일정표를 시간 단위로 짠다 (P) / B 숙소만 잡고 나머지는 가서 정한다 (S) 3. 친구가 고민을 털어놓으면? — A 일단 감정에 공감하며 같이 속상해한다 (W) / B 해결책부터 같이 찾아본다 (C) 4. 처음 보는 사람들과의 모임에서 나는? — A 먼저 말을 걸며 분위기를 띄운다 (E) / B 누가 말 걸어주길 기다리는 편 (I) 5. 잡혀 있던 약속이 갑자기 취소되면? — A 계획이 틀어져서 어딘가 찝찝하다 (P) / B 오히려 좋아, 갑자기 생긴 자유시간! (S) 6. 단톡방에서 나는? — A 리액션 담당, 이모티콘 부자 (W) / B 필요한 말만 하는 편 (C) 7. 스트레스가 쌓였을 때 나는? — A 사람들을 만나 수다로 푼다 (E) / B 혼자 있으면서 에너지를 충전한다 (I) 8. 새로운 일을 시작할 때 나는? — A 순서를 정리한 뒤에 시작한다 (P) / B 일단 시작하면서 감을 잡는다 (S) 9. 선물을 고를 때 나는? — A 상대가 뭘 좋아할지 한참 고민한다 (W) / B 실용적인 걸로 빠르게 고른다 (C) 10. 여행지에서 나는? — A 일행·현지 사람들과 어울리는 게 좋다 (E) / B 조용히 풍경을 눈에 담는 게 좋다 (I) 11. 마감이 있는 일은? — A 미리미리 나눠서 끝내 둔다 (P) / B 마감 직전에 몰아서 해치운다 (S) 12. 누군가와 갈등이 생기면? — A 관계가 상할까 봐 먼저 다가간다 (W) / B 시간이 해결해 준다고 생각한다 (C) [유형 8종] 코드 · 동물 · 이모지 · 캐치프레이즈 · 잘 맞음 / 안 맞음, 다음 줄은 설명 - EPW 골든리트리버 🐕 「모두의 에너지 충전소」 · 잘 맞음 판다 / 안 맞음 늑대 사람이 좋고, 좋아하는 사람들을 챙기는 데 진심입니다. 약속은 꼭 지키고 모임의 총무를 도맡는 성실파. 당신이 있는 곳엔 늘 웃음이 있지만, 정작 본인 부탁은 잘 못 하는 편이에요. 가끔은 남 말고 자신부터 챙겨 주세요. - EPC 독수리 🦅 「목표를 향해 직진하는 하늘의 승부사」 · 잘 맞음 코끼리 / 안 맞음 판다 목표가 생기면 가장 높은 곳에서 전체 판을 읽고 최단 경로로 날아갑니다. 감정보다 효율, 위로보다 해결. 함께 일하면 이만큼 믿음직한 사람이 없지만, 가까운 사람에겐 가끔 차갑게 느껴질 수 있어요. 따뜻한 말 한마디를 연습해 보세요. - ESW 돌고래 🐬 「어디서든 파도를 만드는 분위기 메이커」 · 잘 맞음 호랑이 / 안 맞음 고양이 즉흥 여행, 갑자기 잡힌 술자리, 새로운 사람 — 전부 환영입니다. 감정 표현이 풍부하고 리액션이 커서 어느 무리에서든 금방 중심이 돼요. 다만 흥이 오르면 계획이고 뭐고 사라지는 게 함정. 통장 잔고와 내일의 나를 가끔 떠올려 주세요. - ESC 호랑이 🐯 「내 길은 내가 정하는 카리스마」 · 잘 맞음 돌고래 / 안 맞음 코끼리 하고 싶은 게 생기면 눈치 보지 않고 바로 움직입니다. 무리에 섞이는 것도 즐기지만 끌려다니는 건 못 참는 타입. 결단이 빠르고 존재감이 커서 주변에서 리더로 밀어 올리곤 해요. 가끔 브레이크 없이 달리다 주변을 놀라게 하는 것만 조심. - IPW 코끼리 🐘 「묵묵히 곁을 지키는 든든한 존재」 · 잘 맞음 독수리 / 안 맞음 호랑이 조용하지만 한번 곁을 준 사람은 끝까지 챙깁니다. 화려하게 나서진 않아도 기념일, 사소한 약속, 지나가듯 한 말까지 다 기억하는 사람. 신중해서 결정이 느리다는 말을 듣지만, 그만큼 실수도 적어요. 당신의 진가는 오래 볼수록 드러납니다. - IPC 고양이 🐈 「나만의 루틴이 있는 시크한 관찰자」 · 잘 맞음 늑대 / 안 맞음 돌고래 나만의 공간, 나만의 루틴, 나만의 속도가 확실합니다. 아무나 곁에 들이지 않지만 마음에 든 상대에겐 조용히 최선을 다해요. 감정 소모 없는 깔끔한 관계를 선호하고, 혼자 있는 시간이 곧 충전입니다. 무심해 보여도 사실 다 보고 있죠. - ISW 판다 🐼 「느긋하지만 다정한 힐링 그 자체」 · 잘 맞음 골든리트리버 / 안 맞음 독수리 경쟁보다 평화, 속도보다 여유. 곁에 있으면 마음이 편해진다는 말을 자주 듣습니다. 부탁을 잘 거절하지 못하고 갈등을 피하는 편이라 속으로 삭이는 일이 많아요. 느린 게 아니라 서두르지 않는 것뿐 — 당신의 템포는 그 자체로 매력입니다. - ISC 늑대 🐺 「혼자여도 완전한 자유로운 영혼」 · 잘 맞음 고양이 / 안 맞음 골든리트리버 무리에 기대지 않고 스스로 판단하고 움직입니다. 즉흥적으로 훌쩍 떠나고, 관심 없는 자리엔 굳이 앉아 있지 않아요. 차가워 보이지만 인정한 소수에게는 의외로 의리파. 세상의 속도 말고 당신의 속도로 사는 것, 그게 늑대의 방식입니다. [결과 화면] - 이모지(크게) + 동물 이름 + 캐치프레이즈 + 설명 + "전체 참여자 중 {n}% 가 {동물} 유형이에요". - 유형마다 서로 구분되는 카드 색을 정해 써. 일러스트는 그리지 말고 이모지로. - 잘 맞는 유형·안 맞는 유형 카드: 누르면 그 유형의 결과 페이지로 이동. 내 결과는 브라우저에 기억해 두고, 다른 유형을 구경하는 중이면 맨 위에 [내 결과로 돌아가기]. - 버튼: [링크 복사](휴대폰은 기기 공유 시트, 안 되면 복사) · [이미지로 저장](결과 카드를 PNG 로 캡처해 내려받기) · [나도 해보기](인트로로). 테스트를 안 하고 공유 링크로 들어온 사람에겐 [나도 해보기]를 가장 크게. [공유 미리보기] - /result/{code} 요청에 서버가 OG 메타를 채운 HTML 을 응답해 카톡 미리보기가 유형별로 나오게 해 (SPA 라우팅만으론 크롤러가 못 읽어). 공유하는 링크는 별도 주소 말고 이 결과 URL 그대로. - og:title "나는 {이모지} {동물}상! — 나를 동물로 표현하면?", og:description "{캐치프레이즈}. 너는 어떤 동물일까?" [데이터] - 문항·유형은 코드 안 정적 데이터. DB 는 참여 기록만: responses(result_code, created_at). - 테스트를 끝낼 때 한 번만 기록 — 결과 새로고침·공유 링크 방문·궁합 카드 이동은 기록하지 않는다. - 인트로 참여자 수와 유형별 % 는 이 데이터로 계산. [시드] 참여자 수·통계가 0으로 보이지 않게 참여 기록 1,000건 안팎을 지난 30일에 흩어 넣어 둬. 유형별로 고르지 않게(가장 많은 유형 20% 안팎, 가장 적은 유형 7% 안팎). [제외] 로그인, 결과 저장·히스토리, 관리자 화면, 광고. [화면] 모바일 우선 — 한 손 엄지로 고를 수 있는 큰 선택지 버튼.
🧭 이렇게 이해했어요: 확정된 문항·유형으로 심리테스트를 만듭니다. 화면을 예시 통계로 먼저 보여드린 뒤, 참여 기록 DB·통계·시드와 유형별 카톡 미리보기(OG)를 붙이는 순서로 진행합니다.
미리 알려드려요 — 카카오톡 미리보기는 카톡 서버가 공개 URL을 직접 읽어야 하므로, 배포 후 공개 주소로 공유할 때 확인할 수 있습니다. 미리 알려드려요 — 카카오톡은 OG 정보를 한동안 캐시하므로, 문구를 바꾼 뒤에는 카카오 개발자 사이트의 공유 디버거에서 캐시를 초기화해야 새 미리보기가 나옵니다.
실행과정55개 작업
파일 목록
파일 목록
파일 목록
파일 읽기
파일 읽기
파일 읽기
파일 읽기
파일 읽기
파일 읽기
프로젝트 구조를 파악했습니다. 새 프로젝트의 첫 개발이므로, 요청의 3단계 순서(데이터 구조 → 화면 → DB/백엔드)로 진행하겠습니다.
계획
이제 데이터 정의와 디자인 변수부터 만들겠습니다.
파일 생성
파일 생성
파일 생성
파일 생성
데이터 정의 완료. 이제 라이브러리를 설치하고 화면을 만들겠습니다.
명령 실행
파일 수정
화면 구현에 필요한 파일들을 만들겠습니다.
파일 생성
파일 생성
파일 생성
파일 생성
파일 생성
이제 App.jsx 라우팅과 전역 CSS 스타일을 갱신합니다.
파일 수정
파일 수정
화면 구현이 끝났습니다. 개발 서버 로그로 오류가 없는지 확인하겠습니다.
로그 확인
계획
이제 Go 백엔드를 구현합니다. 먼저 go.mod 버전을 확인합니다.
파일 읽기
파일 수정
파일 수정
파일 수정
앱 재시작
파일 수정
앱 재시작
명령 실행
명령 실행
Go 백엔드와 시드가 정상 동작합니다(total 1000, 분포 정확). 이제 OG 메타 플러그인을 만듭니다.
계획
파일 생성
파일 수정
파일 수정
vite.config.js 변경은 dev 서버가 자동 재시작합니다. 로그 확인 후 OG 메타를 검증합니다.
로그 확인
명령 실행
OG 메타가 주입되지만 `<title>`이 중복으로 들어갔습니다. 수정하겠습니다.
파일 수정
명령 실행
OG 메타가 정상 동작합니다. 이제 프론트를 백엔드에 연동합니다(통계 API 호출 + 테스트 완료 시 응답 기록).
파일 생성
파일 수정
파일 수정
계획
로그 확인
명령 실행
명령 실행
파일 읽기
파일 읽기
`useNavigate`가 import 없이 사용되어 결과 페이지가 깨질 수 있는 문제를 발견했습니다. `navigate`는 사용하지 않으므로 제거합니다.
파일 수정
로그 확인
모든 오류가 해소됐습니다. 프로젝트 메모를 남기고 마무리합니다.
파일 생성
계획
실행결과 · 10분 30초 소요
완료했습니다. 요청한 심리테스트 웹서비스 전체를 구현했어요. **만든 것** - **데이터/채점** — `web/src/data/`에 12문항·8유형(문구 원문 그대로), 채점 함수(`score.js`, 축별 4문항 다수결·2:2 동점 시 첫 문항 따름, 랜덤 없음) - **화면** — 인트로(`/`)·테스트(`/test`, 진행 바 n/12 + 이전 버튼 + 큰 선택지)·결과(`/result/{code}`), 유형별 카드 색 8종·궁합 카드 이동·[내 결과로 돌아가기]·링크 복사(공유 시트→클립보드)·이미지 저장(html-to-image)·나도 해보기(공유 방문자는 최대 크기) - **백엔드(Go)** — `responses` 테이블, `POST /api/responses`(8코드 검증, 테스트 완료 시 1회만), `GET /api/stats`, 시드 1,000건(고정 분포, 최다 20%/최소 7%, 지난 30일 분산) - **OG 메타** — `` 플러그인이 `/result/{유효코드}` HTML `<head>`에 유형별 og:title·og:description·og:type·og:url 주입 (curl로 돌고래/늑대 메타 확인함) **참고** — 이제 인트로 참여자 수와 결과 %는 예시가 아니라 실제 DB 값입니다(시드 1,000건 + 이후 테스트 완료 1회씩 증가). 미리보기에서 인트로 → 12문항 → 결과까지, `/result/EPW` 새로고침·궁합 카드 이동까지 바로 확인해 보세요.
실행과정1개 작업
로그 확인
🔎 완료 검토: 합격
실행결과 · 11분 4초 소요
로그를 확인했습니다. 마지막 수정(Result.jsx) 이후 새 오류는 없고, 이전에 잠깐 떴던 `useRef` 관련 브라우저 오류도 의존성 재최적화 시점(11:31)의 일시적 문제로 이후 재시작·수정을 거치며 사라졌습니다. 서버는 정상 동작 중입니다(API 시드 1,000건 + stats 응답 확인 완료). 최종 상태를 간단히 검증했습니다. - `GET /api/stats` → `total: 1001` (시드 1,000 + 테스트 완료 1회 기록), 유형별 분포 정상 - `/result/{code}` OG 메타(돌고래·늑대) 정상 주입 - 미리보기 HTML 응답 정상 오류 없이 마무리합니다.
✅ 파일 25개 수정 · 명령 7개 실행 · 앱 재시작
4,285.1원 사용
이 프로젝트는 AI 에이전트와의 대화만으로 만들어졌습니다
project-44e787.glidev.ai
↗
파일
왼쪽에서 파일을 선택하세요