올해 4월 처음 열었던 사내 세미나가 벌써 세번째가 되었습니다. 기대 반 걱정 반으로 시작했던 사내 세미나가 이제는 어엿한 회사의 공식적인 행사로, 직원들에게 필요한 행사로, 또 소통할 수 있는 행사로 자리매김된 것 같습니다. 벌써 4차 세미나까지 기획이 되어 있는 상태니 앞으로도 기대가 됩니다.
이번 3차 세미나의 주제는 “반응형 웹 디자인”입니다. 최근 모바일 기기 등 다양한 형태의 스마트 기기가 많아지면서 기기의 화면 사이즈와 특성에 맞게 웹페이지나 애플리케이션을 개발해야 하는 어려움에 직면했습니다. 이를 해결하기 위한 기술이 바로 “반응형 웹”이죠. 이번 “반응형 웹 디자인”은 우리 회사 디자이너인 한미화 과장과 임지은 주임이 준비했습니다.
반응형 웹의 개념과 MediaQuery
첫번째 시간은 한미화 과장이 준비한 “반응형 웹의 개념과 MediaQuery”에 대한 내용이었습니다.
반응형 웹이란 무엇일까요? One Source Multi Use라는 패러다임을 달성하기 위한 반응형 웹의 개념과 N스크린 시대에 다양한 해상도와 단말기에서 하나의 소스로 최적화 된 상태로 보여주는 특징이자 장점, 그리고 적응형 웹 디자인이라는 개념과 반응형 웹 디자인의 개념에 대해 간단하게 설명했습니다.
또한 반응형 웹의 단점에 대해 한미화 과장의 실무 경험을 토대로 설명하여 일선 현장에서 도입 시의 주의할 점, 그리고 고객이 반응형 웹을 원할 때 어떤 것을 고려하고 또 설득해야 하는지를 설명하기도 했습니다.
마지막으로 기술적인 요소로 들어가 반응형 웹의 3요소인 가변성 레이아웃과 가변 이미지, 그리고 미디어 쿼리에 대해 간략하게 설명하고 모바일 환경에서 중요한 고려요소인 뷰포트에 대한 설명과 미디어 쿼리에 대한 설명, 그리고 미디어 쿼리 코드 템플릿 작성 등에 대한 설명을 하였습니다.
명쾌하고 유쾌한 세미나에 많은 직원들이 감명을 받은 명강의를 한번 같이 느껴 보시죠. 본 동영상은 현장에서 녹음한 것이 아닌 별도로 녹음한 내용이기 때문에 현장의 느낌을 그대로 전달하지 못하는 점을 양해 바랍니다.
반응형 웹디자인의 실제와 사례
두번째 시간은 임지은 주임이 준비한 “반응형 웹디자인의 실제와 사례” 순서였습니다.
반응형 웹디자인의 대표적인 기본 레이아웃 패턴인 Mostly Fluid, Column Drop, Layout Shiffer, Tiny Tweaks, Off Canvas에 대한 해상도별 배치 개념과 실제 소스, 그리고 웹브라우저를 통한 실습, 그리고 실제 이러한 패턴을 적용하여 만들어진 웹사이트의 실제 모습 등을 볼 수 있었습니다.
간단하게 블록을 만들어서 보여준 예제와 실습이었지만 반응형 웹디자인이 어떻게 구동되고 또 어떻게 보여지는지를 정말 보고 느낄 수 있는 시간이었습니다. 아주 흥미로운 시간이었죠.
마지막으로 국내의 반응형 웹 사이트의 사례와 함께 반응형 웹디자인 사이트를 테스팅하거나 제작을 할 수 있는 참고 사이트 등을 소개하여 디자이너와 개발자 모두에게 도움이 되는 정보를 제공하였습니다. 대본을 꼼꼼히 준비하여 흐트러짐 없이 강의를 진행하는 임지은 주임의 모습을 함께 공감해 보겠습니다.
마치며…
이번 세미나는 디자이너 파트에서 준비했지만 사실 현재도, 향후에도 가장 각광 받는 개발 패턴일 될 것입니다. 세미나를 통해 반응형 웹 디자인의 실제를 알고 경험하는 것도 중요하지만 개발자와 디자이너가 어떻게 소통해야 하고 또 협의해서 고품질의 애플리케이션, 웹 서비스를 만들 수 있을 지 고민할 수 있는 좋은 자리였던 것 같습니다.
고품질의 애플리케이션은 내부 로직의 짜임새와 품질도 중요하지만 고객에게 보여지는 UX가 매우 중요합니다. 결국 Look & Feel을 주도하는 것은 UX이기 때문이죠. 그런 의미에서 개발자와 디자이너 간의 소통은 더욱 중요할 수 밖에 없습니다.
다음의 세미나도 역시 이런 측면에서의 고품질 애플리케이션 제작 기법에 대한 세미나입니다. 바로 UX 도구인 ExtJS에 대한 세미나 입니다. 여러분의 많은 관심을 기대합니다. 그럼 다음 세미나를 통해 다시 만나길…
^^화이팅