얀 치홀트 타이포그래픽 규칙의 적용 가능성 -디지털 매체를 중심으로-

(1)

투고일_2021.06.10 심사기간_2021.07.01-14 게재확정일_2021.07.22 DOI https://doi.org/10.47294/KSBDA.22.4.26

얀 치홀트 타이포그래픽 규칙의 적용 가능성 -디지털 매체를 중심으로- Applicability of Jan Tschichold’s Typographic Rules

-focused on digital media-

정자영, 홍익대학교 국제디자인전문대학원 디자인학과 / 장경국(교신저자), ㈜앱포스터 Jeong, Ja Young_Graduate School of Hongik University IDAS /

Chang, Kyoung Kook(Corresponding author)_Apposter, Inc.

차례 1. 서론

1.1. 연구배경 및 목적 1.2. 연구방법과 내용

2. 연구의 이론적 배경

2.1. 인쇄매체와 디지털 매체 환경의 차이점 2.2. 얀 치홀트의 ‘타이포그래픽 디자인’

3. 실험 방법 3.1. 실험 방법 3.2. 디바이스 사양

3.3. 실험 대상 및 선정 방법 3.4. 실험 환경

3.5. 웹 / 모바일 설문 문항 3.6. 평가 방법

4. 실험결과 및 분석

4.1. 웹 / 모바일 가독성 분석 4.2. 특수한 상황 분석 5. 결론 및 제언 References

(2)

얀 치홀트 타이포그래픽 규칙의 적용 가능성 -디지털 매체를 중심으로- Applicability of Jan Tschichold’s Typographic Rules

-focused on digital media-

정자영, 홍익대학교 국제디자인전문대학원 디자인학과 / 장경국(교신저자), ㈜앱포스터 Jeong, Ja Young_Graduate School of Hongik University IDAS /

Chang, Kyoung Kook(Corresponding author)_Apposter, Inc.

요약

중심어 타이포그래피 얀 치홀트 가독성 분석 디지털 매체

초 스마트 사회에 살아가고 있는 현재, 사람들은 다양한 형태의 스마트 기기를 통해 무수히 많고 복잡 한 정보들을 접하고 있다. 작은 화면 안에서 더 정확하고 빠른 정보를 얻기 위해 가독성이 높은 제품 및 서비스를 선호한다. 본 연구는, 종이를 기본으로 발전해 온 가독성에 관한 요소들과 규칙들이 다양 한 크기의 디지털 기기에 그대로 적용이 되는지 비교 연구를 하는 데에 그 목적에 있다. 신 타이포 그 래피를 창출한 선구적인 타이포그래퍼인 ‘얀 치홀트의 타이포그래픽 디자인’에서 정리한 인쇄물 디자 인에 필요한 가장 중요한 원칙들 중 9개의 항목을 선정하여 웹 / 모바일 환경에 적용해 가독성에 영향 을 주는지의 정량조사를 통한 비교 실험 연구를 하였다. 이를 위해, 본 연구에서는 인터넷 이용률 및 국내 연령대별 스마트 기기 보유율 변동 추이가 가장 높은 20-30대 사이의 디자인 전공자 및 비전공 자를 대상으로 실험 조사를 하였으며, 얀 치홀트의 규칙이 적용된 이미지와 그렇지 않은 이미지를 한 번에 보여주기 위해 1:1모바일 화면은 A4 사이즈의 인쇄물, 1:1웹 화면은 빔 프로젝트을 통해 실험이 이루어졌다. 그 결과, 실험에 적용한 총 9가지의 타이포그래피 디자인 원칙 중 7개의 항목이 웹, 모바 일 상에서도 동일하게 가독성이 높게 적용이 된다고 파악을 하였다. 특히, E항목(한 단어를 갈라 놓지 말 것)은 웹 96%, 모바일에서는 100%가 강조된 한 단어(Jumping)를 갈라 놓지 않는 것이 가독성이 높다고 답변을 하여 나머지 8항목의 결과에 비해 압도적인 결과가 도출되었다. 따라서, 얀 치홀트의 타이포그래픽 디자인 원칙들이 오늘날의 웹 / 모바일 환경에 적용했을 때도 가독성에 높은 영향을 준 다는 것을 알 수 있었다. 연구자는 향후 본 연구에서 실험한 9가지의 디자인 원칙 이외에 모든 원칙들 에 대해서도 다양한 크기의 디지털 기기들에 대한 가독성 비교 연구를 통해 지속적이고 효율적인 개 발을 하는데 일조를 하고자 한다.

