러닝 성향 테스트 「나는 러닝할 때 어떤 동물일까?」 웹서비스를 만들어줘. 4지선다 12문항에 답하면 태도 4종 × 동물 4종 = 16가지 러닝 성향 중 하나가 결과로 나오고, 그 결과를 친구·러닝 크루에게 공유하게 만드는 게 목적이야. 아래 문항·채점 태그·유형·문구는 확정값이니 글자 그대로 쓰고 바꾸지 마. 동물 이모지는 그림 대신 쓰는 콘텐츠라 그대로 둔다.
[페이지]
- / : 인트로 — 제목 "나는 러닝할 때 어떤 동물일까? 🏃", 부제 "12개 질문으로 알아보는 나의 러닝 성향 — 소요시간 1분", 참여자 수, [시작하기]. 브라우저 탭 제목은 "러닝 성향 테스트".
- /test : 질문 — 진행 바(예: 3/12), 보기를 누르면 자동으로 다음 문항, [이전]으로 앞 문항 다시 고르기. 보기 표시 순서는 섞어도 되지만 태그는 바꾸지 않는다.
- /result/{code} : 결과 (예: /result/rc, 소문자) — 유형별 고유 주소, 새로고침해도 같은 결과
[채점]
- 축 ① 태도(왜 달리는가): B 도전 "겁 없는" · R 기록 "기록에 진심인" · C 힐링 "유유자적" · F 친목 "정 많은"
- 축 ② 동물(어떻게 달리는가): C 치타 🐆(파워) · G 가젤 🦌(감각) · M 낙타 🐫(꾸준) · L 리트리버 🐕(자유)
- 보기 하나를 고르면 그 보기의 태도 1개·동물 1개에 각각 +1. 축마다 최다 득점 항목이 결과, 결과 코드 = 태도 + 동물(예: RC = 기록에 진심인 치타). 태도 C와 동물 C는 자리로 구분한다.
- 동점이면 동점 항목 중 더 앞 문항에서 먼저 +1 을 받은 쪽. 두 축 각각 따로 적용. 랜덤 금지 — 같은 답이면 항상 같은 결과.
- 메이트: 잘 맞는 메이트 = 태도 같고 동물 짝(C↔L, G↔M). 파장 주의 메이트 = 동물 같고 태도 짝(B↔C, R↔F).
[문항] 각 보기 끝 괄호가 (태도·동물) 태그
1. 러닝 준비 완료, 현관을 나서면 나는? — 스트레칭은 대충, 나가자마자 전력 질주로 몸을 깨운다(B·C) / 오늘 목표 페이스와 폼 포인트부터 정리한다(R·G) / 가볍게 걷기부터, 몸이 풀리는 만큼만 달릴 생각(C·M) / 러닝 크루 단톡에 "출발~" 인증부터 올린다(F·L)
2. 인터벌 훈련을 처음 접했다. 나는? — 폼이 좀 무너져도 일단 따라 뛰며 감으로 익힌다(B·G) / 훈련법 아티클 정독하고 주간 플랜에 넣는다(R·M) / 힘든 건 사양… 나는 산책 같은 러닝이 좋다(C·L) / 잘 뛰는 크루원 옆에 붙어서 같이 해보자고 한다(F·C)
3. 오늘따라 공원 트랙이 텅 비었다. 나는? — 평소 못 가 본 먼 코스까지 슬쩍 늘려 본다(B·M) / 몇 바퀴 도나 게임하듯 랩 카운트를 시작한다(R·L) / 텅 빈 트랙 독차지 — 시원하게 달리다 여유롭게 마무리(C·C) / 사람이 없으니 심심… 러닝 메이트한테 나오라고 연락(F·G)
4. 러닝을 마쳤는데 여력이 남았다. 나는? — 계단 오르기, 샛길 탐험 — 즉흥 코스를 추가한다(B·L) / 마지막 400m 전력 스퍼트로 마무리, 기록 확인(R·C) / 노을 보며 쿨다운 조깅으로 오늘의 리듬을 음미(C·G) / 크루원들 들어올 때까지 천천히 돌다 같이 마무리(F·M)
5. 러닝이 제일 좋은 순간은? — 못 뛰던 거리를 처음으로 완주해냈을 때(B·C) / 몸이 가벼워지고 폼이 착착 맞아떨어질 때(R·G) / 달리다 보면 잡생각이 씻겨 나갈 때(C·M) / 다 뛰고 크루들과 국밥에 수다 한판 할 때(F·L)
6. 옆으로 쌩 지나가는 고수 러너. 나는? — 저 폼 뭐지? 스텝을 바로 따라해 본다(B·G) / 동요 없이 내 페이스 — 대신 오늘 목표 거리는 채운다(R·M) / 오 멋지다~ 구경하고 나는 내 속도로 즐긴다(C·L) / 나도 모르게 따라붙어 은근히 레이스를 건다(F·C)
7. 러닝 장비를 챙기는 나의 모습은? — 트레일화·러닝 베스트… 새 장비를 하나씩 사서 시도 중(B·M) / GPS 워치 필수, 오늘도 페이스·심박 기록 측정(R·L) / 운동화에 이어폰 끝. 심플 그 자체(C·C) / 크루와 맞춘 티셔츠에 나눠 먹을 에너지젤까지(F·G)
8. 한 달 뒤 10km 대회가 열린다면? — 재밌겠다! 일단 신청부터(B·L) / 목표 기록 정하고 훈련 플랜부터 짠다(R·C) / 대회는 부담… 나는 내 코스에서 경쾌하게(C·G) / 크루 단체로 나가면 나도 나갈게(F·M)
9. 비 오는 날 저녁, 뛸까 말까? — 무조건 뛴다. 오히려 시원해서 좋다(B·C) / 루틴은 루틴. 계획된 날이면 뛴다(R·G) / 오늘은 쉼도 훈련 — 이불 속에서 회복(C·M) / 단톡방에 "뛸 사람?" — 아무도 없으면 안 나감(F·L)
10. 내가 러닝을 시작한 진짜 이유는? — 금방 차오르는 숨 — 체력 바닥을 극복하고 싶었다(B·G) / 평생 갈 운동 하나는 만들고 싶어서(R·M) / 그냥 바람 맞으며 달리면 기분이 좋아서(C·L) / 친구(크루) 따라 나왔다가 정착했다(F·C)
11. 좁은 산책로, 앞사람이 너무 느리다. 나는? — 호흡 안 흐트러지게 추월 타이밍을 잰다(B·M) / 인터벌이라 치고 속도 조절 놀이를 한다(R·L) / 그러려니~ 오늘은 슬로 조깅 데이(C·C) / "먼저 갈게요~" 가볍게 인사하며 지나간다(F·G)
12. 1년 뒤 나의 러닝 목표는? — 트레일 러닝·풀코스까지 영역 확장(B·L) / 10km 기록 단축, 대회 입상 노리기(R·C) / 지금처럼 즐겁게, 달리기와 더 친해지기(C·G) / 러닝 메이트들과 오래오래 같이 뛰기(F·M)
[유형 16종] 코드 · 유형명 · 캐치프레이즈 · 당신의 코스, 다음 줄은 설명 (이모지는 동물: 치타 🐆 · 가젤 🦌 · 낙타 🐫 · 리트리버 🐕)
- BC 겁 없는 치타 · 오르막일수록 불타는 직진 본능 · 언덕 인터벌 코스
처음 보는 코스도, 가파른 오르막도 망설임이 없습니다. 하기로 했으면 다리가 먼저 나가는 타입이라 실력이 느는 속도도 빠른 편. 다만 준비운동을 건너뛰다 큰코다치는 날이 한 번은 옵니다.
- BG 겁 없는 가젤 · 안 되는 폼? 일단 몸으로 부딪친다 · 트랙 스피드 훈련 세션
새 훈련법, 새 폼을 보면 일단 몸으로 따라해 봅니다. 감각이 좋아 어깨너머로도 곧잘 익히는 타입. 기본기 다지는 시간을 지루해하는 게 유일한 약점이에요.
- BM 겁 없는 낙타 · 조용히, 그러나 기어이 완주하는 도전가 · 새 장거리 코스 개척 LSD
조용해 보여도 속으로는 늘 다음 목표 거리를 품고 있습니다. 남들 모르게 슬쩍 코스를 늘리고, 어느새 하프를 뛰고 있는 타입. 티를 안 내서 주변이 몰라줄 뿐, 성장 폭은 제일 큽니다.
- BL 겁 없는 리트리버 · 샛길 앞에서 제일 신난 사람 · 산길 트레일 러닝
동네 전체가 러닝 코스입니다. 샛길, 계단, 트레일 — 재미있어 보이면 일단 뛰어들어야 직성이 풀려요. 길을 잃고 예정보다 두 배를 뛰어 본 경험이 있는 유형이기도 합니다.
- RC 기록에 진심인 치타 · 오늘의 나는 어제의 기록을 이긴다 · 트랙 400m 인터벌
어제의 나와 오늘의 나만 비교합니다. 훈련 플랜, 페이스, 스퍼트 — 출발선에 서는 순간 승부 모드. "쉬는 것도 훈련"이라는 말을 제일 안 믿는 타입입니다.
- RG 기록에 진심인 가젤 · 1초는 폼에서 나온다 · 러닝 폼 분석 클리닉
속도는 다리 힘이 아니라 폼에서 나온다고 믿습니다. 케이던스, 착지, 호흡 리듬의 미세 교정에 진심. 영상으로 내 러닝 폼 돌려보는 게 취미인 분석파입니다.
- RM 기록에 진심인 낙타 · 매일 조금씩, 그러나 결국 제일 멀리 · 매일 같은 시간 강변 코스
화려하진 않아도 제일 꾸준합니다. 같은 시간, 같은 코스, 조금씩 늘어나는 거리. 1년 뒤 가장 멀리 가 있는 건 결국 이 유형이에요.
- RL 기록에 진심인 리트리버 · 놀듯이 뛰는데 기록이 는다? · 워치 차고 페이스 게임 런
노는 것 같은데 손목엔 GPS 워치가 채워져 있습니다. 게임하듯 페이스를 맞추고 기록 갱신에 소소하게 짜릿해하는 타입. 재미와 성장을 둘 다 잡는 영리한 러너입니다.
- CC 유유자적 치타 · 빠른데 서두르지 않는다 · 텅 빈 이른 아침 공원 트랙
실력은 상급인데 굳이 서두르지 않습니다. 한적한 트랙에서 길게 뻗는 스트라이드 한 번이 좋은 타입. 조용한 카리스마로 코스의 밸런스를 잡아 줍니다.
- CG 유유자적 가젤 · 바람 따라 흐르는 리듬 러너 · 노을 지는 강변 선셋 런
바람을 타는 리듬 그 자체를 사랑합니다. 노을 지는 강변에서 음악과 발맞추는 게 힐링 루틴. 러닝은 운동이 아니라 명상이라고 생각하는 유형입니다.
- CM 유유자적 낙타 · 러닝 코스의 평화 그 자체 · 숲길 슬로 조깅
러닝 코스에서 가장 평화로운 존재입니다. 남의 페이스에 흔들리지 않고 내 템포로 오래오래. 급할 게 없어서 오히려 제일 오래 달리기를 계속하는 유형이에요.
- CL 유유자적 리트리버 · 달리는 것만으로 행복한 사람 · 공원 산책 겸 즐런
바깥 공기를 마시며 달리는 것만으로 이미 목적 달성입니다. 페이스, 기록, 거리 다 관심 밖 — 오늘 바람이 좋았으면 그걸로 충분해요. 러닝의 순수한 즐거움을 아는 사람입니다.
- FC 정 많은 치타 · 레이스도 같이 해야 재밌지 · 크루 릴레이 대회
혼자 하는 운동도 같이 해야 재밌는 타입. 옆 러너와 은근한 레이스를 벌이고, 결승선에선 먼저 엄지를 세워 줍니다. 승부욕과 친화력이 공존하는 분위기 메이커예요.
- FG 정 많은 가젤 · 러닝 크루 인간 비타민 · 크루 정기 모임런
러닝 크루 인간관계의 중심입니다. 새로 온 사람 페이스 맞춰 주고, 리액션 크고, 모임 분위기를 끌어올리는 비타민. 정작 본인 훈련 시간은 늘 부족한 게 함정입니다.
- FM 정 많은 낙타 · 느리게 뛰어도 마음은 제일 먼저 도착 · 주말 아침 단체 롱런
화려하게 나서진 않지만 안 나온 크루원 안부를 제일 먼저 묻는 사람입니다. 뛰면서 나누는 수다가 러닝의 절반. 이 유형이 있는 크루는 오래갑니다.
- FL 정 많은 리트리버 · 러닝 끝 국밥까지가 러닝 · 컬러런 같은 펀런 축제
러닝은 사실 핑계고, 같이 노는 게 본체입니다. 뛰고 난 뒤 국밥 멤버 소집 담당. 출석률은 들쑥날쑥해도 뒤풀이 참석률은 100%인 유형이에요.
[결과 화면]
- 동물 이모지(크게) + 유형명 + 캐치프레이즈 + 설명 + "당신의 코스: {코스}" + "전체 참여자 중 {n}% 가 {유형명}이에요".
- 결과 카드 바탕은 태도 4종마다 서로 구분되는 색으로 정해 쓴다.
- 축 게이지 2개 — 태도 "도전 · 기록 · 힐링 · 친목", 스타일 "파워 · 감각 · 꾸준 · 자유" 각 득점 / 12 를 %로. 방금 직접 푼 결과일 때만 보여준다(점수는 브라우저에 기억) — 공유 링크로 온 사람에겐 숨김.
- 메이트 카드 2장 "잘 맞는 러닝 메이트" / "페이스 조심! 파장 주의 메이트" — 누르면 그 유형의 결과 페이지로. 내 결과는 브라우저에 기억해 두고, 다른 유형을 구경하는 중이면 맨 위에 [내 결과로 돌아가기].
- 버튼: [결과 공유하기](휴대폰은 기기 공유창, 안 되면 링크 복사) · [카카오톡 공유하기] · [이미지로 저장](결과 카드를 PNG로 내려받기) · [나도 해보기](인트로로). 테스트를 안 하고 공유 링크로 들어온 사람에겐 [나도 해보기]를 가장 크게.
[카카오톡 공유] Kakao JavaScript SDK 의 피드 공유로 유형별 제목(OG 제목과 같은 문구)·설명·대표 이미지·결과 링크(아래 공유 주소)를 보낸다. JavaScript 키는 {카카오 JavaScript 키} — web/.env 의 VITE_KAKAO_JS_KEY 로 읽고, 키가 비어 있으면 버튼을 숨긴다(경고창 금지).
[공유 미리보기 — 중요]
- 배포된 공개 주소에서는 /api 로 시작하는 요청만 Go 서버가 받고, 나머지 경로는 빌드된 정적 파일이 응답한다(vite 개발 서버·플러그인은 배포본에 없다). 그래서 /result/… 에는 서버가 유형별 메타를 넣을 수 없다 — 개발 미리보기에서 되는 것처럼 보여도 배포 후엔 공통 메타만 나온다.
- 그래서 공유 주소는 /api/s/{code} 로 한다: Go 가 유형별 OG 메타를 채운 작은 HTML 을 응답하고, 사람은 스크립트(location.replace)로 바로 /result/{code} 로 보낸다. meta refresh 는 쓰지 마(크롤러가 따라가면 유형별 메타를 놓친다). 스크립트가 안 돌 때를 위해 본문에 결과 보기 링크도 둔다.
- og:title "나는 {이모지} {유형명}! — 러닝 성향 테스트", og:description "{캐치프레이즈}. 너는 러닝할 때 어떤 동물일까?", og:url 은 이 공유 주소 자신, og:image 는 절대 주소의 대표 이미지(1200×630 PNG — 카톡은 SVG를 못 읽는다. 글자 없이 앱 색으로, 서버 코드로 그려 만들어도 된다).
- 메타 값은 HTML 이스케이프(Go html/template).
- [결과 공유하기]·링크 복사·카카오톡 공유는 이 공유 주소를 쓴다.
- index.html 의 <title>("러닝 성향 테스트")과 기본 OG(제목·부제·같은 대표 이미지, 이미지는 절대 주소)도 채운다.
[데이터]
- 문항·유형은 코드 안 정적 데이터. DB 는 참여 기록만: responses(id, completion_id UNIQUE, result_code, created_at).
- 테스트를 끝낼 때 한 번만 기록 — 브라우저가 완료마다 만든 completion_id 로 서버가 중복을 거른다. 결과 새로고침·공유 링크 방문·메이트 카드 이동은 기록하지 않는다.
- 인트로 참여자 수와 유형별 % 는 이 데이터로 계산.
- 화면용 임시 데이터는 DB 연동 뒤 지운다 — API 가 실패하면 예시 데이터로 대신 보여주지 말고 오류를 알린다.
[시드] 참여자 수·통계가 0으로 보이지 않게 참여 기록 1,000건 안팎을 지난 30일에 흩어 넣어 둬(미래 날짜 금지). 유형별로 고르지 않게(가장 많은 유형 11% 안팎, 가장 적은 유형 3% 안팎).
[제외] 로그인, 결과 저장·히스토리, 관리자 화면, 상품 추천, 광고.
[화면] 모바일 우선 — 한 손 엄지로 고를 수 있는 큰 보기 버튼, 한 문항이 스크롤 없이 한 화면에.
[확인] 마치기 전에: 같은 답이면 항상 같은 결과인지(동점 규칙 포함), 결과 화면을 새로고침해도 참여자 수가 늘지 않는지, /api/s/{code} 를 curl 로 요청하면 유형별 og 태그가 나오는지.