🔥 왜 Titanium을 선택해야 할까?

자, 이제 본격적으로 Titanium의 매력에 대해 파헤쳐보자! 솔직히 말해서 크로스 플랫폼 개발 도구는 정말 많아. React Native, Flutter, Xamarin... 그런데 왜 굳이 Titanium일까? 🤔

하지만 이런 단점들을 고려해도 개발 시간과 비용을 크게 절약할 수 있다는 건 정말 큰 매력이야! 특히 스타트업이나 중소기업에서는 더욱 그렇지. 💰

🎯 첫 번째 Titanium 앱 만들기

드디어 첫 번째 앱을 만들어볼 시간이야! 전통적인 "Hello World" 앱부터 시작해보자. 간단해 보이지만 Titanium의 핵심 개념들을 모두 담고 있어! 🌍

📱 프로젝트 생성

터미널에서 다음 명령어를 실행해서 새 프로젝트를 만들어보자:

ti create --type app --name MyFirstApp --id com.example.myfirstapp --platform ios,android

이 명령어가 실행되면 MyFirstApp이라는 폴더가 생성되고, 그 안에 기본적인 프로젝트 구조가 만들어져! 📁

🏗️ 프로젝트 구조 이해하기

생성된 프로젝트 폴더를 열어보면 이런 구조를 볼 수 있어:

✨ 첫 번째 화면 만들기

이제 실제로 화면을 만들어보자! app/views/index.xml 파일을 열어서 다음과 같이 수정해봐:

<Alloy>
    <Window class="container">
        <View class="header">
            <Label class="title">🎉 내 첫 Titanium 앱!</Label>
        </View>
        
        <View class="content">
            <Button class="myButton" onClick="sayHello">안녕하세요!</Button>
            <Label class="message" id="messageLabel"></Label>
        </View>
    </Window>
</Alloy>

그리고 app/controllers/index.js에서 버튼 클릭 이벤트를 처리해보자:

function sayHello() {
    var messages = [
        "안녕하세요! 👋",
        "Titanium 최고! 🚀", 
        "크로스 플랫폼 개발 만세! 🎊",
        "JavaScript로 네이티브 앱을! 💪"
    ];
    
    var randomMessage = messages[Math.floor(Math.random() * messages.length)];
    $.messageLabel.text = randomMessage;
}

$.index.open();

마지막으로 app/styles/index.tss에서 스타일을 예쁘게 꾸며보자:

".container": {
    backgroundColor: "#f0f0f0"
}

".header": {
    backgroundColor: "#667eea",
    height: "100dp",
    width: Ti.UI.FILL
}

".title": {
    text: "내 첫 Titanium 앱!",
    color: "white",
    font: {
        fontSize: "24dp",
        fontWeight: "bold"
    }
}

".content": {
    layout: "vertical",
    top: "20dp"
}

".myButton": {
    backgroundColor: "#764ba2",
    color: "white",
    borderRadius: "10dp",
    width: "200dp",
    height: "50dp",
    top: "20dp"
}

".message": {
    top: "30dp",
    font: {
        fontSize: "18dp"
    },
    textAlign: "center"
}

🏃‍♂️ 앱 실행하고 테스트하기

코드를 다 작성했으니 이제 실제로 실행해보자! 이 순간이 가장 설레는 순간이야. 과연 우리가 만든 앱이 제대로 동작할까? 😍

📱 시뮬레이터에서 실행

iOS 시뮬레이터에서 실행:

ti build -p ios -T simulator

Android 에뮬레이터에서 실행:

ti build -p android -T emulator

명령어를 실행하면 Titanium이 우리의 JavaScript 코드를 네이티브 코드로 변환하고, 각 플랫폼에 맞는 앱을 빌드해줘. 이 과정이 바로 Titanium의 마법이야! ✨

🔍 디버깅과 로그 확인

개발하다 보면 당연히 버그도 생기고 문제도 발생해. 이때 로그를 확인하는 방법을 알아두는 게 정말 중요해!

// 콘솔에 로그 출력
Ti.API.info("이것은 정보 로그입니다");
Ti.API.warn("이것은 경고 로그입니다");
Ti.API.error("이것은 에러 로그입니다");

이렇게 작성한 로그들은 시뮬레이터나 에뮬레이터를 실행할 때 터미널에서 확인할 수 있어. 디버깅할 때 정말 유용하니까 꼭 기억해둬! 🐛

🎨 Alloy MVC 패턴 마스터하기

Titanium의 진짜 파워는 Alloy라는 MVC 프레임워크에서 나와! Alloy를 사용하면 코드를 훨씬 체계적이고 유지보수하기 쉽게 작성할 수 있어. 🏗️

🎭 MVC가 뭐야?

MVC는 Model-View-Controller의 줄임말이야. 각각의 역할을 명확히 분리해서 코드를 관리하는 패턴이지:

📝 실제 MVC 예제 만들기

간단한 할 일 목록 앱을 만들어보면서 MVC 패턴을 이해해보자! 🗒️

1. Model 만들기 (app/models/todo.js):

exports.definition = {
    config: {
        columns: {
            "id": "INTEGER PRIMARY KEY AUTOINCREMENT",
            "title": "TEXT",
            "completed": "INTEGER DEFAULT 0",
            "created_at": "TEXT"
        },
        adapter: {
            type: "sql",
            collection_name: "todos"
        }
    },
    
    extendModel: function(Model) {
        _.extend(Model.prototype, {
            // 할 일 완료 상태 토글
            toggleComplete: function() {
                this.set('completed', this.get('completed') ? 0 : 1);
                this.save();
            }
        });
        
        return Model;
    }
};

2. View 만들기 (app/views/todos.xml):

