🎯아이폰 자동화로 실시간 환율💹 보기 - 환율 계산기 위젯 설정 가이드 💸

📲 Scriptable로 환율 계산기 위젯 설정! 스크립트 추가부터 홈 화면 실시간 확인까지 간단한 단계로 완료하세요. 💹 쉽고 빠른 환율 관리!

CONTENTS

• 1️⃣ Scriptable 앱 설치 📲
• 2️⃣ 환율 스크립트 추가하기 📜
• 3️⃣ 위젯에 환율 계산기 추가하기 📌
• 4️⃣ 다크 모드 설정 및 재부팅 🌙
• 5️⃣ 실시간 환율 위젯 활용 팁 🌟
• ❓ 자주 묻는 질문 (Q&A)
• 💥 환율 표시, 환율 계산 위젯을 위한 설정 방법 소개

1️⃣ Scriptable 앱 설치 📲

Scriptable 앱은 아이폰 위젯을 사용자화할 수 있는 강력한 도구입니다.
👉 앱스토어 접속: ‘Scriptable’을 검색해 무료로 다운로드합니다.
👉 앱 실행: 설치 후 Scriptable을 열고 화면 하단의 ‘+’ 버튼을 눌러 새 스크립트를 추가할 준비를 합니다.

---

2️⃣ 환율 스크립트 추가하기 📜

환율 정보를 자동으로 불러와 표시하는 스크립트를 설정하세요.
🔹 스크립트 복사: 제공된 환율 스크립트를 복사합니다.
🔹 스크립트 붙여넣기: Scriptable 앱에서 ‘새 스크립트’를 선택하고 복사한 코드를 붙여넣습니다.
🔹 스크립트 이름 설정: 이름을 ‘Exchange Rate’ 또는 ‘환율 계산기’로 설정해 구분하기 쉽게 합니다.
🔹 완료 후 저장: 우측 상단에서 완료를 눌러 저장합니다.

---

3️⃣ 위젯에 환율 계산기 추가하기 📌

홈 화면에서 바로 확인할 수 있도록 환율 계산기를 위젯으로 설정하세요.
🔹 홈 화면 편집: 아이폰 홈 화면을 길게 누르고 ‘+’ 아이콘을 눌러 Scriptable 위젯을 추가합니다.
🔹 위젯 선택: Scriptable 위젯을 선택하고, 생성한 환율 계산기 스크립트를 지정합니다.
🔹 위젯 크기 설정: 필요에 따라 위젯 크기를 조절하고 실시간 환율 정보를 확인할 수 있도록 합니다.

---

4️⃣ 다크 모드 설정 및 재부팅 🌙

환율 위젯에 다크 모드 또는 라이트 모드를 적용할 수 있습니다.
🔹 다크 모드 설정 확인: Scriptable 내 다크 모드 옵션이 있는지 확인하세요.
🔹 기기 재부팅: 설정 충돌 시 기기를 재부팅하여 문제를 해결할 수 있습니다.
🔹 추가 설정: 단축어 앱으로 자동 재부팅 스케줄을 설정해 사용자 편의를 높일 수 있습니다.

---

5️⃣ 실시간 환율 위젯 활용 팁 🌟

주요 통화 추가: 위젯에서 자주 확인하는 통화를 추가해 개인 맞춤형 환율 정보를 설정하세요.

여행 시 유용: 해외여행 중 실시간 환율을 확인하거나 환전 시 활용하기 좋습니다.

다른 기기 연동: 아이폰뿐 아니라 아이패드, 애플워치와도 연동해 편리하게 환율 정보를 관리할 수 있습니다.

---

❓ 자주 묻는 질문 (Q&A)

Q1: Scriptable 앱은 무료인가요?
A: 네, Scriptable 앱은 무료로 제공되며 일부 고급 기능을 위해서는 유료 결제가 필요할 수 있습니다.

Q2: 환율 데이터는 얼마나 자주 업데이트되나요?
A: Scriptable에서 사용하는 환율 데이터는 실시간으로 갱신되며, 인터넷 연결 시 최신 데이터를 받아옵니다.

