Adobe Muse에서 웹 사이트 와이어프레임 만들기

검색

마지막 업데이트 날짜 Nov 28, 2022 08:14:18 AM GMT

Adobe Muse에서 프로토타입을 만들거나 웹 사이트를 와이어프레이밍하는 방법을 알아봅니다.

참고:

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

Adobe Muse는 매우 직관적이어서 사용하기 쉬울 뿐만 아니라, 이를 사용하여 웹 프로젝트의 프로토타입을 신속하게 완성한 후 온라인으로 볼 수도 있습니다. 평가용 사이트를 만들 수 있다는 것은 사이트 링크를 여러분의 잠재적 고객과 공유할 수 있다는 의미입니다. 링크를 받은 잠재적 고객은 사이트 최종 버전을 표시하는 데 사용되는 것과 동일한 브라우저를 사용하여 온라인으로 프로토타입을 검토할 수 있습니다. 이렇게 하면 최종 완성된 사이트의 모습을 고객이 더 쉽게 이해할 수 있습니다.

fig01 — 와이어프레임에는 각 페이지 요소의 위치를 지정하는 자리 표시자가 포함됩니다.

와이어프레임을 디자인하거나, 구조화된 플랜 보기를 만들거나, 사이트에 대한 자리 표시자 요소를 만드는 방법을 읽어 보십시오. 컨텐트를 마무리한 후 자리 표시자 요소를 실제 페이지 요소로 대체할 수 있습니다.

와이어프레임을 사용한 작업

와이어프레임에는 사이트의 페이지 레이아웃이 표시됩니다. 와이어프레임에서 링크를 클릭하여 사이트 탐색이 어떤 식으로 이루어지는지 확인할 수도 있습니다. 와이어프레임을 충분히 살펴봤으면 최종 라이브 사이트를 방문하여 와이어프레임과 완성 버전을 비교해 보십시오. 와이어프레임에 있던 자리 표시자 요소가 사이트 최종 버전에서는 그래픽으로 바뀐 것을 알 수 있습니다.

와이어프레임의 구조를 좀 더 자세히 분석해 보고 싶으면 샘플 파일(ZIP, 4.5MB)을 다운로드하십시오. ZIP 파일의 압축을 풀고 폴더를 연 다음 KevinsKoffeeKartWire.muse 파일을 찾습니다. 이 파일을 두 번 클릭하면 Adobe Muse에서 와이어프레임이 열립니다. [플랜] 보기를 사용하면 여러 페이지가 각기 다른 층위로 구성되어 사이트맵을 이루고 있다는 사실을 알 수 있습니다. 개별 페이지를 두 번 클릭하여 [디자인] 보기에서 열고, 각 페이지가 어떻게 디자인되었는지 살펴보십시오.

Adobe Muse에는 와이어프레임을 만드는 데 도움이 되는 여러 가지 기능이 있습니다.

[디자인] 보기에서 선택 사항으로 제공하는 열 격자를 사용하면 레이아웃 요소를 쉽게 정렬할 수 있습니다.
그리기 도구의 유연성이 뛰어나므로 그래픽을 위한 자리 표시자 도형을 쉽게 만들 수 있습니다.
자리 표시자 이미지를 쉽게 업데이트할 수 있는 기능이 [에셋] 패널에 포함되어 있습니다.
사이트를 게시하거나 내보내면 모든 이미지 파일이Adobe Muse를 통해 최적화 및 분할 과정을 거친 후에 내보내집니다.
텍스트 머리글과 단락 스타일을 사용하여 체계적으로 구조화된 페이지를 만들고 텍스트 서식을 쉽게 변경할 수 있습니다.
[배치] 명령을 사용하면 브라우저에 표시된 고객의 로고를 곧바로 저장한 다음 Adobe Muse 파일에 배치할 수 있습니다.

fig02 — [파일] > [배치]를 선택하여 와이어프레임에 브랜드 요소를 쉽게 추가할 수 있습니다.

고객 승인을 받기 위한 와이어프레임 디자인

