nevermind

UI Developer , Front End Developer, One Web 모두를 위한 길 , 모바일웹, HTML5,CSS3

2012/05/12
by nevermind
0 comments

navigator 메소드로 language 체크

사용자가 어떤 언어 환경에서 접속한지를 체크하여 서비스를 제공할 경우,
프론트 단에서 할 수 있는 것들이 없다.

모바일 환경의 경우 navigator.userAgent 로  값을 받아오게 되면, 아이폰에서 언어유형이 나오지 않는다.
안드로이드에서만 language 유형이 포함되어 있다.

그래서, navigator.language  을 이용해 봤다.
항상 ‘en’ 만 나온다. 이유는 아래와 같다.
https://github.com/dansingerman/jQuery-Browser-Language/blob/master/jquery.browserLanguage.js

즉, 서버의 http header의 “Accept-language” 를 체크할 수 있어야 하는데, 자바스크립트는 서버 쪽의 정보에 직접 접근할 수가 없는 것이 문제다.

따라서 위 페이지에 있는 스크립트는 서버 쪽에서 자바스크립트로 “Accept-language”의 속성을 전송하는 스크립트를 통해 이 문제를 해결할 수 있다.
이렇게 해결하면 아이폰에서도 사용자의 언어환경 값을 받아 올수 있다.
사용자의 언어환경이란 os에서 기본사용언어로 세팅한 언어를 말한다.

 

2012/05/11
by nevermind
0 comments

안드로이드 – 플래시 컨텐츠 플리킹

어도브에서 모바일 플래시 지원을 중단하겠다고 한 마당에, 왜 이런 서비스를 개발해야 되는지 의문이다.
삽질의 일상화, 오타쿠로서의 면모를 자랑하는 개발자이지만, 나도 수많은 서비스를 사용하는 사용자 중 한명이다.
회사를 다니면서 이런 경우가 가장 힘들다.
이건 아니다 싶은 서비스. ㅎ_ㅎ

그래도 어딘가에서 나와 비슷한 삽질을 할 개발자에게 도움이 될지 모르니 간단히 몇 자 적어본다.

현재, 내가 개발하고 서비스는 안드로이드 런쳐에서 다수의 플래시 영상을 플리킹을 통해서 제공하는 모바일웹앱이다.
모바일웹에서 position 이나 scroll 속성이 데스크탑과 다르다.
정확히 표현하면 저 속성들을 쓸수 없는 환경이 바로 모바일웹이라는 환경이다.

데스크탑 브라우저는 웹문서를 랜더링하고 문서가 길어질 경우 스크롤로 아래에 있는 문서를 읽는다.
모바일 브라우저는 웹문서를 랜더링한 후 축소하여 제공하며, 우리가 스크롤이라고 착각하는 행위는 뷰포트를 이동시키는 것이다.

즉, 모바일웹에서의 postition은 처음 랜더링 하고 축소했을 그 시점에 모두 고정되어 버린다.

안드로이드는 버그도 많지만, 브라우저의 기본기능 자체가 안정적이지 못하다.
초창기 iOS가 fixed를 지원하지 않을 때도 안드로이드는 지원을 했었다. 하지만 퍼포먼스가 엉망이었다.
플래시도 마찬가지다. 플레이가 되긴 되는데 너무 불안하다.
한번 화면에 뿌려진 플래시는 다음 영상을 불러와도 사라지지 않고 계속 그 자리에 남아 중첩된 영상을 제공한다.

1. 여러 플래시 동영상을 컨트롤할 경우, 화면에서 사라져야 되는 플래시는 반드시 display:none을 해줘야한다.
2. 좌우로 플리킹 되는 영상의 경우도 처음 자리 잡은 곳에 박혀 부모가 자리를 이동해도 계속 혼자 남아 있다.
이 경우, 배열처리를 이용해서 margin값을 조절해 주는 방법이 있다.
3. 플래시 사이즈를 100%로 할경우 레이아웃이 불안정해진다. 이벤트 발생 때 간헐적으로 레이아웃이 깨진다.
대안은 마크업에서 적당한 픽셀 수치를 기입한 후 css에서 100% 를 준다.

웬지 나말고는 아무도 이런 작업을 안할 것 같은 슬픈 느낌…….
엉엉.

2012/04/29
by nevermind
0 comments

팃포탯 Tit-for-tat

팃포탯 전략이 정말 필요한 시기이다.

