html로 번역기 만들어 보기 api 연동 필수

🌐 한글 → 다국어 번역기

번역할 언어 선택 일본어 🇯🇵 영어 🇺🇸 중국어 🇨🇳 스페인어 🇪🇸 프랑스어 🇫🇷 번역할 한글 입력

여기에 번역 결과가 표시됩니다

<style>
  .translator-box {
    max-width: 600px;
    margin: 20px auto;
    padding: 20px;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
    background-color: #fff;
  }

  .translator-box h2 {
    font-size: 1.5em;
    margin-bottom: 15px;
    text-align: center;
  }

  label {
    font-weight: bold;
    margin-top: 10px;
    display: block;
  }

  textarea, select {
    width: 100%;
    padding: 12px;
    font-size: 1em;
    margin-top: 8px;
    border-radius: 8px;
    border: 1px solid #ccc;
    resize: vertical;
    box-sizing: border-box;
  }

  button {
    margin-top: 15px;
    padding: 12px;
    font-size: 1em;
    border: none;
    background-color: #0078FF;
    color: white;
    border-radius: 8px;
    cursor: pointer;
    width: 100%;
  }

  button:hover {
    background-color: #005fcc;
  }

  #translatedText {
    margin-top: 20px;
    font-size: 1.1em;
    background: #f7f7f7;
    padding: 15px;
    border-radius: 8px;
    min-height: 50px;
    white-space: pre-wrap;
  }
</style>

<div class="translator-box">
  <h2>🌐 한글 → 다국어 번역기</h2>

  <label for="languageSelect">번역할 언어 선택</label>
  <select id="languageSelect">
    <option value="ja">일본어 🇯🇵</option>
    <option value="en">영어 🇺🇸</option>
    <option value="zh">중국어 🇨🇳</option>
    <option value="es">스페인어 🇪🇸</option>
    <option value="fr">프랑스어 🇫🇷</option>
  </select>

  <label for="koreanText">번역할 한글 입력</label>
  <textarea id="koreanText" placeholder="여기에 번역할 한국어 문장을 입력하세요"></textarea>

  <button onclick="translateText()">번역하기</button>

  <div id="translatedText">여기에 번역 결과가 표시됩니다</div>
</div>

<script>
  async function translateText() {
    const text = document.getElementById("koreanText").value;
    const targetLang = document.getElementById("languageSelect").value;

    if (!text.trim()) {
      document.getElementById("translatedText").innerText = "번역할 내용을 입력해 주세요.";
      return;
    }

    document.getElementById("translatedText").innerText = "번역 중입니다...";

    try {
      const response = await fetch("https://translate.astian.org/translate", {
        method: "POST",
        body: JSON.stringify({
          q: text,
          source: "ko",
          target: targetLang,
          format: "text"
        }),
        headers: { "Content-Type": "application/json" }
      });

      const data = await response.json();
      document.getElementById("translatedText").innerText = data.translatedText;
    } catch (error) {
      document.getElementById("translatedText").innerText = "⚠️ 번역에 실패했습니다. 다시 시도해 주세요.";
      console.error("번역 오류:", error);
    }
  }
</script>

🧩 특징 요약

API를 연동해야 사용 가능합니다 : )

기능설명

🌍 다국어 지원	일본어, 영어, 중국어, 스페인어, 프랑스어
🎨 디자인	예쁜 카드형 UI + 반응형
🧠 UX	입력 유효성 검사, 번역 중 메시지, 에러 처리
💯 작동성	신뢰 가능한 서버(translate.astian.org) 사용