Claude Code 첫 체험기: AI와 함께 SwiftUI 틱택토 게임 만들기

들어가며

평소 AI 기반 코딩 도구인 Cursor를 자주 사용하며 AI의 도움을 받아 개발하는 것에 익숙했던 나에게, Anthropic에서 새롭게 출시한 Claude Code는 매우 흥미로운 도구였다.

이번에 Claude Code를 처음 사용해보면서, SwiftUI 기반의 틱택토 게임을 만들어보기로 했다. 처음에는 두 명이 번갈아 가며 플레이할 수 있는 간단한 게임으로 시작했지만, 잘 작동하는 것을 확인한 후 스마트폰과 대결할 수 있도록 AI 상대편 기능까지 추가해보았다.

이 글에서는 Claude Code를 사용한 실제 개발 과정과 경험을 공유하고자 한다.

Claude Code란?

Claude Code는 Anthropic에서 개발한 CLI 기반의 AI 코딩 어시스턴트다. 기존의 다른 AI 코딩 도구들과 달리, 터미널에서 직접 작업하며 파일 생성, 편집, 검색 등의 작업을 수행할 수 있다.

주요 특징

• CLI 기반 인터페이스: 터미널에서 직접 대화하며 코딩
• 파일 시스템 직접 조작: 파일 생성, 편집, 검색 등 실제 작업 수행
• 컨텍스트 인식: 프로젝트 구조와 기존 코드를 이해하고 일관성 있는 코드 생성
• 할일 관리: TodoWrite/TodoRead 도구로 작업 진행상황 추적

Claude Code 설치하기

Claude Code를 사용하기 위해서는 먼저 설치 과정을 거쳐야 한다.

사전 요구사항

• Node.js (18.0 이상)
• Anthropic API 키

설치 과정

1. npm을 통한 설치

   npm install -g @anthropic-ai/claude-code

2. API 키 설정

   export ANTHROPIC_API_KEY="your-api-key-here"

   또는 .env 파일에 설정:

   ANTHROPIC_API_KEY=your-api-key-here
   

3. 설치 확인

   claude-code --version

4. 첫 실행

   claude-code

설치는 매우 간단했다. npm 패키지 매니저를 통해 전역 설치하고, Anthropic API 키만 설정하면 바로 사용할 수 있다. Cursor와 달리 별도의 IDE 설치나 복잡한 설정 과정이 필요 없어서 빠르게 시작할 수 있었다.

프로젝트 시작: "init"

가장 먼저 빈 디렉토리에서 **"init"**이라고 입력했다. Claude Code는 즉시 어떤 종류의 프로젝트를 만들고 싶은지 물어봤다.

SwiftUI 기반의 Xcode 프로젝트를 생성해줘

이 한 문장으로 Claude Code는:

• Xcode 프로젝트 파일 구조 생성
• SwiftUI 기본 템플릿 설정
• 필요한 설정 파일들 자동 생성

몇 초 만에 완전한 SwiftUI 프로젝트가 생성되었다.

1단계: 기본 틱택토 게임 구현

만들어진 프로젝트에 틱텍토 코드를 추가해줘

Claude Code는 이 요청을 받고 체계적으로 작업을 진행했다:

자동 할일 관리

Claude Code의 인상적인 기능 중 하나는 자동으로 할일 목록을 생성하고 관리한다는 점이다:

1. ✅ TicTacToe 게임 모델 생성
2. ✅ TicTacToe 게임 뷰 생성
3. ✅ ContentView 업데이트하여 틱택토 게임 표시

생성된 파일들

TicTacToeGame.swift - 게임 로직

enum Player: String, CaseIterable {
    case x = "X"
    case o = "O"
    
    var opposite: Player {
        self == .x ? .o : .x
    }
}

class TicTacToeGame: ObservableObject {
    @Published var board: [GameCell] = Array(repeating: GameCell(), count: 9)
    @Published var currentPlayer: Player = .x
    @Published var gameResult: GameResult = .ongoing
    // ... 게임 로직
}

