Adobe Muse에서 양식 위젯 사용

Adobe Muse를 엽니다. [디자인 보기]에서 연락처 양식을 추가하려는 페이지를 두 번 클릭하여 엽니다.

[위젯 라이브러리] 패널을 엽니다([창] > [위젯 라이브러리]). [양식]을 클릭한 후 다음 두 가지 양식 유형 중 하나를 선택합니다.

• 자세한 연락처 정보
• 간단한 연락처 정보

연락처 위젯을 페이지로 드래그합니다.

양식을 페이지로 드래그했으면 [선택] 도구로 양식을 한 번 클릭하여 선택한 후 원하는 위치에 양식을 배치합니다.

[양식] 위젯은 반응형이므로 다양한 화면 크기로 이 위젯을 미리 보고 그 동작을 확인할 수 있습니다. 위젯의 위치를 변경하거나 연락처 양식 필드에 대한 고정 및 크기 조정 옵션을 수정하려면 먼저 원하는 위치에 중단점을 추가해야 합니다. 그런 다음 고정시키거나 크기를 조정하려는 필드를 두 번 클릭하여 선택합니다. 크기 조정 옵션으로 [없음] 또는 [반응형 폭]을 선택할 수 있습니다.

[양식] 위젯을 페이지의 특정 위치에 고정시키려면 상단 [도구 모음]에서 [핀으로 고정] 옵션을 선택합니다.

반응형 웹 사이트를 디자인할 때는 고정된 위치에 특정 연락처 양식 필드를 고정하도록 선택할 수 있습니다. 이렇게 하려면 중단점을 추가하십시오. 방문자가 이 중단점에 상응하는 화면 크기로 이 웹 사이트를 보는 경우 해당 연락처 양식 필드가 다음 단계에서 지정하는 위치에 고정되어 표시됩니다.

고정할 필드를 두 번 클릭한 후 필요한 고정 옵션을 선택하십시오.

양식 위젯 및 개별 양식 필드에 대해 필요한 크기 조정 옵션을 선택할 수도 있습니다. 크기 조정 속성을 설정할 요소를 선택하고 페이지 맨 위에 있는 컨텍스트 메뉴에서 크기 조정 옵션을 선택하십시오.

연락처 양식에 대한 크기 조정 옵션으로 [없음] 또는 [반응형 폭]을 선택할 수 있습니다.

[선택] 도구를 사용하여 전체 [연락처 양식] 위젯을 선택합니다. 전체 양식을 선택하면 [컨트롤] 패널의 왼쪽 상단에 있는 [선택 표시기]에 [양식: 표준]이 표시됩니다.

[표준] 링크는 일반적인 메뉴 항목 또는 단추처럼 다음 네 가지 상태 중 하나를 선택할 수 있는 메뉴입니다.

• 표준
• 제출 진행 중
• 제출 성공
• 제출 오류

각 상태에 따라 양식이 표시되는 모양을 조정하려면 이 메뉴에서 그에 상응하는 상태를 선택하면 됩니다.

이 상태를 선택했을 때는 오류 메시지의 모양을 조정할 수 있습니다. 예를 들어, 텍스트 내용을 변경하거나 오류 텍스트 색상을 빨강에서 파랑으로 바꿀 수 있습니다.

선택 표시자 메뉴에서 다시 [표준] 상태를 선택합니다.

전체 양식을 [표준] 상태로 선택한 채 파란색 화살표를 클릭하여 [옵션] 메뉴를 엽니다. [옵션] 메뉴의 여러 옵션은 전체 위젯에 영향을 줍니다.

[양식 이름] 필드에는 기본적으로 현재 페이지의 이름이 입력되어 있습니다. 원한다면 이 이름을 변경할 수 있습니다.

양식 제출 정보를 여러 이메일 주소로 전달하려면 [이메일 받는 사람] 필드에 이메일 주소를 (세미콜론으로 구분하여) 입력합니다.

양식 제출 동작을 설정하려면 [보낸 후 동작] 메뉴에서 필요한 옵션을 선택합니다. [옵션] 메뉴에서 다음 옵션 중 하나를 선택합니다.

