HTML Language 변환 (1) / HTML Page Add + Translate language Manually

 

내가 만든 페이지의 텍스트를 한글에서 다른 언어로 변환하는 방법을 소개하고자 한다.

 

다소? 아니 매우 무식한 방법일 수 있겠다.

 

언어변환 기능을 라이브러리로, 혹은 누군가 구현했을 거란 생각으로 구글링 하고

구글링 결과

 

 

 

여러 가지 방법을 시도해 보았지만, 갖은 시도와 시행착오 끝에? 잘 되질 않았다.

(물론, 내가 잘못 활용했을 수도 있다. 그리고 그랬을 가능성이 크다.)

 

그 끝에 결국 원시적인 방법을 택하게 되었다.

 

변환하고자 하는 언어를 구상하고, (영어, 불어, 스페인어, 이탈리아어, 일본어, 중국어, 베트남어, 인도네시아어, 태국어)

 

Visual studio code 프로그램에서 언어별 페이지를 새로 추가한다.

 

한글 텍스트로 구성된 메인 페이지가 index.html이라면 한글 텍스트를 영어로 변환하는 페이지는 en.html로 말이다.

페이지 추가

 

메인 페이지 index.html의 코딩을 en.html로 복사 후, (언어만 다를 뿐, 기능은 동일하므로)

메인 페이지의 한글 텍스트 문구를 구글링으로 번역하고

이를 en.html의 페이지에서 한글 문구에서 영어 문구로 바꾼다.

<변환 전> 한글버전

<section class="section">

        <h1 class="title">퍼스널컬러 인공지능 테스트</h1>

        <h2 class="subtitle">얼굴 사진으로 당신에게 어울리는 컬러를 찾아보세요!</h2>

        <h2 class="sr-only">나는 어떤 컬러와 어울릴까? 나의 퍼스널컬러를 찾아보세요!</h2>

        <h3 class="sr-only">퍼스널컬러 등 데이터를 학습한 인공지능이 나만의 퍼스널컬러와 특징을 찾아드립니다.</h3>

        <h4 class="sr-only">본 서비스는 Google의 인공지능 teachable machine 2.0을 활용하였습니다.</h4>

        <p class="sr-only">얼굴 사진으로 보는 인공지능 퍼스널컬러 테스트, 나와 어울리는 컬러를 찾아보세요!

            퍼스널컬러 등 데이터를 학습한 인공지능이 나만의 퍼스널컬러와 특징을 찾아드립니다.

            회원가입도 필요없이 화면에서 바로 확인해보세요! 사진 데이터는 그 어디에도 전송되지 않고 저장하지 않습니다.

            인공지능이 보는 나의 퍼스널컬러 테스트 한번 해보세요! 봄웜톤? 여름쿨톤? 가을웜톤? 겨울쿨톤? 얼굴 사진 테스트를 통해 나와 어울리는 컬러를 찾을 수 있습니다.</p>

    </section>

<변환 후> 영어버전

<section class="section">

        <h1 class="title">Personal Color AI Test</h1>

        <h2 class="subtitle">Analyze your face photo to find the color that suits you</h2>

        <h2 class="sr-only">What color will I go with? Find your personal color!</h2>

        <h3 class="sr-only">Artificial intelligence that has learned data such as personal color will find your own

            personal color and characteristics.</h3>

        <h4 class="sr-only">This service utilizes Google's artificial intelligence teachable machine 2.0.</h4>

        <p class="sr-only">Personal color test with face photos, Find the color that suits you!

            Artificial intelligence that has learned data such as personal color will find your own personal color and

            characteristics.

            Check it out right on the screen without registering! Photo data is not transmitted or stored anywhere.

            Try my personal color test as seen by artificial intelligence!

            Spring warm tone? Summer cool tone? Autumn warm tone? Winter cool tone? You can find the color that suits

            you through the face photo test.</p>

    </section>

 

예시

example

exemple

ejemplo

esempio

例

例子

ví dụ

contoh

ตัวอย่าง

 

이것이 전부다.

정말 단순하고 무식한 방법이라 소개하기 부끄럽지만, 구현은 하여야 하니, 이렇게라도 한다.

 

그 결과는 아래와 같다.

<변환 전> 한국어버전

<변환 후> 영어버전

<변환 후> 불어버전

<변환 후> 중국어버전

 

 

구현한 페이지가 한 화면, 즉 시퀀스가 없는 페이지라면 이렇게라도 끝낼 수 있지만,

페이지의 기능이 연계되어 시퀀스가 있다면, 이 작업이 2배, 3배가 된다.

 

예를 들어, 연계 시퀀스마다 현시되는 문구를 아래와 같이 원하는 언어로 모두 변환해야 한다.

<변환 전> Phase 1 : 한국어버전

<변환 후> Phase 1 : 영어버전

<변환 전> Phase 2 : 한국어버전

<변환 후> Phase 2 : 영어버전

 

 

위 사진과 같이 영어를 포함하여 총 10가지의 언어로 변환하는 작업을 진행하였다.

언어를 일일이 변환하는 작업 그 자체도 고역이지만,

언어를 변환 작업을 마치고 그 언어로 옳게 변환되었는지 검증하는 것이 굉장히 번거로운 일이다.

 

아래 그림과 같이 말이다. 코딩에서의 표현을 빌리자면 디버깅? 개념이라고 할 수 있으려나? 싶다.

좌 : 구현 페이지 / 우 : 번역기

 

여러분은 이런 무식하고도 원시적인 방법이 아닌, 지혜롭게 스마트하게 기능을 구현하길 바라며,

그 방법을 알고 계시거나 찾았다면 제게 부디 공유해 주시길 간곡히 요청드립니다. (갑자기 공손해진다.)

 

codeopen.io라는 사이트에서도 해당 기능과 관련하여 구현 방법을 찾아볼 수 있었지만, 아직 시도는 하지 않았다.

(답답한 마음에 위 방법으로 모두 다 변환 작업을 저질러버린 터라)

 

언어변환 기능뿐만 아니라 원하는 기능이 있다면 구글링뿐만 아니라 이 사이트에서도 참조 가능하다는 점을 덧붙인다.

 

재능기부 능력자 불특정 다수가 구현한 HTML을 소개할 뿐만 아니라

 

HTML UI 디자인(CSS)도 덧붙여 공유하니 참조하기에 좋은 사이트로 보인다. // 단, Copyright License는 조심하자.