NULI 블로그

오픈 워크샵에 참여하시는 분들을 위한 선물!

NULI — Thu, 16 Feb 2012 19:15:59 +0900

"마크업 개발자를 위한 오픈 워크샵"이 일주일 정도 남았습니다.
2차 안내 시 행사 기념품 안내가 살짝 나갔습니다만, 참가 신청을 하신 여러분의 마음이 더 설렐 수 있도록 조금 더 자세히 안내해드리고자 합니다. 기대되시죠? ^^

유니크한 디자인, NHN스토어 제품

예쁜 디자인과 실용성을 두루갖춘 NHN스토어 제품을 추첨을 통해 선물해드립니다.

추첨은 공정하게!

맑고 투명한 추첨을 위해 추첨 방법을 여러분께 공개해드립니다.
행사 당일, 데스크에서 고유 번호가 적힌 리플렛을 드립니다.
모든 발표가 끝난 후에는 랜덤한 숫자를 추첨하게 되는데요, 여러분도 직접 테스트해보실 수 있습니다.

테스트 참고 사항

마우스의 왼쪽 클릭, 키보드의 스페이스바, 화면 터치로 동작합니다.
HTML5와 CSS3를 이용해 구현했기 때문에 인터넷 익스프롤러 8 이하의 브라우저에서는 동작하지 않습니다.
작동 시 효과음이 발생합니다.

랜덤 숫자 추첨 테스트

참가 신청을 하신 경우, 꼭! 참석 하셔서 행운의 기회를 잡으세요!
그럼 2월 25일에 뵙겠습니다.^^

마크업 개발자를 위한 오픈 워크샵 3차 안내

NULI — Tue, 14 Feb 2012 16:09:22 +0900

Expand Your Domain!

전문분야를 넓히고 싶은 마크업 개발자들을 위한 오픈 워크샵

행사 정보

일시: 2012년 2월 25일 오후 1시 부터 6시 30분까지
장소: NHN 그린 팩토리 커넥트홀

성원에 감사드립니다.

2월 7일 오후 3시에 온오프믹스에서 참가 신청을 받기 시작했으며, 1시간여만에 참가 신청이 마감되었습니다. 여러분들의 뜨거운 관심과 성원 감사드립니다.

참가 정원이 250명이었던 이유

행사가 진행될 곳은 그린팩토리 내의 커넥트홀 입니다. 사진에서 보실 수 있는 것 처럼 깔끔하고 좋은 시설을 갖추고 있습니다. 그러나 아쉽게도 좌석수가 250석으로 한정되어 있습니다. 참여 하시는 모든 분들이 편안한 환경에서 발표를 들으실 수 있도록 참가 정원을 좌석수와 동일하게 잡았던 점 양해부탁드립니다.

20분을 더 초대하려고 합니다.

참가 신청이 마감된 후에도 참여를 희망하시는 대기자분들이 300명 가까이 되었습니다. 전문 분야를 넓히고 싶은 마크업 개발자분들의 열정을 너무나도 잘 알기에 정원을 약간 늘리기로 하였습니다. 현재 온오프믹스 대기자로 계신 분 중 신청하신 순서대로 20분을 더 초대합니다. 단, 정원을 초과할 경우 자리가 다소 불편할 수 있는 점 양해부탁드립니다.

참여가 어려우실 경우 꼭 취소해주세요.

2무료로 진행되는 행사인만큼 신청하는 것도 쉽지만 불참하기도 쉬울 것으로 예상하고 있습니다. 혹시라도 신청 후 참여가 어려우신 분께서는 신청을 꼭! 취소해주셔서 다른 분께 참여의 기회가 갈 수 있도록 부탁드립니다. 신청 후 불참하신 경우는 온오프믹스에 기록이 남아 다른 행사 참여 시 불이익이 될 수 있습니다.

아쉬워하지 마세요.^^

이번 오픈 워크샵은 NHN 내 마크업 개발자들이 자발적으로 준비한 행사입니다. 발표 내용을 더 많은 분들께 공유해드리고 싶지만 행사를 여러번 진행하기는 여건 상 어렵습니다. 그래도 너무 아쉬워하지 마세요~ 모든 발표 자료는 널리를 통해 제공될 예정입니다. 그때까지 조금만 기다려주세요.^^.

마크업 개발자를 위한 오픈 워크샵에 여러분을 초대합니다!

NULI — Mon, 30 Jan 2012 17:12:58 +0900

공지가 늦어 죄송합니다. ^^

[NHN 그린팩토리 지도 보기]

오픈 워크샵 참가 신청이 마감되었습니다.

많은 관심 가져주셔서 감사합니다. ^^

Expand Your Domain!

전문분야를 넓히고 싶은 마크업 개발자들을 위한 오픈 워크샵

행사 정보

일시: 2012년 2월 25일 오후 1시 부터 6시 30분까지
장소: NHN 그린 팩토리 커넥트홀

아젠다

실제 발표 순서는 변동이 있을 수 있습니다.

웹 접근성

네이버의 웹 접근성 개선 방향 (2P3E): Preparation, Proposal, Education, Execution, Example - 다섯 단계에 걸쳐 네이버의 웹 접근성 개선 방향을 소개합니다.
접근성의 기본은 의미있는 마크업으로부터!! 그럼 Ajax RIA는 어떻게 기본을 지킬까요?: 내가 만든 시맨틱 마크업 문서… 스크린리더, 점자리더기 등의 보조 기기는 이 문서를 어떻게 해석하여 시각장애인 에게 전달하는 걸까요? HTML만으로는 의미있게 만들기 어려운 복잡한 Ajax 애플리케이션은 어떻게 접근성을 보장할 수 있을까요?
네이버는 시각장애인이 모든 서비스를 다 검사한다며?!: 네이버에서는 사용성 테스트를 어떤 방식으로 진행하고 있을까? 사용성 테스트에 대한 전반적인 소개와 시각장애인이 직접 뽑은 서비스의 문제점들을 알아봅니다.

성능 최적화

오빠~ 네이버 왜 이렇게 늦게 떠?

최적화 꼭 해야하나요? Front-End 최적화 방법으로 어떤 것이 있을까요?

Front-End 최적화의 끝판왕, CSM + Markup Complexity

서버에 부하를 주는 이미지들을 확 줄이는 방법 : CSM
HTML 구조설계, 이렇게 하면 브라우저가 덜 피곤합니다 : Markup Complexity
네이버 me는 어떻게 했을까요? 사례를 소개해 드립니다.

The Anatomy of Image Format

성능에 중요한 영향을 주는 이미지를 포맷별로 속속들이 파헤쳐봅니다!

모바일 웹

태블릿PC를 위한 마크업: 급증하고 있는 iPad, 안드로이드 태블릿 사용자를 위해 기존의 PC를 위한 웹사이트를 최적화 할 수 있는 방법을 소개합니다.
네이버 모바일의 숨겨진 코드 읽기: 여기엔 왜 이런 코드를 썼을까? 어디서 이런 코드가 나온거지? 네이버 모바일의 코드와 만들어지기까지의 과정을 파헤쳐봅니다!

Spot Speech

마크업 역량 개발 모델을 기반으로 특정 기술 트랙의 전문가 되기: 개인의 기술 수준을 정량화하고, 교육 플랫폼을 통해 발전시켜 마크업 개발 분야의 전문가가 되는 방법 소개합니다.
모바일 마크업을 위한 디자이너와의 소통?! 우린 이렇게 할라구요: HTML과 CSS 기술의 발전으로 PC뿐 아니라 모바일 환경에서 다양하게 적용할 수 있게 되었습니다. 그 중 CSS3의 효과들은 손쉽게 적용할 수 있지만, 적용을 하면서 디자이너와 더 많은 커뮤니케이션을 해야만 하는 상황입니다. 디자이너와 좀 더 원활하게 커뮤니케이션 할 수 있는 방법은 없는걸까요?

참가 신청 및 행사 안내

참가 신청은 온오프믹스(http://onoffmix.com)를 통해 2월 24일 오후 3시까지 진행됩니다.
http://onoffmix.com/event/5352로 접근하시거나 온오프믹스에서 '마크업 개발자를 위한 NHN UIT센터 오픈 워크샵'을 검색하시면 접수하실 수 있습니다.
참가비는 무료입니다.
아쉽게도 식사 제공은 없습니다만, 갈증을 해소할 수 있는 음료는 제공해드릴 예정입니다는
그린팩토리 주차는 3시간까지 무료이며, 그 이후부터는 주차요금이 징수됩니다. 가급적 대중교통을 이용해주세요.

행사 기념품

HTML/CSS 코딩 컨벤션(참석자 전원에게 제공), NHN Store 제품(추첨을 통해 제공)

찾아오시는 길

정자역(분당선, 신분당선) 3번 출구로 나오신 후, 아데나팰리스 아파트(1층에 스타벅스 위치)까지 10분 정도 걸어오세요. 아데나팰리스 아파트를 끼고 오른쪽으로 꺾으시면 대각선으로 초록색 유리 건물의 그린팩토리가 위치하고 있습니다. 정자역 3번 출구에서 '상록마을, 미켈란쉐르빌'로 가는 버스를 이용하셔도 됩니다(정자역에서 2정거장 소요).

통합검색 태블릿PC 최적화

지요 — Thu, 19 Jan 2012 15:59:53 +0900

통합검색에 반응형 웹디자인을 적용해 볼까?

반응형 웹디자인? 그거 뭐 별거 있나? 통합검색에 한번 적용해 볼까?

...라는 아주 가벼운(?) 생각으로 시작된 통합검색 태블릿PC 최적화 프로젝트.

진행하고 보니 뷰포트, 미디어쿼리, 개발 분기.. 파고들수록 아악~ 머리야~ @ㅁ@

기존 통합검색 구조를 그대로 사용하고, CSS로만 UI를 변경하는 일은 생각해야 할 것과 제약 사항이 많았습니다. 그래서 통합검색 태블릿PC 최적화는 반응형 웹디자인의 개념을 가지고 아이패드 최적화로 촛점을 맞추게 되었습니다.

통합검색 태블릿PC 최적화 작업에는 어떤 것들이 있나?

1. 뷰포트 선언은 어떻게 하지?
가로, 세로 화면 전환에 따라 UI도 달라지고 검색옵션도 열고 닫혀야 하는 이슈가 있어 여러가지 테스트 후에 뷰포트는 아래와 같이 사용하였습니다.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

2. 미디어쿼리를 사용해 보자.
아이패드 가로, 세로 화면 전환에 따라 다른 UI를 적용하기 위해 CSS3 미디어쿼리를 사용했습니다.

가로 (해상도 1024px 이하)

@media only screen and (max-width : 1024px) {
style
}

세로 (해상도 768px 이하)

@media only screen and (max-width : 768px) {
style
}

3. CSS는 개발 분기가 필요해!
기존 통합검색 구조를 사용해 아이패드에 최적화된 UI를 제공하기 위해서는 아이패드에서만 노출하게 될 CSS로 분리할 필요가 있었습니다. 해당 CSS에는 달라지는 UI에 대한 스타일만 정의하였습니다.

4. PC vs 태블릿PC 비교체험

와~ 가로, 세로 화면이 다르네?
가로, 세로 각 화면에 최적화 된 화면 구성으로 보다 가까운 네이버 통합검색이 되었습니다. 기존 3단 구성에서 좌측 탭 메뉴 및 검색 옵션을 상단으로 이동하고 가로, 세로에 따라 우측 실급검 영역을 이동해 화면에 최적화 하였습니다.

[iPad에서 본 PC버전, 세로, 가로 태블릿버전 (맨위 좌측부터 시계방향)]

한눈에 쏙 들어오는 커진 글자
작은 글씨의 PC화면과 다르게 아이패드에서는 한눈에 쏙 들어오는 커진 글자로 검색이 즐거워졌습니다.

[iPad에서 본 PC버전(좌)과 태블릿버전(우)]

손가락이 편해! 넓어진 클릭 영역
시원시원하게 버튼도 커지고, 클릭 영역도 넓어지게 되어 검색이 빠르고 쉬워졌습니다.

[iPad에서 본 PC버전(작은 이미지)과 태블릿버전(큰 이미지)]

그들의 궁금증은?

통합/탭검색 화면을 통해 UI 변경이 가능한 부분과 불가능한 부분을 정리해 기획/UI에 공유할 필요가 있었고, 데모 페이지를 통해 테스트 및 협의를 할 수 있었습니다.

Q. 검색 결과 화면이 아이패드와 PC가 다른데, 모든 UI가 변경 가능한 것 아닌가요?
A. 화면이 다르다고 해서 HTML 구조도 다를 것이라고 생각하면 안됩니다.
HTML 구조는 변경하지 않고, CSS 속성으로만 아이패드에 최적화를 진행하는 것이기 때문에 여러 가지 제약사항이 있습니다. HTML이 변경되려면 개발 분기 처리가 필요한데요, 그렇게 되면 운영 및 관리의 어려움과 코드양의 증가로 성능저하의 우려가 있습니다.

예제)

변경 가능	CSS로 변경	- 폰트 사이즈 및 행간, 컬러 - 배경이미지의 아이콘, 블릿, 버튼 박스 등
변경 불가능	HTML 변경 필요	- 전경이미지의 타이틀, 버튼 등 - 이미지 텍스트의 시스템 텍스트로 변경 (시스템 텍스트의 이미지 텍스트로 변경)

기획/UI에서 확인이 어려운 것들에 대한 부분은 마크업에서 확인 및 테스트를 통해 공유되어야 하고, 이는 서비스에 맞게 진행되어야 합니다.

반응형 웹 디자인의 기술을 서비스에 적용하기 위해서는 기술을 유연하게 바라볼 수 있는 시각과 응용이 필요합니다.

웹 접근성 평가 도구 N-WAX

겨미겨미 — Tue, 03 Jan 2012 13:58:51 +0900

안녕하세요. 겨미겨미입니다. 우선! 2012년 임진년에는 항상 행복하고 즐거운 일이 가득하시길 바라겠습니다. 새해 복 많이 받으세요! ^^

오늘은 웹 서비스가 접근성을 잘 지켰는지 쉽게 평가할 수 있는 도구를 하나 소개해드리려고 합니다. 이름은 N-WAX(NHN Web Accessibility eXtension)이라고 합니다.

그림1 N-WAX 실행 화면

N-WAX 제작 배경

우선 구체적인 소개에 앞서 웹 접근성 평가 도구인 N-WAX를 제작하게 된 배경을 설명해드릴께요.

지금 이 글을 보고 계신 분들은 물론이고 많은 웹 업계에 종사하시는 분들이 웹 접근성에 대한 관심을 갖고 계시고 웹 접근성을 향상시킬 수 있는 방법들을 고민하고 공부하고 계실 것이라고 생각하고 있습니다. 그렇죠? NHN에 소속된 마크업 개발자들도 몇년전부터 이런 마음을 가지고 어떻게 하면 저희가 만드는 서비스에 웹 접근성을 완벽하게 적용할 수 있을까하는 생각들을 많이 해왔습니다. 야후의 접근성 활동을 바라보며 저희도 저렇게 저희가 만든 서비스들이 모든 사람들이 차별없이 이용할 수 있는 환경을 만들고 그런 문화를 널리 알리고 싶다라는 마음을 계속 갖고 있었습니다.

하지만 현재 네이버에서 제공되고 있는 여러 서비스들의 접근성 준수 현황은 자신있게 좋다고 말씀드릴 수 있을만한 상태는 아닙니다. 그래서 네이버의 웹 접근성 준수를 위한 토대를 마련하는 여러가지 활동들을 진행하고 있는데요. 그 일환으로 웹 서비스에 어떤 문제가 있는지를 쉽게 평가하고자 만든 도구가 바로 N-WAX입니다.

N-WAX의 겉모습과 실행결과를 보시면 낯이 익다고 생각하시는 분들도 있으실텐데요. 그것은 바로 PAJET이라고 하는 북마클릿형 웹 접근성 평가 도구에서 모티브를 따왔기 때문입니다. 홍윤표님과 신현석님이 제작하신 이 툴은 실행 시 대체 텍스트, 레이블, 표 등 주요 접근성 항목을 쉽게 확인할 수 있는 레이어를 표시해주는 기능을 가지고 있습니다. N-WAX는 북마클릿이 아닌 파이어폭스와 크롬의 브라우저 확장 기능 형태로 제작하여 PAJET에 추가적으로 페이지에 포함된 프레임 내부의 콘텐츠도 평가할 수 있고, 명도 대비 검사 기능 및 HTML 유효성 검사 결과도 표시되도록 하였습니다. (명도 대비 검사, HTML 유효성 검사는 파이어폭스 확장기능에서만 가능합니다.)

그림2 N-WAX 명도 대비 검사 기능 실행 화면

N-WAX 설치 및 사용방법

그럼 도구 사용법을 간략하게 설명드릴께요. 설치방법 및 N-WAX의 기능 문서는 Markup Tools의 N-WAX 페이지를 참고해주세요.

먼저, 설치할 브라우저에 해당하는 확장기능을 다운로드 받습니다.

파이어폭스: 파이어폭스 부가 기능 - N-WAX
구글 크롬: 크롬 웹 스토어 - N-WAX

그림3 N-WAX 설치 페이지

확장기능을 설치하면 브라우저 툴바 영역에 사다리 모양의 아이콘이 나타납니다. 이 아이콘을 클릭하시면 N-WAX 사이드바가 노출됩니다. 파이어폭스는 사이드바의 현재 페이지 검사(Check current page) 버튼을 클릭하시면, 크롬은 아이콘 클릭 즉시 N-WAX로 현재 페이지를 검사할 수 있습니다. 검사 결과의 각 항목 앞에 표시되는 숫자(예: 1.1.1, 2.7.2)는 저희 내부적으로 만든 가이드의 번호를 가리키는 것인데요. 이 가이드도 조만간 소개해드릴 예정이니 기대해주세요!

참! 아이콘이 왜 사다리 모양인지 설명해드릴께요. 이 아이콘은 저희 팀의 펄님 님이 만드신건데요. "사람과 웹을 이어주고 더 나아진다(위로 올라간다)" 라는 의미를 부여하고 싶으셨다고 하네요. 의미를 생각하시면 사다리 아이콘이 더 친숙하게 느껴지시지 않을까 생각합니다.

그림4 N-WAX의 사다리 모양 아이콘

N-WAX 소개를 마치며...

널리를 통해 공개드리는 도구는 모두 그렇지만 좋은 의견이나 아이디어 주시면 더 나은 툴로 발전하는 데 큰 밑거름이 될 것이라고 생각합니다. 다음에 또 더 좋은 내용으로 찾아뵙겠습니다.

웹표준개발 2팀에서 마크업 개발 경력사원을 채용합니다.(접수마감)

NULI — Wed, 28 Dec 2011 15:35:39 +0900

** 접수 마감합니다. **

안녕하세요. 웹표준개발2팀입니다. :)

저희 팀에서 진취적이며 능력있는 마크업 개발자분들을 모십니다.

많은 분들이 지원하셔서 위 사진의 빈 자리를 채워주세요~

자세한 내용은 아래 참조 바랍니다.

모집대상
- 다양하고 풍부한 실무 경험과 발전성을 지닌 마크업 개발자
- 모집인원 : 정규 3명

주요업무
- 네이버 모바일 서비스의 마크업
- 모바일 마크업 개발의 R&D 및 고도화 작업

지원 공통 조건사항
    - 웹표준 개발(마크업) 경력 2년 이상자
   - DOM, Javascript, 크로스브라우징 등에 대한 이해와 기술을 갖춘 자
   - 웹 접근성에 대한 이해와 기술을 가진 자
   - 웹 문서 최적화에 대한 이해와 기술을 가진 자
   - 모바일 웹 기술 트랜드 대한 이해와 관심을 가진 자

- 모바일 웹 마크업 개발 경험자 우대

접수 기간
- 점수 마감합니다.

지원방법
    - HTML이나 doc포맷의 이력서
    - 역량 중심의 자기소개서
    - 본인의 참여도가 80% 이상 포함된 마크업 포트폴리오 (*.zip)

제출서류 보내실 이메일 주소 : ws2mobile@naver.com

HTML5 & CSS3 reference

꿈트리 — Wed, 28 Dec 2011 10:44:41 +0900

* We post the same blog article for the english speakers.

Hello. This is Choi Daeyoung.

I’m working in Web Standard Team, NHN China.

Web standard team in NHN China

It’s already been one year since our web standard team was established in China in Nov. 2011.

In our team, there is a huge amount of effort to improve our skills through various trainings and to develop a web standard markup with high quality during last year.

Nowadays, we are taking charge of the projects and sustaining the jobs which are related to web standard for Naver services.

HTML5 & CSS3 Reference Open

Various technologies and platforms have been developed with the fast evolution of network.

We are trying hard to response to the rapid changing of network and pleasure to share part of our outcomes, HTML5 & CSS3 reference, with people who are interested in.

Please click here to browse HTML5 & CSS3 reference

HTML5&CSS3 reference is a collection of resources provided by W3C and other well-known sites for convenience.

Make it easier with various examples

In HTML5&CSS3 reference, there is a large number of examples available for better understanding of new elements and properties. You can get the responding result by changing the former value.

Catch browser compatibilities just at one glance

If you wonder the browser compatibility for the new features, please refer to the small icons on the left side of HTML5 and CSS3 menu. Green color stands for those which are supported by your browser, yellow color for partially supported and red color for not supported.

Our HTML5&CSS3 reference contains the compatibilities of 7 browsers, 5 for PC and 2 for mobile. You can find most of the support information very easily in COMPATIBILITYmenu.

With variety of information!

If you need information for updated elements and attributes or updated syntax in html5, please refer to APPENDIX menu.

It shows the global attributes, changed syntax, changed elements and attributes in html5 as well as value and unit of CSS3.

Make it more convenient with different resolutions

Since various devices allow you visit website with different resolutions, to get information more conveniently we did implementation of web design by using media queries.

(You may find more detail information in this link. ( http://html.nhncorp.com/blog/textyle/47789 )

Even though we made a lot effort to make it perfect, we still have many obstacles to overcome.

Web standard team NHN China will keep going on for better reference and we hope it can provide valuable information to people who are interested in HTML5 and CSS3.

Please pay more attention to us, thanks.

메일 Lite의 시각 장애 접근성 개선

펄님 — Mon, 19 Dec 2011 13:53:19 +0900

안녕하세요. 펄님입니다.
2011년이 열흘 남짓 남았네요. 시간이 정말 빠르게 지나가는 것 같습니다.
오늘은 10월과 11월 사이에 진행되었던 메일 Lite의 접근성 개선 내용을 공유해드리려고 합니다. 벌써부터 기대되시죠? ^^

Goodbye SE, Welcome Lite!

기존의 메일 서비스보다 간편한 사용자 경험을 제공하고 저사양의 환경에서도 이용할 수 있는 '메일 SE'라는 서비스가 있었습니다. 이 서비스는 시각 장애 환경에서도 무리 없이 이용할 수 있도록 제공되기도 했습니다.
그리고 2011년 11월 17일, 메일 SE의 장점을 그대로 가지고 있으면서 더 다양한 환경을 만족시킬 수 있도록 메일 SE가 '메일 Lite'로 통합되었습니다. (메일 Lite 자세히 보기)
그림 1에서 보실 수 있는 것 처럼 생김새는 많이 다르지만 메일 SE에 적용되어 있던 접근성을 메일 Lite에서도 그대로 보장하는 것이 우리의 미션이었답니다~

그림 1. 메일 Lite와 메일 SE

무엇이 개선되었나요?

대체 텍스트 빠짐 없이 제공하기

대체 텍스트란, 이미지처럼 텍스트로 표현되지 않는 콘텐츠를 시각 장애 환경에서도 인식할 수 있도록 텍스트 형태의 정보로 제공하는 것을 의미하며, alt 속성을 통해 제공할 수 있습니다.
메일 Lite에는 대체 텍스트가 비교적 잘 제공되어 있었지만 어떤 이미지도 누락되지 않도록 꼼꼼히 검토하였고, 사람마다 다른 이미지로 제공되는 메일네임택 서명에 대체 텍스트가 없다는 것을 발견! 바로 개선에 돌입했습니다.^^

지금은 어느 누구의 메일네임택에도 대체 텍스트가 바르게 제공되고 있답니다~ (그림 2)

그림 2. 대체 텍스트가 바르게 제공된 메일네임택 서명

문서 제목 구체적으로 제공하기

브라우저 상단에 표시되는 웹 문서의 제목은 문서의 내용을 대표할 수 있어야 합니다.
웹 페이지를 한 눈에 확인할 수 있다면 제목이 바르게 제공되지 않아도 웹 콘텐츠를 이해하는 데 큰 어려움이 없겠지만, 문서의 제목부터 순차적으로 콘텐츠를 탐색해야 하는 시각 장애인에게 제목이 바르게 제공되는 것은 매우 중요한 일입니다.
이전에는 환경 설정 팝업의 문서 제목이 콘텐츠의 내용이 바뀌어도 동일하게 제공되었습니다.(그림 3)

그림 3. 환경 설정 팝업의 문서 제목 개선 전

개선 후에는 그림 4에서 보실 수 있는 것 처럼 페이지가 바뀔 때마다 주요 내용이 문서 제목으로 표시된답니다.

그림 4. 환경 설정 팝업의 문서 제목 개선 후

키보드 접근성 보장하기

시각 장애 환경에서는 마우스를 사용하기 어렵기 때문에 키보드만으로 모든 기능을 수행할 수 있도록 하는 것 역시 매우 중요합니다. 키보드 포커스가 닿지 못하는 부분은 없는지, 키보드 포커스 순서는 논리적인지를 잘 살펴보아야 합니다.
특히, 레이어의 키보드 접근성을 놓치기 쉬운데 메일 Lite 역시 개선 전에는 레이어의 키보드 접근성이 전혀 고려되지 않았습니다. 개선 후에는 키보드만으로도 레이어를 열고 닫을 수 있으며 레이어 안에 있는 콘텐츠도 순차적인 탐색이 가능합니다. (그림 5)

그림 5. 키보드 접근성이 개선된 레이어

적절한 레이블 제공하기

사용자의 입력이 필요한 폼 콘트롤 요소가 제공 될 때는 레이블을 바르게 제공하여 무엇을 입력해야 하는지 정확하게 알려주어야 합니다. 레이블은 <label> 요소로 제공할 수 있으며, <label>의 for 속성값과 폼 콘트롤 요소의 id 속성 값을 같게 하여 두 요소가 묶여 있다는 것을 브라우저에 알려주어야 합니다.

메일 Lite에는 입력이 필요한 요소가 곳곳에 배치되어 있습니다. 하지만 적절한 레이블이 제공되지 않아 시각 장애를 가지고 있는 사용자에게 혼란을 줄 수 있는 문제점을 안고 있었죠. (그림 6)

그림 6. 레이블이 적절하게 제공되지 않았던 다양한 사례

개선 후에는 그림 7과 같이 메일을 선택할 때 메일제목이 레이블로 제공되어 시각 장애 환경에서도 체크 박스의 인식이 수월하도록 하였으며, 그 외의 폼 콘트롤 요소에도 레이블을 적절하게 제공하였습니다.

그림 7. 레이블이 적절하게 제공된 메일 선택 체크 박스

앞으로는....

얼마 전에는 시각 장애인 한 분을 모시고 메일 Lite의 사용성 테스트를 진행했습니다.
기술적으로는 접근성을 잘 보장한 것 같은데도 부족한 점이 많이 있더라구요.^^;
앞으로는 사용성 테스트에서 나온 개선 사항들을 메일 Lite에 적용하고, 메일 Lite 뿐 아니라 다른 서비스에도 웹 접근성이 보장될 수 있도록 노력할 계획입니다.
2012년에는 손발을 더 바삐 움직여야겠네요- 기대해주세요~!

해피빈 기부 후기(코딩컨벤션 출간 이벤트)

NULI — Mon, 12 Dec 2011 17:52:28 +0900

안녕하세요. 웹표준개발팀 냐옹입니다.

올해 9월에 진행하였던 “HTML/CSS 코딩컨벤션” 출판 기념이벤트로 진행하였던 “시각장애인의 발이 되어 주세요~!!” 해피빈 기부 참여에 대한 행복한 메일을 받았습니다.

저희는 5차 모금 시기에 모금을 하였구요~ 많은 분들이 참여해주셨기 때문에,

전체 기부액 \6,605,000원 중 \1,581,000(24%)에 해당하는 금액을 기부하였고, 여러분의 참여로 인한 결과를 보고하고 행복을 나누어야 할 것 같아 글을 쓰게 되었습니다~!

아래는 다른 후원금들과 합쳐 내년1월 한빛맹아원에서 구입 예정인 휠체어 리프트 차라고 합니다.

아래는 메일 원문입니다.

> 한빛맹아원 해피 로그 방문하기

저희 역시 “HTML/CSS코딩컨벤션” 에 많은 관심 가져주셔서 너무 감사합니다~!

2011 마지막 남은 한달 알차고 따뜻하게 보내시고,

저희는 2012년에 또 다른 마크업 기술 서적으로 찾아 뵙도록 하겠습니다~

감사합니다. :D

Font
font-family
font-size
font-style
font-variant
font-weight
letter-spacing
line-height
text-decoration
text-align
text-indent
text-transform
white-space
word-spacing
color
Background
bg-attachment
bg-color
bg-image
bg-position
bg-repeat
Box
width
height
border-top
border-right
border-bottom
border-left
margin
padding
max-height
min-height
max-width
min-width
outline-color
outline-style
outline-width
Positioning
position
top
bottom
right
left
float
display
clear
z-index
List
list-style-image
list-style-type
list-style-position
Table
vertical-align
border-collapse
border-spacing
caption-side
empty-cells
table-layout
Effects
text-shadow
-webkit-box-shadow
border-radius
Other
overflow
cursor
visibility

Font
font-family
font-size
font-style
font-variant
font-weight
letter-spacing
line-height
text-decoration
text-align
text-indent
text-transform
white-space
word-spacing
color
Background
bg-attachment
bg-color
bg-image
bg-position
bg-repeat
Box
width
height
border-top
border-right
border-bottom
border-left
margin
padding
max-height
min-height
max-width
min-width
outline-color
outline-style
outline-width
Positioning
position
top
bottom
right
left
float
display
clear
z-index
List
list-style-image
list-style-type
list-style-position
Table
vertical-align
border-collapse
border-spacing
caption-side
empty-cells
table-layout
Effects
text-shadow
-webkit-box-shadow
border-radius
Other
overflow
cursor
visibility

Font
font-family
font-size
font-style
font-variant
font-weight
letter-spacing
line-height
text-decoration
text-align
text-indent
text-transform
white-space
word-spacing
color
Background
bg-attachment
bg-color
bg-image
bg-position
bg-repeat
Box
width
height
border-top
border-right
border-bottom
border-left
margin
padding
max-height
min-height
max-width
min-width
outline-color
outline-style
outline-width
Positioning
position
top
bottom
right
left
float
display
clear
z-index
List
list-style-image
list-style-type
list-style-position
Table
vertical-align
border-collapse
border-spacing
caption-side
empty-cells
table-layout
Effects
text-shadow
-webkit-box-shadow
border-radius
Other
overflow
cursor
visibility

Font
font-family
font-size
font-style
font-variant
font-weight
letter-spacing
line-height
text-decoration
text-align
text-indent
text-transform
white-space
word-spacing
color
Background
bg-attachment
bg-color
bg-image
bg-position
bg-repeat
Box
width
height
border-top
border-right
border-bottom
border-left
margin
padding
max-height
min-height
max-width
min-width
outline-color
outline-style
outline-width
Positioning
position
top
bottom
right
left
float
display
clear
z-index
List
list-style-image
list-style-type
list-style-position
Table
vertical-align
border-collapse
border-spacing
caption-side
empty-cells
table-layout
Effects
text-shadow
-webkit-box-shadow
border-radius
Other
overflow
cursor
visibility

Font
font-family
font-size
font-style
font-variant
font-weight
letter-spacing
line-height
text-decoration
text-align
text-indent
text-transform
white-space
word-spacing
color
Background
bg-attachment
bg-color
bg-image
bg-position
bg-repeat
Box
width
height
border-top
border-right
border-bottom
border-left
margin
padding
max-height
min-height
max-width
min-width
outline-color
outline-style
outline-width
Positioning
position
top
bottom
right
left
float
display
clear
z-index
List
list-style-image
list-style-type
list-style-position
Table
vertical-align
border-collapse
border-spacing
caption-side
empty-cells
table-layout
Effects
text-shadow
-webkit-box-shadow
border-radius
Other
overflow
cursor
visibility

코딩컨벤션 오프라인/e-book 배포

NULI — Thu, 24 Nov 2011 18:33:45 +0900

안녕하세요. 웹표준개발팀 냐옹입니다.

올해 여름에 해피빈을 통해 “HTML/CSS 코딩컨벤션” 도서 출간 이벤트를 진행하였었는데요,
더 많은 분들이 받아 볼 수 있게 오프라인/e-book 배포를 하려합니다.

오프라인 배포처는 저희 정자 신사옥(그린팩토리) Library 1층 이구요.

3,000원 이상 기부해주시는 분들에 한해 도서를 가져가실 수 있도록 마련하였습니다(거스름돈은 마련되어있지 않으니 오시기 전에 확인 부탁드릴게요~ ^^).

근성의 기부

안내데스크 앞에 비치되어있는 모습

아! NHN 라이브러리는 그린팩토리 정문으로 들어오시어 우측을 바라보면 바로 보이구요~
Library는 월~금에는 10:00~22:00, 토~일에는 10:00~17:00 시간에 이용하실 수 있으며, 휴관일도 있으니 오시기전에 꼭 확인해주세요~

12월 휴관일 일정 알아보기

라이브러리 내 코딩컨벤션 비치 위치

1층 라이브러리에는 디자인, IT 전문 서적도 많이 있으니 관심있으신 분들은 주말에 한번 오셔서 둘러보시는 것도 좋을 것 같아요.
NHN Library 사이트 바로가기

많은 관심 가져주시어 너무 감사드립니다~!!

* 200권 소진 후 모금된 금액은 역시 해피빈 “시각장애인의 발이되어주세요~!!” 에 기부하려합니다. 자동차를 사는 그날까지~!! ^^;;

“HTML/CSS 코딩컨벤션” 을 볼 수 있는 또 다른 방법!!

“네이버 북스”에 e-book 형태로 발행하였습니다. 원래 10월에 발행하였었는데, 아이폰 어플을 기다리다보니 공지가 조금 늦어졌습니다. 현재 “안드로이드” 폰에서 실행하는 “네이버 북스”에서만 e-book 형태로 받아보실 수 있구요. 아이폰에서는 아직 서비스되지 않고 있으니 이점 양해부탁드려요~

[서비스 이용 방법]
네이버북스 실행 -> 온라인서점 -> 카탈로그 -> 기타 -> HTML/CSS 코딩컨벤션 다운로드

네이버북스에서 무료로 배포

코딩컨벤션 e-book

"이미지 최적화 분석 도구" 공개

rainygirl — Thu, 17 Nov 2011 16:53:52 +0900

안녕하세요? 처음 인사드립니다.
올해 6월부터 NHN 웹표준개발1팀에 합류한 rainygirl 입니다.

누구나 간단히 써볼 수 있는 "이미지 최적화 분석 도구"를 제작하게 되어 NULI를 통해 공개하게 되었습니다.

모바일 웹서비스를 제작할 때 가장 신경쓰이는 부분은 아무래도 "용량" 문제일 것입니다.
HTML, CSS 파일은 빈줄과 공백을 제거하는 Minify를 통해 파일 용량을 줄일 수 있지요.
이미지파일도 마찬가지로 군더더기 데이타를 제거하여 용량을 크게 줄일 수 있습니다.

이미지에 군더더기 데이타라니?

JPG 이미지포맷에는 촬영기기의 모델명, 촬영일시, 노출 감도, 편집 프로그램 정보 등 그림데이타 이외의 여러 정보가 남겨집니다.
PNG 이미지포맷 역시 마지막 수정시간, 색상히스토그램, ICC 칼라 프로필, 감마값 등 그림데이타 이외의 여러 정보가 남겨집니다.
이러한 데이타를 흔히 '이미지 메타데이타(Metadata)'라고 부릅니다. 사진편집작업을 할때엔 이러한 정보가 유용하겠지만 웹서비스 UI에서 사용되는 이미지 파일은 이러한 정보를 필요로 하지 않습니다. 다시말해 불필요한 데이타인 셈이지요.

통상 20KB 정도의 용량을 차지하는 이들 메타데이타를 제거하면 이미지파일 용량이 줄어들어 웹서비스 로딩 속도가 향상될 것입니다. 그리하여!

간단한 "이미지 최적화 분석 도구"를 제작, 공개하게 되었습니다.
이미지 파일 헤더를 분석하여 이미지 메타데이타의 잔류여부를 체크하고 적정 압축률을 확인하여 최적화된 웹서비스를 만드는 데에 도움을 주는 도구입니다.

이미지 최적화 분석도구, 어떻게 사용하나요?

NULI 사이트의 MARKUP TOOLS 에서 "이미지 최적화 분석 도구" 링크를 눌러 이미지 URL을 입력하면 메타데이타 잔류 여부를 판별해 드립니다.
메타데이타가 남아있다면 어떤 데이타가 남아있는지 보여드리고, JPG 파일의 경우 추가로 압축율을 높여 용량을 더 줄일 수 있는지 비교할 수 있는 차트도 보여드립니다.

메타데이타가 남아있는 경우

메타데이타가 제거된 경우

그렇다면, 이미지 메타데이타는 어떻게 제거하나요?

포토샵의 경우 Save as 대신 Save for Web 메뉴에서
Metadata 옵션을 None으로 지정하여 이미지를 저장하면
메타데이타를 간단히 제거할 수 있습니다.

그 외에도 다양한 메타데이타 제거 도구가 있으니 가장 적합한 도구를 사용하여 메타데이타를 제거 후 다시 체크해보시면 됩니다.

이미지 최적화 분석 도구를 NULI를 통해 안정적으로 제공해드릴 수 있게 되어 기쁩니다.
웹서비스 최적화를 고민하는 분들에게 널리 사용되었으면 하는 바램입니다.
향후 N-MET 기능에 추가하는 등 더욱 편리하게 사용하실 수 있도록 지속적으로 개선해 나가겠습니다.
고맙습니다.

HTML5 & CSS3 reference

꿈트리 — Tue, 15 Nov 2011 15:09:47 +0900

안녕하세요 NHN China 웹표준화팀 최대영입니다.

중국에도 웹표준화팀이..

2010년 11월 , 멀고먼 중국에 NHN China 웹표준화팀이 조직되었습니다.

벌써 1년이란 시간이 지났네요

지난 1년동안 중국 웹표준화팀에서는 여러 교육을 통해 역량을 키우고 좀 더 나은 품질의 웹표준 마크업을 하기 위해 많은 노력을 해왔습니다.

지금은 네이버 서비스의 프로젝트 및 유지보수 업무를 담당하며 네이버 서비스의 웹표준화를 위해 노력하고 있습니다.

HTML5 & CSS3 reference 오픈

웹은 참 빠르게 진화하고 다양한 환경과 기술들이 생겨나고 있습니다.

NHN China 웹표준화팀에서는 빠르게 변화하는 웹에 대응하기 위해 많은 교육과 노력을 하고 있는데요

그 노력의 일환으로 외부에 관심있는 분들과 함께 공유 하고자 HTML5 & CSS3 reference 제작 하였습니다.

HTML5 & CSS3 reference로 바로가기

HTML5&CSS3 reference는 기존 W3C와 여러 곳에 널리 퍼져있던 자료를 정리,수집하여 보다 보기 편하고 알기 쉽도록 구성하였습니다.

다양한 예제로 보다 쉽게

HTML5&CSS3 reference에서는 새로운 요소와 속성들을 보다 쉽게 이해 할 수 있도록 다양한 예제를 준비 하였습니다.

예제에 마련된 값을 변경하시면 변경된 화면을 바로 확인 하실 수 있어 좀 더 쉽게 속성이 가진 기능을 파악하실 수 있습니다.

여러 브라우저 호환성을 한눈에

현재 보고 계신 브라우저에서 지원하는 속성이 무엇인지 궁금하신가요?

HTML5와 CSS3 메뉴 좌측의 작은 아이콘은 현재 브라우저에서 지원되는 속성을 나타냅니다.

녹색 아이콘은 사용하는 브라우저에서 지원하는 속성이고 노란색 아이콘은 일부 지원, 붉은색 아이콘은 미지원하는 속성을 나타냅니다

HTML5&CSS3 reference에서는 총 7개의 브라우저를 기준으로(Pc 브라우저 5개, 모바일 브라우저 2개)각 요소의 지원 현황을 확인할 수 있도록 구성 하였습니다.

COMPATIBILITY메뉴에서는 모든 요소들의 지원 현황을 한눈에 볼 수 있도록 정리하여 정보를 보다 쉽게 얻을 수 있도록 하였습니다.

보다 다양한 정보를..

html5에서 바뀐 요소나 속성이 궁금하셨나요? 아니면 변경된 문법 정보가 필요하신가요?

Appendix 메뉴에서는 HTML5의 공통 속성, 변경된 문법, 요소 및 속성 그리고 CSS3의 값과 단위에 대해 정리 되었습니다.

변경된 정보들을 보다 쉽고 빠르게 찾아 확인하실 수 있습니다.

다양한 해상도에서 보다 편하게

웹을 사용할 수 있는 다양한 기기들이 나오면서 여러 해상도에서 웹사이트를 방문하실 수가 있는데요

HTML5&CSS3 reference에서는 다양한 해상도를 가진 기기에서 정보를 보다 편하게 접하실 수 있도록 미디어 쿼리를 적용하여 반응형 웹디자인을 구현하였습니다.

(자세한 내용은 반응형 웹 디자인http://html.nhncorp.com/blog/textyle/47789#comment_167993 포스팅을 참고하세요)

다양한 기기에서 HTML5&CSS3 reference의 내용을 보다 쉽고 편리하게 확인 하실 수 있습니다.

HTML5&CSS3 reference를 제작하기 위해 여러 자료를 찾아 보고 검증하며 많은 준비와 노력을 해왔습니다.

하지만 아직도 부족한 부분이 많이 있네요.

부족한 부분들은 지속적인 관리를 통해 좀 더 발전하는 reference가 될 수 있도록 더욱 노력하도록 하겠습니다.

HTML5과 CSS3에 관심이 있는 모든 분들께 좋은 자료가 되었으면 합니다.

그럼 앞으로 많은 응원 부탁 드리겠습니다.

코딩컨벤션 배송 확인

블루라군 — Tue, 06 Sep 2011 13:27:05 +0900

안녕하세요. 웹표준개발1팀 냐옹입니다.

9월 1일부터 당첨되신 분들이 입력해주신 연락처로 해피빈에서 개인정보에서 주소를 받을 수 없다고해서 일일이 한 분씩 확인하여 배송지를 얻고 있습니다.

헌데 아직까지 해피빈자체에 이메일 등록을 안 해주신 분들이 246명에 이르고 있어서요.

이메일, 핸드폰 번호, 주소 아무 정보도 갖고 있지 않기 때문에 연락처 기입을 정확히 하지 않으신 분들은 배송 안내 메일도 보내드릴 수가 없습니다. ㅜ_ㅜ

또한 연락처 입력하신 분들도 한분씩 연락을 해야해서 전부 전화를 드리지 못하고 문자 혹은 이메일로 배송지 여쭤보는 부분 이해해주셨으면 합니다.

오늘까지 총 349분(내부 인원 제외) 모두 발송업체에서 작업 중이며, 나머지 246분은 아래 표에서 아이디 확인하시어, 널리(http://html.nhncorp.com) 비밀댓글로 글 작성부탁드립니다.

9월말까지만 수집하여 배송할 예정이니 꼭 확인하시어 이로인한 불이익 없으셨으면 합니다.

CV	인기우먼	파란바람	sweethobak	오누이가든
김윰	hy_koon	까바	아도니스	연늘
바보성녕	아쭈	율이	아라핀	복면신풍
dus2	혜꽁이님	아루	양한마리	맛스타
버수	reeem	질풍가도	purple heart	강짱
천사	Jeongdeoksu	김트리	산들바람	뚜이
태	보보스	유훈	인생속에	까만앙마
홍스	스마일캣	둘리	발렌타인	조이1365
오센	나후	혜모수	윤호	베이비파울라너
니모를찾자	무지개	kunoctus	포도송이	링크
커피쪼아	부엉이	사막여우	뉴트리노	Joe Intae
camu1004	루미	이광서	kaun	취몽
쭌봉이	제이케이	다시마조림	nirvana	마스터리
최용훈	MnM	아힌	유리온	PLASTER
아사만세	ㅅㅅㄴ	하늘꾸미	고등어	시엘
빵긋	감성찍사	Mandy	다클렌	광휘
bamboo1	아기뚱	2say	어린왕자	nicon20
쉬렉	레이	앙카	다경이	따뜻한 마음 한스푼
GeNioY	아비요	아랍오리	랑겔한스	fun8686
노솔진	rose2her	호롤로룰루	매쉬맬로	웨비맘
raraavisyc	리쿠쿠	태초의춤꾼	립스군	alice8401
Zinedine Zidane No10	알렉사청	Latte	아리에스	최강혈통
미르	효짱	파스타	질풍하임달	인생
리가	순구라	닥찬닥찬	쑤	po_tei_to
the_maniac	하나키구리코	루하스	곰	GuitarStarter
ledzpl77	maxim_spring	유령신부	훈남	zzZZ
onionmen	Dplus	원지님	베컴	컴퓨터공학도
빨간망토	취중선	고시랑	x2emag	zxh
navyclip	느린여자	옥돌사랑	과로인생	여긴누구나는어디
태임	Wise	마키	taehoid	수
황장군	ㅋㅋ	세나	애플망고	애벌래
홈런대	한방인생	반슬	생략	Timothy
청설모	까림	센스웹마스터	허슈가	제임스
불량영혼	다나	devuk2332	히로군	살은
korea_navy	유저IE유저IE유저IE유	kenny	기철	섬머슬램
디버거	나그네	초코렛	웃찌	아키노
seevaa	윈도우주	쇼핑몰CEO	이카스	REO
곰돌군	마뇨	꽁지	퍼플	블랙데빌
울트라맨	남별별	슐레밀	루다	진
당근이지	토비	핼리피디	ssireky	pfreedom
아즈키	라노	오궁이	후니후니	빵효
준지	데쳄버	아이린	히텔	김용범
군	John	쩡이	wlndy	98minn
팬더	희작	JiBro	미스터온	니킥당주
musart	vitasean	두비두	에그	위저드그룹
SHIN Fletcher	가이아	ZZANG zzang	김대장	밤이
다키타니	sachky85	마피아	성주참외
ksb	멋쟁이	제제	케세라
실루에이티	KL	정의롭게	떠영스
행기	후?뚫?뚫	흰둥이	아라미스

모금액 기부 및 당첨자 선정.

NULI — Tue, 30 Aug 2011 20:16:44 +0900

안녕하세요. 웹표준개발1팀 냐옹입니다.

아래 당첨 되신 분들 중 "배송지를 묻는 메일"을 못받으신 분들은.

[이름, 아이디, 배송지 주소, 전화번호, 이메일 주소] 형식으로 작성하여 "비밀글" 로 남겨주세요.

경매 마감 후 콩 저금통에 모여진 콩 15,861개 전액은 “한빛맹아원 시각장애인의 발이 되어 주세요~!!" 모금함에 기부하였습니다.

적지 않은 돈이기 때문에 클릭 한번할 때마다 잘못 되는 것은 아닌지 가슴이 쿵쾅쿵쾅..

아래는 기부 후 모금 내역.

또한, 공지 한대로 선착순 500분과, 추첨을 통해 100분을 선정하였습니다.

100분 중 30%는 난수로, 30%는 댓글이 긴 순으로, 20%는 작가들의 선호 숫자로, 나머지 20%는 콩 많이 기부해주신 순으로 추첨하였습니다.

아래는 당첨자 명단이니 확인하시고 메일로 관련 내용이 왔는지 확인해주세요.

혹시 메일 못 받으신 분이 있다면 비밀 댓글로 아이디 남겨주시면 확인하도록 하겠습니다.

관련 내용은 http://fund.happybean.naver.com/auction/AuctionView.nhn?auctionNo=123461390309 에서도 확인하실 수 있습니다.

많은 분들이 기부해주시어 너무도 감사드립니다.

안타깝게 당첨이 안되신 분들은 또 기회가 있겠지요~! ^^

또 이번 가을엔 마크업 관련 이슈를 갖고 컨퍼런스를 개최하니 그때도 많은 참여 부탁드릴게요~

감사합니다. ^^

별의조각(joe1***)	eehd (onlyk***)	희상(solet***)	제이(fuli***)	팬더(lordp***)
musart (mus***)	부엉이(taket***)	여자여자(toal9***)	onionme.. (sb1***)	어거(ngel2***)
루미(ar***)	빨간망토(my***)	렴박사(furi***)	the_man.. (the_m***)	아쭈(7793***)
쏭연화(ssong***)	타파하(tap***)	커피쪼아(nam0***)	성재형님(sia***)	은냥(eun_2***)
진달래(dalra***)	positive.. (rmaq***)	감성찍사(xiang***)	navyclip (navyc***)	브래드피.. (jou***)
nori (semtl***)	제이케이(this8***)	레이(de***)	아비요(blue1***)	Mobile .. (cstri***)
리가(ilik***)	ledzpl7.. (ledzp***)	최용훈(pian***)	아기뚱(ba***)	pulip62 (puli***)
포드(maste***)	황선배(great***)	홈런대(paran***)	몽실통통(luti***)	lalla39 (lall***)
삐약씨(kak***)	korea_n.. (korea***)	HANA (barbi***)	청설모(reed***)	아사(outsi***)
seevaa (see***)	애기벌레(ih***)	영단어(liz***)	Benzam.. (hk_0***)	꿀만먹는.. (shs0***)
불량영혼(gate***)	Hodduci (com0***)	곰돌군(bdw2***)	울트라맨(ultra***)	홍스(kyu1***)
MnM (kenny***)	ㅅㅅㄴ(kuk***)	준정(far***)	당토(kongs***)	아즈키(az***)
perinion (perin***)	군(skli***)	skb824 (skb***)	쥬시쿨(ara***)	Sunkist (kyh8***)
준지(senxa***)	깜찍슈기(shoo7***)	보보스(vante***)	스마일캣(kmgi***)	wikidru (wiki***)
SHIN Fl.. (iq***)	다키타니(dakit***)	나후(fus***)	빵긋(pooh***)	htjwk05 (htjw***)
0selene.. (0sele***)	스윗틱스(mgn***)	에키드나(inbo***)	은수리(cbc***)	더링(theri***)
idlove0.. (idlov***)	따식이(ncyl***)	나니까(lucky***)	유리(pr***)	그린애플(isay***)
MooN (windf***)	혜꽁이님(cielo***)	디버거(kys89***)	당근이지(pat***)	시우어뭉(pkc***)
묵향(dark***)	okpcom (okp***)	무지개(kevi1***)	터푸쭈야(wyj0***)	숭이네 .. (dlalw***)
태임(s2000***)	노을이질.. (kclup***)	빗물(eut***)	은댕(samba***)	황장군(kyoo***)
reeem (re***)	Jeongd.. (mkli***)	즐거운 .. (eye_k***)	재득(22whw***)	슐레밀(breat***)
kenny (kenny***)	초코렛(human***)	달샘군(pa***)	쇼핑몰C.. (prett***)	발작(e***)
linalin (lina***)	짱구쌤(kms34***)	duckout.. (ducko***)	정서(take0***)	꽁지(sae***)
꿀단지(vx0***)	핼리피디(tem***)	devuk2.. (donju***)	아직(candi***)	솔벤트(ga***)
오누이가.. (zzu***)	아라미스(skym***)	연늘(uscaf***)	하나키구.. (kekey***)	나토님(leon***)
ㅋㅋ(tlen***)	셰프진(0z***)	한방인생(meelo***)	알렉사청(gunog***)	남별별(01823***)
반봉다리(madst***)	취중선(lugen***)	멀더끙(mulde***)	효짱(chang***)	나그네(yoma***)
가루(small***)	느린여자(ohki3***)	오상원(ohsan***)	레종(ril***)	Wise (kjk7***)
김윰(b***)	수진(lea***)	ksb (starw***)	눈물의추.. (mor***)	십이지(bk830***)
hy_koon (hy_k***)	미니토이(very***)	까림(yeale***)	넬름(fraxi***)	순구라(leeso***)
비야길(nymph***)	토비(head***)	에노야(adov***)	유저IE유.. (dany***)	이상민(flyto***)
글래(nng***)	당근(touc***)	탱순이(espe***)	마뇨(sha***)	maxim_s.. (maxim***)
somyou.. (3ojhc***)	ludarani (ludar***)	청개구리(kangh***)	다나(dana***)	플라니티.. (plani***)
리즈(yeonj***)	실루에이.. (pu***)	행기(gotoh***)	Dplus (kubs2***)	르네라토(rener***)
minXs (allis***)	개밥바라.. (god_l***)	중독(em***)	느린아이(bsju***)	히루짱(hirum***)
내려놓음(ogr***)	루카(blue_***)	samso9 (sam***)	성원(hayan***)	연어구이(cryst***)
률이사랑(ciste***)	시환(uni***)	페이(mihar***)	느낌처럼(bestk***)	뽕이아빠(zh***)
윈도우주(wind***)	rose2h.. (rose2***)	리쿠쿠(eros***)	koo9ku (koo***)	엘리스(yb***)
pqbdo (pq***)	인기우먼(wishf***)	choco (mayfl***)	루미렌트(lumir***)	attabee (jeans***)
흰둥이(dbc***)	배울(kys7***)	블라블라(mojom***)	PLMO (skjoo***)	111 (helio***)
Realnan.. (ko***)	양한마리(maga***)	유월(kyouy***)	J2STYL.. (woojj***)	purple .. (ph***)
카젠(ssgi***)	ebsradi.. (ebsra***)	자바뿐(baros***)	유자(toga***)	thehjh9.. (thehj***)
lyb3185 (lyb3***)	birth84j (birth***)	우주깡패(3am_c***)	J PARK (insan***)	오궁이(jinny***)
버수(eve***)	모르는애(free***)	똥꼬(quick***)	먹(j5y***)	앙마흥마(john***)
mini퐝(plato***)	슬로우체.. (cherr***)	느낌(cocog***)	아이린(irene***)	아스(duo***)
란아아빠(hran***)	ZZANG .. (jlike***)	qzwxec.. (qzwxe***)	purenixi.. (puren***)	쩡이(sj791***)
마피아(mafi***)	제제(monj***)	tbiif (tb***)	정의롭게(milk0***)	JiBro (hugeh***)
디자이너.. (giok***)	축복(q_de***)	lol (wpwp***)	While (awhil***)	래세(sin***)
갑이되자(laun***)	낄낄이(wj***)	채현맘(riazz***)	Luvcat (ez***)	두비두(2spi***)
raraavis.. (raraa***)	watiya (wat***)	아라핀(storm***)	sweeth.. (sweet***)	아도니스(adoni***)
천사(heyse***)	핑크천사(sakur***)	호돌군(hodol***)	pureper.. (purep***)	오후네시.. (ok2***)
알퐁스 L (nande***)	그루(webg***)	허슈가(silci***)	이즈마레(izm***)	생략(yabng***)
cartes (weki***)	jhjpphot (jhjpp***)	아키텍트.. (fivew***)	bluefill3.. (bluef***)	볼트(ru***)
팀가이스.. (h0061***)	꼬마(yb7***)	맛스타(i***)	달구언니(do***)	민장(be***)
복면신풍(athen***)	조이136.. (bora***)	qfi (***)	루딧츠(abink***)	fun868.. (fun8***)
아키노(qhthd***)	REO (ubobd***)	Seeker (hkyu***)	인생(pauss***)	po_tei_t.. (po_te***)
애벌래(sleep***)	탄마(soons***)	오센(mo***)	필더(hmem***)	여긴누구.. (qkrru***)
내츄(natur***)	노솔진(ssthf***)	한대백곰(dkrg***)	따뜻한 .. (bonhe***)	웨비맘(cutew***)
abcbab.. (abcb***)	alice84.. (alice***)	bamboo.. (qwe7***)	zxh (eastx***)	spoonts (spoo***)
nicon20 (nico***)	쏭지(twl***)	CV (2364***)	호빵(cs___***)	gealot (gea***)
GuitarSt.. (gstar***)	작은쉬리.. (wnsd***)	죽음노래(wow6***)	절망고양.. (wlsdn***)	가오르드(kkks***)
블랙데빌(exist***)	헤카테(wizj***)	아젤린(azaly***)	Timothy (bluel***)	김준석(lonel***)
zzZZ (aw9***)	Kyrious (hong9***)	쩜쩜(c***)	나답게(chi***)	쭌봉이(netga***)
제임스(cgm46***)	세종대왕(tjrgh***)	컴퓨터공.. (korea***)	드자이너(jung2***)	살은(pse9***)
섬머슬램(hiro***)	시엘(sise***)	광휘(sebil***)	운명을넘.. (murim***)	최강혈통(ga***)
수(dglog***)	까칠하게(gd***)	졔키미(wnlg***)	아조이별(shimj***)	밤이(jang***)
위저드그.. (wizar***)	렌타콘(ban4***)	물개(xc***)	질풍가도(desig***)	koonsty.. (koons***)
sachky.. (sachk***)	KL (dovek***)	아루(r2r2***)	바나나죠(minni***)	dowons.. (dowo***)
멋쟁이(sjjan***)	혜모수(deha***)	앙세(paran***)	파란바람(paran***)	냥냥(kah***)
갸릉(raran***)	까바(orang***)	camu10.. (cam***)	윈디(siest***)	먹자(medi***)
crossfir.. (cross***)	다시마조.. (onefi***)	흠냐(wih0***)	소다쟁이(jjo***)	김트리(onenw***)
용도령(yongd***)	작은시내(jakeu***)	s2uny (ssu***)	백선향(eunky***)	duches.. (hai***)
율이(0430***)	jjijjichon.. (jjijj***)	유훈(uho***)	서기(seokw***)	둘리(tjdtn***)
ngyuns.. (ngyun***)	흩날리는.. (enaks***)	틸리(ak***)	개츠비(mcatc***)	갈수록(jun***)
subzero.. (subze***)	봉심(vitam***)	짱금이(pip***)	라노(lastb***)	용이(main***)
데쳄버(crazy***)	John (ppyeo***)	담덕(clot***)	희작(snsrr***)	Javakill.. (lhm38***)
이정영(bava***)	짤쮸(jjal***)	데미노스(demin***)	헬베티카(akir***)	후?뚫?뚫(es840***)
꾸럭씨(gguru***)	onetime.. (oneti***)	윤태건(xorjs***)	good61.. (good6***)	humbee.. (humbe***)
호라(pl***)	로빈(crono***)	가이아(g***)	양대현(jaj***)	태그(sppr***)
스미골(ghost***)	사막여우(hyuni***)	녕(dh***)	kunoctu.. (kunoc***)	사과(broth***)
nkolokol.. (nkolo***)	이광서(paras***)	DJ (ld***)	vitasean (vitas***)	odious (odiou***)
버미(sungb***)	생강(dag***)	taehoid (taeh***)	발렌타인(yoonh***)	베컴(beckh***)
과로인생(psx6***)	i_minu (i_m***)	랑겔한스(try9***)	혜성탐색(comet***)	rlaeogh.. (rlaeo***)
열혈청년(abcj***)	뉴트리노(neutr***)	쉬렉(jsweo***)	딘두(pearl***)	산들바람(jjang***)
프린스턴(hoo***)	바보성녕(choco***)	빨간용(hel***)	레버(kayin***)	엘레라디.. (crevc***)
바이오맨(club8***)	인생속에(yminp***)	훈남(o242o***)	매쉬맬로(snoo***)	dus2 (dus2d***)
큰한재(hangr***)	sujung2.. (sujun***)	kaun (k***)	nirvana (yourm***)	돌하루방(kgb***)
미르(gigas***)	니모를찾.. (m***)	카디(ctyst***)	동인(done***)	윤호(yunho***)
OssA (osa***)	베타(drmst***)	기술자(goseg***)	유리온(dbfl***)	어린왕자(hones***)
밍밍쓰(kkom***)	힘찬하루(softl***)	WooLife (xor***)	iluulm (ilu***)	나뭉이(jju***)
gur05 (gu***)	곰(dx4***)	립스군(rainy***)	아리에스(milky***)	크리스(aner2***)
늘고운아.. (typoh***)	똘킹(tea***)	x2emag (x2e***)	포도송이(yun0***)	고등어(ear***)
다클렌(smash***)	다경이(dm6***)	hellosoli.. (hello***)	절망서생(izle***)	질풍하임.. (furyh***)
쑤(ssu***)	쿠사나기(swit_***)	마이더스(n***)	뮤뮤(jeyou***)	popo_2.. (popo_***)
가르송(cms_c***)	Zinedin.. (woni***)	12월에.. (decem***)	히로군(lch***)	웃찌(zu***)
김개코(akihi***)	퍼플(punny***)	ssireky (ssir***)	태(hyunt***)	포유님(man94***)
후니후니(ty***)	bluecoc.. (bluec***)	기철(gric***)	희망의디.. (eun***)	싸개형님(kozid***)
멀티비타.. (crom7***)	히텔(thinl***)	이카스(yiyu***)	ddochi1.. (ddoch***)	루다(oin***)
강운(ncrea***)	로리킹(rorik***)	bizplus.. (bizpl***)	링크(pagef***)	감자(thebl***)
베이비파.. (a0dd***)	준(ikju***)	미지의별(sam***)	진(winte***)	kwon (ccca***)
아사만세(playg***)	그린비(by***)	pfreedo.. (pfree***)	98minn (98m***)	zahoku (zah***)
GeNioY (sk03***)	jjoggma.. (jjogg***)	길테일(today***)	juakdan.. (juakd***)	wisterra (wiste***)
레이지커(lazy***)	하늘꾸미(skyma***)	아랍오리(en***)	반슬(bani***)	루하스(an***)
여인(d12s***)	호롤로룰.. (thelu***)	inyl (gal***)	2say (2***)	물덴동산(prau***)
물고기눈(dblue***)	서정양(bmh2***)	원지님(nioc***)	bahama.. (baham***)	써니(cutie***)
Webers.. (gul0***)	아힌(peil***)	닥터래빗(binuc***)	요플레(yopla***)	태초의춤.. (ysjst***)
까칠현이(viole***)	Latte (chees***)	남이(ykn8***)	cat061.. (cat0***)	jeatom (jea***)
돼지(ehwan***)	ㅇ(shy09***)	작은배려(purpl***)	유령신부(cand***)	쿠로에(skai***)
jjjjjung8.. (jjjjj***)	hyejask.. (hyeja***)	영보이(jongm***)	당나라(jwkan***)	Mandy (mandy***)
작업(ultra***)	셀링(celr***)	이아모네(iamo***)	파스타(pasta***)	센스웹마.. (hphp8***)
pchipho.. (pchip***)	키라키라(guil***)	마키(maky0***)	세나(itsh***)	앙카(an***)
ruvieye (ruvi***)	때지(fanc***)	Lacolak.. (jong***)	고시랑(pratt***)	옥돌사랑(safi***)
닥찬닥찬(skdu***)	향기(did***)	세계최강.. (deart***)	해피데이(daihe***)	은밀한라.. (hee0***)
애플망고(itsj***)	팡세나(ss***)	떠영스(dduyo***)	샤럽(kiwi_***)	redhotc.. (redho***)
래군(drst***)	성주참외(ess***)	wlndy (thaud***)	미스터온(heyo***)	케세라(blue9***)
김대장(took***)	에그(im***)	아마츠키(lo***)	츄츄(choa***)	ggoddu.. (ggodd***)
강짱(kes3***)	천우신조(lovev***)	사사미(ltslt***)	뚜이(ib02***)	미라벨(hej***)
까만앙마(okk***)	해피모트(happy***)	엔하늘(nala2***)	주너아트(aprrj***)	바람을듣.. (neoea***)
마스터리(chaxi***)	Joe Inta.. (zzo***)	이것저것(syung***)	PLASTE.. (poots***)	석희(lunar***)
흐리다얌(alcha***)	취몽(gr***)	김용범(yoeng***)	빵효(hyo7***)	니킥당주(tjdn***)

TECH@NHN SE 코딩컨벤션 발간 소식!!

NULI — Mon, 29 Aug 2011 15:29:07 +0900

안녕하세요. 웹표준개발1팀 냐옹입니다.

오늘 책 인쇄가 완료되었다고 전화를 받고, 바로 따끈따끈한 책을 받아보았습니다.

그간 애정을 쏟아부어서인지 책에서 매력+10, 아름다움+10 을 느꼈어요(^^;;)

책 받으시는 분 모두 저와 같은 감정을 느꼈으면 하는 바람으로 구성품 소개를 하도록 할게요.

먼저 책을 펴시면, 딱지같은 한장의 S.O.M을 발견하실 수 있을 거에요.

S.O.M은 책상 근처 붙여주시면 수시로 확인하실 수 있는 치트시트 입니다(딱지아니에요~).

책은 181페이지이며 150 x 175 mm의 핸드북 사이즈의 아담한 크기입니다.

몇 년간의 마크업 규칙이 축적되어있는 "HTML/CSS 코딩 컨벤션!!"

소중한 선물이 되기를~^^

감사합니다.

어느덧 3주간의 TECH@NHN^SE001 “NHN은 이렇게한다! 시리즈인 HTML/CSS 코딩컨벤션” 경매 마감이 10시간 정도를 앞두고 있습니다. 생각보다 많은 분들이 기부를 해주시어, 조금 더 의미있고 뿌듯합니다. ^^

미리 공지드린대로 해피빈 콩 10개 이상 기부해주신 500분에게 “기부하는 아름다운 마음에 드리는 선물” 로 일반 택배 포장이 아닌 수작업 박스로 보내드립니다(이후 추첨 100분 에게도 동일).

이 경매 이벤트는 선착순/추첨에 의한 운이 아닌 남을 도우려는 기부의 마음에 보답하고자 하는 마음입니다. 안타깝게 경매 추첨이 안되신 분들은 한빛맹아원의 발이 되어줄 새차 구매에 조금이나마 도움을 주었다는 더 큰 기쁨을 간직하셨으면 합니다. ^^

그럼 박스를 한번 볼게요. 220 x 160 x 30 mm 크기의 종이로 만든 D자 박스입니다.

한땀 한땀 고이접어..

아래와 같은 블루 라벨을 붙여 패킹합니다(물에 젖지 않도록 보관에 유의하여주세요~).

받게 되실 책 박스의 최종 모습!!

책은 9월 1일부터 순차적으로 배송됩니다. 배송 방식은 해피빈 경매글에서 말씀 드린드린 것처럼

1) 기부한 아이디의 이메일 주소로 경매당첨 메일을 보내드리면,

2) 메일 확인하시고 메일안의 주소입력 페이지로 오셔서 주소지 입력하시면 됩니다. 이메일 주소가 바르게 되어있는지 꼭 확인해주세요~ ^^

그럼 9월 1일 찾아뵙도록 하겠습니다!! 감사합니다!!

NULI 블로그

오픈 워크샵에 참여하시는 분들을 위한 선물!

인기폭발, NHN 마크업 코딩 컨벤션

유니크한 디자인, NHN스토어 제품

추첨은 공정하게!

테스트 참고 사항

마크업 개발자를 위한 오픈 워크샵 3차 안내

Expand Your Domain!

행사 정보

성원에 감사드립니다.

참가 정원이 250명이었던 이유

20분을 더 초대하려고 합니다.

참여가 어려우실 경우 꼭 취소해주세요.

아쉬워하지 마세요.^^

마크업 개발자를 위한 오픈 워크샵에 여러분을 초대합니다!

Expand Your Domain!

행사 정보

아젠다

웹 접근성

성능 최적화

모바일 웹

Spot Speech

참가 신청 및 행사 안내

행사 기념품

찾아오시는 길

통합검색 태블릿PC 최적화

웹 접근성 평가 도구 N-WAX

N-WAX 제작 배경

N-WAX 설치 및 사용방법

N-WAX 소개를 마치며...

웹표준개발 2팀에서 마크업 개발 경력사원을 채용합니다.(접수마감)

HTML5 & CSS3 reference

메일 Lite의 시각 장애 접근성 개선

Goodbye SE, Welcome Lite!

무엇이 개선되었나요?

대체 텍스트 빠짐 없이 제공하기

문서 제목 구체적으로 제공하기

키보드 접근성 보장하기

적절한 레이블 제공하기

앞으로는....

해피빈 기부 후기(코딩컨벤션 출간 이벤트)

element

element

element

element

element

코딩컨벤션 오프라인/e-book 배포

element

"이미지 최적화 분석 도구" 공개

이미지에 군더더기 데이타라니?

이미지 최적화 분석도구, 어떻게 사용하나요?

메타데이타가 남아있는 경우

메타데이타가 제거된 경우

그렇다면, 이미지 메타데이타는 어떻게 제거하나요?

HTML5 & CSS3 reference

코딩컨벤션 배송 확인

모금액 기부 및 당첨자 선정.

TECH@NHN SE 코딩컨벤션 발간 소식!!