그누보드 수다방 #10: 반응형 웹 정보
그누보드 수다방 #10: 반응형 웹본문
일시: 2014/03/25시간: 10:00pm (110min)형식: 오픈 행아웃 (자유롭게 참여)참가자: 전진, (Terrorboy), 다마리, 아파치, 지운아빠주제: 반응형 웹- sir 소식= QA: 내용관리에서 php/js 사용방법- 그누5 관련 설문조사 (7:46 ~ 8:30) 관련 잘못된 발언
= 방송중에, '그누5를 사용하지 않겠다'가 반정도라고 했으나,
실제로는 '이미 설치/사용한다'가 절반, '사용하지 않겠다'가 약 10%입니다.
= 잘못된 정보를 알려드린 점, sir측과 회원분들께 죄송합니다.
다음 주에 정정 방송을 하겠습니다.- 관련 최신기술/표준/동향
= 반응형 이미지 관련: srcset 도입 시작, picture 태그
= 레이아웃 관련: display flexbox, css grid
- 그누보드5 와 반응형 웹
= 서버측 기술 (브라우져에 따라 모바일/데스크탑 스킨 적용)
- 반응형 웹 관련 프로젝트 경험 공유
댓글 전체
중학생때 처음 홈페이지 만드는법(간단한 html)을 배우게 됬을때 테이블의 px를 안잡고 %로 하여 작업했다가 욕을 먹은적이 있지요 ㅎㅎ
(세상에 모니터의 갯수가 몇개나 되겠냐는 식이였지요 ㅎㅎㅎㅎ)
그때는 핑계거리로 컴퓨터 모니터 마다 딱맞게 보여주려 그랬다 했지만...
오늘날은 html5 media태그가 생기고 홈페이지들이 반응형 추세로 가면서 예전 %로 테이블을 잡던 기억이 나네요 ㅎㅎ
(세상에 모니터의 갯수가 몇개나 되겠냐는 식이였지요 ㅎㅎㅎㅎ)
그때는 핑계거리로 컴퓨터 모니터 마다 딱맞게 보여주려 그랬다 했지만...
오늘날은 html5 media태그가 생기고 홈페이지들이 반응형 추세로 가면서 예전 %로 테이블을 잡던 기억이 나네요 ㅎㅎ
한국 최초의 반응형 웹이라고 할 수도 있겠는데요? ^^
최초는 아니구요ㅎㅎㅎ
구글 보고 % width를 알아냈고 많은 자료?가 한국 블로그에 있었으니까요 ㅎㅎㅎ
구글 보고 % width를 알아냈고 많은 자료?가 한국 블로그에 있었으니까요 ㅎㅎㅎ
본론에 들어가서 주재에 대한 이야기입니다.
1. 그누 배포판에는 반응형 비포함. <그누에 배포판에 대한 반응형>
+ 주로 개발자, 퍼블리셔, 디자이너들은 그누 기본 css를 쓰지 않는다.
+ 기본적으로 반응형이 들어간다면 타 개인 배포 프로그램(모듈, 스킨, 플러그인)등에도 영향이 미칠듯 합니다.
2. 반응형의 적용 범위가 애매하다! <이슈>
+ 다양화 된 디바이스에 따라 해상도/디스플레이 크기가 많아졌다.(많아 지고 있다.)
> 참고로 최소크기로 여기지고 있던 아이폰 디스플레이 보다 작은 갤럭시 기어의 탄생, 고해상도의 모니터의 등장 등
3. 반응형의 필수 품 html5 아직 한국에서만 외면! <이슈>
+ 전세계에서 한국사람들이 IE를 가장 많이 쓴다.
> IE 가 제일 싫어요~
+ html5를 사용하지 못하는 브라우져를 서포트 해주는 js의 기능이 너무 제한 적이며 사용이 불편하다
> 속도를 저하시키는경우가 발생
> 사용하는 jquery의 버전에 따라 동작 여부가 반별된다.
> 비표준 방식인 css 핵이 너무 많아 지며 이에 따라 소스가 길어진다.
4. 반응형을 선택하면 디자인을 버려야 하나? <이슈>
+ 반응형이 획기적이고 좋은 기능이기는 하지만 디자인 잡기가 너무 힘들다.
> 디자인을 살리기 위하여 디바이스 크기마다 디자인을 잡아야하나?
5. (테이블 and 도표 and 리스트)에 대한 반응형 문제 <이슈>
+ 벤지님의 반응형 리스트 관련 글 (http://sir.co.kr/bbs/board.php?bo_table=pg_talk&wr_id=7358)
6. 반응형 홈페이지는 장애인에 대한 접근성을 해칠수 있지 않나? <이슈>
+ 부트 스트랩을 예로 든다면 디바이스 크기에 따라 상단 메뉴가 토글로 들어가는데... 이런 반응형 포퍼먼스들이 장애인에 대한 접근성을 해치지 않나 싶네요.
7. 반응형 표현 방식에 따른 홈페이지 본기능의 부재 가능성
+ 반응형으로 작업 하다보면 크기에 따라 버튼을 합치거나 홈페이지의 기능을 축소 하는 경우가 생기는것 같습니다. 이는 원래 반응형의 목적에 위배 될 수 있다고 생각합니다.
ps. 깊이 없이 잡지식만 풍부한 저로써는 이정도 이슈만 낼수 있겠네요 ㅎㅎ
1. 그누 배포판에는 반응형 비포함. <그누에 배포판에 대한 반응형>
+ 주로 개발자, 퍼블리셔, 디자이너들은 그누 기본 css를 쓰지 않는다.
+ 기본적으로 반응형이 들어간다면 타 개인 배포 프로그램(모듈, 스킨, 플러그인)등에도 영향이 미칠듯 합니다.
2. 반응형의 적용 범위가 애매하다! <이슈>
+ 다양화 된 디바이스에 따라 해상도/디스플레이 크기가 많아졌다.(많아 지고 있다.)
> 참고로 최소크기로 여기지고 있던 아이폰 디스플레이 보다 작은 갤럭시 기어의 탄생, 고해상도의 모니터의 등장 등
3. 반응형의 필수 품 html5 아직 한국에서만 외면! <이슈>
+ 전세계에서 한국사람들이 IE를 가장 많이 쓴다.
> IE 가 제일 싫어요~
+ html5를 사용하지 못하는 브라우져를 서포트 해주는 js의 기능이 너무 제한 적이며 사용이 불편하다
> 속도를 저하시키는경우가 발생
> 사용하는 jquery의 버전에 따라 동작 여부가 반별된다.
> 비표준 방식인 css 핵이 너무 많아 지며 이에 따라 소스가 길어진다.
4. 반응형을 선택하면 디자인을 버려야 하나? <이슈>
+ 반응형이 획기적이고 좋은 기능이기는 하지만 디자인 잡기가 너무 힘들다.
> 디자인을 살리기 위하여 디바이스 크기마다 디자인을 잡아야하나?
5. (테이블 and 도표 and 리스트)에 대한 반응형 문제 <이슈>
+ 벤지님의 반응형 리스트 관련 글 (http://sir.co.kr/bbs/board.php?bo_table=pg_talk&wr_id=7358)
6. 반응형 홈페이지는 장애인에 대한 접근성을 해칠수 있지 않나? <이슈>
+ 부트 스트랩을 예로 든다면 디바이스 크기에 따라 상단 메뉴가 토글로 들어가는데... 이런 반응형 포퍼먼스들이 장애인에 대한 접근성을 해치지 않나 싶네요.
7. 반응형 표현 방식에 따른 홈페이지 본기능의 부재 가능성
+ 반응형으로 작업 하다보면 크기에 따라 버튼을 합치거나 홈페이지의 기능을 축소 하는 경우가 생기는것 같습니다. 이는 원래 반응형의 목적에 위배 될 수 있다고 생각합니다.
ps. 깊이 없이 잡지식만 풍부한 저로써는 이정도 이슈만 낼수 있겠네요 ㅎㅎ
역시.. 감사합니다. 수다의 큰 틀을 만들어 주셨네요.. ^^
그냥 제가 다른 분들께 듣고 싶은 이야기를 풀어보았습니다 ㅎㅎ
반응형의 좋은점
+ 하이브리드 앱제작 할때 좋습니다. (끝~~~~)
< 코멘트 개수 짝수 맞추기~(이런거 은근 신경 쓰이죠? ㅎ.ㅎ) >
반응형의 좋은점
+ 하이브리드 앱제작 할때 좋습니다. (끝~~~~)
< 코멘트 개수 짝수 맞추기~(이런거 은근 신경 쓰이죠? ㅎ.ㅎ) >
Terrorboy님의 글에 하나만 더 붙이면 어떨까 싶어서....
8. 반응형 framework 을 사용할것이냐?
아니면 자체적으로 media 을 사용해서 개발할것이냐?
장단점이 있고, 현재도 이슈가 될만한 소지이지만
저는 항상 유지보수 측면을 가장 우선시 하는편이라
유지보수 차원에서는 어느쪽이 낳을지 필요한 상황이 된것 같아서요.
나름 조사한바로는 외국에선 5:5 비율로 보이던데, 국내에서도 media 로 직접 만든 사이트들이 간간이 보이더라구요.
저의 입장에선 framework 을 사용하는것을 주장하는편입니다
사유는 계속된 기능 개발과 기기( 모바일. 데스크탑모니터)의 변화 등등..
앞으로 크게 대두될 html5 도 있구요...
8. 반응형 framework 을 사용할것이냐?
아니면 자체적으로 media 을 사용해서 개발할것이냐?
장단점이 있고, 현재도 이슈가 될만한 소지이지만
저는 항상 유지보수 측면을 가장 우선시 하는편이라
유지보수 차원에서는 어느쪽이 낳을지 필요한 상황이 된것 같아서요.
나름 조사한바로는 외국에선 5:5 비율로 보이던데, 국내에서도 media 로 직접 만든 사이트들이 간간이 보이더라구요.
저의 입장에선 framework 을 사용하는것을 주장하는편입니다
사유는 계속된 기능 개발과 기기( 모바일. 데스크탑모니터)의 변화 등등..
앞으로 크게 대두될 html5 도 있구요...
반응형 프레임 워크라면 부트스트랩 같은 css킷을 말하는건가요?
예에....구글링하니깐 20~30개 정도 나오더라구요...
개인적으로 파악한건 bootstrap 이 가장 많았는데,
직접 media 로 만든 페이지도 자주 보이더라구요...
media 로 직접만든 단점은 분석하는데 얼마나 정신이 없는지 뿔뿔이 흐터져 있는 경우가 많다보니
유지보수할적에 좀 많이 힘들것 같다라는 생각이 들어서 건의해 봤어요...^-^
개인적으로 파악한건 bootstrap 이 가장 많았는데,
직접 media 로 만든 페이지도 자주 보이더라구요...
media 로 직접만든 단점은 분석하는데 얼마나 정신이 없는지 뿔뿔이 흐터져 있는 경우가 많다보니
유지보수할적에 좀 많이 힘들것 같다라는 생각이 들어서 건의해 봤어요...^-^
그누가 아니라는 전재 하에 반응형 프레임워크 적용은 꾀 긍정적으로 생각 합니다.
1. 쉽다.
2. 최적화 되어있다.
3. 메뉴얼이 존재한다.
4. 사이드 언어 지원 플러그인 지원이 많다.
저도 간단한 작업은 부트스트랩을 애용합니다 ^^
다만, 이기능 저기능 다 들어있기 때문에 필요한것만 쓰기 위해서는 미디어 태그로 직접 짜는것도 좋겠네요.
서브 주제로 less도 이야기가 나올것 같네요.
1. 쉽다.
2. 최적화 되어있다.
3. 메뉴얼이 존재한다.
4. 사이드 언어 지원 플러그인 지원이 많다.
저도 간단한 작업은 부트스트랩을 애용합니다 ^^
다만, 이기능 저기능 다 들어있기 때문에 필요한것만 쓰기 위해서는 미디어 태그로 직접 짜는것도 좋겠네요.
서브 주제로 less도 이야기가 나올것 같네요.
지운아빠님께서 less 파신것으로 알고 있어서요
후기을 곁들여서 말씀해 주신다면 .... 정말 좋을것 같다라는 생각이 들어요...
저는
책이나, Doc 에 나온 내용보다 사용해본분들의 후기가
개발 방향을 잡는데 큰 도움이 되어서요
후기을 곁들여서 말씀해 주신다면 .... 정말 좋을것 같다라는 생각이 들어요...
저는
책이나, Doc 에 나온 내용보다 사용해본분들의 후기가
개발 방향을 잡는데 큰 도움이 되어서요
less 겉햝기만 했다보니 ㅠ.ㅠ;
마지막에 술취한 상태로 난입해서 죄송합니다. ㅠㅠ
테팀장님 은쟁반에 옥구슬 굴러가는 줄 알았어요. ;)
전진님 고생하셨습니다!
테팀장님 은쟁반에 옥구슬 굴러가는 줄 알았어요. ;)
전진님 고생하셨습니다!
늦게나마 도와주셔서 너무 감사했어요.. ^^;;
혼자 계속 얘기하니까 목이 너무 힘들어요..
혼자 계속 얘기하니까 목이 너무 힘들어요..
저도 처음 참여라 말 실수가 많았습니다^^
글이라면 글을 쓰고 여러번 수정 하여 하나의 내용을 완성하는데 ...
마지막에 `좋은 소리 잘 들었습니다.` 라고 말해 놓고 혼자 당황 했습니다 ㅎㅎㅎ
(사이 사이 참여 할때도 ㅎㅎ)
글이라면 글을 쓰고 여러번 수정 하여 하나의 내용을 완성하는데 ...
마지막에 `좋은 소리 잘 들었습니다.` 라고 말해 놓고 혼자 당황 했습니다 ㅎㅎㅎ
(사이 사이 참여 할때도 ㅎㅎ)
전진님 오늘도 역시나 준비를 많이 하셨네요. 앞으로도 쭉 부탁 드립니다.
수다방 할 수 록 묘한 매력이 있네요.....^^ 저절로 공부하는 효과까지.....ㅋㅋ
모텔이라 접속이 원활하지 않아서 자꾸 들락날락해서 죄송 했습니다.
다음에도 이럴까 걱정이 드네요....ㅠㅠ
수다방에서 뵌분들 모두 반가웠습니다~~~~~~~~~~~
수다방 할 수 록 묘한 매력이 있네요.....^^ 저절로 공부하는 효과까지.....ㅋㅋ
모텔이라 접속이 원활하지 않아서 자꾸 들락날락해서 죄송 했습니다.
다음에도 이럴까 걱정이 드네요....ㅠㅠ
수다방에서 뵌분들 모두 반가웠습니다~~~~~~~~~~~
그누수다방 리뷰하다보면 제가 참 남의 얘긴 잘 안 듣는 거 같아요. 자기 전에 잠깐 다시 들어보고 자려는데 아파치님이 좋은 말씀 많이 해주셨었네요 ㅠㅠ
지운아빠님 마지막의 환호가, 전체 수다의 느낌을 확 살려주셨어요. 감사해요. ^^
준비를 많이 못해서요..
사실 오늘 수다방 테마송을 준비했는데, 행아웃에 어떻게 넣는지를 몰라서.. ^^;
다음에는 더 잘 준비하겠습니다.
피곤하신데도 들어와주셔서 너무 감사했습니다. ^^
사실 오늘 수다방 테마송을 준비했는데, 행아웃에 어떻게 넣는지를 몰라서.. ^^;
다음에는 더 잘 준비하겠습니다.
피곤하신데도 들어와주셔서 너무 감사했습니다. ^^
앗, 수다방 마지막 부분에서, 분명 아파치님 말씀이 안들렸었는데..
지금 다시 들어보니 말씀하고 계시는데, 제가 끊어버렸네요? ㅠㅠㅠㅠ
죄송합니다. 네트워크 문제이긴 했지만.. 정말 죄송합니다. ^_^;;;;
지금 다시 들어보니 말씀하고 계시는데, 제가 끊어버렸네요? ㅠㅠㅠㅠ
죄송합니다. 네트워크 문제이긴 했지만.. 정말 죄송합니다. ^_^;;;;
아... 급 사장님 호출이 와서 냉큼 뛰어가서 서버 모니터링 지금가지했네요 ㅠㅠ;; 아흑... 간만에 여유롭게 하나싶었는데 흑 죄송하게됬습니다
바쁘신데도 처음부터 와서 같이 시작해주셔서 감사하죠. ^^
식사도 못하시고 들어와 주셨는데..
어쨋든 너무 감사합니다. ^^
식사도 못하시고 들어와 주셨는데..
어쨋든 너무 감사합니다. ^^
아 오늘 주제는 정말 참여를 하고 싶은 주제였는데 ㅠ_ㅠ
연달아 참석 못해서 죄송합니다.
일을 시작하면 그 일만 보는 경향이 있다보니 오늘도 사무실에서 좀 늦게까지 있었습니다.
연달아 참석 못해서 죄송합니다.
일을 시작하면 그 일만 보는 경향이 있다보니 오늘도 사무실에서 좀 늦게까지 있었습니다.
아 정말 시하님 모시고 싶었는데, 아쉬웠습니다. ^^
다음번 '만우절 특집' 또는 '그누5 정식버전 특집' 때는 꼭 오셨으면 좋겠습니다. ^^
다음번 '만우절 특집' 또는 '그누5 정식버전 특집' 때는 꼭 오셨으면 좋겠습니다. ^^
앗! 시하행님 어제 오셨으면 저와 짧게 이야기 하실수 있으셨는데 ㅎㅎ
리뷰하면서 발견한 잘못된 정보들을 포함해서, 관련 링크들을 본문과, 유투브 annotation으로 넣었습니다.
혹시 잘못된 정보가 더 발견되면 알려주세요. ^^
혹시 잘못된 정보가 더 발견되면 알려주세요. ^^
^^