텍스트 모자이크 기법에 의한 디지털 콘텐츠의 새로운 형태 연구

Ⅰ. 서 론

뉴 미디어의 등장과 휴대용 디바이스의 대중화로 콘텐츠의 내용과 형식은 단순하고 작은 포맷으로 변화했고, 현대인은 언제 어디서나 다양한 디지털 콘텐츠를 쉽고 간편하게 접할 수 있게 되었다. 이러한 트렌드는 ‘스낵 컬처(Snack Culture)’로 불리며 문화 산업을 비롯한 경제, 사회 등 여러 영역에서 변화를 주도하고 있다[1]. 스낵 컬처란 2007년 5월 미국의 IT전문 잡지 와이어드(Wired)에서 처음 명명한 단어로 짧게 제작된 온라인 콘텐츠들을 소비하는 문화를 말한다[2].

시대에 따른 환경의 변화는 저널리즘에도 적용되어 기존의 신문, 뉴스에서 확장된 1분 뉴스, 카드 뉴스, 인포그래픽 뉴스 등의 양식으로 변화하였다. 특히 카드 뉴스는 다양한 비주얼 이미지 방식을 통해 독자들의 흥미를 유발 하여 빠르게 정보를 전달한다[3]. 하지만 한편으로는 이러한 흐름이 저널리즘의 가치와 부합하지 않는다는 우려의 시각도 있다. 뉴스는 사실성과 정확성을 기반으로 독자에게 가치를 전달하는 매체인데, 압축된 텍스트와 이미지로 사건의 핵심을 전달하기에 정보의 양적인 면에서 역부족이라는 것이다.

이에 본 논문에서 제작한 <Readable Image>는 스낵 컬처 속에서 생산되는 현대 저널리즘의 변화와 역할을 텍스트 모자이크를 통해 형상화하였다. 첫 번째 단계로 관람자는 기사 속의 텍스트로 이루어진 모자이크 이미지를 접하게 된다. 이 단계에서는 즉각적인 ‘보기’가 이루어진다. 그 다음 단계에서는 숨겨져 있던 텍스트가 드러나면서 내용의 ‘읽기’가 가능해진다. 이를 통해 디지털 시대의 정보 전달 형태와 역할 그리고 미래의 방향에 대해 표현하고자 한다.

Ⅱ. 사례 연구

2-1 Textorizer / Excoffizer (2008 - 2011) by Max Froumentin

텍스터라이저(Textorizer)는 텍스트로 이루어진 이미지를 제작하는 프로그램이고 익스커피저(Excoffizer)는 사진을 입력하면 벡터 변환하여 다양한 두께의 평행선으로 이루어진 이미지를 생성하는 프로그램이다[4]. 그림1은 각각의 프로그램을 사용하여 생성된 이미지이다. 두 프로그램 모두 사용자가 변경하고자 하는 원본 이미지를 적용하면 모자이크 기법이 적용된 이미지를 제공한다. 텍스터라이저(Textorizer)에서는 텍스트와 이미지를 업로드하여 사용자 스스로 텍스트 모자이크 이미지를 생성할 수 있다.

Fig. 1.

Arabian Night – Textorizer(left), Jefferson – Excoffizer (right)

2-2 News Knitter (2007 - 2010) by Ebru Krubak, Mahir M. Yavuz

뉴스니터(News Knitter)는 의류를 대용량 데이터 시각화 매체로 활용한 데이터 시각화 프로젝트이다. 니트에 들어갈 독특한 패턴들은 24시간 또는 특정한 기간 내에 인터넷에서 방송된 뉴스피드이다. 이 정보들은 분석되고 필터링되어 고유한 패턴으로 변환된다. 데이터 시각화의 방식으로 섬유를 사용 하였다는 것 에 의의를 갖는다[5].

Fig. 2.

News Knitter

2-3 And That’s the way it is (2012) by Ben Rubin

그림3은 텍사스 대학교 오스틴에 있는 월터 크론카이트 프라자 (Walter Cronkite Plaza)이다. 이 미디어아트는 텍사스 대학의 퍼블릭 아트 프로그램 ‘랜드마크(Land marks)’ 중 하나로 CBS 저녁 뉴스 스크립트를 실시간으로 전송하여 그리드 위에 투사한다. 파사드에 프레임을 따라 흐르는 텍스트 애니메이션은 건축물의 또다른 얼굴을 보여준다. 이것은 시청자들과의 소통을 위한 커다란 창구로 기능한다[6].

Fig. 3.

And That’s the way it is

Ⅲ. 프로젝트 기획

Ⅳ. 프로젝트 제작

