WIT – NTS UIT Blog

[발표] 모바일 웹 어플리케이션 접근성

Posted by in Research

어제 한국장애인단체총연합회 및 한국웹접근성인증평가원에서 진행한 웹 접근성 세미나에서 발표를 맡게 되었습니다. 마지막 세션이라 긴장도 많이 되고 시간도 짧아서 많은 이야기를 드리지 못한 거 같아 아쉽습니다. 더 많은 내용은 블로그에서 추가로 다루도록 하겠습니다. 발표자료 공유드립니다. 감사합니다.

0

HTML의 원래 기능을 유지하자.

Posted by in Research

HTML, Hyper Text Markup Language는 1993년 ISO 표준이 되어 현재는 가장 사랑받는 웹 개발 언어입니다. 꽤 오랫동안 사용되어왔지만, 그동안 비표준 브라우저들의 시장 잠식, 브라우저 전쟁 등으로 인해 많은 오해를 받기도 한 언어입니다. HTML과 더불어 오랫동안 사용되어 왔던게 CSS, Cascading Style Sheet와 JS, JavaScript입니다. CSS를 이용해 웹사이트를 아름답게 꾸미고, JavaScript를 이용해서 웹사이트에 동작을 불어넣었습니다. 그러나 JavaScript를 이용한 DOM의 무차별적 관리, 폼 밸리데이션 체크 등으로 인하여 사이트들의 JS의존성은 갈수록 심해졌습니다. 이 게시글은 JavaScript를 사용하지 말자는 것도 아니거니와, JavaScript가 되지 않는 브라우저를 위한 그런 이야기가 아닙니다. 단순히, HTML의 원래 기능을 유지하자는 이야기를 하고자…read more

0

당신의 요소에 역할을 부여해주세요.

Posted by in Research

div태그로만 레이아웃을 구성하고, span태그로 모든 인라인 스타일을 넣어주던 시대도 있었지만, 시멘틱 웹의 중요성과 표준을 준수하는 것, 그리고 웹 접근성의 중요성이 대두되면서 대부분의 웹 페이지나 어플리케이션들이 태그의 목적에 맞게 태그를 사용하여 웹 페이지나 어플리케이션을 개발하는 시대가 되었습니다. HTML5에서 Content Model을 대대로 수정하면서 Sectioning Content가 생겨나고, section태그나 article태그와 같은 다양한 태그들이 추가되었습니다. 그러나, 일부 구형 브라우저에서 제대로 동작하지 않는 이슈들과 여러 내부 협의로 인해 새로운 태그를 사용하지 못하는 경우는 매우 많고, 그 결과 새로운 태그를 사용하지 못하고, 다양한 브라우저에서 정상적으로 호환되는 div 태그를 가장 무난하게 사용하게 됩니다. div 태그는 실제로는 의미가 없는…read more

4

W3C 스펙은 어떻게 읽어야 하는가?

Posted by in Research

Front-End 개발자라면 누구나 한번쯤 W3C의 스펙을 접해봤으리라 생각합니다. W3C 스펙을 읽어야할 필요성은 어떤 개발자나 가지고 있지만, 영어에 대한 막역한 두려움과 W3C 문서들이 가지고 있는 법칙들을 이해하지 못해 읽는데 어려움을 겪었으리라 생각합니다. 그런 점에서 지난 주 금요일에 진행된 TTWF 행사의 발표 내용 중, “W3C의 스펙은 어떻게 읽어야 하는가?”라는 주제의 발표는 매우 좋은 내용이었다고 생각되어 이렇게 블로그에 내용을 정리해봅니다. 어떻게 읽어야하나요? 처음에 스펙부터 읽으려 하지 말고 데모부터 보시길 바랍니다. 대부분의 스펙에서 데모를 제공하고, 그렇지 않더라도 다양한 사이트와 많은 사람들이 데모사이트를 제공하고 있습니다. 데모부터 확인하여 이 스펙이 무얼 나타내는 건지 이해하는 것이 좋습니다….read more

0

[영상] Webkit Overview

Posted by in Research

Intro Rendering Engine 중 하나인 Webkit Rendering Engine에 대해 간단히 발표해보았습니다. 부가 초반에 Web Browser 부분에서 설명이 없었는데, 현재 Webkit엔진은 Safari 브라우저에서 사용하고 있습니다. Chrome도 27버전까지는 Webkit을 사용했고, 그 이후부터 Webkit을 개량한 Blink 엔진을 사용하고 있습니다. References Rendering in Webkit Webkit Layout Slide

