디자인 기초, 디자인 원리

눈이 편해지는 4가지 원리 보기 편하고, 이해하기 쉽게 만드는 것입니다.
(균형, 비례, 강조, 리듬)

우리가 그림을 그릴 때, 왜 어떤 그림은 멋져 보이고
어떤 그림은 어지러워 보이는지 알려줄게요.

1. 균형 (Balance) -한쪽으로 기울어지지 않게 맞추는 것
균형은 디자인에서 시각적으로 안정감을 느끼게 하는 요소 배치 방식을 의미합니다.
 
"시소"
그림에도 '무게'가 있다는 사실, 알고 있나요?
한쪽으로 휙 쓰러지지 않게 중심을 잡는 거예요.

글씨나 그림이 한쪽에만 몰려 있으면 보는 사람이 불편합니다.
그래서 왼쪽에 큰 그림이 있으면 오른쪽에는 글씨나 다른 요소로 맞춰줍니다.
 
균형이 잘 잡히 디자인은 혼란스럽지 않고 사용자가 시각적으로 안정감을 느끼며 콘텐츠를 쉽게 이해할 수 있습니다.
웹사이트의 양쪽이 동일한 양의 정보로 구성되어 있거나 한쪽이 크고 무거운 요소라면 반대쪽에는 이를 보완할 가벼운 요소가 배치됩니다.

똑같은 시소(대칭): 왼쪽이랑 오른쪽에 무게가 똑같은 쌍둥이 인형을 놓는 거예요.
(예: 나비 날개 )

(비대칭): 똑같이 생기진 않았지만, 무게 중심이 딱 맞는 거요. 창의적이고 동적인 느낌을 제공합니다.
왼쪽엔 커다란 수박 한 통 들고, 오른쪽엔 작은 참외 네다섯 개 들었다고 생각해 보세요. 양쪽 모양은 다르지만, 무게는 비슷해서 휘청거리지 않고 똑바로 걸어가실 수 있죠? 그게 바로 비대칭이에요.

(방사형): 해님처럼 가운데서 뻗어 나가는 거예요. 시계나 꽃잎처럼요!
방사형 균형 (Radial Balance)
정의: 중심점(Center point)에서 모든 요소가 밖으로 뻗어 나가거나 중심을 향해 모이는 배치예요.
특징: 시선을 가운데로 집중시키는 힘이 가장 강력해요.
느낌: 장엄하고, 화려하고, 완벽하게 짜여진 느낌을 줍니다.
 
 
균형이 깨진 디자인은 시각적으로 불안정하거나 산만하게 보일 수 있습니다.
적절한 균형은 디자인의 목적과 메시지를 더욱 명확하게 전달합니다.
 
2. 비례 (Proportion) - 크기를 알맞게 나누는 것
요소간의 크기나 양의 관계를 의미, 디자인에서 요소들이 어떻게 서로 관련되어 있는지를 보여줍니다.
 
비례는 크기 차이를 통해 중요한 정보를 강조하거나, 작은 요소들을 조화롭게 배치해 디자인 흐름 형성.
 
예를 들어> 웹페이지에서 제목은 가장 크고 본문은 작으며 부제목은 중간 크기 배치.
제목은 크게 설명 글은 작게 중요한 글은 중간 크기
이렇게 해야 어디가 중요한지 바로 알 수 있습니다.

만약 모든 글씨가 다 똑같이 크다면 어디를 먼저 봐야 할지 모릅니다.
비례를 잘 활용하면 사용자의 시선이 자연스럽게 중요한 정보로 이동하도록 유도할 수 있습니다.
비례까 어긋나면 디자인이 어수선하거나 비전문적으로 보일 수 있습니다.
 
황금비율 
약 1:1 . 618 비율로 가장 자연스럽고 아름답게 보이는 비례로 알려져 있습니다.
건축물 파르테논신전, 로고 디자인 애플, 트위터
현대 디자인에서는 완벽한 황금비율을 따르기보다는 이를 응용하여 적절한 비례를 유지합니다.

3. 강조 (Emphasis) - “여기 보세요!” 하고 알려주는 것
강조는 디자인에서 특정 요소를 눈에 띄게 만들어 사용자의 주목을 끄는 기법
 
모든 요소가 똑같이 중요하다면 사용자에게 혼란을 줄 수 있으므로 
가장 중요한 정보를 강조하는 것이 필요합니다.
버튼 제목 프로모션 배너등이 강조의 대표적인 대상이 될 수 있습니다.
 
강조방법
크기차이: 중요한 요소를 더 크게 만들어 주목도를 높입니다.
색상 대비: 배경색과 대조되는 색상을 사용하여 시선을 끌도록 합니다.

"나만 봐! "
많은 장난감 중에서 제일 소중한 것 하나를 돋보이게 하는 거예요.
 
색상대비: 배경색과 대조되는 색상을 사용하여 시선을 끌도록 합니다.
빨간 공 하나!: 하얀 공들 사이에 빨간 공 하나만 있으면 눈에 팍 띄죠?
 
위치: 화면의 중심이나 상단에 배치하여 강조.
독특한 형태: 다른 요소와 구분되는 독특한 디자인을 사용
예>  아이콘이나 버튼 모양의 차별화
 
왕 버튼: 중요한 버튼은 크게 만들거나 예쁜 색을 칠해서 "여기를 눌러줘!"라고 말하는 거예요.

예를 들어
세일 50%는 빨간색으로 크게 쓰죠?
버튼을 밝은 색으로 만들죠? 그게 강조입니다.
모든 걸 다 강조하면 아무것도 안 보입니다.
그래서 가장 중요한 것만 눈에 띄게 해야 합니다.
 
목적: 사용자가 가장 먼저 봐야 할 정보를 명확히 전달합니다.
강조가 과도하면 혼란을 줄 수 있으므로 중요한 정보에만 적용해야 합니다.

4. 리듬 (Rhythm)
- 정의: 리듬은 디자인에서 반복적이거나 패턴화된 요소를 통해 통일성과 흐름을 제공하는 원리입니다.
- 리듬은 사용자의 시선이 디자인을 자연스럽게 따라가도록 유도하며, 전체적으로 조화로운 느낌을 줍니다.


* 반복적 리듬: 동일한 요소가  일정한 간격으로 반복될 때 발생합니다.
텍스트 목록, 이미지 갤러리
똑같은 사탕을 나란히 놓으면 기차가 가는 것 같아요.

* 점진적 리듬 점점 크게: 요소들이 크기 색상 간격등의 변화를 통해 점진적으로 변화합니다.
작은 개미부터 커다란 공룡까지 순서대로 놓으면 노래 소리가 점점 커지는 것 같죠?
폰트 크기가 점점 커지거나 작은 아이콘이 큰 아이콘으로 변화.
 
*순환적리듬, 흐름: 요소들이 원형 패턴으로 배치되는 리듬입니다.
배너 광고의 순환이미지, 리본이 춤추는 것처럼 그리면 눈이 즐겁게 움직여요!
 
리듬이 있는 디자인은 사용자에게 편안함과 친숙함을 느끼게 합니다.
과도한 반복은 지루함을 줄 수 있으므로 적절한 변화를 섞어야 합니다.
 

디자인 기본 원리인 균형 비례 강조 리듬은 각각 독립적으로 적용될 수도 있지만, 대부분 디자인에서 이원리들이 조화롭게 결합됩니다. 이 원리를 깊이 이해하고 활용하면 단순히 보기 좋은 디자인을 넘어 사용자 친화적이고 목적에 맞는 디자인을 제작할 수 있습니다.