본 논문에서 제작한 <Readable Image>는 웹 기반 프로그램을 통해 생성되었다. 웹 브라우저 내에서 사용하는 객체 기반의 스크립트 프로그래밍 언어인 자바스크립트로 개발하였다[11]. 또한 전체적인 프로젝트 구성과 기능 구현을 위해 네트워크 어플리케이션을 개발할 수 있는 소프트웨어 플랫폼인 Node.js[12]를 적용하였다. 사용되는 모든 데이터는 뉴욕 타임즈 웹사이트[13]에서 수집되었으며 프로그램은 해당 사이트의 구조에 맞게 설계되어 있어 다른 데이터는 사용할 수 없다. <Readable Image> 제작은 데이터 수집, 모자이크, 갤러리 총 3단계로 구성된다.

Fig. 4.

<Readable Image> production process

4-1 데이터추출(Crawling)

크롤링(Crawling)이란 알고리즘을 통해 데이터를 추출하는 것을 의미한다[14]. 모자이크 이미지를 제작하기 위해서 필요한 텍스트 데이터와 이미지 데이터는 실제 웹사이트 상에 있는 데이터를 크롤링하여 추출하였다. 대부분의 웹사이트는 각자의 독자적인 구조를 가지고 있기 때문에 원하는 데이터를 얻기 위해서 해당 사이트의 구조에 맞게 알고리즘을 설계했다. 또한 본 작품에서 사용하기 위해 데이터를 적절한 형태로 변환했다.

Fig. 5.

Crawled text data

4-2 모자이크

<Readable Image>의 주된 포맷인 모자이크는 미디어 아티스트를 위해 개발된 언어인 프로세싱[15]에 기반 한 자바스크립트 라이브러리 P5.js[16]로 구현했다. 텍스트 모자이크는 총 두 단계로 구성되는데 첫 번째 단계의 ‘보기’에서 관람자는 단순한 이미지로 데이터를 접하게 된다. 이 때 시각적인 포착이 일어나 즉각적으로 정보를 얻게 된다. 두 번째 단계는 ‘읽기’ 이다. 이 단계에서는 숨겨져 있던 기사의 본문이 드러나며 구체적인 정보를 파악할 수 있는 읽기가 가능해진다.

1) 보기

그림 6은 기사의 원본 이미지와 첫 번째 단계에서 텍스트와 패턴으로 모자이크 된 결과물이다. 모자이크 이미지와 원본 이미지가 비슷한 형상을 보이는 것을 확인 할 수 있다. 이 단계에서 모자이크를 구성하는 텍스트와 사각형 패턴의 색은 원본 이미지를 기반으로 추출된 색상 데이터로 적용했다. 이 과정을 통해 모자이크 이미지는 원본 이미지와 더욱 비슷해진다.

Fig. 6.

Original Image(left), Text mosaic result(right)

2) 읽기

모자이크 된 이미지를 클릭 시 사각형 패턴의 색상이 배경색과 동일하게 변경된다. 이로 인해 모자이크 이미지는 텍스트 모자이크만으로 변경되며 기사의 본문이 드러난다. 읽기를 위한 두번째 단계가 실행된 것이다. <그림 7>은 ‘읽기’에서의 모자이크 이미지이다

Fig. 7.

Text Mosaic Image in ‘Read’

이 단계에서는 두개의 동일한 텍스트를 위치가 조금 다르게 겹친 후에 각각 다른 색을 적용하였다. 위쪽의 텍스트 색은 원본 이미지에서 추출하여 이미지와 텍스트 간의 결합을 유지하였다. 아래쪽의 텍스트에는 회색을 적용하여 쉐도우 효과를 주고자 하였다. 이를 통해 명도가 낮은 색의 텍스트도 편하게 읽을 수 있도록 가독성을 높였다.

Ⅴ. 제작 결과

<Readable Image>는 총2페이지의 메인 페이지와 갤러리 페이지로 이루어진다. 메인 페이지에서는 크롤링을 통해 추출된 실제 웹 상의 데이터를 모자이크 이미지로 변형하여 제공한다. 이 페이지에서는 모자이크 이미지와 그 세부정보를 읽을 수 있다. 또한 갤러리 페이지에서는 스크랩한 이미지들은 확인할 수 있다.

Fig. 8.

<Readable Image> Diagram

메인 페이지의 입력란에 뉴욕 타임즈 URL을 입력하면 해당 기사의 본문 텍스트, 메인이미지가 추출된다. 크롤링 된 데이터는 자동으로 모자이크 과정을 거쳐 모자이크 이미지 형태로 제공된다. URL이 변경되면 데이터를 새롭게 크롤링하여 그에 따른 모자이크 이미지로 변환된다.

Fig. 9.

Main Page before entering URL

Fig. 10.

Main Page after entering URL

