Re: Capturing ? Improving Performance of the Adaptive Web

네 현재의 미디어 쿼리 동작방식은 하나의 마크업 구조로 된 문서에 여러벌의  
css 스킨이 준비되어 있고 화면사이즈에 맞는 스킨이 적용되도록 분기시켜주는  
구조입니다. 이렇게 되면 화면 크기에 맞게 css 스킨 별로 대응이 되는 소기의  
목적은 달성이 되지만 css 쪽에서 처리해야할 사항들이 너무 많아집니다.  
그래서 이미지를 담당하는 부분 만이라도 좀 모듈화(?) 까지는 아니더라도  
분리시켜서 이미지 소스 파일명 같은 부분은 마크업쪽에 위임해서 처리하려는  
것이죠. 구조와 표현을 분리해서 좀 더 유연한 개발을 위해서라고 생각합니다.

Resoponsive web design 이 공론화 되면서 이런 접근 방식들이 앞으로 많이  
등장할 것 같은데요.
W3C에서 논의되는 Grid Layout 이나 Flexible box model 들이 좀 더 진화하게  
되면 본격적으로 화면사이즈에 대응하는 가변적인 레이아웃을 위한 표준쪽으로  
발전하지 않을까 전망해 봅니다. 지금은 개발자들이 물론 구현하시는  
부분들이지만 표준화가 진행되면 좀 더 편해지겠죠.

http://www.w3.org/TR/css3-grid-layout/

http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/


감사합니다.

조만영 드림.


Tue, 02 Apr 2013 09:36:47 +0900, Wonsuk Lee <wonsuk11.lee@samsung.com>님이  
쓴 글:

> 조만영 대표님.
> 잘 정리해 주셔서 감사합니다~
>
> 그런데 Responsive Web Design에서 Media Query를 이용하여 단말의 display
> 크기나 resolution에 따라서 CSS를 별도로 지정해서 사용할 수 있었는데,
> 이렇게 사용할 때 이미지에 대한 부분은 처리할 수 있는 방법이 없었나요?
> <picture> tag이 꼭 필요한 것인지에 대한 의문입니다.
>
> 이원석 드림.
>
>
>> -----Original Message-----
>> From: Manyoung Cho [mailto:manyoung@w3.org]
>> Sent: Monday, April 01, 2013 2:05 PM
>> To: public-html-ig-ko@w3.org; Wonsuk Lee
>> Subject: Re: Capturing - Improving Performance of the Adaptive Web
>>
>> 본건관련해서 W3C 표준은 아래 부분인데요.
>> http://www.w3.org/TR/html-picture-element/

>>
>> Responsive Web Design이 레이아웃 측면에서는 다양한 테크닉들이 존재하지만
> 이미지의 크기
>> 를 핸들링하는 부분은 여전히 개발자들의 수고를 많이 필요로 했습니다.
> 그래서 responsive
>> image 를 만들기 위해 부족했던 표준 부분을 <picture> element 의 추가로
> 보완하고 있는 것
>> 같습니다.
>> 내용이 너무 단순해서 그냥 보시면 이해가 될 것 같습니다.
>>
>> <picture width="500" height="500">
>>     <source media="(min-width: 45em)" src="large.jpg">
>>     <source media="(min-width: 18em)" src="med.jpg">
>>     <source src="small.jpg">
>>     <img src="small.jpg" alt="">
>>     <p>Accessible text</p>
>> </picture>
>>
>> 다양한 해상도의 단말에 대응하기 위해 여러벌의 이미지를 만들어 둬야 하는
>> 부담은 여전한 것 같고요. 추후에 svg 브라우저 지원율이 올라가면
>> 벡터그래픽인 svg에 대한 대체수요도 증가할 것 같다는 느낌도 듭니다.
>>
>> 아직은 Working Draft 단계인데요. 본 표준 초안은 W3C 커뮤니티 그룹에
> 의해서 논의가 주도되
>> 어 만들어 졌다는 점에서 새로운 의의를 찾을수 있겠네요.
>>
>> 감사합니다.
>>
>> 조만영 드림.
>>
>> Sat, 30 Mar 2013 23:16:28 +0900, Wonsuk Lee <wonsuk73@gmail.com>님이 쓴
> 글:
>>
>> > 안녕하세요.
>> >
>> > Mozilla hacks 사이트에 responsive web design의 성능 이슈 및 이를  
>> 해결할
> 수 있는
>> 방법에 대해서
>> > 정리한 article[1]이 있네요. 요즘은 단말의 display 크기 뿐 아니라
> 고해상도 display를
>> 갖은 단말들이
>> > 출시되면서 responsive web design은 더욱 중요한 topic이 되는 것
> 같습니다. W3C에서도
>> 이와 관련하여
>> > <picture> 추가했는데 이 부분도 본 article에서 다루고 있습니다.
>> >
>> > 중요한 내용이라서 KIG 회의에서 정리해 보았으면 합니다~^^ Volunteer를
> 찾습니다~^^
>> >
>> > [1]
>> > https://hacks.mozilla.org/2013/03/capturing-improving-performance-of-t

>> > he-adaptive-web/?utm_source=html5weekly&utm_medium=email
>> >
>> > 이원석 드림.
>> >
>> > =========================================
>> > 이 원 석 (Wonsuk, Lee) / Principal Engineer, Ph.D SAMSUNG ELECTRONICS
>> > Co., LTD. (三星電子)
>> > Mobile: +82-10-5800-3997
>> > E-mail: wonsuk11.lee@samsung.com, wonsuk73@gmail.com
>> > http://www.wonsuk73.com/, twitter: @wonsuk73
>> > -----------------------------------------
>> > Inspire the World, Create the Future !!!
>> > =========================================

Received on Wednesday, 3 April 2013 02:57:21 UTC