참고:

Adobe Muse는 더 이상 새로운 기능을 추가하지 않으며 2020년 3월 26일 목요일에 지원이 중단됩니다. 자세한 정보 및 지원은 Adobe Muse 서비스 종료 페이지를 참조하십시오.

Adobe Muse CC 2014.3의 개선 사항 | 2015년 2월

이제 Adobe Muse에서 Windows 환경의 HiDPI 디스플레이를 지원합니다. Windows HiDPI 하드웨어를 사용할 경우 Adobe Muse 인터페이스가 훨씬 더 선명하게 보입니다.

개요

HiDPI(High Dots Per Inch)는 고밀도 픽셀을 갖춘 화면 또는 단순히 고해상도를 의미하는 용어입니다. 고밀도 픽셀인 HiDPI 화면은 표준 디스플레이보다 더 정밀하게 텍스트와 그래픽을 표시할 수 있습니다. 예를 들어, Apple은 iPhone, iPad, 일부 Windows 장치, iPod Touch에서 레티나 디스플레이를 사용하여 고해상도 텍스트와 그래픽을 표시할 수 있습니다.

Adobe Muse에서 만든 웹 디자인은 Apple Retina 디스플레이와 같은 고해상도(HiDPI) 화면이 제공하는 디스플레이 화질을 최대한 활용할 수 있습니다.

표준(왼쪽) 및 HiDPI(오른쪽) 픽셀 밀도
표준(왼쪽)과 HiDPI(오른쪽) 픽셀 밀도의 차이

Muse에서 HiDPI를 활용하는 일은 간단합니다.

  • 사이트 해상도 설정을 HiDPI로 변경
  • 사이트에 나타나는 크기의 최소 2배(2x)인 이미지를 만들기

Muse에서 HiDPI 사이트를 업로드하거나 내보내면 생성된 코드는 표준 및 2x 이미지 모두에 포함되며 HiDPI 또는 표준 해상도 디스플레이에서 사이트가 표시될 때 사용할 이미지를 자동으로 탐지합니다.

Adobe Muse에서 HiDPI 활성화

새 사이트 대화 상자의 해상도 메뉴에서 표준과 HiDPI(2x)를 선택할 수 있는 옵션을 제공합니다.

해상도 옵션
사이트 속성 대화 상자의 해상도 옵션

[파일] > [사이트 속성]을 선택하여 사이트를 만든 후 해상도 설정을 변경할 수 있습니다.

2x 이미지 데이터를 가진 에셋 만들기

HiDPI 화면의 장점을 제대로 활용하려면 에셋이 고품질의 화면을 표시할 수 있는 고해상도여야 합니다. 에셋 크기는 사이트에 표시되는 크기의 최소 2배여야 합니다.

2x 이미지를 만드는 일은 간단합니다. 2x 에셋은 화면에 나타나는 실제 크기의 최소 2배는 되어야 합니다. 예를 들면 다음과 같습니다.

2x 이미지 데이터를 가진 에셋 만들기

HiDPI 에셋을 웹 페이지 캔버스에 배치하면 Adobe Muse는 이미지 크기를 50%로 줄여 최적화합니다. 이렇게 화면에 표시되는 크기를 줄여 더 부드럽고 효율적인 디자인 작업을 가능하게 합니다. 이러한 이미지는 에셋 패널에서 "2x"로 표시됩니다. Adobe Muse는 에셋을 HiDPI 화면에서 보았을 때 고밀도 픽셀을 지원하기 위해 원본 에셋 데이터를 보관합니다. 래스터화된 텍스트뿐만 아니라 이미지로 표시되는 효과가 자동으로 2x로 생성되며 Adobe Muse가 게시 또는 내보내기할 때의 표준 크기도 2x가 됩니다.

사용자의 에셋이 2x이고 따라서 더 좋은 화질로 표시할 수 있는 충분한 데이터를 가지고 있는지 확인하려면 에셋 패널을 여십시오([창] > [에셋]). 에셋에 데이터가 충분하면 나열된 목록 옆에 2x 아이콘이 표시됩니다. 에셋 옆에 2x 아이콘이 나타나지 않으면 더 좋은 화질로 표시할 수 있는 충분한 데이터를 가지고 있지 않은 것이기 때문에 표준 해상도로 표시됩니다.

