디자인 개론

02 디자인의 원칙(좋은 디자인을 만들기 위한 6가지 원칙)

2-1: 균형 Balance

균형: 영역을 구성하는 디자인 요소의 사각적 무게를 어느 한 쪽에 치우침 없이 안정적인 구도를 가지도록 배치하는 원리

대칭 균형-안정감 / 비대칭 균형-역동감

균형[대칭]

1-좌우대칭으로 요소가 배치되어 있음. 그럼 자연스럽게 시선이 중심에 있는 타이틀로 쏠리게 되어 있음.
2-상하대칭으로 공간을 채우면서도 흑백대비라는 강렬한 색의 대비감과 서로 얽히는 강한 붓터치가 사선으로 얽혀져 있어서 역동감을 주고 있음. 대칭 구도이면서 역동감을 함께 줌.
3-좌우로 면을 갈라서 한쪽은 그래픽, 한쪽은 사진을 사용해서 대비감을 줌. 색도 서로 비교가 되고, 비교, 반전 시각적 언어를 구사할 수 있는 시각적 디자인이라고 볼 수 있음.

균형[비대칭]

1-책을 펼친 모습을 반원의 측면으로 보여줌, 단순히 바닥에 놓지 않고 90도로 꺾어서 한쪽에 쏠리게 배치 오른쪽은 여백으로 하단에 중요한 텍스트를 배치해 시선이 집중되도록 만듦, 펼친 책이 세워져 있어 긴장감을 주고 시선을 끄는 디자인.
2-단순하지만 강렬해 보임. 대각선과 수직선을 사용해서 면 분할을 했는데 비대칭적으로 위아래의 면적이 다르다보니 역동감이 느껴짐. 시선이 모이는 교차점에는 여백이 많아서 오히려 전체적인 시각적 임펙트가 강하게 느껴지며 중심으로 시선이 쏠리게끔 구성. 아래 타이틀, 위에 날짜 정보가 각각 보이고, 시선이 자연스럽게 중심 하단으로 모이도록 설계, 이런 비대칭이 주는 긴장감이 시각적 집중도를 상당히 높임.
3-노란색 큰 원이 하단에 쏠려 있어 다른 포스터보다 안정적으로 느껴짐. 그 이유는 검정의 낮은 명도와 사각형의 면적이 균형을 맞춰주고 있기 때문, 사선의 비대칭 배치가 운동감을 보여주면서도 검정 배경으로 무게감을 잡아주어 역동적이면서 안정감을 느끼게 함.

*실습: 균형을 찾아라
디자인 리서치
다양한 디자인 결과물을 찾아보고 그 안에서 균형의 원리를 발견해보세요.
균형의 원리가 적용된 디자인 예시를 대칭과 비대칭 2가지로 찾아보세요

2-2: 대비 Contrast

대비: 서로 상반되는 요소를 함께 배치하여 구성하는 요소들의 대립으로 흥미, 긴장감, 강조 등을 표현하는 원리
크기 대비, 색상 대비, 형태 대비

대비[크기]

1-4개의 사각형이 입체적으로 튀어나와 보이도록 디자인. 각 사각형이 크기 차이가 있어서 크고 작음의 다이나믹도 있고, 앞으로 튀어나온 것 같은 입체감으로 역동적인 에너지 표현함. 서로 반대되는 색상인 빨간색과 파란색을 사용해 강렬한 느낌을 줌, 빨파 조합은 잘못 쓰면 촌스러워 보이는데 강렬하면서 역동적인 이미지를 잘 표현한 포스터.
2-큰 포대자루가 아래 작은 주머니를 짓누르는 듯한 형상. 이 크기 차이가 형태적으로 무게감까지 표현함. 색상환의 반대색, 보색대비를 활용해 시각적 흥미를 줌, 아래의 Change라는 글씨는 그린의 강렬함이 변화의 흐름을 몰고와서 보라색을 짓누르면서 밀어내는 것처럼 느껴짐.
*디자인을 보면서 예쁜지 판단하는 것도 좋지만 무엇을 이야기하고 있는지 판단해보는 것도 중요한 공부가 됨
3-위 아래 큰 원 사이에 오렌지색 농구공이 위치하고 있음. 크기 차이가 주는 대비가 강렬하게 충돌하는 듯한 그래픽과 함께 운동성을 더 보여줌. 상단엔 무거운 녹색, 오렌지색, 하단에는 핑크색의 보색 대비 조합이 좀 더 역동적인 에너지를 표현하고 있음. 영문으로 Make Them sweat이라고 적혀있는데, ‘움직여’, ‘맞붙어’, ‘땀 좀 내보자’라고 외치는 것 같음. 이 타이포가 작게 쓰여 있지만 이미 그래픽에서 시각적으로 말하고 있음.(=비주얼랭귀지)