ABSTRACT

Keywords typography Jan Tschichold readability analysis digital media

Currently living in a super-smart society, people are exposed to countless and complex information through various forms of smart devices. In addition, people prefer those devices and services with high readability to obtain more accurate information in a faster way within a small screen. The purpose of this study is to conduct a comparative study on whether the elements and rules of readability that have evolved in print media are able to be applied to digital devices of diverse screen sizes. For this study, nine of the most important principles for print design were selected, which were organized by the pioneering typographer “Jan Tschichold's Typographic Design”. Based on these principles, researchers conducted an experimental survey on those in their 20s and 30s in Korea who have relatively high internet usage and the highest smart device retention. Both web and mobile screens were presented to the surveyees to examine the change in readability according to Jan Tschichold's typographic principles. As a result, seven of the nine typography design principles applied to this experiment were found to be equally readable on the web and mobile. In particular, the answers on principle E rated the highest consistency(Web : 96%, Mobile : 100%) than the rest of 8 principles, which is “Do not split one word”. Therefore, the study shows that Jan Tschichold's typographic design principles have a high impact on readability even when applied to today's web/mobile environments. In addition to the nine design principles tested in this study, researchers hope to contribute to the continuous and efficient development of digital devices on various displays through comparative studies.

(3)

1. 서론

1.1. 연구 배경 및 목적

디지털 매체의 등장으로 인쇄매체의 영향력이 줄어들었지만 여전히 인쇄매체의 가독성에 관한 연구는 끊임없이 연구되어온 주제이며, 가독성에 영향을 주는 요소와 함께 구체적으로 연구되 고 있다(Kim et al., 2015).

특히, 초 스마트 사회 (Society 5.0)에 살아가고 있는 현재, 사람들은 다양한 형태의 스마트 기기를 통해 무수히 많고 복잡한 정보들을 접하고 있다. 작은 화면 안에서 더 정확하고 빠른 정보를 얻기 위해 가독성이 높은 제품 및 서비스를 선호하고 이러한 가독성은 제품의 품질을 결정짓는 주요한 요인으로 자리를 잡고 있다. 이처럼, 종이를 기본으로 발전해 온 가독성에 관한 요소들과 규칙들이 다양한 크기의 디지털 기기에 그대로 적용이 되는지 비교 연구를 통해 지속적인 개발 및 연구를 할 필요가 있다.

1.2. 연구방법과 내용

본 연구에서는 신 타이포 그래피를 창출한 선구적인 타이포그래퍼인 ‘얀 치홀트(Jan Tschichold, 1902~1974)의 타이포그래픽 디자인’에서 정리한 인쇄물 디자인에 필요한 가장 중요한 원칙들을 기반으로 다양한 크기의 디지털 화면 중 웹 / 모바일 환경에 적용하여 가독성 에 영향을 주는지의 정량조사를 통한 비교 실험 연구를 하였다.