TicTacToeView.swift - SwiftUI 인터페이스

struct TicTacToeView: View {
    @StateObject private var game = TicTacToeGame()
    
    var body: some View {
        VStack(spacing: 20) {
            Text("틱택토")
                .font(.largeTitle)
            gameStatusView
            gameBoard
            // ... UI 구현
        }
    }
}

문제 해결: 프로젝트 설정 오류

첫 번째 빌드에서 오류가 발생했다:

Cannot find 'TicTacToeView' in scope

Claude Code는 즉시 문제를 파악했다. 새로 생성한 Swift 파일들이 Xcode 프로젝트에 등록되지 않았던 것이다.

Claude Code는 자동으로:

• project.pbxproj 파일 분석
• 새 파일들을 Build Sources에 추가
• 프로젝트 구조에 파일 참조 추가

이런 세밀한 Xcode 설정까지 자동으로 처리해주는 점이 인상적이었다.

추가 오류 수정

컴파일 과정에서 또 다른 오류가 발생했다:

Binary operator '==' cannot be applied to two 'TicTacToeGame.GameResult' operands

Claude Code는 이 문제도 즉시 해결했다:

enum GameResult: Equatable {  // Equatable 프로토콜 추가
    case ongoing
    case winner(Player)
    case tie
}

2단계: AI 상대편 기능 추가

기본 게임이 완성된 후, 더 흥미로운 기능을 요청했다:

아이폰이 자동으로 상대편이 되도록 수정

Claude Code는 이 요청을 받고 다시 체계적으로 계획을 세웠다:

1. ✅ AI 상대편 로직을 TicTacToeGame에 추가
2. ✅ AI 움직임을 처리하도록 게임 플로우 업데이트

지능적인 AI 알고리즘 구현

Claude Code가 구현한 AI는 단순한 랜덤이 아니라 실제로 전략적인 알고리즘이었다:

private func findBestMove() -> Int {
    // 1. 승리 가능한 수 찾기
    for move in availableMoves {
        var tempBoard = board
        tempBoard[move].player = aiPlayer
        if checkWinner(board: tempBoard) == aiPlayer {
            return move  // 승리 우선
        }
    }
    
    // 2. 상대방 승리 차단
    for move in availableMoves {
        var tempBoard = board
        tempBoard[move].player = humanPlayer
        if checkWinner(board: tempBoard) == humanPlayer {
            return move  // 방어 우선
        }
    }
    
    // 3. 전략적 위치 선택 (중앙 → 모서리 → 변)
    let preferredMoves = [4, 0, 2, 6, 8, 1, 3, 5, 7]
    for move in preferredMoves {
        if availableMoves.contains(move) {
            return move
        }
    }
    
    return availableMoves.randomElement() ?? 0
}

UX 개선사항

Claude Code는 AI 기능 추가와 함께 사용자 경험도 개선했다:

• 자연스러운 타이밍: 0.5초 딜레이로 AI가 "생각하는" 시간 제공
• 명확한 상태 표시: "당신의 턴 (X)" vs "AI가 생각 중... (O)"
• 인터랙션 제어: AI 턴에는 버튼 비활성화
• 승리 메시지 개선: "당신이 승리했습니다!" vs "AI가 승리했습니다!"

3단계: 문서화

마지막으로 프로젝트 정리를 위해 문서 작성을 요청했다:

프로젝트 내용을 정리해서 README.md 을 만들어줘, AI의 기능을 상세히 설명해서 한국어로 만들어줘

Claude Code는 매우 상세하고 전문적인 README.md를 생성했다:

• 프로젝트 개요 및 주요 기능
• AI 알고리즘의 4단계 전략 상세 설명
• 기술 스택 및 프로젝트 구조
• 빌드 및 실행 방법
• 향후 개선 계획

Claude Code vs Cursor: 사용 경험 비교

Claude Code의 장점

