반응형 웹 vs 적응형 웹

현재 사람들은 노트북과 데스크톱 컴퓨터보다 모바일 기기를 통해 웹 사이트를 방문한다. 모든 기기와 플랫폼에서 원활하게 작동할 수 있으면서 디자인 면에서도 뛰어난 웹 사이트를 제작하는 것이 현재 매우 중요해지는 마당, 반응형 디자인과 적응형 디자인 둘 중의 어떤 것이 모바일 친화적 디자인 전략에 가장 적합할지 이야기를 하고자 한다.


반응형 웹 사이트 (Response Website)

하나의 템플릿(Template)으로 모바일, 태블릿, 노트북, 데스크톱 등 모든 기기에 접속하는 디스플레이의 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹

반응형 웹은 해상도 별로 보여질 화면을 꼼꼼하게 정의해야 하므로 초기 기획 단계에서 많은 시간이 소요된다. 마크업을 구성할 때도 고정된 값이 아닌 em, rem, %와 같은 단위를 사용하여 작업해야 한다.

하나의 템플릿으로 만드는 작업이라 CSS 미디어 쿼리(Media Queries)를 사용하여 최종 사용자가 사용하는 기기의 특성을 검사한다. 그런 다음 웹 사이트에서 검사된 내용을 바탕으로 자체적으로 렌더링된다.


위의 이미지를 보면 디바이스별로 일부 콘텐츠가 변경되면서 화면의 공간에 최적화되어 확대 또는 축소되어 나타나는 모습을 볼 수 있다. 사용자가 사용하는 디바이스별로 일부 기능이 변경된다.

반응형 디자인은 2010년 이단 마콧(Ethan Marcotte)이 시애틀의 An Event Apart에서 소개하면서 웹 디자인에 사용되기 시작했다.

적응형 웹 사이트 (Adaptive Website)

모바일, 태블릿, 데스크톱 등 각각의 디바이스 별로 독립적인 템플릿(Template)을 만들고, 각각의 디바이스애 맞는 페이지를 별도 제작 후 렌더링되는 웹

모바일의 경우에는 모바일용 템플릿을, 데스크톱 같은 경우에는 데스크톱 템플릿을 제공하는 방식이다. 따라서 기기별로 템플릿을 제작해야 한다.

가장 일반적인 너비 (픽셀 단위)

• 320
• 480
• 760
• 960
• 1200
• 1600


마우스로 화면을 줄여도 변화가 안보이는데 모바일로 접속하면 모바일 전용 페이지로 리디렉션(redirection)되어 m.naver.com으로 랜딩되어진다.


Youtube는 일반적인 브레이크 포인트 사용을 위한 맞춤형 디자인에 있어 적응형 디자인을 사용한 웹 사이트다. 브레이크 포인트(Break Point)는 반응형 웹에서 사이즈가 변화하는 지점을 말한다. 만약, 반응형 디자인을 사용했다면 사이트를 방문한 방문자들의 화면에 동일한 내용이 동일한 순서대로 나타나겠지만 적응형 디자인은 이와 달리 동적이지 않는다.

점점 더 많은 기업들이 스마트폰에 콘텐츠가 나타나는 방식을 제어하기 원하면서 웹 디자인 공간에서 적응형 디자인을 쉽게 찾아볼 수 있게되었다.

반응형 웹 vs 적응형 웹 무엇을 사용해야 할까?

반응형 디자인 장단점

장점:

• 모든 플랫폼에서 일관된 콘텐츠 경험
• 보편적이지 않은 화면 크기의 새로운 기기에서도 작동 가능

단점:

• 각 기기에서 웹 사이트가 렌더링되는 방식에 대한 통제가 상대적으로 어려움
• 요소가 잘못된 순서 또는 크기로 재배치되는 경우, 시각적 계층 구조를 방해함
• 디자인에 대한 더 많은 전문 지식이 필요함
• 플랫폼 간 테스트 및 디자인 조정을 요함
• 동적 콘텐츠를 불러오는 데 더 많은 작업이 요구되어 웹 사이트 성능이 저하됨