박노자님의 저서 ‘왼쪽으로 더 왼쪽으로‘  에도 보면,
부자가 사람들한테 존경받을려면 사람들로부터 견제와 감시를 받을 때에만 가능하다는 사례를 북유럽의 오래된 부자 가문을 예로 들었다. (이름이 기억이 안남… 대대로 존경받는 부자가문이라는 표현이 너무 생소했음)

이해하고 참고 기다리고 인내하고 긍정적으로 생각한다고 해서 삶이 더 풍요로워지진 않는다.오히려 한사람 한사람의 인내가 전체의 삶을 벼랑 끝으로 모는 경우가 더 많다.
최근 읽은 김인성님의 ‘한국IT산업의 멸망‘에서도 이와 같은 부분을 언급하고 있다.
팃포탯은 게임전략 중 승률이 가장 높은 전략이다.
1.협력 2.배반당한 경우 반드시 보복 3.용서와 재협력 라는 규칙이다.
이때, 중요한 것은 행동이 명백해야 한다는 것이다.
2번과 같이 ‘바로 보복’하는 경우가 그 명백이라는 것에 해당한다.
세번까지는 용서한 후 보복한다라는 게임전략을 세운 팀은 상대가 그 횟수나 패턴을 읽기 어렵기 때문에 승률이 낮아졌다.
따라서 ‘즉시 보복’이 아주 중요한 요소이다.

김인성님의 블로그인 ‘미닉스의 작은 이야기들‘에는 읽을 거리도 많고 배울거리도 많다.
특히 ‘애국이란 무엇인가‘라는 웹툰을 통해서 복잡하게 들릴 수 있는 우리의 현재 상황을 잘 설명해 준다.

김인성님의 책은 좀 특별하다.
분명히 기술적인 내용이고 사실과 자료에 근거한 딱딱한 내용인데, 소설책을 읽은 것 마냥 가슴이 먹먹했다.
아마도 이 책을 읽은 사람들은 나와 크게 다르지 않을 것 같다.
우리나라 IT현실에 대한 참담함, 그리고 그 회오리 속에서 살아온 나 자신, 누구보다 답답한 현실을 가장 면밀히 지켜보며 혼자서 열심히 ‘잘못됐다!’라고 외쳐온 저자에 대한 애틋함이었다. 저자의 긴 행보가 한없이 외로워 보이고 용감해 보인다.

용서 만큼 중요한 것이 분노일지도 모른다. 우리나라 사람들에겐 익숙하지 않은 표현이지만.
분노, 보복… 우린 이런것을 경계하는 사람으로 키워졌다.
하지만, 지금 이 시기는 분노할 시기라고 프랑스 레지스탕스 ‘스테판 에셀(분노하라의 저자)’ 할아버지도 그렇게 말하고 있다.

어쩌다 보니, 내가 좋아하는 책들을 다 읊었다.
따로 블로깅 할려고 했는데…

마지막으로, 강정마을에서 경찰들과 대치하다 사고를 당한 문정현 신부님과 관련된 기사이다.
이제 구럼비는 없다…
구럼비는 별거 아닌 돌맹인데 괜히 야단법석이라며 유네스코 지정도 거짓 홍보라는 글도 많이 봤다.
유네스코든 아니든 내 눈에 비친 구럼비는 참 아름다웠다. 파괴해선 안될 것 같았다. 후세들에게 미안한 일이 될 것 같았다.

구럼비를 지키려다 사고를 당한 문정현 신무님은 이렇게 말씀하신다.
“무조건 화해·용서하라는 말은 굉장히 위험한 거야”

상식을 글로 쓰면 좌파로 몰리는 우리의 현실.
상식을 상식으로 봐주는 그런 세상이 빨리 왔음 좋겠다.

 

2012/03/26
by nevermind
0 comments

예제 소스 코드의 품질

최근에 위의 두 책을 공부했다.

하나는 ‘ jQuery Mobil’e(존 라이드 저/한선용 역 | 한빛미디어) 이고,
다른 하나는 ‘모바일웹개발’(박종명 저 | 위키북스) 이다.

‘jQuery Mobile’ 을 읽고 난후, 센챠도 공부할겸 ‘모바일웹개발’을 보면서,
후자인 ‘모바일웹개발’의 예제 소스 코드의 품질에 마음이 언짢았다.
마크업 자체가 시맥틱 하지 않고, html5로 dtd를 선언했음에도 불구하고  div 태그만 남발되어 있다.
그리고, <a> 태그의 href 속성에 너무나도 자연스럽게 “#”을 써주시고… center 태그도 나와주시고…

