Monthly Archives: November 2008

간단 단어 번역 북마클릿, inline translator

실시간 단어 번역 북마클릿 실행화면

단어를 드래그, 더블클릭 등으로 선택하면 선택된 단어를 번역하여 보여주는 북마클릿, 이름하여 inline translator를 만들었습니다. 개인적으로 영문서 읽기 성공률을 올려보고자 만들었는데 생각보다 쓸만한 것 같아 공유해봅니다. :)

Google AJAX Language API를 사용하였고 API 지원하는 모든 언어가 번역되어 보여집니다.

Google 번역 API가 12월 1일부로 폐기된 관계로 Microsoft Translation API로 번역 API가 변경되었습니다.

아래의 링크를 북마크에 추가하신 후 원하시는 페이지에서 실행하여 사용하시면 됩니다. (
IE7 이상과 파이어폭스, 오페라, 사파리 등의 최신 브라우저에서 사용 가능합니다.)

간단 단어 번역

추가: 파이어폭스 애드온

다운로드: Inline Translator 파이어폭스 애드온

아직 정식 애드온으로 등록되지 않은 관계로 로그인 후 받으실 수 있습니다. 정식 애드온이 되었으면 하시는 분들은 리뷰 작성 부탁드립니다. 그런데 영어로 작성하지 않으면 의미가 없다니 고려해주세요. ㅠㅠ 감사합니다. ^^

“Humane Interface” 함께 읽기 시작.

우리는 자신의 전자 시종에게 억압당하고 있다.

이 책을 우리의 해방을 위해 바친다.

사내의 동료들(웹 클라이언트 개발자들)과 Humane Interface (인간 중심 인터페이스)를 읽기 시작했습니다. 인간-기계 사이의 인터페이스는 무엇보다 인간이 사용하기 편해야한다.라고 이야기하는 이 책은 우리가 일상적으로 사용하고 있는 기계들에 대하여 알고 있는 불편한 점이나 혹은 익숙해져 불편한지 조차 모르는 것들을 끄집어내고 인간중심으로 바꾸어가는 방법과 그러기 위해 인터페이스를 담당하는 사람들이 해야할 것들에 대해 얘기하고 있습니다.

뭐 아직 1장만 읽었을 뿐이라 더 자세히 설명드리기는 부족하네요. ㅎ 아무튼 매우 재미있는 시간들이 될 것 같습니다. 아, 혹시 다른 분들과 책을 함께 읽어보고 있는 분들은 오픈마루 개발자 권남씨의 스터디하는 법을 참고해보세요. 저희도 비슷하게 진행하고 있습니다.

그리고 첫 시간에 생각나는 게 있어 하나 적어봅니다.

은행 자동 입출금기(ATM)에서 출금이 카드 인식, 비밀번호 입력, 출금 금액의 순서로 진행되잖아요?

그런데 제가 비밀번호를 입력했는데 화면이 그대로여서 비밀번호 끝자리 1자리를 빼먹었나 싶어 마지막 1자리를 누르려는데 누르기 직전에 화면이 바뀌어서 출금 금액 중에 제일 큰 70만원을 선택해버렸어요. 그랬더니 이 기계가 바로 그냥 70만원을 주더라고요.

책 읽기 중 어떤 분의 경험담을 들은 것인데 요는 비밀번호 입력 후 입력이 잘 되었고 다음 단계로 진행중이라는 피드백이 적절하게 제공되지 않은 것이다. 그런데 요즘 웹 사이트들을 돌아다니다 보면 이와 같은 피드백이 상당히 불편하다.

웹에서 표현을 담당하는 CSS에는 사용자의 동작에 대한 여러가지 피드백을 제공할 수 있는 기능이 있다. 바로 동적 가상 클래스(dynamic pseudo class)인데 그 종류에는 link, visited, hover, active, focus가 있다.

active와 같은 경우에는 요즘 인터넷 회선 속도가 너무 빨라져 거의 사용되지 않고 있는지 모르겠지만 누구나 게시판 등의 폼 전송 시 진행이 되지 않는 것 같아 전송 버튼을 여러번 클릭해본 경험이 있을 것이다. 물론 페이지가 이동되면서 브라우저 자체적인 피드백이 제공되기는 하지만 Ajax 등의 RIA라면 또 얘기가 달라진다.

