Note
이 문서는 디자인에서 시각적 밸런스를 이해하고 다양한 상황에 적용하는 방법을 설명합니다.
다음은 시각적 밸런스가 좋지 않은 UI/UX 예시입니다. 이 Draft를 다운로드 후 아래의 예시를 참고하여 직접 UI/UX를 수정해보세요.
- 상황: 블로그 아티클 페이지
- 문제: 본문 텍스트 블록이 한쪽으로 크게 치우쳐져 있고, 반대편에는 어색하고 넓은 공백이 있습니다. 그 공백의 구석에는 작은 이미지가 하나 덩그러니 놓여 있어 전체적으로 불안정한 느낌을 줍니다.
- 상황: 서비스의 핵심 기능을 실행하는 CTA(Call-to-Action) 버튼
- 문제: 버튼의 색상이 배경색과 너무 비슷해서 눈에 잘 띄지 않고 중요도가 낮아 보입니다. 주변 텍스트 또한 배경과 대비가 낮은 색상으로 되어 있어 가독성이 떨어집니다.
- 상황: 온라인 쇼핑몰의 상품 목록 페이지
- 문제: 모든 상품의 이미지, 제목, 가격 텍스트 크기가 동일하여 어떤 상품이 추천 상품이거나 할인 중인지 전혀 알 수 없습니다. '바로 구매' 버튼은 상품 이미지에 비해 너무 작아서 눈에 띄지 않습니다.
- 상황: 사용자 프로필 화면
- 문제: 프로필 사진, 이름, 자기소개, 통계 등 모든 요소가 화면 상단에 빽빽하게 몰려 있어 하단에 넓고 사용되지 않는 빈 공간이 많이 남아 답답하고 미완성된 느낌을 줍니다.
- 상황: 포트폴리오 웹사이트의 배경
- 문제: 배경에 매우 복잡하고 시선을 분산시키는 패턴이 사용되어, 그 위에 있는 텍스트와 UI 요소들을 읽고 집중하기 어렵게 만듭니다.
- 상황: 회원가입 폼
- 문제: 레이블(항목 이름)과 입력 필드가 일관성 없이 정렬되어 있습니다. 어떤 것은 왼쪽 정렬, 어떤 것은 가운데 정렬로 되어 있어 혼란스럽고 비전문적인 인상을 줍니다.