<Alloy>
    <Window class="container">
        <View class="header">
            <Label class="headerTitle">📝 할 일 목록</Label>
            <Button class="addButton" onClick="showAddDialog">➕</Button>
        </View>
        
        <TableView id="todoTable" class="todoTable">
        </TableView>
    </Window>
</Alloy>

3. Controller 만들기 (app/controllers/todos.js):

var todos = Alloy.Collections.todo;

function loadTodos() {
    todos.fetch();
    var tableData = [];
    
    todos.each(function(todo) {
        var row = Ti.UI.createTableViewRow({
            title: todo.get('title'),
            hasChild: false,
            color: todo.get('completed') ? '#999' : '#333',
            font: {
                strikethrough: todo.get('completed')
            }
        });
        
        row.addEventListener('click', function() {
            todo.toggleComplete();
            loadTodos(); // 화면 새로고침
        });
        
        tableData.push(row);
    });
    
    $.todoTable.setData(tableData);
}

function showAddDialog() {
    var dialog = Ti.UI.createAlertDialog({
        title: '새 할 일 추가',
        message: '할 일을 입력하세요:',
        style: Ti.UI.iPhone.AlertDialogStyle.PLAIN_TEXT_INPUT,
        buttonNames: ['취소', '추가']
    });
    
    dialog.addEventListener('click', function(e) {
        if (e.index === 1) { // '추가' 버튼
            var newTodo = Alloy.createModel('todo', {
                title: e.text,
                created_at: new Date().toISOString()
            });
            newTodo.save();
            todos.add(newTodo);
            loadTodos();
        }
    });
    
    dialog.show();
}

// 앱 시작시 할 일 목록 로드
loadTodos();

$.todos.open();

이렇게 MVC 패턴으로 나누니까 코드가 훨씬 깔끔하고 이해하기 쉬워졌지? 각각의 역할이 명확하게 분리되어 있어서 나중에 수정하거나 기능을 추가할 때도 훨씬 편해! 🎯

🌐 네이티브 API 활용하기

Titanium의 진짜 매력은 네이티브 API를 JavaScript로 쉽게 사용할 수 있다는 점이야! 카메라, GPS, 푸시 알림 등 스마트폰의 모든 기능을 활용할 수 있어. 🔥

📸 카메라 기능 구현하기

사진을 찍고 갤러리에서 이미지를 선택하는 기능을 만들어보자:

function openCamera() {
    // 카메라 권한 확인
    if (!Ti.Media.hasCameraPermissions()) {
        Ti.Media.requestCameraPermissions(function(e) {
            if (e.success) {
                showCameraOptions();
            } else {
                alert('카메라 권한이 필요합니다!');
            }
        });
    } else {
        showCameraOptions();
    }
}

function showCameraOptions() {
    var dialog = Ti.UI.createOptionDialog({
        title: '사진 선택',
        options: ['카메라로 촬영', '갤러리에서 선택', '취소'],
        cancel: 2
    });
    
    dialog.addEventListener('click', function(e) {
        if (e.index === 0) {
            // 카메라로 촬영
            Ti.Media.showCamera({
                success: function(event) {
                    var image = event.media;
                    // 이미지 처리 로직
                    displayImage(image);
                },
                error: function(error) {
                    alert('사진 촬영에 실패했습니다: ' + error.error);
                },
                mediaTypes: [Ti.Media.MEDIA_TYPE_PHOTO]
            });
        } else if (e.index === 1) {
            // 갤러리에서 선택
            Ti.Media.openPhotoGallery({
                success: function(event) {
                    var image = event.media;
                    displayImage(image);
                },
                error: function(error) {
                    alert('이미지 선택에 실패했습니다: ' + error.error);
                }
            });
        }
    });
    
    dialog.show();
}

📍 위치 정보 활용하기

GPS를 사용해서 현재 위치를 가져오는 기능도 만들어보자:

function getCurrentLocation() {
    // 위치 권한 확인
    if (!Ti.Geolocation.hasLocationPermissions(Ti.Geolocation.AUTHORIZATION_WHEN_IN_USE)) {
        Ti.Geolocation.requestLocationPermissions(Ti.Geolocation.AUTHORIZATION_WHEN_IN_USE, function(e) {
            if (e.success) {
                getLocation();
            } else {
                alert('위치 권한이 필요합니다!');
            }
        });
    } else {
        getLocation();
    }
}

function getLocation() {
    Ti.Geolocation.getCurrentPosition(function(e) {
        if (e.error) {
            alert('위치를 가져올 수 없습니다: ' + e.error);
        } else {
            var latitude = e.coords.latitude;
            var longitude = e.coords.longitude;
            
            // 위치 정보를 화면에 표시
            $.locationLabel.text = `📍 현재 위치: ${latitude.toFixed(4)}, ${longitude.toFixed(4)}`;
            
            // 역지오코딩으로 주소 가져오기
            Ti.Geolocation.reverseGeocoder(latitude, longitude, function(e) {
                if (e.success && e.places && e.places.length > 0) {
                    var place = e.places[0];
                    $.addressLabel.text = `🏠 주소: ${place.address}`;
                }
            });
        }
    });
}

🔔 푸시 알림 구현하기

푸시 알림은 모바일 앱의 핵심 기능 중 하나야. 사용자와의 소통을 위해서는 필수적이지!

