Epiloum Slider – 간결한 HTML 마크업을 기반으로 하는 jQuery 애니메이션 슬라이더

이번 포스팅에서는 제가 작성한 jQuery 애니메이션 슬라이더(Slider) 모듈인 “Epiloum Slider”를 소개합니다.

웹 상에서 찾을 수 있는 수많은 자바스크립트 또는 jQuery 슬라이더는 필요 이상의 복잡한 HTML 태그 구조를 요구하거나, 사전에 CSS 작업 상당 부분 필요한 경우가 많습니다. 이처럼 애니메이션이라는 UX적인 부분을 위해 마크업을 희생하는 것은 의미론적 마크업의 철학에 위배되는 것이기도 합니다.

Epiloum Slider는 그와 같은 상황에 대한 안타까움으로부터 만들어졌습니다. 본 모듈의 가장 큰 특징은 1개의 <ul> 또는 <ol> 태그와, 그 아래에 나열된 <li> 태그들 만으로 적용 가능하다는 점입니다. 또한 스크립트를 이용해 CSS를 변경하는 일을 최소화하여, 실무에서 응용할 때 레이아웃에 영향을 줄 가능성을 최소화하였습니다. 간결한 마크업를 추구하는 많은 분들께 도움이 되시기를 바라겠습니다.

 

파일구성

아래 버튼을 눌러 다운로드 받은 zip 파일의 압축을 해제하면, 2개의 디렉토리를 만날 수 있습니다. 첫 번째 디렉토리인 Module 아래에는 자바스크립트 파일 epiloum_slider.js이 들어있으며, 실제로 본 슬라이더를 사용할 때에 임베디드해야 하는 파일입니다. 두 번째 디렉토리인 Example 아래에는 본 모듈의 사용예제가 들어 있습니다.

Download Button

Continue reading

Linux에 Django 설치하기

DjangoPython을 언어로 사용하는 웹개발 프레임워크입니다. 금번 포스팅에서는 제가 Linux에서 Django를 설치하고, 첫 프로젝트를 생성했던 과정을 소개하고자 합니다.

금번 설치과정을 거친 서버는 운영체제로 CentOS 6.5를 사용하고 있으며, LAMP 환경의 웹서버가 이미 작동하고 있는 서버였음을 먼저 밝힙니다. 아울러 이 글에서 소개하는 Linux 명령어는 모두 root 계정에서 실행되었음을 첨언하여 두고자 합니다.

Continue reading

코멧(Comet) #2 – Ajax 폴링(Ajax polling) 채팅방 예제로 배우기

코멧을 구현하는 첫 번째 방법은 Ajax 폴링(Ajax Polling)이라고 하는 기법입니다. 이 기법은 모든 코멧 방법론 중에서 가장 직관적이고 구현이 간단하여, 코멧 방법론에 입문할 때에 처음 만나게 되는 기법입니다. 기본적인 아이디어는 일정시간마다 Ajax 통신을 하여 서버의 상태를 가져오는 것이라고 요약할 수 있습니다.

이 포스팅에서는 자바스크립트와 더불어 PHP, MySQL로 구현한 간단한 채팅방 예제를 통해 Ajax 폴링을 구현하는 방법을 알아봅니다.

Continue reading

시장지배적 기업의 인증은 표준이 된다: 알리바바의 QR코드 투자에 담긴 포석

중국 최대의 전자상거래 기업인 알리바바가 스타트업에 투자해온 것은 어제오늘 일이 아니지만, 이번에 투자를 받은 이스라엘의 스타트업 Visualhead은 많은 의문과 해석들을 낳고 있습니다. Visualhead는 QR코드 리더로 읽을 수 있지만 코드 뒤에 이미지나 동영상 삽입이 가능한 Dotless visual codes 생성기술을 보유한 스타트업입니다.

Visualead CI

QR코드를 비롯한 O2O(Online To Offlin) 기술은 태생 자체가 과도기적 기술입니다. 이것은 생명력이 어디까지 갈지 알 수 없다는 것을 의미합니다. 여기에 QR코드는 난이도 있는 기술도 아니어서, 이것으로 거액의 투자를 성사시켰다는 뉴스가 쉽게 받아들여지지 않습니다. QR코드의 스펙상 그 뒤에 이미지나 동영상 삽입이 가능하다는 사실 또한 널리 알려진 사실인데요. 그래서 이 기술에 Dotless visual code라는 무언가 특별한 네이밍을 붙이는 것 자체가 어색하게 들리기도 합니다.

Continue reading

웹개발자를 위한 도구모음: 〈Epiloum Widget〉 소개

금번 포스팅에서는 제가 직접 제작하여 사용하고 있는 개발용 도구모음, 〈Epiloum Widget〉(http://widget.epiloum.net)에 관하여 소개하고자 합니다. 〈Epiloum Widget〉은 개발 중에 (특별히 DB에 저장된 데이터 검증·조작이나 디버깅에서) 필요성을 느꼈던 자잘한 변환이나 파싱기능을 소도구로 만들어 한데 모은 웹 어플리케이션입니다.

〈Epiloum Widget〉 안에는 Unix Timestamp를 사람이 알아볼 수 있는 시각으로 변환하는 소도구, URL에 들어있는 퍼센트인코딩된 문자열들을 실제 문자로 풀어내는 소도구, MD5 · Sha1 · Base64 등의 인코더 및 디코더 등, 다양한 소도구들이 포함되어 있습니다. 현재까지 큰 메뉴는 5가지가 만들어져 있으며, 그 아래에 10여개의 소도구들이 있습니다.

Epiloum Widget 사용 스크린샷

메뉴에서 선택한 소도구들은 웹 브라우저 안에 마치 Windows OS처럼 창으로 표시됩니다. 이 창들은 제목표시줄을 드래그를 하여 위치를 옮길 수 있습니다. 모든 기능의 작동은 Ajax으로 이루어지기 때문에 페이지 로딩이 일어나지 않습니다. 따라서 이 도구는 웹 브라우저에 탭으로 띄워놓고 얼마든지 필요할 때 다시 표시하여 사용할 수 있습니다.

〈Epiloum Widget〉은 순수하게 제 개인의 필요에 의해 제작하기 시작한 도구입니다. 이 도구를 만들기 전에는 각종 기능이 필요할 때마다 매번 코딩을 하여 결과값을 얻거나, 구글 등에서 다른 개발자들이 만들어놓은 도구를 검색하곤 하였습니다. 이러한 일로 작업의 흐름이 끊겨 기분이 언짢게 되는 일이 많다보니, 결국은 다양한 소도구들을 한 화면에서 제공하는 웹 어플리케이션을 만들게 된 것입니다.

제작동기 자체가 개인적인 것이다보니, UI나 작동환경 면에서도 저의 이용패턴에 맞추어 만들어진 부분이 많습니다. 또한 일부는 실험적인 도전이 가미되는 경우도 있습니다. 때문에 본래는 저와 함께 일하는 동료들에게만 공유하고 사용하고 있었던 도구입니다. 사용 중에 다소 간에 불편이 있겠으나, 개인 프로젝트로 만들어진 결과물임을 감안하시어 너그러운 눈으로 바라보아 주시기 바랍니다.

마지막으로, 본 도구는 jQuery 2.x 및 CSS3에 크게 의존하고 있기 때문에, Internet Explorer 9 미만의 버전에서는 작동하지 않습니다. 그러나 이 도구를 사용하는 대부분의 분들이 높은 버전의 브라우저를 사용할 가능성이 높은 개발자 분들임을 감안하여, 브라우저별 호환성을 개선할 계획은 가지고 있지 않습니다. 양해를 부탁드립니다.