1. 체계적인 작업 관리: 자동으로 할일을 생성하고 진행상황을 추적
2. 컨텍스트 이해도: 프로젝트 전체 구조를 파악하고 일관성 있는 코드 생성
3. 문제 해결 능력: 빌드 오류나 설정 문제를 즉시 파악하고 해결
4. 코드 품질: 단순한 코드가 아닌 실제 프로덕션 수준의 구조와 로직 제공

특히 인상적인 부분

• Xcode 프로젝트 파일 조작: project.pbxproj 같은 복잡한 설정 파일까지 정확하게 수정
• SwiftUI 패턴 준수: @StateObject, @Published 등 SwiftUI 베스트 프랙티스 적용
• 한국어 지원: 자연스러운 한국어 UI 텍스트와 문서 생성

완성된 게임의 특징

최종적으로 완성된 틱택토 게임은:

• ✅ 직관적인 SwiftUI 인터페이스
• ✅ 지능적인 AI 상대편 (4단계 전략 알고리즘)
• ✅ 자연스러운 게임 플로우
• ✅ 완벽한 에러 처리
• ✅ 반응형 UI 디자인

결론

Claude Code를 처음 사용해본 경험은 매우 긍정적이었다. 특히:

1. 빠른 프로토타이핑: 아이디어에서 작동하는 앱까지 매우 빠른 개발 속도
2. 높은 코드 품질: 단순한 예제가 아닌 실제 사용 가능한 수준의 코드
3. 체계적인 접근: 할일 관리부터 문서화까지 전체적인 개발 프로세스 지원
4. 문제 해결: 실제 개발에서 마주치는 세부적인 설정 문제까지 해결

Cursor와 비교했을 때, Claude Code는 더 체계적이고 프로젝트 전반을 관리하는 능력이 뛰어났다. 특히 터미널 기반의 워크플로우가 개발자에게는 더 자연스럽고 효율적으로 느껴졌다.

앞으로 더 복잡한 프로젝트에서도 Claude Code를 활용해보고 싶다. AI 기반 개발 도구의 새로운 가능성을 보여준 훌륭한 경험이었다.

4단계: 이 블로그 포스팅도 Claude Code로

마지막으로, 이 경험을 정리하여 블로그 포스팅을 작성해달라고 요청했다:

지금까지 작업한 내용으로 입력 순서를 기반으로 해서 Claude Code 를 소개 하는 블로그 포스팅을 만들어줘, 나는 이전에 Cursor 를 사용해봤고, AI를 이용한 코딩에 익숙하지만 Cluade Code는 처음 사용해봤고, SwiftUI 기반으로두명이 할수 있는 틱텍토를 만들었고 잘 작동 하는것을 확인하고, 스마트폰과 대결 할수 있도록 변경 했다.를 서두에 정리해서 넣어주고 POST.md 로 만들어줘

Claude Code는 이 요청을 받고:

• 전체 개발 과정을 시간순으로 정리
• 각 단계별 코드 예시와 설명 추가
• Cursor와의 비교 분석 포함
• 실제 사용 경험 기반의 솔직한 후기 작성

그 결과가 바로 지금 읽고 계신 이 블로그 포스팅입니다.

Claude Code는 단순히 코드만 작성하는 것이 아니라, 개발 과정 전체를 문서화하고 정리하는 능력까지 보여주었다. 개발자의 경험을 체계적으로 정리하여 다른 개발자들에게 유용한 정보로 가공하는 것도 Claude Code의 강력한 기능 중 하나다.

---

전체 개발 시간: 약 30분
생성된 파일: 7개 (Swift 코드 4개 + 설정 파일 + README + 블로그 포스팅)
코드 라인: 약 300줄 + 문서
AI와의 대화 횟수: 약 12회

이 정도 시간과 노력으로 완전한 AI 대전 게임과 상세한 문서화까지 완성할 수 있다는 것이 Claude Code의 진정한 가치라고 생각한다.