사례

나의 러닝 성향은?

결과물 새 탭 ↗
프로젝트 시작10월 8일 오전 08:54바로 개발 시작
개발 내용
러닝 성향 테스트 「나는 러닝할 때 어떤 동물일까?」 웹서비스를 만들어줘. 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 태그가 나오는지.
🧭 이렇게 이해했어요: 러닝 성향 테스트를 화면부터 예시 데이터로 만들고, 이어서 참여 기록 DB·통계·유형별 공유 미리보기(카카오톡 포함)를 붙여요.
확인이 필요해요 — 카카오 JavaScript 키는 아직 안 주신 것으로 보고 빈 자리로 둬요 — 키를 넣기 전까지 카카오톡 버튼은 숨겨집니다. 다른 뜻이면 알려주세요. 미리 알려드려요 — 카카오톡 공유는 Kakao Developers 에서 앱을 만들고 JavaScript 키를 발급받아 web/.env 의 VITE_KAKAO_JS_KEY 에 넣어야 동작하며, 이 키 발급은 사용자만 할 수 있어요. 미리 알려드려요 — 카카오 콘솔의 플랫폼(Web) 사이트 도메인에 배포된 공개 주소를 등록해야 하며, 등록하지 않으면 공유 시 도메인 오류가 납니다.
실행과정45개 작업
파일 목록
파일 목록
파일 목록
파일 읽기
파일 읽기
파일 읽기
파일 읽기
파일 읽기
파일 읽기
파일 읽기
파일 읽기
파일 읽기
계획
명령 실행
명령 실행
파일 생성
파일 생성
파일 생성
파일 생성
파일 생성
파일 생성
파일 수정
파일 수정
로그 확인
로그 확인
계획
파일 생성
앱 재시작
로그 확인
명령 실행
명령 실행
명령 실행
파일 수정
계획
명령 실행
명령 실행
로그 확인
파일 수정
파일 수정
명령 실행
로그 확인
record_decision
record_decision
파일 생성
계획
실행결과 · 14분 44초 소요
러닝 성향 테스트를 완성했습니다. **만든 것** - **인트로(/)**: 흐르는 그라데이션 첫 화면 + "나는 러닝할 때 어떤 동물일까? 🏃" / 부제 / 실시간 참여자 수 / [시작하기] - **테스트(/test)**: 진행 바(n/12), 큰 보기 버튼, 누르면 자동 다음 문항, [이전]으로 다시 고르기 - **결과(/result/{code})**: 태도별 색 카드(큰 이모지·유형명·캐치프레이즈·설명·코스·참여자 비율), 내 점수 축 게이지 2개(직접 푼 경우만), 메이트 카드 2장(클릭 시 해당 결과로 이동), [내 결과로 돌아가기], [결과 공유하기/카카오톡/이미지로 저장/나도 해보기] **백엔드(Go + MySQL)** - `responses` 테이블(completion_id UNIQUE), 테스트 완료 순간 1회만 기록·중복 거름 - `GET /api/stats`, `POST /api/responses`, `GET /api/s/{code}`(유형별 OG 메타 HTML → location.replace), `GET /`(1200×630 앱 색 그라데이션 PNG) - 시드 약 1,000건(지난 30일, 최다 유형 ~11%·최소 ~3%, 미래 날짜 없음) **검증 완료** - 동점 규칙 4개 케이스(태도/동물/복합 동점) 모두 같은 답 → 같은 결과 확인 - 결과 새로고침 시 참여자 수 불변(결과 화면은 기록 안 함), 중복 completion_id 무시 확인 - `curl /api/s/rc`·`/api/s/fl`에 유형별 OG 태그, `/`가 1200×630 PNG 확인 **참고**: 카카오톡 공유 버튼은 ``의 `VITE_KAKAO_JS_KEY`가 비어 있어 지금은 숨겨져 있습니다 — 실제 JavaScript 키를 넣으면 나타납니다. 미리보기에서 12문항을 풀어 결과까지 바로 확인해 보세요.
실행과정1개 작업
로그 확인
🔎 완료 검토: 합격
실행결과 · 15분 20초 소요
확인했습니다. 로그를 보니: - 초반의 `Failed to resolve import "./Result"` 오류는 `Result.jsx`를 만들기 전(6:01~6:03)에 잠깐 난 것으로, 파일 생성 후 사라졌습니다. - 이후 로그는 모두 정상 HMR 업데이트이며, Go 서버도 `api listening on :8000` 으로 빌드·기동 성공했습니다. - 마지막 수정(6:08) 이후 오류 없음 — `[browser]` 런타임 오류도 없습니다. 앞서 검증까지 모두 통과했고(동점 규칙 4케이스, 참여자 수 불변, 중복 completion_id 무시, `/api/s/rc`·`/api/s/fl` OG 태그, `/` 1200×630 PNG), 개발 서버도 정상이므로 마무리합니다. **요약**: 러닝 성향 테스트를 인트로·테스트·결과 화면과 Go API(응답 기록·통계·유형별 공유 OG 페이지·대표 이미지)까지 전부 구현했고 DB 시드(~1,000건)와 연동했습니다. 카카오톡 공유 버튼은 ``의 `VITE_KAKAO_JS_KEY`가 비어 있어 숨겨진 상태입니다(키를 넣으면 표시).
✅ 파일 13개 수정 · 명령 8개 실행 · 앱 재시작
5,005.1원 사용
이 프로젝트는 AI 에이전트와의 대화만으로 만들어졌습니다
project-985252.glidev.ai
↗
파일
왼쪽에서 파일을 선택하세요