따라서 본 연구에서는 국내 스마트 디바이스 브랜드 시장 순위를 기준으로 설문조사에서 사용 될 웹 및 모바일 테스트 기기를 정하여 1:1 사이즈의 웹, 모바일 화면을 제작한 뒤, 얀 치홀트의 규칙이 적용된 이미지와 그렇지 않은 이미지를 한 번에 보여주기 위해 모바일 화면은 A4 사이 즈의 인쇄물, 웹 화면은 빔 프로젝트을 통해 실험이 이루어졌다. 또한, 인터넷 이용률 및 국내 연령대별 스마트 기기 보유율 변동 추이가 가장 높은 20-30대 사이의 디자인 전공자 및 비전 공자를 대상으로 총 55명이 (디자인 전공자 30명 / 비전공자 25명)본 실험에 참가하였다. 하지 만, 균등한 결과값을 위해 전공자 30명에서 임의로 5명을 제외한 후 전공자 25명, 비전공자 25명의 답변만 실험 결과값에 반영하였으며, 그 수치로 나온 결과를 바탕으로 얀 치홀트의 타이포그래픽 원칙에 따른 가독성의 변화와 선호도를 살펴보았다.

2. 연구의 이론적 배경

2.1. 인쇄매체와 디지털 매체 환경의 차이점

인터넷 사용과 디지털 기기의 보편화로 인해 종이 인쇄매체에서 디지털 매체로 넘어오면서 종이 인쇄매체와 디지털 매체 환경의 차이에 대한 다양한 요소들이 생겨났다.

인쇄매체의 환경은 종이 질감 또는 색 차이로 인하여 가독성에 영향을 주지만, 디지털 매체로 넘어오면서 화면 밝기, 화면 색상, 화면 크기 및 비율, 디스플레이 종류 등 다양한 요인으로 인해 가독성에 영향을 주었고 특히, 눈의 피로도와 시력에도 영향을 미치는 것을 볼 수 있다.

반면 색의 경우, 인쇄매체는 망점을 사용하는 색상 구현 원리이고 디지털 매체는 빛의 혼합으로 색을 구현하는 원리이기 때문에 디지털 매체에서 RGB가 나타낼 수 있는 색의 스펙트럼이 인쇄 매체에서의 CMYK가 나타낼 수 있는 색의 스펙트럼보다 더 넓다고 볼 수 있다. 또한, 디지털 매체에서는 디스플레이 화면의 이미지가 픽셀로 구성되어 있기 때문에 해상도 차이로 인해 가독성에 영향을 줄 수 있다.

(4)

인쇄매체 디지털매체

환경차이 종이질감

종이 색

화면 밝기 화면 색상

화면 크기 및 비율(가로 및 세로) 디스플레이 종류

색 CMYK RGB

표현방법 망점 픽셀

<Table 1> Differences between Print and Digital Media Environments.

2.2. 얀 치홀트의 ‘타이포그래픽 디자인’

독일 출신의 타이포그래피 디자이너 얀 치홀트(Jan Tschichold, 1902~1974)는 1935년 ‘타이 포그래픽 디자인’(Typographische Gestaltung)을 발표하며 과거 자신의 이론을 발전시켜 정 리하였다. <Table 2>는 얀치홀트가 주장한 디자인의 원칙을 정리한 표이다.

타이포그래피 요소 얀 치홀트의 타이포그래피 디자인 규칙

활자

산세리프체를 활용할 것

굵은 이집션은 제목, 세리프체는 본문에 사용하는 것이 효과적이다.

여러 종류의 산세리프체를 섞어 쓰지 말 것

책의 본문이 산세리프체로 되어있을 때, 제목 활자체는 본문 활자체 그대로 쓰거나 본문 활자체의 굵은 꼴이 좋지만 다른 활자체와 섞는 것은 좋지 않다.

글의 대비 효과를 위해 서로 대조되는 성격의 활자체를 사용할 수 있다.

낱말

글자 사이를 띄우지 말 것 대문자와 소문자를 적절하게 섞어 쓸 것 다섯 낱말 이하의 글줄에서 양끝 맞춤을 하면 단어 사이 간격을 고르게 할 수 없으므로 피할 것

한 단어를 갈라 놓지 말 것

글줄에서의 강조

제목은 본문보다 큰 활자를 쓰거나 본문의 크기가 같은 경우 굵은 활자를 쓸 것 하나의 인쇄물에서는 세 가지의 활자 크기로 제한해 쓰는 것이 좋다.

