귀하의 웹사이트가 표준에 맞는지 확인하기 위해, 2020년에 모든 기기에서 최상의 경험을 제공하는 웹사이트를 만드는 데 도움이 되는 꼭 알아야 할 반응형 디자인 모범 사례 7가지를 소개합니다!
1. 최소화하고 우선순위를 정하세요
모바일 기기는 크기에 제약을 받기 때문에 콘텐츠와 이미지를 작업할 수 있는 공간이 충분하지 않습니다.
데스크톱용 웹사이트 페이지를 생각할 때, 필요한 정보를 ‘섹션’으로 나누고 싶은 욕구는 항상 있습니다. 이러한 섹션은 뉴스 기사의 단락과 같다고 생각해 보세요. 이렇게 하면 페이지의 각 부분을 혼란 없이 쉽게 나누고 읽을 수 있습니다.
2. 판매 채널 하단의 CTA(행동 촉구)를 쉽게 찾을 수 있도록 만드십시오.
귀사의 비즈니스 웹사이트에는 사용자에게 전달하고 싶은 특정 주요 행동 유도(CTA)가 있을 것입니다. 소프트웨어 구매, 상담 예약, 앱 가입 등이 그 예일 수 있습니다.
사람들이 이 목표를 달성하도록 하려면 탐색 기능과 사이트 전반, 특히 데스크톱에서 주요 행동 촉구를 배치해야 합니다.
CTA를 추적하고 있다면, 탐색 버튼이 사람들이 전환을 유도하는 게이트웨이 페이지로 이동하는 주요 경로 중 하나라는 것을 알게 될 것입니다. 따라서 탐색 버튼을 항상 표시하는 것은 매우 중요합니다.
3. 확장 가능한 벡터 그래픽(SVG)을 사용하세요
SVG(Scalable Vector Graphics)는 일러스트레이션이나 아이콘을 활용하는 모든 반응형 디자인에 가장 중요한 요소입니다. 이미지 파일(JPG/PNG)과 달리 SVG는 무한대로 확장 가능합니다.
해상도나 픽셀화에 대해 걱정할 필요 없이 모든 아이콘이나 그래픽이 모든 환경에서 매우 선명하게 유지된다는 사실을 알고 안심할 수 있습니다.
이를 통해 사이트를 어떻게 보든 일관되게 세련된 모습이 유지됩니다.
게다가 SVG는 파일 크기가 작은 경우가 많아 사이트 로딩 속도가 빨라집니다. 이미지가 너무 커서 휴대폰 앞에 앉아 버퍼링만 보고 싶어 하는 사람은 아무도 없습니다.
4. 클릭 가능한 영역과 버튼 표준화
모바일에서는 버튼과 링크를 마우스로 정확하게 클릭하는 것이 아니라 사람의 손가락으로 탭하게 됩니다. 따라서 대화형 영역은 이러한 차이를 수용하기 위해 더 넓은 영역이 필요합니다.