HTML5/MediaElement API
John Dyer씨의 HTML5/MediaElement API.
일단 기록포스팅
CSS3로 이중 그라디언트 버튼 만들기
예전 2010년 8월 14일에 포스팅하였던 것을 다시 포스팅합니다.
CSS3는 그라디언트를 지원함으로써, 위와 같은 이미지의 버튼을 코드상으로 만들수가 있다.
이전 방식으로 위와같은 모습을 구현하고자 한다면 적어도 하나의 이미지가 들어가야 하며, 역활에 따라 색상이 달라진다면 그에 따른 색상의 이미지 백그라운드가 필요하거나, 전체 색상의 버튼 백그라운드가 나열된 sprite background 이미지가 필요할 것이다.
그러나!
CSS3는 이를 가능케 하여준다. 위의 버튼을 자세히 보면 아래 이미지와 같은 구조로 되어있다.
이를 소스상으로 구성해보자면 아래와 같다.
.dbg_btn {width:163px; height:42px; background:#1f82db;
background: -webkit-gradient(linear, left top, left bottom, from(#309ae8), to(#1575d5), color-stop(0.5, #1f82db), color-stop(0.5, #1777d5));
background: -moz-linear-gradient(top, #309ae8, #1575d5);
color:#fff; text-align:center;font-weight:bold; font-size:14px; text-shadow:1px 1px 1px #000;
-webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px;
border:solid 1px #0d66c0;
box-shadow:1px 1px 1px #55aeef;
-moz-box-shadow:1px 1px 1px #55aeef;
-webkit-box-shadow:1px 1px 1px #55aeef;}아쉽게도 현재 webkit 엔진을 사용하는 크롬과 사파리에서는 구현이 되어지지만, Gecko엔진을 쓰는 파이어폭스 그리고 오페라, IE에서는 보여지지 못한다.
덧붙임, 작년에 포스팅할 때만 해도 사파리 외의 브라우저는 지원이 약했으나, 이제는 거의 구현이 되어지는듯 합니다.
정말 웹기술을 빠르게 진보해가네요.
우리가족 자전거 구입기
저번주 여의도의 벚꽃축제 기간이라는 소식을 듣고, 이제 성큼 다가온 봄을 가족들과 함께 즐겨야 겠다는 생각이 강하게 들었다. 무얼 하면 될까… 생각하던중에 자전거가 눈에 들어왔다. 자전거를 타고 같이 봄바람을 맞으면서 다니면 참 좋겠다! 란 생각이 들어 계획을 세워보기 시작하였다.
- 일단, 자전거는 우리 자동차(로체 이노베이션) 뒷 트렁크에 두대가 무조건 들어가야 한다.
- 준우는 이제 15개월… 자전거를 탈 줄 모르므로 자전거에 유아용 안장을 부착할 수 있어야 한다.
- 가격은 저렴해야 한다.
첫번째 조건에 부합하려면 요즘 많이 타는 미니벨로를 선택하면 되는것이었고, 다음으로 유아용 안장을 살펴보니 만원대부터 2~30만원 대까지 다양한 제품들이 나오고 있었다. 역시나 마지막 조건인 저렴란 가격에 무릎을 꿇어야 하였지만, 요모조모 따져본 결과 아래와 같이 제품들이 추려지게 되었다.
FILA 미니벨로 MINIPOP GS 20 – 필라 브랜드가 붙어있으면서(자전거에 관계가 없어보였지만) 대당 9만원대라는 놀라운 제품이었다.
벨레리 유아안장으로 이태리 제품이다. 여러 방식으로 자전거에 부착하는 방식이 있었지만 내가 선택한 것은 안장봉에 부착하는 방식으로 미니벨로의 낮은 뒷 안장의 결함을 커버해주는 제품이었다. 가격은 10만원 정도 (자전거보다 비싸다…)
이리하여 와이프를 다음 단계로 설득하고 자전거 2대와 유아안장을 구입, 주말에 여의도로 갈까 하다가 와이프의 의견대로 자전거를 탈수 있고 꽃도 보고 한산하고도 드넓은 인천대공원으로 향했다. 다행이 자전거 두대는 접어서 테트리스를 잘한 결과 자동차 뒷 트렁크에 고이 들어가고…
이것이 내 자전거이고….
이것이 와이프 자전거이다. 일단은 와이프 자전거에 유아안장을 장착하여 타보게 하였는데 의외로 아이가 잘 타주고 있었다.
집에 거의 다왔으로 내일 이어서 포스팅
스마트폰 유저들을 위해 피해야할 웹 UI 들
앞으로 스마트폰 보급율이 점점 더 많아지고 스마트코리아를 열심히 외치고 있는 지금, 지금도 또한 수많은 사람들이 사무실이나 집이 아닌 곳에서 스마트폰을 이용하여 웹페이지를 열람하고 있는 가운데, 아직까지는 많은 기업들이 스마트폰을 위한 모바일 웹페이지를 구비하고 있지 못한것이 사실이다.
또한 모바일 페이지에서 표현 못할 한계성을 줌라이징 환경을 염두에 두고 일반 웹페이지로서 표현하고자 하는 경우도 있을 것이다. 이때, 컨텐츠를 소비하거나 이용하기 위해 찾은 사람들을 헛되이 되돌려 보내지 않게 하기 위하여 기본적인 웹페이지UI를 구현할 때 부터 이러한 스마트폰 유저들도 염두에 두고 만들어 진다면, 최적화된 모바일 페이지가 아니더라도 고객이 실망하고 돌아가는 일을 막을수 있겠다.
이러한 수반작업을 위하여 염두에 두어야 할 사항들을 정리해본다.
- 마우스 컨트롤 이벤트
가령 네비게이션바에 마우스오버 이벤트로 나타내어지는 메뉴를 구성한다면 이는 마우스클릭 이벤트의것으로 바꾸어야 한다. 터치스크린에서 마우스 오버라는 이벤트는 불가능하다.
또한 마우스 우클릭으로 나타내어지는 이벤트 또한 스마트폰, 태블릿 환경에서는 이용할수 없는 UI가 된다. 마우스우클릭 보다는 직관적인 버튼을 두어 이용할 수 있도록 하는것이 바람직하며, 이는 닫기 버튼 없이 구현되는 레이어형태의 팝업창도 마찬가지겠다. 다음 행동을 생각하도록 하는것보다 직관적으로 이용할 수 있는것이 좋겠다. - 기본 컨트롤 요소의 사용
가령, 자바스크립트를 이용하여 셀렉트박스에 디자인 요소를 부여하여 기본 컨트롤을 숨기고 다른 모습의 셀렉트박스를 구현하였다면, 스마트폰에서 제공하는 셀렉트 패널을 이용하지 못하고, 사용자는 선택을 하기 위해 열심히 줌을 하는 수고로운 행동을 하여야 한다.올바른 접근을 위하여, 가능한 기본 컨트롤의 형태를 고수하는것이 사용자의 편의를 도모하는 길이다.
- 너무 많은 이미지의 로딩
사이트에 너무 많은 이미지 요소들이 있다면 사용자는 사이트가 열리기만을 기다리며 돌아가는 로딩바를 멍때리며 지켜보다가 떠날 가능성이 많다. 가능한 CSS3를 이용하여 이미지대체 구현을 하며, 이미지들은 잘 구조화 하여 image sprite기법으로서 통합하여 이미지 로딩 갯수를 줄여 쾌적한 로딩을 준비하여야 한다.
- 플래시의 사용
플래시는 인터렉티브한 웹을 구현하는데 더할 나위 없는 도구이지만, 아쉽게도 사람들이 많이 쓰는 애플의 아이폰및 아이패드에서는 보여지지 못한다. 최신 CSS기술을 사용하며, 플래시를 대체하면서도 플래시의 기능을 그대로 구현할 수 있다. Sencha의 CSS에니메이터를 소개하는 블로그에서는 이러한 방법을 제시하고 있다.