1시간 만에 ‘환승연애4 이상형 월드컵’ 배포하기

최종 결과물 링크: https://e-xchange-4-ideal-type-world-cup.vercel.app/

GitHub 링크: https://github.com/minseojo/EXchange-4-Ideal-Type-World-Cup

'환승연애 4 이상형 월드컵' 웹을 1시간 만에 만들기 위해

Gemini Canvas로 디자인과 기능을 구현하고,
완성된 프로젝트를 Vercel로 배포한 뒤,
배포된 웹의 방문 통계를 Google Analytics로 확인하는 전체 과정을 정리했습니다.

코드 작성 방법 (Gemini Canvas)

만들고 싶은 앱은 다음과 같은 흐름을 가진 React 웹페이지입니다.

이름/닉네임 + 성별 입력
성별에 따라 환승연애 4 출연진 필터링
토너먼트 형식으로 이상형 월드컵 진행
최종 우승자를 공유 링크로 복사해서 전달

이 요구사항을 제미나이 캔버스에 넣기 전에 먼저 프롬프트를 정리했습니다.

[프롬프트 입력]

환승연애4 출연진으로 이상형 월드컵을 하는 React 웹페이지를 만들고 싶은데,
이름/닉네임 + 성별 입력 → 성별에 따라 출연진 필터링 → 토너먼트 진행 → 최종 결과를 
공유 링크로 복사할 수 있는 기능까지 포함된 웹앱을 만들도록, AI 코드 생성기에 넣을 프롬프트를 깔끔하게 정리하고 싶어.

[프롬프트 결과]

### 기능 요구사항

1. **시작 화면 (사용자 정보 입력)**
    - 사용자가 처음 들어오면 다음 두 가지를 입력하는 폼을 보여줘.
        - 이름 또는 닉네임 입력 필드 (text)
        - 성별 선택 (라디오 버튼 또는 토글): `남자`, `여자`
    - “시작하기” 버튼을 누르면 이상형 월드컵 화면으로 진입한다.
2. **출연진 데이터 구조**
    - 환승연애 4 출연진을 남자/여자 배열로 나눠서 하드코딩된 더미 데이터를 만들어줘.
        - 각 출연진은 `{ id, name, gender, imageUrl }` 형태의 객체로 구성.
        - 실제 이미지 URL 대신 샘플 이미지(예: placeholder 이미지 링크)로 채워도 된다.
    - 이후 로직에서 `gender === 'male'` 또는 `gender === 'female'`으로 필터링할 수 있도록 정리해줘.
3. **성별에 따른 출연진 필터링**
    - 시작 화면에서 사용자가 선택한 성별에 따라 월드컵 대상 출연진을 자동으로 필터링한다.
        - 사용자가 `남자`이면, **여자 출연진만** 이상형 월드컵 참가자로 사용.
        - 사용자가 `여자`이면, **남자 출연진만** 이상형 월드컵 참가자로 사용.
4. **이상형 월드컵 진행 로직**
    - 필터링된 출연진 목록을 랜덤으로 섞어서 토너먼트를 진행한다.
    - 한 번에 두 명씩 카드 형태로 화면 중앙에 보여주고,
        - 각 카드에는 **이미지, 이름**을 표시한다.
        - 사용자가 둘 중 한 명을 클릭하면, 그 사람이 다음 라운드로 진출한다.
    - 현재 라운드의 진행 상황을 표시하는 UI를 넣어줘. 예:
        - “8강 1/4”, “4강 2/2”, “결승” 등 텍스트 표시
        - 혹은 전체 진행도를 보여주는 프로그레스 바
    - 한 라운드가 끝나면 다음 라운드(예: 8강 → 4강 → 결승)로 자동 진행된다.
    - 마지막에 1명이 남으면 그 사람이 최종 이상형이다.
5. **결과 화면 + 공유 링크 기능**
    - 최종 우승자가 결정되면 결과 화면을 보여준다.
        - 상단에 “OOO님의 환승연애 4 이상형은 ○○○입니다!” 같은 문구를 표시 (OOO에는 사용자 닉네임, ○○○에는 최종 우승자 이름).
        - 우승자의 이미지와 이름을 강조해서 보여준다.
    - “결과 링크 공유하기” 버튼을 넣어 다음 기능을 구현해줘.
        - 현재 페이지 URL에 `winnerId`, `winnerName`, `userName` 등을 쿼리 스트링으로 인코딩해서 링크를 만든다.
            - 예: `?winnerId=3&winnerName=...&userName=...`
        - `navigator.clipboard.writeText()`를 사용해 이 URL을 클립보드에 복사한다.
        - 복사 완료 시 “링크가 복사되었습니다” 같은 토스트 또는 간단한 알림 메시지를 띄워준다.
    - 누군가 이 공유 링크로 접속했을 때:
        - 쿼리 스트링에서 `winnerName`, `userName`을 읽어서
            - “OOO님의 환승연애 4 이상형은 ○○○입니다!” 결과 화면만 바로 보여줄 수 있도록 처리해줘.
        - 이 경우에는 월드컵 과정을 다시 진행하지 않아도 된다.