고객과 첫 회의를 마친 후 최종 사이트의 그래픽과 텍스트 서식을 전혀 사용하지 않고서 페이지 요소의 위치와 기능을 개략적으로 보여 주는 와이어프레임 모의 사이트를 만들 수 있습니다. 와이어프레임은 각 페이지의 기본 뼈대를 복제하여 화려한 색상이나 시각적 컨텐트에 시선을 빼앗기지 않은 채 사이트 구조에만 집중할 수 있는 웹 프레젠테이션의 시뮬레이션을 만드는 데 있습니다. 이미지 위치를 표시하는 자리 표시자로는 사각형이 사용되며, 텍스트 컨텐트가 포함되는 페이지 영역을 표시하는 데는 필기체 또는 일반 글꼴이 사용됩니다.

와이어프레임을 사용하면 다음과 같은 장점이 있습니다.

고객이 사이트의 구조에 집중하며 페이지 레이아웃을 좀 더 잘 이해하게 도울 수 있습니다.
대화형 라이브 환경을 구현할 수 있으므로 고객이 사이트를 효과적으로 검토하고 승인할 수 있습니다.
사이트의 디자인과 기능에 대한 요구 사항을 명확히 전달할 수 있는 커뮤니케이션 도구 역할을 합니다.

Adobe Muse는 뛰어난 웹 디자인 도구일 뿐만 아니라 프로토타입 프로젝트에도 매우 적합합니다. 즉석에서 평가용 라이브 URL을 만든 다음 해당 주소를 이메일 메시지로 고객에게 보낼 수 있으므로 승인 프로세스를 간소화할 수 있습니다. Adobe Muse를 사용하여 와이어프레임 모의 사이트를 만들었을 때 얻을 수 있는 이점은 비단 여기에서 그치지 않습니다.

Adobe Muse의 와이어프레임 관련 기능을 사용하면 다른 디자인 도구보다 한 단계 더 높은 생산성을 발휘할 수 있습니다. 이미지를 서로 주고받으며 편집하는 기능과 단락 스타일 편집 기능을 통해 웹 디자이너들이 .muse 파일을 빨리 업데이트할 수 있으며 승인된 와이어프레임을 최종 라이브 버전으로 신속하게 변환할 수 있습니다. 고객의 승인을 받은 후 와이어프레임을 용도 폐지하고 프로젝트를 처음부터 새로 작성하는 대신, 승인된 와이어프레임에 실제 웹 컨텐트를 추가하여 곧바로 업데이트를 시작하는 방식으로 최종 버전을 완성할 수 있습니다. 그 과정에서 평가용 사이트를 원하는 수만큼 게시하여 사이트를 버전별로 문서화할 수 있고, 해당 링크를 고객과 공유하여 사이트 디자인이 완성되어 가는 과정을 고객이 직접 확인하게 할 수 있습니다.

와이어프레임을 기반으로 삼아 사이트를 작성하는 기본적인 작업 과정은 다음과 같습니다.

와이어프레임을 만들고 무료 평가용 사이트를 게시합니다.
고객이 페이지를 하나씩 클릭해 보며 라이브 사이트를 검토합니다.
고객이 디자인 변경을 요청하거나 디자인에 대한 명확한 설명을 요구할 수 있습니다.
필요한 부분을 모두 수정하고 나면 고객이 와이어프레임을 승인합니다.
와이어프레임 사이트를 업데이트하여 그래픽 요소와 색상을 추가합니다.
단락 스타일을 업데이트하여 기존 텍스트 컨텐트의 서식을 지정합니다.
업데이트된 버전의 사이트를 고객이 검토한 후 추가로 변경할 부분이 있으면 이를 요청합니다.
요청을 받은 부분을 변경합니다.
고객이 최종 완성 버전을 승인합니다.
사이트를 업그레이드하고, 도메인을 설정하고, 최종 사이트를 런칭합니다.

Adobe Muse의 플랜 보기를 사용하여 사이트 구조 검사

Adobe Muse에서 와이어프레임의 .muse 파일을 열고 이를 분석해 보면 사이트의 각 페이지가 계층 구조 내에 어떤 식으로 배치되어 탐색 링크의 상위 계층과 하위 계층을 형성하는지 알 수 있습니다. 프로젝트를 열면 사이트의 모든 페이지가 [플랜] 보기에 표시됩니다.