글자 크기가 다른 글자들을 한 줄에 넣어야 할 경우, 크기가 다른 글자를 3가지 이상 쓰지 말 것

행간은 어간보다 넓게 할 것, 특히 산세리프체는 행간이 넓어야 함 글줄에서 강조해야 할 일이 생길 때는 기울인 꼴이나 반 굵은 꼴을 사용한다.

(하지만 강조되는 부분의 활자를 바꾸면 안 된다) 글자 크기가 다른 글자들을 한 줄에 넣을 경우, 아랫부분이 닿는 기준선(베이스라인)에 맞출 것.

글줄 및 단락

크기가 다른 활자를 사용할 경우, 눈에 잘 띄도록 묶어 단락을 만들어줘야 함 서로 다른 길이로 이루어진 글줄들은 반드시 왼쪽 끝을 가지런히 맞추고

오른쪽으로 흘러야 한다.

두 줄짜리 제목의 경우, 길이가 다른 것이 좋음 정렬방법이 섞여있을 때, 왼쪽 맞추기가 중요한 내용으로 보임

오른쪽 끝을 맞춘 글을 굵은 꼴로 짜면 왼쪽 끝으로 맞춘 가는 꼴로 된 글보다 더 중요해 보인다.

줄 가는 활자체와 두꺼운 줄을 함께 사용하여

활자의 섬세한 아름다움을 돋보이게 할 수 있다.

<Table 2> Typographic Design Rules of Jan Tschichold.

(5)

3. 실험 방법 3.1. 실험 방법

실험 방법은 정량조사 방법 중 하나인 설문조사를 통해 나온 결과 수치 값을 바탕으로 얀치홀트 의 디자인 규칙들이 웹 / 모바일 환경에서도 가독성 영향을 주는지에 대해 알아보았다.

3.2. 디바이스 사양

본 설문조사에서 사용된 웹 및 모바일 테스트 기기는 국내 스마트 디바이스 브랜드 시장 순위를 기준으로 정하였다. 한국갤럽 리포트에 따르면, 국내 사용자의 55%, 36%가 각각 삼성전자의 스마트폰, 노트북을 사용하는 것으로 나타났다. 따라서, 삼성전자의 최근 출시 단말을 기준으로 S21+, 갤럭시 북 프로 360 기기의 사양을 적용하여 설문을 진행하였다.

웹 / 노트북 모바일 / 스마트 폰

이미지

모델명 갤럭시 북 프로 360 S21+

브랜드 삼성전자 삼성전자

화면크기 302.5*202(mm) 75.6*161.5(mm)

해상도 1920*1080 2400*1080

<Table 3> Web / Mobile Test Device Specifications

3.3. 실험 대상 및 선정 방법

DMC REPORT에 따르면, 연령별 인터넷 이용률 및 국내 연령대별 스마트 기기 보유율 변동 추이가 20-30대 사이의 사람들이 제일 높게 차지하는 것으로 나타났다. 따라서, 노트북과 스 마트 기기를 모두 보유하고 있는 20-30대 사이의 디자인 전공자 및 비전공자를 대상으로 총 55명이 (디자인 전공자 30명 / 비전공자 25명)본 실험에 참가하였다. 하지만, 균등한 결과값을 위해 전공자 30명에서 임의로 5명을 제외한 후 전공자 25명, 비전공자 25명의 답변만 실험 결과값에 반영하였다. 실험 참가자는 모두 평균 하루 2시간 이상 웹 / 모바일을 통해서 인터넷 및 기사들을 이용한다.

3.4. 실험 환경

