NULI

마크업 개발 오픈 워크샵 발표 영상 및 자료

NULI — Wed, 07 Mar 2012 18:46:23 +0900

지난 2월 25일에 진행되었던 마크업 개발 오픈 워크샵의 발표 영상을 공유합니다.
발표 자료도 게시되었습니다.

Session1. 웹 접근성

웹 접근성 세션 발표 목록
제목	발표자	영상	발표 자료
네이버의 웹 접근성 개선 방향	조진주	네이버의 웹 접근성 개선 방향 발표 영상링크	네이버의 웹 접근성 개선 방향 발표 자료링크
접근성의 기본은 의미있는 마크업으로부터! 그럼 Ajax RIA는 어떻게 기본을 지킬까요?	김군우	접근성의 기본은 의미있는 마크업으로부터! 그럼 Ajax RIA는 어떻게 기본을 지킬까요? 발표 영상링크	접근성의 기본은 의미있는 마크업으로부터! 그럼 Ajax RIA는 어떻게 기본을 지킬까요? 발표 자료링크
네이버는 시각장애인이 모든 서비스를 다 검사한다며?!	한혜진	네이버는 시각장애인이 모든 서비스를 다 검사한다며?! 발표 영상링크	네이버는 시각장애인이 모든 서비스를 다 검사한다며?! 발표 자료링크

Session2. 성능

성능 세션 발표 목록
제목	발표자	영상	발표 자료
오빠~ 네이버 왜 이렇게 늦게 떠?	박상혁	오빠~ 네이버 왜 이렇게 늦게 떠? 발표 영상링크	오빠~ 네이버 왜 이렇게 늦게 떠? 발표 자료링크
Front-End 최적화의 끝판왕 Markup Complexity + CSM	이준행	Front-End 최적화의 끝판왕 Markup Complexity + CSM 발표 영상링크	Front-End 최적화의 끝판왕 Markup Complexity + CSM 발표 자료링크
The Anatomy of Image Format	이건준	The Anatomy of Image Format 발표 영상링크	The Anatomy of Image Format 발표 자료링크

Session3. 모바일 웹

모바일 웹 세션 발표 목록
제목	발표자	영상	발표 자료
태블릿PC를 위한 마크업	노찬현	태블릿PC를 위한 마크업 발표 영상링크	태블릿PC를 위한 마크업 발표 자료링크
네이버 모바일의 숨겨진 코드 읽기	문지애	네이버 모바일의 숨겨진 코드 읽기 발표 영상링크	네이버 모바일의 숨겨진 코드 읽기 발표 자료링크
모바일 크로스브라우징, 끝은 어디인가?	박상혁	모바일 크로스브라우징, 끝은 어디인가? 발표 영상링크	모바일 크로스브라우징, 끝은 어디인가? 발표 자료링크

Spot Speech

Spot Speech 발표 목록
제목	발표자	영상	발표 자료
마크업 역량 개발 모델을 기반으로 특정 기술 트랙의 전문가 되기	주재승	마크업 역량 개발 모델을 기반으로 특정 기술 트랙의 전문가 되기 발표 영상링크	마크업 역량 개발 모델을 기반으로 특정 기술 트랙의 전문가 되기 발표 자료링크
모바일 마크업을 위한 디자이너와의 소통?! 우린 이렇게 할라구요	남덕현	모바일 마크업을 위한 디자이너와의 소통?! 우린 이렇게 할라구요 발표 영상링크	모바일 마크업을 위한 디자이너와의 소통?! 우린 이렇게 할라구요 발표 자료링크

행사 후기는 NHN 개발자 블로그, HelloWorld에 게시되어 있습니다.
HelloWorld에 후기 보러 가기

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

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.

웹 접근성 평가 도구 N-WAX

겨미겨미 — Mon, 19 Dec 2011 14:13:03 +0900

안녕하세요. 겨미겨미입니다.

그림1 N-WAX 실행 화면

N-WAX 제작 배경

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

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

N-WAX 설치 및 사용방법

그럼 도구 사용법을 간략하게 설명드릴께요. (자세한 사용법 및 가이드는 준비중에 있습니다. 준비가 완료되는대로 또 공유해드리도록 할께요.)

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

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

그림3 N-WAX 설치 페이지

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

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

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

메일 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

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

냐옹 — Mon, 12 Dec 2011 17:21:38 +0900

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

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

아래는 다른 후원금들과 합쳐 내년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

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

냐옹 — Thu, 24 Nov 2011 18:14:32 +0900

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

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

근성의 기부

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

12월 휴관일 일정 알아보기

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

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

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

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

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

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

코딩컨벤션 e-book

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

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

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 기능에 추가하는 등 더욱 편리하게 사용하실 수 있도록 지속적으로 개선해 나가겠습니다.
고맙습니다.

NULI

마크업 개발 오픈 워크샵 발표 영상 및 자료

Session1. 웹 접근성

Session2. 성능

Session3. 모바일 웹

Spot Speech

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

인기폭발, 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

웹 접근성 평가 도구 N-WAX

N-WAX 제작 배경

N-WAX 설치 및 사용방법

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

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

Goodbye SE, Welcome Lite!

무엇이 개선되었나요?

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

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

키보드 접근성 보장하기

적절한 레이블 제공하기

앞으로는....

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

element

element

element

element

element

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

element

element

element

element

element

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

element

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

element

element

element

element

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

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

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

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

메타데이타가 제거된 경우

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