웹의 역사는 길지 않지만 그동안 웹을 통해 생산된 정보는 상상을 초월한다. 세상의 모든 데이터는 웹을 통해 유통되지 않는 경우를 찾아 보기가 어려울 정도이다. 웹은 세상의 핵심 정보 유통 플랫폼이 되었고 그 기반 기술은 눈부시게 발전했다.
하지만 급속한 팽창에 대한 부작용도 만만치 않다. 데이터 탈취 범죄를 비롯해서 개인 사생활 침해 문제 등이 봇물처럼 터지고 있다. 그러나 이를 방지하고자 하는 기술도 발전하고 있는 만큼 웹의 확산과 핵심적 역할에 따른 자연스러운 흐름이라 보는 것이 맞을 것 같다.
사실 이보다 드러나지 않는 문제지만 웹브라우저가 상당한 기술적 고민을 안고 개발되고 있다는 점을 알아야 할 것 같다. 마찬가지로 웹의 짧은 역사 속에 급속한 팽창으로 발생한 이해관계자들의 정치적, 기술적 대립에 따른 부작용의 산물이 원인이다. 기술적 파편화를 겪었던 그 시대에 태어난 웹 콘텐츠를 현재의 웹브라우저는 차별하지 않고 받아들여야 하는 숙명을 안고 있다.
문자셋 인코딩에 대해 우리는 얼마나 알고 있을까? 보통 묻지도 따지지도 않고 'UTF-8'을 작성해 넣는 경우가 대부분이지 않을까? 이것으로도 충분하니 더 깊은 지식이 필요하지 않은 것은 당연할 수도 있다.
그러나 좀 파헤쳐 보는 것을 좋아하는 개발자라면 다음 명제를 살펴보자.
"charset 값으로 넣는 'UTF-8'은 언어를 나타내는 태그일까?"
좀 아는 개발자라면 당연히 'NO'라고 답할 것이다. 그 이유는 'UTF-8'은 언어를 나타내는 태그가 아닌 문자 인코딩 기술을 가리키는 것이기 때문이다. 그렇다면 다음 명제는 어떨까?
"'EUC-KR'과 'ko-KR'은 같은 개념일까?"
평소에는 별 생각 없이 사용하지만 막상 이 명제를 보면 둘 다 언어와 관련된 것이라 볼 수 있다. 하지만 역시 동일하지 않다. 'EUC-KR'은 'UTF-8'과 마찬가지로 문자 인코딩 기술을 나타내고 'ko-KR'은 한국어를 나타내는 국제 표준 언어 태그이다.
우리는 이 개념 차이를 다음과 같이 코드에서 사용하고 있다.
<html lang="ko-KR">
<head>
<meta charset="UTF-8" />
<!-- 또는 <meta charset="EUC-KR" /> -->
</head>
</html>현재 웹 문서에서 사용된 언어는 한국어이고 해석 시 문자의 인코딩 방식은 'UTF-8'이라는 것을 웹브라우저에게 알리는 것이다.
이것은 HTTP 헤더의 경우도 마찬가지이다.
Content-Language: ko-KR
Content-Type: text/html; charset=utf-8ko-KR'과 같이 언어 태그를 명시한 BCP-47에 대하여 알아보는 것도 좋을 것 같다.
최근의 CSS 기술 업데이트 소식은 굉장한 것이었다. 핵심은 최근의 기술 업데이트에서 방향성을 보았다는 것이다. 지금까지의 자바스크립트의 의존성을 벗어나기 위한 시도로 새로운 기술들이 선보이기 시작했다.
크롬 웹브라우저의 디노(Dino) 게임을 알고 있는가? 인터넷 연결이 불가능할 때 나타내는 게임이다. 종종 그런 상황일 때 게임을 별로 좋아하지 않는데도 흥미롭게 시도해 보고는 한다.
CSS 기술 업데이트 주제에서 갑자기 게임 이야기는 뭐지? 생뚱맞은 연결이라고 할 것 같지만 절대 그렇지 않다.
"최신 CSS 기능을 가장 효과적으로 보여주는 방법은 무엇일까요? 바로 CSS만으로 게임을 만드는 것입니다"
외국의 '테마니 아피프(Temani Afif)'라는 개발자는 이렇게 자신이 개발한 게임을 소개했다. 궁금하다면 다음의 블로그를 방문해 보기 바란다.
라이브코드 에디터는 레퍼런스의 예제와 테스트 도구 등을 이용할 수 있는 서비스입니다. 제공된 예제에서 직접 소스 코드를 수정해서 테스트해 보는 것만으로도 훌륭한 학습이 될 수 있습니다.
지금까지의 라이브코드 에디터는 이용자가 직접 코드를 저장할 수 없었습니다. 학습 중에 생산된 코드를 저장하고 싶은 요구가 많을 것 같다는 생각이 들었습니다.
그래서 데브딕은 점진적으로 라이브코드 에디터를 업데이트할 계획을 세웠습니다. 먼저 클라우드에 저장하는 기능을 추가했습니다. 그리고 저장된 소스 코드들을 빠르게 찾을 수 있도록 검색과 태그 기능을 포함했습니다. 또한 도큐멘트 메뉴를 추가해서 소스 코드에 대한 설명을 문서로 작성할 수 있도록 했습니다. 마지막으로 포크(Fork) 메뉴를 포함해 레퍼런스의 예제 코드를 따로 저장하도록 했습니다.
사실 이러한 라이브 에디터는 더 훌륭한 기능을 갖춘 서비스가 인터넷에 존재합니다. 하지만 레퍼런스와 직접 연계된 라이브 에디터가 갖는 장점이 클 것이라 생각합니다. 앞으로도 학습과 테스트에 필요한 기능들을 고민하며 업데이트해 나갈 예정입니다.
라이브코드 에디터를 이용하려면 당연히 계정이 필요합니다. 간단한 회원 가입으로 라이브코드 에디터의 업데이트된 기능을 사용할 수 있으므로 많은 이용을 바랍니다.
얼마 전부터 새로운 교육생 분들과 약 4개월 대장정이 시작되었습니다. 안그래도 취업 시장 불안으로 웹프론트엔드 공부를 하려고 하는 분들이 많이 줄었는데 정말로 소중한 미래의 인재들입니다.
반면에 데브딕 레퍼런스 업데이트 작업 시간이 줄었습니다. 업데이트 작업이 산더미인데 살짝 초조합니다.. 그래도 틈틈이 시간을 만들어 계속 레퍼런스 업데이트 작업을 해 나가고 있습니다. 곳곳에 부족한 내용들이 눈에 들어오는데 인내하면서 주어진 여건대로 채워나가겠습니다. 앞으로도 변함없는 관심을 부탁드립니다.