에셋 패널

HiDPI 이미지 내보내기

2x 데이터의 이미지는 Adobe Muse가 고해상도 이미지로 내보내지 않는 특별한 경우입니다. 컨테이너, 배경 이미지로 적용 가능한 페이지, 전체 화면 슬라이드 쇼 등에 맞추기 위해 이미지 크기를 조정하면 Adobe Muse는 게시할 때 이미지의 HiDPI 버전을 내보내지 않습니다. 더욱 특별한 경우인 아래 시나리오 하에서는 표준 버전의 이미지만 내보낼 수 있습니다.

  • 폭 100%: 대상에 맞추기/채우기에 맞추기
  • 전체 화면 슬라이드 쇼: 대상에 맞추기/채우기에 맞추기
  • 브라우저/페이지 배경: 대상에 맞추기/채우기에 맞추기
바둑판식으로 배열된 배경 이미지는 대상에 맞추기/채우기에 맞추기로 설정된 배경 이미지와는 다르게 처리됩니다. 바둑판식으로 배열된 이미지의 경우 웹 사이트를 내보낼 때 Adobe Muse는 표준 및 HiDPI 화면에 모두 대응할 수 있도록 표준 해상도와 고해상도 이미지를 모두 제공합니다.
 
Adobe Muse로 작업할 때 2x 데이터인 고해상도 이미지가 바둑판식으로 배열되어 있으면 다른 이미지로 취급되어 원본 크기의 50%가 웹 페이지 캔버스에 배치됩니다. 내보낼 때, 절반 치수의 이미지(50%)를 표준 해상도 이미지로 내보내고 기본 이미지는 2x 데이터의 고해상도 이미지로 내보냅니다.

사이트 방문자 고려하기

HiDPI 디스플레이를 사용하면 더 많은 이미지 데이터를 사용함으로써 사이트 방문자가 최상의 화질로 웹 컨텐트를 볼 수 있습니다. 2x 이미지는 표준 해상도 이미지 크기보다 4배 더 큰 이미지 파일을 만듭니다. 사이트 방문자가 HiDPI 이미지를 보려면 4배 더 많은 데이터를 로드해야 합니다. HiDPI 사이트에서 컨텐트를 더 빨리 표시하기 위해 Muse는 HiDPI 에셋 뿐만 아니라 표준 해상도 에셋도 내보냅니다. 표준 버전 이외에 HiDPI 에셋을 계속 로드하는 동안 표준 해상도 에셋이 먼저 로드됩니다.

HiDPI(켜기/끄기) 버튼 위젯

꾸준히 진행되는 로드 솔루션이 많은 사이트 방문자에게 편리하긴 하지만 제한된 데이터 플랜을 사용하고 있거나 다른 제한된 또는 비싼 다운로드 할당량에 연결되어 있는 사이트 방문자에게는 문제가 될 수 있습니다. 그러한 사이트 방문자를 위해 HiDPI(켜기/끄기) 버튼 위젯 추가를 고려할 수 있습니다. 페이지에 HiDPI(켜기/끄기) 버튼이 있으면 해당 페이지는 처음에 표준 해상도만 로드하고 HiDPI 버튼이 꺼짐으로 나타납니다. 그 후 사이트 방문자가 HiDPI 버튼을 켜기로 전환하면 그 이후부터 사이트 방문자가 HiDPI를 끄거나, 브라우저를 종료하거나, 쿠키를 삭제할 때까지 HiDPI(켜기/끄기) 버튼을 포함하는 모든 페이지는 HiDPI 이미지를 로드하게 됩니다. HiDPI(켜기/끄기) 버튼을 포함하지 않는 페이지는 HiDPI 또는 Retina 화면에서 볼 때 항상 HiDPI 이미지를 로드하게 됩니다. 사이트를 HiDPI 화면 또는 Retina 장치에서 보지 않을 경우 버튼이 사용 불가능으로 표시되고 표준 해상도 이미지만 로드하게 됩니다.

이 작업에는 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License의 라이센스가 부여되었습니다.  Twitter™ 및 Facebook 게시물은 Creative Commons 약관을 적용받지 않습니다.

법적 고지 사항   |   온라인 개인 정보 보호 정책