• 현재 페이지에 머물기(기본값)
• 파일에 링크(양식 제출 후 링크된 파일 업로드)

추가할 수 있는 새 양식 요소는 두 가지 유형이 있습니다.

표준 필드

표준 필드에 포함되는 항목은 다음과 같습니다.

• 전자 우편
• 회사
• 이름
• 직장 전화번호
• 휴대폰 번호
• 직장 주소
• 집 전화번호
• 웹 사이트
• 집 주소
• Captcha

이러한 필드 중 하나를 추가하려면 필요한 필드에 해당하는 확인란을 선택합니다.

연락처 양식에 대한 사용자 정의 필드를 추가하려면, 추가하려는 사용자 정의 필드 옆에 있는 + 단추를 클릭한 다음 양식에 새로 추가하려는 양식 필드 요소에 대한 설명이 담겨 있는 레이블을 [디자인 보기]에서 입력합니다.

다음은 연락처 양식에 추가할 수 있는 사용자 정의 필드의 유형입니다.

• 한 줄 텍스트: 한 줄 텍스트 필드는 방문자의 나이 또는 우편 번호 등과 같이 길이가 짧은 텍스트에 적합합니다.
• 여러 줄 텍스트: 방문자가 코멘트를 남기거나 질문을 하는 등 텍스트를 길게 입력할 수 있도록 하려면 여러 줄 텍스트 필드를 추가합니다.
• 확인란
• 확인란 그룹
• 라디오 단추 그룹

전체 양식을 한 번 클릭하여 [양식] 위젯 전체를 선택합니다. [양식] 위젯 내 개별 요소를 선택하려면 요소를 두 번 클릭하여 선택합니다.

전체 위젯을 선택했는지, 개별 요소를 선택했는지 알아보려면 [선택 표시기]를 봅니다. 전체 위젯을 선택한 경우 [선택 표시기]에 [양식]이 표시되고 특정 필드를 선택한 경우에는 [텍스트 입력]이 표시됩니다.

[텍스트 입력] 양식 요소를 선택하고 파란색 화살표 단추를 클릭하여 [옵션] 메뉴를 열면 이 요소와 관련된 설정을 구성하는 데 사용할 수 있는 옵션이 표시됩니다.

[텍스트 입력] 요소를 선택한 상태로 [옵션] 메뉴에서 이 필드를 필수 항목으로 지정할지 여부를 선택할 수 있습니다. 방문자가 필드를 채울 때 입력해야 할 내용을 쉽게 알 수 있도록 필드에 대한 설명을 표시할지 여부도 선택할 수 있습니다.

[파트] 섹션에서 확인란을 선택하거나 선택 취소하여 필드의 레이블 및 메시지 텍스트를 표시하거나 숨길 수 있습니다.

양식 요소를 선택했을 때 선택 표시자에 요소의 이름 외에 상태 메뉴가 함께 표시될 수 있습니다. 이는 컨트롤 패널에서 해당 상태를 선택할 수 있음을 의미합니다(해당되는 경우). 선택 표시자의 메뉴를 사용하면 양식 요소를 편집하는 과정에서 원하는 상태를 쉽게 선택할 수 있습니다.

상태를 선택한 다음 [채우기] 패널이나 컨트롤 패널을 사용하여 그 모양을 조정할 수 있습니다.

양식 필드에 대해 구성할 수 있는 상태는 다음과 같습니다.

• 비어 있음
• 빈 항목 없음
• 롤오버
• 초점
• 오류

[제출] 단추를 선택하면 [제출] 단추의 상태가 표시됩니다.

[제출] 단추에 대해 구성할 수 있는 상태는 다음과 같습니다.

• 표준
• 롤오버
• 마우스 누름
• 제출 진행 중

전체 양식의 상태는 전체 양식을 선택한 경우에 표시됩니다.

• 표준
• 제출 진행 중
• 제출 성공
• 제출 오류

