Page 0: Page 1: 제13장: 인터페이스 디자인: 느낌이 있는 디자인 하기 연세대학교 HCI Lab 김진우 "당신이 남들에게 보이는 모습이 바로 당신 자신이다." 에릭 슈피커만(Eric Spiekermann) HCI Lab. @ Yonsei University, Korea http://hci.yonsei.ac.kr Page 2: 공지사항  반대표 진행  유찬호와 반대표가 진행 (외부 심사 위원 초대부터)  최종 발표회 일정  최종발표회: 12월 8일 목요일 오후3시 팀당 총 10분 (5분 발표 + 5분 토론)    최종 보고서 제출: 분석 + 디자인 2011년 12월 7일 수요일 정오까지 최종 발표 자료 제출: 2011년 12월 8일 목요일 정오까지 LG 전자 최진해 실장, 팀 인터페이스 이성혜 사장, 북큐브 남지원 이사 발표 양식은 본인들이 원하는 것 발표 내용은 video 촬영 예정 평가 항목 • 사용성 (25%), 감성 (25%), 유용성 (25%), 참신성 (25%) 외부 심사위원   12월 13일 수업 시간에 도전 HCI 실시 본인들 생각에 가장 중요하게 배웠다고 생각하는 단답형 질문과 OX 질문을 작성하여 그에 대한 답과 함께 조교에게 메일로 12월 12일 정오까지 전달 • 왜 그 질문이 중요한지에 대하서도 이야기 해주면 좋음 교재와 프린트아웃 등 원하는 것은 무엇이든지 들고 와도 됨 단 컴퓨터와 핸드폰은 꺼두기 최종 1등에게 지금까지의 성과와 상관없이 무조건 A+ 2 Page 3: 오늘의 주제     인터페이스 디자인의 중요성 인터페이스 디자인 요소와 그 효과 기본적인 시각 디자인 요소 시각적 구성   판 페이지 내에서의 시각적 구성 여러 페이지 간의 시각적 배치 시각적 계층구조 가독성 미적 인상  인터페이스 디자인의 효과     사이버 개성   인터페이스 디자인의 발전 방향 인터페이스 디자인의 절차 HCI Lab. @ Yonsei University, Korea http://hci.yonsei.ac.kr 3 / 57 Page 4: 1. 인터페이스 디자인의 중요성  인터페이스 디자인이 중요한 이유  아무리 좋은 컨셉과 튼튼한 정보 구조 및 편리한 행동 구조를 가지고 있다고 할지라도 그 내용이 사용자에게 정확하게 표현되지 못하면 아무 소용이 없음  좋은 인터페이스 디자인의 조건  예쁜 인터페이스가 좋은 인터페이스 디자인가 아니다.  시스템의 가치 모형, 기능 모형, 그리고 구조 모형을 명확하게 사용자에게 표현하여 주는 interface 정확하고 신속하게 시스템을 사용할 수 있도록 시스템의 정보와 기능을 표현하는 interface 개발자가 의도했던 미적 인상이나 개성을 충실하게 표현해주는 interface 4 / 57  사용자들에게  사용자들에게 HCI Lab. @ Yonsei University, Korea http://hci.yonsei.ac.kr Page 5: 2. 인터페이스 디자인 요소와 효과  디자인 요소  멀티 모달 디자인 요소  시각, 청각, 촉각  기본적 시각 디자인 요소  색, 형태, 레이아웃, 글자체, 그래픽  복합적 시각 디자인 요소  페이지 내의 visual composition  페이지 간의 visual composition  효과  인지적  가독성 효과  시각적 계층구조  감성적  개성 효과  미적인상 HCI Lab. @ Yonsei University, Korea http://hci.yonsei.ac.kr 5 / 57 Page 6: 3. 기본적인 시각 디자인 요소  색 (color)  모양 (shape)  레이아웃 (layout)  글자체 (typography)  그래픽 (graphics) 일반적 WIMP 그래픽 디자인 요소  이미지, 다이어그램, 테이블과 그래프  애니메이션 (Animation) HCI Lab. @ Yonsei University, Korea http://hci.yonsei.ac.kr 6 / 57 Page 7: WIMP의 구성 요소  기본 구성 요소    윈도우 (Window) 아이콘 (Icon) 메뉴 (Menu)  포인터 (Pointer)  부가적인 구성 요소    버튼 대화창 … HCI Lab. 2011-12-07 @ Yonsei University, Korea http://hci.yonsei.ac.kr 7 / 114 Page 8: WIMP의 네 가지 요소 Icon Window HCI Lab. 2011-12-07 @ Yonsei University, Korea http://hci.yonsei.ac.kr - 일반적인 Windows Application은 대부분 혼합형 스타일의 인터페이스를 가지고 있다. Pointer Menu 8 / 114 Page 9: 윈도우  정의  화면에서 독자적으로 조작될 수 있는 일정 부분의 시각적 디스플레이 부수적 요소  스크롤 바 (scroll bar)  타이틀 바 (title bar)  상태 바 (status bar)  툴 바 (tool bar)   종류   주 윈도우와 부 윈도우 단일 윈도우와 다중 윈도우 HCI Lab. 2011-12-07 @ Yonsei University, Korea http://hci.yonsei.ac.kr 9 / 114 Page 10: 메뉴  정의  사용자로 하여금 어떠한 대안들이 가능한지를 알려주고, 그 중에서 특정 대안을 선택하는 과정을 손쉽게 해주는 인터페이스  종류     문자형 메뉴, 그래픽 메뉴, 혼합형 메뉴 정지형 메뉴와 풀다운 (pull-down) 메뉴 및 팝업 (pop-up) 메뉴 선형 메뉴와 비선형 메뉴 독립형 메뉴와 연결형 메뉴 HCI Lab. 2011-12-07 @ Yonsei University, Korea http://hci.yonsei.ac.kr 10 / 114 Page 11: 아이콘  정의  무엇인가 다른 대상을 조그마한 그림과 같은 시각 정보를 이용하여 표현하는 인터페이스  종류    행위를 표현하는 아이콘 대상을 표현하는 아이콘 수학적인 계산식을 표현하는 아이콘   삼차원적인 아이콘 감정을 나타내는 이모티콘 HCI Lab. 2011-12-07 @ Yonsei University, Korea http://hci.yonsei.ac.kr 11 / 114 Page 12: 포인터 (pointer)  정의  마우스와 같은 입력 장치에 의해서 조정되는 화면 상의 커서 (cursor)  기능  화면 상에서 입력이 이루어질 수 있는 지점을 명시하여 주는 것 현재 시스템이 어떠한 상태에 있는지를 보여주는 것  HCI Lab. 2011-12-07 @ Yonsei University, Korea http://hci.yonsei.ac.kr 12 / 114 Page 13: 기타 GUI구성 요소  버튼 (button)  특정 작업을 수행하기 위해서 선택할 수 있는 부분  실행 버튼 (executable buttons):시스템으로 하여금 특정 작업을 수행하게 한다.  선택버튼 (selectable buttons)은 사용자들이 대안을 선택하도록 한다  대화창 (dialog box)  사용자와 시스템 간에 대화를 하기 위한 별도의 창  비모드 (modaless dialogue box): 다른 창이 열려져 있음과 상관이 없이 진행될 수 있는 대화창  모드 (modal dialogue box): 다른 창의 상태에 의해서 영향을 받는 대화창 HCI Lab. 2011-12-07 @ Yonsei University, Korea http://hci.yonsei.ac.kr 13 / 114 Page 14: 4. 시각적 구성  한 제품이나 서비스 내에서의 시각적 구성 균형성, 대칭성, 연속성, 리듬감, 대비감, 비례감, 통일감, 단순성, 조밀도, 규칙성, 안정감  여러 제품이나 서비스 간의 시각적 구성 일관성 다양성 HCI Lab. @ Yonsei University, Korea http://hci.yonsei.ac.kr 14 / 57 Page 15: 균형성 HCI Lab. @ Yonsei University, Korea http://hci.yonsei.ac.kr 15 / 57 Page 16: 대칭성 HCI Lab. @ Yonsei University, Korea http://hci.yonsei.ac.kr 16 / 57 Page 17: 연속성 HCI Lab. @ Yonsei University, Korea http://hci.yonsei.ac.kr 17 / 57 Page 18: 리듬감 HCI Lab. @ Yonsei University, Korea http://hci.yonsei.ac.kr 18 / 57 Page 19: 대비감 HCI Lab. @ Yonsei University, Korea http://hci.yonsei.ac.kr 19 / 57 Page 20: 비례감 HCI Lab. @ Yonsei University, Korea http://hci.yonsei.ac.kr 20 / 57 Page 21: 통일감 HCI Lab. @ Yonsei University, Korea http://hci.yonsei.ac.kr 21 / 57 Page 22: 단순성 HCI Lab. @ Yonsei University, Korea http://hci.yonsei.ac.kr 22 / 57 Page 23: 조밀도 HCI Lab. @ Yonsei University, Korea http://hci.yonsei.ac.kr 23 / 57 Page 24: 규칙성 HCI Lab. @ Yonsei University, Korea http://hci.yonsei.ac.kr 24 / 57 Page 25: 안정감 HCI Lab. @ Yonsei University, Korea http://hci.yonsei.ac.kr 25 / 57 Page 26: 일관성 HCI Lab. @ Yonsei University, Korea http://hci.yonsei.ac.kr 26 / 57 Page 27: 다양성 HCI Lab. @ Yonsei University, Korea http://hci.yonsei.ac.kr 27 / 57 Page 28: 획일성과 다양성의 조화 HCI Lab. @ Yonsei University, Korea http://hci.yonsei.ac.kr 28 / 57 Page 29: 5. 인터페이스 디자인의 효과  인지적 효과 시각적 가독성 계층구조  감성적 효과 미적 인상 개성 사이버 HCI Lab. @ Yonsei University, Korea http://hci.yonsei.ac.kr 29 / 57 Page 30: 5.1 시각적 계층구조  정의  일종의 화면 구성 법칙  한 페이지 안의 구성 요소의 위치와 구성 요소간의 관계를 설정함에 있어서 사용자가 구성 요소를 단계적으로 인지하도록 설계하는 것을 의미  방법  대비  색, 형태, 크기 등의 차이를 극대화하여 주의를 집중시킨다.  전경, 중경, 배경, 외경의 구분 배치 톤을 이용한 시각적 계층구조  중요도에 따라서 한 화면의 정보를 전경, 중경, 배경, 외경으로 구분  기능별  색상과  정보를 제공하는 부분과 기능을 제공하는 부분으로 구분  색상은 카테고리 분류  톤은 계층적 깊이 분류 HCI Lab. @ Yonsei University, Korea http://hci.yonsei.ac.kr 30 / 57 Page 31: 대비를 이용한 시각적 계층 구조의 예 모노톤 계열의 색상 속에서 강조하고자 하는 부분에서만 컬러를 사용 화면을 구성하고 있는 3개의 정사각형의 크기를 차별화 함으로써 크 기에서 오는 긴장감 역시 유도 서술된 텍스트의 형태도 일반 텍스트는 명도와 채도가 다소 떨어지는 색을 사용하고 있지만 강조하고자 하는 부분에서는 굵은 글씨체와 글 씨 서체 자체의 변화 그리고 명도 채도에 변화를 줌 HCI Lab. @ Yonsei University, Korea http://hci.yonsei.ac.kr 31 / 57 Page 32: 외경을 이용한 시각적 계층 구조의 예 HCI Lab. @ Yonsei University, Korea http://hci.yonsei.ac.kr 32 / 57 Page 33: 기능별 배치를 통한 시각적 계층 구조의 예   기능적인 부분과 정보적인 부분 사용자가 페이지를 이동하더라도 항상 보여지는 정보와 사용자의 입력과 조작에 의해 새롭게 보여지는 내용 HCI Lab. @ Yonsei University, Korea http://hci.yonsei.ac.kr 33 / 57 Page 34: 색상과 톤을 이용한 시각적 계층 구조-1 HCI Lab. @ Yonsei University, Korea http://hci.yonsei.ac.kr 34 / 57 Page 35: 색상과 톤을 이용한 시각적 계층 구조-2 HCI Lab. @ Yonsei University, Korea http://hci.yonsei.ac.kr 35 / 57 Page 36: 5.2 가독성 색  명도차가 중요함 색상차보다 더  글자체  소문자, 산 세리프체, 그리고 보통체가 더 좋음 정렬과 행간 길이가 긴 것이 더 좋음 알리아스가 안되어 있는 것이 더 좋음 36 / 57  배치  좌측  이미지  안티 HCI Lab. @ Yonsei University, Korea http://hci.yonsei.ac.kr Page 37: 4. 미적 인상  정의  외부의 추가적 자극에 의해서 각인되기는 했지만 아직 정서로 관념화되지 않은 감성 인상의 차원 (의미가 추가되지 않은 인상) 1: 2:  밝은 인상  어두운 인상  종류  기본적  차원 인상의 차원 (의미가 추가된 인상: 시대에 따라서 많이 변함) 1: 2: 3:  고급스러움  대중적임 차원 차원  고전적임  미래적  차원  차분한 인상  역동적인 인상  차원 3:  간결함  다채로움 차원  희망적  절망적 HCI Lab. @ Yonsei University, Korea http://hci.yonsei.ac.kr Page 38: 밝음 vs. 어두움 밝음 배경이미지 명도 높음 메인메뉴의 채도 높음 각진 형태의 제목 피함 메인 이미지와 배경 갂 명도 차이 적음 어두움 배경이미지 명도 낮음 메인메뉴의 채도 낮음 각진 형태의 제목 선호 메인 이미지와 배경 갂 명도 차이 큼 HCI Lab. @ Yonsei University, Korea http://hci.yonsei.ac.kr 38 / 57 Page 39: 차분함 vs. 역동적인 차분함 일관된 글자체 선호 안정적 배치 깔끔한 이미지 사용 채도가 낮은 메인 이미지와 질감 선호 역동적인 각진 모양의 이미지 사용 제목의 글자 굵기 얇음 메뉴 명도 낮음 다양한 모습과 질감의 이미지 선호 HCI Lab. @ Yonsei University, Korea http://hci.yonsei.ac.kr 39 / 57 Page 40: 간결함 vs. 다채로움 간결함 이미지의 수를 제한 채도가 낮은 메인 이미지 사용 배경과 메인 이미지 갂 명도 차이 큼 다채로움 메뉴바와 배경색갂의 색상 대비차 큼 다양한 색상의 메인 이미지를 사용 이미지와 도형등의 엣지있는 요소 사용 HCI Lab. @ Yonsei University, Korea http://hci.yonsei.ac.kr 40 / 57 Page 41: 고급스러움 vs. 대중적임 고급스러움 낮은 채도의 메인 이미지를 사용 대중적임 밝은 명도의 배경 사용 단숚한 배경 선호 다양한 형태의 제목 선호 시각적 요소 절제 및 조화 칚숙한 메인메뉴와 화면분할 HCI Lab. @ Yonsei University, Korea http://hci.yonsei.ac.kr 41 / 57 Page 42: 고전적 vs. 미래적 고전적임 채도가 낮은 메뉴와 이미지를 사용 절제된 모양을 채택 굴곡적인 질감의 배경 사용 미래적 명도가 높은 제목 사용 청색 또는 보라 계통의 배경 이미지 사용 독특한 모습의 물체나 어둡고 몽환적인 분위기 HCI Lab. @ Yonsei University, Korea http://hci.yonsei.ac.kr 42 / 57 Page 43: 희망적vs. 절망적 희망적 배경과 제목 갂의 색상의 차 적음 절망적 전체적으로 낮은 채도 색상 사용 메뉴 바와 배경갂의 큰 색상차를 자제 메뉴바와 배경색의 대비 적음 건실한 분위기나 밝은 배경색 사용 금기시 되어 온 색상과 이미지 사용 HCI Lab. @ Yonsei University, Korea http://hci.yonsei.ac.kr 43 / 57 Page 44: 5. 개성  정의  사람 또는 사람처럼 생각할 수 있는 대상에 대해서 가지게 되는 인상 개성  성별, 연령, 사회계층, 개인의 성격 등 인간과 관련된 특성 변수들을 모두 포함하는 개념  브랜드  주어진 브랜드에 결부되는 일련의 인간적 특징  종류  차원 1: 2: 3:  강하고 와일드한 개성  부드럽고 사랑스러운 개성  차원  자유분방한 개성  절제가 있고 분석적인 개성  차원  사교적이고 개방적인 개성  은둔적이고 폐쇄적인 개성 HCI Lab. @ Yonsei University, Korea http://hci.yonsei.ac.kr Page 45: 강한 vs. 부드러운 강하고 와일드한 개성 과시적이거나 거만 복잡한 화면 메뉴바와 배경갂 색상 차이 큼 대담한 색상 이용 부드럽고 사랑스러운 개성 단숚한 화면 일정한 배치 칚근한 면분할과 안정감 아기자기한 일러스트와 이미지 사용 HCI Lab. @ Yonsei University, Korea http://hci.yonsei.ac.kr 45 / 57 Page 46: 자유분방한 vs. 절제적이고 분석적인 자유분방한 개성 일정한 규칙에 구애받지 않는 면분할 사용 대담한 색상 이용 절제 있고 분석적인 개성 대조가 분명한 색상 사용 많은 양의 자료를 밀집하여 보여줌 HCI Lab. @ Yonsei University, Korea http://hci.yonsei.ac.kr 46 / 57 Page 47: 사교적이고 개방적인 vs. 은둔적이고 폐쇄적인 사교적이고 개방적인 개성 높은 채도의 색상차를 이용 분산되어 있다는 느낌 사용 칚근하고 소박한 의미를 가진 이미지 사용 은둔적이고 폐쇄적인 개성 시각적 무게의 분포를 최대한 무겁게 이용 전체적으로 비어있는 듯한 공갂 사용 신비롭고 독특한 배경 이미지나 일러스트 사용 HCI Lab. @ Yonsei University, Korea http://hci.yonsei.ac.kr 47 / 57 Page 48: 최신 인터페이스 디자인 추세  3D 인터페이스 디자인  촉각 디자인 좁은 의미의 촉각 넓은 의미의 haptic  청각 인터페이스 디자인 언어적 청각 인터페이스 청각 인터페이스 비언어적 HCI Lab. @ Yonsei University, Korea http://hci.yonsei.ac.kr 48 / 57 Page 49: 3D 인터페이스 디자인  유희적 용도 자기표현 자연스러운 공간관계 피드백  기능적 용도 미세조작 배경표현 간접조작 HCI Lab. @ Yonsei University, Korea http://hci.yonsei.ac.kr 49 / 57 Page 50: 촉각 디자인 HCI Lab. @ Yonsei University, Korea http://hci.yonsei.ac.kr 50 / 57 Page 51: 인터페이스 디자인 절차  메타포 표현하기  Raw text와 wireframe 스케치하기  시각적 계층구조 만들기  다양한 모드 활용하기  불필요한 요소 제거하기  디자인 효과 측정하기  추상화 표준화 하기 HCI Lab. @ Yonsei University, Korea http://hci.yonsei.ac.kr 51 / 57 Page 52: 1단계: metaphor 표현하기  디자인의 첫번째 단계는 디지털 서비스나 제품에서 표현하고자 하는 콘셉트를 확실하게 세우는 것이다.  인터페이스 디자인에서의 콘셉트는 전체적인 인터페이스의 틀을 실제적으로 표현하기 이전의 개념적 구성을 말한다.  이를 위해서는 콘셉트 디자인에서 설명하는 메인 및 서브 메타포 내용을 참고할 수 있다.  전체 메타포가 확립되면 그에 맞는 인터페이스의 성향과 분위기를 결정할 수 있다.  그런 다음, 대상의 분위기 등을 고려한 적절한 색을 선택해 조화롭게 배합하고 폰트나 애니메이션 등의 추가적인 요소를 통해 전체적으로 표현하고자 하는 인터페이스의 대략적인 콘셉트를 설계할 수 있다. HCI Lab. @ Yonsei University, Korea http://hci.yonsei.ac.kr 52 / 57 Page 53: 2단계: raw text와 wireframe 스케치  인터페이스 디자인의 두 번째 작업은 ‘raw text’를 유사한 내용끼리 카테고리로 묶는 단계이다.  이 단계는 정보 디자인에서 설명한 정보의 배열과 분류를 기초 자료로 화면을 분할하고 화면 구성 요소를 배열한다.  면 분할은 페이지라는 평면적 공간에 대한 적절한 분할을 의미하며, 화면 구성 요소의 배열은 분할된 면에 어떤 식으로 화면 구성 요소를 배치할 것인가를 의미한다.  다음으로 전체적인 레이아웃 시스템을 만드는 데 이는 정보의 흐름을 중요도에 따라 분류 및 배치해 사용자의 시선을 용이하게 이동하는 방향으로 설정한다.  사용자의 편리성과 제품 또는 서비스의 콘셉트에 따라 시각의 동선과 아이콘의 모양 등이 일관성 있게 배치되고 짜여져야 하는데 이러한 레이아웃을 구성하기 위한 요소로 자주 사용되는 것이 와이어프레임이다.  이는 실제 인터페이스 디자인의 색상이나 폰트 등을 고려하기 이전에 레이아웃 자체에만 집중할 수 있어 전반적인 인터페이스의 구조를 가늠할 때 유용하게 쓰일 수 있다.  방식은 수작업으로 레이아웃 아이디어를 간단하게 종이에 스케치하는 방법과 포토샵, 일러스트레이터 등과 같은 친숙한 그래픽 프로그램을 사용하는 방법이 있다.  대부분의 그래픽 프로그램들은 기본 와이어프레임을 만들 수 있도록 지원하는데 간단한 선과 모양, 텍스트는 가장 기본적인 와이어프레임의 요소들이다.  와이어프레임의 이점은 복잡한 표현 요소가 들어가기 이전에 간단한 레이아웃을 통해 디지털 제품이나 서비스의 전반적인 그림을 그려 볼 수 있다는 것이다.  와이어프레임을 이용한 레이아웃의 요소들이 수정을 거쳐 완성되면, 비로소 실제 색상과 디자인이 가미된 인터페이스의 모습을 형성하게 된다. HCI Lab. @ Yonsei University, Korea http://hci.yonsei.ac.kr 53 / 57 Page 54: 3단계: 시각적 계층구조 만들기  인터페이스 디자인의 세 번째 단계는 내용들 간의 시각적인 계층 구조를 명확하게 나타내기 위해 중요도나 순서 등에 따라 시각적 단서를 주는 작업을 진행한다.  시각적 계층 구조를 명확하게 하기 위해 일단은 각 화면을 전경과 중경 및 배경으로 나누는 작업이 필요하고, 그 다음으로는 중경을 기능적 부분과 내용적 부분으로 나누고, 마지막으로 대비를 이용하여 계층적 단서를 분명하게 밝혀 주는 작업을 실시한다. 화면에서 전체적인 시각적 느낌에 큰 영향을 주는 배경색은 전체 인터페이스의 이미지 형성에 큰 영향을 미치므로 신중한 선택이 필요하다. 색상의 대비가 지나치게 크거나 작으면 사용자에게 시각적 혼란과 단조로움을 줄 수 있으므로 주의해야 한다.     특히 모니터 설정값에 따라 다르게 재현되는 색상의 느낌을 사전에 확인하고 강조해야 할 팝업 등의 외경 등은 강한 색상 대비차를 이용해 사용자의 주의를 끄는 시각적 요소를 고려해 볼 수 있다. HCI Lab. @ Yonsei University, Korea http://hci.yonsei.ac.kr 54 / 57 Page 55: 4단계: 다양한 모드의 활용  인터페이스 디자인의 네 번째 단계는 해당되는 정보를 여러 가지 다양한 모드에 따라 표현하는 단계이다.  어떤 사람들은 가장 간단한 문자 정보를 선호하는 사람들이 있고, 어떤 사람들은 그림이나 표를 선호하는 사람들도 있기 때문에 각 사람들의 선호에 맞추어 다양한 모드로 해당 정보를 제공해 주어야 한다.   정보의 용이한 시각적인 전달을 위해서는 화면을 구성하고 있는 여러 가지 시각구성 요소들이 서로 긴장감 없이 편안하고 명료하게 제시되어야 한다. 최근의 인터페이스는 특히 여러 매체들이 시간 간격을 두고 표현되는 동적인 레이아웃의 특성이 강조되고 있으므로 각 매체의 특성을 살린 인터페이스 디자인을 고려해야 한다. 이 단계에서는 정보가 획일성을 가지고 겹치지 않게 표현되는 것이 중요한 요건이다.   이는 사용자에게 전달하는 정보를 인터페이스에서 어떻게 표현할 것인가에 대한 의미론적 분석을 통해 구체화할 수 있다.  예를 들어, 주식 시세는 딱딱한 텍스트보다는 쉬운 표나 그래프를 사용하고 메뉴바는 한눈에 들어올 수 있는 재미있는 아이콘들을 사용하는 것이 사용자의 시각적 이해도를 높일 수 있다.  HCI Lab. @ Yonsei University, Korea http://hci.yonsei.ac.kr 55 / 57 Page 56: 5 단계: 불필요한 요소를 제거하는 단계    인터페이스 디자인의 다섯 번째 단계는 전달되는 정보를 방해하는 불필요한 배경 화면이나 시각적 요소를 걸러내는 작업이다. 그래픽이나 이미지에 따라 필요 이상으로 많은 이미지 용량이 걸릴 수 있기 때문에, 각 화면의 바이트 수를 확인하는 작업도 반드시 필요하다. 사용자들의 다양한 컴퓨터 사양과 해상도를 고려해야 하고, 속도와 가장 밀접한 관계가 있는 이미지의 사이즈를 고려해야 한다.  전체적인 로딩 속도를 느리게 하는 부정적인 결과를 초래할 수 있기 때문에 그라데이션이나 사진 등은 되도록 압축률이 좋은 jpg 포맷으로 저장하고 색상이 적고 면적이 넓은 이미지는 GIF파일 포맷으로 저장하는 것이 효율적이다. 텍스트로만 구성된 html 파일의 한 페이지당 크기는 보통 15k를 넘지 않는 것이 좋고, 사용자는 디지털 제품이나 서비스 페이지의 로딩 속도를 수초 이상 지켜보지 않는다는 것을 고려해 이미지나 애니메이션을 어떻게 적절히 활용할 것인지 사전에 고려해 볼 수 있다.  HCI Lab. @ Yonsei University, Korea http://hci.yonsei.ac.kr 56 / 57 Page 57: 6단계: 디자인 효과 측정하기  인터페이스 디자인의 여섯 번째 단계는 인터페이스 디자인의 효과를 측정하는 단계이다. 이 단계에서는 디지털 제품과 서비스의 가독성과 시각적 계층 구조는 명확하게 구현되어 있는지, 그리고 목표로 하는 미적 인상과 사이버 개성이 충실하게 표현되었는지를 확인한다. HCI Lab. @ Yonsei University, Korea http://hci.yonsei.ac.kr 57 / 57 Page 58: 7단계: 추상화 표준화 하기  인터페이스 디자인의 마지막 단계는 추상화/표준화 단계로서, 각 화면에 일관되게 적용될 수 있는 표준적인 인터페이스 시스템을 확정하고 이를 통해 일관되면서도 독특한 시각적 표현을 만들어 내는 것이다. 추상화된 결과는 cascading style sheet(CSS)를 이용해 모형화한다. CSS는 구조적으로 짜인 문서 HTML과 XHTML에 주로 쓰이며, XML에서도 사용할 수 있다.  일반적으로  CSS는 주로 글자, 여백, 레이아웃 등을 일관되게 적용하기 위해 사용하는 언어로 문서의 구조와 디자인을 분리할 수 있게 함으로써 디지털 제품이나 서비스 제작이나 유지관리를 간단하게 해 준다. 플랫폼별로(노트북, 휴대전화, 태블릿 등) 스타일을 적용할 수 있기 때문에 각 기기별로 다른 스타일이 적용된 모습을 만들 수 있다.  또한  따라서 CSS는 전체 디지털 제품이나 서비스 에서 디자인 체계를 정리한 문서로서 사이트의 일관성을 높이는 데 중요한 역할을 한다. HCI Lab. @ Yonsei University, Korea http://hci.yonsei.ac.kr 58 / 57 Page 59: 영화에 대한 토론 주제  바이센티니얼맨 (Bicentennial Man 1999)  “온전한 당신을 제대로 표현하기 위해서는 수많은 특성들을 디자인에 포함 시켜야만 해요"  루버트 번즈  <바이센티니얼맨>은 2005년 뉴저지를 배경으로 미래 세계에서 펼져진다. 로봇 NDR-114로 불리는 앤드류는 가사일부터 아이들을 돌보기까지 모든 일을 수행하는 만능 로봇이다. 그러나 어딘지 모르게 다른 로봇과 구분되는 모습을 띤다. 나무 조각상을 보고 스스로 조각을 해 보거나 인간에게 감정을 느끼는 것이 그중 하나이다. 영화 제목이 시사하듯 <바이센티니얼맨>은 주인공 로봇이 200살을 살아가면서 겪게 되는 과정을 잔잔하게 순차적으로 보여 준다. 기계이지만 인간이 되고 싶은 로봇 앤드류. 그는 사람과 마음을 나누기 위해 인간의 모습으로 끊임없이 변모해 나간다. 그러나 완벽히 사람으로 살기 위한 그의 과정은 순탄치만은 않다. 인공피부, 눈동자, 머리카락을 입히는 겉모습부터 사랑하는 마음을 지니고 인간 세상에서 인정 받기까지의 여정은 200년이라는 긴 시간을 거친다. 그 과정을 거치면서 겉모습은 물론 그가 외부로 표현하는 속마음까지도 큰 변화를 거친다. 딱딱하고 차가운 금속에서 부드러운 젊은이의 피부를 거쳐서 나이든 노인의 피부로 변하는 앤드류의 모습을 보면서 우리가 느끼는 감성도 변화해 간다. 영화 <바이센티니얼맨>을 통해 디지털 제품이나 서비스를 표현하는 방식에 따라 사용자가 느끼는 감성도 크게 변화될 수 있다는 사실을 경험해 보자. 영화 토론 주제   1. 200년 동안 앤드류가 사람에 가까워지기 위해 진화하면서 앤드류의 겉모습에 시각적으로 큰 변화가 생긴다. 그런 변화 중에서 앤드류를 가장 사람과 비슷하게 표현한 시각적 요소는 무엇이라고 생각하는가? 2. 앤드류가 변화하는 과정을 보면 겉으로 보이는 시각적 모습뿐만 아니라 청각적이거나 촉각적인 변화도 많이 일어났다. 이런 변화들 중에서 현재 우리 주위에 있는 로봇들에게도 적용될 수 있는 변화는 어떤 것이 있을까? 3. 200년 동안 진화하면서 앤드류를 대하는 사람들도 변화해 간다. 앤드류가 자신을 표현하는 모습이 변하면서 앤드류에 대한 사람들의 인지적나 감성적 판단이 어떻게 변화되어 갔을까? 무엇이 그런 변화를 가져왔을까?   HCI Lab. @ Yonsei University, Korea http://hci.yonsei.ac.kr 59 / 57 Page 60: 프로젝트 현재 진행중인 디지털 제품이나 서비스에 대해서 인터페이스 디자인 과정을 경험하여 보자. - 앞서 컨셉 디자인에서 선정한 주메타포와 보조메타포를 적용하여 보자. - 기본적 시각 디자인 요소 - 선, 레이아웃, 모양, 타이포그라피, 이미지, 다이어그램, - WIMP - window, menu, icon, pointer - 대표적인 화면에서 대한 wireframe을 만들어 보자. - 시각적 구조를 만들어 보자. (단일 vs. 복수) - 다모드를 활용할 수 있는 방안을 생각해보자. (촉각 and 청각) - 불필요한 요소들을 제거하자. 최종 결과물 - 최종 화면 2~3 개 (PPT 2~3장) HCI Lab. @ Yonsei University, Korea http://hci.yonsei.ac.kr 60 / 57 Page 61: