마지막으로 책을 주문했을 때, 항공편을 예약했을 때, 차를 샀을 때를 생각해 보세요. 책은 어떻게 골랐고, 휴가 계획은 어떻게 세웠고, 어떤 차가 최적인지 어떻게 결정했나요? 아마 온라인을 검색하고, 평가를 읽어보고, 다른 이에게 조언을 구한 다음 이를 바탕으로 결정했을 겁니다. 한 마디로, 당신은 배웠습니다.

CSS3 pie를 소개합니다. 이 자바스크립트 라이브러리는 구형 인터넷 익스플로러에서 border-radius와 box-shadow, 그래디언트, RGBa 색상을 지원합니다.

가변 그리드를 쓰면 페이지의 아름다움을 희생하지 않고도 브라우저의 다양한 너비에 반응해 레이아웃을 조절하게 만들 수 있습니다만, 이미지는 브라우저 너비를 모르므로 컨테이너 크기에 반응하지 못하고 컨테이너 밖으로 넘칠 수 있습니다. 가변 그리드를 개발한 이선 마르코테가 이 점을 보완해서 이미지와 배경 이미지도 브라우저 크기에 반응하도록 만드는 방법을 설명합니다.

자바스크립트를 써서 페이지 내용을 숨겼다 보였다 할 때는 보통 display:none을 쓰는데, 이렇게 하면 스크린 리더 등에서 내용을 읽을 수 없으므로 접근성이 매우 떨어집니다. position:absolute를 지정한 후 화면 밖으로 멀리 밀어내면 스크린 리더에서도 읽을 수 있지만 자바스크립트 라이브러리를 쓸 때는 쉽지 않습니다. 이 글에서는 라이브러리를 쓰면서도 라이브러리 함수를 효율적으로 개량해서, 스타일시트와 자바스크립트를 연동해 접근성을 보장하면서 내용을 숨기는 방법을 알아봅니다.

아무리 뛰어난 웹 개발자라 하더라도 사이트가 다양한 장치와 브라우저에서 원하는 대로 동작하게 만들기는 쉽지 않은 일이므로 디버그는 필수적인 작업입니다. 이 글에서는 잘 알려진 throw - catch 테크닉과 함께 window.onerror 이벤트를 이용한 디버깅, 원격 디버깅에 대해 다룹니다.

인터넷 컨텐츠에 관한 새로운 발상을 제시하는 글입니다. 우리 하드디스크에 저장된 mp3 파일을 윈앰프로 관리하든 아이튠즈로 관리하든 그건 개인의 선택이며, 사용자가 애플리케이션을 무엇을 쓰든 mp3 자체가 바뀌는 것이 아니라 단지 애플리케이션이 제공하는 서비스가 바뀔 뿐입니다. 이와 비슷한 개념을 인터넷 컨텐츠와 애플리케이션에도 적용한다는 발상입니다.

인터넷 컨텐츠에 제작자에 관한 귀속 정보 및 수익 모델을 메타데이터로 포함시키면 저작권에 크게 구애받지 않고 컨텐츠를 이리저리 퍼뜨리더라도 제작자는 명망을 얻거나 금전적인 보상을 얻을 수 있다는 주장도 있습니다.

청중이 손가락 하나 까딱하지 않고 발표자에게만 집중하길 바라는 태도는 잘못된 것이며, 발표 주제에 대한 토론을 이끌어내서 대화처럼 이어가는 것이 좋다는 내용입니다.

신용카드 번호같이 해커들이 탐낼만한 정보는 다루지 않으니 높은 수준의 보안은 필요하지 않다고 생각하기 쉽습니다. 불행히도, 사람들은 여러 사이트에서 같은 비밀번호를 쓰는 경향이 있습니다. 이용하는 사이트 중 보안이 가장 취약한 곳 하나만 뚫려도, 나머지 사이트 다 뚫린 거나 마찬가지입니다. 암호화는 이제 웹에 종사하는 모든 이들이 알고 있어야 하는 상식입니다.

float속성은 HTML과 CSS를 다루는 모든 웹 디자이너와 개발자에게 가치있고 강력한 자산입니다. 하지만 float속성이 어떻게 동작하는지 정확히 이해하지 못한다면 수없이 많은 혼란과 좌절을 초래하기도 합니다. 이 글을 통해 float속성에 대해 새롭게 배우거나, float속성에 대한 지식을 되새김질해보시기 바랍니다.

"아무 생각 없이 낙서나 하고 있다"고 우리를 꾸짖은 선생님들을 잘못 하신 겁니다. 낙서는 30,000 년이 넘는 오랜 세월 동안 우리의 뇌에 시각적 자극을 주면서 우리가 현실적으로 생각하도록 도왔습니다. 서니 브라운은 전략적 낙서와 시각적 알파벳이라는, 낙서에 대해 새로운 개념을 제시합니다.

작곡가가 되고 싶더라도 꼭 노래를 잘 부를 필요는 없습니다. 아이디어를 그림으로 표현하기 위해 레오나르도 다 빈치가 될 필요도 없습니다. 스케치를 통해 순간적으로 지나가는 아이디어를 빨리 움켜잡을 수 있고, 다양하게 변형해볼 수 있습니다. 스케치가 어설프면 어설플수록 동료나 고객들이 부담없이 의견을 주기도 합니다.

책을 디자인해보고 싶나요? 멋진 영감을 불러 일으키도록 디자인된 책은 산더미처럼 많습니다. 하지만 전자책은? 이 글을 읽어 보시면 실마리를 얻을 수 있을 겁니다.

