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)을 보내주시면 삭제해 드리겠습니다. 후기를 남겨주셔서 고맙습니다.
아.. 가보지 못한게 정말 아쉽습니다. 대신 자료를 통해 조금이나마 위안을 얻네요~^^
항상 열심히하는 모습이 귀감이 되는거같습니다. 좋은강의 자료 감사합니다.
@호이
도움이 되셨으면 좋겠네요. 고맙습니다. ^^
잘봤습니다. 항상 좋은 자료와 정보가 가득하네요~ 좋은하루 되세요
@담탱
고맙습니다. 이런 칭찬 받고 싶어서 3개월에 한 번 정도는 업데이트 합니다. ㅎㅎ
와 정리가 잘되어있네요 감사합니다!
브라우저도 모자라 각종 디바이스에도 대응해야하는건 당연한건데..
왜 하기가 싫죠;;
표준이 명확하지않다는 불만때문인가.. 불만가득 ㅜㅜ
@케이
반응형 웹 구현하는 일이 상당히 손이 많이 가고 귀찮은것은 사실이예요. ㅎㅎ
정찬명님 같은 선구자분들이 공유 해 주시는 지식 덕분에 저 같은 초보자도 살아 가는 거 같습니다.
정말 좋은 자료와 지식, 언제나 감사하고 고맙게 생각합니다.
@gilynh
이렇게 댓글로 격려해 주시는 덕분에 저도 힘이 나서 더 열심히 하나봐요. 고맙습니다. ^^
DEVIEW에서 접하고 요즘 반응형웹을 살펴보고 있습니다. 많은 도움이 되었습니다.
한가지 궁금해서 질문드립니다.
반응형웹을 적용한 서울시청홈페이지의 경우에 하나의 html로 PC와 모바일을 다 사용하고 있던데요… 그 방법이 모바일에선 PC버전의 많은 파트를 display:none으로 하는듯한데 이렇게 하면 결국엔 모바일에서도 보이는것만 모바일버전이지 PC와 동일할 것 같은데요.. 이 방식이 맞는것인가요? 아니면 더 좋은 방법이 있을까요?
역시 정리의 신 다우시네요 발표자료 너무 잘 봤습니다. 그런데 발표자료중 조금 이해가 안가는 부분이 있습니다. 뷰포트 부분중 레티나 디스플레이는 320px만큼의 웹문서만 들어간다고 하셨는데 1px을 4px로 표현한다는것이 이론적으로 이해가 안됩니다. 많은 분들이 저처럼 조금헷갈려 하실 수 있다는 생각도 들구요. 명쾌하게 설명 좀 부탁드립니다.
@운돌이
아이폰 3세대는 액정 해상도가 320*480 입니다. 반면 4세대는 640*960 입니다. 해상도가 이렇게 차이가 나는데 3세대와 4세대 아이폰 화면의 실제 물리적인 화면 크기는 동일합니다. 게다가 웹 문서를 표시할 때 둘 다 동일하게 320*480 픽셀을 표시해 줍니다. 아이폰 4는 640*960 해상도를 지니고 있지만 아이폰 3과 동일하게 웹 문서의 320*480 만큼만 표시를 하는거죠.
다시 말해서 화면의 절대적인 크기와 표시하는 결과는 동일한데 해상력(인치당 화소의 밀도)이 다른 것입니다. 이 이야기는 아이폰 4가 웹 문서의 1픽셀을 3세대처럼 실제 1픽셀 화소에서 표현하는 것이 아니라 4픽셀 화소로 표시한다는 것을 의미합니다.
설명하기 쉽지 않네요. 도움이 되셨나요?
답변 감사합니다 정찬명님. 간단하게 생각하면 이론적으로 레티나 디스플레이는 고해상도를 가지고 있으나 물리적으로는 절대크기를 넘을 수 없다는 말이군요. 또한 레티나 디스플레이인 아이폰4는 1인치당 4픽셀을 표현하고 반대로 아이폰3는 1인치당 1픽셀을 표현한다고 보면될까요? 역시 뷰포트와 관련된 부분은 경험이나 몸적?으로는 그냥 알고 있는데 글로 풀어내기는 힘드네요. 현재 댓글을 다는 저 또한 애매한 말들을 쓰고 있으니까요^^;;
반응형웹 으로 작업시 중요 고려사항들이 있을까요???
예을들어 :
1. 반드시 링크값들은 클릭시 작동하도록한다.
2. 팝업창은 되도록 레이어팝업창을 뜨운다.
그밖에 고려사항들이 뭐가 있을까요??
@d2ong
예를 들어 언급하신 내용들은 반응형과는 관계가 없는것 같아요. 제 생각에 중요한 고려사항들은 발표자료에 모두 언급해 두었습니다.
발표자료 덕분에 반응형웹이 더 궁금해졌습니다.
IE6~IE8 에서도 반응형 웹을 사용할 수 있는 방안은 아직 없는건가요??
@익명
발표자료에 그 부분에 관한 언급이 있습니다. 확인해 보세요. ^^ http://naradesign.net/rwd/pr/#s91
안녕하세요~^^ 강의 자료 잘 보았습니다. 동영상과 더불어..^^
반응형 웹 공부 중인데, 혹시 default.css 파일 공유해 주실 수 있는지요.
만약 가능하시면 hero615앳nate.com 로 부탁드립니다..^^;
그럼 좋은 하루 되세요~~
@hosuks
어떤 파일을 말씀하시는 것인지 잘 모르겠지만 브라우저 소스보기를 하면 CSS 파일을 열어 볼수 있습니다.
안녕하세요~ 강의 자료 너무 잘 보았습니다~
이렇게 좋은 정보를 지금 보았다는게 너무 아쉽네요ㅠ
많이 배우고 갑니다~ 앞으로도 잘 부탁 드립니다~
너무너무 추운데 건강 유의하시고 좋은정보 많이 부탁드려요~^^헤헤
@원탱
고맙습니다. 아직 많이 늦은것도 아닌걸요. 즐거운 주말 보내세요. ^^
항상 감사합니다.
간만에 또 html5,css 신권 도서를 죄다 읽고 왔는데
왜, 찬명님 사이트만큼 쏙쏙들어 오지 않는지!!
자료 공유에 항상 감사한 마음 가지고 있습니다.
오늘도 컨퍼런스 자료들 보고, 또 사이트에 올려진 글들
적어가며 공부해봅니다.
하루빨리 적용할 사이트 수주가 오길 바라며…
새해 복 많이 받으세요!
@수잔
감사합니다. 새해 복 많이 받으세요. ^^
여쭙고 싶은게 있는데 달리 어디에 질문을 드려야 할지 몰라서 이렇게 글 남깁니다.
html5를 접하면서 약간 혼란스러운 부분이 있어서….
형태일때 이미지 하단에 녹색이 보입니다.
비누님에게 듣기로는
“inline요소이므로 텍스트처럼 하단에 line-height여백 추가”라고 하시더군요.
그래서 이미지에 display:block를 추가 했을때 녹색은 사라지더군요.
그리고 파란색이…
여기에서 한번더 변화를 줘서
두번째 div의 style에서 display:inline-block를 display:inline으로 바꾸면 초록도 파란색도 사라지더군요.
여기에서 의문이 들더군요.
두번째 div의 속성을 inline으로 바꾸면 오히려 line-height여백 추가가 되어야지 왜 사라지는가…
그럼 명확해 지는게 제가 line-height여백 추가가 되는 조건을 잘못 인식하고 있다는것인데….
html5에서 line-height여백 추가가 되는 경우에 대해 좀 지식을 나눠주셨으면 합니다.
에구 위에 잘못 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]
입니다.
죄송합니다.
생각해보니 위 질문이 의미없는 질문이더군요.
두번째 div을 inline 처리해 버리면 실질적으로 이미지를 감싸지 못하기에 첫번째 div가 img의 ilne-height 여백을 감싸게 되는 것인데…
꾸미기 위해 비교적 많이 사용되는 inline-block을 사용하면서도 line-height의 여백을 지울 수있는 방법이 있나 싶어서 시작한 고민인데…
불가능한게 아닌가 싶다는 생각이 듭니다.
@ForHanbi
질문을 정확하게 파악하기 어려워서 답변 드리기가 애매하네요. ^^