// 푸시 알림 등록
function registerForPushNotifications() {
    if (Ti.Platform.name === 'iPhone OS') {
        // iOS 푸시 알림 등록
        Ti.Network.registerForPushNotifications({
            types: [
                Ti.Network.NOTIFICATION_TYPE_BADGE,
                Ti.Network.NOTIFICATION_TYPE_ALERT,
                Ti.Network.NOTIFICATION_TYPE_SOUND
            ],
            success: function(e) {
                var deviceToken = e.deviceToken;
                Ti.API.info('푸시 토큰: ' + deviceToken);
                // 서버에 토큰 전송
                sendTokenToServer(deviceToken);
            },
            error: function(e) {
                Ti.API.error('푸시 등록 실패: ' + e.error);
            },
            callback: function(e) {
                // 푸시 알림을 받았을 때 처리
                Ti.API.info('푸시 알림 수신: ' + JSON.stringify(e));
            }
        });
    } else {
        // Android 푸시 알림은 Firebase Cloud Messaging 사용
        var CloudPush = require('ti.cloudpush');
        CloudPush.retrieveDeviceToken({
            success: function(e) {
                var deviceToken = e.deviceToken;
                sendTokenToServer(deviceToken);
            },
            error: function(e) {
                Ti.API.error('푸시 토큰 가져오기 실패: ' + e.error);
            }
        });
    }
}

🎯 플랫폼별 최적화 전략

크로스 플랫폼 개발의 목표는 "한 번 작성, 어디서든 실행"이지만, 실제로는 각 플랫폼의 특성을 고려한 최적화가 필요해. iOS와 Android는 UI/UX 가이드라인이 다르거든! 📱

🍎 iOS vs 🤖 Android 차이점

🔧 플랫폼별 코드 분기

Titanium에서는 플랫폼을 감지해서 각각 다른 코드를 실행할 수 있어:

// 플랫폼 감지
if (Ti.Platform.osname === 'iphone' || Ti.Platform.osname === 'ipad') {
    // iOS 전용 코드
    var navWindow = Ti.UI.iOS.createNavigationWindow({
        window: $.index
    });
    navWindow.open();
} else if (Ti.Platform.osname === 'android') {
    // Android 전용 코드
    $.index.activity.actionBar.title = "내 앱";
    $.index.activity.actionBar.displayHomeAsUp = true;
    $.index.open();
}

// 화면 크기에 따른 반응형 디자인
var screenWidth = Ti.Platform.displayCaps.platformWidth;
var screenHeight = Ti.Platform.displayCaps.platformHeight;

if (screenWidth > 600) {
    // 태블릿용 레이아웃
    $.mainView.layout = 'horizontal';
} else {
    // 스마트폰용 레이아웃
    $.mainView.layout = 'vertical';
}

🎨 플랫폼별 스타일링

TSS 파일에서도 플랫폼별로 다른 스타일을 적용할 수 있어:

// 공통 스타일
".myButton": {
    width: "200dp",
    height: "50dp",
    borderRadius: "8dp"
}

// iOS 전용 스타일
".myButton[platform=ios]": {
    backgroundColor: "#007AFF",
    color: "white"
}

// Android 전용 스타일
".myButton[platform=android]": {
    backgroundColor: "#4CAF50",
    color: "white",
    elevation: 4
}

🚀 성능 최적화 비법

앱을 만드는 것도 중요하지만, 성능 좋은 앱을 만드는 것이 더 중요해! 사용자들은 느린 앱을 참지 못하거든. 몇 가지 성능 최적화 팁을 알려줄게! ⚡

💾 메모리 관리

JavaScript는 가비지 컬렉션이 있지만, 모바일 환경에서는 메모리 관리가 특히 중요해:

// ❌ 나쁜 예: 메모리 누수 가능성
var images = [];
for (var i = 0; i < 100; i++) {
    images.push(Ti.UI.createImageView({
        image: 'large_image_' + i + '.jpg'
    }));
}

// ✅ 좋은 예: 필요할 때만 생성하고 정리
function createImageView(index) {
    var imageView = Ti.UI.createImageView({
        image: 'large_image_' + index + '.jpg'
    });
    
    // 사용 후 정리
    imageView.addEventListener('postlayout', function() {
        // 이미지 로드 완료 후 처리
    });
    
    return imageView;
}

// 뷰가 닫힐 때 리소스 정리
$.window.addEventListener('close', function() {
    // 이벤트 리스너 제거
    // 타이머 정리
    // 불필요한 객체 참조 해제
});

🏎️ UI 렌더링 최적화

부드러운 스크롤과 빠른 화면 전환을 위한 팁들이야:

📊 성능 모니터링

앱의 성능을 실시간으로 모니터링하는 방법도 알아두자:

// 메모리 사용량 체크
function checkMemoryUsage() {
    var memInfo = Ti.Platform.availableMemory;
    Ti.API.info('사용 가능한 메모리: ' + memInfo + 'MB');
    
    if (memInfo < 50) {
        Ti.API.warn('메모리 부족 경고!');
        // 불필요한 리소스 정리
        cleanupResources();
    }
}

// 앱 성능 지표 수집
function trackPerformance(actionName, startTime) {
    var endTime = new Date().getTime();
    var duration = endTime - startTime;
    
    Ti.API.info(`${actionName} 실행 시간: ${duration}ms`);
    
    // 성능 데이터를 서버로 전송 (선택사항)
    if (duration > 1000) {
        Ti.API.warn(`${actionName}이 너무 오래 걸립니다: ${duration}ms`);
    }
}

🔗 서버와의 데이터 통신

요즘 앱들은 대부분 서버와 데이터를 주고받아야 해. REST API 호출, JSON 파싱, 에러 처리까지... 이 모든 걸 Titanium에서 어떻게 하는지 알아보자! 🌐

📡 HTTP 요청 보내기

가장 기본적인 GET 요청부터 시작해보자:

