Crescendo Lab — MAAC 升級跨國產品之路
漸強實驗室 Crescendo Lab，自 2017 年成立以來，已服務近三百間品牌，並於今年積極擴展海外市場，不僅與全球 CDP 領導品牌 Treasure Data 合作，同時也於今年進行品牌識別重塑 (Rebranding)，正式宣告前進海外的計畫與決心。
- 漸強實驗室攜手全球 CDP 領導品牌 Treasure Data 拓亞洲行銷版圖
- 航向湛藍大海，漸強實驗室換新 Logo 瞄準泰國市場
- Crescendo Lab : 品牌識別重塑 Rebranding而前進海外市場，最不可或缺的產品本身 MAAC 也經歷了一番調整與升級，從 Q2 的研究與規劃、到 Q3 的開發及測試調整，終於在 9 月正式對外發佈支援多國的 MAAC 。
想透過這篇文章和大家分享，2021 MAAC 升級為跨國產品的一些經驗。🌏
目錄▍聽到要做跨國產品，你知道需要做哪些調整嗎？G11N? I18N? L10N?
I18N 國際化
L10N 在地化
語言屬於國際化還是在地化呢？▍關於語言我們下了點功夫…建立翻譯管理文件，提升團隊溝通效率
語言管理文件
翻譯協作流程▍實際開發和測試，是另一場硬仗的開端…心酸血淚史分享
各語言文案長度不一
同 1 個欄位有 3 個字元
多語言圖片的處理小結
▍聽到要做跨國產品，你知道需要做哪些調整嗎？G11N? I18N? L10N? 🤔
G11N 是 Globalization 全球化的縮寫，11代表G~N中間一共有11個字母。
以此類推，I18N 是 Internalization 國際化的縮寫，而 L10N 則是 Localization 在地化的縮寫。
在 G11N 全球化中，包含著 I18N 國際化、L10N 在地化。在這次 MAAC 的調整中，我們不僅針對 I18N 國際化進行調整，也鎖定日泰市場做了相關的 L10N 在地化。
I18N 國際化
首先，I18N 國際化的部分，代表在系統中制定一套通用的規則，以符合各地區的運用，包含時區、電話/手機(國碼) …等。
- 時區
品牌可於串接 LINE OA 的過程，選擇所服務的用戶的所在地區。在系統中，針對觸發類型的功能，像是指定時間的推播、自動回應等，都會按照服務用戶所在的地區來顯示對應的時區。
讓操作者在設定的時候，只要按照需求設定時間，而不需要額外選擇時區或進行時間的轉換。
時區
- List of tz database time zones
- List of UTC time offsets
L10N 在地化
接著，L10N 在地化的部分，代表在系統中為了符合當地的使用習慣而因地制宜的內容，這邊主要是地區設定 Locales，包含日期寫法、日曆類型、貨幣金額格式、小數點符號、千分位符號、文字語序…etc.。
除了一些地區習慣需要確認和調整，也需要注意現有的功能在欲進入的市場是否適用。若有不適用的功能、或該市場不支援的情境，則要進一步去討論是否需要隱藏該功能，或進行對應的調整。
當時針對呈現習慣，我們也花了點時間查找資料，也有訪問新加入的夥伴，分享兩個我覺得需要注意的地方。
- 日期時間
當時團隊在研究日期與時間的呈現方式時，發現各國和各系統呈現方式不太一樣，包含年月日的呈現順序 YYYY-MM-DD 或 MM-DD-YYYY 、呈現樣式 YYYY-MM-DD 或 YYYY/MM/DD、時間規則 12小時制 或 24 小時制…等。
最後，考量未來的擴充彈性，我們採用 國際標準 ISO 8601的呈現方式，日期使用 YYYY-MM-DD ，時間則使用 24 小時制。 - 標點符號
系統文案雖然不像文章一樣文字那麼多，但也有部分說明文案的段落，因此也有了解一下標點符號的使用習慣。
日文常見的標點符號和中文的類似，但也有些許不同。比如：逗號「、」長得有點像中文的頓號，但實際上是日文的逗號。
泰文則比較特別，在書寫時一般只以 空格 標示句讀。系統上需要說明時可使用冒號 「 : 」，強調重點時也可使用粗體、或雙引號 「“ ”」。
日期時間
- ISO 8601
標點符號
- 日文
- 泰文語言屬於國際化還是在地化呢？
而如果你認真看完上面的內容，應該會發現漏掉一個最重要的元素，那就是語言。各個國家有不同的語言、且各語言的語序也不太一樣，按理來說，應該是屬於 L10N 在地化。但考量到在系統上要方便管理，總不能要跨到一個新國家、新市場，就一一調整程式碼的文字（光打出來就害怕🙈）。
因此，為了做到 I18N 國際化、並考慮後續擴充的彈性，針對翻譯語言我們整理了統一管理的文件，並使用 i18next 這套框架來進行開發，每一串文案會有一個對應的 Key （global key for developer），會以 Key 對應到 Value 的方式來運作，同樣的 Key（鍵） 在系統切換至不同語言時，會對應到不同 Value（值）。（文中舉例的可替換內容也是 i18next 這套框架所提供的）
而在整理翻譯文件時，其實也有許多眉眉角角，分享一個我覺得比較特別且需要注意的地方，那就是「語序」。
同樣都是建立某個模組，在習慣的語序上，日文會使用 {{module}}を作成 ，但中英泰則是 建立/Create/สร้าง {{module}}，所以在翻譯時，建議要整個字串提供譯者翻譯，並在系統中使用同一個 Key 來進行管理。
以 key common.createModule 為例：
中文值：建立{{module}}
英文值：Create {{module}}
泰文值：สร้าง{{module}}
日文值：{{module}}を作成
類似概念，若在系統中有一些 UI 元件，建議不要在句子中擺放 UI 元件，不過因為過去 MAAC 已經有相關的功能設計，因此我們在整理 Key 的時候，也會用同一個 Key 、並以整句的方式安排翻譯。
以 key interactionGame.drawsCountPerMember 為例：
中文值：一個會員可抽獎<1></1>次
英文值：Each member is limited to <1></1>
泰文值：สมาชิกแต่ละคนชิงโชคได้ <1></1>
日文值：一会員の抽選回数 <1></1>i18next
- Interpolation
- Using with React components
▍關於語言我們下了點功夫…建立翻譯管理文件，提升團隊溝通效率 📝
語言管理文件
在 MAAC 的翻譯語言文件，我們拆為兩大塊，一塊是介面看到的 UI 語言，一塊是內建範本語言。
- UI 介面語言
我們在程式上會先去抓瀏覽器的語言設定，並顯示對應的介面語言，若找不到對應的語言，則會使用預設語言英文來做顯示。操作者也可依照自己的習慣，彈性進行設定。
- 內建範本語言
品牌可於串接 LINE OA 的過程，選擇所服務的用戶語言（好友可見語言）。我們在系統中的內建範本會按照好友可見語言來做顯示，提供品牌設計和運用的靈感，也方便品牌快速調整範本內容。
綜合以上，我們將 UI介面語言、內建範本語言 按照使用對象不同分開來進行設定。現在，若有一家日本跨國企業想要服務泰國的 LINE 用戶，完全可以透過 MAAC 實現。🤝
操作者可按照自己習慣的語言設定為日文，並將服務地區設定為泰國、好友可見語言設定為泰文。操作者可在介面上看到日文，方便操作者做所有設定；此外，推播排程時間會自動使用 UTC+07:00 Asia/Bangkok ，內建範本也會提供泰文的範本內容，讓操作者可以快速設定內容。
翻譯協作流程
在翻譯文件的整理上，也仰賴著各 Team 的協作。在幾次安排翻譯的過程中，我們慢慢梳理出一套協作流程。
- 開發過程
設計師出圖後，會和 PM 一起整理出 UI 介面、內建範本的文案，並由工程師整理對應的 Key 值。接著，安排後續的翻譯流程。 - 翻譯流程
漸強為了出海策略，在今年也招募了精通泰文及日文的夥伴，在專業的翻譯社翻譯完後，他們也協助進行校稿，讓整體系統用語能越來越符合當地的使用習慣。很感謝新夥伴的加入，在開發、測試及翻譯校稿的流程上，提供很多重要的建議和協助。🙌 - 更新翻譯檔管理
完成文案翻譯後，最重要的就是更新系統的翻譯檔。針對翻譯檔管理，我們有一套方便管理和更新的工具。只要選擇服務名稱與指定翻譯檔的內容，就可以透過該工具的介面檢視更新的內容。確認無誤後，即可發佈至雲端空間，即時更新文案。
現在 MAAC 介面上大多的文案都可以使用這套工具快速更新文案，大幅縮短到 in production 的時間。這部分由衷感謝我們的工程師開發一套超級方便的翻譯檔管理工具！👏
▍實際開發和測試，是另一場硬仗的開端…心酸血淚史分享 🥲
從整體規劃到開發，負責的團隊夥伴們，都非常迅速且努力地整理各種資訊並執行開發，希望能讓 MAAC 順利升級為跨國產品。但當我們能想到的前置作業都盡可能完成，並實際進入開發及測試時，才發現這是另一場硬仗的開始…。
在開發和測試的過程，前後我們大概整理了 100 多項大大小小的問題及需要調整的項目。英日泰文案太長而出現的零星跑版、input字元數上限不夠而不符合英日泰的運用…etc.。
統合一下我們經歷的心酸血淚史❤️🩹，和大家分享幾個針對升級為跨國產品，我們遇到的問題及所做的調整：
各語言文案長度不一
實際將翻譯完的日文、泰文放入系統時，發現日文和泰文真的超級長。因此，在設計規劃時，都會需要特別留意文字的空間是否足夠。
而針對現有的功能，我們調整為以 icon 精簡的方式來做呈現，若有需要特別說明的 icon，則會在用戶停留時顯示對應的 tooltip。
同 1 個欄位有 3 個字元
在處理泰文的時候，遇到一個很特別的問題，原來泰文在同 1 欄位中最多可有 3 個字元！導致泰文很容易超過原先訂的字元數上限，我們也為此大幅度地調整系統中有限制字元數的輸入框。此外，行高也統一做了對應調整，減少字元被壓到而無法辨識的問題。
多語言圖片的處理
在系統中有些輔助說明的圖片，設計師也花了一些時間去調整圖片的呈現樣式，盡量減少文字，並改以圖形來做示意。如果需要放說明文字，也改為較通用的英文，減少設計師按照多語言去出對應圖示的工。
這次 MAAC 的調整，除了提供品牌方便使用的範本圖片以外，大多的輔助說明圖片都改為精簡文字的示意圖。除了減輕設計和翻譯的工以外，也透過更精簡的設計，方便用戶閱讀、快速掌握重點。
小結
要調整升級為跨國產品，真心滿不容易的。從研究規劃、開發測試都有很多細節需要注意，各 Team 的協作與溝通也非常重要。
這次主要是中英日泰 4 個語言，但考量未來的彈性，也花了些時間建立良好的流程和 infrastructure，希望能方便後續管理及擴充。
過程中很感謝所有夥伴的協助！設計師調整 UI 呈現和確認版面、工程師整理系統中各種字串並實作開發時區/語系等各功能、負責日泰的夥伴協助測試日泰系統並校稿翻譯…etc.，感謝幫助這每一個環節走得更順的夥伴們，終於讓支援多國的 MAAC 可以在今年 Q3 順利上線。🎊
在今年2021，從對外的跨國夥伴合作、Rebranding、徵才招募，到對內的公司組織安排、產品升級調整，都可以感受到漸強實驗室 Crescendo Lab 非常積極地拓展新市場。
我自己也在今年 4 月底加入漸強（不知不覺居然過了半年），深深被這裡的活力和成長動力所吸引，整體文化很開放透明、工作環境也相當彈性。覺得整體工作很豐富刺激，也相當期待下個階段的規劃和發展。
Let’s Go Global! 🌏
我們相信人才是軟體公司最重要的資產和價值。
👇 如果你也想加入一個持續成長、開放且彈性的團隊，我們持續徵才中 👇
