원l 기반 타 이 포 그 리l 피 의 시 각진달 효 과를 위한 연 구 (pp170-182) - 김 창 국 Contents 논문요약 Abstract 1. 서론 1. 연구목적 2. 연구내용및방법 1I.본문 1. 웹기반 타이포그래피의 이론적 배경 1). 브라우저 내에서의 문

웹기반타이포그래피의 시각전달효과를 위한 연구 A Study on the Effects of Visual Communication of Web-based Typography 김창국 부산대학교

원l 기반 타 이 포 그 리l 피 의 시 각진달 효 과를 위한 연 구 (pp170-182) - 김 창 국 Contents 논문요약 Abstract 1. 서론 1. 연구목적 2. 연구내용및방법 1I.본문 1. 웹기반 타이포그래피의 이론적 배경 1). 브라우저 내에서의 문자환경 2) 웹인터페이스와 인쇄매체와의 차이점 3). 모니터상의 문자의 가독성 2 웹기반 타이포그래피의 시각전달 효과 1). 시각조형 원리에 의한분석 2). 시각표현 방법상 분류 3). 사례연구 4). 개선방향 김창국 K lm. Chang Kug m 결 론 부산대학교 미 술학과 대 학원 졸업 부산대학교 멀티미 디어 박사과정 부산미 협 한국미 협회 원 효F국여성시 각디 자인협회회원 참고문헌 현 /시-스튜 디 오 디 자인고문 부산대학교, 동아대학교 출강 @

2002 한국디 자인 포름 7호 논문요약 현방법상 분류를 통해서 분석 비교 해보고, 웹에 적합한 시각전달 활용방안에 대해 연구하고자 한다. 최근 우리는 급속한 컴퓨터의 발전과 인터넷의 확산으로 정보유통에 혁명을 가져왔고 컴퓨터가 새로운 정보 전달 매체로 부각되면서 웹이 새로운 커뮤니케이션의 전달수단 이 되고 있다. 읽는 시대에서 보는 시대로 그 어떤 매체보 Abstract 다 비용의 효과가 뛰어난 월드와이드웹 (www)은 짧은 기 간 내에 출판매체로 자리를 잡았고, 우리에게 새로운 커뮤 니케이션의 기회를제공하고 있다. 하지만정보의 구조에 The rapid development of computers and the popularization of the Internet have brought a 관섬을 가지고 있던 웹의 초 71 개발자들은 네트워크 사용 revolution in information distribution, and along 지를 위한 문서구성의 논리성에만 치중했던 결과 정보전 탈의 시각적 측면을 등한시 했기 때문에 웹은 커뮤니케이 션 도구로서 많은 한계점을 가지고 있다. 웹사이트라는 것은 여러 요소들이 유기적으로 융합되어 만들어진다 웹사이트의 목적이 무엇인가에 따라서 기획, 설계, 디자인보수유지까지 여러 가지 기술적인방법도고 려되지만 인터페이스 객체자체에 대해 많은 연구들이 진 행되고 있다 정보를 전탈하는 데 있어서 가장 효율적이고 명확하게 하는 방법은 문자와 그림이 있다. 인터넷에서의 정보의 전달도 그림과 텍스트 현재는 멀티미디어 요소가 추가로 이루어지고 있다 그리고 유일하게 인류만이 가지 고 있는 문자를 통해 인간은 지금까지 많은 지식을 공유하 고 세대에 이어 정보를 전달해왔다. 또한 명확한 의사전달 을 위해 사용되는 텍스트에 대한 연구는 지금까지 타이포 그래피라는 명목으로 연구되고 발전되어 왔다. 그러므로 문자를 선택함에 있어서 가독성이 좋고 형태와 디자인의 조화만 있으면 되었던 이전의 타이포그래피보 다, 기호를 통해 커뮤니케이션의 체계적 조합 및 운용을 시각화하여 전달하는 확대된 조형언어로서의 타이포그래 피 를 필요로하게 되었다. 따라서 본 논문에서는 웹기반 타이포그래피의 이론적 배 with the emerging of computers as new information media, the web is becoming a new means of communication. In the age of watching rather than reading, the World Wide Web, which is more cost effective than any other media, has established itself as an important publication medium in a short time, and is providing new opportunities for communication. However, the early web developers, who were interested in the structure of information, concentrated on the logicality of document organization for network users, and disregarded the visual aspect of information delivery, and as a result, the web had many limitations as a means of communication Websites are organic combinations of various components. Though various technical aspects such as planning, design, repair and maintenance should be considered according to the purpose of websites, there is also much ongoing research on the objects of interfaces. The most efficient and clear means to deliver information are letters and pictures. The 경을 문헌과 기존연구로 분석하고, 시각 조형 원리와 표 communication of information on the Internet is fþ

