웹에서의 그래픽 다루기 (2편 : HTML5 SVG 도형) 안녕하세요! CX 사업부의 왓썹입니다ㅎㅎ 오늘은 웹에서의 그래픽 다루기(1편:HTML5 SVG 소개) 편에 이어서 포스팅을 이어 나가도록 하겠습니다. 1편에서 SVG 소개를 간단히 하였기 때문에 더 이상의 설명은 하지 않고 바로 SVG의 간단한 사용법부터 알아보도록 하겠습니다. 코드 작성은 webPonent-Publisher 라는 웹포넌트에서 제공하는 편집 툴을 이용해서 작성 할 거에요. 작성된 코드가 실시간으로 적용되어 결과를 바로 바로 확인 할 수 있어서 사용 편의성이 좋기 때문에 자주 사용하는 툴입니다. SVG에서 제공하는 기본 도형은 line, rect, circle, ellipse, text, image, polyline, polygon..

안녕하세요. 이번에는 HTML5에 기능 중 websocket에 대한 이야기를 해볼까 합니다. 과거 우리는 순수 웹 환경에서 채팅과 같은 실시간 응용프로그램들을 구현하기 위하여 참 많은 노력을 해왔습니다. 이제는 구시대의 전유물이 되어버린 hidden iframe을 통한 재 요청 방법, 이후 Ajax의 등장으로 인해 비동기를 통한 반복 요청, 그 이후 Comet의 등장으로 서버의 데이터를 수신 후에 재 요청을 가능하게 하는 방법 등 실시간을 위한 노력은 계속해서 발전하게 되었습니다. 하지만 위 모든 방식은 공통점은 polling 방식이라는 점입니다. 서버가 클라이언트에게 데이터를 push하는 방식이 아니라 클라이언트가 서버에게 데이터를 요청하는 방식이라는 것입니다. 브라우저가 일정한 시간을 주기로 HTTP..

[번역글]반응형 웹 디자인의 단점(원제: You may be losing users if responsive web design is your only mobile strategy) 반응형 페이지로 사이트를 제작하고서, 브라우저를 크기를 조절하며 아마도 뿌듯한 미소를 지을겁니다. 모바일에 우호적인 웹사이트 제작이라는 목적을 달성했다고 생각할 것입니다. 그러나 반응형 웹 디자인이 전체 목적이자 모바일을 위한 유일한 해결책이라면, 사용자와 아마도 그에 따른 수입을 잃게 될지도 모릅니다. 어떻게 하면 반응형 디자인을 현명하게 적용할 수 있는지부터 시작해서, 왜 모바일에서의 퍼포먼스가 중요한지, 왜 반응형 디자인이 웹 사이트의 최종 목표가 되어서는 안되는지, 마지막으로 문제를 이해하도록 도와줄 반응형 디자인의 ..

웹에서의 그래픽 다루기 (1편 : HTML5 SVG 소개) 1. SVG 란?W3C (World Wide Web 컨소시엄) 의 권장 사항인 SVG (Scalable Vector Graphics) 는 XML 에서 2차원 그래픽을 설명하기 위한 언어로 웹 페이지에 표시할 빠르고 가벼운 그래픽을 만들기 위해 사용할 수 있는 매우 효과적인 도구입니다. 2. SVG 사용 예SVG를 잘 활용한다면 그림의 설명 상자와 같은 간단한 작업부터 게임까지 다양한 분야에서 사용 할 수 있습니다. 특히 근래 데이터 시각화가 이슈화 되고 있는 시점에서 SVG는 차트나 다이어그램, 지도 등을 구현하는데 아주 유용하게 쓰일 수 있습니다. * 아래 링크는 SVG를 잘 활용한 사례로 참고하시면 좋을 것 같습니다. 3. Browser Su..

자바스크립트 소팅, 멀티소팅에 관하여 웹포넌트 그리드에는 기본기능으로 소팅, 멀티소팅이 있습니다. 기능을 구현하면서 많은 시행착오가 있었습니다. 이 글에서는 당시에 얻은 "자바스크립트를 이용한 클라이언트사이드 소팅"관한 지식을 공유하려고 합니다.자바스크립트의 Array.prototype.sort()메서드에 대해서 알아보고 메서드의 응용, 멀티소팅은 어떤식으로 구현했는지 소개하려고 합니다.sort()메서드의 동작방식sort()메서드를 아무인자도 주지 않고 실행 시키면 사전식으로 정렬이 됩니다. 1 2 3 var letters = ["R","O","F","L"]; letters.sort(); alert(letters); //produces ["F","L","O","R"] cs 하지만 실제세계에서는 날짜비교,..