실험에 영향을 끼칠 수 있는 변수들을 통제하기 위해 문장, 폰트 크기, 행간을 동일하게 설정하 였다. 문장은 로마자 26글자 모두를 포함시킨 ‘The quick brown fox is jumping over the lazy dog’을 사용하였다. 제목, 본문의 폰트 크기는 디자인 플랫폼 리메인에서 제시한 웹, 모바일 행간 가이드 라인을 따라 21px과 16px을 각각 사용하였으며 행간은 행간 계산법(글자 크기

색 컬러 사용을 자제하는 것이 전체 모양을 좋게 만듦

표 표를 짤 때는 가능하면 줄을 쓰지 않고 제작을 하는 게 좋다.

사진 종이의 가장자리까지 채우는 사진은 같은 쪽에 최대 두 점을 넘기지 않도록 해야 한다.

(6)

x 1.75)을 이용하여 제목과 본문에 각각 37px, 28px을 사용하여 동일한 조건의 실험 환경을 만들었다.

웹 / 모바일

문장 The quick brown fox is jumping over the lazy dog.

폰트크기

제목 21px

본문 16px

행간

제목 37px (행간 계산법 : 글자 크기 x 1.75)

본문 28px (행간 계산법 : 글자 크기 x 1.75)

<Table 3> Web / Mobile Test Device Font and Line Height.

3.5. 웹 / 모바일 설문 문항

설문 문항은 얀 치홀트의 타이포그래픽 디자인 저서를 바탕으로 다양한 그의 디자인 규칙 이론 중, ‘The quick brown fox is jumping over the lazy dog’ 문장에 적용 가능한 9가지의 규칙들을 선정하여 웹, 모바일 각각 9문항(A-I)씩 동일한 조건을 적용하여서 제작하였다. 이때, 참가자 들에게 제공된 웹 / 모바일 화면은 기기의 해상도 및 화면 크기를 고려하여 제작되었다.

적용된 얀 치홀트의 디자인 규칙

(^A) 글줄에서 강조해야 할 일이 생길 때는 기울인 꼴이나 반 굵은 꼴을 사용한다.

(하지만 강조되는 부분의 활자를 바꾸면 안 된다)

적용된 디지털 기기 웹 모바일

이미지

항목별 적용 항목 A : 강조할 부분의 활자를 기울인 꼴과 반 굵은 꼴을 사용.

B: 강조할 부분의 활자의 크기를 키움.

(^B) 글자 크기가 다른 글자들을 한 줄에 넣을 경우, 아랫부분이 닿는 기준선(베이스라인)에 맞출 것.

이미지

항목별 적용 항목 A: 글자 크기가 다른 단어를 같은 줄의 기준선에 맞춘 것.

B: 글자 크기가 다른 단어를 같은 줄의 윗선에 맞춘 것.

<Table 4> Web / Mobile Test Assessment Topics.

(7)

적용된 얀 치홀트의

디자인 규칙 (^C) 하나의 인쇄물에서는 세 가지의 활자 크기로 제한해 쓰는 것이 좋다.

이미지

항목별 적용 항목 A: 2가지의 활자 크기를 사용한 것.

B: 4가지의 활자 크기를 사용한 것.

(^D) 서로 다른 길이로 이루어진 글줄들은 반드시 왼쪽 끝을 가지런히 맞추고 오른쪽으로 흘러야 한다.

이미지

항목별 적용 항목

A: 왼쪽 정렬 B: 양끝 맞춤 C: 중앙 정렬 적용된 얀 치홀트의

디자인 규칙 (^E) 한 단어를 갈라 놓지 말 것.

이미지

A: 한 단어를 갈라 놓은 것.

B: 한 단어를 갈라 놓고, 하이픈을 사용한 것.

C: 한 단어를 갈라 놓지 않은 것.

(8)

(^F) 책의 본문이 산세리프체로 되어있을 때, 제목 활자체는 본문 활자체 그대로 쓰거나 본문 활자체의 굵은 꼴이 좋지만 다른 활자체와 섞는 것은 좋지 않다.

이미지

항목별 적용 항목 A: 본문이 산세리프체로 되어있고, 제목 활자체는 본문 활자체의 굵은 꼴.

B: 본문이 산세리프체로 되어있고, 제목 활자체는 굵은 세리프 체.

적용된 얀 치홀트의

디자인 규칙 (^G) 컬러 사용을 자제하는 것이 전체 모양을 좋게 만듦.

이미지

