NARADESIGN

웹표준, 웹접근성, 유니버설디자인, HTML, CSS, UI, UX, UD


DEVIEW 2012 반응형 웹 구축기

본문 건너 뛰기

DEVIEW는 올해로 다섯번째 열리는 NHN의 기술 공유 컨퍼런스입니다. NHN 뿐만 아니라 한국의 포털과 글로벌 IT 기업들이 연사로 나서며 함께 준비했구요. 한국 IT와 함께 성장하기를 바라는 취지로 매년 무료로 진행하고 있습니다. 유사한 행사로는 DAUM DevOn, KTH H3가 있습니다. 다음이 주최하는 DevOn은 2012.10.12(금)에 열릴 예정이구요. KTH의 H3 행사도 준비가 되고 있다니 올해가 지나기 전에 열릴것(작년에는 11월 말에 열림)으로 보입니다. 만약 DEVIEW에 참석하지 못하셨다면 DevOn, H3 행사에 한 번쯤 꼭 참석하길 권합니다. IT 기업들의 최근 화제가 무엇인지도 알 수 있고 스피커들의 원맨쇼(?) 그리고 공대생 개그에 함께 웃을 수 있으니 좋은 자극이 될꺼라고 생각합니다.(저는 공대생이 아니지만 ㅎㅎ)

지난 DEVIEW 2009년도에는 ‘XE 스킨 제작 가이드’라는 주제를 가지고 발표자로 참여했었는데요. 올해는 ‘DEVIEW 2012 반응형 웹 구축기‘ 라는 주제를 가지고 두 번째로 참여하게 됐습니다. 발표자로 지원할 당시에는 ‘지금 하는 일도 바쁜데 괜히 나서는것 아닐까?’ 고민을 했는데요. 막상 발표자로 등록하고 DEVIEW 참가 신청자들의 시간표 등록 현황을 보니 800분께서 제 세션을 듣겠다고 선택해 주셨더라구요. 결국 250명 규모에서 500명 규모의 C 트랙으로 옮겨져서 가장 마지막 세션으로 진행이 됐습니다.

반응형 웹은 작년부터 ‘XE 관리자 페이지, 헬로월드 블로그, DEVIEW’ 개발을 진행하면서 실무에 적용을 해왔고 이번 발표에서는 반응형 웹을 구축하면서 격은 시행착오들을 총정리 해야겠다는 생각으로 준비했습니다. 발표 주제에 맞게 프리젠테이션도 반응형 웹으로 제작을 했고 제 발표를 듣지 않은 분들께도 실무를 진행할 때 충분한 레퍼런스가 될 수 있도록 작성하려고 노력했습니다.

DEVIEW 2012 반응형 웹 구축기
발표자료 – http://naradesign.net/rwd/pr/
발표영상 – http://goo.gl/fuLBJ

끝으로 제 발표를 들어주신 분들께서 블로그에 후기를 남기며 적어주신 글들을 몇 글자 인용할께요.

PC, 모바일 안에서도 보여질 수 있는 모습이 모두 다른 지금, 앞으로는 그 형태가 더욱 다양해 질 것이다. 요즘 화두가 되고 있는 반응형 웹! 미디어 쿼리와 함께 반응형 웹을 구축하기 위한 디테일한 내용을 소개한다. 이에 실패를 극복해 나가는 경험담이 많은 도움이 되었고, 미디어쿼리에 대한 필요성을 느끼게 했다. 현실적으로 가장 유익했던 세션!

[출처] Deview 2012 : 데뷰 2012 컨퍼런스 후기 | 작성자: 미쎄 – http://catchthedesign.com/10147987610

반응형 웹에 대해 회사에서 사내세미나로 한번, 외부세미나로 한번, 이번이 세번째. 이건 해보지 않으면 절대 내것이 안될거다. 그래도 하도 필요한거라 들었다. 현재의 웹은 더이상 데스크탑이 아닌 다양한 단말이다. 그것은 미래에는 더 심화될 것이고. 그것에 대응하는 방법. 그리고 그렇게 대응하더라도 브라우저의 종류와 버전은 끊임없이 정말 끊임없이 예외를 만드는데, 이 강연의 느낌이 어땠냐면 “근데 이러면 이게 안먹어서, 그래서 이렇게 했어요… 근데 이러면 또 이게 안먹어요.. 그럼 이건 이렇게 하구요” x 100 이었다. 지겨웠다는게 아니라, 나같으면 x 3 에서 이미 미추어버렸을 텐데, 그걸 다부지게 계속 하는 사람이 있다는게 놀라웠다. 그건 끈기만으로 되는 것은 아니고, 어디를 어떻게 테스트해야 할지 판단을 가능케 해줄 탄탄한 기본 개념(+머리;;)가 중요하지 않을까, 라는 생각을 했다.