나머지 경우들에 대해서도 상당히 간과되거나 미적 요소 정도로 치부되는 경향이 있는 듯 하다. 심지어 focus 되었을 때 브라우저에서 기본적으로 제공되는 테두리 점선이 이쁘지 않다는 이유만으로 없애버리는 경우도 있고…

얘기가 딴데로 새고 반말, 존대말 섞어가며 저부터 이 글을 읽는 분들께 혼란을 드린 듯 합니다. 죄송합니다. (__)

여하튼 책 읽기 들어가는 마당에 많은 것을 느꼈는데 중요한 건 최소한 직접 인간이 사용하게 될 무언가를 만드는 사람으로써 이 분야에 대한 공부는 생각보다 훨씬 중요하다는 겁니다. :)

IE 잘못이 아니다.

한국 웹 사이트들이 거대 인트라넷이 된 것이나 웹 표준 관련 기술들의 발전이 실무자들에게는 그냥 남 얘기인 것은 솔직히 말해서 IE 잘못이 아니다. 그냥 구버전 브라우저일 뿐인 IE6 잘못도 아니다. MS 잘못이다.

IE6을 사용하는 사람들에게 캠페인을 할 게 아니라 MS를 들들 볶아야 한다.

아, 제발… 서비스팩도 좋고 뭐도 좋으니… IE7로 자동 업그레이드 좀 시켜주소. 지금 안되고 있는 게 아니라 심각한 보안 문제처럼 적극적으로 푸시해달란 말이오. 웹 사이트 좀 만들어볼라면 IE6 성능문제 때문에 상상의 날개가 부러진 채로 시작하고 있소. 실버라이트도 좋고 혁신도 좋소. 그 전에 기본적인 것 좀 어떻게 안되겠소?

접근성을 해치지 않는 자바스크립트의 사용, 그 다음엔?

접근성을 해치지 않는 자바스크립트의 사용

신현석님의 접근성을 해치지 않는 자바스크립트의 사용이라는 글을 읽어보셨는지요? 혹시 어렵고 복잡하다고 생각하실지 모르나 자바스크립트 기술 위에 HTML 표준에 대한 이해가 수반된다면 크게 복잡한 과정이 아닙니다. 웹 사이트 개발에 들어가기 앞서 위의 과정을 이해하고 있다면 접근성을 해치면서(?) 사용하는 자바스크립트와 같은 비용으로 자바스크립트가 불가능한 환경의 접근성, 검색엔진 최적화(SEO) 등의 이득을 챙길 수 있습니다. 접근성을 보장하는 것이 그렇지 않은 것에 비해 추가비용을 필요로 하는 것은 사실이지만 그 추가비용 안에 위의 언급한 이득은 포함되어 있지 않습니다. 즉, 위의 이득들은 꽁짜란 얘기죠. ㅋ 실제로 미투데이라는 서비스의 경우 자바스크립트를 제거한 상태에서도 정확하게 원하는 기능을 사용할 수 있고, 자바스크립트가 이 기능들을 좀 더 편하고 신속하게 이용할 수 있는 보조장치로 쓰인 모습을 볼 수 있습니다.

그 다음엔?

자… 그럼 이렇게 하면 끝일까요? 사실 아닙니다. 그 이유는 말빨이 부족한 제가 설명하는 대신 유명한 웹 접근성 관련 블로그인 456 Berea Street의 Roger Johansson옹의 글 Reading up on WAI-ARIA에서 따왔습니다.

One of the more problematic areas of web accessibility is how to handle the custom widgets and dynamic changes to content used in most web applications and on many content-based websites.

Using JavaScript to add custom behaviour and update content can cause problems for people who rely on assistive technology (AT) such as screen readers. The problems often consist of the AT not being aware that content on the page has changed, the user not noticing that something has changed, or the user being aware that something changed but not what.

웹 접근성에서 상당히 골칫거리인것들 중에 하나가 커스텀 위젯이나 대부분의 웹 어플리케이션이나 많은 컨텐츠 중심 웹 사이트들에서 사용된 컨텐츠의 동적인 변경을 어떻게 다루느냐하는 것이다.

자바스크립트를 사용하여 특정 동작을 추가하고 컨텐츠를 갱신하는 것은 스크린리더와 같은 보조기기에 의지하고 있는 사람들에게 문제를 일으킬 수 있다. 그 문제란 대개 보조기기가 페이지의 컨텐츠가 변경된 것을 감지하지 못하여 사용자가 무엇인가 바뀌었다는 것을 알지 못하거나, 혹은 사용자가 무엇인가 바뀌었다는 것은 알지만 그게 무엇인지는 모르는 문제를 가리킨다.