function fetchUserData(userId) {
    var xhr = Ti.Network.createHTTPClient({
        onload: function(e) {
            try {
                var response = JSON.parse(this.responseText);
                displayUserInfo(response);
            } catch (error) {
                Ti.API.error('JSON 파싱 에러: ' + error.message);
                showErrorMessage('데이터 처리 중 오류가 발생했습니다.');
            }
        },
        onerror: function(e) {
            Ti.API.error('네트워크 에러: ' + e.error);
            showErrorMessage('네트워크 연결을 확인해주세요.');
        },
        timeout: 10000 // 10초 타임아웃
    });
    
    xhr.open('GET', `https://api.example.com/users/${userId}`);
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.setRequestHeader('Authorization', 'Bearer ' + getAuthToken());
    xhr.send();
}

📤 POST 요청으로 데이터 전송

사용자가 입력한 데이터를 서버로 전송하는 경우도 많지:

function createNewPost(title, content) {
    var postData = {
        title: title,
        content: content,
        author_id: getCurrentUserId(),
        created_at: new Date().toISOString()
    };
    
    var xhr = Ti.Network.createHTTPClient({
        onload: function(e) {
            if (this.status === 201) {
                // 성공적으로 생성됨
                var newPost = JSON.parse(this.responseText);
                showSuccessMessage('게시글이 성공적으로 작성되었습니다! 🎉');
                navigateToPost(newPost.id);
            } else {
                showErrorMessage('게시글 작성에 실패했습니다.');
            }
        },
        onerror: function(e) {
            Ti.API.error('게시글 작성 에러: ' + e.error);
            showErrorMessage('네트워크 오류로 게시글을 작성할 수 없습니다.');
        }
    });
    
    xhr.open('POST', 'https://api.example.com/posts');
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.send(JSON.stringify(postData));
}

🔄 실시간 데이터 동기화

실시간으로 데이터를 동기화해야 하는 경우에는 WebSocket을 사용할 수 있어:

var socket;

function connectWebSocket() {
    socket = Ti.Network.Socket.createTCP({
        host: 'ws.example.com',
        port: 8080,
        connected: function(e) {
            Ti.API.info('WebSocket 연결 성공!');
            // 연결 성공 시 초기 데이터 요청
            socket.write(Ti.createBuffer({
                value: JSON.stringify({type: 'subscribe', channel: 'updates'})
            }));
        },
        error: function(e) {
            Ti.API.error('WebSocket 연결 실패: ' + e.error);
        }
    });
    
    socket.addEventListener('read', function(e) {
        var data = e.buffer.toString();
        try {
            var message = JSON.parse(data);
            handleRealtimeUpdate(message);
        } catch (error) {
            Ti.API.error('WebSocket 데이터 파싱 에러: ' + error.message);
        }
    });
    
    socket.connect();
}

function handleRealtimeUpdate(message) {
    switch (message.type) {
        case 'new_message':
            addNewMessageToUI(message.data);
            break;
        case 'user_online':
            updateUserStatus(message.user_id, 'online');
            break;
        case 'notification':
            showNotification(message.title, message.body);
            break;
    }
}

🗄️ 로컬 데이터 저장과 관리

모든 데이터를 서버에만 의존할 수는 없어. 오프라인 상황이나 빠른 접근을 위해서는 로컬 저장소를 활용해야 해! Titanium에서 제공하는 다양한 저장 방법들을 알아보자. 💾

🏪 Properties (간단한 설정값 저장)

사용자 설정이나 간단한 값들을 저장할 때 사용해:

// 데이터 저장
Ti.App.Properties.setString('username', 'john_doe');
Ti.App.Properties.setBool('notifications_enabled', true);
Ti.App.Properties.setInt('app_launch_count', 5);

// 데이터 읽기
var username = Ti.App.Properties.getString('username', ''); // 기본값: 빈 문자열
var notificationsEnabled = Ti.App.Properties.getBool('notifications_enabled', true);
var launchCount = Ti.App.Properties.getInt('app_launch_count', 0);

// 사용 예제: 앱 실행 횟수 추적
function trackAppLaunch() {
    var currentCount = Ti.App.Properties.getInt('app_launch_count', 0);
    Ti.App.Properties.setInt('app_launch_count', currentCount + 1);
    
    if (currentCount === 0) {
        showWelcomeMessage();
    } else if (currentCount === 10) {
        showRatingDialog(); // 10번째 실행 시 평점 요청
    }
}

🗃️ SQLite 데이터베이스

복잡한 데이터나 관계형 데이터를 저장할 때는 SQLite를 사용해:

// 데이터베이스 연결
var db = Ti.Database.open('myapp_db');

// 테이블 생성
db.execute(`
    CREATE TABLE IF NOT EXISTS users (
        id INTEGER PRIMARY KEY AUTOINCREMENT,
        name TEXT NOT NULL,
        email TEXT UNIQUE,
        created_at DATETIME DEFAULT CURRENT_TIMESTAMP
    )
`);

// 데이터 삽입
function addUser(name, email) {
    try {
        db.execute('INSERT INTO users (name, email) VALUES (?, ?)', name, email);
        Ti.API.info('사용자 추가 성공!');
    } catch (error) {
        Ti.API.error('사용자 추가 실패: ' + error.message);
    }
}

// 데이터 조회
function getUsers() {
    var users = [];
    var rows = db.execute('SELECT * FROM users ORDER BY created_at DESC');
    
    while (rows.isValidRow()) {
        users.push({
            id: rows.fieldByName('id'),
            name: rows.fieldByName('name'),
            email: rows.fieldByName('email'),
            created_at: rows.fieldByName('created_at')
        });
        rows.next();
    }
    
    rows.close();
    return users;
}

// 데이터베이스 연결 종료 (중요!)
function closeDatabase() {
    if (db) {
        db.close();
    }
}

📁 파일 시스템 활용

이미지나 문서 파일을 저장할 때는 파일 시스템을 사용해:

// 앱 데이터 디렉토리 경로
var appDataDir = Ti.Filesystem.getFile(Ti.Filesystem.applicationDataDirectory);

