251104 내일배움캠프 2일차 TIL

디자인 개론 강의 수강(3강~4강)

 

타이포그래피(3강)

 

타이포그래피(Typhography)

1) 활판술(活版術) 또는 활자 서체의 배열

2) 글자의 형태, 배열, 크기, 간격을 조절해 텍스트를 효과적으로 표현하고 전달하는 예술적/기술적 작업

 

인쇄기술의 발전으로 표현의 제약이 사라지면서 글자를 다루는 모든 방법, 글자라는 조형적 요소를 조화롭게 배치하는 모든방법으로 의미가 확장되었다.

 

활자(活字, Movable Type): 사각 기둥 형태의 금속 윗면에 글자를 거꾸로 새긴 것으로, 이들을 음직여서 단어와 문장을 만든다.

편집 디자인: 활자를 배치해서 특수한 목적에 맞게 조정하는 것

폰트 디자인/서체 디자인: 활자 자체를 디자인 하는 것 

로고 디자인: 기존에 디자인된 활자를 어떠한 목적에 맞게 변형하는 것

 

타이포그래피의 기본작업

1) 폰트 선택: 글꼴의 스타일, 두께, 크기 등 폰트 자체의 특성을 결정한다.

2) 문자 간격(커닝): 텍스트가 얼마나 밀착되어 있는지, 또는 간격이 벌어져 있는지를 조절한다.

3) 행 간격(리딩): 각 줄 사이의 공간을 조절하여 가독성을 높인다.

 

타이포그래피의 중요성

1) 정보전달: 좋은 타이포그래피는 가독성을 높여 독자가 정보를 얻을 수 있도록 돕는다.

2) 브랜드 정체성 강화: 서체의 일관된 사용은 브랜드의 정체성을 확립하고, 소비자의 기억에 남도록 한다.

3) 사용자 경험 향상: 디지털 미디어 환경에서 좋은 타이포그래피는 직관적 탐색과 콘텐츠 접근성을 제공한다.

 

타이포그래피는 단순한 글자배열만이 아니다. 글자가 어떻게 시각적으로 전달될지 고민하는 과정이다.

또한 정보전달 기능 외에도 느낌을 전달하고, 특정 감정을 유발하는 시각적 언어로 기능하기도 한다.

 

블랙레터체: 고딕 중세시대를 대변하는 글씨체

손으로 쓴 것 처럼 디자인된 초기 활자체 디자인(필사체의 재현으로 만든 서체)

2차세계대전 당시 독일 게르만 민족주의 홍보에 쓰이기도 했다. 그래서 2차세계대전 이후에는 나치를 연상시킨다는 이유로 사용이 금지되기도 했다.

 

로만체: 그리스 로마의 정신을 따른 글씨체

르네상스 시대에 접어들어 인쇄술이 더 발전하면서 서체도 시각적 균형이 더 높은 방향으로 발전하게 된다.

예) 벰보, 가라몬드 (책 본문용 글꼴에 적합하고, 클래식한 컨셉의 책을 디자인 할때 쓰기 좋다.)

 

트렌지셔널: 18세기 신고전주의 서체. 인쇄기술의 발전으로 형태적으로 좀 더 섬세한 표현이 가능해졌다. 글자들이 좀 더 수직적으로 발전했고, 더 기하학적이고 규칙적인 형태를 갖추게 되었다.

예) 바스커빌(1757년 영국 인쇄업자 존 바스커빌이 개발한 서체, 과거의 서체들에 비해 조금 더 수학적인 아름다움이 돋보이는 서체이다.)

 

모더니스트 서체: 인문주의적 흐름에서 벗어나 18세기 후반 합리성과 질서, 과학적 사고를 강조하는 시대가 되면서 완벽한 비례와 조형미를 중시하는 서체들이 많이 생겨났다.

예) 보도니(본문보다는 제목이나 타이틀에 적합하다. 이러한 서체들을 디스플레이 서체라고도 부른다.)

 

산세리프 서체: 산업혁명 이후 인쇄물 수요가 폭증하면서 강한 시각적 임팩트를 위한 서체가 필요해졌다. 장식성보다 실용성과 명확성이 더 강조되었다.

정보 전달용 서체로 많이 쓰이고, 단순함-기능성이라는 원칙의 전형이며 개성보다는 중립성과 실용성에 방점을 둔 서체이다.

예) Akzidenz-Grotesk(최초의 실용중심 산세리프 서체, 고른 굵기와 균형잡힌 구조가 특징이다.)

 

세리프와 산세리프의 차이점을 설명(왼쪽: 세리프, 오른쪽: 산세리프)

a에 꼬리가 있으면 세리프 서체, 없으면 산세리프 서체이다.

 

20세기(1920~1960년대) 모더니즘 타이포그래피: 장식성과 감성보다 논리, 질서, 명료성, 보편성 등이 강조되는 디자인 시대의 시작

예) 헬베티카: 중립적이고 보편적인 산세리프 서체의 정석. 전 세계적으로 가장 많이 쓰이는 서체 중 하나

 

