▶AdobeMuse :: 텍스트 또는 이미지가 뿌옇게 보이는 현상
이글에서 살펴보고자하는 것은, 어도비 뮤즈에서 웹사이트 제작시 이미지 또는 텍스트사용시 뚜렷하게 나타나지 않고, 흐릿하게 화면에 표시되는 문제과 이에대한 해결방법을 정리해보고자 한다.
어도비뮤즈는 어느정도 수준의 웹사이트를 쉽고, 빠르게 만들 수 있는 좋은 툴이다. 특히 기존 어도비프로그램(Photoshop, illustrator등)에 익숙한 사람이라면 빠르게 적응하여 활용할 수 있다는점이 큰 매력이라고 할 수 있다. 그러나, 어도비뮤즈가 시작된지 꽤 되었음에도(뮤즈는 11년8월에 첫 베타버전이나왔다.) 활용성은 다른 프로그램과 비교해보았을때 만족스럽지 않은 수준이다.
어도비뮤즈에서 시스템폰트 적용시, 텍스트 또는 이미지가 뿌옇게(선명하지않게)보이는 현상
확실히 이 것은 문제라기보다 '현상'으로서, 시스템 폰트(예시에서는 나눔고딕)를 적용한 후 미리보기화면 또는 웹페이지에 로드해보았을 때 다음과 같은 문제점이 발생하고있다.
마치 저해상도로 캡쳐된 사진을 확대해서 살펴보는 느낌이다. 웹사이트는 결코 동영상과 사진만으로 이루어질 수 없기에 텍스트가 이렇게 뿌옇게 처리되어 나타난다는 것은 웹사이트를 제작하는 데 있어 엄청난 문제라고 할 수 있다.
이 현상은 표준글꼴을 사용하면 발생하지 않는다.
여기서 말하는 '표준 글꼴'이란 Arial, Helveltica와 같은 기본영문 폰트를 말한다. 이 폰트를 적용하여 텍스트를 출력해보면 앞서 살펴본 사진과 다르게 아주 깔끔하게 출력된다.
[표준글꼴(예시에서는 Helvetica)을 적용한 모습]
정확히하자면 앞서 문제점을 언급했듯이, 이것은 시스템폰트를 사용할 때에만 발생하는 문제이다. 뮤즈는 폰트 선택창에서 표준 글꼴(Standard Font)를 별개의 탭으로 구성하고 있는데, 이를 이용하면 텍스가 뿌옇게 나타나는 현상이 전혀 발생하지 않는다.
어도비뮤즈에서 텍스트와 이미지가 뿌옇게 나오는 이유는?
앞서 살펴본 것처럼 이 현상은 '사용자시스템글꼴'을 적용했을때에만 발생한다. 그렇다면 이렇게나오는 이유는 무엇이며, 해결하는 방안은 어떤 것들이 있는지 살펴보도록 하자.
어도비뮤즈에서 이미지 또는 텍스트가 뿌옇게 나오는 이유
이러한문제가 어도비사의 프로그램인 포토샵, 일러스트에서는 발생하지 않고, 유독 어도비뮤즈에서만 발생하고 있는것은, 결국 우리가 어도비뮤즈로 얻고자하는 것인 '웹콘텐츠'이기 때문이다.(뜬 구름잡는 소리 같지만, 뮤즈에서 발생하는 거의 모든 문제는 여기서 출발한다.)
뮤즈는 단순출력물이 아니라 웹에 발행될 콘텐츠를 생산한다는 점에서 여러가지 골칫거리들이 늘 존재한다. 기본적으로 '나의 시스템에 설치한 폰트가 모든사람들의 컴퓨터에 완벽하게 보이지 않는다'라는 점과, 이것은 특히 비 영어권 언어일 수록 받는 페널티가 크다라는 것을 알고 넘어가는 것이 좋다.
뮤즈는 시스템폰트(예시에서는 나눔고딕)사용시 해당 텍스트콘텐츠를 '이미지화'해서 웹에 표시한다.
텍스트를 이미지화함으로서 장점이라면 말그대로 '사진'형태로 웹에서표시되기때문에 그 어떤 폰트라도 웹페이지에서 올바르게 표현된다. 또한, 어느수준에 한하여 이미지크기를 조정함으로써 텍스트의 표시크기를 조정할 수도 있다. 그러나 만약 이렇게 텍스트를 이미지화 사용한다면 기본적으로 검색에 해당 텍스트내용이 노출되지 않을 뿐만 아니라, 사용자들이 해당내용을 드래그하는 등의 기능을 사용할 수 없게 된다.
좌측 사진은 표준글꼴(Arial, Helvetica등)을 사용하여 웹에 발행한 모습이다. 드래그가 정상적으로 가능하며, 텍스트도 굉장히 깨끗하게 나오고 있다. 반면 우측 사진은 사용자시스템글꼴(예시에서는 산돌고딕)을 사용한 경우이며, 이 경우 텍스트 콘텐츠는 '이미지화'되어 웹에 게시된다. 이 경우 사용자가 해당내용을 드래그하려고해도 이미지형태의 모습만 비칠 뿐, 드래그가 가능하지 않다.
해결방법 : 해상도를 '표준'에서 'HiDPI(2x)'로 변경하기
어도비 뮤즈를 사용하면서 이미지나 위의 예처럼 사용자글꼴적용으로인한 '이미지화 된 텍스트'등을 적용할경우 뿌옇게 보이는 경우의 해결방법은 정말 단순하다. 그저 사이트옵션에서 해상도를 HiDPI(2x)로 변경해주면 된다. 아래의 사진을 보자.
가장 먼저 위 사진과 같이 [메뉴]-[파일]탭의 [사이트속성]을 클릭한다. [사이트속성]은 말그대로 사이트의 다양한 속성옵션을 설정할 수 있는데, 여기에는 레이아웃과 콘텐츠관련등 다양한 옵션이 포함된다. 여기서 다룰 부분은 여러 옵션중 '해상도'부분이다.
앞서말했듯, '해결방법'이라고 말하기 머쓱할 정도로 쉽다. 해상도 설정탭에 기본값인 '표준'을 HiDPI(2x)로 설정해준다. 해상도탭은 사진에서도 툴팁으로 설명이 나오고있지만, '모든 에셋 및 뮤즈에서 생성한 콘텐츠의 최대품질'을 정의하는 부분이다. 쉽게말해 사이트에서 우리가 뮤즈안에 배치한 이미지등의 콘텐츠를 어느정도 해상도로 보여줄 것인가에 대한 설정이다. 기존에 우리가 업로드했던 텍스트가 잘 보이지 않았던 것은 이 옵션에의해 이미지화된 텍스트의 해상도가 조정되어 출력되었기 때문이다.
뮤즈는 기본적으로 웹콘텐츠를 제작하기위한 프로그램이다. 당연히 양질의 사진과 양질의 콘텐츠를 총망라하여 높은 퀄리티의 콘텐츠를 구현해내는것은 너무나 좋은것이다. 그러나, 고해상도의 사진을 웹페이지안에 많이 포함할경우 사용자는 더 많은 이미지정보를 수신해야하기때문에 전체적으로 사이트의 퍼포먼스가 느려질 수 밖에 없다. 따라서 뮤즈의 기본 해상도옵션이 [표준]으로 설정되어있는것은 자동으로 용량이 큰파일들의 해상도를 낮춰 보다 '원활한 사이트 속도'를 내기위함이라고 할 수 있다.
어도비뮤즈, 목적에따라 고해상도/표준을 적절하게 사용해야
직접 고해상도옵션으로 적용 후, 이미지와 텍스트(시스템폰트 설정으로인한 이미지화가 된)를 사용해보더라도 큰 부담은 없는 듯 했다(개인적인 체감기준). 그러나, 주 사용자의 네트워크환경이 고르지 못할 수 있기때문에 이러한 부분은 항상 염두해두고 작업을 해야할 것 같다. 가장 좋은 방법은 가능한한 표준글꼴을 사용하여 텍스트들을 이미지화시키지 않는 것이다.