며칠을 고민하고 힘들어 하던 문제가 해결되니 앓던 이가 빠진느낌 입니다.
문제의 발단은 이랬습니다.
SenchaTouch로 제작하고, PhoneGap으로 묶어 하이브리드앱으로 거듭난 코리아헤럴드 아이패드 앱 프로젝트…
그간에 노력을 얼마나 하고 얼마나 많은 인력을 투입했으며,
이젠 손익보단 저놈을 어떻게 해서든 마무리를 짓겠다는 오기가 생겨버린 프로젝트…
iOS 5.0 으로 업데이트 되면서 부터 사파리도 같이 5.1.1로 업데이트되어 버리면서 많은 문제들이 발생하기 시작. 일어난 문제들은 다음과 같습니다
1> -webkit-column의 렌더링 방식의 변화
2> sencha에서 만들어 놓은 3D렌더링 컨트롤 하는 css3의 오류
그밖에 수많은 자잘한 버그들이 있지만 그건 버그라고 할 수도 없는 축에 들고, 위에 두가지 버그로만 이야기 하자면
1. -webkit-column의 렌더링 방식의 변화
column의 렌더링 속성들이 변경되면서 height를 지정하게되면 scroll이 인식이 안되는 .. 가장 이상한 버그.
어찌보면 더 편하고 좋게 변경되었는지도 모른다 . 하지만 이렇게 바꾸어 버리면… 바꾸었다고 얘기라도 해주지 .. 수많은 테스트를 통해 carousel하는방식을 변경하는 상황까지 이르렀다.
2.SenchaTouch에서 만들어 놓은 3D랜더링 컨트롤 CSS3의 오류
이 오류는 정말 하이브리드 프로젝트를 포기하고 네이티브로 전면 교체를 해야하는가 … 까지 고민을 하게 만든 버그 …
이유도 없고 알수도 없는 가로모드에서의 느려짐.
javascript 코드를 만드는 그룹( http://www.blaze.io/mobile/ios5-top10-performance-changes/)에서 연구한 결과 iOS5 이상에서 javascript엔진의 효율성이 -20% 나된다는 충격적인 결과…
모든 상황은 하이브리드 프로젝트를 포기하라고 하고있었는데 … 가만히 생각해보니 SenchaTouch에서의 스크립트는 플리킹이 전부인 놈인데 느려질것이 없다라는 생각을 하게되고, 연구결과는 애플에서는 플래시의 효과를 내는 Canvas 랜더링 엔진이 미친듯이 빠르게 변했다고 하는 앞뒤가 맞지않는 결과가 있어, 고놈쪽으로 css 를 테스트…
테스트 방법은 이렇습니다.
1> SenchaTouch dafault sass 뭉치를 전부 걷어 내고, compile된 css 에서 SenchaTouch sass 안에 변수를 @import하는 놈들을 전부 제거후 테스트 (일단 이 단계에서는 킹왕짱 잘돌아감 …)
2> 그럼 문제는 SenchaTouch 의 dafault sass 3d관련하는 SCSS 와 Carousel의 관련 sass 를 집중공략. 좀 노가다 같지만 변수를 하나씩 제거후 compile 결과 (가로모드 느려짐 현상이 갑자기 해결됨 ..)
dafault 그룹에있는 core 폴더에 _core.sass에서 이상한 놈을 @improt .
하나는 박스 컨트롤 관련. 다른 하나는 프린트 그래픽관련 이었고,
사파리5.1.1에서 전혀 랜더링이 되지 않는 놈들이니 Matrix3D 를 적용하여 랜더링 하느라 가속을 할수 없이 연산을 하다보니 느려진것이 첫번째이고,
관련된 코드중에 아래 볼드 처리한 놈들이 문제를 발생시켰던것이다.
이유는 사파리에서는 3D렌더링 방식과 박스를 컨트롤 하는 Panel Mask 랜더링 방식이 달랐던것이다.
그래서 아래 코드를 지웠더니 정말 마법같이 해결 ….
이제 mask 를 없애므로써 일어날 버그들을 하나씩 방식을 바꾸어 해결할 일들만이 남았다 .
/*
.x-ipad {
.x-container, .x-panel, .x-toolbar, .x-mask {
//-webkit-transform: translate3d(0, 0, 0);
}
}
*/
.x-ios .x-scroller, .x-ios .x-scroller > * {
//-webkit-transform: translate3d(0, 0, 0);
}
.x-floating {
// position: absolute !important;
// z-index: 10000 !important;
// top: 0;
//left: 0;
}
@if $include-html-style {
.x-html {
-webkit-user-select: auto;
// @include blueprint-typography;
line-height: 1.5;
color: #333;
font-size: .8em;
padding: 1.2em;
ul li {
list-style-type: circle;
}
ol li {
list-style-type: decimal;
}
}
}
퍼니피플 노하우
2010년말 최초 기획 제안 후, 2011년 한해동안 치즈 제품에 QR코드를 부착하고, 모바일웹으로 고객들에게 구입한 치즈에 대한 정보와 보고있는 치즈로 손쉽게 만들수 있는 요리 레시피를 제공하자는 취지에서 개발된 상하치즈 모바일 웹 프로젝트입니다.
이번 수상을 계기로 그동안 시도중인 다양한 모바일 기술을 더욱 고도화 하고, 새로운 기술의 개발에 박차를 가하여 다음 연도 어워드에서 더욱 다양한 성과를 낼 수 있도록 할 예정입니다.
늘어난 식구들을 추운 겨울을 조용하고 따뜻하게 보낼 수 있게 가스보일러로 난방이 가능 해야 하고, 시끄러운 자와 조용한 자를 분리하여 수용(?)할 수 있는 독립적인 공간. 까다로운 퍼니인들의 입맛에 딱맞는 사무실을 구하기란 정말 어려운 일이었습니다.