[출처] DEVIEW 2012 후기 | 작성자: 슈가루이 – http://blog.naver.com/sugarui/110147762860

반응형 웹을 구축하면서 생겼던 모든 이슈를 총망라한 발표였다. 반응형 웹이라 해서 단순히 미디어쿼리 정도 설명하겠구나 생각했는데, 정말 디테일하게 성능 그리고 이미지 스프라이트, 웹폰트, 뷰포트 등등 많은 내용을 이야기하였다. 그 중 중요했다고 생각하는 내용은 반응형 웹은 하나의 웹(One HTML)이라는 내용과 PC 5초 모바일 6초를 넘어간다면 차라리 반응형을 하지 마라 이다.

[출처] DEVIEW2012 후기 | Yeongil’s Blog – http://yeongil.info/archives/46

– Mobile First
– web font 되도록이면 사용하지 않되, 사용할거라면 제대로 분기사용하자. (용량이 2메가다)
– 생각해야할 게 매우 많다.
– 그냥 평소에 front-end로 responsive web design에 대해 한번쯤 생각해봤고, 실제로 구현해봤으면 다 알만한 내용.
– media query를 어떻게 써줘야 하며, 뷰포트 어떻게 해줘야되고, 모바일 레이아웃 어떻게 짜고, 뭐 그런것들.
– ppt를 참고하자. 링크는 나라디자인 가면 있지 않을까.

[출처] redpotato – http://www.cyworld.com/radpotato/6216207 

이렇게 인용되는 것을 원치 않으시는 분께서는 제게 메일(dece24앳gmail.com)을 보내주시면 삭제해 드리겠습니다. 후기를 남겨주셔서 고맙습니다.

분류: CSS,웹 기획,웹 디자인,웹 표준 | 2012년 9월 20일, 10:54 | 정찬명 | 댓글: 37개 |
트랙백URI - http://naradesign.net/wp/2012/09/20/1863/trackback/