업데이트할 양식 요소 또는 전체 양식을 [선택] 도구로 선택합니다.

예를 들어 [제출] 단추에 표시되는 텍스트를 변경하려면 연락처 양식의 [제출] 단추를 직접 두 번 클릭합니다. [텍스트] 도구를 사용해 [제출] 텍스트를 선택하여 [제출] 단추의 텍스트를 변경할 수 있습니다. 텍스트를 삭제하고 단어를 새로 입력합니다. 선택 표시자의 메뉴를 사용하여 [제출] 단추의 다른 상태를 선택한 후 해당 상태에 대한 텍스트를 변경할 수도 있습니다.

양식 요소를 선택한 후에는 요소의 모양을 조정할 수 있습니다.

예를 들어 [이름] 필드를 두 번 클릭하여 선택합니다. [이름] 필드에 대한 텍스트 입력을 선택하려면 [컨트롤] 패널 또는 [채우기] 패널의 옵션을 사용하여 텍스트 필드의 배경색을 설정할 수 있습니다.

[채우기] 패널 옵션을 사용하여 채우기 색상을 단색 또는 그라데이션으로 설정할 수 있습니다. 채우기의 배경 이미지를 설정하고 [맞춤] 및 [위치] 옵션을 설정할 수도 있습니다. [불투명도] 설정을 수정하여 채우기의 투명도를 조정할 수 있습니다.

[함께 편집] 옵션을 해제하지 않았을 때는 필드를 하나만 편집해도 모든 필드가 업데이트됩니다. (이 옵션은 기본적으로 활성화되어 있습니다.) 이 기능을 사용하면 양식의 디자인에 일관성을 유지하고 시간을 절약하는 데 도움이 됩니다. 그러나 필드의 스타일을 개별적으로 지정하고 싶으면 언제든지 전체 양식을 선택하고 파란색 화살표 단추를 클릭하여 [옵션] 메뉴를 연 다음 [함께 편집]을 선택 취소하면 됩니다.

[게시] 단추를 클릭한 다음 [확인]을 클릭합니다.

브라우저 창이 열리고 방금 게시한 사이트가 표시됩니다.

연락처 양식이 있는 페이지를 열고 라이브 사이트에서 양식을 사용해 봅니다. 필수 필드에 아무런 내용을 입력하지 않은 채 양식을 제출했을 때 어떤 결과가 발생하는지 테스트합니다. 양식의 모양과 기능을 확인하고, 오류 메시지가 제대로 표시되는지 특히 주의 깊게 살펴봅니다.

양식이 처음 계획한 대로 작동하고 표시되는 것을 확인했으면 몇몇 자리 표시자에 메시지를 입력한 후 양식을 제출하여 메시지가 제대로 전송되는지 테스트합니다. 이메일을 조사하여 받은 편지함에 메시지가 도착했는지 확인합니다.

왼쪽 사이드 바에서 [보고서] 범주에 있는 [웹 양식 사용 현황] 옵션을 클릭합니다. 양식 제출과 관련된 최근의 양식 활동이 그래프로 표시됩니다.

대시보드의 보고서를 사용하면 웹 사이트 방문자에 대한 많은 정보를 얻을 수 있습니다. 사이트의 트래픽이 가장 많은 시간대가 언제인지 추세를 살펴볼 수 있고, 사이트에 추가한 양식의 성능을 점검할 수 있습니다.

사이트의 컨텐트를 업데이트하거나 프로모션을 추가할 시점을 결정할 때 이 정보를 유용하게 활용할 수 있습니다. 이를 통해 방문자로부터 메시지나 피드백을 받을 수 있으므로 방문자와 교류하는 데도 도움이 됩니다. 사이트에서 일방적으로 정보만 표시하는 대신 방문자들과 대화를 주고받을 수 있습니다.

Muse를 사용하여 사이트를 구축하는 방법을 자세히 살펴보려면 Adobe Muse 자습서 페이지를 방문하십시오. 오늘의 사이트(Site of the Day) 페이지에서 Muse를 사용하여 만든 최신 웹 디자인의 예도 살펴보십시오.