항목별 적용 항목 A: 강조할 단어에 본문 서체의 굵은 꼴로 설정

B: 강조할 단어에 본문 서체의 굵은 꼴과 빨강, 보라색을 각각 설정함 적용된 얀 치홀트의

디자인 규칙

(^H) 굵은 줄은 반드시 가는 꼴, 또는 보통 꼴의 활자와만 함께 쓸 수 있다.

(굵은 줄에 굵은 꼴의 활자는 무디고 무거워 보임)

이미지

항목별 적용 항목 A : 강조할 단어에 두꺼운 꼴 활자와 두꺼운 줄을 사용 B: 강조할 단어에 두꺼운 꼴 활자와 얇은 줄을 사용

(9)

3.6. 평가 방법

평가 시, 참가자들은 웹 / 모바일 각 각의 항목에 보이는 화면 중 어느 화면(A,B,C,D)이 더 가독성이 좋은지 선택하여 표시를 하는 방식으로 진행을 하였다.

1:1 사이즈 비율의 웹과 모바일 화면을 한 번에 보여주기 위해, 모바일 화면은 A4에 인쇄를 하여 보여주었고, 웹 화면은 빔 프로젝터를 통해 실험자들에게 보여주었다. 각 항목 당 평균 1분 30초의 가독성 평가 시간을 동일하게 주었고, 빔 프로젝터로 보이는 몇 가지의 항목 중 해상도로 인하여 가독성 판단이 어려울 경우 시간을 추가적으로 주었다. 그 이외에 가독성을 판단하기가 어려운 문항은 D(가독성을 판단하기 어려움)를 선택하도록 하였다.

4. 실험결과 및 분석

각 항목 적용 원칙 웹 / 모바일 A B C D

(A)

글줄에서 강조해야 할 일이 생길 때는 기울인 꼴이나 반 굵은 꼴을 사용한다.(하지만 강조되는 부분의 활자를 바꾸면 안 된다)

웹

전공자 18 7 - -

비전공자 13 12 - -

합계 31 19 - -

평균값 62% 38% - -

모바일

전공자 20 5 - -

비전공자 11 11 - 3

합계 31 16 3

평균값 62% 32% - 6%

(B)

글자크기가 다른 글자들을 한 줄에 넣을 경우, 아랫부분이 닿는 기준선(베이스라인)에

맞춘다.

웹

전공자 19 6 - -

비전공자 14 8 - 3

합계 33 14 - 3

평균값 66% 28% - 6%

모바일

전공자 22 3 - -

비전공자 19 6 - -

합계 41 9 - -

평균값 82% 18% - -

(C)

하나의 인쇄물에서는 세 가지의 활자 크기로 제한해 쓰는 것이 좋다.

웹

전공자 24 1 - -

비전공자 22 3 - -

합계 46 4 - -

평균값 92% 8% - -

모바일

전공자 25 - - -

비전공자 23 2 - -

합계 48 2 - -

평균값 96% 4% - -

<Table 5> Web / Mobile Readability Analysis Results.

(^I) 오른쪽 끝을 맞춘 글을 굵은 꼴로 짜면, 왼쪽 끝으로 맞춘 가는 꼴로 된 글보다 더 중요해 보인다.

이미지

A : 중단 단락의 문장을 오른쪽 끝으로 맞추고 굵은 꼴로 짬.

나머지 단락은 왼쪽 끝으로 맞추고 가는 꼴로 설정, B: 문단 전체를 왼쪽 끝으로 맞추고 가는 꼴로 설정.

(10)

4.1. 웹 / 모바일 가독성 분석

