이제 학교, 학원을 통해 교육을 마치고 WEB의 UI/UX 디자인을 관련하여 취업을 준비하거나 프리랜서로서 활동을 시작하고자 하는 디자이너들이 자신이 만든 웹사이트를 직접 개발하거나, 퍼블리셔에게 코딩을 요청하기 전에 알고 넘어가야 할 사항에 대하여 체크해 보고자 한다.
웹 디자이너라면 포토샵(Adobe Photoshop), 피그마(Figma), Adobe XD, Sketch 등의 디자인 Tool을 이용하여 나만의 결과물을 만들고 있을 것 입니다.
그렇다면 디자인을 할 때 어떤 점을 고려해야 할까요??
반응형과 적응형에 관하여는 들어 보신 분도 계시고 생소하신 분들도 계실거라 생각이 듭니다.
반응형 vs 적응형 웹디자인
디자이너는 다양한 디바이스 환경에 맞춰 사이트를 디자인하게 되는데는 반응형과 적응형 크게 2가지로 분류합니다.
반응형과 적응형 웹사이트에 대해 설명하고 장점과 단점에 대하여 알아보겠습니다.
반응형 디자인이란?
반응형 디자인은 하나의 디자인 화면이 디바이스 크기에 반응햐여 줄어들고 넓어지면서 화면 크기에 맞게 보여주는 디자인 형식 입니다. 그리하여 화면의 콘텐츠들이 화면에따라 조정되어 제공됩니다.
반응형 디자인의 화면 크기는 크게 웹, 타블렛, 모바일로 나누어집니다.
적응형 디자인이란?
적응형은 반응형과는 다르게 화면에 따라 디자인을 고려하여 장치별로 호환성을 고려해 여러가지의 디자인을 해야합니다.
같은 모바일 화면이라도 넓이가 다르기 때문에 환경을 고려해 329px, 480px, 760px, 960px, 1200px, 1600px 최소 6가지의 화면의 넓이를 적용할 수 있는 디자인을 합니다.
그리하여 기기별 사이즈에 따라 가장 적합한 화면을 웹상에서 보여줍니다.
그러면 반응형과 적응형의 장단점은 무었일까요?
반응형 디자인 장점
1. 동일한 사용자의 경험 :
반응형은 웹을 이용하는 유저가 다양한 장치에서 접속하더라도 균일감있고 원할한 사용자 경험을 제공합니다.
2. 저렴하고 최소한의 유지보수 :
- 다양한 기기를 구현할 필요가 없기 때문에 단가가 절감됩니다.
- WordPress등 다양한 빌더형태의 사이트제작 솔루션이 반응형을 사용하기에 쉽게 구축할 수 있습니다.
- 모든 장치에 동일한 콘텐츠를 보여주기 때문에 여러번의 수정없이 좀더 쉽고 빠르게 유지보수를 할 수 있습니다.
3. SEO 최적화 :
구글은 사용자의 경험 제공을 위하여 반응형 사이트에 더 높은 순위를 주었습니다. 그리하여 더 나은 검색 결과를 얻기 위하여 반응형 사이트 제작을 고려하는 것도 좋습니다.
반응형 디자인 단점
1. 느린 로딩 :
모든 콘텐츠들을 불러온 후 화면 크기에 맞춰 자동으로 조절이 되기 때문에 콘텐츠를 로딩하는데 있어 시간이 걸립니다. 그리하여 사용자들의 이탈확율이 있습니다.
2. 동일한 디자인 :
장치별로 디자인을 하지 않기 때문에 모든 디바이스에서 동일한 디자인을 제공하게 되어 디바이스별로 다양한 경험을 할 수 없습니다.
적응형 디자인 장점
1. 디바이스 별 디자인 최적화 :
적응형 디자인은 디바이스별로 호환되는 디자인과 레이아웃으로 제공하기 때문에 맞춤형 디자인으로 기기별 다양한 콘텐츠를 경험 할 수 있습니다.
2. 빠른 로딩 :
디바이스에 가장 맞는 콘텐츠로 제작되기 때문에 바로 적합한 레이아웃을 로딩하여 PC에서만 고해상도의 이미지를 표기하고 반응이 느린기기에서는 콘텐츠를 제어하여 사이트의 로딩속도를 제어 할 수 있습니다.
적응형 디자인 단점
1. 고도화된 디자인과 개발의 필요 :
좀더 기기별로 숙련된 디자이너의 작업과, 다양한 기기별 개발로인한 기술적인 문제로 까다로운 제작이 필요합니다.
2. 높은 유지보수 비용 :
만약 모바일, pc, 타블릿 화면에 대한 디자인을 하여 제작하였다면 콘텐츠를 수정하거나 업데이트 할 경우 기기별의 디자인 수정과, 코딩작업이 필요합니다. 그리하여 좀더 많은 시간의 유지관리와 이에 따른 비용이 발생합니다.
3. 비싼 구축 :
높은 유지보수에서 언급한 것과 같이 더 많은 디자인과 개발자가 필요합니다. 디바이스별 여러 화면이 있기 때문에 더 많은 개발비용과, 디자인 비용이 발생하게 됩니다.
그러면 언제 반응형과 적응형 디자인을 해야할까요??
자신이 만들고자 하는 웹의 목적에 따라 방향성을 고려하여 디자인하고 그에따른 선택이 필요합니다.
'Web' 카테고리의 다른 글
| 시작 전 코딩을 위한 준비물 (0) | 2023.08.25 |
|---|---|
| 웹 사이트를 만들어야 하는데 뭐부터 시작해야 할까요? (0) | 2023.08.25 |