반응형 웹디자인으로 개편
web | 2011-02-06
웹사이트 디자인 좀 해달라는 말을 미투에 남긴적이 있는데 그 글을 보고 후니님이 제 웹사이트 디자인을 해 주셨습니다. 만들면서 많이 변경되기는 했지만 후니님께 감사드립니다. 이왕 만드는 김에 예전부터 적용해보고 싶었던 유동형 레이아웃(fluid layout)과 반응형 웹디자인(responsive web design)을 같이 적용해 보았습니다.
실제로 적용을 해보니 고정폭 레이아웃 보다는 훨씬 까다로운 문제들이 많았습니다. 그리고 미디어 쿼리가 작동하지 않는 인터넷 익스플로러 문제도 있었고요. 특정 환경에서 뷰포트가 정상적으로 작동하지 않는 오페라 미니 문제도 있었습니다.
미디어 쿼리는 정말 막강합니다. IE6이나 IE7에서는 제대로 작동하지 않는 가변폭 레이아웃 기술들을 효과적으로 회피하는 수단으로 사용할 수도 있습니다. 관련해서 조금씩 내용을 정리해 보겠습니다.
Share on
Recent Comments
- ㅇㄴㅇㄴ 사무직을 하다가 그만두고 국비지원 학원을 다닌 후 현재 리액트 개발자로 일하고 있습니다 다행인지 불행인지(?) 컴퓨터 학원을 간게 아니라 디자인 학원을 가게 되었고 그곳에서는 퍼블리셔와 프론트엔드 개발자의 용어를 혼동해서 사용하였습니다 즉 저는 한동한 "HTML 마크업 + 스타일링 + 약간의 이벤트" 오로지 "사용자가 보고 있는 부분"만 다루는 작업이 "프론트엔드 개발"로 알고 있었습니다 ============> 우리가 흔히 퍼블리셔라고 불리는 영역입니다 하지만 학습할수록 사용자 영역과 소위 백엔드라고 불리는 영역과의 호환이 필요하다는 것을 알게 되었고 그때부터 지금까지 배웠던것과 전혀 다른 역할과 기능들을 학습하게 되었습니다 즉 자바스크립트도 event와 document 부분이 아닌 배열과 객체를 편집하는 것을 배워야 하고 API를 호출해 어떻게 사용자 영역으로 가져와야 하는가 등등 기존 퍼블리셔 역할군과 전혀 다른 것들을 다루게 되었습니다 ============> 이것이 프론트엔드 영역입니다 제가 두 가지 길을 모두 걸어본 바 프론트엔드 개발은 퍼블리셔의 완벽한 상위 호환이고 추구하는 목적도, 기술도 완전히 다릅니다 처음부터 다른 길을 가야하고 생각의 구조도 다르게 가야합니다 그런 의미에서 처음에 퍼블리셔라는 말이 처음에는 편가르기 하는것처럼 싫었지만 지금은 명확하게 길을 제시한다는 관점에서 좋다는 생각을 해봅니다 2024-05-20
- 잘 읽고갑니다. 마이크로소프트에 대한 저자의 태도가 인상적이었네요 2024-03-15
- southRain 좋은 글과 댓글 잘 보았습니다. 저 역시 이 업계의 일을 하는 사람으로써 '웹퍼블리셔' 라는 단어를 만드신 분을 이제 알았네요. 해당 용어를 만들어주셔서 감사합니다. 그 덕에 제 업무에 대한 명확한 기준을 세울 수 있었습니다. 전 이제껏 '웹퍼블리셔' 라는 직무에 부끄러운 적 없었습니다. '웹 퍼블리셔' 라는 직무를 부끄러워 하는 건, 본인이 해당 업무를 제대로 이해하지 못하고 잘 수행하지 못하기 때문이라고 생각해요. 해외와 국내의 개발업무 포지션에 대한 단어가 다를 뿐인데, 유독 국내 개발자들 중에는 굳이 급을 나누는 분들이 많더라구요. 근데 그렇게 급을 나누는 만큼 기본이 되어있는지 의심스러울 때도 많았습니다. 퍼블리셔와 상의없이 css framework 로 화면 대충 만들다가... 디자이너 요청 대로 화면 수정 못하고 대뜸 찾아와서는 수정해달라고 하는 적도 많았고... 만들어 준 화면도 자기 맘대로 이것저것 손대다가 오히려 화면 다 틀어지는 경우도 많이 봤습니다. 이런 걸 보면 오히려 '프론트엔드 개발자' 라고 본인을 지칭하는 분들이 해외와 전혀 다른 개념으로 이해하고 있는 게 아닌가 라는 생각도 들었습니다. 이제는 면역이 되서... 그런 분들 만나면 '그러려니...' 하고 말지만요. ㅎㅎ 각자가 맡은 업무가 있는 거고, 각자의 업무를 서로 존중하는 환경이 필요하다고 생각합니다. 그리고 각자의 자리에서 본인 업무를 충실하면 되지 않을까 싶습니다. 2024-03-05
- 리베하얀 할말이 많지만... 한국에만 있는 직업이라는 것에 대해서 전혀 개의치도 않고 부끄러워할 이유도 없다고 봅니다. 이 직업군에 대해서 이해라며녀 00년대에 무슨일이 일어났었는지.. 알필요가 있고 국내만의 특수한 환경때문에 만들어진 직업군이고... 근래에 들어 국제화가 되면서 문제시 몇몇분이 문제삼는것 같은데... 본인의 업무 바운더리는 본인이 만드는거지.. 그 단어안에 갇혀서 본인의 수준이나 인식을 만든다고 보지 않습니다. 코더니 UI개발자니, 퍼블리셔니, FE니.. 웹마스터니 풀스택이니 ㅎㅎ 많은 직업군으로 불리우고 있지만 솔직히 본인의 역량에 따라 불리운다고 생각합니다. 당시에 신현석님이 던진 하나의 단어에 여전히 밥먹고 살고 있고, 때때론 자부심도 느낍니다. 2023-11-26
- Sarah Jeong 안녕하세요. 이런 글타래가 있는지 이제야 알게되어 흥미있게 글타래를 읽어보았네요. 제가 방금 글타래라고 쓴것처럼, 댓글이라는 단어에도 여러 다른 이름이 존재한다는 것을 우리는 암묵적으로 알고 있을 거라 생각하는데요 EX 1.) 글타래(민 우리말. 인터넷 게시판에서 어떤 게시글과 그에 대한 답신으로 쓰여진 게시글들의 모임. [NAVER 국어사전 글 인용]) = 댓글(게시물 밑에 남길 수 있는 글을 표현한 단어) = 코멘트(영어 코멘트를 한국어로 표현한 단어) = 리플(영어 reple을 한국어로 표현한 단어) = 스레드(thread) EX 2.) Height(사물의 높이, 사람의 키&신장, 키가 높음, 지상으로부터의 고도) 해당 단어는 발음에서 논란이 된적이 있습니다. (설마.. 고인물만 아는 거일지도...T^T..) 미국, 영국 등 주요국가에서는 해당 단어의 발음을 한국어 발음 표현으로 '하이트' or '하잍' 라고 읽으나, 스페인어로 해당 단어는 '헤이트' or '헤잍' 라고 읽습니다. 전 세계적으로 스페인어를 쓰는 인구는 2019년 3월 기준으로 4억 6천만명이며, 영어를 사용하는 인구는 3억 7천만명이라고 구글검색에 나옵니다. EX 3.) 2023년 현재 우리나라에서는 각 세대 별로 쓰는 한 가지 표현에 대한 단어들도 다릅니다. 50대 이상이신 분들은 한자어를 주로 사용하신 세대들이고, 10대 ~ 20대분들은 줄임말 또는 은어를 만들어 주로 사용하고 있습니다. 위의 예시와 같이 한 가지를 가리키는 명사에 여러가지 표현이 존재하고, 모든 사람들이 표준어 하나만 사용하고 있지 않으며, 전라도, 충정도, 경상도 방언이 존재한다는 사실도 암묵적으로 우리는 알고 있다 생각합니다 물론, 표준어처럼 한 가지 표현만 존재하면 다시 한번 확인하는 절차없이 의사소통이 원활할테지만, 우리는 일상속에서도 방언이나 댓글, 줄임말 등의 다른 표현들을 받아들이고 있는 존재들입니다. 만드신 분의 말씀대로 그저 지나온 과거에서는 그 표현이 필요하여 쓰여졌었다고 이해하고 넘어가시면 어떨까하여 주절대며 나불거려보았네요.. PS. 쓰잘데기 없는 제 생각을 읽어주셔서 고맙습니다.. AI도 발전해나가고 있는 마당에 같은 인종끼리 싸우지 맙시다~~~ㅋㅋㅋ 2023-11-13
- 신현석 김진원님 알려주셔서 감사합니다. 본문을 수정했습니다. 2023-06-03
- 김진원 php도 더 적은타이핑으로 가능합니다. [$a, $b] = [$b, $a]; 2023-06-03
- 김정규 PHP… ㅋㅋ 2023-06-03
- 신현석 규모 작은 프로젝트에 적용해 보고 있어요. 2023-01-07
- 문지훈 스벨트킷으로 정하셨군요!! 진짜 쉽게 시작할 수 있겠더라구요. 2023-01-07
Comments
멋진 사이트로 변신했구요~ 특히, 프로필 사진의 밝은 모습이 좋습니다. 제 디자인 보다 훨씬 멋진 모습으로 변신했군요. ㅎㅎ 새해엔 더 좋은 일들만 가득하길 바래요~
훈님이 주신 아이디어가 정말 도움이 많이 됐어요. 훈님도 새해 복 많이 받으세요. 이제 곧 복덩어리가 하나 들어오겠지만...ㅋㅋ
아.. 훈님과 현석님 모두 복 많이 받으세요. 사진 잘나왔어요!
블로그 리녈 굳~!!! 이뻐요~ 뿌하하하하하!! 사진 정말 굳~! 스마일~한 2011년 되시옵소서~! 부지런쟁이들 같으니라구 ;ㅂ; 므찌십니다~! 삼성동 처들어가면 술사주시나요??
IE8에서는 정상적으로 동작하지 않네요;;
IE8은 미디어쿼리를 지원하지 않아서 가장 넓은 디자인만 나오게 했습니다. IE8은 보통 데스크탑에서 사용하기 때문에 웹사이트를 이용하는데에는 무리가 없을 것 같네요. 관련 내용은 나중에 다시 정리할 생각입니다.
블로그 글을 리더로만 보다가 디자인이 변경되었다고 해서 오랜만에 놀러왔습니다.. 제 블로그에도 적용해 보고 싶을 정도로 멋지네요.. :) 늦었지만 새해 복 많이 받으시고 항상 좋은일이 가득하시길 기원하겠습니다~
트윗타고 왔는데 글 읽으면서 머리에서 쥐가.. 아.... 전문적으로 어려운 일을 하시는 분이시군요. 역시 전문가십니다.
멋집니다. ^^
로고가 늘어나는 것이 신기하네요!
앞서 소개된 글을 인상 깊게 읽었습니다. 다양한 스크린 크기가 있는데 한 단(워드)의 크기를 어느정도로 하는게 적당하다고 보시는 건가요? 너무 갑작스런 질문이라.. 죄송합니다.
멋지네요! 참고해도 될까요?ㅋ
액션신님, 저도 궁금해서 좀 찾아봤는데 굉장히 복잡한 문제더군요. 사람들마다 얘기가 다 틀리고 언어에 따라서도 다르네요. 논문을 찾아봐야 될 것 같습니다. 저는 그냥 예전부터 사용해 오던 12.8픽셀 크기에 550픽셀정도 너비를 사용하고 있습니다.
개편된 사이트가 너무 이쁘네요.. ㅎㅎ
이야~ 디자인 이뿌네요!! 안그래도 디자인과 UI구성때문에 골머리 썩고 있는데.. 후니님은 능력자!
멋지내요. 저도 해보고싶었는데 길을 열어주셨군요. 컨텐츠도 그렇지만 블로그 자체가 좋은 레퍼런스가 될거 같습니다. 까서 참조를 좀 해야.. ㅎ 전 텍스트의 폭보다는 미디어들의 폭이 유동적인게 걱정입니다. 이미지업로드시 피시기준으로 하게 될텐데, 썸네일을 기준 스크린 width별로 만들어야 할지... 어떻게 생각하세요?
저는 일단은 img { max-width: 100% } 로 맞춰놓기는 했는데요. 모바일 환경에서의 전송속도나 단말기 메모리를 생각하면 이미지 파일 자체가 작아야 하거든요. 이건 CSS가 아닌 DDR(device description repository)이나 UAS(user agent string)로 선별하는 방법으로 풀어야 하는 문제입니다.
간만에 왔다가 아닌줄 알고..ㅡㅡ; 좋은 예제가 될 것 같습니다. 감사합니다~
와~~~ 산뜻해졌네.. 웃는 사진도 그렇고...... 멋지다... (여긴 좋아요! 버튼 없나. ㅋㅋ)