Q3: 다크 모드가 적용되지 않으면 어떻게 하나요?
A: 기기를 재부팅하거나 위젯 배경 설정을 조정해 보세요. 일부 기기에서는 재부팅으로 해결될 수 있습니다.

Q4: Scriptable 외 다른 앱으로도 실시간 환율 확인이 가능한가요?
A: 네, 여러 환율 앱이 있지만 Scriptable은 직접 스크립트를 사용해 더 많은 맞춤화가 가능합니다.

Q5: 통화를 추가하고 싶은데, 어떻게 해야 하나요?
A: 스크립트 내 CURRENCIES 목록에 원하는 통화 코드를 추가하면 됩니다.

 

💥 환율 표시, 환율 계산 위젯을 위한 설정 방법 소개

💡 환율 표시 자바스크립트 (Exchange Rate)

// Variables used by Scriptable.
// These must be at the very top of the file. Do not edit.
// icon-color: brown; icon-glyph: magic;

// Configuration
const CONFIG = {
    BASE_CURRENCY: 'KRW',
    AMOUNT: 1000,
    CURRENCIES: ['USD', 'EUR', 'JPY', 'CNY'],
    FLAG_URLS: {
        USD: "https://www.ecb.europa.eu/shared/img/flags/USD.gif",
        EUR: "https://www.countryflags.com/wp-content/uploads/europe-flag-jpg-xl-300x200.jpg",
        JPY: "https://www.ecb.europa.eu/shared/img/flags/JPY.gif",
        CNY: "https://www.ecb.europa.eu/shared/img/flags/CNY.gif"
    },
    DECIMAL_PLACES: {
        USD: 1,
        EUR: 1,
        JPY: 4,
        CNY: 2
    }
};

// Get formatted current date
function getCurrentDate() {
    const now = new Date();
    const year = now.getFullYear();
    const month = String(now.getMonth() + 1).padStart(2, '0');
    const day = String(now.getDate()).padStart(2, '0');
    return `${year}-${month}-${day}`;
}

// Main function
async function main() {
    try {
        const data = await fetchExchangeRates();
        const images = await fetchFlags();
        const widget = await createWidget(data, images);
        
        if (config.runsInWidget) {
            Script.setWidget(widget);
        } else {
            await widget.presentSmall();
        }
    } catch (error) {
        console.error(`Error: ${error}`);
        const errorWidget = createErrorWidget(error);
        Script.setWidget(errorWidget);
    }
    
    Script.complete();
}

// Fetch exchange rates
async function fetchExchangeRates() {
    const url = `https://api.frankfurter.app/latest?amount=${CONFIG.AMOUNT}&from=${CONFIG.BASE_CURRENCY}`;
    const req = new Request(url);
    const res = await req.loadJSON();
    
    if (!res.rates) {
        throw new Error("Invalid data from exchange rate API");
    }
    
    return {
        amount: res.amount || CONFIG.AMOUNT,
        date: getCurrentDate(),
        rates: res.rates
    };
}

// Fetch flag images
async function fetchFlags() {
    const imgRequests = CONFIG.CURRENCIES.map(currency => 
        new Request(CONFIG.FLAG_URLS[currency])
    );
    
    try {
        return await Promise.all(imgRequests.map(req => req.loadImage()));
    } catch (error) {
        console.error('Failed to load some flag images:', error);
        return Array(CONFIG.CURRENCIES.length).fill(null);
    }
}

