타이포그래피는 활자 서체의 배열을 말하는데, 특히 문자 또는 활판 적 기호를 중심으로 한 2차원적 표현을 가리킨다. 활판으로 하는 인쇄술을 가리키는 용어이기도 하다. 오늘날에는 뜻이 바뀌어 사진까지도 첨가하여 구성적인 그래픽 디자인 전체를 가리키고 일반의 디자인과 동의어 같이 쓰이는 일도 있다. 즉, 편집 디자인 분야에서는 활자의 서체나 글자 배치 따위를 구성하고 표현하는 일을 가리킨다. 하지만 감성적 측면에 관한 타이포에 관한 부분은 흔히 간과하기가 쉽다. Sarah의 이야기를 듣고 참고하기를 기대한다.
Typography Basic
Functional aspect
Emotional aspects
질의응답
내가 선택한 폰트가 내가 전달하려는 감성과 잘 일치하는지, 감성을 전달하기에 충분한지 생각해보자. 미세먼지 프로젝트를 중심으로 App Style Guide 작성시 고려할것
폰트가 가지는 다양한 감성들에 대해 생각해보자. 다양한 타이포그래피 디자인들을 살펴보고 내가 전달하고자 하는 감성(예: 유쾌 발랄)과 유사하거나 비슷한 감성을 가진 디자인을 찾아보자. 미세먼지 앱에 적용될 내용 등에서 타이포그래피를 활용하는 방법에 대해 고민해보고 구체적인 아이디어나 계획을 댓글로 달아보자.
내 프로젝트의 각 페이지에서 가독성을 좀 더 높이기 위해 어떤 방법을 사용할 것인지 생각해보고 적어보자. 예) 줄간격, 행간, 여백, 서체 등
색상은 사람의 눈에 가장 먼저 인식되는 시각 디자인의 요소인 만큼 그 중요성을 알고 있다. 잘 조합된 음영, 색조는 호기심을 자극하고, 메시지를 전달하며, 감정과 생각을 만들어 낸다. 영상 제작에서도 전체 디자인에 영향을 미치는 색 구성표를 짜는 과정은 굉장히 신중하게 진행된다. 그러나 표준에 맞는 색상을 선택하고 조합하기란 그리 쉽지는 않다. 그러기에 디자이너는 가장 적합한 색상 조합을 도와주는 창의적이고 인기 있는 도구를 잘 골라서 활용하는 것이 매우 중요하다.
색의 기초
색의 코디네이션
색 도구들
아래의 2가지 항목에 관한 자기 생각을 댓글로 남기기 바랍니다.
질문 1 개인 과제에서 내가 전달하고자 하는 감성과 개성을 형용사 어휘로 나타내보자. – 몇 개의 형용사어휘로 주로 나타내고 싶은 개성을 적어보자. 선택한 어휘가 과제에서 드러내고 싶은 대표적인 느낌이나 맞는지 고민해보고 특징을 가장 잘 드러낼 수 있는 어휘로 2~3개를 선택하자.
질문 2 1번에서 선택한 어휘를 가장 잘 드러낼 수 있는 컬러 Set을 디자인해보고 주조 색과 보조 색으로 이루어진 4~5개의 칼라 Set을 만들자. – 최종적으로 내가 선택한 컬러의 색(Hue), 채도(Saturation), 명도(Brightness)를 각각 적어보자.
UI/UX의 경우 종이 위에 프린트되는 정적인 결과물과는 달리 시각적 계층구조와 동적인 요소로 이루어져 있으므로 정보성과 시지각에 대한 이해가 필요하게 된다. 이 과정을 통해서 스크린 디자인에 있어서 기본적인 정보관리와 시각적 계층구조를 효과적으로 설계하는 방법을 학습하도록 한다.
1. 심미적으로 즐거운 표현(Aesthetically pleasing) – 다음과 같은 프리젠테이션 및 그래픽 디자인 원칙에 따라 시각적 호소력을 제공한다.
화면 요소 간에 의미 있는 대비를 제공한다.
그룹화를 만든다.
화면 요소와 그룹을 정렬 한다.
3차원 표현 제공
효과적으로 색상과 그래픽을 사용한다.
2. 명확성(Clarity) – 인터페이스는 시각적, 개념적, 언어적으로 명확해야 한다.
시각적 요소
기능들
은유
단어와 텍스트
3. 호환성(Compatibility) – 다음과 같이 호환성을 제공해야 한다.
사용자
과제와 직업
제품
사용자의 관점을 채택
4. 이해도(Comprehensibility) – 시스템을 쉽게 이해하고 습득해야 한다. 사용자는 다음을 알아야 한다.
무엇을 해야 할까요?
무엇을 보아야 하는가?
언제 할 것인가?
어디에서 할 것인가?
그것을 하는 이유
그것을 하는 방법
행동, 반응, 시각 준비 및 정보의 흐름은 이해하기 쉽고 문맥에 배치할 수 있는 현명한 순서여야 한다.
5. 구성(Configurability) – 설정의 개인화, 구성 및 재구성을 쉽게 허용한다.
제어 감각을 높인다.
이해의 적극적인 역할을 장려한다.
6. 일관성(Consistency) – 시스템은 같은 처리량을 보고, 작동하고, 적용해야 한다. 비슷한 구성 요소가 있어야 한다.
비슷한 모양
비슷한 용도
비슷하게 작동
동일한 조치는 항상 동일한 결과를 산출해야 한다.
요소의 기능이 변경되어서는 안 된다.
표준 요소의 위치는 변경되어서는 안 된다.
7. 제어(Control) – 사용자는 상호 작용을 제어해야 한다.
명시적 사용자 요청으로 인해 작업이 수행되어야 한다.
작업을 신속하게 수행해야 한다.
작업은 중단 또는 종료할 수 있어야 한다.
사용자는 오류가 발생하면 절대로 중단해서는 안 된다.
유지되는 컨텍스트는 사용자의 관점이어야 한다.
목표를 달성하기 위한 수단은 사용자의 기술, 경험, 습관 및 선호도와 융통성 있고 호환 가능해야 한다.
사용자가 사용할 수 있는 작업을 제한하기 때문에 상태를 피하야 한다.
항상 적절한 기본값 집합을 제공하면서 사용자가 인터페이스 측면을 사용자 정의 할 수 있도록 허용한다.
8. 직접성(Directness) – 직무 수행을 위한 직접적인 방법을 제공한다.
사용할 수 있는 대안이 표시되어야 하며,
객체에 대한 동작의 효과가 표시되어야 한다.
9. 효율성(Efficiency)
눈과 손의 움직임과 기타 제어 동작을 최소화 한다.
다양한 시스템 제어 간의 전환은 쉽고 자유롭게 이루어져야 한다.
탐색 경로는 가능한 한 짧아야 합니다.
화면을 통한 눈의 움직임은 분명하고 순차적이어야 한다.
가능할 때마다 사용자의 요구와 필요를 예측한다.
10. 친숙함(Familiarity) – 익숙한 개념을 사용하고 사용자에게 익숙한 언어를 사용한다.
인터페이스를 자연스럽게 유지하여 사용자의 행동 패턴을 모방한다.
현실 세계의 은유를 사용한다.
11. 유연성(Flexibility) – 시스템은 사용자의 다양한 요구에 따라 유연해야 하며 다음을 기반으로 한 수준 및 유형의 성과를 낼 수 있어야 한다.
각 사용자의 지식과 기술.
각 사용자의 경험.
각 사용자의 개인 취향
각 사용자의 습관
그 순간의 조건
12. 용서(Forgiveness)
공통적이고 피할 수 없는 인간의 실수를 이해해야 한다.
가능할 때마다 오류가 발생하지 않도록 한다.
가능한 치명적인 오류로부터 보호해야 한다.
오류가 발생하면 건설적인 메시지를 제공한다.
13. 예측(Predictability) – 사용자는 작업의 자연스러운 진행을 예상할 수 있어야 한다.
뚜렷하고 인식 가능한 화면 요소 제공
수행할 행동 결과에 단서를 제공한다.
모든 기대는 완전히 균등하게 이루어져야 한다.
14. 복구(Recovery) – 시스템에서 허용해야 하는 항목은 다음과 같다.
폐지되거나 취소될 명령 또는 작업.
어려움이 발생하면 즉시 특정 시점으로 복귀한다.
의 결과로 사용자가 결코 업무를 잃지 않도록 한다.
그들의 부분에 대한 오류
H/W, S/W 또는 통신 문제.
15. 대응성(Responsiveness) – 시스템은 사용자의 요청에 신속하게 응답해야 한다.
모든 사용자 작업에 대한 즉각적인 승인 제공
비쥬얼
텍스트
귀의
16. 단순성(Simplicity)
가능한 한 간단한 인터페이스 제공
기본값 제공
화면 정렬 지점을 최소화한다.
드문 행동을 희생시키면서 일반적인 행동을 간단하게 만든다.
일관성과 일관성 제공
단순성을 제공하는 5가지 방법 :
먼저 공통적이고 필요한 기능을 제시한다.
눈에 띄게 중요한 기능,
더 정교하고 자주 사용하지 않는 기능 숨기기
17. 투명성(Transparency)
인터페이스의 메커니즘에 상관없이 사용자가 작업이나 작업에 집중할 수 있게 해야 한다.
컴퓨터 내부의 작동 및 작동 알림은 사용자에게 보이지 않아야 한다.
18. 타협(Trade-offs)
최종 디자인은 종종 상충하는 설계 원리를 균형을 이루는 일련의 절충안을 기반으로 한다.
사람의 요구 사항은 항상 기술적 요구 사항보다 우선한다.
아래의 3가지 항목에 관한 자기 생각을 댓글로 남기기 바랍니다.
일관성/Consistency
휴대폰 앱을 사용하면서 UI 또는 GUI에서 일관성이 지켜지지 않아 불편함을 느낀 적이 있는지 생각해보고, 예를 들어 자유롭게 설명해봅시다.
시각적 계층구조/Hierarchy
홈페이지에서는 많은 양의 컨텐츠를 구조화하여 보여주기위해 시각적 계층구조를 이용하여 보여주고 있습니다. 강원대학교 홈페이지에서 시각적 계층구조를 만들기 위해 사용한 방법 들이 어떤것이 있는지 살펴보고, 적절한 방식으로 사용하고 있는지(혹은 그렇지 않다고 생각되는 부분도 있는지) 생각해보고 그 이유를 설명해봅시다.
개성/Personality
인터페이스를 사용하면서 느낄 수 있는 매우 다양한 인상과 개성이 있고 이로 인해 사용자들은 좋고 싫음에 대한 기호가 생기기도합니다. 예를 들어 밝음, 긴장감, 강렬함, 깔끔함, 고급스러움, 고전적임, 미래적임, 신비로움 등등 다양한 인상을 줄 수 있습니다.
각자 정한 개인별 과제가 무엇이고, 개인별 과제에서 내가 전달하고 싶은 Personality는 어떤 인상/어떤 개성인지 구체적으로 설명해 봅시다.
반응형 웹 디자인은 다중 스크린 문제에 대한 훌륭한 솔루션이지만 인쇄 관점에서 볼 때 어려움을 겪습니다. 고정 된 페이지 크기가 없으며, 밀리미터 또는 인치가 없으며, 물리적 인 제약이 없습니다. 점점 더 많은 방문자가 웹 사이트를 열 수 있기 때문에 데스크톱 및 모바일 용 픽셀 단위로만 설계하는 것도 과거입니다. 따라서 여기에 반응형 웹 디자인의 기본 원리를 설명해 보겠습니다. 간단하게 유지하기 위해 레이아웃에 중점을 둘 것입니다.
반응형(Responsive) vs 적응형(Adaptive) 웹 디자인
그것은 같아 보일지 모르지만 그렇지 않습니다. 두 가지 방법 모두 서로 보완 적이므로 올바른 방법이나 잘못된 방법은 없습니다. 내용을 결정하게 하십시오.
흐름(The Flow)
화면 크기가 작아짐에 따라 콘텐츠가 더 많은 수직 공간을 차지하기 시작하고 아래의 모든 내용이 푸시 다운됩니다. 이를 흐름이라고 합니다. 픽셀과 포인트로 디자인하는데 익숙하다면 이해하기 까다로울 수 있지만 익숙해지면 완전히 이해할 수 있습니다.
상대 단위(Relative units)
캔버스는 데스크톱, 모바일 화면 또는 그 사이의 모든 것일 수 있습니다. 픽셀 밀도도 다양 할 수 있으므로 유연하고 모든 곳에서 작동하는 장치가 필요합니다. 그것은 퍼센트와 같은 상대적 단위가 유용 할 때입니다. 그래서 무언가를 50% 넓이로 만들면 항상 화면의 절반 (또는 viewport 창은 열려있는 브라우저 창의 크기)이됩니다.
브레이크포인트(Breakpoints)
브레이크포인트를 사용하면 레이아웃을 미리 정의 된 지점에서 변경할 수 있습니다. 즉, 데스크톱에서는 3 개의 열이 있지만 휴대 기기에서는 1 개의 열만 있습니다. 대부분의 CSS 속성은 하나의 중단 점에서 다른 중단 점으로 변경할 수 있습니다. 일반적으로 콘텐츠를 두는 위치는 콘텐츠에 따라 다릅니다. 문장이 중단되면 중단 점을 추가해야 할 수도 있습니다. 그러나 주의해서 사용하십시오. 무엇이 영향을 미치는지를 이해하는 것이 어려울 때 빠르게 지저분해질 수 있습니다.
최대 값(Max values)과 최소 값(Min values)
때로는 콘텐츠가 휴대 기기와 같이 화면의 전체 너비를 차지하지만 콘텐츠가 TV 화면의 전체 너비까지 펼쳐지는 것이 좋지 않은 경우가 종종 있습니다. 이것이 Min / Max 값이 도움이되는 이유입니다. 예를 들어 너비가 100%이고 최대 너비가 1000px 인 경우 내용이 화면을 채우지 만 1000px를 넘지는 않습니다.
중첩 된 객체(Nested objects)
상대 위치를 기억 하십시오. 서로에 따라 많은 요소를 가지면 제어하기가 어려우므로 컨테이너의 요소를 래핑하면 더 이해하기 쉽고 깨끗하며 깔끔하게 유지할 수 있습니다. 여기서 픽셀과 같은 정적 단위가 도움이 될 수 있습니다. 로고와 버튼처럼 크기를 조정하지 않으려는 콘텐츠에 유용합니다.
모바일(Mobile) 또는 데스크톱(Desktop) 우선
기술적으로 작은 화면에서 큰 화면 (모바일 우선) 또는 그 반대로 (데스크톱 우선) 프로젝트를 시작하면 큰 차이가 없습니다. 그러나 모바일을 처음 사용하는 경우 추가 제한 사항이 추가되고 의사 결정을 내리는 데 도움이됩니다. 종종 사람들은 한 번에 양 끝에서 시작하기 때문에 실제로 무엇이 더 잘 작동하는지 확인해야 합니다.
웹 폰트 vs 시스템 폰트
귀하의 웹 사이트에 멋지게 보이는 Futura 또는 Didot을 원하십니까? 웹 폰트 사용! 그들이 멋지게 보일지라도, 각각이 다운로드 될 것이고 더 많이 가질수록 페이지를 로드하는데 더 오래 걸릴 것임을 기억하십시오. 반면에 시스템 글꼴은 매우 빠르며 사용자가 로컬 글꼴을 가지고 있지 않은 경우를 제외하고는 기본 글꼴로 돌아갑니다.
Bitmap images vs Vectors
아이콘에 많은 세부 정보가 있고 멋진 효과가 적용 되었습니까? 그렇다면 비트 맵을 사용하십시오. 그렇지 않은 경우 벡터 이미지 사용을 고려하십시오. 비트 맵의 경우 jpg, png 또는 gif를 사용하고 벡터의 경우 SVG 또는 아이콘 글꼴을 사용하는 것이 가장 좋습니다. 각각에는 몇 가지 이점과 단점이 있습니다. 그러나 크기를 염두에 두십시오. 사진을 최적화하지 않으면 온라인 상태로 만들 수 없습니다. 반면에 벡터는 종종 작지만 일부 오래된 브라우저는 벡터를 지원하지 않습니다. 또한 곡선이 많으면 비트맵보다 무거울 수 있으므로 현명하게 선택하십시오.
HTML 태그는 HTML 요소의 시작과 끝을 표시하며 속성을 포함 할 수 있습니다. 다음과 같이 사용됩니다.
<tagname>Element content</tagname><tagnameattributename="attributevalue">Element content</tagname><!-- or, for the few attributes without values, simply: --><tagnameattributename>Element content</tagname><!-- or, for the few elements without content, simply: --><tagname><tagnameattributename="attributevalue"><tagname>Element content</tagname><tagnameattributename="attributevalue">Element content</tagname><!-- or, for the few attributes without values, simply: --><tagnameattributename>Element content</tagname><!-- or, for the few elements without content, simply: --><tagname><tagnameattributename="attributevalue">
전역 속성(global attributes)은 각 페이지에 나열된 특정 속성과 함께 모든 태그와 함께 사용할 수 있습니다.