디자인 전공자 및 비전공자에 대한 웹 / 모바일 가독성 분석 결과, 웹과 모바일 모두 9항목 중(A~I) 8항목(웹 : A,B,C,E,F,G,H,I / 모바일 : A,B,C,D,E,G,H,I)이 얀 치홀트의 디자인 규칙 을 적용한 문장의 가독성이 높다고 나왔다. 특히, 디자인 전공자 참가자들은 8항목에서 (A,B,C,E,F,G,H,I) 웹, 모바일 모두 얀 치홀트의 디자인 규칙을 적용한 문장의 가독성이 높다고 나왔고 비전공자 참가자들은 웹, 모바일 모두 5가지 항목만이(B,C,E,G,H) 얀 치홀트의 디자인 규칙을 적용한 문장의 가독성이 높다고 나왔다. 특히 E항목(한 단어를 갈라 놓지 말 것)모바일 부분에서는 디자인 전공자와 비전공자의 답변 모두 100%로 강조된 한 단어(Jumping)를 갈라 놓지 않는 것이 가독성이 높다고 답변을 하였다. 또한, C항목도(하나의 인쇄물에서는 세 가지

(D)

서로 다른 길이로 이루어진 글줄들은 반드시 왼쪽 끝을 가지런히 맞추고 오른쪽으로 흘러야

한다.

웹

전공자 1 22 2 -

비전공자 4 14 7 -

합계 5 36 9 -

평균값 10% 72% 18% -

모바일

전공자 19 - 6 -

비전공자 5 10 10 -

합계 24 10 16 -

평균값 48% 20% 32% -

(E)

한 단어를 갈라 놓지 말아야 한다.

웹

전공자 - - 25 -

비전공자 - 2 23 -

합계 - 2 48 -

평균값 - 4% 96% -

모바일

전공자 - - 25 -

비전공자 - - 25 -

합계 50

평균값 - - 100% -

(F)

책의 본문이 산세리프체로 되어있을 때, 제목 활자체는 본문 활자체 그대로 쓰거나 본문 활자체의 굵은 꼴이 좋지만 다른 활자체와

섞는 것은 좋지 않다.

웹

전공자 17 8 - -

비전공자 14 9 - 2

합계 31 17 - 2

평균값 62% 34% - 4%

모바일

전공자 15 10 - -

비전공자 2 23 - -

합계 17 33 - -

평균값 34% 66% - -

(G)

컬러 사용을 자제하는 것이 전체 모양을 좋게 만든다.

웹

전공자 20 5 - -

비전공자 23 2 - -

합계 43 7 - -

평균값 86% 14% - -

모바일

전공자 21 4 - -

비전공자 20 5 - -

합계 41 9 - -

평균값 82% 18% - -

(H)

굵은 줄은 반드시 가는 꼴, 또는 보통 꼴의 활자와만 함께 쓸 수 있다. (굵은 줄에 굵은

꼴의 활자는 무디고 무거워 보임)

웹

전공자 4 21 - -

비전공자 8 17 - -

합계 12 38 - -

평균값 24% 76% - -

모바일

전공자 1 24 - -

비전공자 8 17 - -

합계 9 41 - -

평균값 18% 82% - -

(I)

오른쪽 끝을 맞춘 글을 굵은 꼴로 짜면 왼쪽 끝으로 맞춘 가는 꼴로 된 글보다 더 중요해

보인다.

웹

전공자 14 11 - -

비전공자 12 13 - -

합계 26 24 - -

평균값 52% 48% - -

모바일

전공자 15 10 - -

비전공자 16 9 - -

합계 31 19 - -

평균값 62% 38% - -

(11)

의 활자 크기로 제한해 쓰는 것이 좋다) 디자인 전공자 및 비전공자들의 웹, 모바일 답변 둘 다 B(4가지의 활자크기를 사용한 것) 보다 A(2가지의 활자 크기를 사용한 것)의 가독성이 높다고 판단을 하였고 특히 모바일 화면에서는 참가자 모두의 평균값 96%이상이 웹 화면에서 의 가독성보다 높다고 답변을 하였다. 또한, A,B,F 항목은 참가자의 6%, 6%, 4%가 D(가독성 을 판단을 하기 어렵다)의 답변을 선택 하였다.

4.2. 특수한 상황 분석