// Create the main widget
function createWidget(data, images) {
    const widget = new ListWidget();
    widget.setPadding(8, 8, 8, 8);
    
    // Theme setup
    const isDarkMode = Device.isUsingDarkAppearance();
    const theme = {
        background: isDarkMode ? new Color("1C1C1E") : new Color("FFFFFF"),
        title: new Color("0EB4FC"),
        text: isDarkMode ? new Color("FFFFFF") : new Color("000000"),
        subtext: new Color("A0A0A0")
    };
    
    widget.backgroundColor = theme.background;
    
    // Title stack
    const titleStack = widget.addStack();
    titleStack.layoutVertically();
    
    const titleText = titleStack.addText(`환율 (${data.date})`);
    titleText.font = Font.boldSystemFont(14);
    titleText.textColor = theme.title;
    
    titleStack.addSpacer(10);
    
    // Currency rows
    const currencyStack = titleStack.addStack();
    currencyStack.layoutVertically();
    
    CONFIG.CURRENCIES.forEach((currency, index) => {
        const amount = (data.amount / data.rates[currency]).toFixed(CONFIG.DECIMAL_PLACES[currency] || 2);
        addCurrencyRow(
            currencyStack,
            amount,
            currency,
            images[index],
            theme
        );
    });
    
    return widget;
}

// Add a currency row to the widget
function addCurrencyRow(stack, amount, currency, flagImage, theme) {
    const rowStack = stack.addStack();
    rowStack.layoutHorizontally();
    rowStack.centerAlignContent();
    
    if (flagImage) {
        const flag = rowStack.addImage(flagImage);
        flag.imageSize = new Size(20, 20);
        rowStack.addSpacer(4);
    }
    
    const amountText = rowStack.addText(`${amount} `);
    amountText.font = Font.boldSystemFont(20);
    amountText.textColor = theme.text;
    
    const currencyText = rowStack.addText(currency);
    currencyText.font = Font.boldSystemFont(20);
    currencyText.textColor = theme.subtext;
    
    stack.addSpacer(4);
    
    return rowStack;
}

// Create an error widget
function createErrorWidget(error) {
    const widget = new ListWidget();
    widget.backgroundColor = new Color("FF0000", 0.3);
    
    const errorText = widget.addText("Error loading exchange rates");
    errorText.font = Font.boldSystemFont(12);
    errorText.textColor = new Color("FF0000");
    
    return widget;
}

// Run the main function
await main();

 

💡 환율 계산 자바스크립트 (Exchange Calc) : 100만원 단위로 설정해두었으며, 56번 항을 수정하면 다른 원단위로도 계산가능합니다.

// Variables used by Scriptable.
// These must be at the very top of the file. Do not edit.
// icon-color: brown; icon-glyph: magic;

// Configuration
const CONFIG = {
    BASE_CURRENCY: 'KRW',
    AMOUNT: 1000,
    CURRENCIES: ['USD', 'EUR', 'JPY', 'CNY'],
    FLAG_URLS: {
        USD: "https://www.ecb.europa.eu/shared/img/flags/USD.gif",
        EUR: "https://www.countryflags.com/wp-content/uploads/europe-flag-jpg-xl-300x200.jpg",
        JPY: "https://www.ecb.europa.eu/shared/img/flags/JPY.gif",
        CNY: "https://www.ecb.europa.eu/shared/img/flags/CNY.gif"
    },
    DECIMAL_PLACES: {
        USD: 1,
        EUR: 1,
        JPY: 4,
        CNY: 2
    }
};

// Get formatted current date
function getCurrentDate() {
    const now = new Date();
    const year = now.getFullYear();
    const month = String(now.getMonth() + 1).padStart(2, '0');
    const day = String(now.getDate()).padStart(2, '0');
    return `${year}-${month}-${day}`;
}

// Main function
async function main() {
    try {
        const data = await fetchExchangeRates();
        const images = await fetchFlags();
        const widget = await createWidget(data, images);
        
        if (config.runsInWidget) {
            Script.setWidget(widget);
        } else {
            await widget.presentSmall();
        }
    } catch (error) {
        console.error(`Error: ${error}`);
        const errorWidget = createErrorWidget(error);
        Script.setWidget(errorWidget);
    }
    
    Script.complete();
}

// Fetch exchange rates
async function fetchExchangeRates() {
    const url = `https://api.frankfurter.app/latest?amount=${CONFIG.AMOUNT}&from=${CONFIG.BASE_CURRENCY}`;
    const req = new Request(url);
    const res = await req.loadJSON();
    
    if (!res.rates) {
        throw new Error("Invalid data from exchange rate API");
    }
    
    return {
        amount: res.amount || CONFIG.AMOUNT,
        date: getCurrentDate(),
        rates: res.rates
    };
}

