디지탈콘텐츠특론 2016. 05. 18. 멀티미디어공학과 이 우 섭
목 차 1.표현 설계 및 구현방법 정의 및 목적 2. 표현 설계 요소 3. 효율적인 디자인 4. 감성적 디자인 5. 표현설계 과정 6. 표현 설계 가이드 라인 2
1.표현 설계 및 구현방법 정의 및 목적 표현설계의 정의 및 목적 감성적인 디자인 정의 및 목적 3
표현설계의 정의 및 목적 + 정의 눈으로 보이는 모든 것(시각)의 디자인과 관련된 부분으로 사용자와 직접적으로 대면하는 최일선의 전달 체계 + 목적 : 시각적인 의사 소통 을 통한 사용자 만족 4
표현설계의 정의 및 목적 + 정의 표현 설계의 발전으로 시각뿐만 아니라 인체의 감각(청각, 촉각)을 통하여 사용자와 직접적으로 대면하는 최일선의 전달 체계 + 목적 : 5감각의 의사 소통 을 통한 사용자 만족 [시각+촉각]을 통한 표현 설계 [시각 +청각]을 통한 표현 설계 [시각 +청각+촉각]을 통한 표현 설계 5
효율적인 디자인 정의 및 목적 + 정의 사용자의 사용 목적을 효과적으로 달성시켜 주는 디자인으로서 효과적인 정보 전달에 도움이 되는 디자인 + 목적 : 디지털 콘텐츠 사용 시 사용자의 효율성 증대 및 인지적 측면 만족 감성적인 디자인 정의 및 목적 + 정의 사용자의 감성적 욕구를 만족시켜 주는 디자인 + 목적 : 사용자의 즐거움, 감성적 만족 증대 및 사이트 아이덴티티 구축 6
2. 표현 설계 요소 색 레이아웃 타이포그라피 메타포 7
디자인요소 각 페이지를 구성하는 구성요소가 가지는 물리적 특성과 그에 따른 디자인요소 크기 모양 색채 위치 단순 디자인요소 요소 조합 레이아웃 타이포그라피 메타포 복합디자인요소 8
색 디지털 콘텐츠 측면 사용자가 즉시, 쉽게 인지할 수 있는 색을 사용함으로써 많은 정보를 전달하는데 적합한 요소 물리적 특성 광원, 물체, 눈의 상호작용에 의해 특정광원을 반사하는 작용 색의 3요소(광원, 물체, 눈) 9
색의 3속성 색상 태양광선을 스펙트럼으로 분산 시켰을때 보이는 무지개 색 띠 명도 빛의 반사율에 따른 색의 밝고 어두움 정도 채도 색의 탁한 정도 무채색=0, 순색에 가까울수록 채도가 높아짐 먼셀 색상체계 색의 3가지 속성을 H,V,C로 나타낸 시스템 색상 10 먼셀 색상체계
명 암 명암 적용 사례 채도 적용 사례 11
톤 정의 : 명도와 채도와 합쳐진 개념. 대상의 이미지(느낌)에 큰 영향을 줌 PCCS(practical Color Coordinate System ) - 톤에 기초를 둔 색상 시스템 - 감성적 어휘를 체계화 ->쉽게 디자인의 감성적 구현을 도모 푸른색과 녹색계열의 밝은 톤으로 구성된 바탕화면 톤에 기초를 둔 PCCS 색상체계 12
레이아웃 정의 : 화면에 대한 전반적인 배열을 의미함 1. 면 분할 : 화면의 평면적 공간의 적절한 분할 2. 구성요소의 배열 : 분할된 면에 어떤 식으로 구성요소를 배열할 것인지 설계함 면 분할 (다양한 분할 형태) 13 구성요소의 배열
- 레이아웃 사례 14
타이포그라피(Typography) 정의 : 글자로 이루어진 인쇄의 기술이나 인쇄물을 뜻함 기능적 역할 말이 갖는 의미를 전달하는 역할 형태적 역할 글자의 조형미를 이용해 감성적 만족을 부여하는 역할 고려할 대표적 특징 글자체, 글자크기, 행간, 자간 글자체 15 자간과 행간
메타포 정의 : 디지털 콘텐츠나 시스템의 기능을 함축적으로 시각화 하는 작업 1. 메타포를 실제 사용할지 신중하게 고려해야 됨 2. 일관성을 가지고 콘텐츠 전체에 적용하는 것이 중요 (형태 기능이 일정하지 않을 경우 혼란 가중 ) 지구를 네비게이션 메타포로 사용한 예 www.channeli.net/zzaloo/ 네비게이션 조정기(Controler) 메타포를 사용한 예 www.legomindstorms.com 16
3. 효율적인 디자인 레이아웃(계층구조) 색 타이포그라피와 가독성 메타포 일관성과 다양성 17
레이아웃 측면 시각적 계층구조 화면 구성에서 사용자가 구성요소를 차등(우선순위)적으로 인지하도록 설계하는 것 사용자 시선을 유도하는 효과적 방법 1. 전체적으로 구성요소의 색,형태,크기 대비를 균형적으로 배치 2. 구성요소들의 특질들의 대비가 높은 곳이 사용자 집중이 높다 사용자가 화면을 스캐닝하는 과정 18 시각적 계층구조를 효과적으로 구현한 Apple.com 사이트
색상적 측면 - 색 코딩 : 형태 및 색으로 정보를 전달 하는 것 - 구조단서 : 색상과 톤을 계층구조에 적용하여 표현 - 가독성 : 사용자가 글자를 볼때 의미를 파악할수 있는 정도 명도차이에 의한 영향 타이포그라피의 특징에 의한 영향 색 코딩 - 달력의 색상에 19 따른 예약상태를 표현한 예
색상적 측면 구조단서(우선순위) 색상을 계층 구조에 적용한 구조단서의 사례(동아일보) 톤 20
색상적 측면 타이포그래피에 의한 가독성 1. 대문자 소문자 글자에 따른 그림 넣기 2. 왼쪽 정렬, 중앙 정렬에 따른 그림 넣기 3. 안티 에일리어스 된 글자에 따른 그림 넣기(p335 참조) 4. 행간 자간에 따른 그림 넣기 21 명도차이에 의한 글자 가독성
메타포 정의 : 시스템의 기능을 함축적으로 시각화 함 표현 설계 요소에서의 이미 설명됨 일관성과 다양성 일관성과 다양성이 균형을 이뤄야 함. 일관성이 높은 경우 지루해짐 <-> 다양성이 높은 경우 혼란스러움 일관성 : 쉽게 적응할 수 있음. 예측이 수월함. 규모가 클수록 유지가 어려움 다양성 : 지루함을 해소. 즐거움을 선사. 다채로운 색, 새로운 디자인 및 그림 등을 적용 22
일관성 페이지 간의 일관성을 통해서 사용자는 앞으로 경험할 페이지들에 대해서 쉽게 적응 하고, 전반적인 내비게이션 제어와 정보의 위치를 자신감을 가지고 예측 할 수 있다. 23
다양성 일관성의 단점인 지루함을 해소하기 위해서 다양성이 필요하다. 비주얼 측면에서 다 양성을 가지기 위해서 가장 안전한 방법은 색을 이용하는 것이다. 24
4. 감성적 디자인 감성적 디자인을 위한 시각 법칙 디자인 법칙 감성 차원과 디자인 법칙 25
감성적 디자인의 구현 구현절차 1. 디자인 요소들의 적절한 선택 2. 디자인 요소에 대한 적절한 계획설정 3. 적절한 조화를 디자인 법칙을 통해 구현 크기 색 위치 형태 구성요소 단위 균형,통일,대칭 단순성,연속성 조밀도,리듬 규칙성,대비 평형,비례 디자인 법칙 : 페이지 단위 26 감성적 디자인
디자인 법칙 화면 구성요소들이 가지는 속성인 디자인 요소를 통해 만들어지는 관계를 의미 디자인 요소는 11가지로 분류 1. 균형 화면 구성 배치에서 시각적 무게의 분포를 의미 특정한 개체가 무거워 보이는 것처럼 지각하는것. 균형과 불균형의 요소를 결정 27
디자인 법칙 2. 대칭 화면의 가로 세로 중심선을 축으로 화면 구성요소들의 대칭되는 정도 3. 연속성 사용자의 시각에 관련된 법칙. 개체의 배치를 조절해 시각적 움직임을 수월하 게 함 28
4. 리듬 똑같거나 비슷한 요소들이 뚜렷하게 반복되거나 일정한 비율로 변화가 반복 5. 대비 화면구성요소의 형태,색,크기의 차이를 의미 대조적인 성질(검은색-흰색, 큰 것-작은 것, 곡선-직선) 등에서 발생 29
6. 비례 하나의 개체에서의 가로세로의 비율 1:1, 1:1.414, 1:1.618,1:2비율이 많이 사용됨 7. 통일 여러 객체들의 집합이 시각전인 면에서 하나로 느껴지는 것 30
8. 단순성 같은정보에서 불필요한 요소를 배제하여 전달효과를 높임 화면구성요소의 수를 최적화, 가로세로 정렬점을 최소화 하여 얻음 9. 조밀도 정보를 최적화된 공간에서 보여주는 것을 의미 적절한 공간에 적절한 양의 정보를 배열 31
10. 규칙성 화면 구성요소의 가로세로 정렬점의 규칙이나 일관성 인간의 지각과 기억은 규칙성에 효과적으로 작용됨 11. 평형 화면의 중심과 구성요소들의 집합의 중심이 일치하는가 하는정도 평형성은 집합의 중심이 화면의 중심과 일치할수록 높다. 32
3. 감성 차원과 디자인 법칙 IV. 감성적 디자인 1) 감성:외부로 부터 입력되는 자극 때문에 개끗하다, 순수하다, 측은하다 등 다양한 느낌 경험. 13개 감성 차원과 감성 형용사 어휘 감성차원 의미 대표 감성어휘 1 대표 감성어휘 2 대표 감성어휘 3 감성차원 1 밝음 은은하다 환하다 맑다 감성차원 2 긴장감 긴장감 있다 날카롭다 감성차원 3 강함 강렬하다 힘있다 감성차원 4 깔끔함 깔끔하다 고요하다 균형적이다 감성차원 5 고급적임 고급스럽다 고상하다 고귀하다 감성차원 6 대중적임 대중적이다 익숙하다 감성차원 7 깜찍함 깜찍하다 귀엽다 감성차원 8 다채로움 다채롭다 생명력 있다 섹시하다 감성차원 9 간결함 간명하다 간결하다 감성차원 10 고전적임 고전적이다 과거지향적이다 감성차원 11 미래적임 미래적이다 초현실적이다 감성차원 12 신비감 신비하다 모호하다 감성차원 13 희망적임 건실하다 희망적이다
1감성차원 심리적 요소인 감성의 차원을 파악하기 위해 감성과학에서 자주 사용하 는 방법으로 감성 형용사 어휘를 이용. 2감성강도 각각의 감성 차원은 그에 따른 강도를 가지고 있으며, 표현 강도 높을수록 사용자는 디자이너가 의도한 감성을 높은 강도로 느낌. 감성차원 감성차원 감성차원 감성차원 감성차원 감성차원 감 성 강 도 34
2)디자인 법칙을 적용한 감성의 표현 1성공적인 감성적 디자인:디자이너가 의도한 감성을 높은 강도로 사용 자에게 전달하는 것 2실패한 감성적 디자인:디자이너가 의도한 감성차원이 제대로 전달되 지 못한 경우 a. 감성차원에 적합한 디자인 요소가 선택되었더라도 감성 강도가 충분하게 표현되지 못했을 경우 b. 의도한 감성 차원 자체가 잘못 표현되었을 경우 35
감성적인 디자인 디자인 법칙을 적용한 감성의 표현 36
5. 표현설계 과정 37
표현 설계 과정 단계1: 비주얼 아이덴티티(visual identity)를 설정하라. 제5장에서 작성했던 브랜드 아이덴티티 분석 보고서를 기초로 해서 콘텐츠에 전체적으로 적용할 메타포와 각 카테고리별 색상 계획,그리고 타이포그라피의 특성을 설정한다. 단계2: 스토리 보드(storyboard)를 제작하라. 스토리 보드는 상호작용과 레이아웃을 설계할 때 사용되는 자료로 시나리오 분석(6장)과 항해 설 계(7장)를 바탕으로 구체적인 화면 배치 등을 구성한다. 여기에서 페이지 간 배치의 일관성과 다양성을 정한다. 앞의 기획 단계에서의 기획을 바탕으로 구체적인 화면 배치 등을 구성한다. 단계3: 프로토타입 (prototype)을 제작하라 단계1을 모니터 상에서 실제로 구현하며, 페이지 사이의 특성도 검증해야 한다. 38
표현 설계 과정 단계4: 프로토타입을 검증하라. 단계3에서 구현된 프로토타입을 사용자에게 보여주고 검증해야 한다. 단계5: 전체적인 디지털 콘텐츠의 표현설계를 제작하라. 단계5의 결과를 바탕으로 프로토타입을 수정하고 수정된 프로토타입을 바탕으로 전체 디지털 콘 텐츠를 만든다. 단계6: 디지털 콘텐츠 전체 디자인을 평가하라 전체적인 디자인의 일관성과 다양성을 평가한다. 39
6. 표현 설계 가이드 라인 일반 원칙 플랫폼별 표현 설계의 고려 사항 및 가이드라인 40
일반적인 원칙 효율적 디자인을 위해 디자인원리와 디자인 요소를 설정 감성차원을 설정, 감성차원을 구현하기 위한 디자인 원리와 디자인 요소를 설정 효율적 디자인을 위한 디자인 원리와 감성적 디자인을 위한 디자인 원리를 조율 페이지 사이의 일관성과 다양성의 요소를 설정 플랫폼별 가이드 라인 테스크 톱 : 콘텐츠의 유용성과 감성적인 측면이 균형있게 구현되도록 함 핸드폰 : 효율적인 타이포그라피 구현, 소프트 키와 메뉴에 대한 새로운 접근 디지털 TV : 화면의 단순성과 일관성을 이용한 효율적 디자인 낮은 해상도 등 기술적인 측면 고려 41
요약 표현 설계의 목적은 효율적이며, 감성적인 디지털 콘텐츠를 구축하는 데 있다. 표현 설계의 요소는 색, 크기, 위치, 모양 같은 단순 요소와 배치, 타이포그라피 같은 복합 요소로 나누어진다. 색의 3요소는 색상, 명도, 채도이다. 타이포그라피의 역할은 기능적 역할과 형태적 역할로 나눌 수 있다. 메타포는 콘텐츠 전체에 걸쳐 일관성 있게 사용해야 그 효과를 볼 수 있다. 레이아웃에서 가장 중요한 요소는 사용에게 시각적 계층 구조를 제공함으로써 효과적인 눈의 흐름을 유도할 수 있어야 한다는 것이다. 색상과 톤을 이용하면 복잡한 정보 구조를 일목요연하게 표현할 수 있다. 가독성에 영향을 미치는 것은 글자와 배경 사이의 명도 차이와 집단 사이의 거리 차이라고 할 수 있다. 페이지 사이의 표현 요소로 가장 중요한 것은 일관성과 다양성의 균형을 유지하는 것이다. 적절한 감성을 제공하기 위한 디자인 법칙에는 균형, 대칭, 연속성, 리듬, 대비, 비례, 통일, 단순성, 조밀도, 규칙성, 평형이라는 11 가지 법칙을 들 수 있다. 우리나라 사람들이 디지털 콘텐츠의 화면을 보고 느끼는 대표적인 감성은 밝은, 긴장된, 강한, 깔끔한, 고급스러운, 대중적인, 깜찍한, 다채로운, 간결한, 고전적인, 미래적인, 신비한, 희망적인 감성이다. 42