Adobe Muse에서 텍스트 및 텍스트 프레임 추가

웹 사이트를 디자인할 때 Adobe Muse를 사용하여 다음과 같은 방법으로 텍스트를 추가할 수 있습니다.

• 텍스트 상자를 추가한 다음 텍스트 상자 안에 내용을 입력하기 시작합니다.
• 텍스트를 텍스트 파일에 저장하고 이 파일을 Adobe Muse 페이지로 가져옵니다.
• InDesign과 같은 응용 프로그램을 사용하여 텍스트를 배치합니다. 미리 서식이 지정된 이 텍스트를 클립보드에 복사하여 Adobe Muse로 붙여 넣습니다.

반응형 레이아웃의 경우 사용자가 웹 사이트를 보는 장치에 따라 텍스트 서식을 지정할 수도 있습니다. 예를 들어, 스마트폰용 텍스트는 데스크톱 버전과 비교하여 더 크고 여백이 더 많게 만들 수 있습니다. 또한 Adobe Muse에서 반응형 웹을 디자인하면 각 중단점에 대한 텍스트 서식을 지정할 수도 있습니다. 각 중단점의 텍스트 스타일, 색상, 행간, 여백 및 크기를 변경할 수 있습니다. 단일 파일에서 여러 장치에 대한 웹 사이트를 만들 때 텍스트 서식을 지정하는 방법에 대한 자세한 내용은 반응형 레이아웃에 텍스트 서식 지정을 참조하십시오.

메뉴를 채우기 위해 외부 텍스트 파일에서 메뉴 텍스트를 복사한 뒤 텍스트 프레임에 붙여 넣을 것입니다. 또한 단락 스타일을 만들고 적용하여 텍스트 스타일을 지정할 것입니다. 다음 단계를 따르십시오.

샘플 사이트의 라이브 버전을 방문하고 디자인을 참조하면 도움이 될 것입니다.

텍스트 작업에 대한 자세한 내용은 Adobe Muse의 타이포그래피를 참조하십시오.

내장된 맞춤법 검사기 사용

Adobe Muse에는 텍스트 프레임에서 맞춤법 오류를 쉽게 찾아 해결할 수 있는 맞춤법 검사기가 포함되어 있습니다. 맞춤법 검사기는 항상 사용으로 설정됩니다. 사전에서 찾을 수 없는 단어에는 빨간색 밑줄이 표시됩니다.

제안된 단어 중 하나가 올바른 경우 아래쪽 화살표를 누르거나 마우스를 사용하여 원하는 제안된 단어를 선택한 다음 Return/Enter 키를 눌러 적용합니다. 실수로 틀린 단어를 선택한 경우 간단히 변경 내용을 취소([편집] > [실행 취소])하고 다른 제안된 단어를 선택하거나 [텍스트] 도구를 사용하여 단어를 편집합니다.

맞춤법 오류로 표시된 단어(사람의 이름이나 지명)가 한 번만 사용되고 올바르게 입력되었음을 알고 있는 경우 수정할 필요가 없습니다. [디자인] 보기에 나타나는 빨간색 밑줄은 사이트를 미리 보거나 게시하거나 내보내는 경우 표시되지 않습니다.

회사 이름이나 주소와 같이 일반적으로 사용되는 단어로 작업할 때는 맞춤법 오류로 표시되지 않도록 맞춤법 검사기 사전에 단어를 추가할 수 있습니다.

[텍스트] 도구를 사용하여 사전에 추가할 단어를 마우스 오른쪽 단추로 클릭한 다음 나타나는 컨텍스트 메뉴에서 [사전에 추가] 옵션을 선택합니다.

전체 사이트 및 개별 텍스트 프레임에 대해 원하는 언어를 설정(이에 따라 맞춤법 검사기 언어 사전도 설정)할 수 있습니다.

전체 사이트에 대한 맞춤법 검사기 사전을 설정하려면 [파일] > [사이트 속성]을 선택합니다. [텍스트] 탭을 클릭하고 [언어] 메뉴에서 원하는 언어를 선택한 다음 [확인]을 클릭합니다.

일부 사이트 프로젝트의 경우 여러 언어로 텍스트를 제공해야 할 수 있습니다. 이러한 경우 [사이트 속성]에서 기본 언어(가장 자주 사용되는 언어)를 설정한 다음 다른 언어로 텍스트가 표시되는 특정 텍스트 프레임에 대해 맞춤법 검사기 언어를 설정할 수 있습니다.

텍스트 프레임에 대한 맞춤법 검사기 사전을 설정하려면 [선택] 도구로 텍스트 프레임을 선택합니다. 마우스 오른쪽 단추를 클릭하면 나타나는 컨텍스트 메뉴에서 [언어] > (원하는 언어 선택)을 선택합니다.

이제 텍스트 프레임의 모양을 업데이트합니다. 사각형 및 이미지 프레임과 마찬가지로 텍스트 프레임의 획, 채우기 및 배경 이미지를 설정하여 스타일을 지정할 수 있습니다.

텍스트 프레임의 모양 업데이트

이 단원에서는 페이지의 배경 그래픽에서 눈에 띄도록 텍스트 프레임의 특성을 업데이트합니다.

아침 식사 메뉴 위쪽의 레이블은 사용자를 안내하고 읽고 있는 메뉴가 무엇인지 눈에 띄도록 하는 데 도움을 줍니다. 변경 작업을 수행한 후 완료된 아침 식사 메뉴는 다음 이미지와 비슷하게 나타납니다.

다음 단원에서는 아침 식사 메뉴를 복제한 다음 복제된 텍스트 프레임의 텍스트 내용을 업데이트하여 점심, 저녁 식사 및 디저트 메뉴를 만들 것입니다.

텍스트 프레임 복제

앞 단원에서는 아침 식사 메뉴 텍스트 프레임을 만들고, 외부 텍스트 파일의 텍스트로 채우고, 단락 스타일을 사용하여 일관성 있는 텍스트 서식을 적용한 다음, 바둑판식 배경 이미지, 채우기 색상 및 획을 추가하여 텍스트 프레임의 모양을 업데이트했습니다. 메뉴 텍스트 프레임 위에 두 번째 텍스트 프레임을 추가하여 아침 식사 메뉴를 확인할 수 있는 머리글을 만들었습니다. 다음 단계에서는 이러한 요소를 세 번 복제하여 총 4개의 메뉴를 만들게 됩니다.

각 복제본을 아래로 드래그할 때 1부에서 정의한 바닥글 영역이 자동으로 아래로 이동하여 페이지에서 더 많은 세로 공간을 만든다는 것을 알 수 있습니다. 이에 따라 음식 페이지는 샘플 사이트의 다른 페이지보다 더 길어집니다.

각 메뉴 위에 기준점을 추가하여 방문자가 각 메뉴로 신속하게 이동할 수 있게 해주는 탐색 시스템을 만들어야 합니다. 음식 페이지는 더 길기 때문에 방문자가 클릭하는 메뉴에 따라 내용이 세로로 스크롤되어 해당하는 메뉴가 표시됩니다. 또한 링크 작업을 통해 방문자가 PDF 파일을 다운로드할 수 있는 다운로드 링크를 비롯하여 다양한 유형의 링크를 만드는 방법을 살펴봅니다.

기호 및 특수 문자 삽입

[문자 모양] 패널을 통해 표준 키보드에서 사용할 수 없는 ©와 같은 기호나 베타(ᵝ)와 같은 특수 문자를 입력할 수 있습니다. [문자 모양] 패널을 통해 유니코드 문자를 삽입할 수 있습니다.

삽입할 수 있는 기호 및 문자의 유형은 선택하는 글꼴에 따라 달라집니다. 예를 들어, 일부 글꼴에는 국제 문자(Ç, ë) 및 국제 통화 기호(£, ¥)가 포함될 수 있습니다. 내장된 기호 글꼴에는 화살표, 글머리 기호 및 과학 기호가 포함됩니다.

[문자 모양] 패널을 사용하여 문자를 삽입하려면 다음을 수행합니다.

텍스트 프레임 양식 편집

텍스트에 웹 글꼴, 웹 안전 글꼴, 시스템 글꼴 중 어떤 글꼴을 적용하든 디자인 보기에서 작업할 때 항상 텍스트 내용을 편집할 수 있습니다. 텍스트 프레임 자체의 양식을 변경하여 텍스트 블록을 다르게 표시할 수 있습니다.

텍스트 프레임을 텍스트의 각 섹션을 둘러싼 컨테이너라고 생각해 보십시오. 여러 방법으로 텍스트 프레임을 제어하여 라이브 사이트에서 표시되는 방식을 변경할 수 있습니다.

텍스트의 서식 및 스타일을 지정하려면 [선택] 도구를 사용하여 텍스트 프레임을 선택한 다음 변경 내용을 적용하면 텍스트 내용의 양식에 반영됩니다.

참고: [텍스트] 도구를 사용하여 텍스트를 선택한 경우 [텍스트] 패널 또는 컨트롤 패널에서 서식 옵션을 설정하여 텍스트의 스타일을 지정할 수 있습니다.

핸들을 드래그하여 늘리거나 줄이면 텍스트 프레임의 크기를 조정할 수 있습니다. 또한 페이지에서 전체 텍스트 프레임을 드래그하여 재배치할 수 있습니다. 텍스트 프레임의 크기를 조정할 때 툴팁에 치수가 표시됩니다.

텍스트 프레임을 회전할 수도 있지만 텍스트 프레임을 회전하면 (적용하는 글꼴에 상관없이) 텍스트는 이미지 파일로 내보내집니다. 텍스트 프레임은 가능한 적게 사용하고 회전된 텍스트에 제목을 추가하십시오.

텍스트 프레임 컨테이너의 양식을 변경할 때 사각형 편집에 사용하는 서식과 동일한 옵션을 사용할 수 있습니다. 채우기 색상을 설정하고 배경 이미지를 추가할 수도 있습니다. 또한 획을 설정하고 동일한 설정을 사용하여 획 두께, 색상 및 정렬을 조정할 수 있습니다. 컨트롤 패널의 [모퉁이] 및 [효과] 메뉴를 사용하여 텍스트 프레임의 [모퉁이 반경]을 설정하고 그림자, 경사 및 광선을 적용할 수 있습니다.

텍스트 프레임에 투명도를 적용하려면 불투명도 슬라이더를 사용하여 불투명도 값을 변경합니다.

[하이퍼링크] 메뉴 및 [하이퍼링크] 필드를 사용하여 텍스트에 제목을 추가하고 링크를 추가하고 새 브라우저 창에서 링크가 열릴지 정의할 수 있습니다.

이미지 주위의 텍스트 정렬 조정 및 텍스트 줄바꿈

페이지 내용 제작 시 텍스트 프레임은 매우 중요합니다. 이전 섹션에서 살펴본 것과 같이 텍스트 프레임에는 텍스트 내용은 물론 그래픽 요소와 효과도 포함되어 있습니다.

이 섹션에서는 더 많은 공백을 추가하여 안쪽 여백을 설정함으로써 텍스트 프레임 내에서 텍스트 내용을 조정하는 방법을 살펴보겠습니다. 이미지 주위에서 줄바꿈되는 텍스트 열을 추가하여 매거진 스타일의 레이아웃을 만드는 방법을 알아봅니다.

텍스트에 안쪽 여백 추가