적응형 디자인 장단점

장점:

• 각 플랫폼 및 상황과 맥락에 맞춰 제공되는 완벽한 맞춤화된 경험
• 원하는 기기에 맞게 최적화된 디자인을 할 수 있는 고성능 작업 수행
• 광고 및 타사의 통합 콘텐츠에 대한 간편화 맞춤화

단점:

• 콘텐츠가 모든 기기에 일관되지 않을 검색엔진 최적화(SEO)에 부정적인 영향을 미침

다양한 크기의 웹사이트 제작할 시 고려할 사항 10가지

웹 디자인을 하면서 뛰어난 반응형 또는 적응형 웹 사이트를 제작하고 싶다면 사이트의 개별 요소에 집중하고 웹 사이트에 변경이 생길 시 이러한 변화가 각 요소에 어떤 영향을 미치게 될지 고려해야 한다. 다음과 같은 주요 구성요소를 포함하거나 최적화하는데 집중해 볼 수 있다.

1. 헤더 콘텐츠

방문자가 처음 웹 사이트에 접속했을 때 헤더를 통해 다음과 같은 정보를 얻을 수 있다.

• 브랜드 정보
• 브랜드 제품/서비스
• 방문자 웹 사이트 가이드
• 전체 콘텐츠 검색 방법

데스크톱에서는 이러한 정보를 모두 표시할 수 있는 공간이 충분하게 있지만, 모바일에서는 다르기 때문에 어떤 요소가 표시되어야 하는지 스스로 한번 질문해보고 적용하는 것이 중요하다.

2. 텍스트 가독성

웹 사이트 텍스트는 다양한 요소 중 다루기가 까다로운 요소로 꼽힌다. 멋진 텍스트를 사용하여 브랜드의 본래 스타일을 나타내고 싶을 때 디자인이 가독성에 영향을 미치지 않도록 해야한다. 다른 기기에 맞춰 디자인을 구성할 때 크기에 변화가 생겨도 텍스트의 크기와 스타일은 그대로일 수 있다는 점을 고려해야하고, 사이트를 시작하기 전에 이 부분을 반드시 테스트 해보는 것이 중요하다.

3. 메뉴 아이콘

웹 사이트를 탐색하는 과정을 모든 웹 사이트에서 중요한 요소로 작용하는 부분이다. 사용자가 기기에 따라 웹 사이트와 상호작용이 달라질 수 있는 생각해보고, 메뉴 아이콘 사용에 대해 생각해봐야 한다.

메뉴 아이콘은 일반적으로 웹 사이트 오른쪽 상단과 왼쪽 모서리에 배치되며, 세 줄이 그려진 아이콘 형태를 띠고 있다. 대부분의 사람들이 이 세 줄짜리 아이콘의 기능을 알고 있어, 이 아이콘을 사용하여 웹 페이지를 탐색하기 시작한다.

4. 탐색을 위한 구성

점점 높아져 가는 모바일 앱의 인기로 인해 많은 웹 사이트의 모바일 탐색을 구성하는 방식에 변화가 일어나고 있다. 앞서 언급한 메뉴 아이콘을 뛰어 넘는 다양한 디자인이 등장하고 있어, 메뉴 아이콘 디자인도 고려해야한다.

5. 고정 헤더

적응형 디자인에서는 모바일용 페이지를 비교적 짧게 구성할 수 있다. 하지만 반응형 디자인의 경우 별도의 수정을 거치지 않은 경우에는 모든 데스크톱 콘텐츠가 모바일 웹 페이지에도 반영된다.

조금 더 간결하게 모바일용 페이지를 구성하려고 해도 여전히 너무 긴 느낌이 든다면, 헤더를 고정해볼 수 있다. 이 방법을 사용하면 사용자가 언제든지 탐색 메뉴에 액세스할 수 있는 장점이 있다.