웹기반 타이 포그 래 피 의 시 각전달 효과를 위한 연 구 (pp170-182) 김 창 국 carried out with pictures, texts, and recently added multimedia factors. Using letters, which is exclusively owned by human beings, mankind has shared and delivered huge amounts of knowledge from generation to generation. In addition, studies on texts to be used for clear communication have been going on under the name of typography. In selecting letters, the new environments require typography as an extended formative language that visualizes and exchanges the systematic combination and operation of communication through symbols, rather than previous typography that was focused only on legibility and harmony of character types and designs Therefore, the present thesis aims at analyzing the background of web based typographies through reviewing the literature and previous research, comparing them in terms of visual modeling 1.서 론 1. 연구목적 21세기는 컴퓨터의 급속한 발달과 함께 인터넷과 같은 정 보통신의 발전에 의해 정보사회 디지털 사회로의 변환이 가능해졌다. 날로 변모해 가는 환경은 정보의 다원화로 다 변화되어 가므로 현대커뮤니 케이션 사회의 정보 전달 능 력은 상상을 초월화 할 정도로 빠르게 움직이고 있다. 우리들의 시각환경의 가치도 매체발달로 인해 보는 시대 로 전환되었기 때문에, 단순한 정보전달이 아닌 수신자가 정보를 적극적으로 수용케 해야 한다는 점에서 타이포그 래피 U의 역할은매우중요하게 되었다 인터넷 웹사이트는 쌍방향 커뮤니케이션으로서 사용자의 편의를 제공함과 동시에 클라이언트의 메시지도 정확히 전달해야 하므로, 언어의 상정화된 기호체계인 문지를 통 해 내용의 특정부분이 지니는 중요성을 시각적으로 전달 해 주고, 사용자는 시각화된 문자로 인해 쉽게 사이트의 principles and γisualization methods, and studying 핵심을 빨리 알 수 있게 된다. 이에 본 연구는 웹기반 타이 about the methods of visual communication fit for the web. 포그래피의 이론적 배경에 대한 연구를 하면서, 웹환경 속 에서 공간구성 및 미적, 시각적정서 측면의 조화를 동시에 이룰 수 있는 커뮤니케이션 기능으로서의 타이포그래피에 Keyword 대한분석 및 개선책을제시히는데 그목적을둔다. visual communication typhography 2. 연구내용및방법 본 연구는 다변화된 정보사회에서 웹의 개념과 특성을 이 1) 면집 디자인의 요소 중 가장 확실 히 메시지를 전달힐 수 있는 요인 이다 타이포그라묘 는 기독성콰 깊은 관련이 있으며 글자 1 골자의 코 기 우 치, 간격, 줄 의 길이 등이 서로 조회를 이루어이 좋은 레이 01웃 을 만든다 타이포그라피의 개넘은 활자를 잘 선택히 Oj 그 목적이 맞 도록 글자를 보다 효괴적이고 개성 %게 구성하능 것이다 즉 펀집디 자인의 주제는 활자로 글자를 구성하는 디자인을 일걷는다

2002 한국디 자인모름 7호 해하고, 시각전달 효과적인 면에서 타이포그래피가 웹에 서 창출해내는 새로운 가능성을 조명하고자 한다. 연구 방 법은 브라우저 내에서의 문자환경을 기존 연구로 분석하 고, 인쇄매체에서 정립된 타이포그래피 형식을 웹 사용자 인터페이스 환경과의 비교를 통해서 웹에서의 구체적으로 대상이 지니고 있는 적합한 형태로서 정보를 전달하고 있 는 지, 보는 사람이 명확하게 읽을 수 있는 형태 인지에 주 단위로 설정했을 경우에는 user의 의도대로 크기가 바뀌 지않는다. 보통 문자의 크기에 시용되는 포인트는 절대치로, u se r가 브라우저의 문자사이즈를 변경하게 되면, 그에 따라크기 가 변하면서 의도된 레이아웃의 balance를 앓게 된다. 하 지만, 상대치인 픽셀 단위를 사용하게 되면 user의 브라 우저 문자크기 설정과관계없이 전체적인 balance를 유지 아처으 亡 어다 λá' 한 레이아웃의 텍스트를 읽게 되는 것이다. 이에 대해서 그리고 시각전달 측면에서 웹타이포그래피 를 분석해 보고 실제로 국내외 웹사이트에서 보여지는 타이포그래피의 예 를 통하여 올바른 디자인 방향을 모색하고자 한다. user의 브라우저 기능에 포함되어 있는 것이 유저 스타일 시 트이다, 옵션 설정에서 Accessibili ty의 포뱃의 종류와 유저 스타일 시트를 설정하게 되면, 디자이너가 설정한 폰 트의 형식(스타일 시트를 포함) 모든 것을 무시하게 된다 결과적으로 레이이웃은 balance를 잃게 되지만, user가 11. 본론 원하는 폰트의 크기 를 얻을 수 있다 3) 즉, 인터넷환경에서 폰트로글자를처리하였을 경우에는 1. 웹기반타이포그래피의 이론적 배경 짧을 다운로드 시간과 함께 정보를 데이터로 변환시킬 수 있는 점과, 정보가공이 쉽다는 장점을 갖는다. 하지만 이 1). 브라우저 내에서의 문자환경 러한 경우에는 수신자와 발신자가 동일한 폰트를 가지고 있거나 동일한 폰트를 사용할 수 있는 환경 을 가지고 있 사람들은 웹페이지 를 읽을 때 대부분 단어와 단어 를 읽지 어야 만 발신자가 선택한 폰트의 성격이 바르게 전달될 수 않는다. 즉 그들은개인적으로 관심이 있는단어나문장을 있다. 각기 다른 브라우저나 플랫폼의 상황을 고려하면 가 읽으면서 페이지 를 스캔하는 경향이 있다 John Morkes 와 Jacob N ielsen의 연구에 의하면 웹사용자들이 그들이 접하는 새로운 페이지를 읽을 때에는 79%정도가 스캐닝 한다는 결론을 내었고 단지 16%만이 단어와 단어를 읽는 다는 결과를 발표하였다 2) 장 기본적 인 폰트의 시용만이 가능하다고 할 수 있다. 이런 단점을 보충하기 위해 글지를 이미지화 시켜서 처리 하는 방법이 있는데 이러한 경우에는 그래픽 파일로 전환 되면서 로딩 시간이 오래 걸리며 정보의 기공 및 처리가 불가능하다 또한 웹 페이지는 시용자의 환경에 따른 비디 브라우저의 문자 환경은 정보를 얻고자하는 어떤 페이지 오 카드? 모니터 환경 등에 의해 정해진 크기가 없는 다양 가 너무 작은 사이 즈의 폰트로 디자인 되어 있을 경우, 한 환경에 맞추어야 하는 문제가 있다 그러므로 웹에서는 user는 문자의 크기 를 크게 할 수 있기에 시력이 좋지 않 은 사람도 페이지 를 읽을 수 있게 된다 하지만, use r가 2) John Markes & ιa b N re lse미 Conc 않Sca n n able, and ObjectCJe How t 이와 같이 문자의 크기 를 조절할 수 있는 것은 폰트를 설 정 할 때 포 인트 (p t)단위 로 설정했을 경우이며, 픽셀 (px) Wfrte ior the Web, 1007 (htlp:/ /v매n. use r lcom/a lertbox/ 971CB. h t 께) 3) htψ/ /WWN.m ora ndes rq n..kr/ e

