Project idearecipe :: me2idea 개발 뒷이야기 5편, 자동완성과 Adobe AIR 의 한글지원

부제: 왜 me2idea 의 글쓰기 박스는 한줄일까요?

안녕하세요.me2idea 에서 닉네임 자동완성/자동소환, 글쓰기 프리뷰, 환경설정, 기타 HTML/CSS 옷 입히기 작업을 담당한 행복한아이 입니다. 이 글에서는 me2Idea 의 자동완성 기능과 Adobe AIR 의 한글지원 현황에 대해 공유해보려고 합니다.

me2idea 개발의 모토는 "센스" 있는 어플리케이션이었습니다. me2day open API 에서 제공하는 최대한의 기본기능을 구현하려고 했고, "센스" 있는 몇가지 부가 기능들을 제공하고 싶었습니다. 그 중 한 가지가 글을 작성할 때 me2day 규칙대로 닉네임/아이디를 입력하면 자동완성된 미친 목록을 보여주는 닉네임/아이디의 자동완성 기능입니다.

그런데... me2idea 개발을 시작할 때까지만해도.. 이 기능에 이렇게 시간과 노력이 들어갈 줄 정말 몰랐습니다 ㅡㅡ;; 결론적으로 말씀드리면, me2idea 의 개발 플랫폼인 ADOBE AIR 1.5 버전의 한글 버그 때문이었습니다. ways 님의 "me2idea 개발 뒷이야기 1편, 자바스크립트" 글에서 언급되었던 소소한 문제점 중 하나죠.

닉네임 자동 완성

닉네임/아이디의 자동완성 기능을 제공하려면 textbox 에 입력된 text 의 값을 알아와야 하는데, 한글 입력 시 마지막으로 입력 중인 블럭화 되어있는 글자는 자바스크립트에서 도무지 값이 얻어지지가 않는 것이었습니다. 예를 들어 제 닉네임인 \행복한아이\ 를 입력하려고 하는 경우에 "ㅎ" 만 입력해도 ㅎ으로 시작하는 미투친구의 리스트가 나와야 하는데, 현재 입력 중인 텍스트 블록을 벗어나야만 그 글자가 자바스크립트에서 textbox 의 value 로 인식되었던 것입니다. me2day 의 사용자들은 아이디 소환 보다는 닉네임 소환에 익숙하고, 닉네임은 반 이상이 한글인데, 영어 자동완성 밖에 지원을 하지 않는다면 반쪽도 안 되는 기능인 거죠.

초보 자바스크립트 개발자인지라 함수나 변수 사용이 잘못된 줄 알고 어디가 잘못되었을까 뒤지고 또 뒤지고 이렇게도 해보고 저렇게도 해보고 ㅋㅋ 좌충우돌이었죠. 알고보니, AIR 1.x 에서 2byte 캐릭터 지원에 문제가 있었습니다. Oh Nooooooooooo ~~

개발 당시에 제가 참고했던 글은 이 글이었는데, 지금은 해당 사이트에 연결이 되지 않네요. 다행히 구글링으로 저장된 페이지를 찾아내었습니다 >_<

이 글에 따르면 2008년 AIR 1.1 당시 FLEX 와 AIR 에 밝혀진 한글 입력 문제는 다음의 4가지였습니다.

한글 입력 시 영어 또는 숫자보다 입력 시간이 지연되는 문제

텍스트 블록을 벗어나기 전까지 해당 텍스트가 인직되지 않는 문제

wmode 가 transparent 일 때 IE 를 제외한 브라우저에서 한글이 입력되지 않는 문제

한글 삭제 시 자소 삭제가 제대로 안되는 문제

문제가 많았던 입력창

제가 부딪혔던 문제는 이 중 2번, "텍스트 블록을 벗어나기 전까지 해당 텍스트가 인식되지 않는 문제" 였습니다. 각종 try and error 를 거친 끝에.. <textarea> element 에서만 문제가 발생하고 <input type=text> 에서는 발생하지 않는다는 사실을 알았습니다.. 그래서 현재의 me2idea 글쓰기 입력 박스가 한 줄로 구현이 되게 된 거죠. 여러 줄짜리 텍스트 입력박스를 만들려면 <textarea> 를 써야만 하니까요.

그러나 문제는 여기서 끝이 아니었습니다 OTL ;;

<선택한 텍스트에 링크 걸기> 기능 구현을 위해서는 <input type=text> 에서 글자의 selection 이 제대로 동작을 하지 않아서 textarea 를 써야만 했던 거죠. 둘 중에 하나의 기능은 포기해야만 하는 상황이 왔습니다. 그래서.. 저희는 둘다 포기하지 않기 위해 하나의 트릭을 사용하기로 했습니다. 글쓰기 창은 <textarea> 와 <input type=text> 두개로 이루어져 있습니다. 기본적으로는 <input type=text> 를 사용하고, / 또는 \ 를 입력해서 자동완성을 하는 중에는 <input type=text> 는 disable 하고 같은 위치에 있는 <textarea> 를 enable 합니다.

안 되는 걸 되게 하느라 잔꾀를 좀 내어봤는데, 기능 구현이 거의 끝난 시점인 지난 2009년 11월에 Adobe AIR 2.0 Beta ( http://labs.adobe.com/technologies/air2/ ) 버전이 발표되었습니다. 여기에선 저희가 고생해서 우회했던 한글 입력 버그가 수정이 되었더라구요. 아이고야 >_<;; 하지만 정식 버전은 조금 기다려야 나온다니 조금 위로가 된달까요 ㅠㅠ

열심히 써봤는데 얘기가 두서가 없이 길어졌네요 ^^;
이 글이 me2idea 에 대한 이해를 도울 수 있기를 바라며,
me2idea 많이 사랑해주세요~♡