가독성 분석 결과에서 웹은 D항목(서로 다른길이로 이루어진 글줄들은 반드시 왼쪽 끝을 가지 런히 맞추고 오른쪽으로 흘러야 한다)에서, 전공자 및 비전공자 참가자의 평균 72%가 B(양 끝 맞춤)의 가독성이 제일 높다고 답변을 하였다. 반면, 똑같은 항목에서 모바일은 전공자 및 비전공자 참가자의 평균 48%가 A(왼쪽 정렬)를 선택 하였는데 이는 설문 조사 시, 빔 프로젝 터 스크린으로 인한 텍스트의 해상도 저하 및 측정거리의 요인으로 인하여 답변의 차이가 나타 나는 것으로 보인다.

F항목(책의 본문이 산세리프체로 되어있을 때, 제목 활자체는 본문 활자체 그대로 쓰거나 본문 활자체의 굵은 꼴이 좋지만 다른 활자체와 섞는 것은 좋지 않다)에서는 디자인 전공자 및 비전 공자 전체 평균 66%가 모바일 화면에서는 B(본문이 산세리프체로 되어있고, 제목 활자체는 굵은 세리프 체)의 가독성이 높다고 답변을 하였는데 웹 화면에서는 전체 평균 62%가 A(본문 이 산세리프체로 되어있고, 제목 활자체는 본문 활자체의 굵은 꼴)를 선택하여 얀 치홀트의 디자인 규칙에서 벗어나는 결론이 나왔다.

5. 결론 및 제언

본 연구에서는 얀 치홀트가 제시한 타이포그래피 디자인 원칙들 중 9가지의 규칙을 선정하여 다양한 디스플레이 크기의 웹 / 모바일 환경에 적용하여 가독성에 영향을 주는지에 대한 비교 실험 연구를 하였다. 그 결과 실험에 적용한 총 9가지 얀 치홀트의 타이포그래피 원칙 중 7개의 항목이(A,B,C,E,G,H,I) 웹, 모바일 상에서도 가독성이 높게 적용이 된다고 파악을 하였다. 추 후 연구에서는 웹과 모바일 화면 모두 동일 한 조건의 컴퓨터 화면을 제공하여 얀 치홀트의 타이포그래피 원칙 모두가 적용이 되는지에 대한 실험이 추가적으로 진행되어야 할 것이며, 향 후 개발되는 다양한 크기의 디지털 기기들에 대해서도 지속적인 가독성 비교 연구를 할 필요가 있다.

References

DMC Report (2020).

Mobile Market Status and Forecast Part 1 : Focusing on tr ends in domestic and foreign mobile markets of Internet & Device.

https://www.dmcreport.co.kr/report/trendBrief/freeView?reportcode=DMCTBF2020 0062

&drtopdeth=RPT_TYPE_1&keyword_type=%22%22

DMC Report (2020).

Mobile Market Status and Forecast Part 2 : Contents & Se rvices Based on Domestic and Foreign Mobile Market Trends.

https://www.i-bo ss.co.kr/ab-3208-404

Gallup (2020).

2012-2020 Smart phone Usage & Brand.

https://www.gallup.co.kr /gallupdb/reportContent.asp?seqNo=1134 Jan, T. (2014).

Typographische Gestaltung

(Ahn, J. S Trans.). Ahn Graphics.

(O riginal work published 1935)

Kim, M. J., Park, S. H., Ahan, S. H., Choi, M. B., Yoon, M. H. (2015). Comparin g font readability in paper printing and display environment, Focusing on Serif and Sans Serif in Korea.

Journal of he Ergonomics Society of Korea.

416-427.

https://ww w.dbpia.co.kr/journal/articleDetail?nodeId=NODE06362362

(12)

KISDI (2020). P

ossession of Smart Devices and Access to Digital Media Services.

http://m.kisdi.re.kr/mobile/repo/stat_view.m?key1=14850&selectPage=

Moom, E. B. (2011).

Understanding and Utilizing Colors.

Ahn Graphics.

Remaim (n.d.). http://styleguide.co.kr/content/typo/line-height.php