대비 [색상]

1-빨간색과 파란색의 대비, 위아래의 면을 분할하고 있음. 서로 다른 신체 부위들을 연결해서 보여줌으로써 그로테스크하면서 강렬한 이미지를 표현하고 있음.
2-영화 포스터, 위아래 면분할, 검정색과 노란색 대비는 명시성이 아주 높은 조합. 교통표지나 사고를 예방하는 목적으로 많이 사용됨. 위에는 택시, 아래는 권총이 배치되어 있어서 택시와 범죄의 조합이라는 영화의 내용을 그래픽으로 암시.
3-이 포스터 역시 위 아래 분할로, 깔끔한 분할이 아닌, 종이를 찢은 효과로 숨겨진 것을 찢어서 드러낸다는 의미가 느껴짐. 위엔 강렬한 레드, 아래는 흑백의 남자 얼굴이 반쯤 보이는 사진. 위에는 그래픽, 아래는 사진으로 속성이 다른 요소를 배치해서 색상 대비와 더불어 질감의 대비까지 구현.

대비 [형태]

크기, 색상 대비보다 명확히 구분하기 어려울 수 있음. 그러나 형태의 차이가 큰 요소들을 크고 강렬하게 배치했을 때 시각적 다이나믹이 발생함.
1-검정색 삼각형 꼭짓점에 별표 형태를 올려 시선을 별표에 집중시키는 강렬한 대비효과를 느낄 수 있음
2-배경이 흰색, 녹색, 파란색으로 면분할이 수평으로 되어 있어 수평선을 베이스에 두고 큰 원 안에서 노란색 원이 포물선을 그리며 튀어나오고 있음. 이미 형태 배치에서 역동성을 표현하고 있음. 수평선을 가로지르는 방향으로 원이 튀어나오는 배치가 바로 형태 대비를 보여주고 있는 것.
3-원형, 사각형, 삼각형의 기초 도형을 가지고 디자인한 바우하우스 포스터. 이 기초 도형이 서로 다른 원색으로 색상 대비도 이루고 있고, 평면과 입체라는 형태적 대비도 있음. 튀어나오고 들어간 역동적인 입체감이 느껴짐. 서로 다른 형태들이 함께 위치해서 생겨나는 시각적 재미를 보여줌.

*실습
대비를 찾아라
디자인 리서치
다양한 디자인 결과물을 찾아보고 그 안에서 대비의 원리를 발견해보세요.
대비의 원리가 적용된 디자인 예시를 크기, 색상, 형태 3가지로 찾아보세요.

2-3: 계층구조 Hierarchy

계층구조: 디자인 요소들의 중요도에 따라 계층 구조를 형성해, 사용자의 주의를 유도하고 정보 전달의 우선순위를 정하는 원리(=시각적 우선순위)

1-중앙의 타이틀과 함께 연결된 부제, 이미지가 먼저 시선을 끌게 됨. 이 부분이 면적으로도 가장 많이 차지하고 왼쪽에서부터 중앙으로 올라오는 이 부채들과 같이 연결되어서 올라오고 있음. 방향성을 가짐. 왼쪽의 날짜/시간/장소 정보 다음으로 작은 텍스트 덩어리들이 배치. 구조적으로 보면 어떤 순서로 이 포스터의 정보를 읽어야 할지 대략 시선의 동선이 파악됨.
부채, 타이틀 > 날짜/시간/장소 정보 > 오른쪽 작은 텍스트 박스
2-빨간색 배경에 검정 텍스트는 무게감이 있어 상단 검정 텍스트 덩어리들을 먼저 보게 됨. 하얀색 얇은 선으로 쓰인 글자이지만 도형처럼 표현하여 면적은 넓지만 얇고 밝은 색으로 가벼워보임. 겹쳐놨지만 무게감을 조절해 균형을 맞춤.
어두운 색>밝은 색/무거운 것>가벼운 것/한글타이틀>영문타이틀>영문으로된 주제
3-한글,영문 타이틀이 조각상처럼 조형적으로 배치. 나머지 텍스트들은 무게감을 확 줄여서 배치. 크기 대비로 계층구조를 이분법적으로 만든 케이스.

