[새싹X코딩온] UI/UX 웹 프론트엔드 부트캠프 과정 1주차 - 02 part.2

함주연·2024년 10월 24일
0

Typography

정의

글자의 형태, 배열, 크기, 간격 등을 조절하여 정보를 시각적으로 표현하는 예술이자 기술입니다.

이는 단순히 글자를 배치하는 것을 넘어, 글꼴의 선택, 색상, 줄 간격, 자간 등을 통해 독자가 내용을 쉽게 읽고 이해할 수 있도록 돕는 중요한 요소입니다.

브랜드의 정체성을 나타내고, 사용자 경험을 향상시키며, 정보의 계층 구조를 명확히 하는 데 기여합니다.

타이포그라피는 글자를 디자인하는 것이 아니라 의미를 디자인 하는 것

요소

· 글꼴 (Font): 텍스트의 스타일을 결정하는 요소로, 브랜드의 분위기와 개성을 전달하는 중요한 역할을 합니다. 고딕체, 명조체 등 다양한 글꼴이 사용됩니다.

· 글자 크기 (Font Size): 텍스트의 크기를 결정하는 요소로, 정보의 중요도에 따라 달라집니다. 제목, 본문, 소제목 등에 따라 적절한 크기를 설정하여 계층 구조를 만듭니다.

· 줄 간격 (Line Height): 텍스트 줄 간의 간격을 조절하는 요소로, 가독성에 큰 영향을 미칩니다. 적절한 줄 간격은 텍스트가 더 읽기 쉽게 만듭니다.

· 자간 (Letter Spacing): 글자 사이의 간격을 조정하는 요소입니다. 자간을 넓히거나 좁히는 것으로 텍스트의 가독성과 스타일을 조절할 수 있습니다.

· 정렬 (Alignment): 텍스트의 정렬 방식을 결정하는 요소로, 좌측 정렬, 중앙 정렬, 우측 정렬, 양쪽 정렬 등이 있습니다. 콘텐츠의 배치와 흐름에 영향을 줍니다.

· 색상 (Color): 텍스트의 색상을 설정하는 요소로, 배경과의 대비를 통해 가독성을 높이고, 강조할 요소를 시각적으로 구분하는 역할을 합니다.

결론적으로, 타이포그래피는 정보 전달의 효율성을 높이고, 사용자에게 긍정적인 경험을 제공하는 데 필수적인 요소입니다.

역할

올바른 타이포그래피 선택은 사용자가 내용을 쉽게 이해할 수 있도록 돕습니다. 단순한 텍스트 표현을 넘어서, 사용자 경험을 향상시키고 브랜드의 메시지를 효과적으로 전달하는 데 중요한 요소입니다.

· 가독성 (Readability): 텍스트를 읽기 쉽고 명확하게 만드는 데 중요한 역할을 합니다. 적절한 글꼴, 글자 크기, 줄 간격, 자간을 통해 텍스트의 가독성을 높여 사용자가 내용을 쉽게 파악할 수 있게 합니다.

· 계층구조 (Hierarchy): 정보의 중요도와 우선순위를 나타낼 수 있습니다. 제목, 부제목, 본문 등 다양한 텍스트 요소의 크기와 스타일을 조정하여 계층 구조를 시각적으로 표현합니다.

· 브랜드 정체성 (Brand Identity): 특정 글꼴과 타이포그래피 스타일은 브랜드의 개성을 나타내고, 브랜드 정체성을 강화합니다. 고유한 타이포그래피 스타일은 브랜드를 차별화하고 사용자에게 일관된 이미지를 전달합니다.

· 감정적 반응 (Emotional Response): 사용자가 느끼는 감정적 반응에 영향을 줍니다. 예를 들어, 둥글고 부드러운 글꼴은 친근한 느낌을 주고, 세련된 세리프 글꼴은 신뢰성과 우아함을 전달할 수 있습니다.

▷ 디자인 참고 사이트

· SAVEE https://savee.it/
· GODLY https://godly.website/
· RIBBBLE https://dribbble.com/shots
· BEHANCE https://www.behance.net/
· COLLECT UI https://collectui.com/
· AWWWARDS https://www.awwwards.com/
· DBCUT https://www.dbcut.com/

세리프 / 세리프체 (Serif/Sans-Sefif)


(사진 출처 - https://www.tommso.com/)

세리프체 (Serif)

· 특징: 세리프체는 글자의 끝부분에 작은 장식선(Serif)이 있는 글꼴을 말합니다. 이 장식선은 글자의 획 끝을 마무리하며, 글자의 형태에 고전적이고 전통적인 느낌을 더해줍니다.

· 장점: 세리프체는 텍스트가 길어질 때 가독성이 높아지는 경향이 있습니다. 특히 인쇄물에서 가독성을 높여주는 역할을 하며, 책, 신문, 잡지 등의 긴 본문에서 자주 사용됩니다.

· 느낌: 전통적, 신뢰감, 우아함, 고급스러움
사용 사례: 전통적인 인쇄물, 고급 브랜드, 신뢰감을 주고자 하는 문서(예: 공식 문서나 보고서)

산세리프체 (Sans Serif)

· 특징: 산세리프체는 글자의 끝부분에 장식선이 없는 글꼴을 말합니다. 이 글꼴은 깔끔하고 단순한 모양으로, 현대적이고 깨끗한 느낌을 줍니다.

· 장점: 산세리프체는 디지털 화면에서 더 잘 읽히는 특징이 있어, 웹사이트, 모바일 앱, UI/UX 디자인에서 자주 사용됩니다. 작은 크기로도 선명하게 보이기 때문에, 짧은 문구나 제목에도 적합합니다.

· 느낌: 현대적, 깨끗함, 단순함, 명확함
사용 사례: 웹사이트, 디지털 인터페이스, 기술 브랜드, 현대적인 느낌을 강조하고자 하는 디자인

세리프체 vs 산세리프체 사용 팁

세리프체는 신뢰성과 전통적인 느낌을 강조하고 싶을 때 사용하기 좋습니다.

산세리프체는 모던하고 미니멀한 디자인을 원할 때, 특히 디지털 환경에서 선호됩니다.

0개의 댓글