// Fetch flag images
async function fetchFlags() {
    const imgRequests = CONFIG.CURRENCIES.map(currency => 
        new Request(CONFIG.FLAG_URLS[currency])
    );
    
    try {
        return await Promise.all(imgRequests.map(req => req.loadImage()));
    } catch (error) {
        console.error('Failed to load some flag images:', error);
        return Array(CONFIG.CURRENCIES.length).fill(null);
    }
}

// Create the main widget
function createWidget(data, images) {
    const widget = new ListWidget();
    widget.setPadding(8, 8, 8, 8);
    
    // Theme setup
    const isDarkMode = Device.isUsingDarkAppearance();
    const theme = {
        background: isDarkMode ? new Color("1C1C1E") : new Color("FFFFFF"),
        title: new Color("0EB4FC"),
        text: isDarkMode ? new Color("FFFFFF") : new Color("000000"),
        subtext: new Color("A0A0A0")
    };
    
    widget.backgroundColor = theme.background;
    
    // Title stack
    const titleStack = widget.addStack();
    titleStack.layoutVertically();
    
    const titleText = titleStack.addText(`환율 (${data.date})`);
    titleText.font = Font.boldSystemFont(14);
    titleText.textColor = theme.title;
    
    titleStack.addSpacer(10);
    
    // Currency rows
    const currencyStack = titleStack.addStack();
    currencyStack.layoutVertically();
    
    CONFIG.CURRENCIES.forEach((currency, index) => {
        const amount = (data.amount / data.rates[currency]).toFixed(CONFIG.DECIMAL_PLACES[currency] || 2);
        addCurrencyRow(
            currencyStack,
            amount,
            currency,
            images[index],
            theme
        );
    });
    
    return widget;
}

// Add a currency row to the widget
function addCurrencyRow(stack, amount, currency, flagImage, theme) {
    const rowStack = stack.addStack();
    rowStack.layoutHorizontally();
    rowStack.centerAlignContent();
    
    if (flagImage) {
        const flag = rowStack.addImage(flagImage);
        flag.imageSize = new Size(20, 20);
        rowStack.addSpacer(4);
    }
    
    const amountText = rowStack.addText(`${amount} `);
    amountText.font = Font.boldSystemFont(20);
    amountText.textColor = theme.text;
    
    const currencyText = rowStack.addText(currency);
    currencyText.font = Font.boldSystemFont(20);
    currencyText.textColor = theme.subtext;
    
    stack.addSpacer(4);
    
    return rowStack;
}

// Create an error widget
function createErrorWidget(error) {
    const widget = new ListWidget();
    widget.backgroundColor = new Color("FF0000", 0.3);
    
    const errorText = widget.addText("Error loading exchange rates");
    errorText.font = Font.boldSystemFont(12);
    errorText.textColor = new Color("FF0000");
    
    return widget;
}

// Run the main function
await main();

Scriptable 앱에 Exchange Rate와 Calc 코드를 각각 붙여넣기 해주시고 해당이름으로 저장해주세요.

아이폰 환율 위젯을 작성한 예시입니다. Run Script를 클릭하면 위젯 설치 전 결과를 확인 가능합니다.

아이폰에서 Scriptable 앱을 사용하여 환율표시, 환율 계산 코드를 각각 작성한 후 Run Scipt를 클릭해서 명령이 실행되는지 확인 가능합니다.

아이폰 바탕화면에서 위젯 편집을 누르시고, Scriptable 앱을 선택해 주신 후 위젯 편집을 클릭하여 해당 스크립트를 선택해주세요.

아이폰 바탕화면에 Scriptable 앱을 사용하여 환율 위젯을 나란히 설치한 모습입니다.

이제 아이폰에서 실시간 환율 위젯을 쉽게 확인하고 활용해 보세요! 궁금한 점은 언제든 댓글로 남겨주세요. 😊