계층구조는 정보 전달의 효율성을 증대하고 메시지 전달 효과를 극대화할 수 있음.
정보가 잘 전달되면 자연스럽게 사용자 경험도 향상.
텍스트 기반의 계층구조를 잘 정하는 것을 다른 말로 타이포그래피라고 함.

*실습
계층구조를 찾아라
디자인 리서치
다양한 디자인 결과물을 찾아보고 그 안에서 계층구조의 원리를 발견해보세요.
계층구조의 원리가 명확하게 적용된 디자인 예시를 찾아보세요.
책, 책 표지, 책 내지, 리플렛, 브로슈어 등

2-4: 통일성 Unity

통일성: 일정한 양식과 질서를 통해 다양한 디자인 요소끼리 서로 조화를 이루면서 일관된 메시지를 표현하는 원리
반복-디자인 요소를 반복해서 사용하면서 통일성을 구현할 수 있음.
근접-근접한 요소들끼리 잘 그룹핑하는 것도 통일성을 주는 한 방식임.
정렬-디자인을 잘 정렬해줌으로써 통일성을 줌.
요소는 많지만 하나의 목소리를 내도록 하는 것이 목표, 질서를 만들어내서 시각적 안정감을 제공.

1-특정형태를 반복해서 사용. 같은 간격으로 형태를 반복하면서 수평적으로는 엇갈리게 배치를 해서 리듬감이 느껴짐. 가운데 하나를 다른 색으로 적용해 주목을 끔.
2-원형을 반복해 사용했지만 높이를 다르게 배치해 운동감이 느껴짐. 단순한 형태를 반복했는데 지루해 보이지 않도록 조화롭게 배치함.
3-모두 원형이지만 디테일은 서로다른 형태를 반복해서 사용. 검은색 원을 일렬로 중앙에 배치해 시선을 집중시키고 안정감도 부여. 초록색 큰 원은 비대칭으로 배치를 걸쳐서, 똑같은 형태를 반복해 발생하는 지루함을 피함. 초록색 원은 색은 밝고 가볍지만 크기가 커서 수직, 수평의 균형을 맞춤.

통일성은 반드시 형태적으로만 적용할 수 있는 것은 아님.

1-숫자로 보는 인포그래픽. 하나의 인포그래픽 안에 다양한 내용을 담았지만 일관성, 통일성 있게 표현. 그래픽으로 표현한다는 형식의 통일성이 있고, 숫자라는 형식을 통일성 있게 맞춤. 여러가지 정보가 있지만 하나의 목소리를 내고 있음.
2-시리즈 리플렛. 통일성은 하나가 아닌 시리즈로 제작할 때 중요하게 쓰임. 6개의 리플렛이 색, 그래픽 형태도 조금씩 다름. 통일성과 변화가 조화롭게 적용된 예시. 텍스트 배치, 그래픽 위치, 형식 모두 통일성을 갖춤.