기본적으로 텍스트 프레임에 입력, 배치 또는 붙여넣는 텍스트는 왼쪽 정렬됩니다. [간격] 패널의 설정을 보면 모두 0으로 설정되어 있습니다.

텍스트 프레임의 왼쪽, 오른쪽, 위 또는 아래에 여백을 추가하려면 원하는 값을 (픽셀로) 입력하거나 각 필드 옆에 있는 위/아래 화살표를 클릭하여 숫자 값을 늘리거나 줄일 수 있습니다.

텍스트 들여쓰기 및 행간/자간 값 조정

워드 프로세서 및 기타 모든 이미지 편집 도구의 텍스트 내용을 변경하는 것과 마찬가지로 Adobe Muse에서 텍스트 서식을 변경할 수 있습니다. [텍스트] 패널에 다양한 추가 설정이 있지만 일부 설정은 텍스트를 선택하면 컨트롤 패널에 표시되지 않습니다.

단락에서 텍스트의 첫 번째 줄을 들여쓰기하려면 다음 단계를 수행하십시오.

[텍스트] 패널의 [자간] 옵션에서 각 문자 사이의 간격을 정의할 수 있습니다. 이 옵션은 텍스트에 효과를 적용하고 웹에서 멋진 글꼴의 가독성을 높일 때 특히 유용합니다.

[자간] 필드에 픽셀 수를 입력하여 선택한 텍스트에 자간을 적용할 수 있습니다. 또는 원하는 효과를 얻을 때까지 위/아래 화살표를 클릭하여 값을 늘리거나 줄일 수 있습니다.

[행간]은 단락의 텍스트 서식 조정에 사용되는 또 다른 유용한 기능입니다. [행간]을 사용하면 텍스트 줄 간의 여백을 조정할 수 있습니다. [행간] 기능은 컨트롤 패널 및 [텍스트] 패널 모두에서 사용할 수 있습니다.

[텍스트] 패널에서 다음과 같이 4개의 타이포그래피 컨트롤을 사용할 수 있습니다.

왼쪽 여백 및 오른쪽 여백

이 설정은 텍스트 프레임이나 텍스트 프레임 테두리 양쪽의 문자 간 여백을 조정합니다. 이 설정은 [간격] 패널의 [안쪽 여백] 값을 설정하는 방법과 비슷합니다. 차이점은 ([텍스트] 도구에서 텍스트 내용을 선택하는 것이 아니라) [선택] 도구로 텍스트 프레임을 선택하여 안쪽 여백 값을 편집한다는 점입니다.

단락 앞뒤 간격

이 설정을 사용하면 단락 줄바꿈(하드 리턴) 앞뒤에 표시되는 간격을 (픽셀로) 조정할 수 있습니다. 또한 단일 텍스트 프레임 내 단락 간 여백을 늘리거나 줄일 수 있습니다.

페이지 디자인 시 텍스트 내용이 표시되는 방식을 조정할 수 있도록 [텍스트] 패널의 모든 설정을 테스트해 보십시오.

텍스트 파일에서 가져온 텍스트를 페이지에 배치

이 샘플 프로젝트의 본문에 사용할 텍스트는 Kevins_Koffee_Kart 폴더의 소스 파일에 포함되어 있습니다. 이 텍스트는 TXT 파일로 저장되어 있습니다. Adobe Muse에서는 텍스트 파일 자체를 배치하여 페이지에 내용을 추가할 수 있습니다. 텍스트 편집기로 텍스트 파일을 열고 텍스트 줄을 복사한 다음 페이지에 붙여넣는 번거로운 과정을 거치지 않아도 됩니다.

동기화된 텍스트 작업

동기화된 텍스트 작업에 관한 내용을 보려면 동기화된 텍스트 작업을 참조하십시오.

반응형 레이아웃에서 텍스트 작업

반응형 레이아웃에서 텍스트 서식을 지정하는 방법에 대한 자세한 내용은 반응형 레이아웃에서 텍스트 작업을 참조하십시오.