웹 페이지를 디자인할 때, 자주 하는 실수
몇 개의 디자인 팁으로 멋진 웹 페이지를 만드는 법
(출처 : [Common webpage design mistakes]의 기사를 번역 및 가공한 콘텐츠입니다.)
우리 팀은 사람들이 웹 사이트를 구축하는 동안 가장 흔히 저지르는 실수를 조사했습니다.
이 기사는 디자이너들이 서비스를 디자인할 때 피해야 할 금지사항 목록들입니다.
랜딩 페이지에서 디자인 실수를 피하기 위해
1. 콘텐츠가 논리적인 정보들의 단위로 나누어지지 않은 것
정보가 논리적인 정보들의 단위로 그룹화되면 사용자가 정보를 쉽게 이해하고 받아들일 수 있습니다.
정보 단위 사이의 패딩을 120px - 180px로 설정하고 색상이 들어간 배경을 사용하여 서로 다른 정보들을 분리합니다.
DON’T
정보 덩어리 사이에 약간의 여백이 있지만, 좀 더 명확하게 정보들을 구분하는 색상이 들어간 배경이 필요합니다.
정보 덩어리들의 구분을 유저들이 알아보기 어렵고 각 블록과 어떤 텍스트가 함께 있어야 하는지가 명확하지 않습니다.
DO
정보 덩어리들 사이에 여백이 충분하고, 좀 더 명확하게 정보들을 구분할 수 있는 색상이 들어간 배경이 있습니다.
이 장치들을 통해 정보 덩어리가 구분되어 이 랜딩 페이지에는 다양한 유형의 콘텐츠가 포함되어 있다는 것을 알 수 있습니다.
2. 정보 덩어리들 사이 간격을 불규칙하게 만드는 것
정보 덩어리들 사이에 동일한 크기의 여백을 설정해야 합니다.
그렇지 않으면 정보들의 관계가 엉망이 되어 사용자가 각 정보들을 동일하게 받아들이지 않을 수 있습니다.
DON’T
모든 정보 덩어리가 동일하게 중요하지만 여백이 동일하게 설정되지 않아 회사 정보가 헤더에 연결되어 있다는 인상을 줍니다.
DO
헤딩과 본문의 동일 크기 여백은 정보 덩어리들이 동등한 중요도의 정보를 전달하는 것으로 인식합니다.
3. 패딩이 너무 작으면 사용자가 내용을 정보의 덩어리들로 나눌 수 없습니다
정보 덩어리들이 서로 섞이지 않도록 하려면 두 정보 덩어리 사이에 넓은 공간(최소 120 픽셀)을 줘야 합니다.
DON’T
좁은 패딩을 사용하면 사이트를 구성하는 정보들의 구분이 서로 달라붙을 수 있습니다.
유저는 이것이 하나의 큰 정보일 뿐이고 서로 다른 의미를 가진 정보 덩어리들이 아니라고 생각하게 됩니다.
결론적으로, 페이지에 과부하가 걸리게 되고 유저는 정보를 어떻게 받아들일지 매우 혼란스럽게 됩니다.
DO
패딩이 충분히 커서 두 블록 간의 차이를 즉시 알 수 있습니다.
4. 배경 이미지와 텍스트의 대비가 낮지 않도록 해야 합니다
텍스트와 배경 이미지 사이에 충분한 대비가 있어야 합니다.
카피 문구를 눈에 잘 띄게 하려면 콘트라스트 필터를 이미지 위에 얹는 것도 좋습니다.
처음부터 대비되는 이미지를 사용하고 텍스트를 사진의 어두운 부분 위에 놓는 것도 좋은 방법입니다.
DON’T
배경 이미지가 너무 밝아서 카피 문구를 읽기가 너무 어렵습니다.
DO
사진에 필터를 적용해서 카피 문구를 읽기 쉽게 만듭니다.
5. 한 페이지에 너무 많은 스타일을 넣지 않습니다
한 페이지에 너무 많은 활자 및 디자인 스타일을 사용하면 가독성이 떨어집니다.
이를 피하려면 하나의 글꼴과 두 가지 옵션(예: 보통 글씨 스타일과 굵은 글씨 스타일)으로 스타일을 제한하십시오.
DON’T
너무 많은 타이포그래피 스타일이 사용되었기 때문에 어느 내용을 강조하고 싶은지 명확하지 않습니다.
DO
한 글꼴, 한 색상 및 두 가지 옵션의 타이포그래피 스타일은 깔끔하고 말하고자 하는 바가 분명합니다.
6. 색상 배경을 너무 좁은 부분에만 적용하는 것
좁은 부분만 색으로 강조하지 마십시오.
좁은 부분에 색상 배경을 사용하지 않아도 이미 타이틀은 폰트 크기, 볼드 및 패딩으로 인해 눈에 잘 들어오게 되어 있습니다.
페이지의 특정 지점을 강조하고 싶다면, 타이틀 및 설명 텍스트를 포함하여 전체에 대해 넓은 색상 배경을 사용하십시오.
DON’T
색상 배경에 배치된 제목은 페이지의 연속성을 없애고 별도의 독립적인 요소처럼 보입니다.
DO
타이틀 문구, 관련된 텍스트 모두가 동일한 배경위에 있습니다. 이는 동일한 정보 덩어리 안에 속해 있음을 나타냅니다.
7. 좁은 공간 안에 너무 긴 텍스트가 들어가는 것
좁은 열에 많은 텍스트가 있으면 유저가 한 줄에서 다른 줄로 건너뛰면서 읽을 수 있기 때문에 가독성이 떨어집니다.
텍스트 줄을 줄이고, 문구 자체를 줄이는 것이 가장 좋습니다.
그렇게 하지 않으면 텍스트의 가독성이 매우 떨어집니다.
DON’T
중앙 정렬된 여러 줄은 읽기 어렵습니다.
DO
텍스트가 거의 없으므로 쉽게 읽을 수 있습니다.
8. 텍스트가 너무 많은 것
텍스트가 거의 없을 때, 중앙 정렬을 사용하기 좋습니다. 그렇지 않으면 사용자가 텍스트를 효율적으로 살펴보기 어렵습니다.
또한 글꼴 크기를 24픽셀 이상으로 늘리고, 많은 텍스트를 포함해야 하는 경우 텍스트를 접을 수 있는 UX를 가진 정보 블록을 사용하는 것이 좋습니다.
DON’T
길고, 중앙 정렬된 여러 줄은 읽기 어렵습니다.
DO
헤드라인 아래의 짧은 텍스트는 잘 보입니다.
9. 텍스트를 이미지의 의미 있는 부분 위에 중첩하는 것
이미지의 의미 있는 부분을 텍스트로 덮지 마십시오.
이렇게 하면 이미지를 왜곡시키고 텍스트를 읽을 수 없게 만듭니다.
텍스트를 가운데에 정렬하거나, 왼쪽으로 정렬하거나, 세로로 배치하는 것들을 시도해 보며 이미지의 의미 있는 부분을 남겨놔야 합니다.
DON’T
이 텍스트는 여자의 표정이 가진 의미를 방해하고, 사진의 디테일들로 인해 텍스트를 읽기가 어렵습니다.
DO
텍스트가 읽기 쉽고 이미지와 좋은 구도를 형성합니다.
10. 시각적 계층 구조를 잘못 사용하는 경우
정보들의 계층이 명확하게 드러나도록 하려면 표지의 제목이 나머지 제목보다 크거나 적어도 같은 크기 여야 합니다.
DON’T
메인타이틀 문구가 다음 타이틀보다 작으면 텍스트 간의 불균형이 일어나 혼란스럽습니다.
두 번째 제목이 더 눈에 띄어 보이기 때문입니다.
DO
메인타이틀 문구가 다음 블록의 타이틀보다 크므로 전체 페이지가 일관성 있게 보입니다.
동일한 원칙이 정보 단위 블록 안에서의 시각적 계층에 적용됩니다.
메인타이틀 문구는 페이지에서 가장 눈에 띄는 디자인 요소 여야하고 그 아래 작고 덜 눈에 띄는 하위 타이틀이 있어야 합니다.
다음으로, 소 타이틀은 메인타이틀보다 현저하게 작아야 하며 같은 무게를 가져야 하고, 소 타이틀에 대한 설명에 가장 작은 글꼴을 사용해야 합니다.
이것은 사이트 방문자가 가장 중요하거나 덜 중요한 정보를 구별하는 데 도움이 됩니다
DON’T
타이틀이 소 타이틀보다 작으며 보조인 것처럼 보이지만 이 문맥에서 제일 중요합니다.
DO
타이틀은 페이지에서 가장 눈에 띄는 요소이며, 소 타이틀은 더 작은 유형으로 만들어졌지만 명확하게 눈에 들어오고 정보 사이의 위계질서도 알 수 있습니다.
11. 연결된 정보가 분할되어 보이는 것
텍스트 뒤에 전체 화면 이미지를 사용하면 텍스트와 분리된 별도의 블록으로 보입니다.
전체 화면 이미지나 갤러리 주위에 패딩을 추가하면 텍스트와 공유된 배경 덕분에 텍스트와 이미지가 전체적으로 이어져 보입니다.
DON’T
전체 화면 이미지는 위의 헤드 라인과 떨어져 있고 독립된 블록처럼 보입니다.
DO
이미지가 바로 위에 있는 표제와 동일한 배경을 공유하므로 정보가 하나로 연결되어 보입니다.
12. 제목이 너무 크고 긴 것
매우 큰 글꼴은 짧은 문장에 적합합니다.
제목이 길다면 작은 크기의 글꼴을 사용하는 것이 텍스트를 쉽게 읽을 수 있고 많은 여백을 남길 수 있습니다.
DON’T
너무 큰 헤드 라인은 전체 공간을 차지하고 가독성이 떨어집니다.
DO
이 페이지는 균형감 있게 잘 구성되어 있으며 텍스트를 읽기 쉽습니다.
13. 버튼 테두리 스타일의 잘못된 사용
버튼이 투명할 때 테두리가 필요합니다.
색상이 있는 버튼에 테두리를 추가하는 것은 의미가 없으며, 페이지를 오버 로드하여 읽기 어렵게 만드는 의미 없는 디자인입니다.
14. 너무 많은 색상 사용
한 페이지에 너무 많은 색상을 사용하는 것은 혼란스럽습니다.
하나 또는 두 가지 색상으로만 눈에 띄게 디자인하는 것이 중요합니다.
DON’T
페이지에 너무 많은 밝은 색상이 있어서 혼란스럽습니다.
DO
하나의 색상으로만 강조된 요소를 통해 다양성을 만들어 내고 시각적으로 혼란스럽게 하지 않습니다.
15. 오버로드 된 메뉴
사람들이 웹 사이트에서 필요한 것을 신속하고 쉽게 찾을 수 있도록 메뉴를 사용하십시오.
과도한 메뉴들이나 정보들로 사람들을 과부하시키면 안 됩니다.
5-7 개의 메뉴만 있으면 충분합니다.
DON’T
메뉴가 너무 많아서 사이트 탐색이 더욱 어려워집니다.
DO
간단한 메뉴로 필요한 것을 쉽게 찾을 수 있습니다.
텍스트가 많은 기사 디자인의 실수
1. 깜지형 텍스트의 나열
깜지형 텍스트의 나열은 읽은 내용을 이해하기 어렵게 만듭니다.
문장을 나누거나, 핵심 문구나 이미지를 넣어 텍스트를 단락으로 나누는 방식을 고려해봐야 합니다.
DON’T
깜지형 텍스트의 나열은 읽기 어렵습니다.
DO
따옴표나 이미지와 같은 요소를 넣으면 텍스트 읽기가 쉬워집니다.
2. 헤드 라인이 이전 단락과 다음 단락 사이, 동일한 거리에 배치되는 것
헤드라인은 뒤에 나오는 단락에 속하기 때문에 헤드라인과 윗 단락 사이 거리는 그 아래 공간보다 2 ~ 3 배 커야 합니다.
이렇게 하면 헤드라인은 시각적으로 아랫 단락을 수식합니다.
DON’T
헤드라인이 위와 아래의 단락 사이에 동일한 거리에 위치하고 있기 때문에 어느 단락과 관련되어 있는지 명확하지 않습니다.
DO
제목 밑에 패딩을 사용했기 때문에 이 제목이 뒤 따르는 텍스트에 속한다는 것이 명확하게 드러납니다.
3. 논리적인 순서가 없습니다
타이포그래피에서는 대조를 사용하여 여러 수준의 텍스트를 시각적으로 구분하고 엄격한 계층을 설정합니다. 메인타이틀은 가장 두드러져야 하며, 서브 타이틀은 메인타이틀에 비해 작지만 분명하게 보여야 합니다.
DON’T
메인타이틀과 서브 타이틀이 거의 동일한 크기이며, 표제와 하위 표제 사이에는 명확한 계층 구조가 없습니다.
DO
메인타이틀은 서브 타이틀보다 더 중요합니다.
4. 블록 위-아래의 다른 패딩
블록이 동일한 가중치를 지닐 경우 동일한 모양과 느낌을 가져야 하며 서로 동일한 거리에 있어야 합니다.
DON’T
상단 내용과 작상자의 이미지 사이 공간이 너무 좁으면 작성자의 이미지가 뒤 따르는 텍스트가 아니라 상단 내용과 더 관련이 있는 것처럼 보입니다.
DO
동일한 크기의 패딩으로 이미지 위아래 블록이 동일하게 보입니다.
5. 캡션이 이미지에 너무 가깝게 배치될 경우
이미지과 캡션은 두 개의 분리된 요소이며 캡션은 이미지를 방해해서는 안됩니다.
DON’T
캡션이 이미지에 달라붙어있어 이미지와 설명, 둘 중 어느 것과도 잘 어울리지 않습니다.
DO
이미지와 캡션 사이에 많은 공백이 있지만 캡션이 이미지를 수식하고 있다는 것이 분명해 보입니다.
6. 부제목과 텍스트 사이에 공간이 너무 적습니다
'부제목과 다음 단락 사이의 간격 < 기사의 단락 사이 간격'일 경우 기사의 연결이 끊어집니다.
DON’T
부제목과 단락 사이의 간격 < 단락끼리의 간격
DO
부제목과 단락 사이의 간격 > 단락끼리의 간격
7. 스탠딩 아웃 요소가 본문에 너무 가깝게 배치됩니다.
핵심 어구 또는 따옴표와 같은 강조 표현으로 사용되는 요소는 독립적인 정보 단위로 보이는 게 좋습니다.
스탠딩 아웃 요소를 눈에 띄게 만들기 위해서 본문과 75-120px로 떨어지게 설정하십시오.
DON’T
본문과 스탠딩 아웃 요소 사이에 너무 적은 공간이 있습니다.
DO
커다란 패딩 덕분에 스탠딩 아웃 요소가 눈에 띄게 보입니다.
8. 낮은 대비 요소
특정 문구를 강조하고 싶다면 텍스트보다 큰 핵심 문구를 10-15 픽셀보다 크게 굵은 글씨로 만드십시오.
DON’T
핵심 문구가 나머지 텍스트들과 섞여서 지저분해 보입니다.
DO
큰 글꼴과 텍스트 주변의 충분한 여백 덕분에 특정 문구가 잘 보입니다.
9. 좁은 텍스트 블록의 색 배경
작성자 정보와 같이 페이지의 작은 부분을 강조하고 싶다면 이 부분 주위에 충분한 여백을 설정하면 됩니다.
굳이 이 섹션을 컬러 배경 위에 놓지 않아도 잘 보입니다.
DON’T
작은 부분을 강조하고 싶을 때, 넓은 배경 색상을 사용하지 마십시오.
더 큰 글꼴과 패딩을 사용하면 충분히 잘 보이게 만들 수 있습니다.
10. 두 개의 전체 화면 이미지 사이에 빈 공간이 있습니다
시퀀스에서 여러 개의 전체 화면 이미지를 사용하는 경우 시퀀스 사이에 공백을 두지 마십시오.
사진끼리 경계선을 이룰 수 있도록 아무것도 추가하지 않아도 됩니다.
DON’T
전체 화면 이미지 사이의 빈 공간은 의미가 없으며 이미지가 넓어 보이지 않습니다.
DO
이 예제에서는 이미지 사이에 조화로운 흐름이 있습니다.
11. 디자인 악센트가 너무 많습니다
디자인 악센트(예 : 굵은 글씨체)는 다른 디자인 요소들이 거의 없을 때 잘 작동합니다.
DON’T
많은 단어가 굵게 표시되어 있어 전체 텍스트 뷰가 손상된 것 같습니다.
DO
몇 마디로 된 단어는 주의를 헤딩에 고정시키고 나머지 텍스트에 시각적으로 간섭하지 않습니다.
12. 너무 많은 타이포그래피 스타일 디자인이 가독성을 방해해서는 안됩니다
타이포그래피 스타일이 적을수록 더 중요한 요소가 보입니다.
제목과 부제목을 강조하고 핵심 문구에 대비를 사용하는 것으로 충분합니다.
DON’T
이 텍스트에는 타이포그래피 스타일이 너무 많아서 산만해 보입니다.
DO
타이포그래피 스타일이 거의 없고 강조가 명확하며 텍스트끼리 계층 구조가 잘 보입니다.
13. 긴 기사의 텍스트 가운데 정렬
가운데 정렬은 일반적으로 헤드라인에 적용되며 텍스트의 나머지 부분과 구별하기 위해 따옴표 등과 함께 사용됩니다.
가운데 정렬된 긴 텍스트는 읽기가 어렵습니다.
DON’T
가운데 정렬 텍스트는 지저분해 보일뿐만 아니라 읽기가 어렵습니다.
DO
왼쪽에 정렬된 텍스트는 읽기 쉽습니다.
14. 헤드 라인이 이미지와 너무 가깝게 보입니다
헤드라인은 개별적인 디자인 요소입니다.
뒤에 오는 이미지에 너무 가깝게 위치해서는 안됩니다.
60px 이상의 여백을 설정하고 하위 설명을 추가하면 원하는 부분을 강조할 수 있습니다.
DON’T
헤드 라인이 이미지에 너무 가깝게 위치해서 사이트에 숨 쉴 수 있는 공간이 없습니다.
DO
여기에서 헤드라인은 부제목에 의해 이미지와 분리되며, 이미지뿐 아니라 전체 섹션과 관련되어 있습니다.
15. 필요 없는 경우에서 이탤릭체 사용
이탤릭체는 텍스트 내의 단어나 짧은 구를 강조 표시하는 데 사용됩니다.
볼드처럼 즉시 눈에 띄지는 않지만 필요한 만큼은 강조됩니다.
본문, 헤드 라인 그리고 모든 것을 이탤릭체로 쓰지 마십시오.
그리고 sans-serif 글꼴이 텍스트에 사용되면 이탤릭체는 사용하지 마십시오.
DON’T
글꼴 크기와 패딩 덕분에 이미 문구가 눈에 띄기 때문에 이탤릭체는 실제로 필요하지 않습니다.
DO
이탤릭체가 올바른 위치에서 적절한 양의 강조를 줍니다.
16. 블록이 페이지 중앙이 아닌 다른 위치에서 나타납니다
페이지를 편집 (글꼴 크기, 정렬 또는 들여 쓰기 변경) 한 후 잠시 휴식을 취하고 텍스트를 검수할 때, 이 오류를 쉽게 발견할 수 있습니다.
DON’T
이 예에서는 헤드 라인이 왼쪽으로 이동하고 텍스트는 오른쪽으로 이동합니다.
DO
모든 텍스트 요소가 서로 조화를 이루고 있습니다.