6. **상태 관리 및 구조**
    - React의 `useState`, `useEffect`를 활용해서 상태를 관리한다.
    - 주요 상태:
        - `userName`, `userGender`
        - `candidates` (필터링된 출연진 리스트)
        - `currentRoundPairs` (현재 라운드의 매칭 정보)
        - `nextRoundCandidates`
        - `currentStep` (입력 화면 / 월드컵 진행 / 결과 화면)
        - `finalWinner`
    - 컴포넌트 구조는 예시로 다음과 같이 나눌 수 있다.
        - `<App />` : 전체 흐름 제어
        - `<StartScreen />` : 이름/성별 입력
        - `<WorldcupScreen />` : 월드컵 진행 화면
        - `<ResultScreen />` : 결과 + 공유 링크
7. **디자인 가이드(대략)**
    - 모바일에서도 보기 편한 레이아웃 (세로 기준 중앙 정렬)
    - 카드에 간단한 호버 효과와 그림자 효과를 추가해서 인터랙션 느낌을 준다.
    - 전체적으로 심플하고 팬사이트 느낌이 나도록 파스텔 톤이나 밝은 색상을 사용해 스타일을 잡아줘.

위 요구사항을 모두 만족하는 React 코드 전체를 만들어줘.

가능하다면 TypeScript + Vite 기준 예시로 작성해주고, 그렇지 않다면 JavaScript + Vite 기준으로 작성해도 좋다.

프롬프트 결과를 챗GPT와 Gemini의 (Thinking 모드 + Canvas)에 각각 입력해 테스트해봤습니다.

Gemini 결과물이 더 마음에 들어서, Gemini가 생성한 결과물을 사용했습니다.

실제로 다이어그램이나 인터렉티브 웹을 만들 때 캔버스(화면 구성·UI 스케치) 관련 기능만 놓고 보면,
현재 기준으로(2025.12.08)는 챗GPT 5.1보다 제미나이 3.0이 더 활용하기 좋고 완성도가 높다고 느낍니다.

Vite + JavaScript, tailwindcss 설정을 구성하고, 제미나이가 짜준 코드를 붙여 넣으면 다음과 같은 결과를 볼 수 있습니다.
(자세한 설명이 필요하신 분은 댓글로 남겨주세요)

이제 나무위키에서 실제 환승연애 4 출연진 이름과 이미지를 가져와 더미 데이터를 교체하고,
AI를 이용해 모바일 반응형 레이아웃과 디자인을 한 번 더 리팩터링해 완성도를 높였습니다.

환승연애를 보지 않아서, 결과는 참고만 해주세요.

배포 방법 (Vercel)

끝! 이제 Vercel을 이용해 배포만 하면 됩니다.

Vercel을 간단히 설명하자면, Vercel은 자바스크립트 프로젝트를 위한 호스팅/배포 플랫폼입니다.
GitHub 레포지토리를 한 번만 연결해 두면, 코드를 푸시할 때마다 자동으로 빌드하고 전 세계 CDN에 배포해 줍니다.
서버 설정, SSL, CI/CD 파이프라인을 직접 관리할 필요가 없어서,
인프라를 신경 쓰기보다 “코드 작성 → 푸시 → 자동 배포”에만 집중할 수 있다는 점이 가장 큰 장점입니다.

배포 과정도 매우 간단합니다. (검색하거나 AI에게 요청하면 쉽게 적용 가능)

프로젝트를 GitHub에 업로드
Vercel에서 New Project → GitHub 레포지토리 선택
‘Deploy’ 버튼 한 번 클릭하면 끝

이러면 누구나 접속할 수 있는 인터넷 URL이 생성됩니다. (주변 지인에게 공유 가능)

방문 통계 보는 방법 (Google Analytics)

서비스를 만들면 자연스럽게 “얼마나 많은 사용자가 들어오는지, 무엇을 보는지” 궁금해집니다.

Google Analytics(GA4)를 연동하면 다음 지표를 손쉽게 확인할 수 있습니다.

방문자 수
세션 수
국가/디바이스
페이지별 접속 경로

아래 순서대로 설정하면 바로 적용됩니다.

1. GA4 속성 만들기

Google Analytics 접속
Google 계정 로그인
왼쪽 하단 톱니바퀴 → 관리(Admin)
계정 선택 → 속성 만들기(Create Property)
속성 이름 입력 (예: onmyquietway-blog)
플랫폼: 웹(Web) 선택
사이트 URL 입력 → 스트림 생성

스트림이 생성되면 다음 정보가 표시됩니다.

Measurement ID: G-XXXXXXXXXX 형태

이 ID가 GA 연동에 사용됩니다.

2. React/Vite 프로젝트에 GA4 스니펫 추가 (가장 단순한 방법)

index.html의 <head>에 아래 코드를 그대로 붙여 넣습니다.

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){ dataLayer.push(arguments); }
  gtag('js', new Date());

  gtag('config', 'G-XXXXXXXXXX', {
    send_page_view: true,
  });
</script>

G-XXXXXXXXXX 부분만 본인의 Measurement ID로 변경하면 됩니다.
SPA에서 라우팅 이벤트도 추적하고 싶다면?

react-router와 연동하여 gtag('config')를 URL 변경마다 호출하면 됩니다. (검색하거나 AI에게 요청하면 쉽게 추가 가능)

3. Vercel 배포 시 주의사항

별도 설정 없이 코드를 푸시하면 GA 스크립트도 함께 배포되고,
배포 후 몇 분 뒤부터 Analytics 대시보드에서 데이터가 쌓입니다.

다만, 로컬 개발용 방문이 통계에 섞이지 않도록 다음 방법을 추천합니다.

테스트용 스트림 따로 사용 또는
내부 트래픽(본인 IP) 제외 필터 설정

저작자표시 변경금지 (새창열림)

Virtual World