디지털 서체 혁명(1980년대 이후)

매킨토시(애플, 1984년) 출시 이후 디자이너가 디지털에서 직접 글자를 다루기 시작했다. 

타이포그래피가 더 이상 활자 주조 없이 무한히 확장 가능한 디지털 데이터로 바뀌었다.

디자이너는 더 이상 인쇄소에 의존하지 않고 개인 컴퓨터에서 자유롭게 폰트를 조정할 수 있게 되었다.

웹폰트가 등장하고 구글폰트, 타이프킷 등 무료소스, 오픈소스와 같은 서체들이 보급되었다.

 

서체는 단순한 디자인 요소를 넘어서서 브랜딩의 정체성으로 자리를 잡았고, 디지털 미디어 보급으로 디지털 환경 최적화와 사용자 경험 중심 서체 사용이 중요해졌다. 타이포그래피는 다변화된 스크린 위에 살아있는 UI가 되었다.

 

 

 

타이포그래피의 기본

 

영문서체의 구성요소

영문 서체의 구성요소

베이스라인(Baseline): 대문자의 바닥을 나타내는 선

디센더 라인(Desecder line): 소문자의 바닥을 나타내는 선

어센더 라인(Ascender line): 대문자의 가장 높은 선

X-line: 소문자의 가장 윗 선

X-height: X-line과 베이스라인 사이. 소문자의 평균 몸통

디센더(Descender): 베이스라인을 넘어서 아래로 내려온 부분

어센더(Ascender): X-line을 넘어서 위로 올라온 부분

 

영문텍스트 정렬 시 베이스라인을 잘 맞추는 것이 중요하다.

 

국문 서체의 구성요소

 

국문 서체의 구성요소

국문은 영문과 달리 정사각형이나 직사각형 모듈을 사용한다.

 

세리프 서체와 산 세리프 서체

세리프(왼쪽)과 산세리프(오른쪽)

세리프: 글자 획 끝에 달린 장식선.

(납작한 펜촉(서양)이나 붓(국문)으로 글씨를 쓸 때 남은 흔적이 서체 디자인에 포함된 것)

 

세리프 체와 명조체는 긴 글에서는 가독성이 높은 편이며, 전통적이고 고전적이고 신뢰감 있는 인상을 부여한다.

 

산세리프: 세리프가 없는 서체. 국문에서는 고딕체가 해당된다. 깔끔하고 직선적인 끝맺음을 특징으로 갖고 있으며, 젊고 직관적이라는 인상을 준다.

 

 

자간과 어간

자간(Letter spacing): 글자와 글자 사이의 간격

어간(Word spacing): 단어와 단어 사이의 간격

일반적으로 자간을 조절하면서 전체 글과 글자 사이의 공간을 동일한 증분으로 조정한다.

 

커닝(Kerning): 한 글자 사이의 간격을 미세하게 조정하는 것.

자간이 어느 부분은 넓고, 어느 부분은 좁게 조정되는 이유: 글자의 밝은 면적이 서로 달라서 시각적으로 균일해 보이도록 조절되기 때문이다.

또한 특정 글자의 구조에 따라 자간을 다르게 설정해야 시각적으로 균형 잡힌 인상을 줄 수 있으며, 커닝은 특히 로고 디자인에서 시각적 인상에 중요한 영향을 준다.

UI 디자인의 경우 효율성을 고려하여 글자마다 커닝을 적용하지 않는다. 대신 제목과 같은 큰 글자는 자간을 본문보다 좁혀 임팩트를 주기도 한다.

 

 

 

글줄 사이 또는 행간

행(Line): 글의 한 줄

행간/레딩(Line spacing/Leading): 한 글줄에서 다음 글줄까지의 거리.

 

 

포지티브 스페이스(상단), 네거티브 스페이스(하단)

네거티브 스페이스(Negative Space) ↔ 포지티브 스페이스(Positive Space)

포지티브 스페이스: 글자 자체의 모양, 글자 자체

네거티브 스페이스: 포지티브 스페이스를 제외한 나머지 공간 글자 내부의 빈 공간, 글자 사이의 빈 공간을 포함한다. 

(글자는 일반적으로 검은색으로 써지기 때문에 화이트 스페이스라고도 부른다.)

 

네거티브 스페이스 글자의 가독성을 높이므로 디자인적인 효과를 더하고 시각적 균형을 잡는 효과가 있다.

 

 

레이아웃(4강)

 

레이아웃(Layout)

1) 특정 공간 안에 문자나 이미지 등의 구성요소를 보기 쉽게 효과적으로 배치하는 작업

2) 시각적 균형과 조화를 이루고, 사용자의 효과적인 정보 인식을 돕는 구성 방식

 

디자인에서 말하는 레이아웃: 주로 텍스트나 이미지, 그래픽 요소 등을 화면이나 지면 위에 효과적으로 배치해서 메시지를 명확하게 전달하고 시선 흐름과 행동을 유도하는 것을 말한다.

 

 

