그누보드 수다방 #10: 반응형 웹

· 2014-03-19 (수) 08:54:05 · 3349 · 27

일시: 2014/03/25 
시간: 10:00pm (110min) 
형식: 오픈 행아웃 (자유롭게 참여)
참가자: 전진, (Terrorboy), 다마리, 아파치, 지운아빠
주제: 반응형 웹
     - sir 소식

     - 그누5 관련 설문조사 (7:46 ~ 8:30) 관련 잘못된 발언
          = 방송중에, '그누5를 사용하지 않겠다'가 반정도라고 했으나,
             실제로는 '이미 설치/사용한다'가 절반, '사용하지 않겠다'가 약 10%입니다.
          = 잘못된 정보를 알려드린 점, sir측과 회원분들께 죄송합니다.
             다음 주에 정정 방송을 하겠습니다.

     - 반응형 웹 개요: 반응형 웹모바일 퍼스트, 그리고 관련 기술 들
     - 관련 최신기술/표준/동향
          = 반응형 이미지 관련: srcset 도입 시작, picture 태그
          = 레이아웃 관련: display flexbox, css grid

     - 그누보드5 와 반응형 웹
          = 서버측 기술 (브라우져에 따라 모바일/데스크탑 스킨 적용)

     - 반응형 웹 관련 프로젝트 경험 공유


|

댓글 27개

중학생때 처음 홈페이지 만드는법(간단한 html)을 배우게 됬을때 테이블의 px를 안잡고 %로 하여 작업했다가 욕을 먹은적이 있지요 ㅎㅎ
(세상에 모니터의 갯수가 몇개나 되겠냐는 식이였지요 ㅎㅎㅎㅎ)


그때는 핑계거리로 컴퓨터 모니터 마다 딱맞게 보여주려 그랬다 했지만...
오늘날은 html5 media태그가 생기고 홈페이지들이 반응형 추세로 가면서 예전 %로 테이블을 잡던 기억이 나네요 ㅎㅎ
한국 최초의 반응형 웹이라고 할 수도 있겠는데요? ^^
최초는 아니구요ㅎㅎㅎ
구글 보고 % 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. 깊이 없이 잡지식만 풍부한 저로써는 이정도 이슈만 낼수 있겠네요 ㅎㅎ
역시.. 감사합니다. 수다의 큰 틀을 만들어 주셨네요.. ^^
그냥 제가 다른 분들께 듣고 싶은 이야기를 풀어보았습니다 ㅎㅎ





반응형의 좋은점
+ 하이브리드 앱제작 할때 좋습니다. (끝~~~~)





< 코멘트 개수 짝수 맞추기~(이런거 은근 신경 쓰이죠? ㅎ.ㅎ) >
2014-03-25 (화) 01:31:36
Terrorboy님의 글에 하나만 더 붙이면 어떨까 싶어서....

8. 반응형 framework 을 사용할것이냐?
아니면 자체적으로 media 을 사용해서 개발할것이냐?

장단점이 있고, 현재도 이슈가 될만한 소지이지만
저는 항상 유지보수 측면을 가장 우선시 하는편이라
유지보수 차원에서는 어느쪽이 낳을지 필요한 상황이 된것 같아서요.

나름 조사한바로는 외국에선 5:5 비율로 보이던데, 국내에서도 media 로 직접 만든 사이트들이 간간이 보이더라구요.

저의 입장에선 framework 을 사용하는것을 주장하는편입니다
사유는 계속된 기능 개발과 기기( 모바일. 데스크탑모니터)의 변화 등등..
앞으로 크게 대두될 html5 도 있구요...
반응형 프레임 워크라면 부트스트랩 같은 css킷을 말하는건가요?
2014-03-25 (화) 17:40:16
예에....구글링하니깐 20~30개 정도 나오더라구요...

개인적으로 파악한건 bootstrap 이 가장 많았는데,
직접 media 로 만든 페이지도 자주 보이더라구요...

media 로 직접만든 단점은 분석하는데 얼마나 정신이 없는지 뿔뿔이 흐터져 있는 경우가 많다보니
유지보수할적에 좀 많이 힘들것 같다라는 생각이 들어서 건의해 봤어요...^-^
그누가 아니라는 전재 하에 반응형 프레임워크 적용은 꾀 긍정적으로 생각 합니다.

1. 쉽다.
2. 최적화 되어있다.
3. 메뉴얼이 존재한다.
4. 사이드 언어 지원 플러그인 지원이 많다.


저도 간단한 작업은 부트스트랩을 애용합니다 ^^

다만, 이기능 저기능 다 들어있기 때문에 필요한것만 쓰기 위해서는 미디어 태그로 직접 짜는것도 좋겠네요.


서브 주제로 less도 이야기가 나올것 같네요.
2014-03-25 (화) 18:29:31
지운아빠님께서 less 파신것으로 알고 있어서요
후기을 곁들여서 말씀해 주신다면 .... 정말 좋을것 같다라는 생각이 들어요...

