글로벌 기업은 홈페이지에서 영어 번역을 어떻게 제공할까?

2024년 12월 21일 GDG DevFest 송도 발표자료 입니다.

에어프레미아는 다양한 국가의 고객이 탑승하는 항공사 입니다. 그리고 글로벌 서비스는 다국어 제공이 필수입니다.
에어프레미아가 다국어를 잘 관리하기위해 했던 고민과 경험, 노하우를 공유합니다.

Transcript

1. Ӗ۽ߥ ӝস਷ കಕ੉૑ীࢲ ৔য ߣ৉ਸ যڌѱ ઁҕೡө? Incheon / Songdo ীয೐ۨ޷ই ەझ / Android GDE ੉थ޹
2. (അ) ীয೐ۨ޷ই ەझ ೐ۿ౟ ݒפ੷ (അ) GDE Android Korea (੹) ߛ௼࢟۞٘ ೐ۿ౟ ݒפ੷ (੹) ٘ۄ݃ঙஹಌפ উ٘۽੉٘ ѐߊ੗ ੉थ޹
3. (അ) ীয೐ۨ޷ই ەझ ೐ۿ౟ ݒפ੷ (അ) GDE Android Korea (੹) ߛ௼࢟۞٘ ೐ۿ౟ ݒפ੷ (੹) ٘ۄ݃ঙஹಌפ উ٘۽੉٘ ѐߊ੗ ੉थ޹
4. ীয೐ۨ޷ইۆ?
5. ೦ҕࢎח… Ӗ۽ߥ ࢲ࠺झ
6. ীয೐ۨ޷ইח… ب௡ ఑थё 35% LA ఑थё 45% SFO ఑थё 60% ৻Ҵੋ
7. ৈ۞ Ҵоীࢲ ࢎਊೞח Ӗ۽ߥ ࢲ࠺झח… ׮Ҵয ࢲ࠺झ ೙ࣻ ীয೐ۨ޷ইח ೠ/৔/ੌ ঱য ઁҕ ઺ 🇰🇷 🇺🇸 🇯🇵
8. Incheon / Songdo ীয೐ۨ޷ই੄ ׮Ҵয ࢲ࠺झ
9. Crowdinਵ۽ ׮Ҵয ҙܻೞӝ ݾର ӝઓ ׮Ҵয ҙܻ ߑߨҗ ѐࢶ ҅ദ Strapi۽ Crowdin ױ੼ ࠁ৮ೞӝ ݃ޖܻ
10. ӝઓ ׮Ҵয ҙܻ ߑߨҗ ѐࢶ ҅ദ
11. ӝࠄ੸ੋ ׮Ҵয ҙܻ ߑߨ 1 key-value ഋधਵ۽ ޙҳ ੷੢ { "booking_departure": "оחզ", "booking_schedule": "ੌ੿ࢶఖ", "booking_select": "ੌ੿ਸ ࢶఖ೧ ઱ࣁਃ.", "booking_done": "৘ড৮ܐ”, }
12. ӝࠄ੸ੋ ׮Ҵয ҙܻ ߑߨ 2 э਷ key۽ ׮ܲ ঱য value ੷੢ { "booking_departure": "оחզ", "booking_schedule": "ੌ੿ࢶఖ", "booking_select": "ੌ੿ਸ ࢶఖ೧ ઱ࣁਃ.", "booking_done": "৘ড৮ܐ”, } { "booking_departure": “Departure Date", "booking_schedule": "Select fare", "booking_select": "Select the schedule.", "booking_done": "successfully booked", } 🇰🇷 🇺🇸
13. ӝࠄ੸ੋ ׮Ҵয ҙܻ ߑߨ 3 ঱য, key чਸ ֈѹ ਗೞח valueী ੽Ӕ { "booking_departure": "оחզ", "booking_schedule": "ੌ੿ࢶఖ", "booking_select": "ੌ੿ਸ ࢶఖ೧ ઱ࣁਃ.", "booking_done": "৘ড৮ܐ”, } { "booking_departure": “Departure Date", "booking_schedule": "Select fare", "booking_select": "Select the schedule.", "booking_done": "successfully booked", } ko, booking_departure en, booking_departure
14. ীয೐ۨ޷ই੄ ӝઓ ׮Ҵয ҙܻ ߑߨ key-value
15. ীয೐ۨ޷ই੄ ӝઓ ׮Ҵয ҙܻ ߑߨ ੗୓ য٘޹ key-value
16. <p> <fmt:message key=‘home.second.html.5'/> <span><fmt:message key='home.second.html.6'/></span> </p> JSPীࢲ fmt కӒ۽ ׮Ҵয key ੽Ӕ
17. ӝઓ ׮Ҵয ҙܻ ߑߨ੄ ޙઁ੼ 1. key-valueо ׮Ҵযܳ ࢎਊೞח ೐ۿ౟ী হ׮. 
 adminী оࢲ ࠊঠೞפ ௏٘ оةࢿ ೞۅ. 2. ডҙ э੉ ӟ ޙҳب ޙ੢ ױਤ۽ ١۾غয ੓য ഝਊ੉ য۵׮. 3. ޙҳ ߸҃ ൤झషܻо হ׮.
18. ߄ԲҊ र਷ ݽण 1. key-valueо ׮Ҵযܳ ࢎਊೞח ೐ۿ౟ী হ׮. key-valueܳ ೐ۿ౟ীࢲ ߄۽ ࠅ ࣻ ੓ب۾ ׮Ҵয ࣗझ ׮਍۽٘ 2. ডҙ э੉ ӟ ޙҳب ޙ੢ ױਤ۽ ١۾غয ੓য ഝਊ੉ য۵׮. static ੢ޙ਷ md۽ ҙܻ 3. ޙҳ ߸҃ ൤झషܻо হ׮. ־о, ঱ઁ, যڌѱ ߸҃೮ח૑ ൤झషܻ ҙܻ
19. ૒੽ ݅٘۰ݶ… key-value ࢲߡ ҙܻ ч ੽Ӕ api য٘޹ (json/md ݣ౭ನݘ, ӂೠҙܻ, ൤झషܻ)
20. key-value ࢲߡ ҙܻ ч ੽Ӕ api য٘޹ (json/md ݣ౭ನݘ, ӂೠҙܻ, ൤झషܻ) 🤯 ૒੽ ݅٘۰ݶ…
21. ীয೐ۨ޷ইח… 💸😎 ࣛܖ࣌ ॳ੗!
22. ࣛܖ࣌ Ѩష
23. ࣛܖ࣌ ࢶ੿
24. Crowdinਵ۽ ׮Ҵয ҙܻೞӝ
25. Crowdin ӝמ source ҙܻ ߣ৉ بҳ ӂೠ ҙܻ ੗زച بҳ (api, ೒۞Ӓੋ) ӝఋ ӝמ
26. sourceۆ? ߣ৉ೞӝ ੹ ਗޙ key-value ૒੽ ੘ࢿ ೙ਃ { "booking_departure": "оחզ", "booking_schedule": "ੌ੿ࢶఖ", "booking_select": "ੌ੿ਸ ࢶఖ೧ ઱ࣁਃ.", "booking_done": "৘ড৮ܐ”, }
27. source ҙܻ json, csv, xml, md ׮নೠ ನݘ ૑ਗ
28. source ҙܻ keyо হח mdח ޙ੢ ױਤ۽ ߣ৉ೡ ࣻ ੓ب۾ ੜۄષ
29. ߣ৉ بҳ (ী٣ఠ)
30. ߣ৉ بҳ (ী٣ఠ) key ࢶఖ
31. ߣ৉ بҳ (ী٣ఠ) key ࢶఖ ߣ৉
32. ߣ৉ بҳ (ী٣ఠ) key ࢶఖ ߣ৉ ൤झషܻ
33. ӂೠ ҙܻ owner admin developer translator proofreader (җӘ) (ޖઁೠ) Manager 1 Manager 2 Translator 1 Translator 2
34. ੗زച بҳ API CLI ೒۞Ӓੋ
35. ੗زച بҳ API CLI ೒۞Ӓੋ ݽٚ য٘޹ ੘স API۽ оמ
36. ੗زച بҳ API CLI ೒۞Ӓੋ
37. ੗زച بҳ API CLI ೒۞Ӓੋ ఋ بҳ৬ ా೤/ো҅
38. ӝఋ ӝמ AI ߣ৉ ઁউ झ௼ܽࢫ ૓೯ ҙܻ
39. ӝఋ ӝמ AI ߣ৉ ઁউ झ௼ܽࢫ ૓೯ ҙܻ
40. ӝఋ ӝמ AI ߣ৉ ઁউ झ௼ܽࢫ ૓೯ ҙܻ keyী झ௼ܽࢫ ١۾
41. ӝఋ ӝמ AI ߣ৉ ઁউ झ௼ܽࢫ ૓೯ ҙܻ
42. Crowdinਵ۽ ׮Ҵয ҙܻೞӝ POо ೠҴয Source স۽٘ (csv) ೐ۿ౟ীࢲ csv ׮਍۽٘, json ౵य ߣ৉ ׮Ҵয ࢎਊೞӝ
43. ׮Ҵয ࣗझ ߉ӝ POо ೠҴয Source স۽٘ (csv) ೐ۿ౟ীࢲ csv ׮਍۽٘, json ౵य ߣ৉ ׮Ҵয ࢎਊೞӝ
44. ׮Ҵয ࣗझ ߉ӝ echo ">> 🌐 Download from Crowdin” # Download source files echo ">> 🇰🇷 Download source files" crowdin download sources --verbose # Download translations echo ">> 🌐 Download translations" crowdin download --verbose # Execute the script node ./scripts/generate-crowdin.js async function convertCsvToJson() { const fileNameArr = [koFileName, enFileName, jaFileName]; console.info(">> 🔧 JSON ߸ജ द੘”); fileNameArr.forEach((fileName) => { Papa.parse(fs.readFileSync(`${fileName}.csv`, "utf8"), { complete: (results) => { const data = {}; results.data.forEach((row) => { const key = row[0].replace(/[\b]/g, ""); // Remove backspace const value = row[1] .replace(/[\b]/g, "") .replace(/\\n/g, "<br />"); // Convert Line Break data[key] = value; }); fs.writeFileSync(`${fileName}.json`, JSON.stringify(data)); }, }); }); console.info(">> 🚀 JSON ߸ജ ৮ܐ"); } CLI۽ ߉Ҋ json ߸ജ
45. ೐ۿ౟ীࢲ ׮Ҵয ࢎਊೞӝ POо ೠҴয Source স۽٘ (csv) ೐ۿ౟ীࢲ csv ׮਍۽٘, json ౵य ߣ৉ ׮Ҵয ࢎਊೞӝ
46. ӝࠄ੸ੋ ׮Ҵয ҙܻ ߑߨ ঱য, key чਸ ֈѹ ਗೞח valueী ੽Ӕ { "booking_departure": "оחզ", "booking_schedule": "ੌ੿ࢶఖ", "booking_select": "ੌ੿ਸ ࢶఖ೧ ઱ࣁਃ.", "booking_done": "৘ড৮ܐ”, } { "booking_departure": “Departure Date", "booking_schedule": "Select fare", "booking_select": "Select the schedule.", "booking_done": "successfully booked", } ko, booking_departure en, booking_departure
47. ׮Ҵয ࢎਊ੄ ೨ब ঱য, key чਸ ֈѹ ਗೞח valueী ੽Ӕ { "booking_departure": "оחզ", "booking_schedule": "ੌ੿ࢶఖ", "booking_select": "ੌ੿ਸ ࢶఖ೧ ઱ࣁਃ.", "booking_done": "৘ড৮ܐ”, } { "booking_departure": “Departure Date", "booking_schedule": "Select fare", "booking_select": "Select the schedule.", "booking_done": "successfully booked", } ko, booking_departure en, booking_departure
48. ׮Ҵয ࢎਊ੄ ೨ब ঱য, key чਸ ֈѹ ਗೞח valueী ੽Ӕ
49. key ࢎਊ <PageTitle title={dictionary.services_purchase} category={dictionary.services_additional} /> import webKo from "@/dictionaries/ko/web.json"; loadWeb = (lang: Locale) => { if (lang === "ko") { return webKo; } if (lang === "en") { return webEn; } }; import json
50. valueী ߸ࣻ ઱ੑ <p> {t(“username_hello”, { username: ( <span className="text-orange"> {user?.firstName} {user?.lastName} </span> ), })} </p> “username_hello”: "উ֞ೞࣁਃ {{username}}ש”, {{ }} ডࣘযী ߸ࣻܳ ઱ੑೞח hook ઁ੘
51. ঱য ౸ױ pathী ঱য௏٘ ನೣ airpremia.com/ko/somePath airpremia.com/en/somePath
52. pathী ঱য௏٘ ನೣ 📁 [lang] airpremia.com/ko/somePath airpremia.com/en/somePath export default function Layout({ children, params, }: { children: React.ReactNode; params: { lang: Locale }; }) ঱য ౸ױ
53. pathী ঱য௏٘ হਵݶ Middlewareীࢲ ౸ױೞҊ redirect airpremia.com/somePath ঱য ౸ױ
54. pathী ঱য௏٘ হਵݶ Middlewareীࢲ ౸ױೞҊ redirect airpremia.com/somePath if (!pathUtil.hasPathLocale(pathname)) { const localeFromEnv = getLocaleFromEnv(request); const url = new URL( `/${localeFromEnv}${pathname}?${searchParams}`, request.url ); return NextResponse.redirect(url); } function getLocaleFromEnv(request: NextRequest) { const locales: string[] = i18n.locales; const languages = new Negotiator().languages(locales); return match(languages, locales, i18n.default); } export const i18n = { default: "ko", locales: ["ko", "en", "ja"], } as const; ঱য ౸ױ
55. Crowdin ױ੼ mdী html ֍ਵݶ ઙઙ ߡӒ पदр ߸҃(over-the-air) ࠺ऱ׮ ޙҳ ߸҃ೞ۰ݶ ߓನ ೙ਃ key ࢤࢿ оמೠ ݒפ੷ ࣻ ੸਺
56. Crowdin ױ੼ mdী html ֍ਵݶ ઙઙ ߡӒ पदр ߸҃(over-the-air) ࠺ऱ׮ ޙҳ ߸҃ೞ۰ݶ ߓನ ೙ਃ key ࢤࢿ оמೠ ݒפ੷ ࣻ ੸਺ 🤔 ੗୓ઁ੘ হ੉ ױ੼ਸ ࠁ৮ೡ ࣻ হਸө?
57. ੋझ఺ Headless CMS
58. Strapi۽ Crowdin ױ੼ ࠁ৮ೞӝ
59. Strapiۆ? ੋझ఺ Headless CMS ৈ۞ CMS ࣛܖ࣌ ઺ ೞա
60. CMS? ੋझ఺ Headless CMS Content Management System ৈ۞ CMS ࣛܖ࣌ ઺ ೞա Content DB & য٘޹
61. Headless? ੋझ఺ Headless CMS ٣੗ੋ হח CMS ৈ۞ CMS ࣛܖ࣌ ઺ ೞա Data݅ ࢲࡂ
62. ੋझ఺? ੋझ఺ Headless CMS ਋ܻ ੋ೐ۄী ࢸ஖೧ࢲ ࢎਊ ৈ۞ CMS ࣛܖ࣌ ઺ ೞա CMS ࢎਊী ؀೧ ࠺ਊ X
63. Strapi۽ Crowdin ױ੼ ࠁ৮ೞӝ ׮Ҵয ޙҳܳ Strapi۽ ࢲࡂೞӝ
64. Strapi ੢੼ ߸҃ द ߓನ হ੉ पदр ߈৔ ਋ܻ ੋ೐ۄীࢲ ઁҕೞפ ࠺ਊ੉ श ݒפ੷ ࣻ ޖઁೠ ׮Ҵয ޙҳܳ Strapi۽ ࢲࡂೞӝ
65. Crowdin-Strapi۽ ׮Ҵয ҙܻೞӝ Crowdin ా೧ࢲ ׮Ҵয json, md ߉ӝ ೐ۿ౟ীࢲ strapiী api۽ ਃ୒೧ࢲ ׮Ҵয ߉Ҋ ࢎਊ strapiী ࠂࠢ
66. Crowdin ా೧ࢲ ׮Ҵয json, md ߉ӝ strapiী ࠂࠢ const response = await fetch(`${path}?${params.toString()}`, { headers: { "Content-Type": "application/json", Authorization: `Bearer ${TOKEN}`, }, } Strapi api ೐ۿ౟ীࢲ strapiী api۽ ਃ୒೧ࢲ ׮Ҵয ߉Ҋ ࢎਊ
67. Strapi ׮Ҵয ࢲࡂ੄ ױ੼ 1 Crowdinীࢲ ࠂࠢ੉ ӈଳ׮ Sourceо Crowdin, Strapi 2ѐৈࢲ ഒࢶ
68. Strapi ׮Ҵয ࢲࡂ੄ ױ੼ 1 Crowdinীࢲ ࠂࠢ੉ ӈଳ׮ Sourceо Crowdin, Strapi 2ѐৈࢲ ഒࢶ Crowdin-Strapi زӝച ೒۞Ӓੋ दب ৘੿
69. Strapi ׮Ҵয ࢲࡂ੄ ױ੼ 2 Strapi ࢲߡ ౟ې೗ ҙܻ ݽٚ ޙҳ ࢲࡂ द (ࢲ࠺झ ౟ې೗ * N)੄ ࠗೞ
70. Strapi ׮Ҵয ࢲࡂ੄ ױ੼ 2 ই૒਷ ੌࠗ݅ ࢲࡂ Strapi ࢲߡ ౟ې೗ ҙܻ ݽٚ ޙҳ ࢲࡂ द (ࢲ࠺झ ౟ې೗ * N)੄ ࠗೞ
71. ݃ޖܻ
72. ীয೐ۨ޷ই੄ ӝઓ ׮Ҵয ҙܻ ߑߨ ੗୓ য٘޹ key-value
73. ӝઓ ׮Ҵয ҙܻ ߑߨ੄ ޙઁ੼ 1. key-valueо ׮Ҵযܳ ࢎਊೞח ೐ۿ౟ী হ׮. 
 adminী оࢲ ࠊঠೞפ ௏٘ оةࢿ ೞۅ. 2. ডҙ э੉ ӟ ޙҳب ޙ੢ ױਤ۽ ١۾غয ੓য ഝਊ੉ য۵׮. 3. ޙҳ ߸҃ ൤झషܻо হ׮.
74. ࣛܖ࣌ ࢶ੿
75. ীয೐ۨ޷ই੄ ׮Ҵয ҙܻ ߑߨ ੿ܻ POо ೠҴয Source স۽٘ (csv) ೐ۿ౟ীࢲ csv ׮਍۽٘, json ౵य ߣ৉ ׮Ҵয ࢎਊೞӝ
76. Crowdin ױ੼ mdী html ֍ਵݶ ઙઙ ߡӒ पदр ߸҃(over-the-air) ࠺ऱ׮ ޙҳ ߸҃ೞ۰ݶ ߓನ ೙ਃ key ࢤࢿ оמೠ ݒפ੷ ࣻ ੸਺
77. ੋझ఺ Headless CMS
78. Crowdin-Strapi۽ ׮Ҵয ҙܻೞӝ Crowdin ా೧ࢲ ׮Ҵয json, md ߉ӝ ೐ۿ౟ীࢲ strapiী api۽ ਃ୒೧ࢲ ׮Ҵয ߉Ҋ ࢎਊ strapiী ࠂࠢ
79. Strapi ׮Ҵয ࢲࡂ੄ ױ੼ Crowdinীࢲ ࠂࠢ੉ ӈଳ׮ Sourceо Crowdin, Strapi 2ѐৈࢲ ഒࢶ Strapi ࢲߡ ౟ې೗ ҙܻ ݽٚ ޙҳ ࢲࡂ द (ࢲ࠺झ ౟ې೗ * N)੄ ࠗೞ
80. ૑Әө૑… Ӗ۽ߥ ࢲ࠺झੋ ীয೐ۨ޷ইо ׮Ҵযܳ ઁҕೞӝਤ೧ ೮؍ Ҋ޹ਸ ҕਬ 🧐
81. ࠺तೞѱ ׮Ҵয ҙܻܳ Ҋ޹ೞदח ٜ࠙੉ ޖ঺ਸ Ҋ۰೧ঠ ೡ૑ ఃਕ٘ܳ ঳যо࣑ਵݶ ੉ ߊ಴ীࢲ… 🥰
82. Incheon / Songdo (ѐߊ੗ ழܻয, ӝࣿ, ৈ೯) ੷੄ ׮ܲ ࣁ࣌ب ݅աࠁࣁਃ