UX 비주얼 핵심 기초원리 [2/3]
두 번째 에피소드
UX 비주얼 체계의 기초 원리 13개로 이루어진 3개의 에피소드 중 오늘은 두 번째 편이다.
원래는 하나의 글에 모든 원리를 적을 계획이었지만, 13개 중 4개만 적었는데도 불구하고 글의 길이가 길어져 가독성과 독자의 집중력을 고려해서 3개로 나누기로 결정했다.
혹시나 당신이 첫 번째 편을 보지 않은 사람이라면?
STOP!
아래의 링크를 클릭해서 1편을 먼저 읽는 것을 추천한다. (https://brunch.co.kr/@jgo1504/88)
본론으로 바로 들어가겠다. 1편에서 4번까지 했기 때문에 5번부터 시작한다는 점 유의하자.
5. 글씨체를 활용하라
글씨체를 올바르게 조합하는 것은 웹사이트에 개성을 줄 수 있고 특정 영역에 관심을 기울이게 할 수 있다. 다른 크기와 굵기의 글씨체로 중요한 텍스트를 더 두드러지게 할 수 있다.
대부분의 웹사이트는 다른 크기의 제목을 사용하여 중요도를 부여하거나 관련 콘텐츠를 상기시키도록 디자인된다. 크기 1부터 2,3으로 갈수록 크기를 작게 하여 중요도를 낮춘다. 이는 또한 독자가 관심 있는 영역에 정확히 도달하기 위해 텍스트의 페이지를 스캔하는 것을 돕는다.
아래의 웹사이트는 중요성에 따라 글씨 크기를 조절한 대표적인 예이다.
배너에 가장 큰 글씨를 위치시켜 가장 중요한 영역이라는 것을 느끼도록 한다. 배너 밑은 더 작은 크기의 글씨로 이루어진 섹션으로, 여러 기능을 소개한다.
폰트 사이즈 외에 폰트 굴기를 이용해 똑같은 크기의 폰트를 더 무겁거나 가볍게 표현하는 것이 가능하다. 가볍고 큰 글씨와 무겁고 작은 글씨는 비슷한 중요도로 인식되어 균형을 맞추기에 탁월한 방법이다.
아래의 사진을 보면 가장 크다고 해서 중요하다고 느껴지지 않는다. 오히려 제일 작은 폰트가 관심을 끈다. 이는 아래의 폰트가 더 무겁고 대조적으로 보이기 때문이다.
6. 간격을 이용하여 사용자를 움직여라
텅 비어있는 캔버스에 처음 디자인할 때, 당신은 가능한 많은 요소를 넣기 위한 간격을 생각할지도 모른다. 하지만 당신이 사용하는 공간만큼 비어있는 공간도 중요하다.
공백은 디자인에 있어서 요소 사이의 음의 간격을 설명하는 데 사용되는 용어다. 더 큰 중요도를 부여하기 위해서 요소들을 분리하거나 그룹화할 수 있다.
아래의 예시를 보면, 왼쪽의 요소들과 그 주변의 모든 다른 요소들을 볼 수 있다. 공백을 통해 텍스트를 그룹화하면서 행동을 유도한다. 또한 전체적인 디자인에 공간적 균형도 제공한다.
7. 텍스쳐(질감)와 톤으로 주의를 끌어라
몇 요소들이 더 작거나 낮더라도, 텍스쳐와 톤의 사용으로 유저의 관심을 끌 수 있다.
아래의 사진을 보면, 첫 번째 예시에서 큰 글씨가 눈에 들어온다. 하지만 두 번째에서는 크기가 같음에도 불구하고 작은 글씨가 눈에 들어온다. 톤과 텍스트의 배경을 변화시켜 크기의 중요성을 뛰어넘었다. 마지막 예시에서 배경으로 인해 위의 글씨를 인지하기 위해서는 더 강한 주의가 필요하다. 따라서 밑의 글씨가 눈에 바로 들어오는 것이다.
8. 비주얼 체계의 균형과 대칭
대칭으로 이루어진 요소들은 조직성, 심플함 그리고 균형을 제공한다.
아래의 사진을 보면 Avoic는 주요 강점에 포커스를 주기 위해서 대칭을 이용한다. 초점은 중앙에 있다. 하지만 더 많은 정보를 찾기 위해서 주변을 둘러보기에 매우 편한 구조다.
균형이 맞고 대칭인 구조만 사용해야 되는가? 전혀 아니다. 역으로 생각해볼 수 있다. 중요성에 따른 차별적 강조를 하기 위해서 균형을 무너뜨리고 비대칭 구조를 사용할 수 있다. 또한 불균형과 비대칭은 디자인을 더욱 유동적으로 만든다.
아래의 프로덕트들은 임의로 페이지에 위치되어 비대칭이지만 전체의 공간을 봤을 때, 여전히 균형이 맞다. 그럼에도 불구하고 당신의 주의를 끄는 것은 흩어진 프로덕트의 배열이다.
과유불급이라 하였다.
2편은 핵심적인 내용만 담아 구성했다.
아직 5개의 원리가 남았지만, 이는 세 번째 편에서 다루도록 하겠다.
피드백은 언제나 환영입니다. 편하게 댓글 남겨주세요.
그럼 3편에서 만나요~ 아디오스
p.s. 끝까지 글을 읽은 당신을 칭찬합니다. 우리는 의미 없는 스크롤링이 아닌 공부를 하고 자기 계발을 하고 있습니다. 적어도 최소한의 노력과 관심은 기울이고 있다는 것이지요.
당신은 오늘보다 더 나은 내일을 살 것입니다.