// 이미지 파일 저장
function saveImageToLocal(imageBlob, filename) {
    var imageFile = Ti.Filesystem.getFile(appDataDir, filename);
    
    if (imageFile.write(imageBlob)) {
        Ti.API.info('이미지 저장 성공: ' + imageFile.nativePath);
        return imageFile.nativePath;
    } else {
        Ti.API.error('이미지 저장 실패');
        return null;
    }
}

// 저장된 이미지 불러오기
function loadImageFromLocal(filename) {
    var imageFile = Ti.Filesystem.getFile(appDataDir, filename);
    
    if (imageFile.exists()) {
        return imageFile.read();
    } else {
        Ti.API.warn('파일이 존재하지 않습니다: ' + filename);
        return null;
    }
}

// 캐시 정리 (저장 공간 관리)
function cleanupOldFiles() {
    var files = appDataDir.getDirectoryListing();
    var oneWeekAgo = new Date().getTime() - (7 * 24 * 60 * 60 * 1000);
    
    files.forEach(function(filename) {
        var file = Ti.Filesystem.getFile(appDataDir, filename);
        if (file.modificationTimestamp() < oneWeekAgo) {
            file.deleteFile();
            Ti.API.info('오래된 파일 삭제: ' + filename);
        }
    });
}

🎨 고급 UI 컴포넌트와 애니메이션

기본적인 버튼과 라벨만으로는 아쉽지? 이제 좀 더 멋진 UI를 만들어보자! Titanium에서 제공하는 고급 컴포넌트들과 애니메이션 효과를 활용하면 정말 프로페셔널한 앱을 만들 수 있어! ✨

🎠 커스텀 애니메이션 만들기

사용자의 시선을 사로잡는 애니메이션을 만들어보자:

// 부드러운 페이드 인 애니메이션
function fadeInView(view) {
    view.opacity = 0;
    view.animate({
        opacity: 1,
        duration: 500,
        curve: Ti.UI.ANIMATION_CURVE_EASE_IN_OUT
    });
}

// 통통 튀는 버튼 애니메이션
function bounceButton(button) {
    var originalTransform = Ti.UI.create2DMatrix();
    var scaleTransform = Ti.UI.create2DMatrix().scale(1.2, 1.2);
    
    button.animate({
        transform: scaleTransform,
        duration: 100
    }, function() {
        button.animate({
            transform: originalTransform,
            duration: 100
        });
    });
}

// 슬라이드 전환 애니메이션
function slideToNextView(currentView, nextView) {
    var screenWidth = Ti.Platform.displayCaps.platformWidth;
    
    // 다음 뷰를 화면 오른쪽에 배치
    nextView.left = screenWidth;
    
    // 동시에 애니메이션 실행
    currentView.animate({
        left: -screenWidth,
        duration: 300,
        curve: Ti.UI.ANIMATION_CURVE_EASE_IN_OUT
    });
    
    nextView.animate({
        left: 0,
        duration: 300,
        curve: Ti.UI.ANIMATION_CURVE_EASE_IN_OUT
    });
}

📋 고급 리스트 뷰 구현

ListView를 사용해서 성능 좋은 리스트를 만들어보자:

// 리스트 아이템 템플릿 정의
var itemTemplate = {
    childTemplates: [
        {
            type: 'Ti.UI.ImageView',
            bindId: 'avatar',
            properties: {
                width: '60dp',
                height: '60dp',
                left: '10dp',
                borderRadius: '30dp'
            }
        },
        {
            type: 'Ti.UI.Label',
            bindId: 'title',
            properties: {
                left: '80dp',
                top: '5dp',
                font: { fontSize: '18dp', fontWeight: 'bold' },
                color: '#333'
            }
        },
        {
            type: 'Ti.UI.Label',
            bindId: 'subtitle',
            properties: {
                left: '80dp',
                top: '30dp',
                font: { fontSize: '14dp' },
                color: '#666'
            }
        }
    ]
};

// ListView 생성
var listView = Ti.UI.createListView({
    templates: { 'userTemplate': itemTemplate },
    defaultItemTemplate: 'userTemplate'
});

// 데이터 바인딩
function populateListView(users) {
    var listData = users.map(function(user) {
        return {
            avatar: { image: user.avatar_url || '/images/default_avatar.png' },
            title: { text: user.name },
            subtitle: { text: user.email },
            properties: {
                itemId: user.id,
                searchableText: user.name + ' ' + user.email
            }
        };
    });
    
    var section = Ti.UI.createListSection({
        items: listData
    });
    
    listView.sections = [section];
}

// 아이템 클릭 이벤트
listView.addEventListener('itemclick', function(e) {
    var userId = e.section.getItemAt(e.itemIndex).properties.itemId;
    openUserProfile(userId);
});

🎯 제스처 인식

터치, 스와이프, 핀치 등의 제스처를 인식해서 더 직관적인 UI를 만들어보자:

// 스와이프 제스처
var gestureView = Ti.UI.createView({
    backgroundColor: '#f0f0f0',
    width: Ti.UI.FILL,
    height: '200dp'
});

gestureView.addEventListener('swipe', function(e) {
    switch (e.direction) {
        case 'left':
            slideToNextPage();
            break;
        case 'right':
            slideToPreviousPage();
            break;
        case 'up':
            showMoreOptions();
            break;
        case 'down':
            hideOptions();
            break;
    }
});

// 핀치 줌 제스처 (이미지 확대/축소)
var imageView = Ti.UI.createImageView({
    image: '/images/photo.jpg',
    canScale: true,
    enableZoomControls: true
});

imageView.addEventListener('pinch', function(e) {
    Ti.API.info('핀치 스케일: ' + e.scale);
    // 커스텀 줌 로직 구현 가능
});

