10가지법칙
멋진 웹사이트 레이아웃을 디자인하는 10가지 법칙과 실용 가이드
코드 블록의 Try it Yourself 버튼으로 직접 실행할 수 있다.
구문
멋진 웹사이트 레이아웃을 디자인하는 10가지 법칙
법칙 1: 어수선함 피하기
레이아웃은 이미지, 버튼의 다양한 배열 그리고 불규칙해 보이는 레이아웃으로 어수선해 보일 수 있습니다. 레이아웃이 어수선하면 방문객이 다음 단계로 넘어가는 것을 방해합니다.
Tip: 여백이 여러분의 친구입니다.
법칙 2: 폴드(fold) 상단의 디자인을 우선하기
"폴드"는 브라우저 아래의 경계 부분을 의미합니다. 폴드 아래에 있는 모든 콘텐츠는 스크롤로만 도달할 수 있습니다. 항상 핵심 콘텐츠와 정보를 폴드 라인 위에 배치하세요.
Info: 모바일 사이트의 경우 폴드가 짧아 방문자가 계속 스크롤하도록 만들 수 있는 공간이 줄어듭니다.
법칙 3: 힉 하이먼 법칙을 명심하기
힉 하이먼의 법칙은 선택지가 늘어나면 개인이 결정하는 데도 시간이 늘어난다고 말합니다. 유저 경험의 각 단계에서 선택지를 제한하여 방문객의 주의가 다른 곳에 쏠리지 않도록 하세요. 하나의 콜 투 액션 버튼이 긴 메뉴 옵션보다 훨씬 더 효과적입니다.
법칙 4: 클릭보다 스크롤을 장려하기
스크롤은 매끄럽게 웹 레이아웃을 이어줍니다. 클릭은 경험할 때까지 로딩시간이 깁니다. 스크롤은 모바일에서 더 직관적이며 사용자가 사이트에 더 오래 머뭅니다.
Info: Crazy Egg의 연구에 따르면 클릭에서 스크롤로 바꾸는 것으로 전환비율이 36% 증가했습니다.
법칙 5: 진정성 있고 자연스러운 사진 사용하기
웹사이트 방문객들이 인위적인 사진을 싫어한다는 사실을 아시나요? 과한 포즈를 취한 모델 사진보다 좀 더 진정성 있는 이미지에 방문객들은 연결감을 느낍니다.
법칙 6: 시각적인 단서 사용하기
버튼을 바라보는 사람 이미지나 메뉴 옵션을 가리키는 화살표처럼 사용자에게 직접적인 이미지 또는 그래픽을 사용하는 것은 방문객을 중요한 행동으로 이끌 수 있는 확실한 테크닉입니다.
법칙 7: 서체는 스타일리시함보다 가독성이 우선
가독성 있고 읽기 쉬운 텍스트는 집중을 방해하지 않으며 다양한 스크린 크기에서 핵심 정보를 읽기 쉽습니다. 세리프체나 이탤릭체보다 깔끔하고 기하학적인 산세리프체 또는 굵은 디스플레이 형태가 웹사이트에 가장 잘 어울립니다.
법칙 8: 색채 심리
색상은 웹사이트 레이아웃에 특정 분위기와 개성을 부여할 수 있는 즉각적인 방법입니다. 색상을 제대로 선택하는 것은 사용자들이 사이트에 반응하는 방법에 영향을 미칩니다.
- 오렌지 : 고객들에게 좋은 가치를 전달
- 블루 : 지능과 상상력과 연관
법칙 9: 모바일용 페이지를 먼저 디자인하기
전 세계 모든 브라우징 세션의 절반 가량은 모바일 기기에서 이뤄집니다. 모바일을 먼저 염두에 두고 웹사이트 레이아웃을 디자인하거나 적어도 동일한 관심을 기울일 필요가 있습니다.
법칙 10: 모두를 위한 디자인
세계보건기구(WHO)는 전 세계에서 적어도 22억 명이 시각 장애를 가지고 있다고 밝혔습니다. 검정 텍스트를 하얀 배경과 함께 사용하는 등 색상 대조를 높이고 큰 크기의 산세리프체를 적용하는 것은 웹사이트를 접근 가능하고 포괄적으로 만들 수 있는 간단한 방법입니다.
초보자를 위한 실용 가이드
1단계: 사이트의 아이덴티티 구축하기
모든 사이트는 사이트 모든 페이지에 걸쳐서 일종의 브랜드 아이덴티티 역할을 하는 통일된 분위기와 스타일이 필요합니다.
효과적인 사이트의 아이덴티티는 다음을 포함합니다:
- 사이트 아이콘
- 로고
- 서체
- 색채 배합
사이트 아이콘
아이콘은 브라우저 탭에 있는 웹사이트 제목 옆에 나타나는 파비콘으로 사용됩니다.
사이트 아이콘은 적어도 512 x 512 픽셀의 정사각형이며 일반적으로 PNG, GIF, ICO 파일로 저장됩니다.
로고
로고는 그래픽에 기업명 같은 약간의 텍스트를 포함할 수도 있습니다. 다양한 기기에서 효과적으로 작동하기 위해 적당한 크기로 만들어져야 합니다.
Tip: 레티나 디스플레이에서 멋지게 보이게 하려면 로고 크기를 두 배로 키우세요. 예: 100x100 → 200x200 픽셀
웹 폰트 및 서체
웹사이트에서 위계를 만드는 것이 중요하며 그 위계는 H-태그가 됩니다. H1이 가장 중요하고 큰 텍스트 스타일이며, H2, H3... H6까지 이어집니다.
색상
색상은 웹사이트 페이지를 통합할 뿐만 아니라 분위기와 사용자의 인식에 영향을 미칩니다. 웹사이트에서 색상은 HEX 코드로 정의됩니다. HEX 코드는 #RRGGBB 포맷을 가진 RGB 색상의 코드 버전입니다.
2단계: 사이트의 홈페이지 구축하기
홈페이지는 일반적으로 검색 엔진을 통해 도착한 방문객이 마주하는 첫 번째 장소입니다. 홈페이지는 나머지 웹사이트의 스타일 톤을 설정해야 하며 콜 투 액션, 시각적인 단서, 메뉴 옵션을 사용하여 사용자를 다른 페이지로 이끌 수 있어야 합니다.
3단계: 다른 페이지를 위한 서식 만들기
모든 웹사이트에 필요한 핵심 페이지들:
- 어바웃 페이지
- 컨택트 페이지
- 카테고리 페이지
- 서비스 페이지 (기업용 웹사이트)
- 프로젝트 페이지 (블로그 및 포트폴리오용)
- 제품 페이지 (전자상거래용)
- 뉴스 페이지 또는 블로그 포스트 페이지
웹디자이너는 와이어프레임을 사용하여 사이트의 다양한 페이지에서 요소를 배열하는 법을 연구합니다.