웹기반 타이 포그 래피의 시 각전 달 효과를 위한 연 구 (pp 17 0-182) - 김 창 국 타이포그래피의 운영에 대한 기술적 제한 등의 문제점들 을 충분히 인식하고, 대체해 나가는 데 그 중요성을 두어 야한다 4) 김대영 1 웹사용자 인터 llj l OI 스 오브젝트의 인 간 수헐도 멍 가에 관린 연구 01주대학교 대학윈 3Xü, p5 좋은 웹타이포그래피 는 한 폰트와 다른 폰트간의 시각적 2) 웹인터페이스와 인쇄매체와의 차이점 대조와 텍스트 블럭과 그 둘레의 빈 공간간의 대조에 달려 있다. 강한 대조와 독특한 패턴만이 독자의 시각과 집중을 웹 사용자 인터페이스와 인쇄매체의 차이점을 정리해보 끌 수 있다. 이러한 특정을 얻기 위해선 이들을 페이지에 면아래와같다 4) (1) 물리적인 차이점 (표 1 ) 종이매체와 CRT 비교 끓맨 용이 C R T Text 훨 11~ / N낀익 11~ Pi xe l Image 밍펌깨리 Pixe l 웅낄 왜0-240 Od p i 이 잉 75-100dpi 특우 g 괴 Animat ion 설계해 넣는 것이다. 모든 것은 Bo ld로 한다면 눈에 띄는 부분이 없어지게 보인다. 모든 페이지를 조밀한 텍스트틀 로 채운다면 시용자들은 회색 블록으로 만 보게 되며 집중 하지 못할 것 이다 또한 페이지의 내용을 다 똑같이 크게 표시한다면 전혀 도움이 안된다. 3). 모니터상의 문자가독성 께잉 김낀온입 자인 온잉 크 1 1 다I1 ~OI 녀개 잉의로 언택 1\ 1으탱의은 억 모니터상의 텍스트는종이매체외는다르게 모니터가빛을 발산하고 있어서, 브라우저 위에서 텍스트를 읽게 되면 눈 (2) 기능적인 차이점 페이지의 모양이 다르다 세로모양(Portrait) 이 아니라 가로모양 (Landscape) 이다 이러한 요소 때문에 인쇄물의 반 정도를 화면에서 볼 수 있다 인쇄물보다 웹 상에서 폰트 조절이 좋지 않다.. 인쇄물보다 형식에서 조절이 좋지 않다 인쇄물보다 해상도가 떨어진다. 인쇄물 보다 읽는 속도가 50% 정도 느 려진다. (Nielsen, 1993) 읽는 사람은 글을 정독하는 것 보다는 스캐닝 하는 경향이 있다. 인쇄물보다 기억력이 50%정도 감소한다.. 스크롤이라는 새로운 요소가 추가 되었다 하이퍼텍스트는 더 좋은 방법이다 의 피로가 심하게 된다. 그리고 이 텍스트는 모니터 위에 서 표시가능한 해상도의 제약이 있기 때문에 12포인트 이 하의 작은 문자는 그 문자의 형태를 유지하지 못하고, 가 독성이 떨 어지게된다. 즉 글자는 모니터 화면의 해상도와 관련을 가지고 있다. 인쇄매체는 최소 1200dpi의 해상도를 갖는데 반해, 컴퓨 터 화면의 해상도는 85d pi이하이기 때문이다. 일반적으로 인쇄매체에서 본문용 호뉴글폰트로 가장 많이 사용되는 바 탕체(명조체)의 경우 그 구조적 형태가 복잡하기 때문에 웹 사용자 인터페이스 환경에서 가독성에 문제가 발생한 다. 즉 웹상에서 바탕체를 사용할 경우 기독성이 현저하게 저하된다. 정재우 (1997) 의 연구에서 지면 (인쇄매체 )에 서의 가독성은 세 종류의 폰트 모두 읽는 속도의 차이가 거의 나타나지 않았으나 컴퓨터 모니터 상에서는 바탕체가 돋움체나 그 G