// 롱 프레스 제스처
var longPressView = Ti.UI.createView();

longPressView.addEventListener('longpress', function(e) {
    showContextMenu(e.x, e.y);
});

🔧 모듈과 플러그인 활용하기

Titanium의 또 다른 강점은 풍부한 모듈 생태계야! 기본 기능으로 부족하다면 서드파티 모듈을 사용하거나 직접 네이티브 모듈을 만들 수도 있어. 🧩

📦 인기 있는 Titanium 모듈들

🛠️ 모듈 설치와 사용법

모듈을 설치하고 사용하는 방법은 정말 간단해:

// 1. 모듈 설치 (터미널에서)
ti module install ti.map

// 2. tiapp.xml에 모듈 추가
<modules>
    <module>ti.map</module>
</modules>

// 3. 코드에서 모듈 사용
var MapModule = require('ti.map');

var mapView = MapModule.createView({
    mapType: MapModule.NORMAL_TYPE,
    region: {
        latitude: 37.5665,
        longitude: 126.9780,
        latitudeDelta: 0.01,
        longitudeDelta: 0.01
    },
    animate: true,
    regionFit: true,
    userLocation: true
});

// 마커 추가
var annotation = MapModule.createAnnotation({
    latitude: 37.5665,
    longitude: 126.9780,
    title: "서울시청",
    subtitle: "대한민국 서울특별시",
    pincolor: MapModule.ANNOTATION_RED
});

mapView.addAnnotation(annotation);

🎨 커스텀 모듈 만들기

기존 모듈로 해결되지 않는 특별한 기능이 필요하다면 직접 모듈을 만들 수도 있어! 이건 좀 고급 기술이지만, 알아두면 정말 유용해:

// iOS 네이티브 모듈 예제 (Objective-C)
#import "TiModule.h"

@interface MyCustomModule : TiModule
@end

@implementation MyCustomModule

- (NSString*)moduleId {
    return @"com.example.mycustommodule";
}

- (void)doSomethingSpecial:(id)args {
    // 네이티브 iOS 코드 실행
    NSString *result = @"네이티브에서 처리된 결과";
    
    // JavaScript로 결과 전달
    if ([args count] > 0) {
        KrollCallback *callback = [args objectAtIndex:0];
        [callback call:@[result] thisObject:nil];
    }
}

@end

물론 이런 고급 기능들은 처음에는 어려울 수 있어. 하지만 재능넷 같은 플랫폼에서 경험 많은 개발자들에게 조언을 구하면 훨씬 빠르게 배울 수 있을 거야! 🤝

🧪 테스팅과 디버깅 전략

좋은 앱을 만들려면 철저한 테스트가 필수야! 버그 없는 완벽한 앱을 만들기 위한 테스팅 전략을 알아보자. 🔍

🐛 디버깅 도구 활용

Titanium에서는 다양한 디버깅 도구를 제공해:

// 콘솔 로깅 레벨 설정
Ti.API.setLogLevel(Ti.API.LOG_LEVEL_DEBUG);

// 상세한 디버그 정보
function debugUserAction(action, data) {
    Ti.API.debug(`[USER_ACTION] ${action}: ${JSON.stringify(data)}`);
    
    // 개발 모드에서만 상세 로그 출력
    if (Ti.App.deployType === 'development') {
        console.log('스택 트레이스:', new Error().stack);
    }
}

// 성능 측정
function measurePerformance(functionName, func) {
    var startTime = new Date().getTime();
    
    try {
        var result = func();
        var endTime = new Date().getTime();
        Ti.API.info(`${functionName} 실행 시간: ${endTime - startTime}ms`);
        return result;
    } catch (error) {
        Ti.API.error(`${functionName} 실행 중 에러: ${error.message}`);
        throw error;
    }
}

🧪 단위 테스트 작성

코드의 품질을 보장하기 위해 단위 테스트를 작성하는 것도 중요해:

// 간단한 테스트 프레임워크
var TestFramework = {
    tests: [],
    
    addTest: function(name, testFunction) {
        this.tests.push({
            name: name,
            test: testFunction
        });
    },
    
    runTests: function() {
        var passed = 0;
        var failed = 0;
        
        this.tests.forEach(function(test) {
            try {
                test.test();
                Ti.API.info(`✅ ${test.name} - 통과`);
                passed++;
            } catch (error) {
                Ti.API.error(`❌ ${test.name} - 실패: ${error.message}`);
                failed++;
            }
        });
        
        Ti.API.info(`테스트 결과: ${passed}개 통과, ${failed}개 실패`);
    },
    
    assert: function(condition, message) {
        if (!condition) {
            throw new Error(message || '조건이 false입니다');
        }
    },
    
    assertEqual: function(actual, expected, message) {
        if (actual !== expected) {
            throw new Error(message || `예상값: ${expected}, 실제값: ${actual}`);
        }
    }
};

// 테스트 케이스 작성 예제
TestFramework.addTest('사용자 데이터 검증', function() {
    var user = { name: 'John', email: 'john@example.com' };
    
    TestFramework.assert(user.name.length > 0, '사용자 이름은 비어있을 수 없습니다');
    TestFramework.assert(user.email.includes('@'), '올바른 이메일 형식이어야 합니다');
});

TestFramework.addTest('계산 함수 테스트', function() {
    function add(a, b) {
        return a + b;
    }
    
    TestFramework.assertEqual(add(2, 3), 5, '2 + 3은 5여야 합니다');
    TestFramework.assertEqual(add(-1, 1), 0, '-1 + 1은 0이어야 합니다');
});

// 개발 모드에서만 테스트 실행
if (Ti.App.deployType === 'development') {
    TestFramework.runTests();
}

📱 실제 디바이스 테스트

시뮬레이터나 에뮬레이터에서의 테스트도 중요하지만, 실제 디바이스에서의 테스트가 더 중요해! 성능, 메모리 사용량, 배터리 소모 등을 정확히 측정할 수 있거든.

🚀 앱 배포와 스토어 등록

드디어 앱이 완성되었다면 이제 세상에 공개할 차례야! App Store와 Google Play Store에 앱을 등록하는 과정을 알아보자. 이 과정이 좀 복잡할 수 있지만, 차근차근 따라하면 돼! 🌟

📦 배포용 빌드 만들기

개발용 빌드와 배포용 빌드는 달라. 배포용 빌드는 최적화되고 서명된 버전이야:

# iOS 배포용 빌드
ti build -p ios -T dist-appstore

# Android 배포용 빌드
ti build -p android -T dist-playstore

🍎 App Store 등록 과정

🤖 Google Play Store 등록 과정

📈 앱 스토어 최적화 (ASO)

앱을 만드는 것도 중요하지만, 사람들이 찾을 수 있도록 하는 것도 중요해:

// 앱 내에서 리뷰 요청하기
function requestAppReview() {
    var launchCount = Ti.App.Properties.getInt('app_launch_count', 0);
    var hasRequestedReview = Ti.App.Properties.getBool('has_requested_review', false);
    
    // 10번 이상 사용했고 아직 리뷰 요청을 하지 않았다면
    if (launchCount >= 10 && !hasRequestedReview) {
        var dialog = Ti.UI.createAlertDialog({
            title: '앱이 마음에 드시나요? 😊',
            message: '앱 스토어에서 평점을 남겨주시면 큰 도움이 됩니다!',
            buttonNames: ['나중에', '평점 남기기']
        });
        
        dialog.addEventListener('click', function(e) {
            if (e.index === 1) {
                // 앱 스토어로 이동
                if (Ti.Platform.osname === 'iphone') {
                    Ti.Platform.openURL('https://apps.apple.com/app/id당신의앱ID');
                } else {
                    Ti.Platform.openURL('market://details?id=당신의패키지명');
                }
            }
            Ti.App.Properties.setBool('has_requested_review', true);
        });
        
        dialog.show();
    }
}

🔮 Titanium의 미래와 대안 기술들

기술의 세계는 정말 빠르게 변해. Titanium도 계속 발전하고 있지만, 다른 크로스 플랫폼 기술들과의 경쟁도 치열해. 현재 상황과 미래 전망을 객관적으로 살펴보자! 🔭

📊 현재 크로스 플랫폼 기술 비교

🎯 언제 Titanium을 선택해야 할까?

각 기술마다 장단점이 있으니까, 프로젝트 상황에 맞는 선택이 중요해:

🔮 Titanium의 미래

Titanium은 계속해서 발전하고 있어. 최근 업데이트들을 보면:

💡 실무에서 배운 꿀팁들

이론도 중요하지만 실제 개발에서 부딪히는 문제들과 해결책을 아는 것이 더 중요해! 내가 실무에서 경험한 꿀팁들을 공유해볼게. 🍯

🐛 자주 만나는 문제들과 해결책

// 안전한 객체 접근 패턴
function safeAccess(obj, path, defaultValue) {
    try {
        var keys = path.split('.');
        var current = obj;
        
        for (var i = 0; i < keys.length; i++) {
            if (current === null || current === undefined) {
                return defaultValue;
            }
            current = current[keys[i]];
        }
        
        return current !== undefined ? current : defaultValue;
    } catch (error) {
        Ti.API.warn('안전한 접근 실패: ' + error.message);
        return defaultValue;
    }
}

// 사용 예제
var userName = safeAccess(userObject, 'profile.personal.name', '익명 사용자');

// 병렬 API 요청 처리
function loadDashboardData() {
    var promises = [];
    
    // 여러 API를 동시에 호출
    promises.push(fetchUserProfile());
    promises.push(fetchRecentPosts());
    promises.push(fetchNotifications());
    
    Promise.all(promises).then(function(results) {
        var userProfile = results[0];
        var recentPosts = results[1];
        var notifications = results[2];
        
        updateDashboardUI(userProfile, recentPosts, notifications);
    }).catch(function(error) {
        Ti.API.error('대시보드 로딩 실패: ' + error.message);
        showErrorMessage('데이터를 불러오는 중 오류가 발생했습니다.');
    });
}

// 간단한 캐싱 시스템
var cache = {};
var CACHE_DURATION = 5 * 60 * 1000; // 5분

function getCachedData(key, fetchFunction) {
    var now = new Date().getTime();
    var cached = cache[key];
    
    if (cached && (now - cached.timestamp) < CACHE_DURATION) {
        Ti.API.info('캐시에서 데이터 반환: ' + key);
        return Promise.resolve(cached.data);
    }
    
    return fetchFunction().then(function(data) {
        cache[key] = {
            data: data,
            timestamp: now
        };
        return data;
    });
}

🎯 코드 구조화 베스트 프랙티스

프로젝트가 커질수록 코드 구조가 중요해져. 유지보수하기 쉬운 코드를 작성하는 방법들이야:

// 유틸리티 함수들을 모듈화
// lib/utils.js
exports.formatDate = function(date) {
    return date.toLocaleDateString('ko-KR');
};

exports.validateEmail = function(email) {
    var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return emailRegex.test(email);
};

exports.showLoading = function(message) {
    var indicator = Ti.UI.createActivityIndicator({
        message: message || '로딩 중...',
        style: Ti.UI.ActivityIndicatorStyle.DARK
    });
    indicator.show();
    return indicator;
};

// 컨트롤러에서 사용
var Utils = require('/lib/utils');

