깜냥것 리뷰해봄!

Roto-Versus를 개발하면서 최근 해결할 수 없는 '버그'로 인하여 새롭게 프로젝트를 구성하고자 합니다.

그 전에, 이전에는 작성하지 못했던 개발에 필요한 기획서(GDD) / 계획서 / 개발 과정 체크리스트 / 게임 방법(설명서) 등 모든 문서에 대하여 작성하고 기록하고자 합니다.

모든 통합 문서는 본 게시물을 지속적으로 업데이트 하는 것으로 진행합니다.

• [2025.09.09] Roto-Versus 통합 문서 자료 (Ver1.0) 작성

Roto-Versus 게임 기획서 (Ver 1.0)

Roto-Versus 개발 계획서

프로토타입 재구축 체크리스트

Roto-Versus 게임 방법

Roto-Versus 버그 리포트

2025.08.14 - [Unity Project/Roto-Versus (로토 버서스)] - [Unity 개발 일지 #2] 게임에 생명 불어넣기: 게임 루프와 상호작용 구현

Roto-Versus 세 번째 개발 일지입니다.

지난 포스팅에서는 플레이어의 입력에 따라 맵이 회전하고 말이 움직이는, 게임의 핵심 플레이 루프를 완성했습니다. 하지만 아직은 단 하나의 씬(Scene) 안에서 모든 것이 이루어지고 있었습니다. 이번에는 본격적인 AI 개발과 같은 살을 붙이기에 앞서, 게임의 전체적인 구조를 다지고 뼈대를 세우는 작업을 진행했습니다.

1. 한 걸음 뒤로: 전체 구조에 대한 고민과 대화

AI 개발을 바로 시작하기 전에, 현재 게임의 구조와 앞으로 나아갈 방향에 대해 다시 한번 점검하는 시간을 가졌습니다.

"AI 모드, 함께하기 모드, 나중에 온라인 모드도 고려, UI는 세로 화면으로 만들고, 카드는 아래에서 위로 올라오는 애니메이션을 추가. 특히 '함께하기' 모드에서는 (같은 공간에 있기 때문에) 서로 선택을 못 보게 하는 아이디어가 필요함."

이러한 생각을 통해, 단순히 기능을 추가하는 것을 넘어 게임의 전체적인 틀을 먼저 잡아야 한다는 결론에 도달했습니다. 특히 '함께하기' 모드에서 선택을 숨기는 방법에 대한 아이디어가 이번 개발의 핵심이 되었습니다. 바로 '맵 자체가 움직여서 턴을 넘겨주는' 방식입니다.

2. 대공사 시작: 3개의 씬(Scene)으로 분리하기

체계적인 관리를 위해, 게임을 3개의 독립된 씬으로 분리했습니다.

• 00_TitleScene: 게임 로고와 시작 버튼만 있는 첫 화면
• 01_MenuScene: '혼자하기' / '함께하기' 모드를 선택하는 메뉴 화면
• 02_GameScene: 실제 게임 플레이가 이루어지는 메인 화면

이 씬들을 자유롭게 오갈 수 있도록, 간단하지만 강력한 SceneLoader 스크립트를 작성했습니다.

// SceneLoader.cs
using UnityEngine;
using UnityEngine.SceneManagement;

public class SceneLoader : MonoBehaviour
{
    // string 타입의 씬 이름을 받아서 해당 씬을 로드하는 함수입니다.
    public void LoadSceneByName(string sceneName)
    {
        SceneManager.LoadScene(sceneName);
    }
}

이 스크립트를 각 씬의 버튼 OnClick() 이벤트에 연결하고, File > Build Settings에 3개의 씬을 순서대로 등록하는 것으로 게임의 기본 흐름이 완성되었습니다.

3. Q&A: 반응형 UI와의 싸움 (feat. 앵커, 피봇, 폰트)

세로 화면으로 UI를 재구성하면서 생겼던 문제는.

Q: "화면 비율을 바꾸니 UI가 전부 깨지는 문제!" A: Canvas Scaler의 기준 해상도를 1080x1920으로 설정하고, 각 UI 요소에 **'앵커(Anchors)'**를 설정하여 해결했습니다. 로고는 상단, 버튼은 하단, 카드 영역은 상/하단 스트레치로 고정하여 어떤 비율에서도 위치를 유지하도록 만들었습니다.

Q: "한글 폰트가 'ㅁ'으로 나오는 문제!" A: TextMeshPro의 기본 폰트에는 한글 정보가 없기 때문이었습니다. 무료 한글 폰트(.ttf)를 다운로드하고, 유니티의 Font Asset Creator를 이용해 한글이 포함된 새로운 폰트 에셋(SDF)을 만들어 해결했습니다.

Q: "2P 화면을 180도 뒤집으니 화면 밖으로 사라지는 문제!" A: UI의 Rotation이 아닌 Scale 값을 (1, -1, 1)로 변경하여 해결했습니다. 이 과정에서 UI의 변형 기준점인 **'피봇(Pivot)'**을 중앙(0.5, 0.5)으로 맞춰야 제자리에서 뒤집힌다는 중요한 원리를 깨달았습니다.

4. 최종 스크립트: 현재까지의 완성본

현재 안정화된 버전의 핵심 스크립트 입니다.

GameManager.cs - SetupRoutine (게임 시작 흐름)

IEnumerator SetupRoutine()
{
    // 가위바위보 진행
    while (true)
    {
        currentState = GameState.RPS_Input;
        // ... (선택 대기) ...
        int winner = DetermineRPSWinner();
        if (winner == 1 || winner == 2)
        {
            // ... (결과 표시) ...
            // 승자 선택 UI 표시 및 대기
            currentState = GameState.WinnerChoice;
            uiManager.ShowWinnerChoiceUI(winner);
            yield return new WaitUntil(() => winnerChoseFirst.HasValue);
            // ... (선/후공 결정) ...
            break;
        }
        else { /* 무승부 처리 */ }
    }
    // 모든 준비 UI 숨기기
    uiManager.HideAllSetupUI();
    // 보드 생성 및 게임 루프 시작
    boardManager.CreateBoard();
    StartCoroutine(GameLoop());
}

UIManager.cs - AnimateMapTransition (맵 슬라이드 애니메이션)

public IEnumerator AnimateMapTransition(int targetState) // 0: 중앙, 1: P1턴(맵이 위로), 2: P2턴(맵이 아래로)
{
    float duration = 0.4f;
    float elapsed = 0f;
    Vector2 startPos = mapContainer.anchoredPosition;
    Vector2 endPos;
    // ... (목표 위치 계산) ...
    while (elapsed < duration)
    {
        mapContainer.anchoredPosition = Vector2.Lerp(startPos, endPos, elapsed / duration);
        elapsed += Time.deltaTime;
        yield return null;
    }
    mapContainer.anchoredPosition = endPos;
}

마무리하며

큰 산을 하나 넘었습니다. 단순히 동작하는 것을 넘어, 게임의 전체적인 구조와 뼈대를 세우고, 사용자 경험(UX)까지 고려한 UI를 완성했습니다. 이제 기반 위에서 새로운 콘텐츠를 추가하는 일만 남았습니다.

다음 개발 일지에서는 드디어 '혼자 하기' 모드의 핵심, AI 플레이어 개발을 시작하겠습니다.

지난 1편에서는 아이디어 구체화부터 유니티 프로젝트 생성, 그리고 코드를 통해 보드와 유닛을 자동으로 배치하는 '정적인' 무대를 완성했습니다. 하지만 아직은 아무것도 움직이지 않는 멋진 장식품에 불과했죠.

이번 포스팅에서는 드디어 이 무대에 생명을 불어넣어, 플레이어의 선택에 따라 맵이 회전하고 말이 움직이는 게임의 핵심 로직을 구현한 과정을 기록해보려고 합니다.

2025.08.12 - [Unity Project/Roto-Versus (로토 버서스)] - [Unity 개발 일지 #1] 나만의 2인용 퍼즐 게임 만들기: 아이디어부터 보드 세팅까지

1. 게임의 지휘자: GameManager와 게임 루프 설계

모든 게임 로직을 지휘할 '두뇌'인 GameManager 스크립트의 구조부터 잡았습니다. 특히 나중에 '혼자 하기(VS AI)' 기능을 쉽게 추가할 수 있도록, '조작의 주체'를 분리하는 컨트롤러 패턴을 도입했습니다.

• PlayerController (설계도): 모든 컨트롤러(사람/AI)가 따라야 할 규칙을 정의한 추상 클래스입니다.
• HumanPlayerController (구현): 키보드/마우스 입력을 처리할 '사람'용 컨트롤러입니다.
• AIPlayerController (미래를 위한 준비): 나중에 AI 로직을 채워 넣을 '인공지능'용 컨트롤러 껍데기도 미리 만들었습니다.

그리고 GameManager에는 '코루틴(Coroutine)'을 이용해 게임의 전체 흐름을 관리하는 메인 GameLoop를 만들었습니다.

// GameManager.cs의 GameLoop와 TurnRoutine 구조
IEnumerator GameLoop()
{
    // 게임이 끝날 때까지 무한히 턴을 반복합니다.
    while (currentState != GameState.GameOver)
    {
        yield return StartCoroutine(TurnRoutine());
    }
}

IEnumerator TurnRoutine()
{
    // 1. 이동 플레이어의 선택을 기다림
    // 2. 회전 플레이어의 선택을 기다림
    // 3. 두 선택을 합쳐 턴을 실행 (회전 -> 이동)
    // 4. 다음 턴 준비
}

이 구조 덕분에 복잡한 턴제 로직을 시간 순서에 따라 명확하게 작성할 수 있었습니다.

2. 보이는 손과 발: 카드 UI와 이벤트 연결

플레이어가 실제로 자신의 의사를 표현할 카드 UI를 만들고, 이 버튼 클릭이 게임 로직에 전달되도록 '이벤트'를 연결했습니다.

'UIManager'라는 스크립트가 중간 다리 역할을 하도록 설계했습니다.

1. 플레이어가 카드 버튼(Button)을 클릭합니다.
2. 버튼의 onClick 이벤트는 UIManager의 함수를 호출합니다. (예: OnMoveCardSelected(0) 호출)
3. UIManager는 전달받은 값을 GameManager에게 넘겨줍니다. (예: gameManager.ReceiveMoveChoice(MoveDirection.Up))
4. GameManager는 선택을 변수에 저장하고, TurnRoutine의 다음 단계를 진행합니다.

이 과정은 유니티 Inspector의 Button 컴포넌트에서 OnClick() 이벤트를 설정하여 구현했습니다.

3. 드디어 움직인다! 보드 회전과 플레이어 이동

가장 신나는 순간이었습니다! 플레이어의 선택을 실제 움직임으로 변환하는 코드입니다. 모든 움직임은 Vector3.Lerp와 Quaternion.Lerp를 이용해 부드럽게 보이도록 만들었습니다.

[BoardManager.cs - 보드 회전 코드]

// 보드를 부드럽게 회전시키는 코루틴 함수
public IEnumerator RotateBoardRoutine(RotateDirection direction)
{
    float duration = 0.5f;
    float elapsed = 0f;
    Quaternion startRotation = transform.rotation;
    float angle = direction == RotateDirection.Right ? 90f : -90f;
    Quaternion endRotation = startRotation * Quaternion.Euler(0, angle, 0);

    while (elapsed < duration)
    {
        transform.rotation = Quaternion.Lerp(startRotation, endRotation, elapsed / duration);
        elapsed += Time.deltaTime;
        yield return null;
    }
    transform.rotation = endRotation;
}

[PlayerPawn.cs - 플레이어 이동 코드]

// 말을 부드럽게 움직이는 코루틴 함수
public IEnumerator MoveRoutine(Vector3 targetPosition)
{
    float duration = 0.3f;
    float elapsed = 0f;
    Vector3 startPosition = transform.position;

    while (elapsed < duration)
    {
        transform.position = Vector3.Lerp(startPosition, targetPosition, elapsed / duration);
        elapsed += Time.deltaTime;
        yield return null;
    }
    transform.position = targetPosition;
}

'GameManager'는 이 두 함수를 '회전 먼저, 이동 나중' 순서로 호출하여 턴을 진행시킵니다.

4. 현실적인 문제들: 버그 수정

물론 구현 과정에서 문제점도 있었습니다.

1. 맵이 공전하는 문제: 맵이 제자리에서 돌지 않고 어딘가를 중심으로 크게 도는 현상이 있었습니다. 원인은 GameManager 오브젝트의 Position이 (0,0,0)이 아니었기 때문이었죠. 위치를 원점으로 초기화하여 간단히 해결했습니다.
2. 가출하는 플레이어: 플레이어들이 맵 밖으로 무한정 나가는 문제가 있었습니다. Mathf.Clamp 함수를 이용해 플레이어의 다음 좌표가 맵의 경계(-2~2)를 벗어나지 않도록 강제로 막아주는 로직을 추가하여 해결했습니다.

마무리하며

이제 Roto-Versus는 단순히 보여주기만 하는 것을 넘어, 플레이어와 상호작용하며 실제 게임처럼 동작하는 핵심적인 뼈대를 갖추게 되었습니다. 카드 UI를 클릭하면 보드가 회전하고, 그에 맞춰 플레이어들이 움직이는 모습을 확인할 수 있었습니다.

아직 승리/패배 조건도 없고, 점수도 없고, AI도 없고, 게임성 부분에서 수정해야 할 부분이 많이 보이네요

다음 개발 일지에서는 '승리 조건'을 체크하는 로직과, 간단한 게임 오버 화면을 구현하는 과정을 다뤄볼 예정입니다. 읽어주셔서 감사합니다!

오랫동안 머릿속에만 있던 게임 아이디어를 드디어 유니티(Unity)를 이용해 직접 만들어보기로 했습니다. 이 블로그에는 아무것도 없던 빈 화면에서부터 게임이 완성되기까지의 여정을 기록해보려고 합니다. 

1. 이건 어떤 게임? - 게임 기획

제가 만들고 싶은 게임은 "서로 방해하며 목표를 향해 나아가는 2인용 퍼즐 대전 게임" 입니다.

• 핵심 컨셉: 한 플레이어는 '이동'을, 다른 플레이어는 '맵 회전'을 담당하며 매 턴 역할을 바꿉니다.
• 게임 목표: 계속해서 회전하고 변하는 맵 위에서, 상대보다 먼저 중앙의 목표 지점에 도달하면 승리!
• 게임 가제: Roto-Versus (로토 버서스) - 회전(Rotation)과 대결(Versus)의 의미를 담았습니다.

간단한 기획서(GDD)를 정리하고, 본격적으로 유니티 허브를 켰습니다.

2. 무대 만들기: 절차적 보드 생성

가장 먼저 한 일은 게임의 무대가 될 보드를 만드는 것이었습니다. 타일을 하나하나 손으로 놓는 대신, 코드가 자동으로 보드를 생성하도록 BoardManager라는 스크립트를 작성했습니다.

// BoardManager.cs 의 일부
public int boardSize = 5;
public GameObject tilePrefab;

void GenerateBoard()
{
    for (int x = 0; x < boardSize; x++)
    {
        for (int z = 0; z < boardSize; z++)
        {
            // ... 위치 계산 로직 ...
            Instantiate(tilePrefab, tilePosition, Quaternion.identity, this.transform);
        }
    }
}

이렇게 해두면 나중에 boardSize 변수 값만 5에서 7로 바꾸면 순식간에 7x7 보드가 만들어지죠. 정말 편리합니다.

3. 배우 등장: 플레이어와 목표 지점 프리팹(Prefab) 제작

텅 빈 무대 위에 주인공들을 올릴 차례입니다. 처음에는 3D 캡슐로 플레이어를 만들었는데, 탑뷰 시점에서는 밋밋해 보여서 2D 이미지로 방향을 틀었습니다.

플레이어 말은 바닥에 납작하게 누운 형태의 Quad 오브젝트를 사용했고, 목표 지점(Goal)은 눈에 잘 띄도록 스스로 빛나는(Emission) 머티리얼을 적용한 Cube로 만들었습니다. 이렇게 만들어둔 오브젝트들은 언제든 재사용할 수 있도록 '프리팹'으로 저장했죠.

4. 탑뷰 카메라와 조명 설정

이 게임은 하늘에서 보드를 내려다보는 탑뷰(Top-down View)가 가장 어울립니다. 카메라의 Projection을 Perspective(원근)에서 Orthographic(직교)로 바꾸는 것이 핵심이었습니다. 그래야 보드 격자가 왜곡 없이 깔끔하게 보이니까요.

밋밋한 화면에 입체감을 주기 위해 Directional Light를 수직이 아닌, 살짝 비스듬한 각도(X: 50, Y: -30)로 비춰서 그림자가 예쁘게 생기도록 조절했습니다.

5. 플레이어 위치 문제 해결

물론 모든 과정이 순탄하지만은 않았습니다. 플레이어가 바닥에 파묻히거나, 아예 보이지 않는 문제에 부딪혔죠.

원인은 다양했습니다. 오브젝트의 중심점(Pivot) 문제로 Y 위치 계산이 틀렸었고, 2D 말을 바닥에 눕히기 위한 회전 값을 잘못 설정하기도 했습니다. Y값을 0.01로 했다가, 타일의 높이를 고려해서 0.51로 바꿔주니 비로소 모든 유닛이 제자리를 찾았습니다. 이런 문제 해결 과정이야말로 개발의 진짜 묘미가 아닐까 싶네요.

이렇게 해서 드디어 게임의 '정적인' 무대 설정이 모두 끝났습니다. 코드를 실행하면 지정된 크기의 보드와 플레이어, 목표 지점이 완벽하게 배치됩니다.

아직은 아무것도 움직이지 않는 그림에 불과하지만, 모든 준비는 끝났습니다. 다음에는 이 위에서 플레이어의 입력을 받아 말을 움직이고 맵을 회전시키는, 게임의 핵심 로직 구현을 해보겠습니다.

특별한 순간들을 어떻게 기념하고, 생일, 기념일, 임신 소식 등 소중한 순간을 간직하고 공유하기 위하여, 이러한 순간을 쉽게 공유할 수 있도록 앱을 기획하였습니다. 오늘은 제가 이벤트리 앱의 기획서와 개발 과정을 작성해보고자 합니다.

서비스는 이용이 어려운 것이 아니라 마치 편지와 같이 쉽고 간단하게 이용할 수 있도록 하는 목표를 가지고 있습니다. 기획을 시작으로 개발 과정을 하나씩 작성해보도록 하겠습니다.

1. 이벤트리 앱 기획서

1.1 서비스 개요

이벤트리(Eventree)는 다양한 이벤트를 위한 맞춤형 콘텐츠를 생성하고 공유할 수 있는 서비스입니다. 사용자들은 임신 소식, 생일, 기념일 등 다양한 이벤트를 위해 텍스트, 이미지, 멀티미디어 등의 맞춤형 콘텐츠를 생성할 수 있습니다. 생성된 콘텐츠는 HTML 형식으로 다운로드하고 공유할 수 있으며, 각 이벤트에 맞는 특수효과와 애니메이션을 제공합니다.

1.2 초기 서비스: 임신 소식 알림 서비스

이벤트리의 초기 서비스는 임신 소식 알림 서비스입니다. 사용자는 날짜, 성별, 태명, 이미지, 문구 등의 임신 소식 관련 정보를 입력하고, 이를 기반으로 디자인된 HTML 페이지를 자동으로 생성할 수 있습니다. 성별에 따른 맞춤형 시각 효과와 애니메이션도 제공되며, 생성된 페이지는 다운로드 및 공유가 가능합니다.

1.3 화면 구성

이벤트리 앱은 다음과 같은 화면으로 구성됩니다:

• 메인 시작 화면: 앱 로고와 간단한 소개 문구, "서비스 시작" 버튼이 있습니다.
• 이벤트 리스트 화면: 다양한 이벤트 목록과 각 이벤트별 간단한 소개 및 미리보기를 제공합니다.
• 이벤트 서비스 화면 (임신 소식 알림): 날짜 선택, 성별 선택, 태명/이름 입력, 이미지 등록, 안내 문구 입력, 생성 버튼 등이 포함됩니다.
• 결과 화면: 생성된 HTML 페이지 미리보기, 성별에 따른 시각 효과 및 애니메이션, 다운로드 및 공유 버튼이 있습니다.

1.4 기술 스택

이벤트리 앱 개발에는 다음과 같은 기술 스택이 사용됩니다:

• Unity 6: 앱 개발 플랫폼
• HTML, CSS, JavaScript: 웹 페이지 생성 및 디자인
• C#: Unity 스크립트 언어
• Firebase 또는 AWS: 데이터 저장 및 관리 (선택 사항)

2. 개발 과정

2.1 프로젝트 설정

Unity Hub를 사용하여 Unity 6 프로젝트를 생성하고, 필요한 에셋과 플러그인을 설치합니다. 프로젝트 구조를 설계하고 씬, 스크립트, 에셋 등을 체계적으로 관리합니다.

2.2 UI 디자인 및 구현

각 화면별 UI 디자인을 진행합니다. 메인 시작 화면, 이벤트 리스트 화면, 이벤트 서비스 화면, 결과 화면을 설계하고, 사용자 입력 요소를 구현합니다. 또한, 성별에 따른 시각 효과와 애니메이션을 적용합니다.

2.3 기능 구현

사용자 입력 데이터를 처리하고 저장하는 기능을 구현합니다. HTML 페이지 템플릿을 생성하고 데이터 바인딩을 통해 웹 페이지를 생성하고 미리볼 수 있도록 합니다. 다운로드 및 공유 기능도 구현합니다.

2.4 테스트 및 디버깅

각 기능별 단위 테스트와 통합 테스트를 수행합니다. 다양한 기기와 환경에서 앱을 테스트하고, 발견된 버그를 수정하며 성능을 개선합니다.

2.5 배포

Android 및 iOS 빌드 설정을 구성하고, 각 앱 스토어에 앱을 등록하여 배포합니다. 사용자 피드백을 수렴하여 앱을 지속적으로 업데이트하고 개선합니다.

3. 추가 고려 사항

사용자 경험(UX)을 고려한 직관적이고 사용하기 쉬운 UI/UX 디자인, 다양한 기기에서 원활하게 작동하도록 성능 최적화, 사용자 데이터 보호를 위한 보안 강화, 글로벌 사용자 확보를 위한 다국어 지원, 공유 기능 강화를 위한 소셜 미디어 연동, 사용자 행동 분석을 통한 서비스 개선 등을 추가로 고려해야 합니다.