0

git의 요술 책갈피, Stash 기능 소개

Posted by in Tech

git에는 기본적인 커밋 & 푸시 등의 기능 외에도 수많은 기능들이 있습니다. 그중 매우 유용한 요술 책갈피인 Stash에 대한 소개입니다. 사전적 의미 Stash [stӕʃ] 1. (안전한 곳에) 넣어 두다 2. 챙겨 둔 양 Situations 현업에서 코드를 열심히 개발하다 보면 이런 상황이 왕왕 발생합니다. 상황 1. 신규 프로젝트인 “LetItGo” 프로젝트가 시작됐습니다. 저장소 세팅을 하고 일단 init 커밋 & 푸시를 쏩니다. “이런 이런 기능을 개발 해야 되는데. 번뜩이는 영감으로 빠르게 프로토타이핑 한번 해봐야지” 불타오르는 손으로 열심히 코딩합니다. 그런데 이게 왠 걸? 몰랐네요. 개발 브랜치에서 개발해야 되는데 마스터 브랜치에 열심히 개발해 버렸네요. (실제로 전…read more

8

브라우저는 어떻게 동작하는가? [1/3]

Posted by in Research

NHN 개발자 블로그인 Hello World에 투고되어있는 “브라우저는 어떻게 동작하는가?“의 정리본입니다. 너무 어려워서 다시 정리합니다. Web Browser 가장 많이 사용되는 프로그램이고 우리가 웹을 탐색할 때 사용하는 프로그램입니다. 최근에는 “인터넷 익스플로러(MS)”, “파이어폭스(Mozilla)”, “크롬(Google)”, “사파리(Apple)”, “오페라(Opera)”가 주력 브라우저로 활약을 하고 있습니다. 브라우저의 주요 기능은 “사용자가 요청한 데이터를 서버에 요청한 뒤 그 데이터를 받아서 다시 브라우저에 뿌려주는 것”입니다. 이 과정에서 데이터는 HTML 문서인 경우가 많지만 PDF, 이미지 등 여러 케이스가 존재합니다. 브라우저는 W3C에서 정의한 명세에 따라 HTML과 CSS를 해석하게 됩니다. 예전에는 독자적인 표준을 만들어서 브라우저의 렌더링을 하던 시절[1]도 있지만 근래에는 대부분의 브라우저가 W3C 표준을…read more

1

자바스크립트 객체 생성

Posted by in Research

Class를 기반으로 상속을 구현하는 다른 언어와 달리 JavaScript는 Prototype을 기반으로 상속을 구현합니다. 즉, Class를 생성해서 상속받는 것은 원론적으로 불가능합니다. 자바 언어에서 클래스를 생성하는 예제를 보겠습니다.

Java는 클래스를 기반으로 상속을 받기 때문에 위와 같이 클래스를 만들고, 그 인스턴스를 만들어냅니다. User 클래스의 인스턴스들은 모두 이름(name), 나이(age)라는 private 필드와 함께, getName(), setName() 메소드를 가지게 됩니다. 비슷한 예제를 자바스크립트로 만들어보도록 하겠습니다.

기본적으로 자바스크립트는 생성자 함수(Constructor)를 사용해 새로운 객체를 생성합니다. 각 함수는 prototype 속성을 가지고 있으며, 새로운 객체가 생성될 때 객체의 [[proto]] 속성이 생성자 함수의 prototype 속성의 주소를 참조하게 되면서 상속을 구현합니다. 위의…read more

1

Ambient Light Events

Posted by in Research

인간의 눈은 주변 빛의 양에 따라 한번에 들어올 수 있는 빛의 양을 조절합니다. 어두운 곳에 있으면 동공은 축소되고 그만큼 한번에 받아들이는 빛의 양이 많아집니다. 그런 경우 휴대폰의 밝기가 최대로 되어있으면 한꺼번에 많은 빛을 받아들이게 되어 눈이 아파집니다. 반대로 밝은 곳에 있으면 동공은 확대되고 그만큼 한번에 받아들이는 빛의 양은 적어집니다. 하지만 휴대폰의 밝기가 낮다면 그만큼의 빛을 인식을 못하고 휴대폰 화면을 인식하기 어려워집니다. 많은 휴대폰 제조사에서는 자동밝기조정 기능을 제공하여, 주변 환경의 밝은 정도에 따라서 휴대폰의 밝기를 자동으로 조절해줍니다. 아래는 넥서스7에서 Ambient Light Events를 활용한 동영상 예제입니다. 이런 동작을 웹에서는 Ambient Light Event를…read more

0

[Review] Light Table

Posted by in Review

소개 Light Table은 Node-Webkit 기반의 IDE 이며 최근 0.6.0 버젼 부터 Open Source가 되어 Github에서 직접 볼 수 있습니다. 작성한 코드에 대해 실시간으로 피드백을 주어 프로그램이 실제로 어떻게 작동하는지 이해할 수 있게 해주는 점을 장점으로 들고 있습니다. http://www.lighttable.com  https://github.com/LightTable Node-Webkit? Node-Webkit은 Chromium 브라우저에 Node.js기반으로 실행되는 어플리케이션입니다. Node-Webkit을 통해 네이티브 어플리케이션을만들 수 있습니다. 어플리케이션은 HTML5, CSS, JavaScript, WebGL로 만들어 집니다. Node.js API와 모든 서드 파티 모듈들과 완벽하게 호환합니다. 빠른 성능을을 보여줍니다. 쉽게 어플리케이션을 배포할 수 있습니다.  Linux, OSX, Windows에서 동작가능 합니다. 2011년에  Intel Open Source Technology Center에서 개발했습니다. https://github.com/rogerwang/node-webkit (Node-Webkit) https://01.org/(Intel Open Source…read more

Vibration API

Posted by in Research

소개 진동은 사용자가 특정한 상황을 접했을 때, 사용자에게 알림을 주기 위해 사용됩니다. I-OS나 안드로이드, 바다 OS 등 여러 Mobile OS에서 진동을 사용하기 위한 API를 제공하고 있습니다. 그럼 Web OS에서는 그 상황이 어떨까요? W3C에서는 2009년 Device APIs Working Group을 결성하여 Web Device API 문서를 발행하고 완성시킨 뒤 사용을 권고하고 있습니다. 오늘은 그 중 하나인 Vibration API를 다룹니다. 기술 Vibration API의 기재는 아래와 같습니다.

위의 말을 직역하면,

함수의 반환값은 boolean Type으로 반환됩니다. 다음은 사용 예제입니다.

호환성 Vibration API는 현재 Chrome과 Firefox에서만 지원하고 있습니다. Chrome도 아이폰용 크롬에서는 정상적으로 작동하지 않으며,…read more

7

viewport

Posted by in Research

소개 스마트 기기에서 여러 단말기의 해상도에 대응하기 위해 사용하는 viewport에 대해 알아보고자 합니다. viewport는 스마트기기 상에서, 최초에 페이지를 로딩할 때 확대정도, 최대 확대비율, 최소 확대비율등을 다루는 meta data에 속하는 속성입니다. viewport를 사용함으로서 무선을 위한 디자인을 무선에서 최적화 되게 보여줄 수 있습니다. 사용법 사용법은 의외로 간단합니다. <meta name=’viewport” content=””/>를 head사이에 추가해 주면 됩니다. content안에는 아래와 같은 내용이 들어갈 수 있습니다. 속성 값 초기값 특징 width <viewport-length>{1,2} 독자적 속성에 따름. device-width라는 값을 넣는 것이 가능하다. height <viewport-length>{1,2} 독자적 속성에 따름 device-height라는 값을 넣는 것이 가능하다. user-scalable no 또는 yes yes 사용자가 브라우저의…read more

1

speech Input

Posted by in Research

speech Input은 현재 Chrome(Google)에서 제공하고 있는, Input의 새로운 방법으로 Mic를 사용할 수 있도록 하는 Input이다. 사용법은 하기와 같다. <input type=”text” x-webkit-speech> Speech Input은 Chrome 브라우저에서만 작동하는데, 그 이유가 궁금했다. 관련된 내용을 찾다가, Android 개발자 페이지에서 재미있는 내용을 찾았는데, (이게 웹 관련 이슈는 아니지만 Speech 공통 이슈로 파악된다) Google’s servers currently support English, Mandarin Chinese, and Japanese. The web search model is available in all three languages, while free-form has primarily been optimized for English. As we work hard to support more models in more languages, and to improve the accuracy…read more

0