function handleFormSubmit() {
    var email = $.emailField.value;
    
    if (!Utils.validateEmail(email)) {
        alert('올바른 이메일 주소를 입력해주세요.');
        return;
    }
    
    var loading = Utils.showLoading('데이터 전송 중...');
    
    submitForm(email).then(function() {
        loading.hide();
        showSuccessMessage('성공적으로 전송되었습니다!');
    }).catch(function(error) {
        loading.hide();
        showErrorMessage('전송에 실패했습니다: ' + error.message);
    });
}

🔒 보안 고려사항

모바일 앱 보안은 정말 중요해. 사용자의 개인정보를 보호하기 위한 기본적인 보안 조치들을 알아보자:

// API 키나 민감한 정보 보호
var Config = {
    // ❌ 절대 하지 말 것: 소스코드에 직접 하드코딩
    // API_KEY: 'sk-1234567890abcdef'
    
    // ✅ 환경변수나 설정 파일 사용
    getApiKey: function() {
        return Ti.App.Properties.getString('api_key', '');
    },
    
    // 서버에서 동적으로 받아오기
    fetchApiConfig: function() {
        return new Promise(function(resolve, reject) {
            var xhr = Ti.Network.createHTTPClient({
                onload: function() {
                    try {
                        var config = JSON.parse(this.responseText);
                        resolve(config);
                    } catch (error) {
                        reject(error);
                    }
                },
                onerror: reject
            });
            xhr.open('GET', 'https://api.example.com/config');
            xhr.send();
        });
    }
};

// 데이터 암호화 (간단한 예제)
function encryptSensitiveData(data) {
    // 실제로는 더 강력한 암호화 라이브러리 사용 권장
    var encrypted = Ti.Utils.base64encode(Ti.Utils.sha256(data + 'secret_salt'));
    return encrypted;
}

// 사용자 입력 검증
function sanitizeInput(input) {
    if (typeof input !== 'string') {
        return '';
    }
    
    // XSS 방지를 위한 기본적인 이스케이프
    return input
        .replace(/&/g, '&')
        .replace(/</g, '<')
        .replace(/>/g, '>')
        .replace(/"/g, '"')
        .replace(/'/g, ''');
}

🎓 학습 리소스와 커뮤니티

Titanium을 마스터하기 위해서는 지속적인 학습이 필요해! 어디서 공부하고 도움을 받을 수 있는지 알아보자. 📚

📖 공식 문서와 가이드

🌐 커뮤니티와 포럼

혼자 공부하기 어려울 때는 커뮤니티의 도움을 받자:

🚀 실전 프로젝트 아이디어

이론만 공부하지 말고 실제 프로젝트를 만들어보면서 실력을 늘려보자:

📈 지속적인 성장을 위한 팁

// 개발 일지 작성 습관
var DevLog = {
    log: function(category, message) {
        var timestamp = new Date().toISOString();
        var logEntry = `[${timestamp}] [${category}] ${message}`;
        
        Ti.API.info(logEntry);
        
        // 로컬에 개발 로그 저장 (선택사항)
        this.saveToFile(logEntry);
    },
    
    saveToFile: function(entry) {
        var logFile = Ti.Filesystem.getFile(
            Ti.Filesystem.applicationDataDirectory, 
            'dev_log.txt'
        );
        
        var existingContent = logFile.exists() ? logFile.read().text : '';
        var newContent = existingContent + entry + '\n';
        
        logFile.write(newContent);
    },
    
    // 주간 회고
    weeklyReview: function() {
        this.log('REVIEW', '이번 주에 배운 것들:');
        this.log('REVIEW', '- 새로운 API 사용법');
        this.log('REVIEW', '- 성능 최적화 기법');
        this.log('REVIEW', '- 디버깅 스킬 향상');
    }
};

// 사용 예제
DevLog.log('FEATURE', 'GPS 기능 구현 완료');
DevLog.log('BUG', '메모리 누수 문제 해결');
DevLog.log('PERFORMANCE', '리스트 렌더링 속도 50% 향상');

🎉 마무리: Titanium으로 꿈을 현실로!

와! 정말 긴 여정이었지? 🏃‍♂️ Titanium의 기초부터 고급 기능까지, 실무 팁부터 미래 전망까지... 정말 많은 내용을 다뤘어!

Titanium은 분명히 강력한 크로스 플랫폼 개발 도구야. JavaScript 하나로 iOS와 Android 앱을 동시에 개발할 수 있다는 건 정말 매력적이지. 특히 웹 개발 경험이 있다면 더욱 빠르게 모바일 앱 개발에 뛰어들 수 있어! 🚀

🎯 핵심 포인트 정리

🚀 다음 단계는?

이제 이론은 충분히 배웠으니 실제로 앱을 만들어보자! 작은 프로젝트부터 시작해서 점점 복잡한 기능들을 추가해나가면 돼. 🎯

그리고 막히는 부분이 있다면 혼자 끙끙대지 말고 도움을 요청해! 재능넷 같은 플랫폼에서는 실무 경험이 풍부한 개발자들로부터 직접 멘토링을 받을 수 있어. 때로는 몇 시간의 멘토링이 며칠간의 삽질을 줄여줄 수 있거든! 😊

💪 마지막 응원 메시지

모바일 앱 개발은 정말 흥미진진한 분야야! 내가 만든 앱을 전 세계 사람들이 사용한다고 생각해봐. 얼마나 멋진 일이야? 🌍

Titanium은 그 꿈을 현실로 만들어줄 수 있는 훌륭한 도구야. 물론 처음에는 어려울 수 있지만, 포기하지 말고 꾸준히 연습하다 보면 어느새 멋진 앱을 만들고 있는 자신을 발견하게 될 거야! 💪

그럼 이제 컴퓨터 앞에 앉아서 첫 번째 Titanium 앱을 만들어보자! 화이팅! 🔥