갤러리 페이지에서는 저장한 모자이크 이미지들을 한 번에 볼 수 있다. 이 곳의 이미지들은 저장했던 순서대로 전시되어 있으며 언제든지 열람이 가능하다. 또한 전시된 이미지도 ‘보기’뿐만 아니라 ‘읽기’가 가능하다. 해당 이미지를 클릭하면 이미지가 확대되면서 안에 숨겨져 있는 텍스트를 읽을 수 있다. 이를 통해 저장된 이미지에서도 본질적인 텍스트 정보를 접할 수 있다.

Fig. 11.

Gallery Page

Fig. 12.

Gallery Page – Enlarge Image

Ⅵ. 결 론

현대인들은 인터넷과 모바일 기기의 발달 등으로 전통적 형태의 시간과 공간에서 벗어나 작고 빠른 포맷의 디지털 콘텐츠를 소비하는 것에 집중하고 있다[18]. 이러한 환경은 저널리즘 분야에서도 새로운 변화를 이끌어 내고 있다. 하지만 핵심을 정확하게 전달하기에 부족함이 있어 본래 뉴스의 역할을 행하지 못하고 있다는 비판도 있다. 이에 본 논문에서는 디지털 콘텐츠의 변화와 형식을 저널리즘에 적용하여 실제 기사 데이터를 활용한 텍스트 모자이크 이미지로 형상화 하였다. 또한 텍스트 모자이크 기법의 기존 개념인 텍스트로 이루어진 이미지에서 확장하여 이미지 안에 숨겨져 있는 구체적인 정보를 제공하는 관점으로 접근하였다. 이를 통해 두 매체를 결합하여 새로운 형식의 매체를 시도하는 것에 목적이 있다. <Readable Image>는 순차적인 정보 제공 프로세스로 구성되어있다. 간편히 ‘보기’와 자세히 ‘읽기’의 과정을 거치며 짧은 시간 내에 접근하여 본연의 가치를 경험할 수 있다.

이번 연구는 현대 사회의 트랜드에 따른 간단한 비주얼 콘텐츠 중심의 새로운 저널리즘 형식과 기존의 텍스트 중심의 방식을 함께 접목하여 새로운 형태의 디지털 콘텐츠 형식을 시도하였다는 것에 의의를 가진다. 하지만 논문에서 시도한 새로운 디지털콘텐츠 형식이 사용자들에게 얼마만큼의 효과가 있는지 검증을 하지 못한 한계가 있다. 추후 연구를 발전시켜 일정 규모의 피험자들을 대상으로 사용자 테스트를 시도할 예정이다.

Acknowledgments

본 연구는 2017년 대한민국 교육부와 한국연구재단 지원을 받아 수행 된 연구임. (NRF-2017S1A5A2A01023332)

참고문헌

• A. A. Kim, Y. H. Oh, “An Analysis on the Characteristics of Snack Culture in TV contents Curation of the Portal”, The Jounal of Cultural Exchange, 6(2), p109-128, May), (2017.
• N. Miller, “Minifesto for a New Age”, Wired, March), (2007.
• S. Y. Jung, “Analysis of the Current Utilization Situation and Type of the Card News of the Big Data Era”, Journal of the Korean Society of Design Culture, 21(4), p609-620, December), (2015.
• Textorizer: http://lapin-bleu.net/software/textorizer/
• News Knitter: http://casualdata.com/newsknitter/
• And That’s the way it is: https://landmarks.utexas.edu/artwork/and-thats-way-it
• D. W. Kim, “Robot Journalism : Algorithmic Approach to Automated News Article Generation”, Korean Society for Journalism & Communication Studies, 59(5), p64-95, October), (2015.
• K. H. Kim, Gestalt Psychology, hakjisa, p75, (2000).
• H. E. Ahn, “The Use of Mosaic techniques and Visual Representation in Visual Art - Focused on historical consideration of Mosaic and Modern Artist-”, Journal Korea Society of Visual Design Forum, 22(0), p215-224, (2009). [https://doi.org/10.21326/ksdt.2009..22.020]
• H. E. Ahn, “Visual Expression and Symbols of Hangeul”, LPSPAPSPO, 123th ed, p15-40, (2014).
• JavaScript: https://en.wikipedia.org/wiki/JavaScript
• Node.js: https://nodejs.org/ko/
• The New York Times: https://www.nytimes.com/
• Boeing, G, Waddell, P., “New Insights into Rental Housing Markets across the United States: Web Scraping and Analyzing Craigslist Rental Listings”, Journal of Planning Education and Research, (2016).
• Processing: https://processing.org/
• P5.js: https://p5js.org/
• MongoDB: https://www.mongodb.com/
• S. E. Jung, “Study on the ‘72seconds’ Web Drama as Snack Culture”, Cineforum, 24, p75-99, August), (2016. [https://doi.org/10.19119/cf.2016.08.24.75]