[gksdudConverter] 한영타 변환기 개발기록 1 : 개발 이유와 구현 방법 떠올리기

목차
1 : 개발 이유와 구현 방법 떠올리기 (현재)
2 : 구현 방법 모색하기

개발 이유

가끔 한글로 써야하는데 영타로 쓰는 경우가 허다했다. e.g) 글 쓸 때 or 검색 창에 뭐 검색할 때

아무 생각없이 적었는데 한/영을 바꾸지 않아서 지우고 다시 적는 것이 너무 불편해서 웹 확장자로 제공해보고자 마음먹었다.

지금은 웨일 스토어나 크롬에 등록하는 것이 목표이고, 웨않되 맞춤법 검사기 처럼 실시간으로 검사 및 변환이 이루어지게 하는 것이 최종 목표이다.

안된다면 api형태라도 제공하고자 한다...

 

구현 방법 떠올리기

처음 생각한 방식은 유니코드를 이용해 변환하는 것이였다.

예를들어 "한"이라는 글자가 있다면 한에 대한 유니코드가 있을 것이다.

"0xd55c" 라는 값에 매칭되는 영타자는 정해져있기 때문에 이를 매칭하면 된다고 생각했었다.

 

또 한국어는 영어와 다르게 초성 중성 종성 3가지가 존재하기 때문에 이를 어떻게 분해해서 영어로 바꾸는지가 관건이였다.

 

어려웠던 요인은 다음과 같다. 나의 짧막한 지식으로 해결하지 못한 문제들도 있을거임..ㅠㅡㅠ

---

 

1. 동일한 자리에 있는 한글 타자와 영어 타자 간의 규칙을 찾지 못했다.

console.log("ㅎ".charCodeAt(0).toString(16));
// output: 314e
console.log("g".charCodeAt(0).toString(16));
// output: 67

console.log("ㅏ".charCodeAt(0).toString(16));
// output: 314f
console.log("k".charCodeAt(0).toString(16));
// output: 6b

console.log("ㄴ".charCodeAt(0).toString(16));
// output: 3134
console.log("s".charCodeAt(0).toString(16));
// output: 73

ㅎ과 g를 매칭해서 나두고, ㅏ와 k를 매칭해서 키보드에 나둔 이유가 있을 줄 알았는데

수학을 못해서 그런지 규칙 찾기가 넘 힘들었따... 노가다 매칭을 해야하나 싶음

 

2. 인공적으로 만든 유니코드는 NFD 분해가 되지 않는다.

 

왼쪽처럼 유니코드를 만들었으나 NFD 변환 함수를 먹여도 변환되지 않았다.

왼쪽이 "한" 글자를 유니코드로 변경한 것이고, / 오른쪽이 NFD함수를 적용한 결과이다.

const normalizeNFD = (unicode) => {
      return unicode.normalize("NFD");
}

 

 

1에서 규칙을 찾지 못해 다시 생각한 것이

"한"이라는 글자가 있으면 NFD 방식을 이용해 "ㅎ" "ㅏ" "ㄴ" 이렇게 분리한 후 각각의 유니코드에 해당하는 영어로 변경해주면 되겠다 생각했었음

 

근데 정상적으로 글자를 NFD방식으로 분해하더라도 결과값이 unicode 값이 아닌 text로 바로 나와서 그것 또한 문제였음

// 출처: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/normalize
// 결합된 한글 문자열

// U+D55C: 한(HANGUL SYLLABLE HAN)
// U+AE00: 글(HANGUL SYLLABLE GEUL)
var first = '\uD55C\uAE00';


// 정규형 정준 분해 (NFD)
// 정준 분해 결과 초성, 중성, 종성의 자소분리가 일어납니다.
// 일부 브라우저에서는 결과값 '한글'이 자소분리된 상태로 보여질 수 있습니다.

// U+1112: ᄒ(HANGUL CHOSEONG HIEUH)
// U+1161: ᅡ(HANGUL JUNGSEONG A)
// U+11AB: ᆫ(HANGUL JONGSEONG NIEUN)
// U+1100: ᄀ(HANGUL CHOSEONG KIYEOK)
// U+1173: ᅳ(HANGUL JUNGSEONG EU)
// U+11AF: ᆯ(HANGUL JONGSEONG RIEUL)
var second = first.normalize('NFD'); // '\u1112\u1161\u11AB\u1100\u1173\u11AF'


// 정규형 정준 결합 (NFC)
// 정준 결합 결과 자소분리 되었던 한글이 결합됩니다.

// U+D55C: 한(HANGUL SYLLABLE HAN)
// U+AE00: 글(HANGUL SYLLABLE GEUL)
var third = second.normalize('NFC'); // '\uD55C\uAE00'


console.log(second === third); // 같은 글자처럼 보이지만 false를 출력합니다.

mdn에 올라와있는 normalize 예제이다.

 

나는 한글이라는 값의 자소 분리가 된

\u1112\u1161\u11AB\u1100\u1173\u11AF

이런 유니코드 값을 얻고싶었는데 글자 그대로 출력되었다...

지금 생각하면 당연하다. 유니코드 자체가 글을 브라우저에서 읽기 위해 나온 것인데, 글 대신 저 코드 값이 나오면 안되지ㅠㅠ

 

"\u"를 기준으로 split 함수를 사용해 결과를 쪼개봐도 별다른 효과가 없었다ㅠㅠ

걍 ["한글"] 이렇게 나옴 또륵..

 

아무튼 검색 실력 부족으로 저 유니코드 값을 내가 얻을 수 없었다.

 

위에 말한 내용의 전체적인 흐름은 아래와 같이 만들어봤었다.

	btn.addEventListener("click", () => {
    // 임시로 만든 input 박스 - 한/영 변경할 글을 적음
      let translation_txt = document.querySelector("#translation_txt").value;

	// 유니코드로 변경한 후
      let wordUnicode = convertToUnicode(translation_txt);

	// 결과를 result라는 p태그에 넣어줌
      result.innerText = wordUnicode;
    });

// 단어를 받은 다음 한 글자씩 유니코드로 만든 뒤 합친 결과를 반환함
    const convertToUnicode = (word) => {
      let result = "";

      for(let i = 0; i < word.length; i++){
        result += letterToUnicode(word.charAt(i));
      }

      return result;
    };

// 한 글자를 0x로 시작하는 유니코드로 만듦
    const letterToUnicode = (letter) => {
      return `0x${letter.codePointAt(0).toString(16)}`;
    };

// NFD로 유니코드 정규화
    const normalizeNFD = (unicode) => {
      return unicode.normalize("NFD");
    }

 

아무튼 생각과 실제 구현의 미일치로 인한 실패 기록은 여기까지!

실제로 어떻게 구현하기로 마음먹었는지에 대한 글은 다음 포스팅으로 넘기기로 했다.

여기 적고 있었는데 넘 길어져서 나눠버림

 

다음글: 2 : 구현 방법 모색하기