디자인 프로젝트를 수행할 때마다 우리는 어느 시점에서 작업을 멈추고 미완성된 결과물을 동료나 고객과 공유합니다. 여기에서 의문이 생깁니다. 공유할 때 받은 비평이 디자인과 이후 작업에 정확히 어떤 영향을 미칠까? 비평은 정말 필요하고 도움이 되는 걸까? 그렇다면, 일관성 없는 비평을 우리 작업에 보탬이 되게 하려면 어떻게 해야 할까? 이 글은 비평을 어떻게 수용하며 공동 작업에 어떻게 임해야 할 지 다룹니다.

사용자들은 휴대폰에서 웹사이트를 볼 수 있길 기대합니다. 최근 2~3년 사이 모바일 지원이 모든 사이트의 표준이 되었습니다. 웹 개발자는 모바일 지원에 익숙해지지 않으면 고객을 놓칠 위험이 있습니다. 어떤 방법을 써서 웹사이트가 좀 더 모바일에 호환되게 하시나요? 가장 단순한 답변은 모든 모바일 장치에서 테스트해보고 발견하는 모든 문제들 고치는 것일 겁니다. 하지만 최소 10가지 운영체제에 15가지 이상의 모바일 장치가 있는 상황에서 "모든" 이란 "불가능한" 입니다. Quirksmode.org로 유명한 피터 폴 코흐가 모바일 시장을 분석하고 어떤 장치들에서 테스트해야 할 지 제시하는 글입니다.

사이트의 목적이 무엇이건 간에, 사용자가 정보를 찾을 수 있는지, 하려던 일을 끋낼 수 있는지만 테스트한다면 중요한 것을 놓치고 있는 셈입니다. 컨텐츠 수준이 독자에게 적합한지, 당신이 적어둔 것을 읽고 이해할 수 있는지 알아봐야 합니다. 사이트의 모든 것을 테스트할 필요는 없습니다. 사용자에게, 당신의 비즈니스에 중요한 것만 테스트하십시오.

지난 7년 간 점진적 발전을 통해 웹 컨텐츠를 견고하고 상호운용성있게, 접근성있게 만들어 왔습니다. 이제 ARIA가 공식 선언될 즈음으므로 ARIA를 점진적 발전을 통해 구현할 수 있는지 생각해 봅시다.

접근성 문제에 관심이 있는 개발자들은 WAI-ARIA를 사방에 남발하는 스크립트 때문에 접근성에 생긴 공백을 메워 줄 도구로, 맹인이거나 시각에 문제가 있는 사람들에게 웹 애플리케이션이 더 접근성 있게 되도록 해주는 만병통치약 같은 것으로 생각하는 경향이 있습니다. 하지만 정말 그럴까요?

폼 필드들을 어떻게 입력할 것인지 사용자에게 실시간으로 많은 것을 알려줄수록, 사용자가 실수를 할 가능성이 줄어 들 것입니다. 크롬 4+, 사파리 5+, 오페라 9.6+ 같은 CSS3 UI 가상 클래스를 지원하는 브라우저들에서 CSS3 폼 유효성검사 예제를 살펴보십시오. HTML5의 폼 속성들과, CSS3 UI 가상클래스를 이용해서 CSS 기반의 유효성 검사를 만들었습니다. 그것이 어떻게 동작하는지 살펴봅시다.

물론, 당신의 디자인은 매우 잘 균형잡혀 있고, 서체만으로도 계층 구조가 표현되고, 대비 역시 완벽할 수 있습니다. 하지만 한 걸음 물러나서 전체적인 그림을 보세요. 어떻게 느껴지나요? 당신이 의도했던 감성을 불러 일으키나요? 감성을 불러 일으키는 아트 디렉션과, 기능성을 추구하는 디자인은 서로 다른 것입니다.

버전 컨트롤은 개발자에게만 필요한 것은 아닙니다. 당신이 작가, 편집자, 디자이너, 다른 어떤 일을 하더라도 그 일에 웹과 관련되어 있으며 일한 내용을 빠르고 효과적으로 순서를 바꾸거나 조합할 필요가 있다면 버전 컨트롤이 필요합니다. 오픈 소스 Git은 설치하기 쉽고 설정하기 쉽고 쓰기 쉽습니다. 버전 컨트롤 소프트웨어는 당신에게 단순한 "실행 취소"보다 훨씬, 훨씬, 훨씬 더 많은 것을 제공합니다.

CSS3 트랜지션을 통해 자바스크립트에 기대지 않고도 멋진 애니메이션 효과를 쉽게 만드는 방법을 알아봅니다.

만약 당신이 프론트엔드 개발자, 혹은 코딩하길 좋아하는 디자이너라면, CSS 기반 레이아웃은 당신의 업무 핵심일 것입니다. 누군가에게는 이미 익숙한, 다른이에게는 무릎을 치게 하는 것들에 대해, CSS 포지션 속성을 살펴 보고 표준에 걸맞는, 테이블 없는 CSS 레이아웃을 어떻게 만들지 알아보도록 합시다.

사용자들은 당신의 사이트에서 웹 폼을 통해 중요한 일을 처리합니다. 웹 폼 디자인, 특히 폼 길이 같은 세부 사항이 사용자들이 하려 했던 일을 얼마나 성공적으로, 효과적으로, 즐겁게 처리할 수 있는지에 많은 영향을 미칩니다. 사용자가 폼을 채워 나감에 따라 폼 영역을 동적으로 숨기거나 보이는 아코디언 폼을 사용해서 사용자들이 중요한 문제에 집중하고 일을 빨리 끝낼 수 있도록 도우십시오.