6. 시각적 계층 구조

웹 사이트의 시각적 계층 구조는 웹 페이지에서 방문자의 시선이 따라 가는 경로를 나타낸다. 웹 사이트의 레이아웃이 복잡해질 경우 특히 모바일용 웹 사이트에서는 방문자가 집중해야 할 세부 사항이나 다음으로 이동할 위치가 알기에 어려움이 있다.

다음과 같은 목적을 위해 헤더 및 하위 헤더, 이미지 블록, 공백, 탐색 도구 등을 웹 페이지에 추가할 수 있다.

• 많은 양의 콘텐츠 및 복합 주제 분할 표시
• 페이지 정보에 대한 구조 만들기
• 균형 잡힌 디자인 만들기
• 서로 다른 섹션 간의 관계 설정

반응형 디자인에서는 화면이 축소됨에 따라 요소의 크기가 조정되거나 스타일이 변경될 수 있으므로 이에 각별히 주의해야 한다. 가장 좋은 방법은 데스크톱, 태블릿 및 모바일에 적용할 수 있는 보편적인 스타일 기준을 설정하는 것이다. 즉, 이를 통해 반응형 디자인에서 구조적인 조정 과정을 거칠 때 콘텐츠의 일관성을 유지할 수 있다.

7. 페이지 길이

웹 사이트 콘텐츠와 관련하여 고려해 할 마지막 사항은 '길이'다. 물론, 탐색 기능을 사용하면 모바일 기기에서 긴 페이지를 더 쉽게 스크롤할 수 있긴 하지만 모바일에서 웹 사이트 탐색 시 방문자의 스크롤 횟수가 최소화될 수 있도록 하는 가장 바람직하다.

적응형 디자인을 사용하면 모바일 레이아웃에서 텍스트 또는 이미지의 섹션을 없앨 수 있다. 모바일 버전에서는 가독성에 초점을 맞추고 데스크톱 버전에서는 자세히 읽어볼 수 있는 더 많은 콘텐츠를 제공하는 방법도 또 다른 디자인 전략이 될 수 있다.

8. 이미지

웹 사이트 이미지는 디자인, 브랜딩, 스토리텔링 및 판매에 매우 유용한 도구가 될 수 있다. 하지만 반응형 및 적응형 디자인에서 이러한 이미지는 페이지 성능에 영향을 미칠 수 있다. 적응형 웹 사이트에서는 이미지의 용량이 상대적으로 문제되지 않지만, 웹 페이지 속도를 효율적으로 관리하기 위해서는 필요한 이미지만 사용하는 것이 좋다.

9. 내장형 콘텐츠

내장형 소셜 미디어 위젯, 동영상 또는 배너 광고와 같은 외부 콘텐츠를 사용하는 것이 현재 매우 일반적이다. 적응형 디자인에서는 외부 콘텐츠를 박스형 공간에 배치할 수 있지만, 반응형 디자인에서는 내장 코드를 입력하여 박스형 공간 범위 내에 배치할 수 있도록 사용자 지정해야 한다.

10. 대화형 요소

대화형 디자인 요소는 다음과 같다.

• 대화형 요소로서 식별이 쉬움
• 페이지 내에서 찾기 쉬움
• 대화형 요소를 사용하는 데 문제가 없음

방문자가 웹 사이트에서 기대하는 것은 작지만 다양한 대화형 요소를 고려해 볼 수 있다. 따라서, 반응형 디자인 또는 적응형 디자인을 선택했을 때 각기 다른 기기에 맞춰 콘텐츠를 재배치하고 크기를 조정하여 어떻게 보여줄 것인지에만 집중하기보다는 주어진 상황과 맥락이 대화형 콘텐츠에 어떤 영향을 미칠지에 대해서도 생각해봐야 한다.