http://jquerymobile.com/ 에 codiqa 라는 ui-builder 통해서 작성된 마크업을 보면 div 로만 구성되어 있는데,
‘jQuery Mobile’ 의 예제소스는 빌더와 똑같은 구조지만  section,header,footer 등으로
모두 정제된 표준 마크업으로 수정되어 있다. 이 것이 검수를 거쳐서 그런 것인지, 아니면 저자의 내공인지는 알수 없으나,
코드 품질의 차이에서 느껴지는 이 씁쓸함… (나쁜코드 쪽이 국내저자라는 것이 좀 슬프다…)

예제 소스따위로 딴지 건다고 생각할 수 있겠지만 ppk, dom-script 등 다른 책들을 볼때는 전혀 느끼지 못했다.
이 책들은 표준을 준수하고 접근성을 고려하며  유저에이전트를 해치지 않는 범위 내에서의 사용성을 향상시킨다.
기술구현만을 위해 각을 잡은 책과 그 기술구현이 결국엔 사용자를 향한 서비스라는 것을 인지하고 각을 잡은 책.
그 각도의 갭만큼 책의 품질에도 차이가 난다는 것을 새삼 깨달았다.

아무리 자바스크립트 책이고 또한 본인의 업무가 해당 영역에 한정되어 있다고 하더라도, 최소한 유관분야의 사람들에게 검수를 받는 기본적인 프로세스를 거쳤음 하는 바램이다. 저 책으로 프론트엔드 개발을 꿈꾸는 새내기가 있을 수 있다.
사실 스크립트는 마크업과 css를 잘 모르면  ui 컨트롤은 힘들다. (구글이 도와주는것도 한계가 있다.)

html5와 API, CSS3에 달려드는 불나방이 아닌,
우리가 만드는 것들을(그게 웹페이지든 책이든) 다양한 사람이 본다는 것을 항상 의식했으면 한다.
IT는 변화무쌍하다. 계속 변한다. 그말은 항상 눈길이라는 말이다.

‘눈 덮힌길을 함부로 걷지마라. 오늘 네가 걷는 발자국이 뒷 사람들의 길잡이가 된다.’

2012/03/22
by nevermind
0 comments

인라인 이미지 data – url 스키마 이용법

구글 모바일을 보면,

백그라운드 이미지를 http요청이 아닌 data 스키마를 이용한 인라인 이미지 를 사용하고 있다.

이미지를 데이타로 변환하는 과정에 대해 찾아보니,
http://www.websemantics.co.uk/online_tools/image_to_data_uri_convertor/
해당 사이트가 있어 몇가지 테스트를 해봤다.

사용법은,
<img src=”sample.jpg”> 를
<img src=”data:value”> 로 표기하면 된다.

이미지가 별도의 파일이 아니므로, 서버요청을 하지 않는다.

단, 페이지 내에 직접 삽입하는 것은 좋지 못하다고 한다.
캐시 처리가 되지 못하는 단점이 있으므로, 캐시처리가 되는 css 내에 사용하는 것이 사이트를 더욱 최적화 시킬수 있다.
또한, 일반적으로 이미지를 데이타화 시키면 용량이 늘어난다.
(약 1.2~1.5배 가량)

아래는 배너형 이미지와 아이콘 이미지를 가지고 테스트해본 결과다.

말나온 김에 스티브 사우더스 저 ‘웹사이트 최적화 기법‘ 에서 나오는 예제들을 다 테스트해 봤다.

php 의 file_get_contents 함수를 이용한 기법인데, 몇가지 의문이 생겼다.

http://hy74.co.kr/test/dataImg.php

우선, 크롬의 개발툴에서 css 코드를 볼 수 없다는 단점이 있었다.
그리고 파일을 css 로 해석했으나 마임타입이 text/html 로 바꿨다라는 메시지가 뜬다.
그리고, css 를 css가 아닌 php로 해도 캐쉬가 되는지도 궁금했다.
yslow에서 보면 캐쉬처리가 제대로 되고 있는지 의심 스럽다.

파폭에서 임시파일 폴더를 다시 세팅해서 확인해 봤지만, 아무것도 찾을 수가 없었다.
내가 뭘 잘못한 걸까?…