이 예제에는 사이트맵의 계층 구조를 나타내는 두 층위(최상위 및 하위)가 있는 것을 알 수 있습니다. 사이트를 개발하거나 유지 관리하는 동안 언제든지 이러한 페이지를 클릭한 다음 사이트 구조 내의 다른 곳으로 드래그하여 위치를 조정할 수 있습니다.

새 페이지 만들기:

기존 페이지 오른쪽 또는 아래쪽에 있는 플러스 기호(+)를 클릭한 다음 페이지의 이름 필드를 클릭하고 해당 이름을 입력합니다.

되도록이면 각 페이지에 대한 설명이 담긴 이름을 사용하는 것이 좋습니다.
페이지 축소판을 마우스 오른쪽 단추로 클릭하고 메뉴 옵션이 나타나면 이를 사용하여 페이지를 복제, 삭제 또는 이름 변경할 수 있습니다.

페이지 위에 마우스 커서를 놓고 잠시 기다리면 오른쪽 위 가장자리에 X 아이콘이 나타나는데, 이를 클릭하여 페이지를 삭제할 수도 있습니다.
지금까지 설명한 내용을 따라오는 데 문제가 없었으면 페이지를 직접 추가, 위치 변경 및 삭제하여 사이트맵을 수정해 보십시오. 와이어프레임 사이트를 이전 상태로 되돌리려면 [편집] > [실행 취소]를 선택하면 됩니다.

[플랜] 보기 인터페이스는 직관적이어서 쉽게 사용할 수 있습니다. 모든 페이지 이름과 메뉴 위젯에 표시되는 링크가 Adobe Muse를 통해 자동으로 추적 및 유지 관리됩니다. 사용자가 임의의 항목을 변경하면 그와 관련된 요소가 자동으로 업데이트되어 링크가 끊어지지 않고 유지됩니다.

그래픽 스타일을 사용하여 특성 공유 자리 표시자 요소 만들기

Adobe Illustrator 및 Adobe Photoshop 소프트웨어와 마찬가지로 Adobe Muse에서도 그래픽 스타일을 쉽게 만들 수 있으므로 언제든지 모양과 느낌을 일관되게 표현하여 이를 일련의 요소에 적용할 수 있습니다. 이는 (페이지를 디자인할 때는 물론이고) 와이어프레임을 만들 때 매우 유용한 기능입니다. 기존 그래픽 스타일을 변경하기만 하면 이미 스타일이 적용된 다른 모든 페이지 요소를 재빨리 업데이트할 수 있기 때문입니다. 기존 스타일을 복사한 다음 변화를 줄 수도 있습니다.

그래픽 스타일을 사용하여 도형에 특성을 적용하고 와이어프레임 사이트의 이미지 파일에 대한 자리 표시자를 만드는 방법을 실습해 보도록 하겠습니다.

[디자인] 보기에서 [사각형] 도구를 사용하여 한 페이지에 사각형 3개를 그립니다.
사각형 하나를 선택한 후 이를 편집하여 획 색상, 채우기 색상 및 불투명도를 설정하고 그림자 같은 그래픽 효과를 추가합니다.
사각형을 선택한 상태에서 [그래픽 스타일] 패널 아래쪽에 있는 [새 그래픽 스타일 만들기]를 클릭합니다. 선택한 사각형의 서식을 기준으로 스타일이 만들어집니다. 새 그래픽 스타일을 두 번 클릭한 후 설명이 담긴 이름을 지정합니다.
나머지 사각형 중 하나를 선택한 다음 스타일 이름을 클릭하여 이 사각형에도 동일한 그래픽 스타일을 적용합니다. 같은 방법으로 셋째 사각형에도 스타일을 적용합니다. 이제 사각형 세 개의 스타일이 모두 같아졌습니다.
사각형 한 개를 선택한 후 편집하여 스타일을 조금 변경합니다. [그래픽 스타일] 패널에서 편집한 스타일의 이름 옆에 플러스 기호(+)가 표시된 것을 알 수 있습니다.
[그래픽 스타일] 패널에서 스타일의 이름을 마우스 오른쪽 단추로 클릭하고 [스타일 재정의]를 선택합니다. 나머지 사각형 두 개도 새 스타일에 맞춰 업데이트된 후 플러스 기호(+)가 사라집니다.
이와 같이 그래픽 스타일을 사용하면 신속하게 도형의 서식을 지정하여 와이어프레임에 일관성을 부여할 수 있고 고객이 변경을 요청할 때 일련의 사이트 에셋을 재빨리 업데이트할 수 있습니다.

