'모바일'에 해당되는 글 2건

최근에 Adobe Labs에서 Adobe Shadow라는 것을 내놓았다.

간단히 설명하자면, PC에서 보는 웹페이지 화면을 모바일 단말기와 싱크해서 모바일에서는 어떻게 보여지는 확인 할 수 있게 해 준다.
이 뿐만 아니라, Inspector와 같은 크롬용 개발자 도구를 모바일에 연결해서 볼 수 있게 해준다!!!!!
정말 이런 기능이 필요했다.

올바른 작동을 위해서 맥또는 윈도우에서 구동될 호스트 프로그램, 확장 기능이 설치된 크롬 브라우저, 동일 네트워크에서 구동이라는 조건이 필요하다. (윈도우일경우에는 봉주르 서비스 설치가 추가로 필요하다)

백문이 불여일견 아래의 소개 동영상을 보자. 

 

동영상에서 보여주는것처럼, 아이폰, 아이패드, 안드로이드 등의 모바일 단말기를 한번에 연결해서 볼 수 있다.
맥에서 설치해서 해보니, 간혹 Inspector가 연결을 잘 못하는 경우가 있었지만 대체적으로 쓸만했다.

 
자세한 소개 및 설치 방법은 아래의 공식 사이트에서 확인하면 된다.

http://labs.adobe.com/technologies/shadow/ 

이제 뉴 아이패드 한국 발매 시점에 맞추어, 아이패드의 필요성을 회사에 강조하기만 하면 되겠다!!

모바일용으로 디자인된 페이지를 작업하면서, 그 동안 해결하지 못하고 계속 궁금해 했던 문제를 드디어 해결했다.

다름이 아니라, 상단 메뉴바를 만들때, UL과 LI로 메뉴를 구성하다 보면 넓이를 도합 100%가 되도록 정확히 구성했음에도 불구하고, 100%를 차지하지 못하는 경우가 생긴다.

예를 들어, 메뉴가 3개라고 하면, 34%, 33%, 33%로 구성하거나, 33.33%로 새개 모두를 구성하게 된다.
그런데 이렇게 하면 아래 그림과 같이 오른쪽 끝에 빈 공백이 생긴다.

디자이너가 이와 같은 문제를 가지고 여러번 문의해 왔지만, 정확한 해결책을 찾지 못해 고심했다
그러다가 오늘, 본격적으로 이 문제를 짚고 나가야겠다는 생각을 했다.

문제는 webkit 계열 브라우저에서 width 속성을 퍼센트로 주었을때 발생하는것이었다.

아이폰 기준으로 320px의 넓이를 3등분하면, 106.666666.....px이 나온다. 아마도 webkit 계열 브라우저는 소수점 이하 값을 무시하고 넓이를 계산해서 렌더링하는것으로 보인다.
때문에, 소수점이 없이 정확히 떨어지는 퍼센트 값에 대해서는 정확하게 보여줄 수 있었던 반면, 소수점이 나오는 값에 대해서는 실제보다 작게 계산되어 여백이 생기는것 같다.

그렇다면, 이에 대한 해결책은 무엇일까?

약간의 꼼수 같지만, 위와 같은 스타일로 보기 싫은 공백 없이 메뉴바를 보여줄 수 있게 되었다.
최종 결과 화면은 아래와 같다.

깔끔하게 문제를 정리하게 되었다.