kimdirector

현재 모든 웹 트래픽의 절반은 모바일 세션에서 발생합니다. 또한 점점 더 많은 구매가 모바일 장치를 사용하여 이루어지고 있습니다. 예측에 따르면 2021년 말까지 모바일 상거래의 점유율은 전자 상거래에서 전체 소매 판매의 약 73%가 될 것입니다. 이러한 추세는 사이트의 모바일 버전에 더 많은 주의를 기울여야 하며, 사용자에게 가장 긍정적인 인상을 주어야 합니다. 따라서 다양한 디바이스에 사이트를 최적화하는 것은 오래전부터 디자인의 필수사항 중 하나였습니다. 하지만 스마트폰, 모바일, 반응형에 가장 적합한 접근 방식이 무엇인지, 디자인의 장점과 단점, 그리고 디자인 원칙이 무엇인지 알아 보겠습니다.   반응형 디자인과 Mobile First의 차이점은 무엇인가요?반응형 디자인은 사이트의 데스크톱 버전 또..

반응형 웹디자인이 무엇일까요? 얘기는 많이 들었지만 잘 모르고 그냥 넘겼을지도 모릅니다. 하지만 이 분야에 종사하시는 분이라면 이 개념을 확실히 알고 넘어갈 필요가 있습니다. 디자이너 산디스 씨(Sandijs Ruluks)는 블로그에 반응형 웹디자인을 gif로 쉽게 설명했습니다. 그는 프린트 기반의 디자인을 하다가 웹디자인을 시작해서 좀 더 일반적인 관점에서 잘 설명했는데요. 반응형 웹디자인은 다양한 스크린 크기에 대응할 수 있는 훌륭한 해결책입니다. 하지만 이것을 단순히 프린트 기반의 디자인과 같은 개념으로 이해한다면 당연히 어렵습니다. 정해진 페이지 크기가 없으며, 인치(inches)나 밀리미터(mm)의 단위를 쓰지 않습니다. 그렇다고 픽셀만으로 웹과 모바일 디자인한다는 것도 구시대 발상이 되었는데요..

이제는 OSMU(One Source Multi Using)서비스를 실현하고 N-Screen 시대에 대응해야 한다. 이에 따라 최근엔 CSS의 Media Queri를 이용한 "Responsive UI"를 설계하여 서비스를 구현하고 있다. 미국과 영국에서는 사례가 많지만 국내 사례는 그리 많지 않고 완성도도 높지 않다. 본인도 현재 프로젝트에 심혈을 기울여 작업하고는 있지만... 초반이니만큼 시행착오가 많은 법. 이제부터 그 시행착오를 기록하여 나중에 정보집으로 만들수 있도록 준비를 해야겠다.  Responsive UI 란?말그대로 반응하여 나타는 인터페이스를 뜻하며, 웹브라우저의 가로 사이즈에 반응하여 레이아웃을 변형시키는 형태를 뜻한다.    1. 레이아웃이 확대, 축소, 이동되는 것은 허용되나 요소의 ..