본문 바로가기
기록장

UXUI 아티클 정리 : 시각적으로 균형있는 디자인 하는 방법

by SIENNA1003 2024. 5. 2.

요약 

 

  • 아이콘을 만들 때 사각형에 가까운 도형이 더 커 보인다.

따라서, 사각형이 가까운 아이콘은 조금 줄이고 그렇지 않은 이모지는 조금 늘리는 것을 시각적으로 균형 잡혀 보인다.

이를 체크할 수 있는 방법으로는 각 모형을 블러 처리하여 무게감을 보는 것이다.

 

  • 텍스트 박스 옆에 둥근 아이콘이 있다면 크키를 키우는 것이 균형 좋아 보일 것이다.

 

  • 아이콘을 만들 때는 시각적 균형을 위해 여백을 조금 남기는 것이 좋다.

뾰족한 가장자리는 평평한 가장자리에 비해 짧아 보일 수 있으므로 조금 더 길게 만든다.

 

  • 텍스트의 배경이 흐리다면 텍스트 흐름을 읽는데 방해되지 않지만 텍스트의 배경이 진하다면 텍스트 흐름을 읽는데 방해되므로 텍스트의 배경을 다른 텍스트에 맞춰 정렬해 준다.

 

  • 삼각형의 아이콘 위치를 잡을 때는 사각형 프레임보다는 원형 프레임에 둘러싸인 형태에서 위치를 잡는 것이 좋다.

 

  • 인간은 시각적 인지를 통해 기하학적인 원보다 라메 곡선이 더 자연스러워 보인다.

왜냐하면 기하학적으로 둥근 모서리는 직선에서 곡선으로 바뀌는 점이 부자연스러워 보이기 때문이다.

라메 곡선: 부드럽고 시각적으로 완벽한 모양 

 

cap height : 대문자 높이에 정렬한 글자

x height : 소문자 높이에 정렬한 글자

 

 

느낀점

이번 아티클을 읽으면서 시각적으로만 인지하고 있었던 영역을 이론적으로 객관적으로 볼 수 있었다는 점에서 흥미로웠다. 대학교 때 ppt를 만들다 보면 분명 아이콘의 크기와 위치를 같게 설정했는데도 불구하고 시각적으로 불편함을 느낀 적이 더러 있었다. 그런데 이 아티클을 읽고 아이콘의 무게감, 균형에 따라 크기와 위치를 조정해 줘야 된다는 사실을 알게 되어 인사이트를 찾고 시각적인 감각을 기르는 것도 중요하지만 이론도 함께 공부하는 것도 중요하다 느끼게 되었다.

 

 

 

⬇️아티클 출처

https://brunch.co.kr/@thinkaboutlove/227

 

시각적으로 균형있는 디자인하는 방법(시각 보정 팁)

목차 1.측정한 크기와 눈에 보이는 크기 2.다양한 도형의 배열(정렬) 3.시각적으로 올바른 모서리 라운딩 4.보너스 + 추천 책 1920년대 시각적 인식에 대한 게슈탈트 이론이 발표되었다. 이 이론은

brunch.co.kr