HTML5 간단한 소개 이미지 출처 https://www.powwownow.co.uk HTML5이란 웹 개발 생산성 향상 및 차세대 웹 애플리케이션 플랫폼으로서 더 나은 사용자 경험을 위해 함께 만들어 나가는 개방형 웹 표준이다.2004년부터 전 세계 웹 개발자들이 직접 참여하여 만들어온 표준이기도 하다.HTML5는 HTML4와 비교하기 어려울 정도로 엄청나게 확장된 표준이다. HTML4까지는 웹에서 문서를 표현하고 연결하는 기능에 중점을 두었다면, HTML5 표준은 앱 개발 플랫폼을 목표로 하였기 때문이다. 즉, HTML5에는 멀티미디어 기능으로 비디오, 오디오를 지원하며, 2차원 그래픽 기능인 캔버스 지원 한다. 또한 기존 웹 콘텐츠에서 가장 많이 활용되는 구조를 분석하여 확장 HTML5 Forms ..

WEB-CACHE (TIME-SPACE TRADEOFF) 더 빠른 웹사이트를 위해 저희 개발자들은 눈물겨운 노력을 많이 합니다. - WebCache - Code Compressing - Image Optimizing - Image Spriting - Critical Rendering Path - Webfont Optimizing - Lazy Loading - 기타 등등등등등.... 위에 나열한 것들은 하나 같이 다 도움이 되는 방법들이지만 이번 저희가 수행하는 웹툰 사이트를 개발하던 중 많은 양의 이미지와 data(json) 등을 서비스 하기 위하여 고민하던 중 Web Cache에 대해 좀 더 깊이 파기 시작하여 알게 된 지식들을 공유해보고자 합니다. 웹 캐쉬 웹 캐쉬란 client가 요청하는 html,..

[번역글] 더 좋고 빠른 디자인 연구를 위한 8가지 지름길 저(원글의 저자: Michael Margolis)는 거의 24년 동안 디자인과 UX조사를 해오고 있습니다. 그 시간동안 많은 것을 배웠고, 몇 년에 걸쳐 실력이 더 좋아졌기를 바라고 있습니다. 한가지는 확실합니다. 저는 처음 시작할 때보다 지금 훨씬 생산적입니다. 저는 다른 사람보다 똑똑하지 않습니다(제 동료들에게 물어보세요). 저는 추가 근무를 하지 않았습니다. 그러면 저의 비결은 무엇일까요? 바로 지름길입니다. 여러분이 일을 더욱 빨리 하게 도와드리기 위해서(그리고 여러분 자신의 비결을 공유하게 하기 위해서), 조사를 수행할 때 수고를 줄이고, 시간을 절약하고, 더욱 생산적이기 위해 제가 선호하는 방법들을 소개합니다. 1. 끝에서 시작하라: ..

멋진 웹사이트를 디자인하는 방법 커피 콩을 구매하는 것, 투자를 하는 것, 의사를 결정하는 것은 어떤 공통점이 있을까요? 그것은 모두 쇼핑의 형태라는 점입니다. 각각의 경우, 고객은 검색, 평가, 선택 범위 좁히기 등의 예상가능한 과정을 따릅니다. 만약 고객이 어떤 쇼핑의 과정을 따르는지 이해한다면, 적절한 장소에 적절한 메시지와 함께 상품을 디자인 할 수 있습니다. 그리고 이는 경쟁자를 제치고 당신의 상품을 선택하도록 하며, 더욱 중요하게는 고객에게 완벽히 딱 맞는 상품을 구축하도록 이끌어줄 것입니다. 구글 벤쳐에서는, '쇼핑 깔때기(shopping funnels)'가 디자인 작업에 있어서 비밀 무기가 되었습니다. 이를 블루 보틀 커피(Blue Bottle Coffee), 원 메디칼(One Medica..

반응형 웹 디자인의 9가지 기본 원칙 반응형 웹 디자인은 멀티스크린 문제점에 대한 훌륭한 해결책이지만, 프린트의 관점에서의 반응형 웹 디자인은 어려운 문제입니다. 고정된 페이지 사이즈가 아니며, 밀리미터 혹은 인치도 아니고, 맞서야할 물리적인 제약이 있는 것도 아닙니다. 또한 데스크탑과 모바일만을 위해 픽셀로 디자인하는 것은 과거의 것이며, 점점 더 다양한 장치로 웹사이트를 열 수 있습니다. 그러므로, 유동적인 웹과 맞서는 대신 포괄하는 반응형 웹 디자인의 몇 가지 기본 원칙을 명확히 해두려고 합니다. 간단하게 하기 위해서 레이아웃에 중점을 맞추어보겠습니다. 반응형 VS 조정(adaptive)형 웹 디자인아래의 그림은 같게 보일 수 있지만 그렇지 않습니다. 이 두가지 접근법은 서로 보완할 수 있기에, 옳..