레이아웃의 중요성

1) 정보 전달력 향상: 혼란스럽지 않게 정보를 정리하여 사용자가 빠르게 핵심을 파악할 수 있도록 돕는다.

레이아웃에 따라 전달력과 집중도가 달라질 수 있다.

 

2) 시각적 위계 형성: 좋은 레이아웃은 시각적 위계를 형성해서 정보 전달력을 향상시킨다. 

(시각적 위계: 디자인 요소들 사이의 중요성을 시각적으로 표현하는 방법으로, 이를 통해 정보의 우선순위를 쉽게 이해할 수 있다.)

 

시각적 위계의 예시

- 텍스트 크기 조절

- 무게감 조절

- 이미지와 텍스트의 배치를 통한 공간 활용

 

3) 일관성으로 브랜드 이미지 제고: 레이아웃 자체도 브랜드의 아이덴티티로 작동할 수 있다.

정렬이나 간격, 그리드의 규칙성을 여러 제작물에 일관되게 적용한다면 전문성과 신뢰감이 형성된다.

 

4) 사용자 경험(UX)

 

예: 애플 홈페이지(깔끔하고 명확한 레이아웃을 추구)

강조할 정보는 영상 등 임팩트 있는 방식으로 명확히 보여주고, 불필요한 부분은 비워서 명확한 정보 전달을 실현한다.

정보를 정리되어 보이도록 배치하여 중요한 정보를 심플하게 전달한다.

 

예: 쿠팡 홈페이지 (많은 상품을 한 번에 보여주는 것을 추구함. 이는 사용자의 구매빈도와 충동구매를 높이기 위함이다.)

큰 배너가 먼저 보이고 이 배너가 빠르게 전환된다. 또한 아래에 상품들이 크고 작게 배치되어있고, 사이드에도 상품의 썸네일들이 붙어있는 모습을 볼 수 있다. 

 

레이아웃의 핵심 원칙

 

1) 여백 만들기: 레이아웃에 여백을 부여하여 답답해보이지 않게 숨쉴 틈을 만들어주면 가독성을 높이고, 집중 시키는데 도움이 된다.

 

2) 콘텐츠 그룹화(디자인 원칙 중 근접 통일성과 연결되는 개념): 카테고리가 같은 콘텐츠끼리 그룹화를 해야 보는 사람이 더 쉽게 이해하고, 필요한 정보를 한번에 확인할 수 있으며, 레이아웃을 보는 사람이 흐름을 느낄 수도 있다.

 

3) 핵심 요소 반복 사용: 핵심요소를 반복해서 사용하는 것은 레이아웃에 통일성을 주고, 이미지를 더 효과적으로 표현할 수 있도록 돕는다. 또한, 디자인의 전체적인 컨셉 전달에 효과적이다. 

 

4) 대비와 강조: 레이아웃에서 대비와 강조를 적용하면 시선을 한 곳으로 집중시킬 수 있고, 중요한 정보를 강조하고 시각적 중심을 명확히 할 수 있다.

 

5) 정렬, 그리드

그리드: 레이아웃 구성의 기본 틀이 되는 수평선, 수직선의 망

컬럼: 지면을 일정한 폭으로 세로선으로 분할하고 중간의 틈도 동일하게 적용해 만든 것.

컬럼별로 원하는 만큼 면분할이 가능하다. (신문은 이 그리드 구조를 활용해 기사나 사진. 광고를 질서있게 배치한다.)

 

6) 초점 만들기: 사용자가 무엇에 집중하기를 원하는지를 명확하게 결정한다.

 

7) 계층 구조 구성(hierarchy): 메인 이미지, 타이틀, 부가 정보 등의 순서로 시선을 유도하여 설계한다.

시선이 움직이는 순서를 미리 예측하여 레이아웃을 설계하면 효과적인 정보 전달이 가능하다.

 

 

디자인 감각 훈련

폰트 레퍼런스 리서치

각종 전시의 포스터, 앨범아트, 업체 로고 등의 서체를 조사해서

각 폰트에서 느껴지는 인상을 적어보고, 폰트의 자간, 두께, 획의 형태, 분위기, 어울리는/어울리지 않는 컨텐츠가 어떤 것인지

파악하는 시간을 가져보았다.

10개 이상의 레퍼런스를 찾고 폰트를 찾는것 부터가 사실은 조금 어렵기도 했다.

나는 AI 툴을 활용하여 폰트를 서치했는데, 알고보니 손글씨였던 것들도 많았고, AI가 인식하지 못하는 경우도 많아서

인식할 수 있는 이미지를 서치하느라 시간을 많이 잡아먹었다.

 

그래도 어제 색상보다는 조금 쉬웠다는 생각이 들어서 감각훈련을 수행하는 내내 재미있다는 생각이 들었다.

원래 쉬우면 재미있는거다. 

마지막은 좀 어려웠지만 이러면서 리서치하는 방법을 쌓아가는 거라고 생각하니 좋다고 생각이 든다.