그래서 나온게 WAI-ARIA입니다. 자, 그러면 당장 적용을 시키면 되나? 그렇습니…다라고 말씀을 드려야 하지만 좀 상황이 편하지만은 않습니다. WAI-ARIA라는 스펙 자체가 초안(Working Draft) 상태라 아직 표준으로 인정할 수 없는 상태이고 국내에서 유명한 스크린리더인 센스리더는 WAI-ARIA의 W자도 찾아볼 수 없습니다. 구현이 전혀 안되어 있다는 얘기죠.


구글리더는 ARIA 기능을 사용할 수 있는 감춰진 링크를 제공하고 있다.

보조기기들도 지원안하는 WAI-ARIA인지 뭔지 적용하나 마나 쓸모없지 않나?라는 질문을 하실 수 있습니다. 마찬가지로 센스리더 등의 보조기기 제작사에서는 구현된 사이트도 없는데 WAI-ARIA인지 뭔지 적용하나 마나 쓸모없지 않나?라는 질문을 할 수 있고요. -_-;;;

둘 중 누가 먼저라는 걸 서로 주장하는 것도 웃깁니다. 오히려 서로 시급히 도입해야 할 판국이죠. 그렇지 않습니까? ^^

지금 당장은?

우여곡절 끝에 접근성을 해치치 않는 자바스크립트를 사용하고 그 위에 WAI-ARIA까지 적용했다고 합시다. 그런데 보조기기들은 아직이라면? 답은 의외로 간단합니다. 보조기기 사용자들이 자바스크립트를 꺼둔 상태로 사이트를 작동할 수 있는 기능(문서 시작점에 이 기능에 대한 링크를 제공한다던지…)을 주면 됩니다. :)

canvas와 VML을 통해 이미지를 둥글게…

요즘 웹에서 벡터 그래픽을 표현하는 방법에 대한 관심이 생겨 canvas, SVG, VML 등을 살펴보고 있습니다. SVG라는 표준이 있고 HTML5에는 canvas 요소가 기본적으로 들어가는데 일단 IE 때문에 표준으로 짜자잔이라던지 CSS background로 벡터 그래픽을 사용한다던지 하는 신나는 일은 나~중에나 될 것 같습니다만 자바스크립트를 통해 IR처럼 구현하는 건 가능할 것 같습니다. 컨텐츠를 HTML로 기본적으로 마크업한 뒤 자바스크립트로 갈아치우는거죠.

쬐금 공부해본 결과물을 공유합니다. 이미지의 모서리를 둥글게 하는 스크립트 예제입니다. 사용한 이미지가 조금 거시기하니 뭐 드시는 중이시거나 비위가 약한 분들은 조심하세요. -_-;;

원래 animated gif 파일인데 canvas를 사용하면 안되네요. 안되는건지, 제가 방법을 못 찾은건지… 원본이 궁금하신 분들은 원본 이미지를 보셔요. ㅋㅋ

신기하고 재미있는 UI 모음…

uvLayer

youtube의 동영상을 검색하고 보고 묶고 공유하고 간직할 수 있다. 단지 접속 후 언어를 선택한 후 원하는 동영상을 찾으면 된다. 마우스를 다루는 재미를 느끼다보면 원하던 기능을 익힐 수 있다.

사용자에게 실제로 유용한 부분을 재미있는 UI를 통해 극대화시켰고 그 외에는 아무것도 없다. :)

Juice – Discover. Organize. Share.

동영상, 이미지의 수집, 둘러보기와 웹 사이트를 구경하다가 궁금한 단어를 드래그 & 검색하는 기능을 갖춘 파이어폭스 익스텐션이다. 아래의 설명 동영상을 보면 어떻게 작동되는 녀석인지 쉽게 알 수 있다.


Juice’s rocking webcast from Linkool Labs on Vimeo.

동영상이나 이미지는 마우스를 올리면 나타나는 drag me 버튼을, 텍스트 검색은 선택된 텍스트 혹은 링크를 살짝 드래그했다가 놓으면 수집·검색된다. 굳이 우측에 열려있는 사이드바까지 드래그할 필요도 없다. 그런데 오히려 이 편해 보이는 기능이 쓸데없는 컨텐츠를 수집·검색해버리는 오류를 가지고 있긴 하다.


앗, 겨우 2개네요. -_-a