단락 스타일을 사용하여 구조적 웹 페이지를 구성하고 텍스트 서식 지정

와이어프레임 사이트를 작성할 때 [텍스트] 도구를 사용하여 텍스트 프레임을 만들고 자리 표시자 텍스트(Lorem Ipsum)를 추가할 수 있습니다. 이 자리 표시자는 나중에 실제 컨텐트로 대체할 수 있습니다. 또는 고객에게 기존의 웹 사이트가 있으면 브라우저를 통해 텍스트를 직접 복사하여 텍스트 프레임에 붙여넣을 수도 있습니다. 텍스트 요소를 만든 다음 [텍스트] 패널을 사용하여 텍스트에 서식을 적용할 수 있습니다.

단락 스타일로 머리글 텍스트와 단락 태그를 정의하여 페이지의 텍스트 컨텐트에 대한 구조를 설정하는 방법을 실습해 보도록 하겠습니다.

[디자인] 보기에서 [텍스트] 도구를 사용하여 페이지 위로 텍스트 프레임을 드래그합니다. 텍스트 프레임에 텍스트를 직접 입력하거나 붙여넣어 프레임을 채웁니다.
[디자인] 보기 작업 영역의 위쪽에 있는 컨트롤 패널 옵션을 사용하거나 [텍스트] 패널을 사용하여 서식 옵션을 설정합니다. 가령 글꼴, 글꼴 크기, 글꼴 색 및 기타 속성을 선택할 수 있습니다.
[단락 스타일] 패널 아래쪽에 있는 [새 단락 스타일 만들기]를 클릭하여 새 단락 스타일을 만듭니다. 새 스타일의 이름을 두 번 클릭한 후 설명이 담긴 이름을 지정합니다.
스타일을 마우스 오른쪽 단추로 클릭하고 [스타일 옵션]을 선택합니다. [Paragraph 태그] 메뉴를 사용하여 P, H1, H2, H3 등과 같은 특정 HTML 태그를 대상으로 단락 스타일을 설정합니다.

[단락 스타일] 패널에서 스타일 이름을 마우스 오른쪽 단추로 클릭한 다음 [스타일 옵션] 대화 상자를 사용하여 특정 머리글 또는 단락 태그의 스타일을 정의합니다.
텍스트가 포함된 텍스트 프레임을 몇 개 더 만들어 보십시오. 텍스트 프레임을 선택한 상태에서 단락 스타일의 이름을 클릭하면 선택한 텍스트 프레임에도 해당 단락 스타일의 서식이 적용됩니다. 나중에 단락 스타일이 적용되어 있는 텍스트 프레임 중 하나를 선택하고 이를 변경하면 [단락 스타일] 패널에서 스타일의 이름 옆에 플러스 기호(+)가 표시됩니다. 이는 해당 스타일이 변경되었음을 알리는 것으로서, 그 작동 방식이 그래픽 스타일에서와 같습니다.
동일한 스타일이 사용된 모든 텍스트 프레임을 자동으로 업데이트하려면 [단락 스타일] 패널에서 스타일의 이름을 마우스 오른쪽 단추로 클릭하고 [스타일 재정의]를 선택합니다.

이 간단한 실습을 통해 알 수 있듯이, 서로 다른 텍스트 컨테이너 여러 개를 만든 다음 이들 컨테이너에 특정 스타일을 사용하도록 설정하여 디자인에 일관성을 부여할 수 있습니다. 그런 다음 와이어프레임을 기초로 사이트의 최종 버전을 디자인할 때는 고객의 요구 사항에 따라 간단히 스타일을 업데이트만 하면 됩니다. 텍스트 컨테이너를 사용하여 구조화된 웹 페이지를 만들면 검색 엔진 최적화 상위 노출에도 매우 유리합니다.