저는
책이나, Doc 에 나온 내용보다 사용해본분들의 후기가
개발 방향을 잡는데 큰 도움이 되어서요
less 겉햝기만 했다보니 ㅠ.ㅠ;
2014-03-25 (화) 23:53:30
마지막에 술취한 상태로 난입해서 죄송합니다. ㅠㅠ
테팀장님 은쟁반에 옥구슬 굴러가는 줄 알았어요. ;)
전진님 고생하셨습니다!
늦게나마 도와주셔서 너무 감사했어요.. ^^;;
혼자 계속 얘기하니까 목이 너무 힘들어요..
저도 처음 참여라 말 실수가 많았습니다^^

글이라면 글을 쓰고 여러번 수정 하여 하나의 내용을 완성하는데 ...

마지막에 `좋은 소리 잘 들었습니다.` 라고 말해 놓고 혼자 당황 했습니다 ㅎㅎㅎ
(사이 사이 참여 할때도 ㅎㅎ)
전진님 오늘도 역시나 준비를 많이 하셨네요. 앞으로도 쭉 부탁 드립니다.
수다방 할 수 록 묘한 매력이 있네요.....^^ 저절로 공부하는 효과까지.....ㅋㅋ
모텔이라 접속이 원활하지 않아서 자꾸 들락날락해서 죄송 했습니다.
다음에도 이럴까 걱정이 드네요....ㅠㅠ
수다방에서 뵌분들 모두 반가웠습니다~~~~~~~~~~~
2014-03-26 (수) 00:29:31
그누수다방 리뷰하다보면 제가 참 남의 얘긴 잘 안 듣는 거 같아요. 자기 전에 잠깐 다시 들어보고 자려는데 아파치님이 좋은 말씀 많이 해주셨었네요 ㅠㅠ
지운아빠님 마지막의 환호가, 전체 수다의 느낌을 확 살려주셨어요. 감사해요. ^^
준비를 많이 못해서요..
사실 오늘 수다방 테마송을 준비했는데, 행아웃에 어떻게 넣는지를 몰라서.. ^^;
다음에는 더 잘 준비하겠습니다.
피곤하신데도 들어와주셔서 너무 감사했습니다. ^^
앗, 수다방 마지막 부분에서, 분명 아파치님 말씀이 안들렸었는데..
지금 다시 들어보니 말씀하고 계시는데, 제가 끊어버렸네요? ㅠㅠㅠㅠ
죄송합니다. 네트워크 문제이긴 했지만.. 정말 죄송합니다. ^_^;;;;
아... 급 사장님 호출이 와서 냉큼 뛰어가서 서버 모니터링 지금가지했네요 ㅠㅠ;; 아흑... 간만에 여유롭게 하나싶었는데 흑 죄송하게됬습니다
바쁘신데도 처음부터 와서 같이 시작해주셔서 감사하죠. ^^
식사도 못하시고 들어와 주셨는데..
어쨋든 너무 감사합니다. ^^
아 오늘 주제는 정말 참여를 하고 싶은 주제였는데 ㅠ_ㅠ
연달아 참석 못해서 죄송합니다.

일을 시작하면 그 일만 보는 경향이 있다보니 오늘도 사무실에서 좀 늦게까지 있었습니다.
아 정말 시하님 모시고 싶었는데, 아쉬웠습니다. ^^
다음번 '만우절 특집' 또는 '그누5 정식버전 특집' 때는 꼭 오셨으면 좋겠습니다. ^^
앗! 시하행님 어제 오셨으면 저와 짧게 이야기 하실수 있으셨는데 ㅎㅎ
리뷰하면서 발견한 잘못된 정보들을 포함해서, 관련 링크들을 본문과, 유투브 annotation으로 넣었습니다.
혹시 잘못된 정보가 더 발견되면 알려주세요. ^^
2015-03-10 (화) 09:39:31
^^
댓글을 작성하시려면 로그인이 필요합니다.

그누수다방

34건

화요일밤 10시에 행아웃으로 만나는 유쾌상쾌 수다

+
제목 글쓴이 날짜 조회
14-06-26 조회 2,241
14-06-25 조회 2,411
14-06-19 조회 1,903
14-04-29 조회 2,454
14-04-22 조회 1,607
14-04-13 조회 3,188
14-04-13 조회 1,971
14-04-08 조회 2,175
14-03-26 조회 2,571
14-03-19 조회 3,350
14-03-18 조회 2,059
14-03-17 조회 1,844
14-03-13 조회 2,359
14-03-12 조회 2,518
14-03-12 조회 2,847
14-03-11 조회 1,750
14-03-11 조회 1,702
14-03-10 조회 1,795
14-03-06 조회 1,742
14-03-05 조회 2,023
14-03-05 조회 2,500
14-03-01 조회 1,925
14-02-28 조회 2,448
14-02-26 조회 2,171
14-02-25 조회 1,690
14-02-25 조회 1,935
14-02-25 조회 1,249
14-02-25 조회 1,496
14-02-25 조회 1,651
14-02-25 조회 1,517
14-02-25 조회 1,780