Adobe Muse에서 [창] > [위젯 라이브러리] > [양식]을 선택합니다. 드래그한 다음 간단한 연락처 또는 자세한 연락처 양식을 추가합니다.

[옵션] 창의 Captcha 드롭다운 목록에서 reCAPTCHA v2를 선택합니다.

Google에서 reCAPTCHA 버전 1을 더 이상 지원하지 않으므로 reCAPTCHA v2를 선택할 것을 권장합니다.

reCAPTCHA 필드(이미지 확인)가 양식에 추가됩니다.

다음 옵션을 사용하여 reCAPTCHA를 구성합니다.

• 공개 키: 사용자를 위한 JavaScript 코드에서 사용됩니다. reCAPTCHA 키 생성에 관한 자세한 내용은 공개 키 및 개인 키 생성을 참조하십시오.
• 개인 키: 웹 사이트 서버와 Google 서버 간 통신에 사용됩니다. 개인 키를 저장할 것을 강력하게 권장하며 알려지지 않도록 하십시오. 개인 키를 잊어버리면 Google에서 복구할 수 없습니다. reCAPTCHA 키 생성에 관한 자세한 내용은 공개 키 및 개인 키 생성을 참조하십시오.
• 입력 필요: reCAPTCHA가 필수인지 아닌지를 지정합니다. 이 옵션은 기본적으로 편집할 수 없으며 기본값으로 선택되어 있습니다.
• 테마: reCAPTCHA 상자에 밝은 테마와 어두운 테마 중 어느 것을 적용할지 지정합니다.
• 유형: reCAPTCHA 확인에 이미지 확인과 오디오 재생 중 어느 것을 활성화할지 지정합니다. 오디오 재생을 사용하면 앞이 보이지 않거나 시력이 좋지 않은 사용자가 웹 사이트를 쉽게 탐색할 수 있습니다.
• 크기: reCAPTCHA를 일반 크기로 사용할지 작은 크기로 사용할지 지정합니다.
  
• 레이블: reCAPTCHA 필드의 레이블을 표시하려면 선택합니다. 이 필드를 통해 양식의 reCAPTCHA 섹션에 제목을 추가할 수 있습니다.
• 메시지 텍스트: 메시지를 표시하려면 선택합니다.

브라우저에서 Google Admin Console을 엽니다. Google Admin Console에서 Sign Up Now를 클릭하여 Google 계정으로 로그인하거나 가입하기 옵션을 사용하여 가입합니다.

로그인하면 Google reCAPTCHA 홈페이지가 표시됩니다.

페이지 상단에 있는 [reCAPTCHA 받기] 버튼을 클릭합니다.

[도메인] 필드에 웹 사이트의 도메인 이름을 입력합니다. 웹 사이트의 전체 URL이 아닌 도메인 이름만 입력합니다. (예: mysamplemusewebsite.com).

[등록]을 클릭하여 웹 사이트에서 사용할 고유 공개 키와 개인 키를 생성합니다.

공개 키(사이트 키)와 개인 키(비밀 키)가 생성된 것을 볼 수 있습니다.

사이트 키와 비밀 키를 각각 Adobe Muse의 [공개 키]와 [비밀 키] 필드에 복사합니다.

키 전체를 복사했는지 확인하고 문자 누락이 없도록 하십시오.

도메인용 키 쌍을 획득하면 Adobe Muse 사이트의 모든 양식에서 동일한 키를 공유할 수 있습니다. 하나를 바꾸면 자동으로 전체가 바뀌며, 모든 페이지와 관련 .php 스크립트의 다시 내보내기가 예정됩니다. 서버에 접속할 때 사용하는 FTP 파일이 타사 도구인 경우에는 업데이트된 파일 뿐 아니라 서버의 모든 .html 및 .php 파일(.php 파일은 "scripts/" 폴더에 있음)을 복사해야 합니다.

브라우저 또는 Adobe Muse에서 페이지를 미리 보기하여 reCAPTCHA를 테스트합니다.