2002 한국 디 자인 포름 7호 래픽체에 비해 가독성 이 떨어지는 것으로 나타났다. 이는 (1) 근접성의 요인 구조적 형태가 복잡한 바탕체는 발광체인 모니터로 인하 여 세리 프 (se rif)부분의 구분이 정확하지 않아 속도에 지 장을 주는 것으로 나타났다 S} (표2) 글자체에 따른 가독성 비교표 글끼께 응류에 입 른 기 독생의 비 교묘 f 딛 위 쪼 } 꾀객용 등r. 1 메 명 2 ^ 1 인 E 운연 n l 범 입 비교 써낀 I 미 링 혜(안영 ~ l 42.02 4.5 54 19.00 깅 뮤 럭 돋움 써{ 융고 틱 i 38.40 1.2162 19.00 39313 그 대 픽 39. 30 " 6522 20 때 ~ t 형찌1(안정 쪼 i 36.46 4. 5049 20.00 모 니 턴 돋웅/잉 g 고 틱 l 35.62 3 7465 16.00 36.2 그 래픽 36. 52 3. 7465 18.00 올 찌 잉 l밍 우 엉임미써c>ü 구 얀 되는 힌 글 기 독 잉이 t'<2.r 연 구 '( 한 잉 대씩 교 1997). p29 2, 웹기반 타이포그래피의 시각전달 효과 1). 시각조형 원리에 의한 분석 사용자들은 형 태를 지각할 때 가까운 것끼리 묶어서 지각 하게 된다. 근접성이란 시각적으로 집단화하려는 경향을 가지며, 가까운 것끼리 묶어서 지각하는 원리이다 예 제 로 사 용 된 한 국 사 진 기 자 협 회 (그 림 1. www. newsp h otokorea. co m) 와 쇼 핑 몰 (그 림 2. shop. kmib. co. kr)의 시아트를 보면 비슷한 기능을 가진 하 이퍼텍스트나 사진이나 벼튼들이 가끼어에 있다. 이와 같이 가까운 것끼리 묶어 서 지각하려는 원리인 근접성의 요인에 따라 쓰임새나 기능이 비슷한 것들끼리 가까이 두는 것이 좋 다. 사용지들의 이해도를 더욱 높일 수 있다 폐 판 댐......,""..",. 댈 μ 석 ~ L.f!_,성,... 1' 싸? f노 죄 민 ----.. "' r i (그림 2) 쇼잉몰 웹디자인에서 시용되는 시각적 조형원리는 단 하나의 원 리만 사용하는 젓이 아니라 여러 가지 원리의 복합사용으 로 그 이미지 전달을 강하게 한다. 그리고 게쉬탈트 원리 (2) 유사성의 요인 화변에서는 텍스트크기, 형, 입체, 방향, 색채가 비슷한 메뉴들을 집단화하려는 경향이 있기에 비슷한 기능을 가 도 적용되는데 여 기 에서는 게쉬탈트 원리의 근본이라 할 진 메뉴들을 한 덩어리로 지각하게 되는 것이 다. 각 메뉴 수 있는 시각조형 원리가 웹인터페이스 전반과 타이포그래 피에 어떻게 적용되는가를알고자한다. 게쉬탈트 이 론의 기본이론은 인긴의 시 각적 심리를 연구 한 결 과, 인간에게는 대상의 형태를 무리지어 (Grou p) 지 각히는 심리를 가지고 있다는 것이다. 그런 지각심리가 구 체적으로근접의 요인, 유사의 요인, 연속성의 요인, 폐쇄 의 요인, 형과 배경 등으로 세분화 되는 것 이다. 형태를 지 각하는 것은 대부분 우리의 시각에 의해서 죄우되 고, 시각 은 청각과 촉각보다 더 직접적으로 느낄 수 있기 때문이다. 5) 구달용 웹사용자 인터페이스 혼 경어서 한글 타이포그래피 활용어 관 한 연구 호남대학교 대학원. 3XJ1. p16 바의 색상과 사이트 엠의 각 메뉴별 하이퍼텍스트는 같은 의미 로 존재 한다. 이것 또한 유사성과 연속성을 고려하여 사이트에 대한 사용자들의 이해를 돕는 좋은 방법 중 하나 이다. 예제 로 사용된 디즈니랜드(그림 3.d i s n ey. go.. com) 에서 보면 같은 기능을 가진 메뉴텍스트들은 비 슷한 형태, 컬 러, 모양, 아이콘, 레이아웃을 취하고 있다. 각각의 메뉴틀 을 묶어서 같은 색상을 다르게 적용하거나 메뉴에 같은 모 양의 아이콘과 하이퍼텍스트를 사용하여 사용자가 메뉴들 을구분하고집단화하여 지각할수 있게 하였다 천안유선방송(그림 4. www.cbcatv.co. kr) 에 서의 메인 메 o

웹기반 타이 포그 래 피 의 시 각진딛 효과를 위한 연구 (pp, 170-182l - 낌 창 국 뉴와 서브 메뉴는 하나의 묶음으로 구분되어 사용자의 편 리함을제공하고있다 이러한이유는같은폰트와그래픽 을 사용하여 사용자로 하여금 시각적으로 집단화할 수 있 도록 유도했기 때문에 사용자들의 혼란을 줄일 것이다 a ι? ι.;(. f;"t ι... ;}..:.I.. -.. ' j ε쁜 깅늠ζ? 피'.'""","" " r. ~I i Ih.'" 현i3 ;;::;;,,E닉_ 三, ~!. 낀:깐,:;tf.:' :~':,"., " 짧 j.. ' :~m:..~,~,~~.,꽉.- -.~ 갚F 하... 펙갚.. 힘 ι!'.:;',' 피,, 1 퍼 엔 C 잉... 3 - _ -:.':.' 갚 r ;;1/ (그림 6) 효댁일보 (그림 3) 디즈니랜드 (3) 연속성의 요인 ~ - _.'.Jii,. _~ (그림 4) 천안유선방송 (4) 폐쇄성의 요인 닫힌 도형들은 그룹되기 쉬우며 완전히 닫혀있지 않더라 도 일정하게 닫힌 형태로 지각하는 심리이다. 이는 시각적 그룹핑을 전달하기 위한 목적으로 사용되는 가장 보펀적 인 기법이다. 페이지에 포함된 메뉴의 모든 것 들을 시각 유사한 배열이 하나의 묶음으로 되는 것으로 근접성과 비 슷하나 근접성에 비해 연속되는 흐름을 강조히는 원리이 다. 하나 하나의 단위들이 연결되어 있는 전체의 형태는 단위형태 보다도 더 큰 성격으로 나타낼 수 있으며, 회사 의 컨셉별로 폴더를 분류할 수 있다. 그러나 한 페이지에 많은 양의 정보를 보여주게 되면 페이지 로딩 시간이 길어 지므로 페이지를 나누고 나뉘어진 페이지 를 시각적으로 표현했다. 믹대바의 하이퍼텍스트에 의한 페이지 구분은 연속되어지는 방향성을 보여주는 시각적 표현이다 또한 이미지 양이 많아지면 사용자에게 보이지 않는 부분이 생 길 수 있다 이때 페이지의 스크롤바를 만들어 보이지 않 는 부분으로 이동을 유도할 수 있도록 한다 적 한덩어리로 그룹핑하여 사용자의 편의와 이해를 돕고 있다. 코사지 가게인 꽃수레(그림 7. www. corsage. co.k끼와 마 시마로(그림 8. www.mashimaro.co.kr ) 의 웹사이트 디 자인은 폐쇄성의 원리를 가장 잘 지키고 있는 페 이지 중 하나로 전자상거래 부분, 컨설팅 부분, 정보서비스 부분, 보안관리 등으로 글자를 영역으로 구분지음으로써 사용자 의 혼란을 ;ζ 서 흐 돋켜 T J..'. 있다. 한국인삼공사(그림 9.www.hsworld.co.kr)는 라인 없이 내용들을 그냥 나열 한 페이지로 위의 사이트들에 비해 시각적 구성이 산만함 을 느낄 수 있다. 그러므로 폐 쇄성의 원리를 잘 이용하면 시용자의 편의와 이 해를 도울 수 있다. 조선일보(그림 5. www.chosun.com)와 한국일보(그림 6. www. hankooki.com)는 각 페 이 지마다 로고와 동일한 모양의 타이틀과 글자들로 일관성 있게 디자인되어 있고 각 페이지마다 다른 컬러를 사용해 메뉴별로 구분해 주었 I~꿇떠IDC 앙 II 짧 聊 섭 灣 i:: l 펠 擬 펀 다. 이 는 다%댄f 메시지의 구성요소가 독자에게 미치는 효과를 극대화하면서 일정한 지면의 공간 안에 시각적 소 (그림 7) 꽃수레 ; ~. ::i,';" ä' :;;:ι μ a - -fr IIH꾀 μ ;.~꾀작? 소공 (그림 8) 마시마로 구력을 획득하기 위해서 게슈탈트 이론의 연속성의 원리 --~ 이fr'r! _', :~~; o 에 부합히는 것으로 이러한 구성은 사이트의 통일성에도 크게 기여히고있다. J}, (jii\t ~..;, 이.. f!:~ ; S잉 ", i :퍼 - "::" '''' '''' - ι _. -.~... (그림 9) 한국인삼공사

2002 한국디자인포름 7호 (5) 형과배경 둘러싸고 있는 영역은 배경이 되고, 둘러 싸여 있는 영역 은 도형으로 인식된다. 도형은 인상이 강하고 기 억하기 쉽 다. 루빈의 컵은도형과배경을이해하는대표적인그림이 근접성 - 형 태에 명백하고 조직적인 정보 전달, 시각의 주목성 과가독성획득 유사성 다. 도형과 배경의 지각섬리가 작용하기 때문이다. - 인지도 증대와 이미지 부여에 따른 특정 강화, 상징 중심이 되는 오브젝트를 형 또는 그림으로 보고, 그 이외 의 배경부분을 바탕으로 보려고 히는 것이다. 씨네 21의 웹사이트(그림 10. www.cine2 1. co.kr)를 보면 배경부분의 비슷한 색상 때문에 배경과 내용의 구분이 모 호하여 컨벤츠의 글자를 읽기가불편하다 그러나무비스 트(그림 11. www.movist.com)는 바탕의 검정색이 컨댄츠 구별을쉽게해준다. 성에따른의미전달 연속성 - 반복에 의한 학습효과로 예측성 획득 폐쇄성 -심리적 안정성 형과배경 - 전달할 정보의 의미를 명확히 하여 효율의 극대화 2) 시각표현 방법상 분류 모든 시 각물 디자인에 있어서 Lay-out이란 다OJ'한 메시 훌홉 g 시" 돼 찮??; 爾 E;시., 따젊 ι.,. ',. '렀: rj r:i;';:" " 穩 일안? (그림 10) 씨네 21 지의 구성요소가 독자에게 미치는 효과를 극대화하면서 일정한 지면의 공간안에 시각적 소구력을 획득하기 위해 서 효율적으로 배열하는 과정이라고 정의한다. 웹디자인에서도 이러한 정의는 크게 다르지 않지 만 특히 사용자와의 인터 렉션(i n teraction)과 관련하여 사 용성을 고려한 레이이웃을 구현해야 한다. 사용자의 시선 을 유도하기 위해서 기본적인 연출이 이루어져야 한다 좀 더 자세히 말하면, 일단 주목성을 구현하는 것이 레이아웃 의 주요한목적 이다. 이 러한 레이아웃의 요소로서는 사람의 눈에 띄기 쉬워야 한다. (주목성) (그림 11 ) 무비스트 읽기 쉬워야 한다. (가독성) 주안점이 있어야한다. (명쾌성) 이러한 게슈탈트 이론에 큰거하여 타이포그래피를 웹인터 페이 스와 함께 디자인할 때 다음과 같은 기대효괴를 가진 다. 전체의 구성이 아름다워야 한다. (조형성) 통일성이 있어야 한다 (통일성) 독자적 이미지구현이 있어야 한다. (창조성) fþ

? 웰기반 타이 포그래피 의 시 각진달 효과를 위한 연 구 (pp 170~ 182) - 김 창 국 심미안적 레이아웃을 구현하는 데에는 몇가지 법칙이 적 용된다 균형 (balance) 운동감(movem ent). 대 비 (contrast) l:l] 려 ] (proportion) 독창성 (originality) 조화(harmony) 이런 시각원 리를 바탕으로 하여 웹사이트의 타이포그래피 유도히는 만큼 많이 사용되어 지고 있다. 문자를 전체 화면의 맞추어 이미지와 조화롭게 배치하여 이미지의 일부분으로 문자를 받이들이게 해야 한다. 사용 자의 시각을 유도하는 한편 텍스트라는 성격의 설명이 따 로필요없어 간단하면서도효과적인방법이다 도늑 n fl::t.v.jiij'i."" 0.1 Ií붙 tl 써. ~ 11.i'~.ι j". 1\- ri 잉 꺼 ιι, 까 j... 빼 ~ 驚 했 를 시각표현 방법상으로 분류해 보았다. (1) 하이 퍼텍스트로만 구성한 예 (그림 12) 웹검색사이트의 대부분이 이 방식을 사용하고 있고, 실제 로 하이퍼텍스트만으로 된 사이트가 가장 많이 쓰여지고 있다 (그림 13) 타이모그래띠로 OfO I콘구성 (3) 그림으로 처리된 타이포그래피의 예 (그림 14) J" 문장을 꼭 필요한 단어하나로 압축하여 짧고 간결하게 넣 고 일정한 공간안에 규칙적으로 배치하여 읽 는 부담을 줄 여야 한다 그러 나 문자적 기능에만 치중한 나머지 심미성 이 떨어지고 사이트에 대한 흥미도와 가독성이 부족하게 보인다., 다 Dl fo!::v,~.~:r~ ç:xl',.. ; A.J. ~ Il. i 잉. f,; >f Bl ~~ ~<IIlIiï ""' I."""_ 양 NAVER ξ " -,~. π""""j.:i!j ::.l Q.!~')'~-< :m A,.,!)t i 긴잉[;':'!1~!. : <1 0 '" '' :ι ι!"1<1:>:!> { ~ 1ll;.U,'(.:!."!J,a.;;;r--- @야μi잃.u뾰~::"n',, ::ν 빼폈 [!ill!띄 :.'01 '''';, ~ :.' ~ 0:1,.01" " 탱,w:;; 찌,싫끼 " 1 " 11:' ''' j,.,., '" ~-~-ι ~ ::li!l 째 썩 : 빼 @ 찌 펴 Q M 깅 했 했 % ε (그림 않 12) 하이퍼텍스트만으로 구성 쐐 } IlKl 꾀써단~~~,, - t ι" 관약4격찍은?~ 와ii 쩌 0., ~ "3 ~ Q, (2) 타이포그래피로 아이콘을 구성한 예 (그림 13) 하이퍼텍스트가 이미지와 함께 사용되면서 아이콘의 역할 을 도와주고 하부 유니 트 (unit)로의 접속을 언어의 힘으로 j 이미지로만 표현되는 타이포그래피는 그 표현방법상 문자 적인 메시지보다는 읽기 쉽고 좀 더 친근하고 자연스럽게 시각을 유도한다. 서체의 모양에 있어 획수가 저고 획마다 의 간격이 넓으면 바탕과 비교해 선명하게 눈에 띄므로 가 독성이놓아진다. 그러나 이미지 처리에 있어서 부드러웅만을 강조하게 되 면 글자의 경계가 모호해져 문자자체의 정보전달의 기능 마저손상된다. - ix il.1 il써 li..1 f,,' ;;' Bl,j a 냐~ 써 '1 1) 'ι(.- I평 ;끼 ( : 斷 (그림 14) 그림으로 처리된 타이포그래피 G

2002 한곳 디자인포름 7호 3). 사례연구 타이포그래피가 글자가 갖는 독특한 형태만을 중시하여 구성하는 것이 아니라 웹이라는 커뮤니케이션의 역할을 히는지, 가독성이 있는지, 의미의 빠른 전달과 공간활용, 대중성, 심미성이 현재 웹상에서 적절히 활용되고 있는지 를 파악하고, 활용면에서 명료성, 질서 위주의 기능성, 역 (3) Coca-cola의 Web site (그림 1 8) 화면이 심플하고독특하게 디자인 되어있고, 누구나쉽게 이해할 수 있도록 자사로고를 사용하여 사이트의 의미와 내용을 논리적으로 이해시키 는 것 보다 직감적으로 인식 시키고 있다 또한강렬한색감은보는사람에게 기억되는 시간을 증가시키고 주목성 을 높여주고 있다. 동성, 확장가능성이 있는 사례를 선별하여 연구대상으로 한다 (1) 한메일(그림 15)과 한겨레신문(그림 16) 의 Web site 웹페이지의 구성은 태이블을 바탕으로 하는 그리드 구조 로서 글지들이 분배되어 안정적이다. 그러나 회사 로고를 지우고 보았을 때 많은 텍스트의 사용으로 가독성을 잃게 하고, 화면을 복잡하게 하므로 결국 사용자의 인지도를 떨 어지게하고있다 ι 갚 警 젠 폐 꽉 피 - 薦 ι쨌쐐 爾 @ 뺑?, υ (그림 15) 한메일 (그림 16) 한겨레신문 (2). App le의 Web site (그림 17) 좌우 균형을 이룬 상태에서 구조도 안정적이며, 타이포와 그래픽요소를 절제된 디자인으로 입체감있게 표현하였다 전체적으로 조형 미 를 고려하면서 가독성있게 구성, 배열 한 것이 매우 레이아웃이 잘되었기에 타이포그래피가 돋 보인다. " @ ~ i녁쉴 8 서... i3.~,.t:. t: ~.....J.;. -...-... _.~ -.fi - - - --- -. g.mac.... -, ι 혼j 꽉Q [ X (그림 17) Apple (그림 18) Coca-cola (4) Lotter ia의 Web site (그림 19) 회사의 심볼인 로고를 웹사이트의 중심 에 배치하여 사~용 자의 시선을 끌고 있다. 여백의 미 를 살리면서 전체적인 통일 조화가 이루어져 가독성이 높고 주목효과의 달성 이 뛰어나다. 또한 단순하면서 도 강한 색채의 대비를 통해 정보습득의 용이성을 높여준다. l " @ = 1I111lD1e::IIV }ltil u.t'l\w ~.- a,써. 1 Jl. ii" 염, -e," >l; 석 ;; ; i '''' -. ~,.,,... "- 'i iet' i톰tteil찌 bι~flkj (그림 19) Lotteria 입겉뭘 a 고'"' -r'-$-~' (5) 센과 치히로의 행방불명 Web site (그림 20) 웹사이트에 영화장면을 배 경화면으로 사용하여 인터페이 G

원j 기반 타이 포그 래피의 시 각전딜 효과를 위힌 연 구 (pp170-182) - 김 창 국 스가 조금 복잡하고 사용자에게 혼란을 초래하는 연이 있 다. 전체적으로 타이포그래피의 강약 요소가 부족하여 커 뮤니케이션 변에서 인지도가 높지 못하다. 주시각도를 고 타이포그래 피의 활용에 있어 메시지를 효과적으로 전달 하기 위해서는 인터페이스 환경을 고려한 사용자 중심 의 디자인이 되어야 한다. 려해 타이틀 문자 크기를 조금 크게 이미지화 하면 훨씬 높은가독성을기대할수있을것같다. 또한 활자화된 글자로 정보를 전달한다는 소극적인 태도 에서 벗어나 상징적인 면과 글자체의 특성과 웹에서의 타 이포그래피의 구성방법을 고려하는 것이 효과를 증대시커 고좋은결과를기대할수있을것이다. 111. 결 론 컴퓨터와 인터넷의 급속한 발전에 의해 현재 우리는 수많 (그림 20) 샌과 치히로의 행방불영 은 정보의 홍수 속에서 살아가고 있다. 그러므로 정보전달 의 가장 정확한 표현방법인 타이포그래피가 사용자의 시 4) 개선방안 션을 이끌 수 있는 새로운 시각언어로서 현재 자리 잡아가 고있다. 사례분석으로 통해 본 결과 웹인터페이스의 그래픽 요소 로 사용되는 타이포그래피는 여러 문제점을 안고 있는 것 인터넷에서 시용하고 있는 서체에 대한 모 잡지 설문조사 결과 거의 95%의 네티즌들이 만족하지 못한다는 대탑이 으로 조사되었다. 웹사이트 사례에서도 살펴 보았듯이 방 있다. 디자인에서 타이포그래피의 중요성을 생각한다면 대한 정보를 한꺼번에 텍스트로 처리하려는 경향과 타이 포그래피와 이미지에 치중하려는 경향이 두드러지고 있 다. 따라서 타이포그래피는 보기에 아름다워야 한다는 개 웹에서의 서체지원과 가독성은 인터넷 환경에서 접속속도 다음으로 해결해야 할 난제임이 분명하다 이에 본 연구에서는 타이포그래피를 웹인터페이스 상에서 념에서 벗어나, 웹인터페이스 상의 레이이웃의 한 요소로 서 활용되어 져 야한다 구체적인 개선방안으로는 의 문헌과 기존연구에 의해 분석 해 보고, 표현방법상으로도 분류해 보았다 시각전달효과와 웹에 삽입되는 그림이나 사진의 분위기와 조화되도록 글자를배열해야한다.. 명확한 전달만을 주목적으로 할 경우에는 본문글자는 가독성이 높은 명 조체로 하며, 이탤릭체는 메일주소나 특이상황에 국한하여 시용히는 것이 바람직하고 텍스트 폰트는 읽을 수 있을 정도의 크기를 유지해야 한다. 타이포그래피를 그림파일로 만들 경우4는 번지거나 뚜렷 하지 않은상태가되지 않도록해 상도를조절한다. 결론적으로는 디지털 시대에 타이포그래피를 다루는 방식 은 사진식자시대와는 근본적으로 다르므로, 컴퓨터가 폰 트를 어떻게 관리하고 모니터에서 어떻게 표현되고 해상 도에 따라 어떻게 구현되는 지 우선 기 술적인 면을 알아야 한다. 그리고 웹타이포그래피의 목적이 단순한 미의 전달 이 아니므로 정보전달 매체로서 시각적 질서와 디자인적 활용면에서의 조형적인 방법 을 고려하는 것이 내용 전달 의 효과를증대시킬 것이다 G

2002 한국디 자인포를 7호 참고문헌 public_html/graphics 20). http://user.chollian. net/~blue7sky/ 1). 검진평, 한글의 글자표현, 미진사, 1983 2). 김홍련, 문자디자인, 미진사, 1987 3). 석금호, 타이포그래픽 디자인, 미진사, 1994 4). 전자편집디자인 이론과 실제, 미진사 5). 민경우, 디자인의 이해, 미진사, 1995 6). 김지현, 타이포그래피 커뮤니케이션, 브랜미술,1992 7). 조열 김지현, 형태 지각과 구성원리, 창지사, 1999 8). 오미겐타로, 조형심리, 동국출판사, 1991 9). 안상수, 한글타이포그래피의 가독성에 관한 연구, 홍 익대학교 대학원, 1980 10). 김지현, 그리드속의 타이포그래피, Impress, 1996 11). 김지연, 편집디자인에 있어서 타이포그래피의 역할에 관한 연구, 건국대학교 대학원, 2000 12). 김대영, 웹사용자 인터페이스 오브젝트의 인간 수행 도 평가에 관한 연구, 아주대학교 대학원, 2000 13). 김선영, 웹사이트에 있어서 아이콘 디자인에 관한 연 구, 건국대학교 대 학원, 2000 14). 김수정, 캐릭터상의 형태인지에 관한 연구, 홍익대학 교대학원, 19 97 15). 이선희, CD-ROM타이틀 제작을 위한 인터페이스 디 자인에 관한 연구, 홍익대학교 대학원, 1996, p16 16). 구달용, 웹사용자 인터페이스 환경에서 한글 타이 포 그래피 활용에 관한 연구, 호남대학교 대학원, 2001, p16 Design/design_interface.html 21). http://catsart. net/%2bv2/study / study design01. html 22). http://www.daum.net 23). http://www.apple.com 24). http://www.coca-cola.co.uk 25). http://www.senn.co.kr 26). http://www.lotteria.co.kr 27). http://www.hani.co.kr 28). http://www.naver.com 29). http://www.aniheim.com 30). http://story.lg.co.kr:3000/korean 31). http://www.newsphotokorea.com 32). http://shop.kmib.co.kr 33). http://disey.go.com 34). http://www.cbcatr.co.kr 35). http://www.naver.com 36). http://www.chosun.com 37). http://www.hankooki.com 38). http://www.corsage.co.kr 39). http://www.mashimaro.co.kr 40). http://www.cine21. co.kr 41). http://www.movist.com 42). http://www.hsworld.co.kr 17). John Markes & Jacob Nielsen. Concise Scannable, and Objective How to write for the Web. 1997 (http://www.useit.com/alertbox/971oa. html) 18). http://www.morandesign.co.kr/ 19). http: //2 1O. 217.25 0.100/~k isang/backup/ e

Journal Korea Society of Visual Design Forum