37개의 댓글이 있습니다.

  1. 호이 댓글:

    아.. 가보지 못한게 정말 아쉽습니다. 대신 자료를 통해 조금이나마 위안을 얻네요~^^
    항상 열심히하는 모습이 귀감이 되는거같습니다. 좋은강의 자료 감사합니다.

  2. 정찬명 댓글:

    @호이
    도움이 되셨으면 좋겠네요. 고맙습니다. ^^

  3. 담탱 댓글:

    잘봤습니다. 항상 좋은 자료와 정보가 가득하네요~ 좋은하루 되세요

  4. 정찬명 댓글:

    @담탱
    고맙습니다. 이런 칭찬 받고 싶어서 3개월에 한 번 정도는 업데이트 합니다. ㅎㅎ

  5. 케이 댓글:

    와 정리가 잘되어있네요 감사합니다!
    브라우저도 모자라 각종 디바이스에도 대응해야하는건 당연한건데..
    왜 하기가 싫죠;;
    표준이 명확하지않다는 불만때문인가.. 불만가득 ㅜㅜ

  6. 정찬명 댓글:

    @케이
    반응형 웹 구현하는 일이 상당히 손이 많이 가고 귀찮은것은 사실이예요. ㅎㅎ

  7. gilynh 댓글:

    정찬명님 같은 선구자분들이 공유 해 주시는 지식 덕분에 저 같은 초보자도 살아 가는 거 같습니다.
    정말 좋은 자료와 지식, 언제나 감사하고 고맙게 생각합니다.

  8. 정찬명 댓글:

    @gilynh
    이렇게 댓글로 격려해 주시는 덕분에 저도 힘이 나서 더 열심히 하나봐요. 고맙습니다. ^^

  9. 그니 댓글:

    DEVIEW에서 접하고 요즘 반응형웹을 살펴보고 있습니다. 많은 도움이 되었습니다.

    한가지 궁금해서 질문드립니다.
    반응형웹을 적용한 서울시청홈페이지의 경우에 하나의 html로 PC와 모바일을 다 사용하고 있던데요… 그 방법이 모바일에선 PC버전의 많은 파트를 display:none으로 하는듯한데 이렇게 하면 결국엔 모바일에서도 보이는것만 모바일버전이지 PC와 동일할 것 같은데요.. 이 방식이 맞는것인가요? 아니면 더 좋은 방법이 있을까요?

  10. 운돌이 댓글:

    역시 정리의 신 다우시네요 발표자료 너무 잘 봤습니다. 그런데 발표자료중 조금 이해가 안가는 부분이 있습니다. 뷰포트 부분중 레티나 디스플레이는 320px만큼의 웹문서만 들어간다고 하셨는데 1px을 4px로 표현한다는것이 이론적으로 이해가 안됩니다. 많은 분들이 저처럼 조금헷갈려 하실 수 있다는 생각도 들구요. 명쾌하게 설명 좀 부탁드립니다.

  11. 정찬명 댓글:

    @운돌이
    아이폰 3세대는 액정 해상도가 320*480 입니다. 반면 4세대는 640*960 입니다. 해상도가 이렇게 차이가 나는데 3세대와 4세대 아이폰 화면의 실제 물리적인 화면 크기는 동일합니다. 게다가 웹 문서를 표시할 때 둘 다 동일하게 320*480 픽셀을 표시해 줍니다. 아이폰 4는 640*960 해상도를 지니고 있지만 아이폰 3과 동일하게 웹 문서의 320*480 만큼만 표시를 하는거죠.

    다시 말해서 화면의 절대적인 크기와 표시하는 결과는 동일한데 해상력(인치당 화소의 밀도)이 다른 것입니다. 이 이야기는 아이폰 4가 웹 문서의 1픽셀을 3세대처럼 실제 1픽셀 화소에서 표현하는 것이 아니라 4픽셀 화소로 표시한다는 것을 의미합니다.

    설명하기 쉽지 않네요. 도움이 되셨나요?

  12. 운돌이 댓글:

    답변 감사합니다 정찬명님. 간단하게 생각하면 이론적으로 레티나 디스플레이는 고해상도를 가지고 있으나 물리적으로는 절대크기를 넘을 수 없다는 말이군요. 또한 레티나 디스플레이인 아이폰4는 1인치당 4픽셀을 표현하고 반대로 아이폰3는 1인치당 1픽셀을 표현한다고 보면될까요? 역시 뷰포트와 관련된 부분은 경험이나 몸적?으로는 그냥 알고 있는데 글로 풀어내기는 힘드네요. 현재 댓글을 다는 저 또한 애매한 말들을 쓰고 있으니까요^^;;

  13. d2ong 댓글:

    반응형웹 으로 작업시 중요 고려사항들이 있을까요???

    예을들어 :
    1. 반드시 링크값들은 클릭시 작동하도록한다.
    2. 팝업창은 되도록 레이어팝업창을 뜨운다.

    그밖에 고려사항들이 뭐가 있을까요??

  14. 정찬명 댓글:

    @d2ong
    예를 들어 언급하신 내용들은 반응형과는 관계가 없는것 같아요. 제 생각에 중요한 고려사항들은 발표자료에 모두 언급해 두었습니다.

  15. 익명 댓글:

    발표자료 덕분에 반응형웹이 더 궁금해졌습니다.
    IE6~IE8 에서도 반응형 웹을 사용할 수 있는 방안은 아직 없는건가요??

  16. 정찬명 댓글:

    @익명
    발표자료에 그 부분에 관한 언급이 있습니다. 확인해 보세요. ^^ http://naradesign.net/rwd/pr/#s91

  17. hosuks 댓글:

    안녕하세요~^^ 강의 자료 잘 보았습니다. 동영상과 더불어..^^
    반응형 웹 공부 중인데, 혹시 default.css 파일 공유해 주실 수 있는지요.
    만약 가능하시면 hero615앳nate.com 로 부탁드립니다..^^;
    그럼 좋은 하루 되세요~~

  18. 정찬명 댓글:

    @hosuks
    어떤 파일을 말씀하시는 것인지 잘 모르겠지만 브라우저 소스보기를 하면 CSS 파일을 열어 볼수 있습니다.

  19. 원탱 댓글:

    안녕하세요~ 강의 자료 너무 잘 보았습니다~
    이렇게 좋은 정보를 지금 보았다는게 너무 아쉽네요ㅠ
    많이 배우고 갑니다~ 앞으로도 잘 부탁 드립니다~
    너무너무 추운데 건강 유의하시고 좋은정보 많이 부탁드려요~^^헤헤

  20. 정찬명 댓글:

    @원탱
    고맙습니다. 아직 많이 늦은것도 아닌걸요. 즐거운 주말 보내세요. ^^

  21. 수잔 댓글:

    항상 감사합니다.
    간만에 또 html5,css 신권 도서를 죄다 읽고 왔는데
    왜, 찬명님 사이트만큼 쏙쏙들어 오지 않는지!!
    자료 공유에 항상 감사한 마음 가지고 있습니다.
    오늘도 컨퍼런스 자료들 보고, 또 사이트에 올려진 글들
    적어가며 공부해봅니다.
    하루빨리 적용할 사이트 수주가 오길 바라며…
    새해 복 많이 받으세요!

  22. 정찬명 댓글:

    @수잔
    감사합니다. 새해 복 많이 받으세요. ^^

  23. ForHanbi 댓글:

    여쭙고 싶은게 있는데 달리 어디에 질문을 드려야 할지 몰라서 이렇게 글 남깁니다.
    html5를 접하면서 약간 혼란스러운 부분이 있어서….

    형태일때 이미지 하단에 녹색이 보입니다.
    비누님에게 듣기로는
    “inline요소이므로 텍스트처럼 하단에 line-height여백 추가”라고 하시더군요.

    그래서 이미지에 display:block를 추가 했을때 녹색은 사라지더군요.
    그리고 파란색이…

    여기에서 한번더 변화를 줘서
    두번째 div의 style에서 display:inline-block를 display:inline으로 바꾸면 초록도 파란색도 사라지더군요.

    여기에서 의문이 들더군요.
    두번째 div의 속성을 inline으로 바꾸면 오히려 line-height여백 추가가 되어야지 왜 사라지는가…

    그럼 명확해 지는게 제가 line-height여백 추가가 되는 조건을 잘못 인식하고 있다는것인데….

    html5에서 line-height여백 추가가 되는 경우에 대해 좀 지식을 나눠주셨으면 합니다.

  24. ForHanbi 댓글:

    에구 위에 잘못 html 코드를 그대로 입력해서
    첫번째 예문이
    [div style=”background:blue;display:inline-block”]
    [div style=”background:green;display:inline-block”]
    [img src=”http://www.xpressengine.com/files/member_extra_info/profile_image/214/076/019/19076214.gif” alt=”Profile” class=”pf” style=”height:100px;width:100px;background:yellow;”]
    [/div]
    [/div]

    두번재 예문이

    [div style=”background:blue;display:inline-block”]
    [div style=”background:green;display:inline-block”]
    [img src=”http://www.xpressengine.com/files/member_extra_info/profile_image/214/076/019/19076214.gif” alt=”Profile” class=”pf” style=”height:100px;width:100px;background:yellow;display:block”]
    [/div]
    [/div]

    세번째 예문이

    [div style=”background:blue;display:inline-block”]
    [div style=”background:green;display:inline”]
    [img src=”http://www.xpressengine.com/files/member_extra_info/profile_image/214/076/019/19076214.gif” alt=”Profile” class=”pf” style=”height:100px;width:100px;background:yellow;display:block”]
    [/div]
    [/div]

    입니다.

  25. ForHanbi 댓글:

    죄송합니다.
    생각해보니 위 질문이 의미없는 질문이더군요.
    두번째 div을 inline 처리해 버리면 실질적으로 이미지를 감싸지 못하기에 첫번째 div가 img의 ilne-height 여백을 감싸게 되는 것인데…

    꾸미기 위해 비교적 많이 사용되는 inline-block을 사용하면서도 line-height의 여백을 지울 수있는 방법이 있나 싶어서 시작한 고민인데…

    불가능한게 아닌가 싶다는 생각이 듭니다.

  26. 정찬명 댓글:

    @ForHanbi
    질문을 정확하게 파악하기 어려워서 답변 드리기가 애매하네요. ^^

  27. 나그네 댓글:

    감사합니다.

  28. 홍민호 댓글:

    모바일 웹을 만들 기회가 있는데 정찬명님의 Deview강의가 인상깊었기에 이번 기회에 반응형으로 만들어 볼까 합니다.

    혹시 강의 때 알려주셨던 반응형 웹 페이지 샘플을 받을 수 있을까요?

    나중에 공부하려고 저장해뒀었는데 어디갔는지 도통 보이지가 않네요.

  29. 정찬명 댓글:

    @홍민호
    http://naradesign.net/rwd/pr/ 이것을 찾으시나요?

  30. 익명 댓글:

    @정찬명 이게 아니고 따로 다운받을 수 있게 해주셨던 반응형 웹 페이지 샘플 소스였습니다~!

  31. 정찬명 댓글:

    @익명
    http://naradesign.net/rwd/ex/ 이것도 아니라면 잘 모르겠네요. ㅎㅎ

  32. 박소라 댓글:

    자료 너무 잘 봤습니다.
    그런데 자료를 보며 몇가지 의문점이 생겼어요. 모바일에서 로딩속도가 걱정되서 자료를 분리하고싶은 경우가 있을것 같은데-예를 들어 데스크톱에서는 20개씩 보이게 했던 자료를 모바일에서는 5개씩 끊어서 보이게 하고싶을때 단순한 display;none을 해도 벌써 서버에 요청을 다 해버릴까요?
    요청을 다 해버린다면, 서버측에서 유저 에이전트를 판별해서 버튼을 누를때 서버 요청을 하도록 해야할까요? 이 부분을 어떻게 처리해야 할지 모르겠어요.

    또, 해상력에 맞게 미디어 쿼리로 분리해서 써야 한다고 하셨는데, 그럼 이미지는 무조건 css의 배경화면으로 집어 넣어야 할까요?
    전 문서라고 인식되는 이미지는 죄다 HTML로 넣어버리는데, 이런경우 최적화 할 좋은 방법이 없을까요? display;none같은거 썻다가 서버 요청이 많이 가면 별로고.. css의 :after 속성을 잘 사용해서 HTML에다가 이미지 넣는 방법 같은건 가능할까요?

    그리고 일정 조건 안에서는 js 같은 외부 파일 불러오고싶지 않은 경우가 있으면 미디어 쿼리말고 다른 방법을 모색해봐야 하는거 맞나요?
    자료보고 이것저것 생각해보니 미디어쿼리로 해결 안되는게 많네요. 반응형 웹 싸이트 만들때 고려할게 넘 많은것 같아요ㅠ;;

    또, 데스크톱에서 테이블 같은 문서구조는 모바일에서 어떻게 표시할지 고민스럽네요. 이건 제가 한번 방법 고민해볼게요^^;;

  33. 정찬명 댓글:

    @박소라
    # display:none vs Ajax 로딩
    display:none으로 처리된 자원도 모두 요청합니다. display:none 으로 처리해 두는 것은 초기에 로딩을 하기 때문에 초기 로딩 속도는 느리지만 응답성이 빠르죠. 한편 Ajax를 사용하면 불필요한 콘텐츠를 아예 로딩하지 않기 때문에 초기 로딩 속도가 빠르지만 응답성이 느리겠죠. 때문에 정답이 있는 문제는 아닌것 같아요. 콘텐츠와 사용 패턴에 따라서 판단해야 할 문제로 보입니다.

    # image 분기
    제 경우 모바일 성능을 확보하기 위해서 장식용 이미지에 image sprite + IR 기법을 사용하는 편입니다. :before :after 가상 요소 선택자를 사용해서 아이콘 등을 넣기도 하구요. 물론 의미가 있는 이미지인 경우 가능한 img 요소를 사용하고 있습니다.

    # JS 분기
    JS 파일을 분기하려면 미디어쿼리만으로는 불가능하죠. 서버측에서 UA 정보를 파악해서 분기하셔야 할 것 같네요.

    # table
    가로 스크롤이 생기더라도 분기하지 않는 경우도 있고 해상도에 따라 분기를 한다면 아래 데모와 같은 방법을 고려해 볼 수 있겠습니다.
    http://view.jquerymobile.com/1.3.2/dist/demos/widgets/table-reflow/
    http://view.jquerymobile.com/1.3.2/dist/demos/widgets/table-column-toggle/

  34. 익명 댓글:

    안녕하세요~
    오랜만에 들렸습니다.
    ‘DEVIEW 2012 반응형 웹 구축기‘ 요거 링크가 안열려서요~
    수정해주세요~

    감사합니다~

  35. 정찬명 댓글:

    @익명
    해당 링크는 깨졌지만 자료는 여기 있어요. ^^
    http://naradesign.net/rwd/pr/
    http://goo.gl/fuLBJ

  36. 안일준 댓글:

    최근 프로그래밍 공부중입니다.
    좋은 글 감사합니다.

    제 사이트에 간단하기 링크 걸께요^^

  37. 정찬명 댓글:

    @안일준
    저야 영광이죠. 감사해요. ^^;

댓글 쓰기

전송된 글이 나타나지 않는다면 필터링 된 것입니다. dece24앳gmail.com 으로 메일 주세요.
(X)HTML 코드 사용이 가능하지만 소스 코드 출력을 원하시면 <꺽쇠>는 [괄호]로 변환하여 작성해 주세요.

필수 아님

필수 아님