반응형 웹 디자인 구현 방법 - yamoo9/cj-olive-networks GitHub Wiki

모바일 웹 사이트 디자인 및 반응형 디자인에 대한 다음 팁은 사이트의 반응성 및 모바일 친화성을 보장하는데 도움이 됩니다. 다음은 반응형 웹 디자인을 위한 최선의 팁입니다.

1. 사용자의 모바일 경험을 고려하세요.

사용자의 모바일 기기 경험과 데스크톱 웹사이트 경험이 다르다는 점을 잊지마세요. 웹사이트 방문자를 조사하거나 분석을 통해 모바일 기기로 사이트에 접근하는 이유와 가장 많이 접근하는 페이지, 요소를 파악해야 합니다. 이러한 정보는 모바일 기기의 화면에서 쉽게 사용할 수 있어야 하는 웹사이트 요소를 이해하는데 도움이 됩니다.

2. 완성된 비주얼 디자인 보다, 프로토타입 테스트를 우선 하세요.

사이트를 디자인하기 전에 먼저 레이아웃을 계획하는 것이 좋습니다. 대부분의 웹 디자이너는 개발(코딩)로 넘어가기 전 단계에 와이어 프레임을 만들어 웹사이트의 비주얼 디자인을 만드는 것에서부터 시작합니다. 그러한 이유로 레이아웃을 먼저 디자인 하면 원하는 모양과 느낌을 정확하게 만들 수 있을 뿐 아니라 브랜드와 원활하게 통합 할 수 있습니다.

웹사이트의 프로토타입을 만들어 다양한 화면 크기 테스트를 통해 반응형 디자인의 최적 포인트를 찾습니다. 반응형 프로토타입을 만드는데 InVision을 활용하면 매우 유용합니다. InVision을 사용하면 웹사이트의 크로스 커뮤니케이션 프로토타입을 만들 수 있습니다. 링크가 있는 사용자는 탐색, 버튼, 스크롤링 등을 테스트하고 피드백을 남길 수 있습니다. 웹사이트가 다양한 상황에서 어떻게 작동 하는지 확인하는데 매우 유용한 도구입니다.

3. 효율적인 네비게이션 제공 방법에 대해 고민하세요.

내비게이션은 웹사이트의 핵심으로 방문자를 위한 로드맵 역할을 하며, 다른 페이지로 이동하는 링크를 제공합니다. 일반적으로 데스크톱 화면에서 내비게이션에 페이지 링크가 표시되는 반면 모바일 기기는 링크를 감추고 햄버거 메뉴를 통해 이동하는 링크를 제공합니다. 하지만 일부 사용자는 햄버거 메뉴를 누르면 링크 페이지가 표시된다는 사실을 모를 수 있어 이 방법이 항상 최선은 아닐 수 있습니다.

보다 권장되는 방법은 가장 중요한 링크를 메인 화면에서 바로 볼 수 있게 하고, 중요도가 상대적으로 떨어지는 나머지 링크는 햄버거 메뉴를 통해 사용할 수 있도록 하는 것입니다.

4. 이미지를 최적화로 사이트 속도를 향상시켜 보세요.

이미지는 웹사이트 디자인에서 중요한 역할을 합니다. 방문자의 시선을 끌고, 구매로 촉구할 수 있도록 하는데 영향을 끼칩니다. 따라서 이미지를 웹에 최적화 하는 과정은 매우 중요합니다. 이미지 포멧 별로 용도가 다르기에 각 포멧의 적절한 사용법을 알고 활용해야 합니다. TinyPNG 온라인 서비스와 같은 도구를 사용하여 이미지 크기를 최대한 줄여 다양한 모바일 브레이크 포인트에 맞게 최적화된 이미지를 사용하여 크기 조정 및 트래픽 문제를 줄여야 합니다.

5. 모바일 기기를 우선하여 기획(설계) 하세요.

반응형 디자인에 접근하는 또 다른 방법은 웹 사이트의 모바일 버전을 먼저 디자인하는 것입니다. 이렇게 하면 작은 화면에서 이미지, 텍스트, 로고 및 기타 요소가 어떻게 보이는지 볼 수 있습니다. 문제없이 표시되면 큰 화면에서 또한 문제가 발생하지 않습니다.

6. 미디어쿼리 사용법을 익혀두세요.

미디어쿼리의 주요 역할은 웹사이트의 레이아웃을 기기에 최적화 한다는 점입니다. 미디어쿼리를 사용하면 콘텐츠는 특정 기기의 조건에 맞춰진 스타일에 따라 처리됩니다. 요컨대 미디어쿼리는 기기 해상도, 너비 및 회전 방향을 확인하고 조건에 맞는 CSS를 적용합니다. 미디어쿼리 구문은 다음과 같습니다.

@media (min-width: 60em) { ... }

7. 적절한 사용자 입력을 유도해보세요.

사이트의 폼 인터페이스는 화면 크기에 맞게 조정 되어야 합니다. 더 나아가 입력 필드에 키보드 사용이 가능한지 확인해야 합니다. 폼 필드에 <input>를 사용하면 사용자의 입력을 유도할 수 있습니다.

이름, 이메일, 주소 및 기타 텍스트 입력이 필요한 필드는 텍스트 키보드를 트리거 해야하며 숫자가 필요한 입력 필드는 숫자 키보드를 트리거 해야 합니다. 이렇게 하면 웹사이트의 전반적인 모바일 친화성과 사용자 경험이 향상됩니다.

8. 작은 모바일 화면에서도 쉽게 클릭할 수 있게 만들어 주세요.

버튼, 링크 등 클릭 가능한 요소를 제작할 때 특히 주의해야 합니다. 모바일 기기의 화면 크기가 작다는 이유로 클릭 가능한 요소를 작게 만들면 사용자가 클릭하여 인터랙션 하기 어려워 집니다.

그리고 사용자가 버튼을 쉽게 구별할 수 있도록 만들어야 합니다.

주변 색과 구별되는 색상, 명도 등을 사용하여 구분지어 보세요.
버튼을 쉽게 인식할 수 있게 사각형 또는 원을 사용해보세요.
버튼, 링크 등에 패딩(Padding)을 사용하여 클릭 가능한 영역을 늘려야 합니다.
(최소 7mm이상: 픽셀은 기기마다 달라지기 때문) BBC 모바일 접근성 가이드라인 참고

9. 타이포그래피를 최적화 하세요.

모바일 기기와 같은 작은 화면에서 텍스트를 읽을 수 있는지 확인해야 합니다. 본문 크기(기본 값: 16px)를 설정한 후, 본문 크기에 상대적으로 제목 크기를 조정합니다. 그리고 행간 높이를 최소 1.5 이상 설정하길 권장합니다.

10. 마이크로 인터랙션을 활용하세요.

웹 디자인 트렌드 중 하나가 마이크로 인터랙션 입니다. 지난 몇 년 동안 애니메이션 및 인터랙션 기능이 강화 되면서 사용자 경험을 향상시키는 재미있고 흥미로운 애니메이션 사용은 특히 주목 받습니다. 좋은 예는 Le Cafe Noir Studio 쇼핑몰에 상품을 장바구니에 추가 할 때 화면을 가로 지르는 생동감 넘치는 하트가 있어 즉각적인 흥미를 유도합니다.