okjsp사이트를 아이폰으로 볼 때마다 한 가지 아쉬운 점이 있었습니다. 제목이나 다른 링크들은 잘 보이는데, 항상 콘텐츠 영역이 너무 작게 표현되는 것입니다.


확대를 해도 마찬가지였습니다.

그나마 아이팟터치4에서는 조금 더 나았지만, 그래도 아쉬움이 많이 남았습니다

구글신에게 따졌더니 방법을 알려주더군요. 아래처럼 나아졌습니다

-webkit-text-size-adjust 라는 CSS 속성을 통해서 변경했습니다.

-webkit-text-size-adjust: 160%;


내용 부분에 위와같은 CSS 속성을 주어서 아이폰에서 봐도 무리없게 되었습니다.

추론:
Safari 브라우저의 "읽기 도구" 기능이 비활성화 된 것으로 봐서는 브라우저 콘텐츠 파싱 기술이 적용이 되어서 아이폰에서 다르게 보이지 않았나 생각됩니다.
소회:
브라우저에서는 멀쩡하게 보이는 것이라 원인을 찾는 것과 작업하는 것이 수월하지 않았습니다. 아이폰 시뮬레이터를 사용할 수 없었던 상황이라서 더 그랬죠. 

참고:
http://css-infos.net/property/-webkit-text-size-adjust : CSS Property : -webkit-text-size-adjust
http://ajju.textcube.com/16 iphone safari 회전시 폰트 사이즈 변경 버그



저작자표시 비영리 변경금지
iUI는 okjsp의 모바일페이지를 제작한 안광운님이 만드신 자료입니다.
웹킷의 개발도구 Web Inspector는 Firebug와 유사합니다만 이쁩니다.
웹데브모바일 열린세미나에서 발표했던 자료 첨부합니다.

좋은 자리를 마련해주신 조만영 차장님 감사합니다.


저작자표시 비영리 변경금지
세미나 하나 소개합니다.
저도 발표합니다만 경준호(http://firejune.com/)님을 비롯해 황리건님과 조범석(아저씨)의 발표가 기대됩니다.

  • iUI는 okjsp의 모바일 사이트에 적용된 기술입니다. http://www.okjsp.pe.kr/m/ 
  • 웹킷의 개발도구는 firebug와 비슷한데, 이에 대한 소개를 합니다.

 

안녕하세요. WebDevMobile 입니다.

8월 열린세미나를 안내해 드립니다.
8월 휴가철에 많이들 떠나셨을 것으로 생각되는데 웹데브모바일의 세미나는 계속됩니다. ^^
HTML5 실제 서비스 적용 사례와 모바일 UX 관련된 토픽으로 준비해 보았습니다. 

  • 일시 : 8월 14일 토요일 오후 1시 30분
  • 장소 : 서초역 한국HRD 아카데미 지하1층 Blue 대회의실 (서초역 8번출구에서 5분거리/약도하단참조)
  • 참가비 : 22,000원 부가세포함 (세금계산서 문의 webdevmobile@gmail.com)
  • 참가인원 : 80명
  • 접수 :  입금순 80명 입금시 자동마감 (80명 이후 입금자 환불처리)
  • 입금정보 : 국민은행 022-21-0654-618 조만영
  • 환불안내 : 8월 13일 밤 12시이전에 불참통보하신 분에 한해 환불, 그외 미참석하신 분들은 환불안됨

프로그램

13:30 - 14:20

hrg8_bigger.PNG

황리건 과장 /
UX Evangelist 

한국마이크로소프트http://uxfactory.com운영자

모던 웹디자인 트렌드와 이를 준비하는 IE9 



최근 웹디자인의 스타일이 새로운 트렌드와 브라우저의 혁신으로 크게 달라지고 있습니다. 사용자들의 눈을 사로잡는 웹사이트들이 기존에 우리가 알고 있던 웹과는 또 다른 모습이 되고 있어요.
해외에서는 이러한 웹을 가르켜 현대적인 웹, 즉 모던 웹이라고 하고, 모던 웹디자인 스타일이 널리 알려지고 있어요.
국내에서는 다루어 진 적이 별로 없는 모던웹디자인 트렌드를 살펴보고, 모던 웹을 준비하는 지난 주 공개된 IE9 플랫폼 프리뷰 4탄도 살펴보도록 합니다.
14:20 - 14:30 Q&A
14:30 - 15:20

kenu_profile.png 
허광남 팀장

(주)모비젠

/ MA연구팀 
http://okjsp.pe.kr 운영자

iUI와 웹킷의 모바일웹 개발도구

  • 모바일웹 라이브러리 iUI 
    1. iUI 어디에 쓸까 
    2. iUI 개발가이드
  • Webkit의 모바일웹 개발도구 
    1. 자바스크립트 개발 멋있게 
    2. Webkit 개발도구의 주요 기능들 
    3. 나는 어떤 녀석이 로딩 안되고 시간끄는지 알고 있다. 
    4. 모바일웹 브라우저 에뮬레이터


15:20 - 15:30 Q&A
15:30 - 15:40 Coffee Break
15:40 - 16:30

 firejune_profile.jpg

경준호님(파이어준)

 CSS3의 특징과 사용 방법
  1. 예제를 통한 css3 사용방법
  2. CSS3를지원하지 않는 환경 고려하기
  3. CSS3로 인한 작업환경


16:30 - 16:40 Q&A
16:40 - 17:30

codefarmer_73.jpg

조범석대리(농장장) 

GS홈쇼핑 IT 혁신팀 근무		 모바일 웹 서비스에 신기술 도입 프로세스와 실무사례(HTML5/CSS3)
  • 시간과 기술은 우리를 기다려 주지 않습니다  
  • 일정의 무제
  • 환경 및 기술의 변화  
  • 우리는 준비되어 있어야 합니다.  
  • 스마트하게 일하기  자료 수집  개발 도구  
  • 그러면 필요할 때 달릴 수 있습니다.
  • 실무 사례 - CSS3 Animation/ HTML5 localStore 를 이용한 Client DB  
  • 그 이후


17:30 - 17:40 Q&A
17:40 - 18:00 경품 추첨 및 종료
저작자표시 비영리 변경금지
애플을 먹여살리던 Adobe
- 국내 출판시장에서 어도비 포토샵과 일러스트레이트보다 더 막강한 것이 쿽익스프레스입니다.

플래시는 원래 Macromedia 것
- 어도비가 인수는 잘 했죠. 플래시와 플렉스, 웹 시장에서는 절대 강자의 위치에 있으니까요.

플래시 플레이어는 브라우저 속의 브라우저
플래시는 브라우저에 내장된 표준기술이 아닌 브라우저 속에 플래시 동작환경을 깔아놓고 한 페이지인 척 하는 기술입니다. 이미지가 웹페이지에서 보여지는 것과는 다른 기술을 사용하는 것이죠. 기존 웹에서는 이것이 가능했지만, 모바일 웹에서는 쉽지 않을 것 같습니다. 웹이야 자유시장이지만, 모바일 웹은 아직은 닫혀있는 곳입니다. 애플과 구글, MS등 모바일 OS와 브라우저를 만드는 쪽과 공조가 이뤄져야 할 텐데, 사이가 멀어진듯 합니다.

플래시가 아이폰에서 돌아간다?
넵 현재도 돌아가는 기술이 공개되었습니다. 하지만 브라우저 내에서가 아닌 독립된 애플리케이션형태입니다. 아직 아이폰 사파리에서는 플래시는 아래 그림처럼 파란 레고조각입니다. 안드로이드도 같은 Webkit 엔진을 써서 그런지 모르지만 아직 플래시는 동일하게 보입니다. 그나마 IE의 빨간 Xbox가 아닌게 다행인듯 합니다.

오페라가 아이폰 앱스토어에 올렸지만 거부당한 이유가 플래시플레이어 때문이라는 소문도 있습니다.
http://www.google.co.kr/search?q=오페라+앱스토어+플래시

image from: http://cusee.net/2461841

모바일에서 웹의 재활용?
한페이지에 많은 정보를 갖고 있는 현재의 웹페이지를 모바일에서 재활용하기 위해서는 단순화라는 정제과정이 필요합니다. 글씨도 깨알같고, 줌을 한다고 해도 번거롭고, 입력 기술이 발전한다고 하지만, 여전히 손이 익숙해져버린 키보드보다 불편합니다.

많으 웹서비스들이 모바일 브라우저에 맞춰서 UI, UX를 재편해서 서비스하고 있습니다.
다섯 포털의 모바일 서비스 페이지
http://okjsp.tistory.com/1165643831

플래시 Lite가 있다고 하지만 이통사보다 생산자 중심으로 새롭게 재편된 모바일 시장에서 어도비가 어떻게 설득하고 모바일에서도 영역을 확보할지 기대해 봅니다.


update:
blue legos 얘기가 많이 나오는군요. http://theflashblog.com/?p=1703


sponsored post : [Adobe RIA 공식 사이트(www.adoberia.co.kr)]

저작자표시 비영리 변경금지

+ Recent posts

티스토리툴바