*실습
통일성을 찾아라
디자인 리서치
다양한 디자인 결과물을 찾아보고 그 안에서 통일성의 원리를 발견해보세요.
통일성의 원리가 명확하게 적용된 디자인 예시를 찾아보세요
```.

2-5: 리듬 Rhythm

리듬: 여러가지 디자인 요소들을 규칙적으로 반복하거나, 점진적으로 변화시킴으로써 시각적 율동감을 느끼게 만드는 원리.
동일한 요소를 반복하거나, 점을 규칙적으로 배치해서 율동감을 형성, 동일한 요소의 크기 형태를 조금씩 변화시켜서 운동감을 만들어내는 방식. 규칙적 리듬은 전체적 통일성도 부여하고, 부분적으로는 조화도 이끌어냄. 리듬은 흐름, 율동감을 만들어낸다는 것이 통일성과는 다른 점.

흐름이 있는 선이 반복된다, 그 안에서 색의 변화도 있고, 조금씩 간격의 변화가 만들어내는 흐름이 운동감을 만들어냄.
2-점진적인 변화가 움직임을 만들어내서 방향성을 만들고 시선을 안쪽으로 깊이 끌고 들어감. 통일성과 동시에 입체감과 공간감을 만들어냄.
3-흐름이 느껴지는 선의 반복은 음악에서 소리를 표현할 때 많이 쓰는 방식. 리듬이 어떻게 표현되는지 바로 시각적으로 보임.
4-한곳에 모이는 점진적 면의 조각들이 차원을 형성함. 우리의 시선을 안쪽으로 깊이 끌고 들어감. 차원을 만들어 단계적으로 보이도록 함.
5-텍스트를 반복, 점진적 배치를 통해 파동과 함께 울리는 것처럼 만들어냄.
6-점진적 구성이 공간감을 극적으로 만들어냄. 현기증이라는 타이틀이 바로 느껴지는 시각적인 구성.

*실습
리듬을 찾아라
디자인 리서치
다양한 디자인 결과물을 찾아보고 그 안에서 리듬의 원리를 발견해보세요.
리듬의 원리가 명확하게 적용된 디자인 예시를 찾아보세요.

2-6: 강조 Emphasis

강조: 특정 요소나 영역을 형태, 색, 크기 등을 강화하여, 시선을 집중시키고 주목도를 높여 메시지를 효과적으로 전달하는 원리.(특정 디자인 요소에 주위를 집중시킴.)
적절한 강조는 디자인 효과를 극대화하고 사용자의 참여를 유도하며 기억에 남는 경험을 제공할 수 있음.

1-수직을 가로지르는 곡선의 끈이 1차로 시선을 강탈, 빨간 배경과 블랙&화이트가 대비를 이루면서 끈부터 시선 유도. 시옷을 6번 반복하여 타이틀 강조.(시적 표현)
2-앵글을 밑에서 올려다보는 전면을 가득 메우는 건축물 이미지로 시선을 아래에서 위로 공간감 있게 확 끌면서 시작. 배경 분할도, 큰 타이틀도 강조하고 있지만, 메인 이미지가 주는 강렬함이 강조의 원리에 잘 작용함.
3-지면을 가득 메운 큰 원뿔이 아래로 꽂히면서 타이틀을 쪼개고 있는 형태. 수직으로 내리꽂는, 사선으로 모이는 시각언어가 파괴한다는 운동성도 같이 표현하면서 매우 강렬하게 시각적 집중도를 극대화함. 쪼개고 부수고 파괴하는 시각적 언어를 자주 쓰진 않지만(오해를 불러 일으킬 수 있기 때문) ‘혁신’이라는 내용에 걸맞는 그래픽이라고 말할 수 있음.
4-공간을 볼드하게 지배적으로 메꾸는 방식. 타이틀, 이미지 등 주로 표현할 것을 지배적으로 공간을 차지해, 강렬하게 전달하는 것.
5-시각 요소가 자잘하게 많아, 시각을 분산시킬 수 있어 요소들을 조합해 X라는 하나의 큰 형태를 만듦. 대각선으로 가로지르는 X자로, 강하게 시선을 집중시킴.
6-평면성으로 충분히 강조하기 어려워 입체적으로 강조한 전략. 입체적인 조형이 만들어내는 역동성이 생각보다 시선을 매우 강렬하게 쓸고 있음.

*실습
강조를 찾아라
디자인 리서치
다양한 디자인 결과물을 찾아보고 그 안에서 강조의 원리를 발견해보세요.
강조의 원리가 명확하게 적용된 디자인 예시를 찾아보세요.

03 타이포그래피(타이포그래픽의 기본과 역사, 그리고 디자인에서의 역할)

3-1 타이포그래피란 무엇인가

타이포그래피(Typography): 활판술(활판으로 하는 인쇄술) 또는 활자 서체의 배열을 말함. 글자의 형태, 배열, 크기, 간격 등을 조절하여 텍스트를 효과적으로 표현하고 전달하는 예술적, 기술적 작업. 인쇄 기술의 발달로 표현의 제약이 없어지면서 의미가 확장돼서 글자를 다루는 모든 방법, 글자라는 조형적 요소를 조화롭게 배치하는 작업 그자체를 지칭하기도 함.

활자(Movable Type): 사각 기둥의 금속에 한 글자씩 양각으로 새겨 인쇄하기 위해 만든 글자 툴. 조합해 단어, 문장, 페이지 단위로 인쇄. 특정하게 디자인된 글자.
활자를 배치해서 특수한 목적에 맞게 디자인=편집 디자인
활자 자체를 디자인=폰트 디자인/서체 디자인
기존에 디자인된 활자를 어떠한 목적에 맞게 변형하는 것이 로고 디자인 정도로 말할 수 있음.

폰트 선택-글꼴의 스타일, 두께, 크기 등 폰트 자체의 특성을 결정
문자 간격-텍스트가 얼마나 밀착되어 있는지, 또는 간격이 벌어져 있는지를 조절
행 간격-각 줄 사이의 공간을 조절하여 가독성을 높이는 요소

-좋아 보이는 디자인의 비결은 의외로 타이포그래피 안에 숨겨져 있음.
-타이포는 폰트선택, 간격, 언어를 이용한 조형 요소를 표현한 것까지 총체적으로 이르는 말

3-1 타이포그래피의 중요성
정보 전달-1차적으로 글자는 정보를 전달하는 실용적 기능이 있으며, 좋은 타이포그래피는 가독성을 향상하여 독자가 정보를 흡수할 수 있도록 도와줌.
브랜드 정체성 강화-2차적으로는 글자가 시각적인 이미지 전달로써의 기능을 가짐. 딱딱한 고딕체는 공식적, 권위적인 느낌을 주고, 명조체는 부드럽고 안정적인 느낌을 전달함. 결국 서체에도 느낌이 있고, 이미지가 있음.
서체의 일관된 사용은 브랜드의 정체성을 확립하고, 소비자의 기억에 남도록 함.
사용자 경험 향상-디지털 미디어 환경에서 좋은 타이포그래피는 직관적인 탐색과 콘텐츠 접근성을 제공함.

타이포그래피는 단순한 글자 배열을 넘어서, 글자가 어떻게 시각적으로 전달될지를 고민하는 과정임.
정보를 전달하는 기능 외에도, 느낌을 전달하고, 특정 감정을 유발하는 시각적 언어로 기능함.

3-2 타이포그래피의 역사

인쇄술의 발명과 활자 디자인의 탄생
팔만대장경(목판인쇄 1236~51년), 직지심체요절(현존하는 가장 오래된 금속활자본 1377년), 구텐베르크(금속활자 인쇄술의 대중화 1450년)

블랙레터체: 고딕 중세시대를 대변하는 서체, 필사본과 비슷함. 독일 나치 때
그리스 로마의 정신을 따른 로만체: Bembo/Garamond체가 대표적. 서체의 클래식, 본문용 서체로 많이 쓰임.
18세기 신고전주의 서체 트렌지셔널: Baskerville체가 대표적. 모던으로 가는 길목. 본문용 서체로 많이 쓰임.
정제된 미학 모더니스트 서체: Bodoni 서체가 대표적. 굵은 획과 얇은 획의 극단적 대비가 특징적임. 이 대비가 주는 느낌이 모던이라고 생각하면 됨. 정밀하고 조각적인 느낌, 고급스럽지만 딱딱하고 차가운 인상을 줌. Bodoni체는 본문용으로는 가독성이 떨어짐. 정제된 조형성을 극대화한 서체라서, 타이틀용으로 적합. 본문보단 제목 용도로 사용하기 좋은 서체를 분류상으로 디스플레이 서체라고 부름.
산업혁명과 산세리프 서체: Akzidenz-Grotesk, 장식성보다 실용성, 명확성 강조. 산세리프 서체는 정보전달용 서체로 많이 쓰이고, 산업적임.
20세기 모더니즘 타이포그래피: Helvetica체가 대표적. 형태는 기능을 따름. 논리, 질서, 명료성, 보편성 등 강조하는 비로소 디자인 시대의 시작이라고 말할 수 있음. Akzidenz-Grotesk가 단순하고 기능적이라면 그보다 더 정제된 버전이고, 중립적인 특징을 가짐.
디지털 서체 혁명: 애플 매킨토시가 출시되면서 디자이너가 디지털에서 직접 글자를 다루게 됨. 무한히 확장 가능한 디지털 데이터로 바뀌었다는 것 핵심.

3-3 디자인에서의 타이포그래피

#### 타이포그래피의 기본
영문 서체의 구성요소

영문 텍스트를 정리하다보면 베이스라인 맞추는 게 중요. 대문자는 거의 높이가 비슷, 소문자는 아래로 내려가 있거나(y) 위로 올라간 텍스트가 있음.(h)

국문 서체의 구성요소:자음, 모음, 받침으로 구성. 국문은 영문과 달리 정사각형, 또는 직사각형 모듈을 사용하고 있음. 박스 안에 들어가는 형식.

세리프vs산 세리프
세리프: 글자의 획 끝에 달린 장식선. 영문에선 과거의 납작한 펜촉으로 글씨를 쓰다보면 펜촉의 흔적이 남음. 그 모양이 서체 디자인에 포함되어서 이어져 내려온 것. 국문은 붓글씨의 흔적이 남았고 명조체라고 부름. 세리프는 긴 텍스트에서 가독성이 높음. 전통적, 고전적, 신뢰감 있는 인상, 소위 클래식의 느낌을 줌.
산세리프: 국문에선 고딕체라 부름. 깔끔하고 직선적 끝맺음이 특징.

글자 사이와 단어 사이: 글자와 글자 사이의 간격을 글자 사이 또는 자간이라고 하고, 단어와 단어 사이의 간격을 낱말 사이 또는 어간이라고 함.
제목같이 큰 글자는 자간이 본문보다 좀 더 좁아야 한 덩어리로 컴펙트하게 보여야 임펙트가 있고, 작은 글자들을 조판할 때는 문자 사이 간격을 좁히기 보다는 살짝 넓게 해야 가독성이 높아짐.

글줄 사이 또는 행간: 국문은 영문보다 깔끔하게 행간 정리가 됨.

Negative Space

글자 자체의 모형, 글자 자체를 Positive Space라고 함. 흰 배경에 글자는 검정색이 되어 있는데, 검정색이 Positive Space이며, 나머지가 Negative Space(화이트 스페이스로 불리기도 함)임. 글자 사이의 빈공간, 글자 내부의 빈 공간도 포함.
핵심은 Negative Space가 있어야 글자가 읽힘. 디자인하는 형태나 글자에만 집중하는데, 빈공간이 글자의 가독성을 높임. 디자인적 효과를 더하고 시각적인 균형을 잡으려면 여백을 잘 활용하는 게 중요함.

04 레이아웃(레이아웃의 중요성과 7가지 핵심 원칙)

4-1 레이아웃의 중요성

레이아웃: 특정 공간 안에 문자, 이미지 등의 구성 요소를 보기 쉽게 효과적으로 배치하는 작업.
시각적인 균형과 조화를 이루고, 사용자의 효과적인 정보 인식을 돕는 구성 방식.

레이아웃 중요성
(1) 정보 전달력 향상-혼란스럽지 않게 정보를 정리해서 사용자가 빠르게 핵심을 파악할 수 있도록 돕는 게 레이아웃의 역할. 레이아웃에 따라서 전달력, 집중도가 달라짐.
(2) 시각적 위계 형성
(3) 일관성으로 브랜드 이미지 제고-레이아웃 자체도 아이덴티티가 될 수 있음. 어떤 특정 정렬, 간격, 그리드의 규칙성을 여러 제작물에 일관되게 적용하면 그 자체로 전문성과 신뢰감이 형성되기도 함. 그리고 그 배치, 즉 레이아웃 자체를 아이덴티티로 활용할 수 있음.
(4) 사용자 경험(UX)-애플은 여백이 있어 시원한 느낌을 주고, 심플함, 정제된 비주얼 랭귀지를 사용했다고 말할 수 있음. 보여줄 것은 확실히 임펙트 있게 보여주고, 비울 곳은 확실하게 비움. 정보가 정리 되어보이도록 배치. 쿠팡은 큰 배너가 빠르게 전환되고, 상품들이 가득 차있어 정신 없는 느낌을 줌. 많은 상품을 보여줘야겠다는 전략이 보임.
애플은 어쩌다 한번씩 사게 되는 비싼 브랜드, 쿠팡은 매일 주문할 수 있고, 다채로운 물건이 펼쳐진 마트같은 레이아웃으로 물건을 많이 사도록 유도.

4-2 레이아웃의 핵심 원칙

(1) 여백 만들기
(2) 콘텐츠의 그룹화-카테고리가 같은 콘텐츠끼리 그룹화를 해야 보는 사람들이 쉽게 이해 가능.
(3) 핵심 요소 반복 사용
(4) 대비와 강조
(5) 정렬, 그리드-한 공간 안에 많은 정보를 전달할 때 그리드와 정렬을 잘 사용해서 정보를 효과적으로 분리해야 보는 사람의 혼돈을 방지할 수 있음.
(6) 초점 만들기
(7) 계층 구조 구성

*시선이 가지 않고 눈에 띄지 않는 디자인이라면 레이아웃부터 점검해보자.

05 기본 색채학

색상(Color): 색상은 빛의 반사에 의해 인식되는 시각적 속성. 색상은 물체가 반사하는 빛의 파장 특성에 따라 다르며, 인간의 감각과 심리에 영향을 미치는 요소.

색의 3속성
색상: 색의 종류를 구별하는 특성.
명도: 색의 밝고 어두운 정도. 명도가 높은 컬러를 틴트 또는 파스텔 컬러라고 부르며, 명도가 낮은 컬러를 쉐이드 또는 다크톤이라고 부름.
채도: 색의 선명하고 탁한 정도를 말함. 채도가 높으면 원색에 가깝고 채도가 낮으면 무채색에 가까움.

색상환

색의 분류

12개의 색으로 더 세분화한 색상환임.
Primary(1차색): 옐로우, 레드, 블루(삼원색), 다른 모든 색의 근원이자 빛의 3원색.
Secondary(2차색): 그린, 오렌지, 퍼플. 1차색인 원색을 혼합하면 나오는 색.
Tertiary(3차색): 2차색을 혼합하면 나오는 색.
따뜻한 색/웜톤: 빨간색, 주황색, 노란색 등 활력 있고 에너지 있는 색
차가운 색/쿨톤: 파란색, 청록색, 남색 등 차분하고 시원한 색
중간 온도 중 따뜻한 색: 연두색, 초록색
중간 온도 중 차가운 색: 자주색, 보라색

보색 대비: 색상환에서 서로 마주보는 반대되는 색
보색 대비는 보는 사람에게 시각적 경험을 풍부하게 만드는 특징이 있음. 이미지를 좀 더 오래 기억하게 만드는 효과를 줌. 화려하고, 다이나믹한 느낌 제공. 임팩트 있는 이미지를 만들고 싶을 때 가장 많이 사용하는 색 조합.

유사색 조화: 색상환에서 인접한 색끼리 조합한 것. 부드럽고 통일감 있는 느낌을 주게 됨. 보색대비에 비해 조화롭고, 차분하고 안정적인 느낌을 줌. 실패할 확률이 낮은 색 조합.

명도 대비:명도가 높은 색과 명도가 낮은 색의 대비. 밝기가 다른 두 색이 서로의 영향으로 밝은 색은 더 밝게, 어두운 색은 더 어둡게 보임.
앱이나 웹같은 디지털 미디어에서 이 명도 대비가 매우 중요한 개념임. 이를 웹 접근성 명도 대비라고 부름. 디자인에서 명도 대비가 낮아서 서로 비슷한 명도끼리 디자인 해놓으면 시력이 낮은 사람이나 고령자는 가독성이 떨어짐.(=정보 전달이 잘 안됨) 명도 대비를 잘 못하면 디지털 미디어에 대한 접근성 자체가 낮아지게 됨. 콘텐츠와 배경 간의 명도 대비가 일정 비율 이상으로 해야 한다는 규칙들이 있고 체크할 수 있는 웹 도구들이 많이 마련되어 있음.

색상 모드
RGB: Red, Green, Blue/빛의 삼원색으로 가산 혼합 방식으로 색을 더하면 더할수록 밝아짐. 빛의 원리와 동일. 디지털 미디어에선 사람이 인지할 수 있는 거의 모든 색을 구현할 수 있음.

CMYK: Cyan, Magenta, Yellow, Black/잉크에 기초한 색상 구현 모드로 색을 더하면 더할수록 탁하고 어두워짐. 물감을 혼합하는 것과 같은 원리. RGB 색상 모드에 비해 색상 구현에 한계가 있음. 우리가 디스플레이에서 볼 수 있는 모든 색상을 실제 인쇄물에 동일하게 구현할 수 없어서 모니터와 인쇄물 사이에 색상 간극을 줄이기 위해 잉크에 기초한 CMYK 색상 모드를 사용하는 것.