참고:

단색 배경을 사용하여 페이지를 디자인할 때는 여기에 일치하도록 텍스트 프레임의 배경 채우기 색상을 설정하는 것이 좋습니다. 이렇게 하면 Adobe Muse를 통해 텍스트 컨텐트를 좀 더 효과적으로 게시할 수 있습니다. 배경 채우기 정보가 없으면 Adobe Muse에서 텍스트 프레임의 배경색을 투명하게 설정하므로 게시된 텍스트의 앨리어싱이 비교적 매끄럽지 않게 보일 수 있습니다. 그러나 페이지 배경에 그라데이션이나 이미지를 표시하는 경우에는 텍스트 프레임의 채우기 색상을 [없음]으로 설정해 두십시오.

최종 사이트 그래픽으로 자리 표시자 이미지 업데이트

고객으로부터 와이어프레임에 대한 승인을 받고 나면 실제 이미지 파일을 사용하여 사이트를 재빨리 업데이트할 수 있습니다.

페이지에서 이미지 자리 표시자를 선택합니다.
[에셋] 패널을 열고 선택된 페이지 요소를 찾습니다.
페이지 요소를 마우스 오른쪽 단추로 클릭합니다. 와이어프레임 사이트를 어떤 식으로 구성했는가에 따라 두 가지 방법 중 하나로 이미지 파일을 업데이트할 수 있는 메뉴가 나타납니다.

Adobe Photoshop 또는 Adobe Fireworks 소프트웨어를 사용하여 만든 파일을 페이지에 배치한 경우에는 [원본 편집]을 선택한 후 해당 파일을 만드는 데 사용된 소프트웨어에서 원본 파일을 편집할 수 있습니다. 마스터 파일을 저장하고 Adobe Muse로 돌아오면 이미 배치된 파일 인스턴스가 사이트에서 자동으로 업데이트됩니다.

한편, Adobe Muse에서 [사각형] 도구를 사용하여 이미지의 자리 표시자를 만든 경우에는 [모든 인스턴스 다시 링크]를 선택하고 컴퓨터에 있는 파일을 찾아 선택하면 자리 표시자 파일이 최종 그래픽 이미지로 대체됩니다.

에셋 이름을 마우스 오른쪽 단추로 클릭하고 [원본 편집]을 선택하면 자리 표시자의 마스터 파일을 생성하는 데 사용했던 이미지 편집 프로그램에서 해당 파일이 열립니다.
이 과정을 반복하여 페이지의 모든 자리 표시자 이미지를 실제 이미지 파일로 바꿉니다.

참고:

[에셋] 패널에서 에셋의 이름을 마우스 오른쪽 단추로 클릭한 다음 [에셋으로 이동]을 선택할 수도 있습니다. 이 옵션을 사용하면 선택한 에셋을 포함하고 있는 페이지가 Adobe Muse에서 열리므로 이를 신속하게 업데이트할 수 있습니다.

Adobe Muse를 통해 최적화 과정을 거쳐 생성된 이미지 파일에 액세스

작성된 Adobe Muse 사이트를 호스트 서버에 게시할 수 있을 뿐만 아니라, 전체 사이트를 내보내 분할된 이미지 파일의 폴더를 얻을 수도 있습니다.

[파일] > [HTML로 내보내기]를 선택합니다.

[HTML로 내보내기] 대화 상자가 나타납니다.
사이트 파일을 내보낼 컴퓨터 폴더 위치를 선택한 다음 [확인]을 클릭합니다.

이 작업을 수행하면 Adobe Muse를 통해 내보낸 파일이 컴퓨터의 지정된 로컬 폴더에 저장됩니다. 해당 폴더를 찾아 이미지 폴더를 열면 최적화된 이미지 파일에 액세스할 수 있습니다. 뉴스레터, 모바일 응용 프로그램, 소셜 네트워크 페이지 및 기타 관련 프로젝트를 만드는 데 이러한 이미지 파일을 재활용할 수 있습니다.

내 계정 로그인